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

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

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 GAIA 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: 'GAIA' arriba, 'STUDIO' espaciado abajo. */
h1, h2, h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display, var(--font));
  line-height: 1.2;
  letter-spacing: 0;
}
h1 { font-size: clamp(1.9rem, 5.5vw, 2.75rem); font-weight: 500; }
h2 { font-size: clamp(1.45rem, 3.6vw, 1.85rem); font-weight: 500; }
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; }
.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; }
}