/* GENERADO POR horizon-cem — NO EDITAR AQUÍ. Edita el maestro y ejecuta: python horizon-cem/sincronizar.py <herramienta> */
/* ==========================================================================
   HORIZON-CEM · capa 1 de 3 · tokens.css
   ==========================================================================
   La paleta, los radios, las sombras y la base tipográfica del Portal CEM.
   Se carga la PRIMERA. No pinta ningún componente: solo declara variables y
   deja el <body> con la fuente y el fondo correctos.

   ⚠️ Este fichero se edita SOLO en horizon-cem/. Las copias que hay en cada
   herramienta las escribe `sincronizar.py` y llevan cabecera "NO EDITAR AQUÍ".

   Origen: `:root` de medicos/static/css/panel.css (la copia más fiel al
   canon) + la guía _recursos/menu-horizon-config.css. Valores verificados el
   2026-09-02.
   ========================================================================== */

:root {
  /* ── Paleta del CUERPO: navy/cream ─────────────────────────────────────
     Esto es lo que se ve DENTRO de la pantalla: títulos, acentos, fondos de
     tarjeta. NO es el color del menú (ver chrome.css). */
  --navy:         #0f2340;
  --navy-mid:     #1a3a5c;
  --navy-light:   #1e4870;
  --accent:       #0077b6;
  --accent-hover: #005f94;
  --accent-light: #e6f3fb;
  --cream:        #faf9f7;
  --white:        #ffffff;
  --bg-page:      #f0f4f8;   /* fondo de página azulado. SOLO para body: --cream se reutiliza en thead/botones/hovers */

  /* ── Texto ─────────────────────────────────────────────────────────── */
  --text:       #1a1a2e;
  --text-muted: #6b7280;
  --border:     rgba(0,0,0,0.08);

  /* ── Estados ───────────────────────────────────────────────────────── */
  --success:           #6ab187;
  --success-bg:        #f0fdf4;
  --success-strong:    #15803d;
  --danger:            #ef4444;
  --danger-bg:         #fef2f2;
  --danger-text:       #b91c1c;
  --warning:           #f59e0b;
  --warning-bg:        #fffbeb;
  --warning-strong-bg: #fef3c7;   /* amarillo saturado: huérfanos, alertas críticas */
  --info:              #1565c0;
  --info-bg:           #d9ebfa;
  --orange:            #f59e0b;
  --orange-strong:     #b45309;
  --orange-bg:         #fffbeb;

  /* ── Radios (escala 6/10/12) ───────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* ── Sombras con tinte navy ────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,35,64,0.05), 0 1px 3px rgba(15,35,64,0.04);
  --shadow-md: 0 4px 16px rgba(15,35,64,0.08);
  --shadow-lg: 0 12px 32px rgba(15,35,64,0.14);
  --card-shadow:       var(--shadow-sm);    /* alias del nombre viejo */
  --card-shadow-hover: var(--shadow-md);    /* alias del nombre viejo */

  /* ── Anillo de foco unificado ──────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(0,119,182,0.20);

  /* ── MENÚ estilo Horizon (sidebar o topbar BLANCOS) ────────────────────
     El menú NO es navy. Es blanco con sombra azulada, cruz médica rosa y el
     navy solo como barra/subrayado del item activo. */
  --cem-pink:       #b6017c;
  --cem-pink-soft:  rgba(182,1,124,0.25);
  --cem-pink-grad:  linear-gradient(135deg, #b6017c, #e2209a);
  --sidebar-bg:     #fff;
  --sidebar-shadow: 4px 0 24px rgba(112,144,176,0.18);
  --topbar-shadow:  0 2px 20px rgba(112,144,176,0.18);
  --sb-active-bg:   rgba(15,35,64,0.07);
  --sb-active-fg:   #0f2340;
  --sb-hover-bg:    #f4f7fe;
  --sb-item-fg:     #64748b;   /* item no seleccionado */
  --tb-inactive-fg: #a3aed0;   /* pestaña inactiva de topbar / etiqueta de sección */
  --tb-active-fg:   #1a2540;   /* pestaña activa de topbar */
}

/* ──────────────────────────────────────────────────────────────────────
   Reset & base
   ────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* `html` a 100 % y `body` a MIN 100 %, nunca `height: 100%` en body: con altura
   fija el body mide una pantalla, el contenido se desborda por debajo y la
   cabecera `position: sticky` del layout B deja de pegarse en cuanto se pasa la
   primera pantalla de scroll (medido el 2026-09-02 en el muestrario: body 720 px
   con un documento de 1.381 px). Laboratorio, que lleva esa cabecera en
   producción, no tiene esta regla; portal.css sí, pero su menú es `fixed`. */
html { height: 100%; }
body {
  min-height: 100vh;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg-page);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; }

/* Foco unificado: halo de acento en todo lo enfocable */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* El que empuja: en cualquier fila flex, aparta lo de antes al extremo izquierdo */
.spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}