/* Personalización del banner: sustituye los colores por los de tu tienda.
   Cárgalo DESPUÉS de cookieconsent.css */
:root {
  --cc-font-family: inherit;
  --cc-bg: #ffffff;
  --cc-primary-color: #2b2b2b;
  --cc-secondary-color: #5c5c5c;

  /* Botones: mismo color/peso para Aceptar y Rechazar (requisito AEPD/CNPD) */
  --cc-btn-primary-bg: #a62027;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #a62027;
  --cc-btn-primary-hover-bg: #6B1419;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #6B1419;

  --cc-btn-secondary-bg: #a62027;
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: #a62027;
  --cc-btn-secondary-hover-bg: #6B1419;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #6B1419;

  --cc-link-color: #a62027;
  --cc-separator-border-color: #e5e5e5;
  --cc-modal-border-radius: .6rem;
  --cc-btn-border-radius: .4rem;
}

/* Disposición del banner, apilada en vertical (móvil y escritorio):
   1) Aceptar todas
   2) Rechazar todas
   3) Configurar (enlace discreto)
   Se usa !important y 'order' para imponerse al CSS de la librería. */
#cc-main .cm .cm__btns {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
}
#cc-main .cm .cm__btn-group {
  display: contents !important;
}
#cc-main .cm .cm__btn[data-role="all"]       { order: 1 !important; width: 100% !important; margin: 0 !important; }
#cc-main .cm .cm__btn[data-role="necessary"] { order: 2 !important; width: 100% !important; margin: 0 !important; }
#cc-main .cm .cm__btn[data-role="show"]      { order: 3 !important; width: 100% !important; margin: 0 !important; }

/* "Configurar" como enlace de texto discreto bajo los dos botones.
   Se mantiene legible (tamaño y contraste suficientes) y subrayado,
   para que siga siendo claramente visible como opción. */
#cc-main .cm__btn[data-role="show"] {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--cc-secondary-color);
  font-size: .85rem;
  font-weight: 400;
  text-decoration: underline;
  padding: .25rem 0;
  min-height: 0;
}
#cc-main .cm__btn[data-role="show"]:hover {
  background: none;
  color: var(--cc-primary-color);
}

/* Botón flotante para reabrir la configuración de cookies (opcional) */
#cc-open {
  position: fixed;
  left: 1.25rem;
  /* Encima del icono del chat (esquina inferior izquierda).
     Si se pisan, aumenta este valor; si queda muy alto, redúcelo. */
  bottom: 6.5rem;
  z-index: 999;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 50%;
  background: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
#cc-open:hover { background: #f3f3f3; }

/* En móvil el chat está a la derecha: el botón de cookies vuelve abajo a la izquierda */
@media (max-width: 767px) {
  #cc-open {
    bottom: 1.25rem;
  }
}