/* Sistema de diseño de Emotito: tokens y componentes compartidos por todas las páginas.
   Reglas de uso en DISENO.md. Los colores se nombran por función, nunca por valor.

   Capas: tokens < base < components. El CSS propio de cada página va sin capa y por eso les
   gana: sirve para ajustes puntuales, pero lo que se repite tiene que vivir acá. */
@layer tokens, base, components;

@layer tokens {
    :root {
        color-scheme: light dark;

        /* ---- Color (modo claro) ---- */
        --color-bg: #f6f7f9; /* fondo de la página */
        --color-surface: #ffffff; /* tarjetas, paneles, menús */
        --color-surface-sunken: #eef0f3; /* hundido: segmentados, pestañas, esqueletos */
        --color-text: #16181d;
        --color-text-muted: #5b616c; /* secundario: 5.9:1 sobre surface */
        --color-border: #dfe2e7; /* separadores y bordes decorativos */
        --color-border-strong: #868c97; /* bordes de campos: 3:1 sobre surface (WCAG 1.4.11) */
        --color-primary: #0b7a6e; /* acción principal */
        --color-primary-hover: #086358;
        --color-on-primary: #ffffff;
        --color-success: #17733c;
        --color-danger: #c22424;
        --color-on-danger: #ffffff;
        --color-warning: #8a5300; /* texto de aviso */
        --color-warning-strong: #b26a00; /* íconos y franjas de aviso */
        --color-focus: #0b7a6e;
        --color-brand: #6d28d9; /* violeta de 7TV/Twitch: perfiles */
        --color-brand-soft: rgba(109, 40, 217, 0.12);
        --color-favorite: #b07d00; /* estrella de favoritos */
        --color-kick: #246b0b; /* etiqueta de la plataforma Kick */
        --color-kick-soft: rgba(83, 252, 24, 0.16);
        --color-overlay: rgba(0, 0, 0, 0.5); /* fondo detrás de los modales */
        --color-checker: #e4e6ea; /* cuadriculado de transparencia */
        --color-skeleton: #e7e9ed;
        --color-skeleton-shine: #f3f4f6;

        /* ---- Tipografía (fluida entre 375 y 1440 px) ---- */
        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-mono: ui-monospace, Consolas, monospace;
        --text-display: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem); /* 26 → 34 px: cifras, portada */
        --text-title: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); /* 20 → 24 px: h1 de la página */
        --text-subtitle: 1.0625rem; /* 17 px: h2 de secciones y paneles */
        --text-body: 0.9375rem; /* 15 px */
        --text-small: 0.8125rem; /* 13 px: metadatos, ayudas */
        --leading-tight: 1.25;
        --leading-body: 1.5;
        --weight-regular: 400;
        --weight-medium: 500;
        --weight-bold: 650;
        --measure: 62ch; /* largo máximo de una línea de texto corrido (≈65–75 caracteres reales) */

        /* ---- Espaciado (escala de 4) ---- */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;
        --gutter: clamp(16px, 3vw, 32px); /* margen lateral de la página */
        --content-max: 1200px; /* ancho máximo del contenido */

        /* ---- Forma ---- */
        --radius-sm: 8px; /* controles chicos, ítems de menú */
        --radius-md: 10px; /* botones y campos */
        --radius-lg: 14px; /* tarjetas */
        --radius-xl: 18px; /* paneles y diálogos */
        --radius-pill: 999px;
        --control-height: 44px; /* área táctil mínima */
        --control-height-sm: 36px; /* solo con puntero fino (escritorio) */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);

        /* ---- Movimiento ---- */
        --duration-fast: 120ms;
        --duration-base: 180ms;
        --ease: cubic-bezier(0.2, 0, 0, 1);
        --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-bg: #0f1115;
            --color-surface: #181b21;
            --color-surface-sunken: #22262e;
            --color-text: #eceef2;
            --color-text-muted: #a3a9b4;
            --color-border: #2c313a;
            --color-border-strong: #737a87;
            --color-primary: #25d366;
            --color-primary-hover: #4ade80;
            --color-on-primary: #06120a;
            --color-success: #4ade80;
            --color-danger: #ff7a7a;
            --color-on-danger: #1a0505;
            --color-warning: #fbbf24;
            --color-warning-strong: #fbbf24;
            --color-focus: #4ade80;
            --color-brand: #b49cfc;
            --color-brand-soft: rgba(180, 156, 252, 0.16);
            --color-favorite: #f5c400;
            --color-kick: #53fc18;
            --color-kick-soft: rgba(83, 252, 24, 0.14);
            --color-overlay: rgba(0, 0, 0, 0.65);
            --color-checker: #262a32;
            --color-skeleton: #232730;
            --color-skeleton-shine: #2d323c;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        :root {
            --duration-fast: 0ms;
            --duration-base: 0ms;
        }
    }
}

/* ======================================================================================
   BASE: el HTML sin clases
   ====================================================================================== */
@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    [hidden] {
        display: none !important; /* si no, un display: flex/grid le gana a hidden */
    }
    html {
        -webkit-text-size-adjust: 100%;
    }
    body {
        margin: 0;
        font-family: var(--font-sans);
        font-size: var(--text-body);
        line-height: var(--leading-body);
        background: var(--color-bg);
        color: var(--color-text);
    }
    h1,
    h2,
    h3 {
        line-height: var(--leading-tight);
        font-weight: var(--weight-bold);
    }
    a {
        color: var(--color-primary);
        text-underline-offset: 0.15em;
    }
    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }
    /* Foco visible siempre que se navega con teclado (nunca outline: none sin reemplazo) */
    :focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }
    /* Destino de "Saltar al contenido": recibe el foco, pero no hace falta marcarlo */
    main[tabindex="-1"]:focus {
        outline: none;
    }
    /* Texto solo para lectores de pantalla */
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ======================================================================================
   COMPONENTES. Una sola versión de cada pieza; solo usan tokens.
   Estados de todo lo interactivo: hover (solo con puntero que lo tenga), focus-visible, active,
   disabled y, donde aplica, loading (aria-busy) y selected (aria-pressed / aria-selected).
   ====================================================================================== */
@layer components {
    /* ---------- Botón ----------
       .ui-btn + una variante: --primary (UNA por pantalla), --secondary, --danger, --ghost.
       Tamaño: --sm (solo con puntero fino: en táctil sigue midiendo 44 px). --block: todo el
       ancho. Sirve igual en <button> y en <a>. Cargando: aria-busy="true" y un texto que diga
       qué pasa ("Enviando…"); mientras tanto no se puede volver a tocar. */
    .ui-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: var(--control-height);
        padding: 0 var(--space-4);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: var(--text-body);
        font-weight: var(--weight-bold);
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        transition:
            background-color var(--duration-fast) var(--ease),
            border-color var(--duration-fast) var(--ease),
            transform var(--duration-fast) var(--ease);
    }
    .ui-btn:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
        transform: scale(0.98);
    }
    .ui-btn:disabled,
    .ui-btn[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    .ui-btn[aria-busy="true"] {
        cursor: progress;
        pointer-events: none;
        opacity: 0.8;
    }
    .ui-btn--primary {
        background: var(--color-primary);
        color: var(--color-on-primary);
    }
    .ui-btn--secondary {
        background: var(--color-surface);
        border-color: var(--color-border-strong);
    }
    .ui-btn--danger {
        background: var(--color-surface);
        border-color: var(--color-danger);
        color: var(--color-danger);
    }
    .ui-btn--ghost {
        background: transparent;
        color: var(--color-text);
    }
    .ui-btn--block {
        display: flex;
        width: 100%;
    }
    @media (hover: hover) and (pointer: fine) {
        .ui-btn--primary:hover {
            background: var(--color-primary-hover);
        }
        .ui-btn--secondary:hover,
        .ui-btn--ghost:hover {
            background: var(--color-surface-sunken);
        }
        .ui-btn--danger:hover {
            background: var(--color-danger);
            color: var(--color-on-danger);
        }
        .ui-btn--sm {
            min-height: var(--control-height-sm);
            padding: 0 var(--space-3);
            font-size: var(--text-small);
        }
    }

    /* ---------- Botón de ícono (cerrar ×, más opciones ⋯, favorito ☆) ----------
       Siempre con aria-label. Área de 44×44 aunque el ícono sea chico. */
    .ui-icon-btn {
        display: inline-grid;
        place-items: center;
        width: var(--control-height);
        height: var(--control-height);
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-text-muted);
        font-size: 1.375rem;
        line-height: 1;
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease),
            color var(--duration-fast) var(--ease);
    }
    .ui-icon-btn--outlined {
        border-color: var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text);
    }
    .ui-icon-btn:active,
    .ui-icon-btn[aria-expanded="true"] {
        background: var(--color-surface-sunken);
        color: var(--color-text);
    }
    @media (hover: hover) and (pointer: fine) {
        .ui-icon-btn:hover {
            background: var(--color-surface-sunken);
            color: var(--color-text);
        }
    }

    /* ---------- Botón con aspecto de enlace (acciones dentro de un texto) ---------- */
    .ui-link {
        display: inline;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-primary);
        font: inherit;
        text-decoration: underline;
        text-underline-offset: 0.15em;
        cursor: pointer;
    }
    .ui-link:disabled {
        color: var(--color-text-muted);
        cursor: not-allowed;
    }
    /* Un enlace suelto (no dentro de un párrafo): 24 px de alto con mouse y 44 en pantallas táctiles */
    .ui-tap {
        display: inline-flex;
        align-items: center;
        min-height: 24px; /* WCAG 2.5.8: 24 px como mínimo también con mouse */
    }
    @media (pointer: coarse) {
        .ui-tap {
            min-height: var(--control-height);
        }
    }
    @media (hover: hover) and (pointer: fine) {
        .ui-link:hover,
        a:hover {
            text-decoration-thickness: 2px;
        }
    }

    /* ---------- Tarjeta ----------
       .ui-card: superficie con borde. --interactive: toda la tarjeta es un botón o enlace. */
    .ui-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }
    .ui-card--interactive {
        cursor: pointer;
        color: inherit;
        font: inherit;
        transition:
            border-color var(--duration-fast) var(--ease),
            transform var(--duration-fast) var(--ease),
            box-shadow var(--duration-fast) var(--ease);
    }
    .ui-card--interactive:active:not(:disabled) {
        transform: scale(0.98);
    }
    .ui-card--interactive:focus-visible {
        outline: none;
        border-color: var(--color-focus);
        box-shadow: var(--focus-ring);
    }
    .ui-card--interactive:disabled,
    .ui-card--interactive[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.55;
    }
    @media (hover: hover) and (pointer: fine) {
        .ui-card--interactive:hover:not(:disabled) {
            border-color: var(--color-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }
    }

    /* ---------- Campo de formulario ----------
       <div class="ui-field"> <label class="ui-label" for="x"> <input class="ui-input" id="x"
       aria-describedby="x-ayuda x-error"> <p class="ui-help" id="x-ayuda"> <p class="ui-error"
       id="x-error">. El error lleva ícono (no depende solo del color) y el campo aria-invalid. */
    .ui-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        margin-bottom: var(--space-4);
    }
    .ui-label {
        font-size: var(--text-small);
        font-weight: var(--weight-bold);
    }
    .ui-input,
    .ui-select,
    .ui-textarea {
        width: 100%;
        min-height: var(--control-height);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: max(16px, var(--text-body)); /* con menos de 16 px, iOS hace zoom al tocar */
        transition: border-color var(--duration-fast) var(--ease);
    }
    .ui-input::placeholder,
    .ui-textarea::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }
    .ui-textarea {
        min-height: 96px;
        resize: vertical;
    }
    .ui-input:focus-visible,
    .ui-select:focus-visible,
    .ui-textarea:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 0;
        border-color: var(--color-focus);
    }
    .ui-input:disabled,
    .ui-select:disabled,
    .ui-textarea:disabled,
    .ui-input[readonly] {
        background: var(--color-surface-sunken);
        color: var(--color-text-muted);
    }
    .ui-input:disabled,
    .ui-select:disabled,
    .ui-textarea:disabled {
        cursor: not-allowed;
    }
    .ui-input[aria-invalid="true"],
    .ui-select[aria-invalid="true"],
    .ui-textarea[aria-invalid="true"] {
        border-color: var(--color-danger);
        box-shadow: inset 0 0 0 1px var(--color-danger);
    }
    .ui-help {
        margin: 0;
        font-size: var(--text-small);
        color: var(--color-text-muted);
    }
    .ui-error {
        margin: 0;
        font-size: var(--text-small);
        font-weight: var(--weight-medium);
        color: var(--color-danger);
    }
    .ui-error:not(:empty)::before {
        content: "⚠ ";
    }
    /* Casilla con su texto: toda la fila se puede tocar */
    .ui-check {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
        min-height: var(--control-height);
        padding: var(--space-2) 0;
        cursor: pointer;
    }
    .ui-check input {
        flex: none;
        width: 20px;
        height: 20px;
        margin: 2px 0 0;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    /* ---------- Diálogo / modal ----------
       Un <dialog class="ui-dialog"> abierto con showModal(): el navegador atrapa el foco, lo
       cierra con Escape y deja el resto inerte. Al cerrar, el foco vuelve a quien lo abrió (JS). */
    .ui-dialog {
        width: min(440px, calc(100vw - 2 * var(--space-4)));
        max-height: calc(100dvh - 2 * var(--space-4));
        margin: auto;
        padding: var(--space-5);
        border: 0;
        border-radius: var(--radius-xl);
        background: var(--color-surface);
        color: var(--color-text);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }
    .ui-dialog::backdrop {
        background: var(--color-overlay);
    }
    .ui-dialog__title {
        margin: 0 0 var(--space-2);
        padding-right: var(--control-height); /* lugar para la × */
        font-size: var(--text-subtitle);
    }
    .ui-dialog__actions {
        display: flex;
        flex-wrap: wrap-reverse; /* en angosto, la acción principal queda arriba */
        gap: var(--space-2);
        justify-content: flex-end;
        margin-top: var(--space-4);
    }
    .ui-dialog__close {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
    }

    /* ---------- Aviso (info, éxito, error, atención) ----------
       Siempre ícono + texto (el color solo acompaña). Para anunciarlo: role="status" (éxito,
       info) o role="alert" (error). --inline: sin caja, debajo de un botón o formulario. Vacío
       no ocupa lugar. */
    .ui-notice {
        display: flex;
        gap: var(--space-2);
        align-items: flex-start;
        margin: 0;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-border);
        border-left: 4px solid var(--color-text-muted);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        font-size: var(--text-small);
    }
    .ui-notice:empty {
        display: none;
    }
    .ui-notice::before {
        flex: none;
        font-weight: var(--weight-bold);
    }
    .ui-notice--info::before {
        content: "ℹ";
        color: var(--color-text-muted);
    }
    .ui-notice--success {
        border-left-color: var(--color-success);
    }
    .ui-notice--success::before {
        content: "✓";
        color: var(--color-success);
    }
    .ui-notice--error {
        border-left-color: var(--color-danger);
    }
    .ui-notice--error::before {
        content: "⚠";
        color: var(--color-danger);
    }
    .ui-notice--warning {
        border-left-color: var(--color-warning-strong);
    }
    .ui-notice--warning::before {
        content: "!";
        color: var(--color-warning);
    }
    .ui-notice--inline {
        padding: 0;
        border: 0;
        background: none;
    }
    .ui-notice--inline.ui-notice--success {
        color: var(--color-success);
    }
    .ui-notice--inline.ui-notice--error {
        color: var(--color-danger);
    }

    /* ---------- Etiqueta / badge ---------- */
    .ui-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: 2px 10px;
        border-radius: var(--radius-pill);
        background: var(--color-surface-sunken);
        color: var(--color-text-muted);
        font-size: var(--text-small);
        font-weight: var(--weight-bold);
        line-height: 1.5;
        white-space: nowrap;
    }
    .ui-badge--brand {
        background: var(--color-brand-soft);
        color: var(--color-brand);
    }
    .ui-badge--success {
        color: var(--color-success);
    }
    .ui-badge--warning {
        color: var(--color-warning);
    }
    .ui-badge--kick {
        background: var(--color-kick-soft);
        color: var(--color-kick);
    }

    /* ---------- Segmentado y pestañas (una opción elegida entre pocas) ----------
       Segmentado: botones con aria-pressed. Pestañas: role="tab" con aria-selected. */
    .ui-seg {
        display: flex;
        gap: 3px;
        padding: 3px;
        border-radius: var(--radius-md);
        background: var(--color-surface-sunken);
    }
    .ui-seg > button {
        flex: 1;
        min-height: calc(var(--control-height) - 6px);
        padding: 0 var(--space-3);
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--color-text-muted);
        font-size: var(--text-small);
        white-space: nowrap;
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease),
            color var(--duration-fast) var(--ease);
    }
    .ui-seg > button[aria-pressed="true"],
    .ui-seg > button[aria-selected="true"] {
        background: var(--color-surface);
        color: var(--color-text);
        font-weight: var(--weight-bold);
        box-shadow: var(--shadow-sm);
    }
    .ui-seg > button:active {
        color: var(--color-text);
    }
    .ui-seg > button:focus-visible {
        outline-offset: -2px;
    }
    @media (pointer: coarse) {
        .ui-seg > button {
            min-height: var(--control-height);
        }
    }
    @media (hover: hover) and (pointer: fine) {
        .ui-seg > button:hover {
            color: var(--color-text);
        }
    }

    /* ---------- Menú desplegable ---------- */
    .ui-menu {
        display: flex;
        flex-direction: column;
        min-width: 220px;
        padding: var(--space-1);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: var(--shadow-lg);
    }
    .ui-menu > a,
    .ui-menu > button {
        display: flex;
        align-items: center;
        min-height: var(--control-height);
        padding: 0 var(--space-3);
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--color-text);
        font-size: var(--text-body);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .ui-menu > a:focus-visible,
    .ui-menu > button:focus-visible {
        outline-offset: -2px;
        background: var(--color-surface-sunken);
    }
    .ui-menu > a:active,
    .ui-menu > button:active {
        background: var(--color-surface-sunken);
    }
    @media (hover: hover) and (pointer: fine) {
        .ui-menu > a:hover,
        .ui-menu > button:hover {
            background: var(--color-surface-sunken);
        }
    }

    /* ---------- Estado vacío y estado de error ----------
       En el lugar del contenido que falta. Dicen POR QUÉ (título corto + explicación) y ofrecen
       el siguiente paso (una acción principal y, si hace falta, una salida segura).
       <div class="ui-state" role="status|alert"> <p class="ui-state__icon" aria-hidden>
       <h2|p class="ui-state__title"> <p class="ui-state__text"> <div class="ui-state__actions">
       El de error lleva role="alert" y nunca muestra mensajes técnicos. */
    .ui-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        max-width: 44ch;
        margin: var(--space-6) auto;
        padding: 0 var(--space-4);
        text-align: center;
    }
    .ui-state__icon {
        margin: 0;
        font-size: 2rem;
        line-height: 1;
        color: var(--color-text-muted);
    }
    .ui-state--error .ui-state__icon {
        color: var(--color-danger);
    }
    .ui-state__title {
        margin: 0;
        font-size: var(--text-subtitle);
        font-weight: var(--weight-bold);
    }
    .ui-state__text {
        margin: 0;
        color: var(--color-text-muted);
    }
    .ui-state__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: center;
        margin-top: var(--space-2);
    }

    /* ---------- Esqueleto de carga ----------
       Ocupa lo mismo que el contenido que va a llegar (nada se mueve cuando llega). Los bloques
       van con aria-hidden; la región que carga lleva aria-busy="true" y un texto oculto
       "Cargando…" en un role="status", que se anuncia una sola vez.
       .ui-skeleton: bloque (alto y ancho los da quien lo usa). --text: una línea de texto (se
       pone adentro del elemento de texto, así mide su interlineado). --circle: avatar. */
    .ui-skeleton {
        display: block;
        border-radius: var(--radius-sm);
        background: linear-gradient(
                90deg,
                var(--color-skeleton) 0%,
                var(--color-skeleton-shine) 50%,
                var(--color-skeleton) 100%
            )
            0 0 / 200% 100%;
        animation: ui-shimmer 1.4s ease-in-out infinite;
    }
    .ui-skeleton--text {
        display: inline-block;
        width: 100%;
        height: 0.8em;
        vertical-align: middle;
    }
    .ui-skeleton--circle {
        border-radius: 50%;
    }
    @media (prefers-reduced-motion: reduce) {
        .ui-skeleton {
            animation: none;
        }
    }

    /* ---------- Título de sección ---------- */
    .ui-section-title {
        margin: 0 0 var(--space-3);
        font-size: var(--text-subtitle);
    }

    /* ---------- Saltar al contenido (visible solo al enfocarlo con el teclado) ---------- */
    .ui-skip-link {
        position: absolute;
        left: var(--space-2);
        top: -100px;
        z-index: 100;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-md);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-weight: var(--weight-bold);
    }
    .ui-skip-link:focus-visible {
        top: var(--space-2);
    }
}

/* Brillo de los esqueletos: también lo usan las imágenes de la grilla mientras cargan */
@keyframes ui-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}