/* ============================================================
   Oliver — Banner de cookies
   ------------------------------------------------------------
   Copia adaptada de aautismo-cookies (Fundación a·Autismo): misma
   estructura y mismas reglas de accesibilidad, con los tokens del
   tema Oliver (--paper, --ink, --cyan, --navy…) y valores de reserva
   por si el tema activo no los define. Sigue el modo oscuro del tema
   porque los tokens cambian solos. Conforme a AEPD + WCAG 2.1 AA.
   ============================================================ */

/* ───────── Banner inferior (role="region", NO modal) ─────────
   No tapa toda la pantalla ni atrapa el foco: se puede seguir
   navegando y leer la política. Aparición por opacidad. */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--paper,#fff);color:var(--ink,#231F20);border-top:3px solid var(--cyan,#00ACDF);
  box-shadow:0 -8px 32px rgba(11,20,35,.14);
  font-family:var(--sans,"Public Sans",system-ui,sans-serif);
  padding-bottom:env(safe-area-inset-bottom,0px);
  opacity:0;transform:translateY(8px);transition:opacity 180ms ease,transform 180ms ease;}
.cc-banner.is-open{opacity:1;transform:none;}
.cc-banner__inner{max-width:var(--wrap,1200px);margin:0 auto;padding:20px 24px;
  display:grid;gap:10px;}
.cc-banner__title{margin:0;display:flex;align-items:center;gap:10px;
  font:600 1.15rem/1.2 var(--display,"Fraunces",Georgia,serif);color:var(--ink,#231F20);}
.cc-banner__ico{display:inline-flex;color:var(--cyan-ink,#005673);}
.cc-banner__ico svg{width:24px;height:24px;}
.cc-banner__text{margin:0;font-size:.95rem;line-height:1.55;color:var(--muted,#4A5157);max-width:72ch;}
.cc-banner__text a,.cc-dialog__desc a{color:var(--link,#00739A);text-decoration:underline;font-weight:600;}
.cc-banner__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}

/* ───────── Botones ─────────
   AEPD: «Aceptar» y «Rechazar» con el MISMO peso visual: los dos
   píldora cian como .btn-primary de la maqueta (navy sobre cian,
   contraste 7,9:1). «Configurar» y «Aceptar todo» del panel, como
   .btn-ghost. Altura ≥ 48 px (WCAG 2.5.5). */
.cc-btn{min-height:48px;padding:0 24px;border-radius:var(--r-pill,999px);
  border:1.5px solid transparent;cursor:pointer;font:600 .98rem/1 var(--sans,"Public Sans",system-ui,sans-serif);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background 140ms,color 140ms,border-color 140ms;}
.cc-btn--solid{background:var(--cyan,#00ACDF);color:var(--on-cyan,#0B1423);border-color:var(--cyan,#00ACDF);}
.cc-btn--solid:hover{background:#18B9E8;border-color:#18B9E8;}
.cc-btn--ghost{background:transparent;color:var(--ink,#231F20);border-color:currentColor;}
.cc-btn--ghost:hover{background:var(--surface,#EEF3F5);}

/* ───────── Capa oscura del modal de preferencias ───────── */
.cc-overlay{position:fixed;inset:0;z-index:140;background:rgba(11,20,35,.6);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity 180ms ease;}
.cc-overlay.is-open{opacity:1;}

/* ───────── Diálogo de preferencias (role="dialog" aria-modal) ───────── */
.cc-dialog{width:560px;max-width:100%;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--paper,#fff);color:var(--ink,#231F20);border:1px solid var(--line,#D7E0E4);border-radius:28px;
  box-shadow:0 20px 48px rgba(11,20,35,.18);
  padding:26px 28px;font-family:var(--sans,"Public Sans",system-ui,sans-serif);}
.cc-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px;}
.cc-dialog__title{margin:0;font:600 1.5rem/1.15 var(--display,"Fraunces",Georgia,serif);color:var(--ink,#231F20);}
.cc-dialog__close{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line,#D7E0E4);
  background:transparent;color:var(--ink,#231F20);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 140ms,border-color 140ms;}
.cc-dialog__close:hover{background:var(--surface,#EEF3F5);border-color:var(--cyan,#00ACDF);}
.cc-dialog__close svg{width:22px;height:22px;}
.cc-dialog__desc{margin:0 0 18px;font-size:.95rem;line-height:1.55;color:var(--muted,#4A5157);}

/* ───────── Lista de categorías ───────── */
.cc-cats{list-style:none;margin:0 0 22px;padding:0;}
.cc-cat{padding:16px 0;border-bottom:1px solid var(--line,#D7E0E4);}
.cc-cat:last-child{border-bottom:0;}
.cc-cat__row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.cc-cat__name{font-weight:700;font-size:1.02rem;color:var(--ink,#231F20);}
.cc-cat__desc{margin:8px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted,#4A5157);max-width:60ch;}

/* ───────── Conmutadores role="switch" ─────────
   No transmiten el estado SOLO por color (WCAG 1.4.1): muestran el
   texto «Activadas/Desactivadas» y un punto desplazable. ≥ 48 px. */
.cc-switch{flex:none;display:inline-flex;align-items:center;gap:10px;position:relative;
  min-height:48px;padding:6px 8px 6px 14px;border-radius:var(--r-pill,999px);
  border:1.5px solid var(--line,#D7E0E4);background:transparent;color:inherit;cursor:pointer;font-family:inherit;
  transition:border-color 140ms,background 140ms;}
.cc-switch__state{font-weight:700;font-size:.88rem;color:var(--muted,#4A5157);min-width:9ch;text-align:right;}
/* La «vía» y el «punto» del interruptor (decorativos, ::before/::after). */
.cc-switch::before{content:"";width:46px;height:26px;border-radius:999px;background:var(--field,#737D85);
  position:relative;flex:none;transition:background 140ms;}
.cc-switch::after{content:"";position:absolute;left:17px;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(11,20,35,.25);transform:translateY(-50%);transition:transform 140ms;}
.cc-switch[aria-checked="true"]::before{background:var(--cyan,#00ACDF);}
.cc-switch[aria-checked="true"]::after{transform:translate(20px,-50%);}
.cc-switch[aria-checked="true"] .cc-switch__state{color:var(--cyan-ink,#005673);}
.cc-switch:not([disabled]):hover{border-color:var(--cyan,#00ACDF);}
/* Switch deshabilitado (técnicas/necesarias): aspecto inactivo pero legible. */
.cc-switch[disabled]{cursor:not-allowed;background:var(--surface,#EEF3F5);border-color:var(--surface,#EEF3F5);}
.cc-switch[disabled]::before{background:var(--cyan,#00ACDF);}
.cc-switch[disabled]::after{transform:translate(20px,-50%);}
.cc-switch[disabled] .cc-switch__state{color:var(--cyan-ink,#005673);}

.cc-dialog__actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ───────── Foco visible garantizado (WCAG 2.4.7) ───────── */
.cc-banner :where(a,button):focus-visible,
.cc-dialog :where(a,button):focus-visible{
  outline:3px solid var(--focus,#0B1423);outline-offset:3px;border-radius:4px;}
.cc-btn:focus-visible,.cc-switch:focus-visible{border-radius:var(--r-pill,999px);}
.cc-dialog__close:focus-visible{border-radius:50%;}

/* ───────── Respeta reduce-motion (WCAG 2.3.3) ───────── */
@media (prefers-reduced-motion:reduce){
  .cc-banner,.cc-overlay,.cc-btn,.cc-switch,.cc-switch::before,.cc-switch::after,.cc-dialog__close{
    transition-duration:.001ms !important;}
  .cc-banner{transform:none;}
}

/* ───────── Responsive: en móvil, acciones a ancho completo ───────── */
@media (max-width:600px){
  .cc-banner__inner{padding:18px 16px;}
  .cc-banner__actions .cc-btn,.cc-dialog__actions .cc-btn{flex:1 1 100%;}
  .cc-dialog{padding:22px 20px;}
  .cc-cat__row{flex-direction:column;align-items:flex-start;gap:10px;}
  .cc-switch{width:100%;justify-content:space-between;}
}