/*
 * ATOM: Typography — sistema unificado de jerarquia tipografica
 * Audit 2026-05-20 §4.1: las vistas usaban 3 tamanos distintos para el "H1".
 * Estas clases garantizan 1 H1 por vista, h2/h3 con jerarquia real.
 *
 * Uso:
 *   .h-display  → solo landing / hero / verificar publico (48px)
 *   .h-page     → titulo de pagina (32px) — UNO por vista
 *   .h-section  → titulo de seccion / card grande (22px)
 *   .h-subsec   → sub-titulo dentro de seccion (18px)
 *   .h-eyebrow  → kicker arriba del titulo (12.5px uppercase)
 */

.h-display {
  font-size: 44px;
  line-height: 1.1;
  font-weight: var(--h-weight-bold);
  letter-spacing: -0.025em;
  color: var(--h-ink);
}

.h-page {
  font-size: var(--h-text-3xl);  /* 32px */
  line-height: 1.2;
  font-weight: var(--h-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--h-ink);
}

.h-section {
  font-size: var(--h-text-xl);  /* 22px */
  line-height: 1.3;
  font-weight: var(--h-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.h-subsec {
  font-size: var(--h-text-lg);  /* 18px */
  line-height: 1.4;
  font-weight: var(--h-weight-semibold);
  color: var(--h-ink);
}

.h-eyebrow {
  font-size: var(--h-text-sm);  /* 12.5px */
  line-height: 1.2;
  font-weight: var(--h-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--h-muted);
}

/* Texto secundario / soporte */
.h-body-sm {
  font-size: var(--h-text-sm);
  line-height: 1.5;
  color: var(--h-ink-soft);
}

.h-body-muted {
  font-size: var(--h-text-base);
  line-height: 1.5;
  color: var(--h-muted);
}

/* Numeros tabulares — para KPIs, listados, totales.
 * El audit §3.1 senalaba que la columna numero dominaba sobre paciente.
 * Reservar mono SOLO para columnas numericas / IDs. */
.h-num {
  font-family: var(--h-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.h-num-lg {
  font-family: var(--h-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--h-text-3xl);
  font-weight: var(--h-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--h-ink);
}

.h-num-md {
  font-family: var(--h-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--h-text-2xl);
  font-weight: var(--h-weight-medium);
  color: var(--h-ink);
}

/* ── Utilitarias de texto ───────────────────────────────────────────────────
 *
 * No son componentes: son las tres o cuatro combinaciones que TODA pantalla
 * necesita para una aclaración al pie. Existen porque no existían, y el vacío se
 * llenó solo: hay 2142 atributos `style=` sueltos en las 119 páginas, y los más
 * repetidos son exactamente esto —`color:var(--h-muted)` 63 veces,
 * `color:muted; font-size:sm` 30, `font-size:xs; color:muted` 50—.
 *
 * Seis pantallas llegaron a definir `.muted` por su cuenta, cada una en su
 * propio <style>, para una regla de una línea. Cuando media docena de personas
 * escriben lo mismo por separado, lo que falta es la clase.
 *
 * Regla: si una aclaración necesita algo MÁS que esto, no es una utilitaria —
 * es un componente y va al nivel que le toca.
 */
.muted { color: var(--h-muted); }
.ink-soft { color: var(--h-ink-soft); }

/* Una aclaración al pie de un dato: gris y un punto más chica. */
.nota { color: var(--h-muted); font-size: var(--h-text-sm); }

/* La versión mínima: etiquetas de dato, pies de tabla, contadores. */
.nota-fina { color: var(--h-muted); font-size: var(--h-text-xs); }

/* Los colores de estado, para un texto suelto que no es un badge ni una alerta:
 * el renglón rojo debajo de un campo, el «listo» en verde de un contador.
 * Con nombre semántico y no `.rojo`: si mañana el peligro deja de ser rojo, se
 * cambia en el token y esto sigue diciendo la verdad. */
.txt-danger { color: var(--h-danger); }
.txt-ok     { color: var(--h-ok); }
.txt-warn   { color: var(--h-warn); }

/* Alineación del texto. Son las únicas utilitarias de posición que se suben: las
 * columnas de números de una tabla piden la derecha en 28 lugares y el centro en
 * diez, y escribir `text-align` a mano en cada celda no la hace más clara.
 *
 * Las de margen, relleno y flex NO se suben, y es a propósito: son ajustes de
 * UNA pantalla, y convertirlas en clases globales sería empezar a construir un
 * sistema de utilidades en paralelo al de componentes. Ahí el `style=` está
 * bien puesto. */
.right  { text-align: right; }
.center { text-align: center; }

/* ── Dos que no son tipografía pero nacen del mismo vacío ──────────────────
 *
 * La celda de «acá no hay nada». Aparece al pie de siete tablas, siempre lo
 * mismo: un renglón centrado y gris explicando que la lista está vacía. Escrita
 * a mano cada vez terminó con relleno distinto en cada pantalla — y es
 * justamente el renglón que alguien lee cuando algo no aparece y está por pensar
 * que el sistema no anda.
 */
.celda-vacia {
  padding: var(--h-space-6);
  text-align: center;
  color: var(--h-muted);
}

/* Un enlace que no parece un enlace: la fila entera de una tabla que lleva a un
 * detalle, la tarjeta clickeable. El subrayado adentro ensucia y no ayuda,
 * porque lo que se hace clic es todo el bloque.
 *
 * Con nombre propio y no `style=` suelto para que se pueda buscar: un enlace
 * disfrazado es una decisión de accesibilidad, y conviene poder verlos todos
 * juntos el día que haya que revisarla. */
.link-plano {
  text-decoration: none;
  color: inherit;
}

/* Lo que sólo leen los lectores de pantalla.
 *
 * Una pantalla sin `<h1>` deja a quien la recorre con un lector sin saber
 * dónde está: el título es el primer salto de cualquier lector. Pero en el
 * Mostrador y en Laboratorio el título escrito era la TERCERA vez que la
 * pantalla decía lo mismo —la solapa marcada arriba, el selector de sede y la
 * fecha ya lo dicen— y a 768 px de alto ese renglón era lista que no se veía.
 * Matías, 21/9: «esto de "Mostrador · Laboratorio Liaudat · lunes 21/9 ·
 * 19:03" debería desaparecer».
 *
 * Así que el título se queda, y no se ve. No se usa `display: none` ni
 * `visibility: hidden`: esos también lo esconden del lector, que es lo único
 * que lo necesita.
 */
.hx-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}