/* Design tokens de la web: los valores que ya usaba el panel, con un
   nombre para cada uno. Lo cargan todas las páginas antes de su propia
   hoja (con <link>, no con @import: así no se encadenan las descargas). */
:root {
    /* Color */
    --color-primario: #4ade80;
    --color-primario-2: #22c55e;
    --color-primario-suave: rgba(74, 222, 128, 0.12);
    --color-sobre-primario: #0a2e1a;   /* texto encima del verde */
    --color-error: #f87171;
    --color-error-suave: rgba(248, 113, 113, 0.12);
    --color-sobre-error: #2a0b0b;      /* texto encima del rojo */
    --color-atencion: #fbbf24;
    --color-atencion-suave: rgba(251, 191, 36, 0.12);
    --color-primario-claro: #a7f3c0;   /* punta clara del degradado verde */
    --color-fondo: #1b1c1f;
    --color-fondo-contenido: #202124;  /* el área de contenido del panel */
    --color-nav-activo: #141517;
    --color-neutro-suave: rgba(255, 255, 255, 0.06);
    --color-pista: #53555c;            /* lo que falta en barras y donas */
    --color-panel: #26272b;
    --color-panel-2: #2e2f34;
    --color-borde: rgba(255, 255, 255, 0.07);
    --color-resalte: rgba(255, 255, 255, 0.03);  /* fila o ítem bajo el mouse */
    --color-velo: rgba(0, 0, 0, 0.55);           /* fondo oscuro detrás del menú del celular */
    --color-texto: #f2f2f2;
    --color-texto-2: #a3a5ab;
    --color-texto-3: #96989f;          /* era #6f7178 (3:1 sobre el panel); este da 4.6:1 o más en todos los fondos (AA) */

    /* Tipografía */
    --fuente-base: 'Poppins', Arial, sans-serif;
    --tamanio-texto-xs: 13px;
    --tamanio-texto-sm: 14px;
    --tamanio-texto-base: 16px;
    --tamanio-texto-md: 18px;
    --tamanio-texto-lg: 20px;
    --tamanio-texto-xl: 24px;
    --tamanio-texto-2xl: 32px;

    /* Espacio y forma */
    --espaciado-xs: 6px;
    --espaciado-sm: 10px;
    --espaciado-md: 14px;
    --espaciado-lg: 22px;
    --espaciado-xl: 30px;
    --radio-sm: 8px;
    --radio-md: 10px;
    --radio-borde: 14px;
    --radio-pill: 50px;
    --sombra-card: 0 8px 20px rgba(0, 0, 0, 0.3);
    --alto-toque: 44px;                /* lo mínimo que se toca cómodo con el dedo */
}

/* ============ ACCESIBILIDAD COMÚN ============ */
/* Foco visible para quien navega con teclado (con mouse no aparece). */
:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}

/* Texto solo para lectores de pantalla. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Saltar al contenido": invisible hasta que recibe el foco con Tab. */
.saltar {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radio-sm);
    background: var(--color-primario);
    color: var(--color-sobre-primario);
    font-weight: 600;
    text-decoration: none;
}

.saltar:focus { top: 16px; }