/* ===========================================================================
   Edmundo Ríos School — base.css
   Reset, tipografía y primitivas de layout.
   Las variables de color y forma las genera Theme.php en theme-{escuela}.css.
   Aquí NUNCA se escribe un color literal: todo sale de var(--...).
   =========================================================================== */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Esquema de color para los controles NATIVOS ───────────────────────────
   El desplegable de un <select>, el calendario de un <input type=date> y las
   barras de desplazamiento NO los dibuja el CSS: los dibuja el sistema. Y el
   sistema decide su color por el `color-scheme` de la RAÍZ, no por el que se le
   ponga al campo.

   Sin esto, la lista de estados del registro salía sobre fondo blanco mientras
   el texto de las opciones seguía siendo el claro de la tarjeta: se leían
   apenas, salvo la que estuviera resaltada. Ponerlo en el <select> no bastaba
   —eso ya estaba— porque la ventanita emergente vive fuera de la página.

   Se declara por tema y no a secas: `dark` fijo dejaría los desplegables
   negros en las pantallas claras. */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="auto"]  { color-scheme: light dark; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  /* 16px mínimo: por debajo de eso iOS hace zoom al enfocar un input y la vista
     se descuadra. Como casi todo el uso es desde el celular, eso es innegociable. */
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
}

/* El atributo `hidden` DEBE ganar siempre.
 *
 * El navegador trae `[hidden]{display:none}` en su hoja de agente de usuario,
 * pero en la cascada CSS el origen "autor" le gana al del navegador sin importar
 * la especificidad. Por eso cualquier regla nuestra que fije `display` —
 * `.btn{display:inline-flex}`, `.field-error{display:block}`— anulaba el `hidden`
 * y el elemento se seguía viendo: en el multipasos aparecían a la vez "Atrás",
 * "Siguiente" y "Crear mi cuenta". Este !important lo deja fuera de discusión
 * para todo el proyecto, presente y futuro. */
[hidden] { display: none !important; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── Tipografía ───────────────────────────────────────────────────────────── */
/* Los títulos van en la serif de display y con peso LIGERO. El logo de Edmundo Ríos es
   fino y con mucho aire; unos títulos en negrita apretada lo contradirían en
   cada pantalla. Las mayúsculas se reservan para etiquetas pequeñas (.t-eyebrow)
   y botones, igual que en el logo: 'Edmundo Ríos' arriba, 'STUDIO' espaciado abajo. */
h1, h2, h3 {
  margin: 0 0 .5rem;
  /* La del CUERPO en negrita, no la de titulares. Anton es una condensada
     de cartel: buena para el claim de la portada, que es una frase grande
     que se lee de un golpe, y mala para un título de sección de tres
     palabras dentro de un panel, donde se lee apretada y desentona con los
     campos que tiene debajo.

     Anton sigue disponible donde se pida a mano: `.t-display` y el claim. */
  font-family: var(--font, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.35rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4, h5 { margin: 0 0 .5rem; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
h4 { font-size: 1rem; }
h5 { font-size: .9375rem; }
p  { margin: 0 0 .85rem; }
small { font-size: .8125rem; }

/* Etiqueta pequeña en versalitas espaciadas — el gesto tipográfico de la marca. */
.t-eyebrow {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--muted);
}
.t-display { font-family: var(--font-display, var(--font)); font-weight: 500; }

.t-muted   { color: var(--muted); }
.t-accent  { color: var(--accent); }
.t-danger  { color: var(--danger); }
.t-success { color: var(--success); }
.t-center  { text-align: center; }
.t-right   { text-align: right; }
.t-bold    { font-weight: 700; }
.t-semi    { font-weight: 600; }
.t-sm      { font-size: .875rem; }
.t-xs      { font-size: .8125rem; }
.t-lg      { font-size: 1.125rem; }
/* ── Las CIFRAS ────────────────────────────────────────────────────────────
   Un token propio, separado de `--font-display`.

   Los montos venían en Anton, que es una condensada de cartel: buena para el
   claim de la portada y mala para «$8,500.00», donde el signo y los ceros casi
   se tocan. Y un comprobante se lee para VERIFICAR un número — es lo último que
   debe costar trabajo.

   Las tabulares hacen que cada dígito ocupe lo mismo, así que en una lista de
   pagos las cantidades quedan alineadas en columna sin tabular nada. */
:root {
  --font-num: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.t-cifra {
  font-family: var(--font-num, var(--font));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.t-num     { font-variant-numeric: tabular-nums; }

/* Truncado a N líneas */
.t-clamp-1, .t-clamp-2, .t-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.t-clamp-1 { -webkit-line-clamp: 1; }
.t-clamp-2 { -webkit-line-clamp: 2; }
.t-clamp-3 { -webkit-line-clamp: 3; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1rem; }
.container-narrow { max-width: 680px; }
.container-wide   { max-width: 1400px; }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.stack-sm { --stack-gap: .5rem; }
.stack-lg { --stack-gap: 1.5rem; }

.row { display: flex; gap: var(--row-gap, .75rem); }
.row-center  { align-items: center; }
.row-between { justify-content: space-between; }
.row-end     { justify-content: flex-end; }
.row-wrap    { flex-wrap: wrap; }
.row-tight   { --row-gap: .375rem; }
.spacer { flex: 1 1 auto; }

.grid { display: grid; gap: 1rem; }
/* auto-fit: las tarjetas se acomodan solas sin media queries por breakpoint */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .5rem; }  .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }   .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2rem; }   .mb-4 { margin-bottom: 2rem; }
.w-full { width: 100%; }

/* Visible 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;
}

/* Mostrar/ocultar por tamaño.
   Con !important a propósito: son utilidades de visibilidad y deben ganarle a
   cualquier componente. Sin él, `.btn{display:inline-flex}` de components.css
   (misma especificidad, pero carga después) anulaba el display:none y los
   botones marcados como "solo escritorio" aparecían en celular. */
.only-mobile  { display: block !important; }
.only-desktop { display: none !important; }
@media (min-width: 900px) {
  .only-mobile  { display: none !important; }
  .only-desktop { display: block !important; }
}

/* ── Foco visible ─────────────────────────────────────────────────────────── */
/* Nunca quitar el outline: hay usuarios que navegan solo con teclado. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Enlace para saltar al contenido (accesibilidad) */
.skip-link {
  position: absolute; left: .5rem; top: -100px; z-index: 200;
  background: var(--surface); color: var(--text);
  border: var(--bw) solid var(--accent);
  border-radius: var(--radius-sm); padding: .5rem .875rem; font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: .5rem; }

/* ── Iconos (Ui::icon) ────────────────────────────────────────────────────── */
/* Se dimensionan con `em`, no con px: así un icono dentro de un botón chico
   encoge con su texto en vez de quedarse grande y desalineado. `currentColor`
   viene del SVG, de modo que basta cambiar el color del texto que lo rodea. */
.ic {
  width: 1.25em; height: 1.25em;
  flex: 0 0 auto;
  vertical-align: -.2em;
  /* `display` explícito porque el reset de arriba pone `svg { display: block }`
     —correcto para fotos e ilustraciones, veneno para un icono—. En bloque, un
     icono suelto ignora el `text-align` del padre y se pega a la izquierda
     aunque todo lo demás esté centrado. Dentro de un flex da igual, y por eso
     el fallo solo asomaba en los pocos sitios sin flex. */
  display: inline-block;
}
.ic-sm { width: 1em;    height: 1em; }
.ic-lg { width: 1.5em;  height: 1.5em; }

/* Interruptor de tema: los DOS iconos viven en el HTML y aquí se enseña el que
   toca, según el `data-dark` que marca app.js. Así el JS nunca escribe SVG y el
   icono correcto ya viene pintado desde el servidor, sin parpadeo en la primera
   carga. En claro se ve la luna (lo que vas a activar), en noche el sol. */
.theme-ic { display: inline-flex; }
.theme-ic .ic { display: none; }
.theme-ic[data-dark="0"] svg:last-child,
.theme-ic[data-dark="1"] svg:first-child { display: block; }

/* ── Scroll horizontal contenido ──────────────────────────────────────────── */
/* Tablas y bloques anchos scrollean dentro de su caja; el body nunca. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Impresión (listas de asistencia, comprobantes) ───────────────────────── */
@media print {
  .navbar, .sidebar, .bottomnav, .footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }

  /* El cascarón está hecho para una PANTALLA y en papel estorba:
     `min-height: 100vh` vale una hoja entera, así que reservaba la primera
     página para nada; el margen superior deja hueco para un navbar que ya no
     está, y el margen izquierdo para un menú lateral tampoco. Los tres juntos
     eran la razón de que un documento de una hoja saliera en tres. */
  html, body, .shell { min-height: 0 !important; height: auto !important; }
  .shell-main,
  .has-sidebar .shell-main {
    margin: 0 !important;
    padding: 0 !important;
  }
  .container { max-width: none; padding: 0; }

  @page { margin: 12mm; }
}