/* =============================================================================
   Escuela PIB 2 — Sistema de diseño: tokens, reset y base
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens de diseño
   ----------------------------------------------------------------------------- */
:root {
    /* Paleta - madera */
    --color-madera-clara: #E7D6B6;
    --color-madera-media: #CFA164;
    --color-madera-oscura: #A67C52;
    --color-cacao: #8C5E3C;
    --color-marron-profundo: #4B2F18;

    /* Paleta - neutros cálidos */
    --color-crema: #F7F3E9;
    --color-beige: #F1E9D8;
    --color-beige-oscuro: #E2D6BC;
    --color-gris-calido: #68645A;
    --color-gris-oscuro: #2E2B26;
    --color-blanco: #FFFFFF;

    /* Paleta - acento */
    --color-oliva: #2C5E3E;
    --color-oliva-oscuro: #234B31;
    --color-oliva-claro: #4C8A66;

    /* Estados semánticos */
    --color-exito: #2C5E3E;
    --color-exito-fondo: #E2F0E6;
    --color-informacion: #4A6B8A;
    --color-informacion-fondo: #E5EDF5;
    --color-advertencia: #B68A2D;
    --color-advertencia-fondo: #F5EBD3;
    --color-error: #A33B2B;
    --color-error-fondo: #F5DDD8;
    --color-peligro: #6F1F18;
    --color-peligro-fondo: #E9C8C2;

    /* Bordes y separadores */
    --color-borde: #DDD2BC;
    --color-borde-fuerte: #C8B996;
    --color-borde-sutil: #ECE3CE;

    /* Texto */
    --color-texto: #2E2B26;
    --color-texto-secundario: #68645A;
    --color-texto-muy-sutil: #999280;
    --color-texto-inverso: #F7F3E9;
    --color-enlace: #8C5E3C;
    --color-enlace-hover: #4B2F18;

    /* Superficies */
    --color-fondo: #F7F3E9;
    --color-superficie: #FFFFFF;
    --color-superficie-alt: #F1E9D8;
    --color-superficie-borde: #ECE3CE;

    /* Tipografía */
    --fuente-base: 'Lato', 'Source Sans 3', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fuente-editorial: 'Merriweather', Georgia, 'Times New Roman', serif;
    --fuente-accesible: 'OpenDyslexic', 'Comic Sans MS', sans-serif;

    --tamano-texto-xs: 0.75rem;    /* 12 */
    --tamano-texto-sm: 0.875rem;   /* 14 */
    --tamano-texto-base: 1rem;     /* 16 */
    --tamano-texto-md: 1.125rem;   /* 18 */
    --tamano-texto-lg: 1.25rem;    /* 20 */
    --tamano-texto-xl: 1.5rem;     /* 24 */
    --tamano-texto-2xl: 1.875rem;  /* 30 */
    --tamano-texto-3xl: 2.25rem;   /* 36 */
    --tamano-texto-4xl: 3rem;      /* 48 */

    --altura-linea-apretada: 1.25;
    --altura-linea-base: 1.5;
    --altura-linea-amplia: 1.75;

    /* Espaciado */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.25rem;
    --espacio-6: 1.5rem;
    --espacio-8: 2rem;
    --espacio-10: 2.5rem;
    --espacio-12: 3rem;
    --espacio-16: 4rem;
    --espacio-20: 5rem;

    /* Radios */
    --radio-sm: 0.25rem;
    --radio-md: 0.5rem;
    --radio-lg: 0.75rem;
    --radio-xl: 1rem;
    --radio-2xl: 1.25rem;
    --radio-completo: 9999px;

    /* Sombras (sutiles, profesionales) */
    --sombra-xs: 0 1px 2px rgba(75, 47, 24, 0.04);
    --sombra-sm: 0 1px 3px rgba(75, 47, 24, 0.08), 0 1px 2px rgba(75, 47, 24, 0.04);
    --sombra-md: 0 4px 6px rgba(75, 47, 24, 0.07), 0 2px 4px rgba(75, 47, 24, 0.04);
    --sombra-lg: 0 10px 15px rgba(75, 47, 24, 0.10), 0 4px 6px rgba(75, 47, 24, 0.05);
    --sombra-xl: 0 20px 25px rgba(75, 47, 24, 0.10), 0 10px 10px rgba(75, 47, 24, 0.04);

    /* Transiciones */
    --transicion-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-lenta: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --contenedor-max: 1200px;
    --contenedor-estrecho: 720px;
    --alto-tactil: 44px;

    /* Tipografía del usuario (control de fuente) */
    --factor-fuente: 1;
}

/* -----------------------------------------------------------------------------
   2. Reset moderno
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-size: calc(16px * var(--factor-fuente));
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fuente-base);
    font-size: var(--tamano-texto-base);
    line-height: var(--altura-linea-base);
    color: var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--espacio-4);
    line-height: var(--altura-linea-apretada);
    font-weight: 600;
    color: var(--color-texto);
}
h1 { font-size: var(--tamano-texto-3xl); }
h2 { font-size: var(--tamano-texto-2xl); }
h3 { font-size: var(--tamano-texto-xl); }
h4 { font-size: var(--tamano-texto-lg); }
h5 { font-size: var(--tamano-texto-md); }
h6 { font-size: var(--tamano-texto-base); }

p {
    margin: 0 0 var(--espacio-4);
}

a {
    color: var(--color-enlace);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transicion-rapida);
}
a:hover {
    color: var(--color-enlace-hover);
}

ul, ol {
    margin: 0 0 var(--espacio-4);
    padding-left: var(--espacio-6);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: var(--espacio-6) 0;
}

/* -----------------------------------------------------------------------------
   3. Utilidades
   ----------------------------------------------------------------------------- */
.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 {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-marron-profundo);
    color: var(--color-texto-inverso);
    padding: var(--espacio-2) var(--espacio-4);
    z-index: 1000;
    text-decoration: none;
    border-radius: 0 0 var(--radio-md) 0;
    transition: top var(--transicion-rapida);
}
.saltar:focus {
    top: 0;
    color: var(--color-texto-inverso);
}

.texto-suave { color: var(--color-texto-secundario); }

.contenedor {
    width: 100%;
    max-width: var(--contenedor-max);
    margin: 0 auto;
    padding: 0 var(--espacio-5);
}
.contenedor--estrecho { max-width: var(--contenedor-estrecho); }

/* -----------------------------------------------------------------------------
   4. Foco accesible
   ----------------------------------------------------------------------------- */
:focus {
    outline: none;
}
:focus-visible {
    outline: 3px solid var(--color-oliva);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-oliva);
    outline-offset: 2px;
}

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