/* =====================================================================
   ESTILOS COMUNES (alumnado y profesorado)
   ===================================================================== */

/* ---------- Fuente "Escolar 1" (archivo en /assets/fonts/) ----------
   El navegador prueba cada formato en orden; si ninguno existe, usa
   las fuentes de respaldo redondeadas definidas en --fuente. */
@font-face {
    font-family: "Escolar 1";
    src: local("Escolar 1"), local("Escolar1"),
         url("../fonts/escolar1.ttf") format("truetype");
    font-display: swap;
}

/* ---------- Paleta y variables ---------- */
:root {
    color-scheme: light;

    /* Paleta principal */
    --crema: #f4e5ae;
    --rosa:  #f2c0c1;
    --lila:  #d1b8e0;
    --azul:  #a0c5de;

    /* Tonos oscuros (bordes, sombras y textos con buen contraste) */
    --crema-osc: #b38a1f;
    --rosa-osc:  #b84a50;
    --lila-osc:  #6f4a94;
    --azul-osc:  #2b6690;

    /* Tonos claros (fondos) */
    --crema-claro: #fcf7e3;
    --rosa-claro:  #fcecec;
    --lila-claro:  #f3ecf8;
    --azul-claro:  #e8f1f8;

    /* Textos */
    --tinta:       #2b2d42;
    --tinta-suave: #575a73;

    /* Caritas (fuera de la paleta, deben verse muy claras) */
    --rojo:     #e53935;
    --rojo-osc: #a31515;
    --amarillo: #fdd835;
    --amarillo-osc: #8a6700;
    --verde:    #43a047;
    --verde-osc: #1b5e20;
    --oro:      #f5b301;

    --fuente: "Escolar 1", "Andika", "Nunito", "Varela Round", "Quicksand",
              "Comic Neue", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS",
              system-ui, -apple-system, "Segoe UI", sans-serif;

    --radio: 18px;
    --sombra: 0 6px 20px rgba(43, 45, 66, .12);
    --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--fuente);
    color: var(--tinta);
    line-height: 1.5;
    overflow-x: hidden;           /* nunca scroll horizontal */
    -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

h1, h2, h3, p { overflow-wrap: break-word; }

.icono {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    vertical-align: middle;
}

:focus-visible {
    outline: 4px solid var(--azul-osc);
    outline-offset: 3px;
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Animaciones compartidas ---------- */
@keyframes aparecer {
    0%   { opacity: 0; transform: scale(.4); }
    70%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes subir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes temblor {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* ---------- Respeto a "reducir movimiento" del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}