/* ==========================================================================
   TOMALACARTA.COM — NUCLEO
   --------------------------------------------------------------------------
   Tokens y primitivas compartidas. Se carga ANTES que la hoja de cada pagina,
   asi que cualquier regla de pagina puede sobreescribir lo de aqui sin pelear
   con especificidades.

   Los valores no son inventados: salen de contar lo que ya usaba el proyecto.
   El verde #15554A aparecia 108 veces repetido a mano, el gris de texto suave
   #6b7280 otras 37, y el borde #e5e7eb 33.

   Creado el 20-08-2026 al sacar las 6.372 lineas de CSS que vivian dentro de
   los ficheros PHP.
   ========================================================================== */

:root {
    /* --- Marca --- */
    --verde:            #15554A;   /* color corporativo */
    --verde-claro:      #1f6b5f;   /* estado hover del anterior */
    --verde-fondo:      #e2efe7;   /* fondos de aviso correcto */

    /* --- Texto --- */
    --texto:            #1f2937;
    --texto-medio:      #374151;
    --texto-suave:      #6b7280;

    /* --- Superficies y bordes --- */
    --blanco:           #ffffff;
    --fondo:            #f8f9fa;
    --fondo-suave:      #f9fafb;
    --gris-claro:       #f3f4f6;
    --borde:            #e5e7eb;
    --borde-medio:      #e0e0e0;

    /* --- Estados --- */
    --rojo:             #dc2626;
    --rojo-fondo:       #fee2e2;
    --ambar:            #d97706;
    --ambar-fondo:      #fef3c7;

    /* --- Tipografia --- */
    --tipo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --tipo-mono: 'Courier New', ui-monospace, monospace;

    /* --- Formas --- */
    --radio:            8px;
    --radio-grande:     16px;
    --sombra:           0 4px 12px rgba(0, 0, 0, .08);
    --sombra-fuerte:    0 20px 60px rgba(0, 0, 0, .2);

    /* --- Degradado de fondo, repetido en media docena de pantallas --- */
    --fondo-marca: linear-gradient(135deg, var(--verde), var(--verde-claro));
}

/* --------------------------------------------------------------------------
   Reset minimo. Es el que ya repetian casi todos los ficheros.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Accesibilidad: foco visible y respeto por quien pide menos movimiento.
   No estaba en ninguna parte del proyecto.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--verde-claro);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

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