/*
 * El Virus Rojo — Banner de consentimiento de cookies.
 * ADAPTADO A LOS 11 TEMAS: en vez de colores fijos, hereda las variables de cada tema
 * (--rojo, --sup, --texto/--tinta, --cuerpo, --radio, --borde, --sombra) con valores de
 * reserva. Así el banner toma automáticamente la identidad visual del estilo activo
 * (paleta, tipografía, bordes duros del brutalista, sombra del riso-pop, etc.).
 *
 * Lo que NO cambia entre temas, porque lo fija la ley: los tres botones (Aceptar / Rechazar /
 * Configurar) comparten tamaño y peso visual, no hay casillas premarcadas y rechazar es tan
 * fácil como aceptar. → art. 22.2 LSSI · Guía AEPD de cookies (mayo 2024) · TJUE Planet49.
 */
:root {
  /* Heredadas del tema con reserva (fallback) para cuando no exista la variable. */
  --evr-cc-bg: var(--sup, #ffffff);
  --evr-cc-fg: var(--texto, var(--tinta, #1a1a1a));
  --evr-cc-accent: var(--rojo, #c0182b);
  --evr-cc-accent-fg: var(--rojo-on, #ffffff);
  --evr-cc-btn-bg: rgba(127, 127, 127, .16);
  --evr-cc-btn-fg: var(--evr-cc-fg);
  --evr-cc-radius: var(--radio, 12px);
  --evr-cc-border: var(--borde, 0);
  --evr-cc-shadow: var(--sombra, 0 8px 30px rgba(0, 0, 0, .35));
  --evr-cc-font: var(--cuerpo, var(--titulo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  --evr-cc-max: 920px;
  --evr-cc-zindex: 9999;
}

/* [hidden] mantiene ocultos banner y panel hasta que el JS los muestra */
#evr-cookie-banner[hidden],
#evr-cookie-panel[hidden] { display: none !important; }

/* ------------------------------- Banner inferior ------------------------------ */
#evr-cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--evr-cc-max);
  background: var(--evr-cc-bg);
  color: var(--evr-cc-fg);
  font-family: var(--evr-cc-font);
  font-size: 15px;
  line-height: 1.5;
  border: var(--evr-cc-border);
  border-radius: var(--evr-cc-radius);
  box-shadow: var(--evr-cc-shadow);
  padding: 18px 20px;
  z-index: var(--evr-cc-zindex);
}
#evr-cookie-banner h2 { margin: 0 0 6px; font-size: 17px; font-family: inherit; }
#evr-cookie-banner p { margin: 0 0 14px; color: var(--evr-cc-fg); opacity: .85; }
#evr-cookie-banner a { color: var(--evr-cc-accent); text-decoration: underline; }

.evr-cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* IMPORTANTE (legalidad): los tres botones comparten tamaño/peso. Solo el primario lleva el
   color de marca; rechazar y configurar son botones sólidos igual de visibles. */
.evr-cc-btn {
  flex: 1 1 auto;
  min-width: 140px;
  cursor: pointer;
  border: var(--evr-cc-border);
  border-radius: var(--evr-cc-radius);
  padding: 11px 16px;
  font: inherit;
  font-weight: 700;
  background: var(--evr-cc-btn-bg);
  color: var(--evr-cc-btn-fg);
}
.evr-cc-btn--primary { background: var(--evr-cc-accent); color: var(--evr-cc-accent-fg); }
.evr-cc-btn--ghost { background: transparent; }
.evr-cc-btn:focus-visible { outline: 3px solid var(--evr-cc-accent); outline-offset: 2px; }

/* ----------------------------- Panel de preferencias -------------------------- */
#evr-cookie-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  z-index: calc(var(--evr-cc-zindex) + 1);
  font-family: var(--evr-cc-font);
  padding: 16px;
}
.evr-cc-dialog {
  background: var(--evr-cc-bg);
  color: var(--evr-cc-fg);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow: auto;
  border: var(--evr-cc-border);
  border-radius: var(--evr-cc-radius);
  box-shadow: var(--evr-cc-shadow);
  padding: 22px 24px;
}
.evr-cc-dialog h2 { margin: 0 0 4px; font-family: inherit; }
.evr-cc-dialog p { opacity: .85; }

.evr-cc-cat {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(127, 127, 127, .3);
}
.evr-cc-cat__text strong { display: block; }
.evr-cc-cat__text span { opacity: .75; font-size: 14px; }
.evr-cc-cat input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--evr-cc-accent); }
.evr-cc-cat input[disabled] { opacity: .6; }

.evr-cc-dialog .evr-cc-actions { margin-top: 18px; }

@media (max-width: 520px) {
  .evr-cc-btn { flex-basis: 100%; }
}