/* ════════════════════════════════════════════════
   base.css — Universolibro
   Tokens de diseño · Reset · Utilidades
   ════════════════════════════════════════════════ */

/* ── Fuentes: carga no bloqueante (ver <link> en HTML) ── */

/* ════════════════════════
   TOKENS DE DISEÑO
   ════════════════════════ */
:root {
  /* Colores de marca */
  --c-rojo:         #8B0000;
  --c-rojo-oscuro:  #6B0000;
  --c-rojo-hover:   #A00000;
  --c-verde-ws:     #25D366;
  --c-verde-ws-h:   #1EBE58;
  --c-amarillo:     #F9A825;
  --c-naranja:      #E65100;
  --color-azul-escolar: #2980B9;
  --color-fondo-badge: #FDF4D4;
  --color-texto-secundario: #2C3E50;

  /* Neutrales — modo claro */
  --c-fondo:        #FFFFFF;
  --c-fondo-suave:  #F8F9FA;
  --c-texto:        #212121;
  --c-texto-suave:  #424242;
  --c-texto-tenue:  #757575;
  --c-borde:        #E0E0E0;
  --c-borde-suave:  #F0F0F0;
   --color-fondo-crema: #FCF8E3;

  /* Tipografías */
  --f-titulo: 'Nunito',    sans-serif;
  --f-cuerpo: 'Open Sans', sans-serif;
        --fuente-titulo: 'Fredoka', sans-serif;
      --fuente-cuerpo: 'Nunito', sans-serif;

  /* Escala fluida (clamp: mínimo · proporcional · máximo) */
  --t-xs:   clamp(0.688rem, 0.5rem + 0.5vw,  0.75rem);
  --t-sm:   clamp(0.813rem, 0.6rem + 0.7vw,  0.875rem);
  --t-base: clamp(0.875rem, 0.7rem + 0.9vw,  1rem);
  --t-md:   clamp(1rem,     0.8rem + 1vw,    1.125rem);
  --t-lg:   clamp(1.125rem, 0.9rem + 1.1vw,  1.375rem);
  --t-xl:   clamp(1.25rem,  1rem   + 1.3vw,  1.75rem);

  /* Espaciado fluido */
  --s-xs:  clamp(0.25rem,  0.5vw,  0.5rem);
  --s-sm:  clamp(0.5rem,   1vw,    0.75rem);
  --s-md:  clamp(0.75rem,  1.5vw,  1.25rem);
  --s-lg:  clamp(1rem,     2vw,    2rem);
  --s-xl:  clamp(1.5rem,   3vw,    3rem);

  /* Radios */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 9999px;

  /* Sombras */
  --sh-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --sh-md: 0 4px 12px rgba(0,0,0,.12);
  --sh-lg: 0 8px 24px rgba(0,0,0,.15);
  --sh-xl: 0 16px 48px rgba(0,0,0,.18);

  /* Transiciones */
  --tr-r: 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* rápida  */
  --tr-n: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* normal  */
  --tr-l: 0.38s cubic-bezier(0.4, 0, 0.2, 1); /* lenta   */

  /* Layout */
  --ancho-max:    1440px;
  --pad-lateral:  clamp(1rem, 4vw, 2.5rem);

  /* Alturas del encabezado */
  --h-enc-fila: clamp(64px, 9vw, 84px);  /* más alto para alojar logo grande */
  --h-enc-nav:  42px;
}

/* ── Modo oscuro ── */
[data-tema="oscuro"] {
  --c-fondo:       #0F0F0F;
  --c-fondo-suave: #1A1A1A;
  --c-texto:       #F5F5F5;
  --c-texto-suave: #BDBDBD;
  --c-texto-tenue: #9E9E9E;
  --c-borde:       #2C2C2C;
  --c-borde-suave: #1E1E1E;
}

/* ════════════════════
   RESET MÍNIMO
   ════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Prevenir scroll horizontal */
html, body { overflow-x: hidden; }

body {
  font-family: var(--f-cuerpo);
  font-size:   var(--t-base);
  color:       var(--c-texto);
  background:  var(--c-fondo);
  line-height: 1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

button {
  cursor:     pointer;
  border:     none;
  background: transparent;
  font-family: inherit;
}

ul, ol { list-style: none; }

hr {
  border: none;
  border-top: 1px solid var(--c-borde);
}

/* ════════════════════
   ACCESIBILIDAD
   ════════════════════ */

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

/* Foco visible para navegación por teclado (WCAG 2.4.7) */
:focus-visible {
  outline:        3px solid var(--c-rojo);
  outline-offset: 3px;
  border-radius:  var(--r-sm);
}

/* Área táctil mínima 44×44px (WCAG 2.5.5) */
button, a, label[role="button"] {
  min-height: 44px;
  min-width:  44px;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto  !important;
  }
}

/* ════════════════════
   CONTENEDOR GLOBAL
   ════════════════════ */
.enc-contenedor {
  width:           100%;
  max-width:       var(--ancho-max);
  margin-inline:   auto;
  padding-inline:  var(--pad-lateral);
}