/* ============================================================================
   Vanorify — chrome compartido de www.vanorify.com
   ----------------------------------------------------------------------------
   Una sola hoja para la cabecera, el menú móvil, el pie y el sistema de botones
   de TODAS las páginas del sitio. Los tokens son los de la aplicación Angular
   (frontend/src/styles.scss), copiados literalmente: la web no inventa ni un
   color, ni un tamaño, ni un radio.

   Qué NO vive aquí, a propósito: la tipografía del cuerpo, el fondo del `body`
   y los estilos de contenido de cada página. Cada página conserva los suyos y
   esta hoja se enlaza ANTES de su `<style>`, así que nada de lo suyo se pisa.
   El sistema de documento del centro de ayuda vive en `help.css`.

   Todas las clases van prefijadas `vn-` salvo `.btn`/`.link`, que son el
   sistema de acciones de specs/ui-buttons.md con sus nombres de siempre.
   ============================================================================ */

:root {
    /* ── Tipografía ─────────────────────────────────────────────────────── */
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Comfortaa', var(--font-sans);
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', ui-monospace, monospace;

    /* ── Acción principal ───────────────────────────────────────────────── */
    --color-primary: #E0314F;
    --color-primary-hover: #C0213C;
    --color-primary-focus: rgba(224, 49, 79, 0.12);
    --color-primary-bg: #fff1f3;
    --color-primary-border: #fda4af;

    /* ── Semántica ──────────────────────────────────────────────────────── */
    --color-success: #15803d;
    --color-success-bg: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-bg: #fff1f2;
    --color-danger-text: #be123c;
    --color-danger-border: #fecdd3;
    --color-danger-border-strong: #fca5a5;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;
    --color-info: #1d4ed8;
    --color-info-bg: #f0f9ff;
    --color-info-border: #bae6fd;
    --color-info-text: #0369a1;

    /* ── Texto y superficies ────────────────────────────────────────────── */
    --color-text-dark: #1f2937;
    --color-text: #1f2937;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-muted-on-sunken: #5b616b;
    --color-text-placeholder: #9ca3af;
    --color-border: #d1d5db;
    --color-border-light: #ebebeb;
    --color-surface: #ffffff;
    --color-surface-hover: #f9fafb;
    --color-surface-sunken: #f3f4f6;
    --color-surface-sunken-hover: #e5e7eb;
    --color-bg: #f5f7fa;

    /* Neutros cálidos: el suelo crema del producto y sus filetes. */
    --color-bg-warm: #FDFAF7;
    --color-surface-warm: #F5F0EA;
    --color-border-warm: #F0EDE8;

    /* ── Escala (page-layout.md §4) ─────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    --fs-caption: 0.75rem;
    --fs-body-sm: 0.8125rem;
    --fs-body: 0.9375rem;
    --fs-title: 1.0625rem;
    --fs-h2: 1.5rem;
    --fs-hero: 2.125rem;
    --fs-control: 1rem;
    --control-h: 44px;

    --r-control: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    --shadow-card: 0 1px 2px rgba(28, 27, 25, 0.06), 0 1px 3px rgba(28, 27, 25, 0.04);
    --shadow-float: 0 8px 28px rgba(28, 27, 25, 0.12);

    --header-h: 72px;
    --page-max: 1080px;
    --page-max-narrow: 720px;
    --form-max: 560px;

    /* El pie conserva su paleta oscura propia: exención registrada en
       specs/page-layout.md §Aplicación. Tokenizada aquí para que ninguna
       página vuelva a escribir el literal. */
    --color-footer-bg: #1C1410;
    --color-on-footer: rgba(255, 255, 255, 0.62);
    --color-on-footer-strong: #ffffff;
    --color-on-footer-muted: rgba(255, 255, 255, 0.55);
    --color-footer-line: rgba(255, 255, 255, 0.08);
    --color-footer-surface: rgba(255, 255, 255, 0.06);
    --color-footer-surface-hover: rgba(255, 255, 255, 0.12);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Un ancla nunca queda bajo la cabecera fija (WCAG 2.4.11). */
html {
    scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .vn-header,
    .vn-menu,
    .btn,
    .vn-burger span {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Saltar al contenido ─────────────────────────────────────────────────
   Oculto hasta recibir foco y primer elemento tabulable (WebAIM). */
.vn-skip {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 300;
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-text-dark);
    color: #fff;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.vn-skip:focus {
    top: var(--sp-3);
}

/* ── Sistema de botones (specs/ui-buttons.md) ───────────────────────────
   Tres roles y nada más. Ninguna página redefine `.btn`; sólo puede añadir
   layout (ancho, margen, orden). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.btn--ghost {
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--color-surface-sunken-hover);
}

.btn--sm {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 8px;
}

.btn--lg {
    padding: 15px 28px;
    font-size: 16px;
    border-radius: 12px;
}

.btn--full {
    width: 100%;
}

.link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link:hover {
    color: var(--color-primary-hover);
}

/* En pantalla táctil ningún control baja de 44 px (ui-buttons.md §8). Es
   suelo, no tamaño: el padding y la tipografía los sigue mandando el
   modificador, así que nada se recoloca en horizontal. */
@media (pointer: coarse) {
    .btn,
    .vn-nav a,
    .vn-lang__btn,
    .vn-header__login,
    .vn-menu__link,
    .vn-footer a,
    .vn-footer__links button {
        min-height: 44px;
    }

    .vn-footer a,
    .vn-footer__links button {
        display: inline-flex;
        align-items: center;
    }
}

/* ── Cabecera ────────────────────────────────────────────────────────────
   La de la aplicación: blanca, opaca, 72 px, hairline y sombra sólo al
   desplazarse. Opaca a propósito — NN/g: las translúcidas distraen. */
.vn-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-sans);
    transition: box-shadow 0.2s ease;
}

.vn-header--scrolled {
    box-shadow: 0 2px 24px rgba(28, 20, 16, 0.09);
}

.vn-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--header-h);
    padding: 0 clamp(var(--sp-4), 4vw, 80px);
    max-width: 1600px;
    margin: 0 auto;
}

.vn-header__brand {
    display: flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.vn-header__brand img {
    height: 28px;
    width: auto;
    display: block;
}

/* La ranura de la búsqueda del centro de ayuda. Vacía en el resto del sitio,
   y por eso no reserva espacio. */
.vn-header__slot {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.vn-nav {
    margin-left: auto;
}

.vn-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-4), 2.4vw, var(--sp-6));
    list-style: none;
    margin: 0;
    padding: 0;
}

.vn-nav a {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) 0;
    border-bottom: 2px solid transparent;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.vn-nav a:hover {
    color: var(--color-text);
}

.vn-nav a[aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-text-dark);
}

.vn-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

.vn-header__login {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.vn-header__login:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
}

/* Selector de idioma. Sólo se pinta donde hay diccionario: una página sin
   traducción no ofrece un botón que no hace nada. */
.vn-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.vn-lang__btn {
    border: 0;
    background: none;
    padding: 6px var(--sp-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.vn-lang__btn:hover {
    color: var(--color-text);
}

.vn-lang__btn[aria-pressed="true"] {
    color: var(--color-text);
    background: var(--color-surface-sunken);
}

/* Botón de icono de la cabecera móvil: cuadrado y de 44 px, siempre. */
.vn-iconbtn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.vn-iconbtn:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
}

.vn-iconbtn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vn-burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
    transition: background 0.15s;
}

.vn-burger:hover {
    background: var(--color-surface-sunken);
}

.vn-burger span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-text);
    transition: transform 0.25s, opacity 0.2s;
}

.vn-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.vn-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.vn-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
    .vn-nav,
    .vn-header__actions {
        display: none;
    }

    .vn-burger,
    .vn-iconbtn {
        display: inline-flex;
    }

    .vn-header__slot {
        display: none;
    }

    .vn-header__brand {
        margin-right: auto;
    }
}

/* ── Menú móvil ─────────────────────────────────────────────────────────
   Se despliega bajo la cabecera, como hasta ahora. */
.vn-menu {
    display: none;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.vn-menu[data-open="true"] {
    display: block;
    animation: vn-menu-in 0.2s ease;
}

@keyframes vn-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vn-menu__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 clamp(var(--sp-4), 5vw, var(--sp-7));
    font-size: var(--fs-control);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
}

.vn-menu__link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.vn-menu__link[aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
}

.vn-menu__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) clamp(var(--sp-4), 5vw, var(--sp-7));
    background: var(--color-bg);
}

.vn-menu__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ── Pie ─────────────────────────────────────────────────────────────────
   Paleta oscura propia: exención registrada. */
.vn-footer {
    background: var(--color-footer-bg);
    color: var(--color-on-footer);
    font-family: var(--font-sans);
    padding: var(--sp-7) clamp(var(--sp-4), 4vw, var(--sp-6)) 0;
    margin-top: var(--sp-7);
}

.vn-footer__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-7);
}

.vn-footer__brand img {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: var(--sp-3);
}

.vn-footer__tagline {
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    max-width: 300px;
    margin: 0;
}

.vn-footer__social {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: flex;
    gap: var(--sp-2);
}

.vn-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--color-footer-surface);
    color: var(--color-on-footer-muted);
    transition: background 0.2s, color 0.2s;
}

.vn-footer__social a:hover {
    background: var(--color-footer-surface-hover);
    color: var(--color-on-footer-strong);
}

.vn-footer__col h2 {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-on-footer-strong);
    margin: 0 0 var(--sp-4);
}

.vn-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.vn-footer a {
    font-size: var(--fs-body-sm);
    color: var(--color-on-footer);
    text-decoration: none;
    transition: color 0.2s;
}

.vn-footer a:hover {
    color: var(--color-on-footer-strong);
}

/* «Preferencias de cookies» abre la segunda capa: es un botón con la cara de sus vecinos. */
.vn-footer__links button {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--fs-body-sm);
    text-align: inherit;
    color: var(--color-on-footer);
    cursor: pointer;
    transition: color 0.2s;
}

.vn-footer__links button:hover {
    color: var(--color-on-footer-strong);
}

.vn-footer__item {
    margin-bottom: var(--sp-3);
}

.vn-footer__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-on-footer-muted);
    margin-bottom: 3px;
}

.vn-footer__value {
    font-size: var(--fs-body-sm);
}

.vn-footer__bottom {
    max-width: var(--page-max);
    margin: var(--sp-7) auto 0;
    border-top: 1px solid var(--color-footer-line);
    padding: var(--sp-4) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--fs-caption);
    color: var(--color-on-footer-muted);
}

.vn-footer__legal {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .vn-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
}

@media (max-width: 540px) {
    .vn-footer__inner {
        grid-template-columns: 1fr;
    }

    .vn-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Un foco visible en todo el cromo, con el rojo de marca. */
.vn-header :focus-visible,
.vn-menu :focus-visible,
.vn-footer :focus-visible,
.vn-skip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--r-control);
}

.vn-footer :focus-visible {
    outline-color: var(--color-on-footer-strong);
}

/* ── Consentimiento de cookies (specs/cookie-consent.md §8.3) ─────────────
   El aviso, la segunda capa y su interruptor, calcados de las maquetas y de
   frontend/src/styles.scss. Lo pinta assets/site.js. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -8px 28px rgba(28, 27, 25, 0.08);
    padding: 16px clamp(16px, 4vw, 80px);
    font-family: var(--font-sans);
}

.cookie-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px 32px;
    flex-wrap: wrap;
}

.cookie-banner__text { flex: 1 1 420px; min-width: 0; }
.cookie-banner__title { margin: 0 0 3px; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 700; color: var(--color-text); }
.cookie-banner__body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); }
.cookie-banner__body a { color: var(--color-primary); font-weight: 500; }

.cookie-banner__actions {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Aceptar y rechazar: la misma caja y el mismo color. */
.cookie-banner__actions .btn { min-width: 156px; }
.cookie-banner .link { font-size: 14px; }

@media (max-width: 599px) {
    .cookie-banner { padding: 12px 16px 14px; }
    .cookie-banner__inner { gap: 10px; }
    .cookie-banner__body { line-height: 1.5; }
    .cookie-banner__actions { width: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 8px; }
    .cookie-banner__actions .btn { width: 100%; min-height: 44px; }
    .cookie-banner__actions .link { align-self: center; min-height: 44px; padding: 0 4px; }
}

/* La segunda capa: una <dialog> nativa, centrada; en móvil, hoja pegada abajo. */
.cookie-dialog {
    width: calc(100% - 32px);
    max-width: 480px;
    max-height: 90vh;
    /* La centra la <dialog> nativa con margin:auto; los `* { margin: 0 }` de las páginas se lo quitan. */
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
    font-family: var(--font-sans);
    color: var(--color-text-secondary);
    overflow-y: auto;
}

.cookie-dialog[open] { display: flex; flex-direction: column; }
.cookie-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.cookie-dialog__hdr {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.cookie-dialog__title { flex: 1; margin: 0; font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--color-text); }

.cookie-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.cookie-dialog__close:hover { background: var(--color-bg); }

.cookie-dialog__body { padding: 14px 20px 6px; font-size: var(--fs-body-sm); line-height: 1.6; }
.cookie-dialog__body > p { margin: 0 0 var(--sp-2); }

.cookie-dialog__footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border-light);
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cookie-dialog__footer .btn { min-width: 140px; }

@media (max-width: 599px) {
    .cookie-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 94vh; }
    .cookie-dialog__footer { flex-direction: column; }
    .cookie-dialog__footer .btn { width: 100%; min-height: 44px; }
}

.cookie-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--color-border-light); }
.cookie-row:first-of-type { border-top: 0; }
.cookie-row__text { flex: 1 1 0; min-width: 0; }
.cookie-row__title { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.cookie-row__body { margin: 0; font-size: 13px; color: var(--color-text-secondary); }
.cookie-row__vendors { display: block; margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
.cookie-row details { margin-top: 6px; font-size: 12px; }
.cookie-row summary { cursor: pointer; color: var(--color-primary); font-weight: 500; list-style: none; }
.cookie-row summary::-webkit-details-marker { display: none; }
.cookie-row summary::before { content: '›'; display: inline-block; margin-right: 4px; transition: transform 0.15s; }
.cookie-row details[open] summary::before { transform: rotate(90deg); }
.cookie-row table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.cookie-row td { padding: 3px 6px 3px 0; vertical-align: top; color: var(--color-text-secondary); border-top: 1px solid var(--color-border-warm); }
.cookie-row td:first-child { font-family: var(--font-mono); color: var(--color-text); overflow-wrap: anywhere; }

/* El interruptor de <app-toggle-switch>: role="switch" sobre un <button>. */
.switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--color-border); cursor: pointer; transition: background 0.2s; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-card); transition: transform 0.2s; }
.switch[aria-checked="true"] { background: var(--color-primary); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(20px); }
.switch:disabled { cursor: not-allowed; opacity: 0.65; }

.cookie-banner :focus-visible,
.cookie-dialog :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .switch,
    .switch__knob,
    .cookie-row summary::before {
        transition: none;
    }
}

/* ── Impresión: el cromo no es parte del documento ──────────────────────── */
@media print {
    .cookie-banner,
    .vn-header,
    .vn-menu,
    .vn-footer,
    .vn-skip {
        display: none !important;
    }
}