/* ============================================================
   Auditas — Banner de consentimiento de cookies + panel de
   preferencias. Compartido por todas las páginas (incluido vía
   data-include, igual que header/footer).
   ============================================================ */

/* ---- Bloqueo de scroll de fondo mientras hay un aviso/panel abierto ---- */
body.cookie-lock { overflow: hidden; }

/* ---- Botones compartidos (aviso + panel) ---- */
.cookie-btn {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 14px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-med), border-color var(--t-med);
}
.cookie-btn--primary {
  background: var(--yelludit);
  color: var(--blackdit);
  box-shadow: var(--sh-s);
}
.cookie-btn--primary:hover { background: var(--yelludit60); transform: translateY(-2px); }
.cookie-btn--ghost {
  background: transparent;
  color: var(--whitef);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.cookie-btn--ghost:hover { border-color: var(--yelludit); color: var(--yelludit); }
/* Dentro del modal (fondo claro) el ghost invertido en blanco es invisible */
.cookie-modal__card .cookie-btn--ghost {
  color: var(--blackdit);
  border-color: var(--gray30);
}
.cookie-modal__card .cookie-btn--ghost:hover { border-color: var(--yelludit); color: var(--yelludit60); }

/* ---- Panel de preferencias (modal) ---- */
.cookie-modal { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(19, 18, 23, 0.6); backdrop-filter: blur(2px); animation: cookie-fade-in 0.25s var(--ease-out); }
.cookie-modal__card {
  position: relative;
  width: 480px; max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--whitef);
  border-radius: var(--r-l);
  box-shadow: var(--sh-dark);
  padding: var(--sp-32);
  animation: cookie-modal-in 0.3s var(--ease-out);
}
.cookie-modal__close {
  position: absolute;
  top: var(--sp-16); right: var(--sp-16);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  color: var(--gray60);
  background: var(--gray10);
  transition: background-color var(--t-fast);
}
.cookie-modal__close:hover { background: var(--gray20); }
.cookie-modal__title { font-family: var(--font-title); font-weight: var(--fw-bold); font-size: 22px; color: var(--blackdit); margin: 0 0 var(--sp-8); }
.cookie-modal__intro { font-family: var(--font-body); font-size: 14px; color: var(--gray70); line-height: 1.5; margin: 0 0 var(--sp-24); }
.cookie-modal__intro a { color: var(--yelludit60); text-decoration: underline; font-weight: var(--fw-med); }
.cookie-modal__intro a:hover { color: var(--yelludit); }

.cookie-modal__cat {
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--gray20);
}
.cookie-modal__cat:last-of-type { border-bottom: 1px solid var(--gray20); margin-bottom: var(--sp-24); }
.cookie-modal__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.cookie-modal__cat-head strong { font-family: var(--font-title); font-size: 15px; color: var(--blackdit); }
.cookie-modal__cat p { font-family: var(--font-body); font-size: 13px; color: var(--gray60); line-height: 1.5; margin: 0; }
.cookie-modal__badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-med);
  color: var(--gray60);
  background: var(--gray10);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.cookie-modal__actions {
  display: flex;
  gap: var(--sp-12);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Switch (toggle) ---- */
.cookie-switch { position: relative; display: inline-block; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie-switch__track {
  display: block;
  width: 42px; height: 24px;
  background: var(--gray30);
  border-radius: var(--r-pill);
  transition: background-color var(--t-med);
}
.cookie-switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--whitef);
  border-radius: 50%;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-med) var(--ease-out);
}
.cookie-switch input:checked + .cookie-switch__track { background: var(--yelludit); }
.cookie-switch input:checked + .cookie-switch__track .cookie-switch__thumb { transform: translateX(18px); }
.cookie-switch input:focus-visible + .cookie-switch__track { outline: 2px solid var(--infodit); outline-offset: 2px; }

/* El padre INMEDIATO de #cookieBanner es el <div data-include> que lo
   inyecta — no el .policies__stickywrap (alto) que lo envuelve más
   arriba. Para position:sticky, el margen para "pegarse" lo define el
   padre inmediato, no un ancestro más lejano por más alto que sea —
   así que ese wrapper pequeño (mismo alto que el aviso) seguía
   limitando el sticky a unos pocos píxeles. display:contents lo saca
   de la ecuación: el aviso pasa a comportarse como hijo directo del
   wrapper alto, que es lo que realmente necesita. */
.policies__stickywrap > div:first-child { display: contents; } /* wrapper del data-include (js/include.js borra el atributo tras inyectar el contenido, así que no se puede usar como selector) */

/* ---- Modo "sticky" (politicas.html): SIN backdrop ni bloqueo — el
   usuario debe poder seguir leyendo la Política de Cookies mientras
   decide. position:sticky (no fixed): en su posición natural queda
   DEBAJO del hero (donde vive en el HTML), y solo se pega bajo el
   header al hacer scroll — así no tapa el hero desde el inicio. ---- */
.cookie-modal--sticky {
  position: sticky;
  inset: auto; /* .cookie-modal (base) trae inset:0 → bottom/left/right:0 quedaban
                  heredados sin querer; top+bottom fijados a la vez en un sticky
                  puede impedir que el navegador lo pegue. */
  top: var(--header-h);
  z-index: 900;
  display: block;
  width: 100%;
  padding: 0;
}
.cookie-modal--sticky .cookie-modal__backdrop { display: none; }
.cookie-modal--sticky .cookie-modal__card {
  width: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--container-pad);
  background: var(--blackdit);
  animation: none;
}
.cookie-modal--sticky .cookie-modal__text { max-width: 720px; min-width: 0; }
.cookie-modal--sticky .cookie-modal__title { color: var(--whitef); font-size: 15px; margin: 0 0 2px; }
.cookie-modal--sticky .cookie-modal__intro { color: var(--gray30); font-size: 13px; margin: 0; }
/* En politicas.html sería circular decir "conoce más en la Política de
   Cookies" — ya está ahí leyéndola. */
.cookie-modal--sticky .cookie-modal__policy-note { display: none; }
.cookie-modal--sticky .cookie-modal__actions { justify-content: center; min-width: 0; }
/* Fondo oscuro (igual que el aviso normal): el ghost necesita texto claro,
   no el oscuro pensado para el panel de preferencias (fondo blanco). */
.cookie-modal--sticky .cookie-btn--ghost { color: var(--whitef); border-color: rgba(255, 255, 255, 0.3); }
.cookie-modal--sticky .cookie-btn--ghost:hover { border-color: var(--yelludit); color: var(--yelludit); }

/* ---- Aviso de "no se puede cerrar sin elegir" ---- */
.cookie-toast {
  position: fixed;
  left: 50%; bottom: var(--sp-24);
  transform: translateX(-50%);
  z-index: 2300;
  max-width: 420px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--whitef);
  background: var(--blackdit);
  padding: var(--sp-12) var(--sp-20);
  border-radius: var(--r-m);
  box-shadow: var(--sh-dark);
  text-align: center;
  animation: cookie-fade-in 0.2s var(--ease-out);
}
.cookie-toast[hidden] { display: none; }

@keyframes cookie-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cookie-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cookie-modal__card { padding: var(--sp-24); }
  .cookie-modal__actions { justify-content: stretch; }
  .cookie-modal__actions .cookie-btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-modal__backdrop, .cookie-modal__card { animation: none; }
}