/* ============================================================================
   Aviso de cookies del front (CC01 · ADR-0024) — skin de CookieConsent v3.
   Solo mapea las variables --cc-* de la librería a los tokens congelados del checkout
   (docs/diseno/checkout/tokens.css → public/css/tokens-checkout.css). Cero #hex/px sueltos (M-004).
   Contraste medido con esos tokens (reglas A11Y-1..3 de la guía del checkout):
     texto --c-ink / --c-ink-2 sobre --c-surface ........ 14,6:1 / 6,6:1
     botón primario: blanco sobre --c-primary ............ 12,1:1
     botón secundario: --c-primary sobre --c-sand ........ 11,1:1 (borde --c-primary)
     interruptor encendido --c-accent / apagado --c-ink-2  4,95:1 / 6,6:1 contra --c-surface (1.4.11)
   ============================================================================ */

#cc-main {
  --cc-font-family: var(--f-ui);
  --cc-modal-border-radius: var(--r-md);
  /* La librería reutiliza este radio en los bloques de categoría: con --r-pill, un bloque desplegado se
     convierte en una elipse que recorta la tabla. Radio medio aquí y píldora solo en los botones (abajo). */
  --cc-btn-border-radius: var(--r-md);
  --cc-modal-margin: var(--sp-4);
  --cc-z-index: 2147483000;

  --cc-bg: var(--c-surface);
  --cc-primary-color: var(--c-ink);
  --cc-secondary-color: var(--c-ink-2);
  --cc-link-color: var(--c-accent);

  --cc-btn-primary-bg: var(--c-primary);
  --cc-btn-primary-color: var(--c-surface);
  --cc-btn-primary-border-color: var(--c-primary);
  --cc-btn-primary-hover-bg: var(--c-primary-h);
  --cc-btn-primary-hover-color: var(--c-surface);
  --cc-btn-primary-hover-border-color: var(--c-primary-h);

  --cc-btn-secondary-bg: var(--c-sand);
  --cc-btn-secondary-color: var(--c-primary);
  --cc-btn-secondary-border-color: var(--c-primary);
  --cc-btn-secondary-hover-bg: var(--c-sand-2);
  --cc-btn-secondary-hover-color: var(--c-primary);
  --cc-btn-secondary-hover-border-color: var(--c-primary-h);

  --cc-separator-border-color: var(--c-line);
  --cc-section-category-border: var(--c-line);

  --cc-toggle-on-bg: var(--c-accent);
  --cc-toggle-off-bg: var(--c-ink-2);
  --cc-toggle-on-knob-bg: var(--c-surface);
  --cc-toggle-off-knob-bg: var(--c-surface);
  --cc-toggle-enabled-icon-color: var(--c-surface);
  --cc-toggle-disabled-icon-color: var(--c-surface);
  --cc-toggle-readonly-bg: var(--c-line-2);
  --cc-toggle-readonly-knob-bg: var(--c-surface);
  --cc-toggle-readonly-knob-icon-color: var(--c-ink-2);

  --cc-cookie-category-block-bg: var(--c-sand);
  --cc-cookie-category-block-border: var(--c-line);
  --cc-cookie-category-block-hover-bg: var(--c-sand-2);
  --cc-cookie-category-block-hover-border: var(--c-line-2);
  --cc-cookie-category-expanded-block-bg: var(--c-surface);
  --cc-cookie-category-expanded-block-hover-bg: var(--c-sand);

  --cc-overlay-bg: rgba(6, 43, 69, .55); /* = --c-ink al 55 %; el velo no es texto */
  --cc-footer-bg: var(--c-sand);
  --cc-footer-color: var(--c-ink-2);
  --cc-footer-border-color: var(--c-line);
}

#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main .pm__close-btn {
  border-radius: var(--r-pill);
}

/* Interruptores a 24 px de alto (la librería los deja en 23 px: 2.5.8 pide ≥ 24 × 24). */
#cc-main .section__toggle,
#cc-main .section__toggle-wrapper,
#cc-main .toggle__icon,
#cc-main .toggle__label {
  height: var(--sp-5);
}

/* Foco visible con el anillo del checkout, dibujado con box-shadow y NO con outline: el CSS del front que se
   sirve de verdad (build Vite obsoleto, ESTADO.md §5) lleva `*{outline:none!important}` y se lo come. */
#cc-main :focus-visible {
  box-shadow: 0 0 0 var(--bd-strong) var(--c-surface), 0 0 0 calc(var(--bd-strong) + var(--focus-w)) var(--c-ring);
}

@media (prefers-reduced-motion: reduce) {
  #cc-main {
    --cc-modal-transition-duration: 0s;
  }
}