/* base.css — fichas, escala y reglas que valen para todo el sistema.
 *
 * DIRECCIÓN VISUAL
 * Esto no es una landing: es una herramienta que la recepcionista mira ocho
 * horas seguidas, de pie, con un paciente enfrente y el teléfono sonando. Las
 * decisiones salen de ahí, no de una tendencia:
 *
 *   · Fondo de papel cálido, no blanco puro ni el azul clínico frío que usa
 *     todo el software médico. A ocho horas, el blanco puro cansa.
 *   · Verde tinta profundo como color de acción: serio, no el verde brillante
 *     de "salud" que se ve en cada folleto de seguros.
 *   · MORADO reservado a UNA sola cosa en todo el sistema: el dato clínico.
 *     Es la firma de esta interfaz y no es decoración — enseña al personal a
 *     reconocer de un vistazo cuándo está viendo información médica, que es la
 *     misma regla que separa `expediente_ver` de `pacientes_ver` en el backend.
 *
 * NO HAY CSS EN EL HTML. Ni etiquetas <style>, ni atributos style="". La
 * política de seguridad del servidor lo bloquea y `ci/check_frontend.sh` lo
 * verifica en cada commit.
 */

:root {
  /* ── Color ─────────────────────────────────────────────────────────── */
  --papel: #FBFAF7;          /* fondo general, papel cálido */
  --papel-hundido: #F2F0EA;  /* zonas de reposo: cabeceras de tabla, barras */
  --superficie: #FFFFFF;     /* tarjetas y formularios */
  --tinta: #1C1A17;          /* texto principal, negro cálido */
  --tinta-suave: #5C5951;    /* texto secundario */
  --tinta-tenue: #8A867C;    /* etiquetas y ayudas */
  --borde: #E2DFD6;
  --borde-fuerte: #CBC7BA;

  --accion: #0F5C4E;         /* verde tinta: botones y enlaces */
  --accion-viva: #147A67;
  --accion-tenue: #E6F0ED;

  --alerta: #A8410F;         /* vencidos, faltantes, errores */
  --alerta-tenue: #FBEDE6;
  --aviso: #8A6100;          /* por vencer, cerca del límite */
  --aviso-tenue: #FBF3DF;
  --logro: #1F6B3A;
  --logro-tenue: #E7F2EA;

  /* La firma. Solo para datos de salud. No usar para nada más. */
  --clinico: #5B3A8E;
  --clinico-tenue: #F0EBF8;

  /* ── Tipografía ────────────────────────────────────────────────────── */
  /* Fraunces para títulos, con moderación: da carácter documental sin el
   * aire corporativo de las grotescas de siempre. Public Sans para todo lo
   * demás: se diseñó para formularios densos y se lee bien en pantallas
   * modestas, que es exactamente el parque de máquinas de una clínica. */
  --fuente-titulo: "Fraunces", Georgia, serif;
  --fuente: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-datos: "Public Sans", ui-monospace, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;   /* 15px: un punto más que lo habitual, se lee de pie */
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 1.875rem;

  /* ── Espacio y forma ───────────────────────────────────────────────── */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;
  --radio: 6px;
  --radio-lg: 10px;
  --sombra: 0 1px 2px rgba(28, 26, 23, .06), 0 4px 12px rgba(28, 26, 23, .05);
  --sombra-alta: 0 8px 32px rgba(28, 26, 23, .16);
  --ancho-menu: 232px;
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.55;
  /* Los números de existencias, horas y cantidades se alinean en columna.
   * Sin esto, una tabla de inventario baila y se vuelve difícil de barrer. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--e3); }

a {
  color: var(--accion);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--accion-viva); }

/* Foco visible SIEMPRE. La recepción trabaja con teclado: tabula entre campos
 * mientras habla por teléfono. Un foco invisible la deja perdida. */
:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Respeta a quien pidió menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Utilidades mínimas. Solo lo que se usa de verdad; una biblioteca de
 * utilidades sin usar es deuda disfrazada de sistema de diseño. */
.oculto { display: none !important; }

.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;
}

.dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
.tenue { color: var(--tinta-tenue); }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: var(--t-sm); }