/* =============================================================================
 * Vacunas 360° — Estilos. CSS3 puro, variables, mobile-first.
 * Paleta institucional: navy #17365d / blue #2f75b5 + semáforo de urgencia.
 * ========================================================================== */
:root {
  --navy: #17365d;
  --navy-900: #0f2440;
  --blue: #2f75b5;
  --blue-050: #eaf2fa;
  --blue-100: #d3e4f5;

  /* Semáforo: gradiente real de urgencia, no decorativo */
  --rojo: #b3261e;        /* atrasada */
  --rojo-050: #fdeceb;
  --naranja: #b3541e;     /* aún a tiempo */
  --naranja-050: #fdf0e8;
  --ambar: #a86a00;       /* citar ahora */
  --ambar-050: #fdf3e0;
  --verde: #1e7a45;       /* al día */
  --verde-050: #e8f5ed;
  --gris: #5b6672;        /* más adelante / no aplica */
  --gris-050: #f0f2f5;

  --tinta: #17212b;
  --tinta-2: #4a5666;
  --papel: #ffffff;
  --fondo: #f4f6f9;
  --linea: #d6dde6;
  --linea-fuerte: #b6c1cd;

  --r: 10px;
  --r-sm: 6px;
  --sombra: 0 1px 2px rgba(15, 36, 64, .08), 0 4px 12px rgba(15, 36, 64, .06);
  --toque: 44px;
  --ancho: 1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
body { padding-bottom: env(safe-area-inset-bottom); }

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; color: var(--navy); }
h1 { font-size: 1.15rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .7em; }
a { color: var(--blue); }

:focus-visible {
  outline: 3px solid #ffb300;
  outline-offset: 2px;
  border-radius: 4px;
}

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 12px; }