/* ═══════════════════════════════════════════════════════════════════════════
   Banner de cookies — colores de NekoStrip
   ═══════════════════════════════════════════════════════════════════════════

   vanilla-cookieconsent trae su propio aspecto (azul, redondeado, genérico).
   Aquí solo se reescriben sus variables para que use la paleta del sitio.

   Va en un archivo aparte y NUNCA dentro de vendor/cookieconsent.css: ese es
   código de terceros y hay que poder actualizarlo sin perder estos cambios.
   Se carga DESPUÉS del suyo, que es lo que hace que estas variables ganen.

   Los colores se toman de var(--accent), var(--text)… que están definidas en
   neko-doc.css (las 10 páginas de documento) y en el <style> de index.html.
   Las dos definiciones coinciden en todo lo que se usa aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

#cc-main {
  --cc-font-family: var(--font);

  /* Superficies. El banner es una tarjeta blanca sobre el gris del sitio,
     igual que los paneles del resto de páginas. */
  --cc-bg: var(--panel);
  --cc-primary-color: var(--text);
  --cc-secondary-color: var(--dim);
  --cc-separator-border-color: var(--line);
  --cc-link-color: var(--accent3);

  /* El velo oscuro de detrás del modal de preferencias. Tirando a azulado
     como --strong, no negro puro: el negro puro sobre un fondo cálido se ve
     sucio. */
  --cc-overlay-bg: rgba(27, 46, 56, .55);

  /* ── Botones ──────────────────────────────────────────────────────────
     El radio y el grosor son los de .btn en neko-doc.css, para que se lean
     como los botones del resto del sitio. */
  --cc-btn-border-radius: 11px;

  --cc-btn-primary-bg: var(--accent);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--accent);
  --cc-btn-primary-hover-bg: var(--accent3);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--accent3);

  /* ⚠️ "Rechazar" usa el estilo secundario, y por eso NO es un enlace
     desvaído ni un borde casi invisible: es un botón sólido, del mismo
     tamaño, mismo radio y mismo grosor de letra que "Aceptar". Solo cambia
     el color, que es lo que distingue la acción principal de la otra.

     Esto no es capricho estético. Un banner donde rechazar se ve como un
     enlace de letra pequeña mientras aceptar es un botón grande de color es
     justo el patrón que la AEPD considera consentimiento no válido. Si algún
     día se retoca el aspecto, esto es lo que no se puede tocar. */
  --cc-btn-secondary-bg: #eceef0;
  --cc-btn-secondary-color: var(--strong);
  --cc-btn-secondary-border-color: #dfe3e6;
  --cc-btn-secondary-hover-bg: #e2e5e8;
  --cc-btn-secondary-hover-color: var(--strong);
  --cc-btn-secondary-hover-border-color: #d3d8dc;

  /* ── Interruptores de categoría ───────────────────────────────────── */
  --cc-toggle-on-bg: var(--accent);
  --cc-toggle-off-bg: #85929a;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-enabled-icon-color: var(--accent);
  --cc-toggle-disabled-icon-color: #85929a;
  --cc-pm-toggle-border-radius: 20px;

  /* Las imprescindibles van bloqueadas: se pintan en verde apagado para que
     se vea de un vistazo que están activas y que no es un descuido. */
  --cc-toggle-readonly-bg: #c3d6cd;
  --cc-toggle-readonly-knob-bg: #fff;
  --cc-toggle-readonly-knob-icon-color: var(--ok);

  /* ── Bloques de categoría dentro de "Preferencias" ────────────────── */
  --cc-cookie-category-block-bg: var(--bg);
  --cc-cookie-category-block-border: var(--line);
  --cc-cookie-category-block-hover-bg: #f1f3f4;
  --cc-cookie-category-block-hover-border: rgba(27, 46, 56, .18);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #e9ecee;
  --cc-section-category-border: var(--line);

  --cc-footer-bg: var(--bg);
  --cc-footer-color: var(--dim);
  --cc-footer-border-color: var(--line);

  --cc-modal-border-radius: 16px;
  --cc-modal-transition-duration: .22s;

  /* Por encima del panel de compra fijo de la landing (z-index 60) y de la
     barra superior pegajosa (50). Sin esto el banner queda debajo. */
  --cc-z-index: 2000;
}

/* El peso de la letra de los botones no es una variable del paquete, así que
   se fuerza aquí para igualarlo al 700 de .btn. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Aceptar y Rechazar: iguales en peso, distintos en color ─────────────
   Sin esto los dos salen rosas idénticos (el paquete los trata igual con
   equalWeightButtons) y hay que leerlos para saber cuál es cuál.

   La regla que no se puede romper es que rechazar sea TAN fácil y TAN
   visible como aceptar: mismo tamaño, mismo sitio, mismo grosor, un clic los
   dos. Eso se mantiene — los dos son botones sólidos de alto contraste. Lo
   único que cambia es el color, para que se distingan de un vistazo.

   Lo que sería un patrón oscuro, y por tanto consentimiento inválido según
   la AEPD, es dejar rechazar como un enlace pequeño o un borde tenue. Por eso
   "Rechazar" lleva fondo sólido y no el gris claro de "Elegir". */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
  background: var(--strong);
  border-color: var(--strong);
  color: #fff;
}
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
  background: #14232b;
  border-color: #14232b;
  color: #fff;
}

/* Sombra del sitio: difusa y con el rosa de la marca, como el logo y el panel
   de compra. La del paquete es un gris plano. */
#cc-main .cm,
#cc-main .pm {
  box-shadow: 0 18px 50px rgba(27, 46, 56, .18),
              0 0 40px rgba(211, 91, 181, .10);
  border: 1px solid var(--line);
}

#cc-main .cm__title,
#cc-main .pm__title {
  color: var(--strong);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ═══ Pestaña permanente "Gestionar consentimiento" ═══════════════════════
   Discreta a propósito: tiene que estar siempre ahí sin competir con el botón
   de comprar. Por eso es gris y pequeña hasta que se pasa el ratón. */
.neko-cc-pestana {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1500;              /* por debajo del banner (2000), por encima de todo lo demás */
  display: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  color: var(--dim);
  font: 600 11.5px var(--font);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27, 46, 56, .12);
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.neko-cc-pestana.visible { display: block }
.neko-cc-pestana:hover {
  color: var(--accent3);
  border-color: rgba(211, 91, 181, .45);
  box-shadow: 0 6px 18px rgba(211, 91, 181, .18);
}
.neko-cc-pestana:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══ El relevo: pestaña arriba de 820px, enlace del pie por debajo ═══════
 *
 * Hay UN camino para volver a abrir las preferencias en cada tamaño de
 * pantalla. Nunca los dos a la vez (era redundante, y por eso se quitó en su
 * día el del pie), nunca ninguno (sería ilegal: el RGPD pide que retirar el
 * consentimiento sea tan fácil como darlo, art. 7.3).
 *
 * Por qué la pestaña se va en móvil: abajo del todo es donde vive la barra de
 * compra de la landing (.buy-bar en index.html), y dos cosas fijas peleándose
 * por la esquina del pulgar no es una decisión de diseño, es un accidente. En
 * escritorio no estorba a nadie y se queda.
 *
 * El corte de 820px es el mismo que usa .buy-bar. Si cambia uno, cambian los
 * dos, o vuelve el solape en la franja intermedia — o peor, un móvil sin
 * ningún camino.
 *
 * `display: revert` y no `block`/`inline` porque el enlace del pie es un <li>
 * en la landing y un <span> con su separador en las demás páginas (ver el PIE
 * de herramientas/pie-comun.py). Revert le devuelve a cada uno el suyo. */
.neko-cc-pie { display: none }

@media (max-width: 820px) {
  .neko-cc-pestana, .neko-cc-pestana.visible { display: none }
  .neko-cc-pie { display: revert }
}

/* La etiqueta "Siempre activas" de la categoría imprescindible. */
#cc-main .pm__badge {
  background: rgba(47, 143, 107, .13);
  color: var(--ok);
  border-color: transparent;
  font-weight: 700;
}