/* ============================================================================
   Página de la Política de cookies (CC02 · ADR-0039), escopada a `.cookie-policy`.
   Portada de magic_and_sailing_app (CC02). Se sirve tal cual con assetVersioned('css/cookie-policy.css'):
   no pasa por Vite. Colores = paleta de marca de resources/css/components/variables.css (la carga app.css
   en todo el front); el resto de valores se declaran UNA vez como tokens del bloque, abajo no hay literales.
   Foco con box-shadow: layout.css lleva `* { outline: none !important }`, que anula cualquier outline.
   Contrastes sobre blanco: --deepSea 13,6:1 · --royalWaters 9,7:1 · --blueSea 6,9:1 (texto AA holgado).
   ============================================================================ */

.cookie-policy,
.cookie-policy__header {
  --cp-ink: var(--deepSea);
  --cp-ink-2: var(--royalWaters);
  --cp-accent: var(--blueSea);
  --cp-surface: #fff;
  --cp-on-accent: #fff;
  --cp-line: var(--athensGray);
  --cp-head: var(--softGray);
  --cp-ok-bg: var(--powderBlue);
  --cp-warn-bg: var(--sandyWhite);
  --cp-ring: var(--blueSea);

  --cp-sp-1: 0.25rem;
  --cp-sp-2: 0.5rem;
  --cp-sp-3: 0.75rem;
  --cp-sp-4: 1rem;
  --cp-sp-5: 1.5rem;
  --cp-sp-6: 2rem;
  --cp-radius: 0.75rem;
  --cp-radius-sm: 0.25rem;
  --cp-pill: 999rem;
  --cp-hairline: 1px;
  --cp-focus: 3px;
}

.cookie-policy {
  /* Ancho de lectura amplio (ajuste de magic, a0e851af): tarjetas y tablas usan la pantalla, hasta 80 rem. */
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--cp-sp-4) var(--cp-sp-6);
  color: var(--cp-ink);
  line-height: 1.6;
}

.cookie-policy h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 var(--cp-sp-2);
}

.cookie-policy h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  margin: var(--cp-sp-6) 0 var(--cp-sp-3);
}

.cookie-policy h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cp-sp-2);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--cp-sp-2);
}

.cookie-policy p,
.cookie-policy ul {
  margin: 0 0 var(--cp-sp-3);
}

.cookie-policy ul {
  padding-left: var(--cp-sp-5);
  list-style: disc;
}

.cookie-policy__meta {
  color: var(--cp-ink-2);
}

.cookie-policy a {
  color: var(--cp-accent);
  text-decoration: underline;
}

.cookie-policy a:hover {
  color: var(--cp-ink);
}

.cookie-policy__category {
  margin: var(--cp-sp-4) 0;
  padding: var(--cp-sp-4);
  background: var(--cp-surface);
  border: var(--cp-hairline) solid var(--cp-line);
  border-radius: var(--cp-radius);
}

.cookie-policy__badge {
  display: inline-block;
  padding: 0 var(--cp-sp-2);
  border-radius: var(--cp-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--cp-warn-bg);
  color: var(--cp-ink);
}

.cookie-policy__badge.is-on {
  background: var(--cp-ok-bg);
}

/* La tabla hace scroll dentro de su región (con foco, para desplazarla con teclado) y la página no (1.4.10). */
.cookie-policy__table {
  overflow-x: auto;
  border-radius: var(--cp-radius-sm);
}

.cookie-policy table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cookie-policy caption {
  text-align: left;
  font-weight: 600;
  padding: var(--cp-sp-2) 0;
}

.cookie-policy th,
.cookie-policy td {
  text-align: left;
  vertical-align: top;
  padding: var(--cp-sp-2) var(--cp-sp-3);
  border-bottom: var(--cp-hairline) solid var(--cp-line);
}

.cookie-policy thead th {
  background: var(--cp-head);
}

.cookie-policy tbody th {
  font-weight: 400;
}

.cookie-policy code {
  font-size: 0.875rem;
  word-break: break-all;
}

.cookie-policy a:focus-visible,
.cookie-policy__table:focus-visible {
  box-shadow: 0 0 0 var(--cp-focus) var(--cp-ring);
  border-radius: var(--cp-radius-sm);
}

/* Logo e idiomas de la cabecera van sobre azul de marca: anillo blanco (7:1 contra --blueSea). */
.cookie-policy__header a:focus-visible {
  box-shadow: 0 0 0 var(--cp-focus) var(--cp-on-accent);
  border-radius: var(--cp-radius-sm);
}

/* 2.4.11 Foco no oculto: la cabecera y el pie de esta página son fijos (el pie ocupa ~1/3 de la pantalla en
   móvil, con sus tres enlaces apilados y el margen de variables.css). Se reserva su alto al desplazar el foco,
   para que Tab nunca deje un enlace debajo de ellos. Solo en esta página (`:has`), sin tocar layout.css. */
html:has(.cookie-policy) {
  --cp-header-h: 6rem;
  --cp-footer-h: 16rem;
  scroll-padding-top: var(--cp-header-h);
  scroll-padding-bottom: var(--cp-footer-h);
}

@media (min-width: 768px) {
  html:has(.cookie-policy) {
    --cp-header-h: 7rem;
    --cp-footer-h: 4rem;
  }
}