/* =============================================================================
   TB COOKIES — capa de estilo propia
   -----------------------------------------------------------------------------
   Va DESPUÉS de cookieconsent.css. Cinco partes:

   §1 · Variables — las que la propia librería expone: color, tipografía,
        radios. Aquí se enganchan los tokens del theme (--body, --ink,
        --paper, --ui-fs, --nav-tracking) con valores de reserva, para que
        en otro theme siga funcionando sin tocar nada.
   §2 · El aviso.
   §3 · El panel de preferencias.
   §4 · Móvil.
   §5 · El enlace de preferencias del pie.

   POR QUÉ HAY QUE PISAR SELECTORES DE LA LIBRERÍA
   CookieConsent viene con un cuerpo de 16 px, botones de 42 px de alto y
   cajas a todo el ancho: correcto para una web normal, enorme al lado de
   una interfaz de 9 px. No expone ni una variable de tamaño, así que la
   única forma es redefinir unos pocos selectores suyos. Son los mínimos,
   todos de tipografía y espaciado, y están todos en este archivo: si algún
   día se actualiza la librería, es aquí donde hay que mirar.

   EL REGISTRO: Univers, 9 px, versales, 0.08em de tracking. Filete de un
   píxel. Sin sombras, sin esquinas redondeadas, sin fondos de color, sin
   degradados. Lo justo para leerse y quitarse de en medio.
   ============================================================================= */


/* ---------- §1 · Variables ---------- */

#cc-main {
  /* La tipografía del theme. --body en mut_mariona es Univers. */
  --cc-font-family: var(--body, "Univers", Helvetica, Arial, sans-serif);

  --cc-bg: var(--paper, #fff);
  --cc-primary-color: var(--ink, #161513);
  --cc-secondary-color: var(--ink, #161513);

  --cc-btn-primary-bg: var(--ink, #161513);
  --cc-btn-primary-color: var(--paper, #fff);
  --cc-btn-primary-border-color: var(--ink, #161513);
  --cc-btn-primary-hover-bg: var(--paper, #fff);
  --cc-btn-primary-hover-color: var(--ink, #161513);
  --cc-btn-primary-hover-border-color: var(--ink, #161513);

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--ink, #161513);
  --cc-btn-secondary-border-color: var(--ink, #161513);
  --cc-btn-secondary-hover-bg: var(--ink, #161513);
  --cc-btn-secondary-hover-color: var(--paper, #fff);
  --cc-btn-secondary-hover-border-color: var(--ink, #161513);

  --cc-separator-border-color: var(--rule, rgba(0, 0, 0, 0.12));
  --cc-section-category-border: transparent;

  --cc-toggle-on-bg: var(--ink, #161513);
  --cc-toggle-off-bg: #cfcfcf;
  --cc-toggle-readonly-bg: #e6e6e6;
  --cc-toggle-on-knob-bg: var(--paper, #fff);
  --cc-toggle-off-knob-bg: var(--paper, #fff);
  --cc-toggle-readonly-knob-bg: var(--paper, #fff);

  /* Categorías sin caja de color: solo un filete */
  --cc-cookie-category-block-bg: transparent;
  --cc-cookie-category-block-border: var(--rule, rgba(0, 0, 0, 0.12));
  --cc-cookie-category-block-hover-bg: transparent;
  --cc-cookie-category-block-hover-border: var(--ink, #161513);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: transparent;

  /* El velo del panel, casi blanco: no apaga la foto de detrás */
  --cc-overlay-bg: rgba(255, 255, 255, 0.86);

  --cc-link-color: var(--ink, #161513);
  --cc-link-hover-color: var(--ink, #161513);

  --cc-btn-border-radius: 0;
  --cc-modal-border-radius: 0;
  --cc-pm-toggle-border-radius: 999px;

  --cc-modal-margin: var(--gutter, 16px);
  --cc-z-index: 2147483000;

  /* Base de la que cuelgan todos los em de la librería */
  font-size: var(--ui-fs, 9px);
  letter-spacing: var(--nav-tracking, 0.08em);
}

/* NINGUNA SOMBRA, en ningún sitio. Lo que separa una caja del fondo es un
   filete de un píxel. */
#cc-main .cm,
#cc-main .pm,
#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main .pm__close-btn,
#cc-main .section__toggle,
#cc-main .toggle__icon { box-shadow: none !important; }

/* Tipografía común a las dos ventanas */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title,
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-size: var(--ui-fs, 9px);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking, 0.08em);
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-size: var(--ui-fs, 9px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: var(--nav-tracking, 0.08em);
}

/* Los enlaces, subrayado fino y sin negrita */
#cc-main .cm__desc a,
#cc-main .pm__section-desc a {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .cm__desc a:hover,
#cc-main .pm__section-desc a:hover { opacity: 0.55; }

/* Botones del tamaño de su texto, no de 42 px de alto.
   TODOS MIDEN LO MISMO DE ALTO. Un alto fijo, el mismo para los tres, en
   vez de dejarlo al criterio del flex: con align-items solo, un botón con
   descendentes en su texto (la "j" de REJECT no, pero la "g" de GUARDAR
   sí) crecía un par de píxeles y la fila quedaba descuadrada. Con
   height + line-height iguales eso no puede pasar. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  height: 24px;
  min-height: 0;
  min-width: 0;
  line-height: 24px;
  padding: 0 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  transition: background-color var(--t-ui, 0.2s ease), color var(--t-ui, 0.2s ease);
}


/* ---------- §2 · El aviso ---------- */

#cc-main .cm {
  max-width: 264px;
  border: 1px solid var(--ink, #161513);
}

#cc-main .cm__body { padding: 0; }
#cc-main .cm__texts { padding: 14px 0 0; }
#cc-main .cm__title { padding: 0 14px; margin: 0 0 7px; }
#cc-main .cm__desc { padding: 0 14px 12px; max-height: 50vh; }

/* LOS BOTONES, EN FILA Y DEL ANCHO DE SU TEXTO.
   De fábrica son tres bloques negros apilados a todo el ancho: es lo que
   hacía que el aviso pesara tanto en pantalla. */
#cc-main .cm__btns {
  padding: 0 14px 14px;
  border-top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
}

/* LOS GRUPOS DESAPARECEN. La librería reparte los tres botones en dos
   <div> ("aceptar + rechazar" por un lado, "preferencias" por otro) y
   cada grupo se alinea por su cuenta: con alturas distintas, la fila
   quedaba descuadrada por unos píxeles. display:contents disuelve esos
   dos <div> y deja los tres botones en la misma fila flex, así que se
   alinean entre ellos y no entre cajas. */
#cc-main .cm__btn-group { display: contents; }

/* Y FUERA EL MARGEN DE APILADO. La librería separa cada botón del
   anterior con un margin-top de 6 px, pensado para cuando van uno encima
   de otro. En fila, ese margen bajaba el segundo botón seis píxeles y era
   exactamente lo que hacía que RECHAZAR pareciera de otro tamaño. */
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group { margin: 0; }

/* "Preferencias" no compite con aceptar y rechazar: es un enlace */
/* "Preferencias" no compite con aceptar y rechazar: es un enlace, y se
   va a su propia línea (flex-basis 100%). */
#cc-main .cm__btn--secondary {
  flex: 0 0 100%;
  justify-content: flex-start;
  margin-top: 3px;
  background: none;
  border: 0;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .cm__btn--secondary:hover {
  background: none;
  color: var(--ink, #161513);
  opacity: 0.55;
}


/* ---------- §3 · El panel de preferencias ---------- */

#cc-main .pm {
  max-width: 380px;
  border: 1px solid var(--ink, #161513);

  /* EL ALTO. La librería lo fija en em (37.5em) y, con la base en 9 px,
     eso son 338 px: el panel salía cortando una categoría por la mitad.
     Aquí se da en px y vh: cabe entero en una pantalla normal y se
     encoge en las bajas, sin quedarse nunca a medias. */
  height: auto;
  max-height: min(560px, 84vh);
}

/* Sin filete bajo la cabecera ni sobre el pie: el panel ya tiene su
   marco, y esas dos rayas lo partían en tres franjas. */
#cc-main .pm__header { padding: 14px; border-bottom: 0; }
#cc-main .pm__title { margin: 0; }

/* El cuerpo se estira con el panel y scrollea solo si hiciera falta */
#cc-main .pm__body { padding: 0 14px; }

#cc-main .pm__footer { padding: 12px 14px; gap: 5px; flex-wrap: wrap; border-top: 0; }
#cc-main .pm__btn-group { gap: 5px; flex-wrap: wrap; }

#cc-main .pm__section { margin: 0 0 8px; border-radius: 0; }

/* Las cajas de categoría. Las medidas van en px porque las de la librería
   van en em y, con una base de 9 px, el hueco de la flecha se queda corto
   y el título se monta encima. */
#cc-main .pm__section--toggle .pm__section-title {
  min-height: 0;
  padding: 11px 40px 11px 14px;
}
#cc-main .pm__section--expandable .pm__section-title { padding-left: 38px; }
#cc-main .pm__section--expandable .pm__section-arrow {
  left: 12px;
  width: 16px;
  height: 16px;
  background: transparent;
}
#cc-main .pm__section--expandable .pm__section-arrow svg { stroke-width: 1.5px; }

#cc-main .pm__section-desc-wrapper { border: 0; }
#cc-main .pm__section-desc-wrapper .pm__section { padding: 10px 14px; margin: 0; }

/* La X de cerrar, del tamaño de la interfaz */
#cc-main .pm__close-btn {
  width: 22px;
  height: 22px;
  border-color: var(--rule, rgba(0, 0, 0, 0.12));
}
#cc-main .pm__close-btn svg { stroke-width: 1.5px; }

/* LOS INTERRUPTORES SE ESCALAN, NO SE REDIMENSIONAN.
   La librería los monta con medidas fijas que encajan entre sí: pastilla
   de 50x23, bolita de 23 y un translateX calculado para ese ancho. Si se
   cambian los anchos a mano, la bolita y el aspa dejan de caer donde
   deben —que es lo que se veía: el aspa fuera del sitio y una rayita
   suelta al lado—. Escalando el conjunto, la geometría interna sigue
   siendo la suya y solo cambia el tamaño en pantalla. */
#cc-main .section__toggle-wrapper {
  transform: scale(0.6);
  transform-origin: right center;
}


/* ---------- §4 · Móvil (≤640) ---------- */
/* La librería trae aquí SUS PROPIAS reglas y todas con !important: caja a
   todo el ancho, botones apilados a lo alto y un filete encima de la
   botonera. Para que el móvil se comporte como el escritorio hay que
   repetir lo de arriba con la misma arma. Es el único sitio del archivo
   donde se usa !important, y es por esto. */
@media screen and (max-width: 640px) {
  #cc-main .cm { max-width: none !important; }

  #cc-main .cm__btns {
    padding: 0 14px 14px !important;
    border-top: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  #cc-main .cm__title,
  #cc-main .cm__desc { padding-left: 14px !important; padding-right: 14px !important; }

  #cc-main .cm__btn-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: auto !important;
    gap: 5px !important;
  }

  #cc-main .cm__btn + .cm__btn,
  #cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }

  #cc-main .cm__btn { flex: 0 1 auto !important; width: auto !important; }

  #cc-main .pm__footer,
  #cc-main .pm__btn-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: auto !important;
  }
  #cc-main .pm__btn + .pm__btn,
  #cc-main .pm__btn-group + .pm__btn-group { margin: 0 !important; }
  #cc-main .pm__btn { flex: 0 1 auto !important; width: auto !important; }
}


/* ---------- §5 · El enlace de preferencias del pie ---------- */
.tb-cookies-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.tb-cookies-link:hover { opacity: 0.55; }