/* ══════════════════════════════════════════════════════════════════════════
   AIBotKit · estilos del gestor de consentimiento (consentimiento.js)

   Fichero aparte y no un <style> incrustado: la política de seguridad del
   sitio declara `style-src 'self'` sin 'unsafe-inline', así que cualquier
   estilo en línea quedaría bloqueado por el navegador.

   Mientras no haya categorías opcionales declaradas, casi nada de esto llega
   a usarse: el aviso ni siquiera se construye. Lo único que sí se usa siempre
   es el enlace «Preferencias de cookies» del pie y el panel que abre.

   Los colores se toman de los mismos tokens que el resto del sitio, con un
   valor de reserva por si este fichero se cargara suelto.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Texto solo para lectores de pantalla ─────────────────────────────────── */
.cookies-vo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Enlace del pie ───────────────────────────────────────────────────────────
   Es un <button> porque abre un diálogo, no lleva a otra página. Nace con el
   atributo `hidden` en el HTML y solo lo enseña el script: sin JavaScript
   sería un botón que no hace nada. */
.cookies-enlace-pie{
  display:inline; padding:0; margin:0; border:0; background:none;
  font:inherit; font-size:.875rem; line-height:inherit;
  color:var(--om-suave,#c3ccdf);
  cursor:pointer; text-align:left;
}
.cookies-enlace-pie:hover{ color:#fff; text-decoration:underline; }
.cookies-enlace-pie[hidden]{ display:none; }

/* ── Botones (los mismos que el resto del sitio, sin depender de ellos) ────── */
.cookies-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:var(--r-chip,.75rem);
  padding:.6875rem 1.125rem; font:inherit; font-size:.9375rem; font-weight:500;
  line-height:1.2; cursor:pointer; white-space:nowrap; text-align:center;
  transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
/* Aceptar y rechazar comparten EXACTAMENTE este estilo, y no es un descuido:
   la guía de la AEPD exige que rechazar sea tan fácil y tan visible como
   aceptar. Si algún día alguien apaga uno de los dos, esto deja de cumplir. */
.cookies-btn-principal{
  background:var(--superficie,#fff); color:var(--texto,#1e293b);
  border-color:var(--filete-fuerte,#cbd5e1);
}
.cookies-btn-principal:hover{ background:var(--superficie-2,#f1f5f9); }
.cookies-btn-guardar{
  background:var(--acento-fuerte,#373a96); color:#fff;
}
.cookies-btn-guardar:hover{ background:var(--acento-hover,#2e3078); }
.cookies-btn-suave{
  background:none; color:var(--texto-suave,#475569);
  border-color:transparent; text-decoration:underline; text-underline-offset:3px;
}
.cookies-btn-suave:hover{ color:var(--texto,#0f172a); }

.cookies-aviso :focus-visible,
.cookies-panel :focus-visible{
  outline:2px solid var(--acento,#5561c9); outline-offset:2px; border-radius:4px;
}

/* ── Aviso ────────────────────────────────────────────────────────────────────
   Franja al pie, no un muro: no oscurece la página, no bloquea el
   desplazamiento y no atrapa el foco. Se puede seguir leyendo el sitio (y las
   políticas legales) sin contestar. */
.cookies-aviso{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--superficie,#fff);
  border-top:1px solid var(--filete,#e2e8f0);
  box-shadow:0 -8px 24px -12px rgb(0 0 0/.25);
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom,0px));
}
.cookies-aviso-caja{
  width:100%; max-width:68rem; margin-inline:auto;
  display:grid; gap:1rem;
}
@media (min-width:900px){
  .cookies-aviso-caja{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; }
}
.cookies-aviso-titulo{
  margin:0; font-size:.9375rem; font-weight:700; color:var(--texto,#0f172a);
}
.cookies-aviso-texto p{
  margin:.375rem 0 0; font-size:.8125rem; line-height:1.6;
  color:var(--texto-suave,#475569); max-width:52rem;
}
.cookies-aviso-texto a{ color:var(--acento,#4247b8); }
.cookies-aviso-acciones{
  display:flex; flex-wrap:wrap; gap:.625rem; align-items:center;
}
/* En móvil los dos botones de decisión ocupan la misma anchura: ninguno de los
   dos queda por debajo del otro ni se ve más pequeño. */
@media (max-width:520px){
  .cookies-aviso-acciones{ display:grid; grid-template-columns:1fr 1fr; }
  .cookies-aviso-acciones .cookies-btn-suave{ grid-column:1 / -1; }
}

/* ── Diálogo de preferencias ──────────────────────────────────────────────── */
.cookies-fondo{
  position:fixed; inset:0; z-index:70; background:rgb(15 23 42/.55);
}
.cookies-panel{
  position:fixed; z-index:71;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(36rem, calc(100vw - 2rem));
  max-height:min(85vh, 48rem); overflow:auto;
  background:var(--superficie,#fff);
  border:1px solid var(--filete,#e2e8f0);
  border-radius:var(--r-panel,1rem);
  box-shadow:0 20px 25px -5px rgb(0 0 0/.2), 0 8px 10px -6px rgb(0 0 0/.2);
  padding:1.25rem;
}
@media (min-width:640px){ .cookies-panel{ padding:1.75rem; } }
/* El fondo no se desplaza mientras el diálogo está abierto. */
.cookies-abierto{ overflow:hidden; }

.cookies-panel-cabecera{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.cookies-panel-titulo{
  margin:0; font-size:1.125rem; font-weight:700; letter-spacing:-.01em;
  color:var(--texto,#0f172a);
}
.cookies-cerrar{
  flex:none; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--filete,#e2e8f0); border-radius:var(--r-chip,.75rem);
  background:none; color:var(--texto-suave,#475569);
  font-size:1.25rem; line-height:1; cursor:pointer;
}
.cookies-cerrar:hover{ background:var(--superficie-2,#f1f5f9); color:var(--texto,#0f172a); }

.cookies-panel-intro{
  margin:.875rem 0 0; font-size:.875rem; line-height:1.7;
  color:var(--texto-suave,#475569);
}
.cookies-panel-intro a{ color:var(--acento,#4247b8); }

.cookies-lista{ margin-top:1.25rem; display:grid; gap:.75rem; }
.cookies-categoria{
  border:1px solid var(--filete,#e2e8f0); border-radius:var(--r-chip,.75rem);
  padding:.875rem 1rem;
}
.cookies-categoria-cab{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.cookies-categoria-nombre{
  font-size:.9375rem; font-weight:600; color:var(--texto,#0f172a);
  margin-right:auto; cursor:pointer;
}
.cookies-categoria-texto{
  margin:.5rem 0 0; font-size:.8125rem; line-height:1.65;
  color:var(--texto-suave,#475569);
}
.cookies-siempre{
  order:3; flex-basis:100%;
  font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--acento,#4247b8);
}
@media (min-width:480px){
  .cookies-siempre{ order:0; flex-basis:auto; }
}

/* Interruptor: la casilla real sigue estando ahí (invisible pero enfocable y
   pulsable), así que el teclado y los lectores de pantalla la manejan como lo
   que es. La palanca es solo la parte que se ve. */
.cookies-interruptor{ position:relative; flex:none; width:2.75rem; height:1.5rem; }
.cookies-casilla{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer;
}
.cookies-casilla:disabled{ cursor:default; }
.cookies-palanca{
  position:absolute; inset:0; border-radius:9999px;
  background:var(--filete-fuerte,#cbd5e1);
  transition:background-color 160ms ease;
  pointer-events:none;
}
.cookies-palanca::after{
  content:""; position:absolute; top:3px; left:3px; width:1.125rem; height:1.125rem;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.25);
  transition:transform 160ms ease;
}
.cookies-casilla:checked + .cookies-palanca{ background:var(--acento-fuerte,#373a96); }
.cookies-casilla:checked + .cookies-palanca::after{ transform:translateX(1.25rem); }
.cookies-casilla:disabled + .cookies-palanca{ background:var(--acento-fuerte,#373a96); opacity:.55; }
.cookies-casilla:focus-visible + .cookies-palanca{
  outline:2px solid var(--acento,#5561c9); outline-offset:2px;
}

.cookies-panel-pie{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--filete,#e2e8f0);
  display:flex; flex-wrap:wrap; gap:.625rem;
}
.cookies-panel-pie .cookies-btn{ flex:1 1 10rem; }
/* «Guardar mi elección» va el último y en color: es la acción que confirma lo
   que la persona haya marcado, no un atajo que decida por ella. */
@media (min-width:560px){
  .cookies-panel-pie .cookies-btn-guardar{ flex:1 1 100%; order:3; }
}

/* ── Movimiento reducido y papel ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cookies-btn, .cookies-palanca, .cookies-palanca::after{ transition:none; }
}
@media print{
  .cookies-aviso, .cookies-panel, .cookies-fondo, .cookies-enlace-pie{ display:none !important; }
}


/* ── Modo oscuro ─────────────────────────────────────────────────────────────
   Casi todo se resuelve solo, porque arriba ya no queda ningún color de paleta
   cruda. Aquí solo van los dos casos que no puede resolver un token: los
   rellenos de acento, que en oscuro se aclaran y entonces el texto encima tiene
   que ser oscuro, no blanco. */
@media (prefers-color-scheme: dark){
  .cookies-btn-guardar{ color:#0d1117; }
  .cookies-casilla:checked + .cookies-palanca{ background:var(--acento-fuerte,#7683d8); }
  .cookies-casilla:disabled + .cookies-palanca{ background:var(--acento-fuerte,#7683d8); }
  .cookies-velo{ background:rgb(0 0 0/.7); }
}