/* ============================================================
   HISTORIA CLINICA DIGITAL — main.css

   AZUL MEDICO, VIVO

   Toda la escala sale de un solo tono —el azul de la sanidad, el
   que se entiende sin explicarlo— del mas claro al de medianoche.
   Un solo tono es lo que hace que la pantalla parezca de una pieza
   y no una colcha de retales.

   El azul va VIVO, no apagado. Un azul desaturado se lee como
   cansado y como generico; el saturado se lee como limpio, y
   limpio es exactamente lo que tiene que parecer un sistema
   sanitario. La sobriedad la ponen el espacio y la tipografia, no
   quitarle color al color.

   --azul-500  el azul de la marca. Brillos, degradados, acentos.
   --azul-600  el que lleva texto blanco encima: botones y enlaces.
   --azul-900  el de medianoche. Barra lateral, portada, pie.
   --cian      el brillo. Solo sobre fondo oscuro.

   CUIDADO AL TOCARLO: --azul-500 NO llega a 4.5:1 con texto blanco
   encima. Es un color de luz, no de fondo de boton. El degradado
   de los botones va de --azul-550 a --azul-700, que si llegan.

   PROFUNDIDAD

   Las sombras llevan el propio azul dentro, no gris: una sombra
   gris sobre un fondo azulado se ve sucia. Y van en dos capas —una
   de contacto, pegada, y una de ambiente, amplia y suave—, que es
   como se comporta la luz de verdad y por lo que una tarjeta
   parece levantada del papel en vez de tener un borde pintado.

   BRILLOS

   Se mueven en la web publica, que es donde hay que llamar la
   atencion. DENTRO del sistema no: el medico pasa ocho horas
   mirando esta pantalla y un brillo que recorre un boton cada tres
   segundos, a la tercera hora, es una gotera. Y todo se apaga con
   prefers-reduced-motion.

   LO DE SIEMPRE

   - El color solo significa algo. Nunca es adorno.
   - Serif en los titulos; sans en tablas y formularios.
   - Todo par de color esta MEDIDO, no estimado: 4.5:1 texto,
     3:1 texto grande y apoyos.
   - Objetivos tactiles de 36 px o mas; foco siempre visible.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* ── TOKENS ────────────────────────────────────── */
:root {
  /* La escala del azul medico, entera */
  --azul-50:   #eef5ff;
  --azul-100:  #d9e9ff;
  --azul-200:  #b3d4ff;
  --azul-300:  #7ab7ff;
  --azul-400:  #3d95f5;
  --azul-500:  #1a7fe8;   /* la marca. Luz, no fondo de boton */
  --azul-550:  #1470d8;   /* tope alto del degradado de los botones */
  --azul-600:  #0d63c8;   /* el que lleva blanco encima */
  --azul-700:  #0b4f9f;
  --azul-800:  #0b3d78;
  --azul-900:  #0a2c56;
  --azul-950:  #071d3a;

  /* El brillo. Solo sobre oscuro. */
  --cian:      #22d3ee;
  --cian-claro:#67e8f9;

  /* Superficies: blanco, y azul lavadisimo alrededor */
  --bg:            #f3f7fc;
  --surface:       #ffffff;
  --surface-2:     #f8fbfe;
  --surface-3:     #e9f0f9;

  /* Tinta */
  --text:          #0f1e33;
  --text-2:        #47576e;
  --text-3:        #7788a0;

  /* Lineas */
  --line:          #dde7f3;
  --line-2:        #c3d3e8;

  /* Nombres de siempre, apuntando a la escala */
  --accent:        var(--azul-600);
  --accent-dark:   var(--azul-700);
  --accent-soft:   var(--azul-50);
  --accent-line:   var(--azul-200);
  --cielo:         var(--azul-300);

  /* La barra lateral y la portada */
  --rail:          var(--azul-900);
  --rail-2:        #123f74;
  --rail-linea:    #1a5391;
  --rail-texto:    #bcd8fb;
  --rail-tenue:    #7ba3d4;

  /* Verde azulado sanitario y laton, de apoyo */
  --medico:        #0e7c72;
  --medico-soft:   #e0f4f1;
  --realce:        #a8791f;
  --realce-soft:   #fbf2dd;
  --violeta:       #4c46a8;
  --violeta-soft:  #ecebfa;

  /* Semanticos: vivos, pero no de semaforo */
  --ok:            #0f7a52;
  --ok-soft:       #e3f7ee;
  --warn:          #945c0d;
  --warn-soft:     #fdf2df;
  --danger:        #c02a29;
  --danger-soft:   #fdeceb;
  --info:          var(--azul-600);
  --info-soft:     var(--azul-50);

  /* Nombres viejos que siguen usados en algunas plantillas. Se dejan
     apuntando a la escala nueva en vez de ir a buscarlos uno a uno: si
     falta uno, el navegador no pinta NADA en esa regla y el fallo se ve
     en una pantalla suelta que nadie mira hasta que un medico la abre. */
  --primary:       var(--azul-600);
  --primary-dark:  var(--azul-700);
  --success:       var(--ok);
  --warning:       var(--warn);
  --card-bg:       var(--surface);
  --text-main:     var(--text);
  --text-muted:    var(--text-2);
  --border:        var(--line);

  --sidebar-w:     236px;
  --topbar-h:      56px;

  --r-sm:          7px;
  --r:             10px;
  --r-lg:          14px;
  --r-xl:          20px;
  --radius:        var(--r);

  /* PROFUNDIDAD
     Dos capas cada una: contacto (pegada, define el borde) y
     ambiente (amplia y suave, separa del papel). Con el azul
     dentro: una sombra gris sobre fondo azulado se ve sucia. */
  --sombra-1:  0 1px 2px rgba(10,44,86,.07),
               0 1px 3px rgba(10,44,86,.05);
  --sombra-2:  0 1px 2px rgba(10,44,86,.06),
               0 6px 16px -4px rgba(10,44,86,.10);
  --sombra-3:  0 2px 4px rgba(10,44,86,.06),
               0 14px 32px -8px rgba(10,44,86,.16);
  --sombra-4:  0 4px 8px rgba(10,44,86,.08),
               0 28px 60px -12px rgba(10,44,86,.24);
  /* El realce interior que hace que un boton parezca un boton y no
     un rectangulo de color: una linea de luz arriba, una de sombra
     abajo. Es lo que hace el relieve, no la sombra exterior. */
  --relieve:   inset 0 1px 0 rgba(255,255,255,.22),
               inset 0 -1px 0 rgba(10,44,86,.18);

  --shadow:        var(--sombra-1);
  --shadow-pop:    var(--sombra-4);
  --shadow-md:     var(--sombra-3);

  --focus:         0 0 0 3px rgba(26,127,232,.30);

  --sans:  Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --paso: .18s cubic-bezier(.4, 0, .2, 1);
}

/* Quien pide menos movimiento, no ve ninguno. En un sistema que se
   mira ocho horas seguidas esto no es una cortesia: es que un brillo
   que recorre un boton cada tres segundos, a la tercera hora, es una
   gotera. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
/* El titulo de la pagina en serif: da formalidad y peso sin gritar.
   De h2 para abajo manda la sans, que es la que se lee rapido en una
   tabla de resultados o en un formulario largo. */
h1 { font-family: var(--serif); font-size: 23px; font-weight: 600;
     letter-spacing: -.012em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

::selection { background: var(--accent-soft); }

/* ── LAYOUT ────────────────────────────────────── */
.app-wrapper { display: flex; min-height: 100vh; }

/* ── BARRA LATERAL ─────────────────────────────────
   En azul noche, no en blanco. Es un solo cambio y es el que
   convierte la pantalla en un producto de empresa: da un anclaje
   oscuro a la izquierda, separa de un golpe la navegacion del
   trabajo, y deja el area de contenido entera para el papel. */
.sidebar {
  width: var(--sidebar-w);
  /* Degradado vertical y un halo azul en lo alto: la barra deja de ser
     un bloque plano de color y parece tener luz propia. */
  background:
    radial-gradient(420px 220px at 0% 0%, #14406f 0%, transparent 70%),
    linear-gradient(180deg, #0d3564 0%, var(--azul-900) 55%, var(--azul-950) 100%);
  border-right: 1px solid var(--rail);
  box-shadow: 2px 0 12px -4px rgba(7,29,58,.5);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .22s ease;
}

.sidebar-header { padding: 18px 18px 14px; }

.sidebar-logo { display: flex; align-items: center; gap: 10px; }

.sidebar-logo .logo-icon {
  width: 34px; height: 34px; flex: none;
  object-fit: contain;
}

.sidebar-logo .logo-text {
  font-size: 13px; font-weight: 600; line-height: 1.25; color: #fff;
}
.sidebar-logo .logo-text span {
  display: block; font-size: 11px; font-weight: 400; color: var(--rail-tenue);
  margin-top: 1px;
}
/* El logotipo de un centro puede venir con fondo blanco y sobre el
   azul noche quedaria como un recorte pegado. Se le pone su propia
   pastilla clara para que sea a proposito. */
.sidebar-logo .logo-icon {
  background: rgba(255,255,255,.06); border-radius: 8px; padding: 2px;
}

/* Quien esta usando el sistema: arriba, separado de la navegacion por una
   linea, para que se lea de un vistazo sin competir con el menu. */
.sidebar-quien {
  padding: 0 18px 14px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--rail-linea);
}

.sidebar-nav { padding: 6px 10px 16px; flex: 1; }

.nav-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rail-tenue);
  padding: 18px 8px 6px;
}

.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--r-sm);
  color: var(--rail-texto); font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.sidebar-nav a i { width: 17px; text-align: center; font-size: 14px; color: var(--rail-tenue); }
.sidebar-nav a:hover { background: var(--rail-2); color: #fff; }
.sidebar-nav a:hover i { color: var(--rail-texto); }
/* Donde se esta, marcado con una barra a la izquierda ademas del fondo:
   el color solo ya distingue poco cuando hay veinte enlaces seguidos. */
.sidebar-nav a.active {
  background: var(--rail-2); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cian);
}
.sidebar-nav a.active i { color: #fff; }

/* Paciente abierto: encabeza el bloque de formularios */
.nav-paciente {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-bottom: 4px; border-radius: var(--r-sm);
  background: var(--rail-2); color: #fff;
  border: 1px solid var(--rail-linea);
}
.nav-paciente:hover { background: #2f6690; color: #fff; }
.nav-paciente.active { background: #2f6690; color: #fff; }
.nav-paciente i { color: var(--rail-tenue); font-size: 13px; flex: none; }
.nav-paciente span { min-width: 0; }
.nav-paciente b {
  display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-paciente small { display: block; font-size: 11px; color: var(--rail-tenue); }

/* Aviso cuando todavia no se ha abierto ningun paciente */
.nav-aviso {
  padding: 9px 10px; margin-bottom: 4px;
  border: 1px dashed var(--rail-linea); border-radius: var(--r-sm);
  font-size: 11.5px; line-height: 1.45; color: var(--rail-tenue);
}
.nav-aviso a { color: var(--rail-texto); text-decoration: underline; }
.nav-aviso i { margin-right: 4px; }

/* Secciones plegables */
.nav-sec { margin-bottom: 1px; }
.nav-sec > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--rail-texto);
  cursor: pointer; list-style: none; user-select: none;
}
.nav-sec > summary::-webkit-details-marker { display: none; }
.nav-sec > summary:hover { background: var(--rail-2); color: #fff; }
.nav-sec > summary > i:first-child {
  width: 17px; text-align: center; font-size: 13px; color: var(--rail-tenue); flex: none;
}
.nav-sec > summary > span { flex: 1; min-width: 0; }
.nav-sec > summary .flecha {
  font-size: 9px; color: var(--rail-tenue); transition: transform .15s;
}
.nav-sec[open] > summary { color: #fff; }
.nav-sec[open] > summary .flecha { transform: rotate(180deg); }

.nav-sec-cuerpo { padding: 2px 0 6px 26px; }
.nav-sec-cuerpo a, .nav-sec-cuerpo .nav-off {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; margin-bottom: 1px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 400; line-height: 1.3;
}
.nav-sec-cuerpo a { color: var(--rail-texto); }
.nav-sec-cuerpo a:hover { background: var(--rail-2); color: #fff; }
.nav-sec-cuerpo a.active {
  background: var(--rail-2); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cian);
}
/* Sin paciente abierto los formularios se ven, pero no se pueden abrir */
.nav-sec-cuerpo .nav-off { color: var(--rail-tenue); cursor: not-allowed; opacity: .6; }
.nav-sec-cuerpo .cod {
  flex: none; min-width: 26px; font-size: 10.5px; font-weight: 600;
  color: var(--rail-tenue); font-variant-numeric: tabular-nums;
}
.nav-sec-cuerpo a.active .cod { color: var(--cian); }
.nav-sec-cuerpo .cod-i { width: 15px; text-align: center; font-size: 11px; color: var(--rail-tenue); }

.sidebar-footer { padding: 12px 14px 14px; border-top: 1px solid var(--rail-linea); }

/* Quien esta atendiendo. El nombre SE PARTE en dos lineas si hace falta:
   antes iba en una sola con puntos suspensivos, y «Dra. ALEJANDRA
   VIZCAINO» se leia «Dra. ALEJANDRA VIZ…». Cada atencion se firma con esa
   cuenta, asi que el sitio donde el sistema dice con quien esta trabajando
   es el ultimo que puede quedarse a medias — sobre todo en un equipo
   compartido, donde lo primero que hace uno al sentarse es mirar si la
   sesion abierta es la suya.

   Cabe: dos lineas de nombre y una de especialidad son 58 px, y por encima
   del menu hay sitio de sobra. */
.sidebar-user { display: flex; align-items: flex-start; gap: 9px; }
.sidebar-user .avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--rail-2); color: #fff;
  border: 1px solid var(--rail-linea);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.sidebar-user .user-info { min-width: 0; padding-top: 1px; }
.sidebar-user .user-name {
  font-size: 13px; font-weight: 600; color: #fff; line-height: 1.28;
  /* `anywhere` y no `break-word`: un apellido compuesto sin espacios se
     sale de la barra en vez de partirse. */
  overflow-wrap: anywhere;
}
.sidebar-user .user-role {
  font-size: 11.5px; color: var(--rail-tenue); line-height: 1.3;
  margin-top: 1px; overflow-wrap: anywhere;
}

.sidebar-logout {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--rail-texto); font-size: 13px;
}
.sidebar-logout:hover { background: var(--rail-2); color: #fff; }

/* ── ZONA PRINCIPAL ────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex; flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  background: rgba(248,251,254,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  position: sticky; top: 0; z-index: 50;
}

.topbar-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-date {
  font-size: 12.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

.panel-contexto {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 14px 24px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.panel-contexto > div { min-width: 0; }
.panel-contexto strong { display: block; font-size: 14px; color: var(--text); }
.panel-contexto span { display: block; font-size: 12px; color: var(--text-3); }
.panel-cambiar { white-space: normal; text-align: left; }
@media (max-width: 620px) {
  .panel-contexto { padding: 12px 16px; }
}

.icon-btn {
  width: 34px; height: 34px; border: 1px solid transparent; background: none;
  border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

.btn-logout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text-2); font-size: 13px; font-weight: 500;
}
.btn-logout:hover { background: var(--surface-3); color: var(--text); }

/* Migas de pan: siempre visible donde esta el usuario */
.crumbs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-3); min-width: 0;
}
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--line-2); }
.crumbs .now { color: var(--text); font-weight: 600; }

.page-content { padding: 24px 28px 56px; max-width: 1240px; width: 100%; }

/* Los formularios del MSP son anchos —el impreso son 495 pt de casillas
   una al lado de otra— y con 1240 px se rellenaban por una rendija con
   media pantalla en blanco a los lados, igual que le pasaba al papel.
   Cuando la página lleva uno dentro, se ensancha. El resto del sistema
   —listas, fichas, paneles— se queda como está: ahí una línea de texto de
   1600 px sería incómoda de leer. */
.page-content:has(.mf-section) { max-width: 1600px; }

/* El titulo lleva debajo un filete corto que va del azul al cian. Es el
   unico adorno de la pantalla y hace mucho: fija el comienzo de la
   pagina y le da el aire de documento con membrete que tiene un informe
   medico. Lo hace en el color de la marca, no en uno prestado. */
.page-header { margin-bottom: 20px; padding-bottom: 2px; }
.page-header h1 { margin-bottom: 6px; }
.page-header h1::after {
  content: ''; display: block; width: 44px; height: 3px;
  background: linear-gradient(90deg, var(--azul-600), var(--cian));
  margin-top: 9px; border-radius: 2px;
}
.page-header p { color: var(--text-2); font-size: 13.5px; }

/* Titulo a la izquierda, logotipo del centro a la derecha */
.page-header.con-marca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.page-header.con-marca .marca-panel {
  height: 54px; width: auto; flex: none; max-width: 100%;
}
@media (max-width: 720px) {
  .page-header.con-marca .marca-panel { height: 40px; }
}

/* Fila de titulo + acciones */
.page-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}

/* ── TARJETAS ──────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  margin-bottom: 16px;
}

.card-header {
  padding: 14px 20px;
  /* Un degradado casi imperceptible en la cabecera: da el borde de la
     hoja sin necesidad de una linea mas oscura. */
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.card-header h2, .card-header h3 {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: .005em;
  display: flex; align-items: center; gap: 9px;
}
.card-header h2 i, .card-header h3 i { color: var(--accent); font-size: 14px; }

.card-body { padding: 20px; }
.card-footer {
  padding: 12px 18px; border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r) var(--r);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* ── INDICADORES ───────────────────────────────── */
.stat-grid {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.stat-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 13px;
  transition: box-shadow var(--paso), transform var(--paso);
}
/* Un filo de luz arriba: es lo que separa una tarjeta de un rectangulo
   con borde, y no cuesta ni un pixel de espacio. */
.stat-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,.9) 20%, rgba(255,255,255,.9) 80%, transparent);
}
.stat-card:hover { box-shadow: var(--sombra-3); transform: translateY(-1px); }

.stat-icon {
  width: 38px; height: 38px; flex: none; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--surface-3); color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
/* Los seis tonos salen de la misma familia apagada. Seis colores vivos
   uno al lado de otro convierten un panel en un tablero de juego. */
.stat-icon.blue   { background: var(--accent-soft); color: var(--accent); }
.stat-icon.green  { background: var(--medico-soft); color: var(--medico); }
.stat-icon.red    { background: var(--danger-soft); color: var(--danger); }
.stat-icon.orange { background: var(--realce-soft); color: var(--realce); }
.stat-icon.purple { background: var(--violeta-soft); color: var(--violeta); }
.stat-icon.teal   { background: var(--ok-soft);     color: var(--ok); }

.stat-info { min-width: 0; }
.stat-info .stat-value {
  font-family: var(--serif);
  font-size: 25px; font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-info .stat-label {
  font-size: 12px; color: var(--text-2); line-height: 1.35; margin-top: 2px;
}

/* ── BARRA DE HERRAMIENTAS Y BUSQUEDA ──────────── */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.toolbar > form { display: contents; }
.toolbar .grow { flex: 1 1 260px; min-width: 200px; }

.search-field { position: relative; display: block; }
.search-field i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; pointer-events: none;
}
/* Se cualifica con [type=search] para ganar a la regla general de inputs,
   que si no borra el hueco reservado a la lupa. */
.search-field input[type=search], .search-field input {
  width: 100%; height: 38px;
  padding: 0 34px 0 34px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); font: inherit; font-size: 14px; color: var(--text);
}
.search-field input::placeholder { color: var(--text-3); }
.search-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.search-field .clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--text-3); cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; font-size: 13px;
}
.search-field .clear:hover { background: var(--surface-3); color: var(--text); }

/* Filtros por segmentos */
.segmented {
  display: inline-flex; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); overflow: hidden; background: var(--surface);
}
.segmented a, .segmented button {
  padding: 8px 13px; font-size: 13px; font-weight: 500;
  color: var(--text-2); background: none; border: none; cursor: pointer;
  border-right: 1px solid var(--line);
}
.segmented a:last-child, .segmented button:last-child { border-right: none; }
.segmented a:hover, .segmented button:hover { background: var(--surface-3); color: var(--text); }
.segmented .on { background: var(--accent); color: #fff; font-weight: 600; }

/* ── TABLAS ────────────────────────────────────── */
.table-container, .data-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Dentro de una tarjeta, la tabla ya no lleva su propio marco */
.card > .table-container, .card-body > .table-container {
  border: none; border-radius: 0;
}
.table-container { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead th {
  background: var(--surface-3);
  padding: 10px 16px;
  text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
/* Cedulas, fechas, importes: en cifras de ancho fijo, para que las
   columnas se lean en vertical sin bailar. */
tbody td { font-variant-numeric: tabular-nums; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.acciones { text-align: right; white-space: nowrap; width: 1%; }

/* Celda de identidad: nombre + dato secundario */
.cell-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-id .avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
}
.cell-id .t { min-width: 0; }
.cell-id .t b { display: block; font-weight: 600; font-size: 13.5px; }
.cell-id .t span { display: block; font-size: 12px; color: var(--text-3); }

/* Fila que se puede abrir entera */
tr.clickable { cursor: pointer; }

/* ── ACCIONES DE FILA ──────────────────────────── */
.row-actions { display: inline-flex; align-items: center; gap: 4px; }
.row-actions .icon-btn { width: 30px; height: 30px; font-size: 13px; }
.row-actions .icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: fixed; inset: auto; left: 0; top: 0; margin: 0;
  width: max-content; min-width: min(178px, calc(100vw - 16px));
  max-width: calc(100vw - 16px); padding: 5px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-pop);
  z-index: 70; display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--text-2);
  border-radius: var(--r-sm); text-align: left;
}
.dropdown-menu a i, .dropdown-menu button i { width: 15px; color: var(--text-3); }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-3); color: var(--text); }
.dropdown-menu .danger { color: var(--danger); }
.dropdown-menu .danger i { color: var(--danger); }
.dropdown-menu .danger:hover { background: var(--danger-soft); color: var(--danger); }
.dropdown-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; }

.row-actions.acciones-paciente {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 248px; gap: 6px;
}
.acciones-paciente .btn {
  width: 100%; height: auto; min-height: 34px; padding: 6px 9px;
  white-space: normal;
}
.acciones-paciente form { margin: 0; }

@media (max-width: 1100px) {
  .pacientes-tabla, .pacientes-tabla tbody { display: block; }
  .pacientes-tabla thead { display: none; }
  .pacientes-tabla tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--line);
  }
  .pacientes-tabla tr:last-child { border-bottom: none; }
  .pacientes-tabla td {
    display: block; min-width: 0; padding: 0; border: none;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  .pacientes-tabla td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    font-size: 11px; font-weight: 600; color: var(--text-2);
  }
  .pacientes-tabla .paciente-identidad,
  .pacientes-tabla .paciente-visita,
  .pacientes-tabla .acciones { grid-column: 1 / -1; width: auto; }
  .pacientes-tabla .acciones { border-top: 1px solid var(--line); padding-top: 12px; }
  .pacientes-tabla .acciones-paciente { min-width: 0; }
  .pacientes-tabla .acciones-paciente .btn { min-height: 44px; }
}

/* Selección de formulario antes de iniciar una atención. */
.page-content:has(.atender) { padding-top: 16px; padding-bottom: 16px; }
.atender { max-width: 1120px; }
.atender-encabezado {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding: 10px 14px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.atender-encabezado > div { min-width: 0; overflow-wrap: anywhere; }
.atender-encabezado h1 { font-size: 20px; margin-bottom: 3px; }
.atender-paciente b { font-size: 13px; }
.atender-paciente span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.atender-grupos { columns: 3; column-gap: 16px; }
.atender-grupo { break-inside: avoid; margin-bottom: 12px; }
.atender-grupo h2, .atender-otros h2 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 6px;
  font: 600 13px var(--sans); color: var(--text-2);
}
.atender-formulario {
  display: flex; align-items: center; gap: 9px; min-height: 54px;
  padding: 8px 10px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
.atender-formulario + .atender-formulario { margin-top: 5px; }
.atender-formulario:hover, .atender-formulario:focus-visible {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text);
}
.atender-codigo { flex: none; font-size: 12px; font-weight: 600; color: var(--accent-dark); }
.atender-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.atender-nombre b { display: block; font-size: 13px; font-weight: 600; }
.atender-nombre small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.atender-formulario > i { flex: none; font-size: 10px; color: var(--text-3); }
.atender-otros { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.atender-otros > div { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) {
  .atender-grupos { columns: 2; }
}
@media (max-width: 640px) {
  .atender-grupos { columns: 1; }
}

/* ── ESTADO VACIO ──────────────────────────────── */
.empty {
  text-align: center; padding: 56px 24px; color: var(--text-2);
}
.empty i.big {
  font-size: 22px; color: var(--text-3); display: inline-flex;
  align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 14px;
  background: var(--surface-3); border-radius: 50%;
}
.empty h3 {
  font-family: var(--serif); font-size: 17px; color: var(--text);
  margin-bottom: 6px;
}
.empty p { font-size: 13.5px; margin-bottom: 16px; }

/* ── PESTANAS ──────────────────────────────────── */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--text-2); border-bottom: 2px solid transparent;
  white-space: nowrap; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
.tab .n {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 9px; background: var(--surface-3); color: var(--text-2);
  font-size: 11px; font-weight: 600; line-height: 17px;
}
.tab.active .n { background: var(--accent-soft); color: var(--accent-dark); }

/* Compatibilidad con las clases antiguas */
.historia-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.historia-tab { padding: 10px 14px; font-size: 13.5px; color: var(--text-2); }
.historia-tab.active { color: var(--accent-dark); border-bottom: 2px solid var(--accent); }

/* ── FICHA DEL PACIENTE (cabecera de contexto) ─── */
.patient-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  color: var(--text);
}
.patient-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.patient-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 5px;
  font-size: 13px; color: var(--text-2);
}
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-item i { color: var(--text-3); font-size: 12.5px; }

/* ── ETIQUETAS ─────────────────────────────────── */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  background: var(--surface-3); color: var(--text-2);
}
.badge-success   { background: var(--ok-soft);     color: var(--ok); }
.badge-danger    { background: var(--danger-soft); color: var(--danger); }
.badge-primary   { background: var(--accent-soft); color: var(--accent-dark); }
.badge-warning   { background: var(--warn-soft);   color: var(--warn); }
.badge-info      { background: var(--info-soft);   color: var(--accent-dark); }
.badge-secondary { background: var(--surface-3);   color: var(--text-2); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── BOTONES ───────────────────────────────────── */
/* Un boton es un objeto, no un rectangulo de color. El relieve lo hacen
   las dos lineas interiores —luz arriba, sombra abajo—; la sombra
   exterior solo lo separa del papel. Al pulsarlo baja un pixel: es lo
   unico que confirma, sin texto, que el sistema recibio el clic. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--paso), border-color var(--paso),
              color var(--paso), box-shadow var(--paso),
              transform var(--paso);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn i { font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 12px; }
.btn-lg { height: 42px; padding: 0 20px; font-size: 14.5px; }

.btn-primary {
  background: linear-gradient(180deg, var(--azul-550), var(--azul-700));
  color: #fff;
  box-shadow: var(--relieve), var(--sombra-2);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--azul-600), var(--azul-800));
  color: #fff;
  box-shadow: var(--relieve), var(--sombra-3);
}

.btn-secondary {
  background: var(--surface); color: var(--text-2);
  border-color: var(--line-2);
}
.btn-secondary:hover { background: var(--surface-3); color: var(--text); }

.btn-outline {
  background: none; color: var(--accent); border-color: var(--accent-line);
}
.btn-outline:hover { background: var(--accent-soft); color: var(--accent-dark); }

.btn-success {
  background: linear-gradient(180deg, #128a5c, var(--ok));
  color: #fff; box-shadow: var(--relieve), var(--sombra-2);
}
.btn-success:hover { background: linear-gradient(180deg, var(--ok), #0b5e3f); color: #fff; }

.btn-danger  {
  background: linear-gradient(180deg, #d13130, var(--danger));
  color: #fff; box-shadow: var(--relieve), var(--sombra-2);
}
.btn-danger:hover { background: linear-gradient(180deg, var(--danger), #97201f); color: #fff; }

.btn-warning {
  background: linear-gradient(180deg, #a8690f, var(--warn));
  color: #fff; box-shadow: var(--relieve), var(--sombra-2);
}
.btn-warning:hover { background: linear-gradient(180deg, var(--warn), #74480a); color: #fff; }

.btn-ghost { background: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

/* Barra de acciones fija al pie de los formularios largos */
.actionbar {
  position: sticky; bottom: 0; z-index: 40;
  margin: 20px -28px -56px;
  padding: 12px 28px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.actionbar .spacer { flex: 1; }

/* ── FORMULARIOS ───────────────────────────────── */
.form-grid { display: grid; gap: 14px; }
.form-grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.form-group.full, .full { grid-column: 1 / -1; }

/* Columnas fijas: las filas quedan alineadas aunque la ultima no venga
   completa. Se usa en los formularios largos, como el de paciente. */
.form-grid-fija { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-group.doble { grid-column: span 2; }
@media (max-width: 1180px) {
  .form-grid-fija { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .form-grid-fija { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .form-grid-fija { grid-template-columns: 1fr; }
  .form-group.doble { grid-column: span 1; }
}

.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-group label, label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  letter-spacing: .01em;
}

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=email], input[type=tel], input[type=search],
select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  /* Un hundido de un pixel: hace que el campo se lea como un hueco
     donde se escribe y no como una caja dibujada encima. */
  box-shadow: inset 0 1px 2px rgba(10,44,86,.05);
  font: inherit; font-size: 13.5px; color: var(--text);
  transition: border-color var(--paso), box-shadow var(--paso);
}
textarea { min-height: 68px; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-3); color: var(--text-2); cursor: default;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238493a5' d='M6 8.5 2 4.5h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.form-check { display: flex; align-items: center; gap: 8px; }
.form-check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); }
.form-check label { font-weight: 500; color: var(--text); }

.hint { font-size: 12px; color: var(--text-3); }

/* Secciones de los formularios MSP */
.mf-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 14px;
  overflow: hidden;
}
.mf-section-header {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mf-section-header i { color: var(--text-3) !important; font-size: 13px; }
.mf-section-header h3 {
  font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
}
.mf-section-body { padding: 16px; }

/* Rejilla de sistemas / regiones */
.sistemas-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Tres por fila, contadas: la revision de organos y sistemas del 002 son
   once casillas y asi quedan en cuatro filas limpias. El minmax(0,...) no
   es adorno — sin el, el campo de texto de dentro estira su columna y las
   tres dejan de medir lo mismo. */
.sistemas-grid.en-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sistema-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sistemas-grid.en-tres .sistema-item.ancho { grid-column: span 2; }
@media (max-width: 900px) {
  .sistemas-grid.en-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sistemas-grid.en-tres { grid-template-columns: 1fr; }
  .sistemas-grid.en-tres .sistema-item.ancho { grid-column: auto; }
}

/* Casillas de marcar de los antecedentes (002 y 003 de 2021)
   Diez u once casillas que solo se marcan: no llevan SP/CP porque no
   afirmar nada es distinto de afirmar que no hay patologia. */
.marcas-grid {
  display: grid; gap: 4px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.marca-item {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 3px 5px; border-radius: var(--r-sm); cursor: pointer;
}
.marca-item:hover { background: var(--surface-2); }
.marca-item input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
.marca-item span { line-height: 1.2; }
@media (max-width: 620px) { .marcas-grid { grid-template-columns: 1fr; } }

/* Subtitulo de media seccion: «Regional» y «Sistemico» del examen fisico */
.mf-subtitulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2); font-weight: 700; margin-bottom: 6px;
}

/* La segunda toma de constantes del 002, plegada: se usa poco y ocupa
   mucho, pero cuando se usa tiene que estar donde se toma la primera. */
.mf-plegable > summary {
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text-2); padding: 6px 0;
}
.mf-plegable[open] > summary {
  border-bottom: 1px solid var(--line-2); margin-bottom: 6px;
}

/* Una aclaracion dentro de una etiqueta, en gris y sin negrita */
.tenue { font-weight: 400; color: var(--text-3); }

/* Signos vitales */
.sv-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.sv-card {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px; text-align: center; background: var(--surface-2);
}
.sv-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); margin-bottom: 4px;
}
.sv-card input {
  text-align: center; border: none; background: none; padding: 0;
  min-height: 26px; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sv-card input:focus { box-shadow: none; }
.sv-unit { font-size: 11px; color: var(--text-3); }

/* Tension arterial: sistolica / diastolica.
   La barra es del formulario, no del medico: se ve siempre y no se teclea. */
.sv-ta .ta-par {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.sv-ta .ta-par input {
  width: 3.2em; min-width: 0; text-align: center; padding: 0;
  border: none; background: none; min-height: 26px;
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sv-ta .ta-barra {
  font-size: 17px; font-weight: 400; color: var(--text-3);
  line-height: 1; user-select: none;
}

/* ── LA LETRA DE LOS FORMULARIOS DEL MSP: LA 9, EN TODOS ──────────────
   Una sola letra para rellenar los diez formularios, y del tamano que se
   pide: la 9. Se escribe en puntos y no en pixeles a proposito — «letra
   9» es la 9 de toda la vida, la de un procesador de textos, y asi lo
   dice el codigo sin que haya que traducirlo.

   Subio a la 10 y a la 12 por pedido, y volvio a la 9: lo que hacia
   falta agrandar no era la pantalla, era la letra del PDF/Excel que se
   genera — ver `utils/msp_common.py` (`_LETRA`, `caja()`) y
   `RUNBOOK.md`.

   Es mas pequena que la del resto del sistema, y a proposito: estas
   casillas se corresponden una a una con las de una hoja de papel de
   tamano fijo, asi que lo que importa no es que se lea de lejos, sino ver
   de una vez todo lo que se va a imprimir. Con la letra normal el medico
   escribia por una rendija.

   Antes cada formulario traia lo suyo escrito a mano en la plantilla —10,
   12, 13 y 14 px conviviendo—, asi que dos formularios del mismo sistema
   se rellenaban con letras distintas. Eso se quito de las diez plantillas;
   manda esto.

   Fuera de .mf-section el sistema sigue con su tamano de siempre. */
.mf-section input[type=text], .mf-section input[type=password],
.mf-section input[type=number], .mf-section input[type=date],
.mf-section input[type=time], .mf-section input[type=email],
.mf-section input[type=tel], .mf-section input[type=search],
.mf-section select, .mf-section textarea,
.mf-section .af-table, .mf-section .ef-table, .mf-section .presc-table {
  font-size: 9pt;
}
.mf-section input[type=text], .mf-section input[type=password],
.mf-section input[type=number], .mf-section input[type=date],
.mf-section input[type=time], .mf-section input[type=email],
.mf-section input[type=tel], .mf-section input[type=search],
.mf-section select, .mf-section textarea {
  padding: 6px 9px;
  min-height: 32px;
}
.mf-section textarea { min-height: 46px; line-height: 1.45; }
/* La etiqueta acompana; no compite con lo que se escribe. */
.mf-section label { font-size: 8pt; }
.mf-section .af-table td, .mf-section .ef-table td,
.mf-section .presc-table td { font-size: 9pt; }
.mf-section .af-table th, .mf-section .ef-table th,
.mf-section .presc-table th { font-size: 8pt; }

/* Los signos vitales, con la misma letra que todo lo demas. Estuvieron
   con una mucho mayor —«se leen de un vistazo»— y lo que se veia era un
   formulario con dos letras. Un formulario se rellena con una sola. */
.mf-section .sv-card input,
.mf-section .sv-ta .ta-par input { font-size: 9pt; font-weight: 600; }
.mf-section .sv-ta .ta-barra { font-size: 9pt; }
/* Y sin el relleno ni el borde de las casillas normales. La regla de
   arriba para `.mf-section input[type=text]` (6px 9px de relleno, 32px de
   alto) pesa mas que la de la tarjeta y se le colaba: en la presion
   arterial, con 18px de relleno dentro de una casilla de 2,6em, las tres
   cifras no cabian y se veian cortadas. Aqui la casilla de la tension
   crece con la tarjeta y tiene sitio para tres cifras. */
.mf-section .sv-card input[type=text],
.mf-section .sv-ta .ta-par input[type=text] {
  padding: 0; border: none; background: none; box-shadow: none;
  min-height: 26px; text-align: center;
}
.mf-section .sv-ta .ta-par input[type=text] {
  flex: 1 1 0; width: 3.4em; min-width: 3em; max-width: 4.5em;
}

/* MAYUSCULAS al escribir. La historia clinica del MSP se rellena en
   mayusculas —asi se archiva y asi se lee—, y ademas es con lo que estan
   medidas las casillas del impreso: dejar escribir en minusculas hacia
   creer que cabia mas de lo que cabe. El valor se pasa a mayusculas
   tambien en el servidor; esto es para que se vea mientras se escribe. */
.mf-section input[type=text], .mf-section textarea { text-transform: uppercase; }
.mf-section input::placeholder, .mf-section textarea::placeholder {
  text-transform: none;
}

/* Cajas de texto que crecen con lo escrito.
   La altura la pone el JavaScript; esto quita la barra de desplazamiento
   que asomaria mientras tanto y el tiron de la esquina de redimensionar,
   que ya no hace falta. */
textarea.crece { resize: vertical; overflow: hidden; }

/* La hoja 2 del 002, con la forma que tiene en el impreso: la fecha y la
   hora estrechas a la izquierda y las dos columnas anchas al lado. */
.h2-fila {
  display: grid; gap: 10px;
  grid-template-columns: 8.5rem 6.5rem minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
}
.h2-fila .tenue { font-weight: 400; color: var(--text-3); }
@media (max-width: 1100px) {
  .h2-fila { grid-template-columns: 8.5rem 6.5rem; }
  .h2-fila .form-group:nth-child(n+3) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .h2-fila { grid-template-columns: 1fr; }
  .h2-fila .form-group:nth-child(n+3) { grid-column: auto; }
}

/* Tablas dentro de los formularios */
.af-table, .ef-table, .presc-table { width: 100%; border-collapse: collapse; }
.af-table th, .ef-table th, .presc-table th {
  background: var(--surface-2); padding: 8px 10px; font-size: 11px;
  border-bottom: 1px solid var(--line);
}
.af-table td, .ef-table td, .presc-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.af-table select, .ef-table select { min-height: 30px; padding: 3px 8px; }
.ef-table textarea { min-height: 34px; }
.ef-cp { background: var(--danger-soft); }
.ef-legend { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }

.dx-row { display: grid; gap: 10px; grid-template-columns: 130px 1fr 150px; }
.dx-badge {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 11.5px; font-weight: 600;
}

/* ── ELEGIR QUE REGISTRAR ──────────────────────────
   Tres accesos grandes con los formularios que cubren casi toda la consulta.
   Es lo primero que ve el medico al abrir un paciente. */
.inicio-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.inicio-card {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.inicio-card:hover {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--text); box-shadow: var(--shadow);
}

.inicio-icono {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 16px;
}

.inicio-texto { min-width: 0; flex: 1; }
.inicio-texto b { display: block; font-size: 14.5px; font-weight: 600; }
.inicio-texto span { display: block; font-size: 12.5px; color: var(--text-2); }
.inicio-texto .inicio-estado {
  font-size: 11.5px; color: var(--text-3); margin-top: 3px;
}

.inicio-cta {
  flex: none; font-size: 13px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.inicio-cta i { font-size: 11px; }

/* Titulo de cada grupo de formularios */
.grupo-form { margin-bottom: 20px; }
.grupo-form:last-child { margin-bottom: 0; }
.grupo-titulo {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.grupo-titulo i { color: var(--text-3); font-size: 12px; }

/* ── ACCESOS A FORMULARIOS ─────────────────────── */
.forms-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.form-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
  transition: border-color .12s, background .12s;
}
.form-card:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.form-card:hover .form-card-cta { color: var(--accent-dark); }

/* Cuantos registros hay ya en ese formulario */
.form-card-estado { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* El verbo y la flecha son lo que dice que la tarjeta se puede pulsar */
.form-card-cta {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.form-card-cta i { font-size: 10px; }

.form-card-icon {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; background: var(--surface-3); color: var(--text-2);
}
.form-card:hover .form-card-icon { background: #fff; color: var(--accent); }

.form-card-info { min-width: 0; flex: 1; }
.form-card-code {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
.form-card-name { font-size: 13.5px; font-weight: 500; line-height: 1.3; }

.form-card-count {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent-soft) !important;
  color: var(--accent-dark); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ── SELECTOR DE FORMULARIO (barra superior) ─────
   Permite saltar de un formulario a otro sin volver a la historia. */
.selector-form .dropdown-menu {
  min-width: min(290px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto;
}
.selector-form .dropdown-menu .grupo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  padding: 8px 10px 3px;
}
.selector-form .dropdown-menu a { justify-content: space-between; }
.selector-form .dropdown-menu a .n {
  font-size: 11px; font-weight: 600; color: var(--text-3);
}
.selector-form .dropdown-menu a.on {
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 600;
}

/* ── AVISOS ────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; margin-bottom: 12px;
}
.alert i { font-size: 14px; }
.alert-success { background: var(--ok-soft);     border-color: #c6e3d5; color: var(--ok); }
.alert-danger  { background: var(--danger-soft); border-color: #eecdca; color: var(--danger); }
.alert-warning { background: var(--warn-soft);   border-color: #ebdcbb; color: var(--warn); }
.alert-info    { background: var(--info-soft);   border-color: var(--accent-line); color: var(--accent-dark); }

/* ── DIALOGO ───────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,32,46,.48);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-back[hidden] { display: none; }

/* ── `hidden` TIENE QUE OCULTAR. SIEMPRE. ──────────────────────────────
   El atributo `hidden` lo oculta todo con la hoja de estilo del NAVEGADOR,
   que dice `[hidden] { display: none }`. Cualquier regla nuestra que ponga
   un `display` —y aquí casi todos los componentes ponen `display: flex`—
   gana esa pelea: misma especificidad y, entre autor y navegador, gana el
   autor. Resultado: un elemento con `hidden` puesto que se ve igual.

   Pasó con el botón de llenar el formulario, que aparecía sin que nadie
   hubiera encendido el permiso, y estaba pasando en silencio con la fila
   de adjuntos. Es el §3.18 otra vez: una hoja general que pisa a la de al
   lado. Se arregla UNA vez y para todos, no componente por componente.

   Es el único `!important` general del fichero, y se gana el sitio: si
   algo lleva `hidden`, es que no se tiene que ver. */
[hidden] { display: none !important; }
.modal {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 440px; overflow: hidden;
}
.modal-head { padding: 18px 20px 0; }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 10px 20px 18px; color: var(--text-2); font-size: 13.5px; }
.modal-body strong { color: var(--text); }
.modal-foot {
  padding: 12px 20px; background: var(--surface-2);
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}
.modal-icon {
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger-soft); color: var(--danger); font-size: 16px;
}

/* ── PAGINACION ────────────────────────────────── */
.pagination {
  display: flex; align-items: center; gap: 6px; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-2); flex-wrap: wrap;
}
.pagination .pages { display: flex; gap: 4px; }
.pagination .pages a, .pagination .pages span {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--text-2); font-size: 13px;
}
.pagination .pages a:hover { background: var(--surface-3); color: var(--text); }
.pagination .pages .on {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.pagination .pages .off { opacity: .45; }

/* ── LOGIN ─────────────────────────────────────── */


/* ── AGENDA: BARRA Y CALENDARIO DE MES ─────────── */
.ag-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ag-titulo {
  flex: 1; min-width: 200px; margin: 0;
  font-size: 17px; font-weight: 600; color: var(--text);
}
.ag-vistas { flex: none; }

/* Los numeros de la cabecera, en una linea y sin tarjetas: son de mirar,
   no de pulsar, y cinco tarjetas grandes le robaban la pantalla al
   calendario, que es lo que se ha venido a ver. */
.ag-cifras {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--text-2);
}
.ag-cifras b { color: var(--text); font-weight: 600; }
.ag-cifras .c-warn b { color: var(--warn); }
.ag-cifras .c-ok   b { color: var(--ok); }
.ag-cifras .c-mal  b { color: var(--danger); }
.ag-cifras .ag-ir-hoy { margin-left: auto; font-size: 12.5px; color: var(--accent); }

.ag-mes {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.ag-mes-cab {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.ag-mes-cab span {
  padding: 9px 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.ag-mes-fila {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}
.ag-mes-fila:last-child { border-bottom: none; }

.ag-celda {
  position: relative; min-height: 108px; padding: 6px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.ag-celda:last-child { border-right: none; }
.ag-celda.finde { background: var(--surface-2); }
/* Los dias del mes de al lado se ven, pero apagados: estan para que la
   rejilla no tenga huecos, no para trabajar en ellos. */
.ag-celda.fuera { background: var(--surface-2); }
.ag-celda.fuera .ag-celda-num { color: var(--text-3); }
.ag-celda.fuera .ag-chip { opacity: .55; }
.ag-celda.hoy { background: var(--accent-soft); }
.ag-celda:hover .ag-celda-add { opacity: 1; }

.ag-celda-num {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.ag-celda-num:hover { background: var(--surface-3); color: var(--text); }
.ag-celda.hoy .ag-celda-num { background: var(--accent); color: #fff; }
.ag-celda-num .n {
  font-size: 10px; font-weight: 600; color: var(--text-3);
}
.ag-celda.hoy .ag-celda-num .n { color: rgba(255,255,255,.8); }

.ag-celda-citas { display: flex; flex-direction: column; gap: 3px; }
.ag-chip {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 7px; border-radius: 4px;
  font-size: 11.5px; line-height: 1.3; color: var(--text);
  background: var(--surface-3);
  border-left: 3px solid var(--text-3);
  overflow: hidden; white-space: nowrap;
}
.ag-chip:hover { background: var(--line); }
.ag-chip .h { font-variant-numeric: tabular-nums; color: var(--text-2); flex: none; }
.ag-chip .p { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ag-chip.pasada { opacity: .7; }
.ag-chip.e-programada { border-left-color: var(--accent); }
.ag-chip.e-confirmada { border-left-color: var(--ok); }
.ag-chip.e-atendida   { border-left-color: var(--text-3); }
.ag-chip.e-cancelada  { border-left-color: var(--danger); text-decoration: line-through; }
.ag-chip.e-no_asistio { border-left-color: var(--warn); }

.ag-mas {
  padding: 2px 7px; font-size: 11px; color: var(--accent); font-weight: 500;
}

.ag-celda-add {
  position: absolute; top: 6px; right: 6px; opacity: 0;
  width: 22px; height: 22px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: 10px; transition: opacity .12s;
}
.ag-celda-add:hover { border-color: var(--accent); color: var(--accent); }

/* En pantalla estrecha una rejilla de siete columnas no se lee. Se pasa a
   una lista de dias, que es como se mira una agenda en el movil. */
@media (max-width: 820px) {
  .ag-mes-cab { display: none; }
  .ag-mes-fila { grid-template-columns: 1fr; }
  .ag-celda {
    min-height: 0; border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px;
  }
  .ag-celda.fuera { display: none; }
  /* Y los dias sin nada tampoco: en un movil, treinta y una filas diciendo
     "sin citas" obligan a bajar media pantalla para encontrar la unica que
     importa. Queda la lista de los dias que tienen algo, mas el de hoy. */
  .ag-celda.sin-citas:not(.hoy) { display: none; }
  .ag-celda-citas { flex: 1; }
  .ag-celda-add { position: static; opacity: 1; }
  .ag-celda.sin-citas .ag-celda-citas::before {
    content: 'Sin citas'; font-size: 12px; color: var(--text-3);
  }
}





/* La linea que explica para que sirve un campo, debajo del propio campo:
   una etiqueta corta no siempre basta y un titulo emergente no se ve. */
.form-group .ayuda {
  display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4;
  color: var(--text-3);
}

/* ── RESUMEN CLÍNICO DEL PACIENTE ──────────────── */
/* Lo que hay que saber antes de escribir nada. Va arriba y siempre en el
   mismo sitio: es donde el medico lo busca cuando esta a punto de recetar. */
.clinico {
  margin-bottom: 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); overflow: hidden;
}

.clinico-alergias {
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 14px; font-size: 13px; line-height: 1.45;
}
.clinico-alergias .et {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: .75;
}
.clinico-alergias > i { flex: none; font-size: 13px; }
/* Rojo solo cuando hay algo que evitar. Si todo grita, nada avisa. */
.clinico-alergias.alerta {
  background: var(--danger-soft); color: var(--danger);
  border-bottom: 1px solid var(--line);
}
.clinico-alergias.alerta b { font-weight: 600; }
.clinico-alergias.tranquila {
  background: var(--surface-2); color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
/* Que nadie las haya preguntado no es lo mismo que no tenerlas */
.clinico-alergias.pendiente {
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid var(--line);
}

.clinico-cuerpo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.clinico-resumen > summary {
  padding: 10px 14px; cursor: pointer; font-size: 13px;
  font-weight: 500; color: var(--text-2);
}
.clinico-resumen > summary span {
  margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--text-3);
}
.clinico-resumen[open] > summary {
  border-bottom: 1px solid var(--line);
}
.clinico-bloque {
  padding: 11px 14px; border-left: 1px solid var(--line); min-width: 0;
}
.clinico-bloque:first-child { border-left: none; }
.clinico-tit {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.clinico-tit em {
  font-style: normal; font-weight: 400; letter-spacing: 0;
  text-transform: none; opacity: .85;
}
.clinico-bloque ul { list-style: none; margin: 0; padding: 0; }
.clinico-bloque li {
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clinico-bloque .cod {
  font-size: 10.5px; color: var(--accent);
  font-variant-numeric: tabular-nums; margin-right: 3px;
}
.clinico-bloque .cuando { color: var(--text-3); font-size: 11.5px; }
.clinico-bloque .vacio { margin: 0; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 820px) {
  .clinico-cuerpo { grid-template-columns: 1fr; }
  .clinico-bloque { border-left: none; border-top: 1px solid var(--line); }
  .clinico-bloque:first-child { border-top: none; }
  .clinico-alergias { flex-wrap: wrap; }
}

/* ── ELEGIR FORMULARIO ─────────────────────────── */
/* Una linea por grupo: el titulo a la izquierda y las fichas a su derecha,
   midiendo lo que mide su texto. La columna del titulo da para la etiqueta
   mas larga sin partirla en dos, que es lo que dejaba las filas desiguales. */
.elegir-grupo {
  display: grid; grid-template-columns: 152px 1fr;
  gap: 14px; align-items: start;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.elegir-grupo:first-child { border-top: none; padding-top: 2px; }
.elegir-grupo:last-child { padding-bottom: 2px; }

.elegir-titulo {
  padding-top: 7px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}

.elegir-rejilla { display: flex; flex-wrap: wrap; gap: 5px; }

/* Fichas sin peso: el borde solo se insinua y aparece al pasar por encima.
   Quince recuadros marcados vuelven ruidosa una pantalla de la que solo se
   pulsa uno. */
.elegir {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: var(--surface-2);
  color: var(--text); font-size: 12.5px; line-height: 1.25;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.elegir:hover {
  background: var(--accent-soft); border-color: var(--accent-line);
}
.elegir > i { flex: none; color: var(--text-3); font-size: 12px; width: 13px; }
.elegir:hover > i { color: var(--accent); }
.elegir-nombre { flex: none; }
.elegir-cod {
  flex: none; font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}

/* Lo que ya tiene algo escrito: el icono en color, y nada mas. Se ve de un
   vistazo y no se puede confundir con una cifra. */
.elegir.con-registros { background: var(--surface-3); }
.elegir.con-registros > i { color: var(--accent); }
.elegir.con-registros .elegir-nombre { font-weight: 500; }

@media (max-width: 700px) {
  /* En un movil no caben dos columnas: el titulo se pone encima */
  .elegir-grupo { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .elegir-titulo { padding-top: 0; }
}

/* ── HISTORIAL DE ATENCIONES ───────────────────── */
/* En orden de fecha, que es como se lee una historia clinica. */
.curso-dia {
  padding: 9px 16px 7px;
  background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.curso-dia:first-child { border-top: none; }
.curso-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line);
}
.curso-fila:hover { background: var(--surface-2); }
.curso-hora {
  flex: none; width: 44px; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.curso-icono {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-2); font-size: 12px;
}
.curso-que { flex: 1; min-width: 0; }
.curso-que b { display: block; font-size: 13px; font-weight: 600; }
/* El resumen, en su linea. Se apunta al hijo directo: si no, la regla se
   llevaba por delante tambien el numero del formulario, que va dentro del
   <b> y debe quedarse al lado del nombre. */
.curso-que > span {
  display: block; font-size: 12.5px; color: var(--text-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curso-cod {
  margin-left: 5px; font-size: 10.5px; font-weight: 500; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.curso-quien {
  flex: none; max-width: 190px; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curso-quien i { color: var(--text-3); margin-left: 4px; font-size: 10.5px; }

@media (max-width: 780px) {
  .curso-fila { flex-wrap: wrap; }
  .curso-que { flex-basis: 100%; order: 3; }
  .curso-quien { max-width: none; }
}

/* ── EL DESPLEGABLE DEL CIE-10 ─────────────────── */
/* La caja de resultados cuelga del campo del codigo, que mide 130 px. Con
   el ancho de su columna, «Infeccion aguda de las vias respiratorias
   superiores, no especificada» se veia cortada y no habia forma de saber
   cual se estaba eligiendo. Se sale de su columna a proposito: es una
   lista flotante, puede ocupar lo que necesite. */
.cie10-results {
  position: fixed;
  z-index: 10000;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dce3ed);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow-y: auto;
}
.cie10-results[hidden] { display: none; }
.cie10-mensaje { padding: 10px 13px; font-size: 13px; color: var(--text-muted); }
.cie10-results .cie10-op {
  display: block; padding: 8px 13px; cursor: pointer;
  font-size: 12.5px; line-height: 1.45;
  border-bottom: 1px solid var(--line);
  white-space: normal; word-break: break-word;
}
.cie10-results .cie10-op:last-child { border-bottom: none; }
.cie10-results .cie10-op:hover,
.cie10-results .cie10-op.marcada { background: var(--surface-3); }
.cie10-results .cie10-cod {
  font-weight: 700; color: var(--azul-700, #1256a8);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .cie10-results { min-width: 0; width: 86vw; max-width: 86vw; }
}

/* ── AVISO DEL CIE-10 ──────────────────────────── */
/* Lo que dice la comprobacion del codigo. Nunca se aplica sola: el boton
   esta ahi para que la decision sea de quien firma la historia. */
.cie10-aviso {
  margin-top: 5px; padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.5;
  background: var(--surface-3); color: var(--text-2);
}
.cie10-aviso.bien    { background: var(--ok-soft);   color: var(--ok); }
.cie10-aviso.ojo     { background: var(--warn-soft); color: var(--warn); }
.cie10-aviso.revisar {
  background: var(--warn-soft); color: var(--warn);
  border-left: 3px solid var(--warn);
}
.cie10-usar {
  margin-left: 6px; padding: 2px 9px; border-radius: var(--r-sm);
  border: 1px solid currentColor; background: var(--surface);
  color: inherit; font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.cie10-usar:hover { background: var(--surface-3); }

/* ── TRAER LA FICHA POR CEDULA ─────────────────── */
.cedula-con-boton { display: flex; gap: 8px; align-items: stretch; }
/* El campo manda; el boton se queda con lo justo. Antes el boton se
   quedaba con su ancho natural y en una columna estrecha no se veia lo que
   se escribia en la cedula. */
.cedula-con-boton input { flex: 1 1 auto; min-width: 8.5rem; }
.cedula-con-boton .btn { flex: none; white-space: nowrap; }

.cedula-estado {
  display: block; margin-top: 6px; font-size: 12px; color: var(--text-2);
}
.cedula-estado.ok  { color: var(--ok); }
.cedula-estado.mal { color: var(--danger); }

/* El sexo deducido del nombre puede estar mal: se ve que es una sugerencia,
   no un dato del registro. */
.cedula-sugerido {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--warn);
}
select.es-sugerido { border-color: var(--warn); background: var(--warn-soft); }


/* ── DAR HORA A UN PACIENTE ────────────────────── */
.cita-nueva { max-width: 780px; }

.cedula-buscar { display: flex; gap: 10px; align-items: center; }
.cedula-buscar .search-field { flex: 1; }
/* La cedula se lee mejor con cifras de ancho fijo y algo mas grandes: es el
   dato que se teclea mirando un papel o repitiendolo por telefono. */
/* El hueco del icono hay que pedirlo con dos clases: la regla general de
   inputs se lo come, y la de .search-field solo se defiende en los
   type=search. Aqui el campo es de texto porque una cedula no es una
   busqueda libre. */
.cedula-buscar .search-field input {
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  font-size: 15px; height: 42px; padding: 0 12px 0 36px;
}

.cita-paciente {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.cita-paciente .t { flex: 1; min-width: 0; }
.cita-paciente .t b { display: block; font-size: 14px; }
.cita-paciente .t span {
  display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px;
}
.cita-paciente .t em { color: var(--warn); font-style: normal; }

.cita-aviso {
  margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--warn); font-size: 12.5px;
}

.cita-sin-paciente {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
  padding: 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px dashed var(--line-2);
}
.cita-sin-paciente > i { color: var(--text-3); font-size: 18px; margin-top: 1px; }
.cita-sin-paciente b { display: block; font-size: 13.5px; }
.cita-sin-paciente span {
  display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px;
}

.cita-parecidos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cita-parecidos a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12.5px; color: var(--text);
}
.cita-parecidos a:hover { border-color: var(--accent); background: var(--accent-soft); }
.cita-parecidos .tnum { color: var(--text-2); font-variant-numeric: tabular-nums; }

.cita-alta { margin-top: 16px; }
.cita-alta > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.cita-alta > summary::-webkit-details-marker { display: none; }
.cita-alta > summary:hover { border-color: var(--accent); color: var(--accent); }
.cita-alta[open] > summary { border-color: var(--accent); color: var(--accent); }
.cita-alta-form {
  margin-top: 14px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2);
}

.cuenta-editar { margin: 6px 0; }
.cuenta-editar > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.cuenta-editar > summary::-webkit-details-marker { display: none; }
.cuenta-editar > summary:hover { color: var(--accent); }
.cuenta-editar[open] > summary { color: var(--accent); }
.cuenta-editar-body {
  margin: 6px 0 14px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2);
}

/* ── PANTALLA DE ENTRADA ───────────────────────── */
/* "El latido". La mitad izquierda es la marca: azul noche con la
   cuadricula milimetrada del papel de electrocardiograma y un solo trazo
   cian —el latido del logotipo— de lado a lado. El trazo se dibuja una
   vez al cargar; es el unico movimiento de la pantalla. La mitad derecha
   es papel blanco con la firma (logotipo del producto o del centro) y el
   formulario, con los campos como casillas de hoja impresa. */
.login-page { min-height: 100vh; background: var(--surface); }

.login-panel {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
}

/* ── La marca ── */
/* Azul noche con dos luces suaves, sin cuadricula: la escena manda.
   Arriba el saludo; abajo los dos medicos y, flotando donde ellos miran,
   el formulario 002 que se llena solo. */
.login-marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 64px clamp(40px, 6vw, 96px) 0;
  color: #fff;
  /* El mismo azul que el fondo de la imagen: no se le ve el borde */
  background: #01091f;
}
.login-marca-texto { position: relative; z-index: 2; max-width: 30rem; }
.login-saludo {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02;
  letter-spacing: -.045em; color: #fff; margin: 0 0 20px;
}
.login-marca-lema {
  font-size: 17px; line-height: 1.6; color: var(--rail-texto);
  margin: 0; max-width: 26em;
}

/* La escena: los dos médicos abajo, de borde a borde de la mitad, y
   fundidos con el azul por arriba. El marco guarda la proporción de la
   imagen; el lienzo mide lo que la imagen (1536 x 1024) y se escala con
   --k para que la hoja caiga siempre sobre la pantalla del monitor. */
.login-escena {
  position: relative; flex: 1; min-height: 300px;
  margin: 24px calc(-1 * clamp(40px, 6vw, 96px)) 0;
  pointer-events: none;
}
.escena-marco {
  position: absolute; left: 0; right: 0; bottom: 0;
  aspect-ratio: 1536 / 1024; overflow: hidden;
  background: url('../img/login-medicos-monitor.webp') center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}
.escena-lienzo {
  position: absolute; left: 0; top: 0; width: 1536px; height: 1024px;
  transform-origin: 0 0; transform: scale(var(--k, 0));
}
/* La hoja, en la perspectiva del monitor: homografía de 640 x 400 a las
   esquinas (938,272) (1466,118) (1438,749) (908,693) de la imagen */
.escena-pantalla {
  position: absolute; left: 0; top: 0; width: 640px; height: 400px;
  transform-origin: 0 0;
  transform: matrix3d(0.066989498, -0.30163812, 0, -0.00051706037, -0.1232513, 1.0156738, 0, -5.3140197e-05, 0, 0, 1, 0, 938, 272, 0, 1);
  background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
  font-size: 19px; line-height: 1.3; color: var(--text);
}
.app-barra {
  flex: none; display: flex; align-items: center; gap: .5em;
  padding: .4em .8em; background: var(--azul-950); color: #fff; font-size: .8em;
}
.app-barra img { width: 1.4em; height: 1.4em; }
.app-barra b { font-family: var(--serif); font-weight: 600; }
.app-barra span { margin-left: auto; color: var(--rail-texto); }

.login-hoja { position: relative; flex: 1; padding: .1em .9em 0; overflow: hidden; }
.hoja-cabeza {
  display: flex; flex-direction: column; gap: .05em;
  padding: .4em 0 .3em; border-bottom: .14em solid var(--azul-900);
}
.hoja-cabeza b {
  font-family: var(--serif); font-size: 1.28em; font-weight: 600;
  letter-spacing: -.02em; color: var(--azul-900); white-space: nowrap;
}
.hoja-codigo { font-size: .6em; color: var(--text-3); white-space: nowrap; }
.hoja-rejilla { display: grid; grid-template-columns: 1fr; }
.hoja-rejilla.hoja-3 { grid-template-columns: 1.6fr .8fr 1fr; }
.hoja-rejilla.hoja-4 { grid-template-columns: repeat(4, 1fr); }
.hoja-celda {
  position: relative; min-width: 0;
  padding: .2em .55em .25em;
  border-bottom: 1px solid #dfe8f3;
}
.hoja-rejilla > .hoja-celda + .hoja-celda { border-left: 1px solid #dfe8f3; }
.hoja-celda small { display: block; font-size: .6em; line-height: 1.3; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-celda span {
  display: block; font-size: .86em; line-height: 1.35; font-weight: 600; color: var(--azul-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* El valor se escribe de izquierda a derecha, campo tras campo */
  animation: hoja-escribe .5s steps(14, end) calc(1s + var(--i) * .2s) both;
}
.hoja-celda::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(34,211,238,.18);
  animation: hoja-resalta .9s ease-out calc(1s + var(--i) * .2s) both;
}
.hoja-texto span { font-weight: 500; }
.hoja-pulso { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; }
.hoja-pulso small { flex-basis: 100%; }
.hoja-pulso svg { flex: 1; min-width: 2em; height: .8em; }
.hoja-pulso path {
  fill: none; stroke: #0891b2; stroke-width: 1.3; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; animation: hoja-traza 1.2s ease-out 2.6s both;
}
.hoja-barrido {
  position: absolute; left: 0; right: 0; top: 0; height: 3em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(34,211,238,.16));
  border-bottom: 1px solid rgba(34,211,238,.8);
  animation: hoja-barre 2s ease-in-out 1s both;
}
/* Barra de estado de la app: lo que hizo Vertex, al terminar */
.app-estado {
  flex: none; display: flex; align-items: center; gap: .5em;
  padding: .35em .8em; font-size: .78em;
  background: var(--azul-50); border-top: 1px solid #d4e1f0; color: var(--azul-900);
  animation: hoja-aparece .5s ease-out 3s both;
}
.app-estado img { width: 1.6em; height: 1.6em; }
.app-estado b { color: var(--azul-600); }
.app-estado em {
  margin-left: auto; font-style: normal; font-weight: 600; font-size: .92em;
  padding: .15em .7em; border-radius: 999px; color: var(--ok); background: #d9f2e6;
}
@keyframes hoja-escribe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hoja-resalta { from { opacity: 1; } to { opacity: 0; } }
@keyframes hoja-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hoja-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes hoja-barre {
  0% { top: -3em; opacity: 1; } 90% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; }
}

/* ── Entrar ── */
.login-acceso {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px clamp(28px, 5vw, 80px) 32px;
}
/* Firma, formulario y pie en una sola columna: el logotipo queda
   alineado con el borde de las casillas */
.login-acceso > * { width: 100%; max-width: 380px; }
.login-firma { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.login-firma-producto {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--azul-900); text-decoration: none;
}
.login-firma-producto > span {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  letter-spacing: -.035em; line-height: 1.1;
}
.login-firma-producto b {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--azul-600);
}
.login-firma-producto:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.login-marca-logo { display: block; height: auto; }
.login-marca-logo.es-marca { width: 42px; height: 42px; }
/* El logotipo de un centro llega con cualquier proporcion: se le fija
   el alto y se deja que el ancho siga */
.login-marca-logo:not(.es-marca) { max-height: 52px; max-width: 180px; width: auto; }
.login-firma-h1 { margin: 0; font-size: inherit; line-height: inherit; }
.login-firma-centro {
  margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; color: var(--azul-900); line-height: 1.2;
}

.login-acceso-caja { margin: auto 0; padding: 48px 0; }
.login-titulo { margin-bottom: 30px; }
.login-titulo h2 {
  font-family: var(--serif); font-size: 40px; font-weight: 600;
  line-height: 1.05; margin: 0 0 10px; letter-spacing: -.04em;
  color: var(--azul-900);
}
.login-titulo p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 0; }

/* Las casillas. Un solo contorno para el grupo y el mismo filete entre
   una y otra, como en la hoja impresa. La que tiene el cursor se levanta
   sobre la vecina para que el filete compartido cambie de color. */
.login-casillas { margin-bottom: 20px; }
.login-casilla {
  position: relative;
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: 10px 16px 0;
  transition: border-color .15s, background-color .15s;
}
.login-casillas .login-casilla + .login-casilla { margin-top: -1px; }
.login-casillas .login-casilla:first-child { border-radius: 10px 10px 0 0; }
.login-casillas .login-casilla:last-child  { border-radius: 0 0 10px 10px; }
.login-casilla-sola { border-radius: 10px; margin-bottom: 16px; padding-bottom: 4px; }
.login-casilla:focus-within {
  z-index: 1; border-color: var(--azul-500); background: var(--azul-50);
  box-shadow: 0 0 0 3px rgba(26,127,232,.16);
}
.login-casilla label {
  display: block; margin: 0;
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.login-casilla:focus-within label { color: var(--azul-600); }
.login-casilla .login-input input,
.login-casilla select {
  width: 100%; height: 40px; padding: 0; margin: 0;
  border: none; border-radius: 0; background-color: transparent; box-shadow: none;
  font: inherit; font-size: 16px; color: var(--text);
}
.login-casilla select { padding-right: 24px; background-position: right 0 center; }
.login-casilla .login-input input:focus,
.login-casilla select:focus { outline: none; box-shadow: none; border: none; }

.login-input { position: relative; }
.login-input input#password { padding-right: 40px; }
.login-ojo {
  position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: none; cursor: pointer;
  color: var(--text-3); font-size: 15px; border-radius: var(--r-sm);
}
.login-ojo:hover { color: var(--text); }
.login-ojo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.login-ojo .login-ico { display: block; width: 18px; height: 18px; margin: auto; }
.login-ico[hidden] { display: none; }
.alert .login-ico { width: 15px; height: 15px; flex: none; }
.login-aviso { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--warn); }
.login-aviso[hidden] { display: none; }

.cf-turnstile { margin-bottom: 16px; }

.btn-login {
  width: 100%; height: 50px; border: none; border-radius: 10px;
  background: var(--azul-900); color: #fff; font: inherit;
  font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background-color .15s;
}
.btn-login:hover { background: var(--azul-700); }
.btn-login:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

.login-nota { margin: 20px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.login-enlace { margin: 14px 0 0; font-size: 13.5px; }
.login-enlace a, .login-pie-derecha a { color: var(--azul-600); text-underline-offset: 3px; }

.login-pie-derecha {
  margin: 0; font-size: 13px;
}

/* ── Pantallas estrechas: la marca se queda en una franja ── */
@media (max-width: 960px) {
  .login-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Franja: saludo y, debajo, la escena de borde a borde */
  .login-marca { padding: 26px 20px 0; min-height: 0; }
  .login-saludo { font-size: 34px; margin-bottom: 6px; }
  .login-marca-lema { display: none; }
  .login-marca-texto { width: min(100%, 420px); margin: 0 auto; }
  .login-escena { flex: none; min-height: 0; margin: 0 -20px; height: min(60vw, 300px); }
  .escena-marco {
    left: 50%; right: auto; translate: -50% 0; width: min(100%, 450px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .login-acceso { padding: 20px 20px 28px; }
  .login-acceso-caja { margin: 0; padding: 22px 0 36px; }
  .login-titulo { margin-bottom: 20px; }
  .login-titulo h2 { font-size: 30px; }
}
/* Telefonos bajos: la verificacion de Cloudflare ocupa 80 px mas y la
   hoja dejaria el boton de entrar fuera de la pantalla. Ahi manda entrar. */
@media (max-width: 960px) and (max-height: 800px) {
  .login-saludo { font-size: 30px; }
  .login-escena { display: none; }
}
/* La verificacion de Cloudflare no baja de 300 px de ancho */
@media (max-width: 340px) {
  .login-acceso { padding-left: 10px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-hoja, .login-hoja *, .login-hoja *::after, .app-estado { animation: none !important; }
  .hoja-barrido { display: none; }
  .login-casilla, .btn-login { transition: none; }
}

.login-footer {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  text-align: center; font-size: 12.5px; color: var(--text-3);
}

/* ── TRIAJE ────────────────────────────────────── */
.triage-I   { background: var(--danger-soft); color: var(--danger); }
.triage-II  { background: var(--warn-soft);   color: var(--warn); }
.triage-III { background: var(--realce-soft); color: var(--realce); }
.triage-IV  { background: var(--ok-soft);     color: var(--ok); }
.triage-V   { background: var(--accent-soft); color: var(--accent-dark); }

/* ── UTILIDADES ────────────────────────────────── */
.text-muted  { color: var(--text-2); }
.text-small  { font-size: 12.5px; }
.text-center { text-align: center; }
.align-center{ align-items: center; }
.fw-bold     { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.d-flex      { display: flex; }
.flex-wrap   { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.w-100 { width: 100%; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-pop); }
  .sidebar.open { transform: none; }
  .main-content { margin-left: 0; }
  #sidebar-toggle { display: inline-flex !important; }
  .page-content { padding: 18px 16px 48px; }
  .actionbar { margin: 18px -16px -48px; padding: 10px 16px; }
  .topbar { padding: 0 16px; }
}

@media (max-width: 640px) {
  .dx-row { grid-template-columns: 1fr; }
  .page-bar { align-items: flex-start; flex-direction: column; }
  .topbar-date { display: none; }
  .page-header.con-marca { flex-direction: column; align-items: flex-start; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* En un movil, un boton por fila y a lo ancho: dos botones de 36 px
     uno al lado de otro se pulsan mal con el pulgar. */
  .row-actions { flex-wrap: wrap; }
  .toolbar > .btn, .row-actions > form, .row-actions > .btn { flex: 1 1 auto; }
}

/* ── EL MOVIL DE VERDAD ────────────────────────────
   360 px es el ancho del telefono con el que un medico mira la agenda
   entre paciente y paciente. Aqui no se recorta contenido: se apila,
   se agranda lo que se toca y se quita lo que solo adorna. */
@media (max-width: 460px) {
  :root { --topbar-h: 52px; }
  body { font-size: 14.5px; }

  .page-content { padding: 14px 12px 44px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .card-body { padding: 15px; }
  .card-header { padding: 12px 15px; }

  h1 { font-size: 20px; }
  .page-header h1::after { width: 30px; }

  /* Los indicadores, dos por fila en vez de uno: cuatro tarjetas
     apiladas obligan a hacer scroll para ver un panel de cuatro cifras. */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .stat-card { padding: 12px 11px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .stat-info .stat-value { font-size: 21px; }
  .stat-info .stat-label { font-size: 11.5px; }

  /* Los formularios, a una columna siempre */
  .form-grid, .form-grid-fija { grid-template-columns: 1fr !important; }
  .form-group.doble { grid-column: auto !important; }

  /* Que se toca, mas grande. 44 px es el minimo comodo con el pulgar. */
  .btn { height: 42px; padding: 0 15px; }
  .btn-sm { height: 36px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  /* 16 px en los campos no es un capricho de tamano: por debajo de eso,
     Safari en iPhone hace zoom al enfocarlos y descoloca la pagina. */

  .toolbar { gap: 8px; }
  .toolbar .grow { flex: 1 1 100%; }

  .empty { padding: 38px 16px; }
  .empty i.big { width: 46px; height: 46px; font-size: 19px; }
}

/* Las tablas anchas se desplazan solas dentro de su caja, nunca
   arrastran la pagina entera. */
@media (max-width: 760px) {
  .table-container { -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 520px; }
  .card > .table-container { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* ── AGENDA ────────────────────────────────────
   La columna del dia es una lista ordenada de citas, no una rejilla horaria:
   en consulta externa importa el orden de llegada, no la duracion exacta.
   El estado se dice con el filete izquierdo y un punto, sin fondos de color.
*/
.ag-rango {
  font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums;
}

.ag-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 10px; align-items: start;
}
.ag-dia {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
}
.ag-dia.finde { background: var(--surface-2); }
.ag-dia.hoy { border-color: var(--accent-line); }
.ag-dia-cab {
  display: flex; align-items: baseline; gap: 6px;
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--r) var(--r) 0 0;
}
.ag-dia.hoy .ag-dia-cab {
  background: var(--accent-soft); border-bottom-color: var(--accent-line);
}
.ag-dia-nom {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-2);
}
.ag-dia.hoy .ag-dia-nom { color: var(--accent-dark); }
.ag-dia-num {
  font-size: 16px; font-weight: 600; color: var(--text); line-height: 1;
}
.ag-dia-n {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ag-dia-cuerpo {
  padding: 8px; min-height: 96px;
  display: flex; flex-direction: column; gap: 6px;
}

.ag-cita {
  border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: var(--r-sm); padding: 7px 8px; background: var(--surface);
}
.ag-cita .hora {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ag-cita .pac {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3;
  word-break: break-word;
}
.ag-cita .mot { font-size: 11px; color: var(--text-3); line-height: 1.35; }
.ag-cita .acc { display: flex; gap: 2px; margin-top: 6px; }
.ag-cita .acc .icon-btn { width: 26px; height: 26px; font-size: 11.5px; }
.ag-cita.pasada { opacity: .7; }

/* Estado de la cita: filete izquierdo (.ag-cita) o punto (.pt) */
.ag-cita.e-programada { border-left-color: var(--accent); }
.ag-cita.e-confirmada { border-left-color: var(--ok); }
.ag-cita.e-atendida   { border-left-color: var(--text-3); }
.ag-cita.e-cancelada  { border-left-color: var(--danger); opacity: .55; }
.ag-cita.e-no_asistio { border-left-color: var(--warn); opacity: .75; }

.pt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  display: inline-block; background: var(--line-2);
}
.pt.e-programada { background: var(--accent); }
.pt.e-confirmada { background: var(--ok); }
.pt.e-atendida   { background: var(--text-3); }
.pt.e-cancelada  { background: var(--danger); }
.pt.e-no_asistio { background: var(--warn); }

.ag-add {
  display: block; text-align: center; padding: 6px;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  font-size: 11px; color: var(--text-3);
}
.ag-add:hover {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent-dark);
}
.ag-vacio { text-align: center; font-size: 11px; color: var(--text-3); padding: 8px 0; }

/* Lista de citas del dia (el panel de "Hoy") */
.ag-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-top: 1px solid var(--line);
}
.ag-fila:hover { background: var(--surface-2); }
.ag-fila.pasada .quien b { color: var(--text-2); }
.ag-fila .hora {
  flex: none; width: 48px; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.ag-fila .quien { flex: 1; min-width: 0; }
.ag-fila .quien b { display: block; font-size: 13.5px; font-weight: 600; }
.ag-fila .quien small { font-size: 12px; color: var(--text-2); }
.ag-fila .row-actions { flex: none; }

/* Leyenda de estados */
.ag-leyenda {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px; font-size: 11.5px; color: var(--text-2);
}
.ag-leyenda span { display: flex; align-items: center; gap: 6px; }

.ag-fila .dropdown-menu, .ag-cita .dropdown-menu { min-width: 206px; }
.ag-fila .dropdown-menu a, .ag-fila .dropdown-menu button,
.ag-cita .dropdown-menu a, .ag-cita .dropdown-menu button { white-space: nowrap; }

/* WhatsApp: el verde va solo en el icono, para que se reconozca la accion
   sin romper la regla de una sola tinta de acento. */
.btn-wa i, .dropdown-menu .wa i { color: #25a35a; }

@media (max-width: 1240px) { .ag-week { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .ag-week { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .ag-week { grid-template-columns: 1fr; } }

/* Capa oscura al abrir el menu en movil */
.sidebar-scrim {
  position: fixed; inset: 0; background: rgba(21,32,43,.35);
  z-index: 55; display: none;
}
.sidebar-scrim.on { display: block; }
@media (min-width: 1025px) { .sidebar-scrim { display: none !important; } }

/* ── IMPRESION ─────────────────────────────────── */
@media print {
  .sidebar, .topbar, .actionbar, .row-actions, .toolbar { display: none !important; }
  .main-content { margin-left: 0; }
  .page-content { padding: 0; max-width: none; }
  .card, .mf-section { border-color: #ccc; break-inside: avoid; }
}


/* ── Lo que cabe en la casilla impresa ────────────────────────────────
   Es un tope de verdad: el campo no admite mas. El contador solo se
   ensena cuando queda poco, y en rojo al llegar, para que se vea que el
   campo no responde porque la casilla del formulario esta llena — no
   porque este averiado. */
.tope-aviso {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
  min-height: 14px;
  opacity: 0;
  transition: opacity .15s;
}
.tope-aviso.ver { opacity: 1; }
.tope-aviso.cerca { color: var(--warning, #b7791f); }
.tope-aviso.lleno { color: var(--danger, #c53030); font-weight: 600; }


/* ── EN QUE CONSULTORIO ESTOY ──────────────────────
   Va pegado al enlace de llamar, en el menu. El medico tiene que ver sin
   buscarlo lo que el paciente va a leer en la pantalla de la sala: si se
   cambio de consultorio y se le olvido decirlo, manda a la gente a una
   puerta equivocada. */
.sidebar-nav a .nav-marca {
  margin-left: auto; flex: none;
  padding: 1px 7px; border-radius: 20px;
  background: linear-gradient(180deg, var(--azul-500), var(--azul-700));
  color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  max-width: 88px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── AVISO DE SOPORTE ──────────────────────────────
   Cuando quien administra el producto entra en el panel de un cliente,
   la pantalla tiene que decirlo en todo momento: estar en la casa de
   otro no puede parecerse a estar en la propia. */
.aviso-suplantacion {
  display: flex; align-items: center; gap: 10px;
  margin: 0 28px; margin-top: 14px; padding: 10px 14px;
  background: var(--warn-soft); border: 1px solid #f0dcb8;
  border-radius: var(--r); font-size: 13.5px; color: #8f5c11;
}
.aviso-suplantacion i { font-size: 14px; }
.aviso-suplantacion a {
  margin-left: auto; font-weight: 600; color: #8f5c11;
  white-space: nowrap;
}
.aviso-suplantacion a:hover { text-decoration: underline; }

/* ── EL LOGOTIPO DEL ESTABLECIMIENTO ───────────────
   Se ve el que hay antes de cambiarlo: subir una imagen a ciegas y
   descubrir en la entrada que estaba torcida es peor que no subirla. */
.logo-caja { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.logo-vista {
  width: 200px; min-height: 120px; flex: none;
  display: grid; place-items: center; padding: 14px;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r);
}
.logo-vista img { max-width: 100%; max-height: 140px; }
.logo-vacio {
  display: grid; place-items: center; gap: 6px;
  color: var(--text-3); font-size: 12.5px;
}
.logo-vacio i { font-size: 22px; }

/* ── ELEGIR FORMATO DE DESCARGA ────────────────────
   Cada formato dice para que sirve: «JSON» a secas no le dice nada al
   medico que solo quiere abrir sus pacientes en Excel. */
.formatos { display: grid; gap: 10px; }
.formato {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--text);
}
.formato:hover {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--text);
}
.formato-icono {
  width: 38px; height: 38px; flex: none; border-radius: var(--r);
  display: grid; place-items: center; font-size: 16px;
  background: var(--surface-3); color: var(--text-2);
}
.formato:hover .formato-icono { background: #fff; color: var(--accent); }
.formato-nombre { font-size: 14px; font-weight: 600; }
.formato-que { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.formato-flecha { margin-left: auto; color: var(--text-3); font-size: 13px; }

/* ── CASILLA CON ETIQUETA AL LADO ──────────────────*/
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: auto; height: auto; margin: 0; }

/* ── LA ZONA DE LO QUE NO TIENE VUELTA ATRAS ───────
   Lo que borra para siempre va marcado y va al final. No por dramatismo:
   porque un boton de borrar que se parece a los demas se pulsa como los
   demas, y aqui lo que se borra son historias clinicas. */
.card.zona-peligro { border-color: #e7b3b1; }
.card.zona-peligro .card-header {
  background: var(--danger-soft); border-bottom-color: #e7b3b1;
}
.card.zona-peligro .card-header h3,
.card.zona-peligro .card-header h3 i { color: var(--danger); }

/* ══════════════════════════════════════════════════════════════
   AVISO DE SESIÓN A PUNTO DE CERRARSE

   Sale abajo a la derecha, un minuto antes. No tapa lo que se está
   escribiendo —que es justo lo que se perdería— y trae el botón que
   renueva sin salir de la página.
   ══════════════════════════════════════════════════════════════ */
#aviso-sesion {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 36px));
  animation: aviso-sesion-entra .25s ease-out;
}

@keyframes aviso-sesion-entra {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

.aviso-sesion-caja {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #e0a800;
  border-left: 5px solid #e0a800;
  background: #fffaf0;
  color: #4a3a10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.aviso-sesion-caja > i {
  font-size: 20px;
  color: #b8860b;
  flex: 0 0 auto;
}

.aviso-sesion-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
  line-height: 1.35;
  min-width: 0;
}

.aviso-sesion-texto b { font-size: 14px; }

#aviso-sesion-seguir {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: #1d6fa4;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#aviso-sesion-seguir:hover { background: #185b87; }

@media (max-width: 520px) {
  #aviso-sesion { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .aviso-sesion-caja { flex-wrap: wrap; }
  #aviso-sesion-seguir { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTADOS DE LA BÚSQUEDA DE PACIENTES

   Antes esto iba con estilos escritos dentro del HTML que genera
   main.js, y el resaltado al pasar el ratón con onmouseover. Aquí
   lo hace el CSS, que es su sitio: así la página no lleva ni una
   línea de JavaScript dentro del HTML y la política de seguridad
   puede prohibirlo del todo.
   ══════════════════════════════════════════════════════════════ */
.busca-pac-caja {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.busca-pac {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid #f0f3f8;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}

.busca-pac:last-child { border-bottom: 0; }
.busca-pac:hover      { background: #f7faff; }

.busca-pac-ini {
  width: 34px;
  height: 34px;
  background: #e8f4fd;
  color: #1d6fa4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.busca-pac-nombre { font-weight: 600; font-size: 13px; }
.busca-pac-meta   { font-size: 11px; color: #6b7c93; }
.busca-pac-flecha { margin-left: auto; color: #1d6fa4; font-size: 12px; }

/* Cada línea del catálogo CIE-10 en la caja de sugerencias */
.cie-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-3);
  font-size: 13px;
}

.cie-item:last-child { border-bottom: 0; }
.cie-item:hover      { background: var(--surface-2); }

/* Formulario 002: antecedentes y examen físico se apilan en pantallas pequeñas. */
.form-dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) {
  .form-dos-columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .actionbar { margin: 18px -12px -44px; padding: 10px 12px; }
}

@media (max-width: 640px) {
  .registros-form-table { width: 100%; table-layout: fixed; }
  .registros-form-table th, .registros-form-table td { padding: 8px 5px; overflow-wrap: anywhere; }
  .registros-form-table .nowrap { white-space: normal; }
  .registros-form-table .acciones { width: 92px; }
}

@media (max-width: 640px) {
  .topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .topbar > div:first-child { flex: 1 1 100%; min-width: 0; }
  .topbar-right { flex-wrap: wrap; }
}

/* El aviso de la pantalla no altera el documento clínico emitido. */
@media print { #alerta-alergias-atencion { display:none !important; } }

/* ── PANEL DEL MÉDICO: EL INICIO ─────────────────────────────────
   La misma voz que la entrada: una cabecera en azul noche con el saludo
   en la serif, el buscador y el trabajo de hoy; debajo, en papel, la
   agenda del día como línea de tiempo y, a un lado, el mes y Vertex.
   Todo con nombres propios (inicio-*, cita-*): no toca otras páginas. */
/* En el panel del médico, la franja «Panel médico» solo se muestra si
   lleva el botón de cambiar de panel: sin él repetía el título de la
   barra y le quitaba 69 px a cada pantalla. */
.panel-contexto[data-panel=medico]:not(:has(.panel-cambiar)),
.panel-contexto[data-panel=admin]:not(:has(.panel-cambiar)),
.panel-contexto[data-panel=sistema]:not(:has(.panel-cambiar)) { display: none; }

.inicio { display: flex; flex-direction: column; gap: 22px; }

.inicio-cabeza {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px;
  align-items: end;
  padding: 34px 36px 32px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(520px 300px at 88% 0%, rgba(26,127,232,.35), transparent 70%),
    radial-gradient(420px 260px at 0% 110%, rgba(34,211,238,.10), transparent 70%),
    var(--azul-950);
  box-shadow: 0 18px 40px rgba(7,29,58,.18);
}
.inicio-saludo { min-width: 0; max-width: 640px; }
.inicio-saludo h1 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.035em;
  margin: 0 0 6px;
}
.inicio-saludo > p { margin: 0 0 22px; color: var(--rail-texto); font-size: 14.5px; }

.inicio-buscar { display: flex; gap: 10px; }
.inicio-buscar .search-field { flex: 1; min-width: 0; }
.inicio-buscar .search-field input {
  height: 48px; font-size: 15px; border: 0; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 20px rgba(0,8,24,.25);
}
.inicio-buscar .search-field input:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.55); }
.inicio-btn-buscar {
  height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--cian); color: var(--azul-950); font-weight: 700;
}
.inicio-btn-buscar:hover { background: var(--cian-claro); }
.inicio-btn-buscar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.inicio-registrar {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--rail-texto); font-size: 13.5px; text-decoration: none;
}
.inicio-registrar:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* El trabajo de hoy: dos cifras grandes en la serif, sin tarjetas */
.inicio-hoy { display: flex; margin: 0; }
.inicio-hoy > div { padding: 0 0 0 28px; margin-left: 28px; border-left: 1px solid rgba(188,216,251,.22); }
.inicio-hoy > div:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.inicio-hoy dd {
  margin: 0; order: -1;
  font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums;
}
.inicio-hoy > div { display: flex; flex-direction: column; gap: 6px; }
.inicio-hoy dt { font-size: 12.5px; color: var(--rail-texto); white-space: nowrap; }
.inicio-logo {
  position: absolute; top: 22px; right: 26px; max-height: 42px; max-width: 150px;
  background: #fff; border-radius: 8px; padding: 6px;
}

/* ── Cuerpo: agenda y lado ── */
.inicio-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.inicio-agenda, .inicio-mes {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.inicio-agenda > header, .inicio-mes h2 { padding: 18px 22px; }
.inicio-agenda > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.inicio-agenda h2, .inicio-mes h2 {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px;
  letter-spacing: -.02em; color: var(--azul-900);
}

/* La línea del día: hora, punto, paciente y acciones */
.linea-dia { list-style: none; margin: 0; padding: 10px 0; position: relative; }
.cita {
  position: relative;
  display: grid; grid-template-columns: 58px 20px minmax(0, 1fr) auto;
  align-items: center; gap: 0 12px;
  padding: 12px 22px;
}
.cita + .cita::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 0;
  border-top: 1px solid #edf2f8;
}
.cita time { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--azul-900); }
/* El hilo vertical pasa por los puntos */
.cita-punto { position: relative; align-self: stretch; }
.cita-punto::before {
  content: ''; position: absolute; left: 50%; top: -12px; bottom: -12px; width: 2px;
  translate: -50% 0; background: var(--line);
}
.cita:first-child .cita-punto::before { top: 50%; }
.cita:last-child .cita-punto::before { bottom: 50%; }
.cita-punto::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-2);
}
.cita-confirmada .cita-punto::after { background: var(--azul-600); border-color: var(--azul-600); }
.cita-proxima .cita-punto::after {
  background: var(--cian); border-color: var(--cian);
  box-shadow: 0 0 0 5px rgba(34,211,238,.22);
}
.cita-cuerpo { min-width: 0; }
.cita-quien { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cita-quien b { font-size: 14.5px; color: var(--text); }
.cita-quien span { font-size: 12px; color: var(--text-3); }
.cita-cuerpo p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.cita-lado { display: flex; align-items: center; gap: 10px; }
.cita-marca {
  font-size: 11.5px; font-weight: 600; color: #0e7490;
  padding: 3px 9px; border-radius: 999px; background: #e0f8fc;
}
.cita-proxima { background: linear-gradient(to right, rgba(34,211,238,.07), transparent 60%); }

/* ── El lado: el mes y Vertex ── */
.inicio-lado { display: flex; flex-direction: column; gap: 22px; }
.inicio-mes h2 { padding-bottom: 6px; }
.inicio-mes dl { margin: 0; padding: 4px 22px 14px; }
.inicio-mes dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0;
}
.inicio-mes dl > div + div { border-top: 1px solid #edf2f8; }
.inicio-mes dt { font-size: 13.5px; color: var(--text-2); }
.inicio-mes dd {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 26px;
  color: var(--azul-900); letter-spacing: -.02em;
}
.inicio-vertex {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 18px 18px 16px; border-radius: 14px; text-decoration: none;
  color: #fff; background:
    radial-gradient(260px 160px at 0% 0%, rgba(34,211,238,.18), transparent 70%),
    var(--azul-950);
  box-shadow: 0 12px 28px rgba(7,29,58,.16);
}
.inicio-vertex img { flex: none; width: 48px; height: 48px; }
.inicio-vertex b { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.inicio-vertex p { margin: 4px 0 10px; font-size: 13px; line-height: 1.5; color: var(--rail-texto); }
.inicio-vertex-ir { font-size: 13px; font-weight: 600; color: var(--cian-claro); }
.inicio-vertex:hover .inicio-vertex-ir { text-decoration: underline; text-underline-offset: 3px; }
.inicio-vertex:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

/* ── Pantallas medianas y móviles ── */
@media (max-width: 1100px) {
  .inicio-cuerpo { grid-template-columns: 1fr; }
  .inicio-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 760px) {
  .inicio-cabeza { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 14px; }
  .inicio-logo { display: none; }
  .inicio-buscar { flex-direction: column; }
  .inicio-btn-buscar { width: 100%; }
  .inicio-hoy dd { font-size: 40px; }
  .inicio-lado { grid-template-columns: 1fr; }
  .inicio-agenda > header, .inicio-mes h2 { padding: 16px 16px; }
  .inicio-mes dl { padding: 4px 16px 12px; }
  /* La cita en dos pisos: arriba hora y paciente; abajo estado y atender */
  .cita { grid-template-columns: 48px 16px minmax(0, 1fr); padding: 12px 16px; row-gap: 10px; }
  .cita + .cita::before { left: 16px; right: 16px; }
  .cita-lado { grid-column: 3; flex-wrap: wrap; }
  .cita-lado .btn { margin-left: auto; }
  .cita-punto { grid-row: span 2; }
}
.inicio-vertex .nav-marca {
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px; background: var(--azul-600); color: #fff;
}

/* ── PACIENTES Y AGENDA: LA MISMA CABECERA ───────────────────────
   Pacientes usa la cabecera del inicio con una sola columna. La agenda
   mete su barra (flechas, mes, vistas) y sus cifras en el mismo azul
   noche; el calendario, debajo, en papel. */

.pac-cabeza { grid-template-columns: 1fr; margin-bottom: 22px; }
.pac-cabeza .inicio-saludo { max-width: 760px; }

.ag-cabeza {
  margin-bottom: 20px; padding: 22px 26px 18px;
  border-radius: 16px; color: #fff;
  background:
    radial-gradient(520px 260px at 90% 0%, rgba(26,127,232,.32), transparent 70%),
    var(--azul-950);
  box-shadow: 0 18px 40px rgba(7,29,58,.16);
}
.ag-cabeza .ag-barra { margin-bottom: 14px; }
.ag-cabeza .ag-titulo {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; line-height: 1.15;
}
.ag-cabeza .segmented {
  background: rgba(255,255,255,.06); border-color: rgba(188,216,251,.22);
}
.ag-cabeza .segmented a, .ag-cabeza .segmented button {
  color: var(--rail-texto); border-right-color: rgba(188,216,251,.18);
}
.ag-cabeza .segmented a:hover { background: rgba(255,255,255,.10); color: #fff; }
.ag-cabeza .segmented .on { background: var(--cian); color: var(--azul-950); }
.ag-cabeza .segmented a:focus-visible { outline: 2px solid var(--cian); outline-offset: -2px; }
.ag-cabeza .ag-cifras {
  margin: 0; padding: 14px 0 0; border-bottom: 0;
  border-top: 1px solid rgba(188,216,251,.16);
  color: var(--rail-texto); font-size: 13.5px;
}
.ag-cabeza .ag-cifras b {
  color: #fff; font-family: var(--serif); font-size: 20px; margin-right: 3px;
}
.ag-cabeza .ag-cifras .c-warn b { color: #fcd34d; }
.ag-cabeza .ag-cifras .c-ok b { color: #6ee7b7; }
.ag-cabeza .ag-cifras .c-mal b { color: #fca5a5; }
.ag-cabeza .ag-cifras .ag-ir-hoy { color: var(--cian-claro); font-weight: 600; }

/* El calendario: papel, esquinas del resto del panel y hoy en cian */
.ag-mes, .ag-week { border-radius: 14px; }
.ag-mes-cab span { letter-spacing: .02em; text-transform: none; font-size: 12px; }
.ag-celda.hoy { background: #ecfbfe; box-shadow: inset 0 0 0 2px rgba(34,211,238,.55); }
.ag-celda.hoy .ag-celda-num { background: var(--azul-950); }
.ag-celda-num { font-variant-numeric: tabular-nums; }
.ag-chip { border-radius: 6px; }

/* Resultados de pacientes: la fila, con aire y la identidad en la serif */
.pacientes-listado { border-radius: 14px; }
.pacientes-tabla .cell-id .t b { font-family: var(--serif); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }

@media (max-width: 760px) {
  .ag-cabeza { padding: 18px 16px 14px; border-radius: 14px; }
  .ag-cabeza .ag-titulo { flex-basis: 100%; order: -1; }
}
/* Un solo botón de limpiar: el nuestro, no el que añade el navegador */
.inicio-buscar input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* Cita en lista, en el móvil: arriba punto, hora y paciente; abajo el
   estado y las acciones. En una sola fila se aplastaba el texto y el
   estado quedaba encima del motivo. */
@media (max-width: 640px) {
  .ag-fila { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px; }
  .ag-fila .quien { flex: 1 1 calc(100% - 90px); }
  .ag-fila .row-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .ag-fila > .badge { margin-left: 70px; }
}
/* La franja, cuando se muestra en el panel del médico (administrador que
   también atiende), en una sola línea: el título y el botón de cambiar */
.panel-contexto[data-panel=medico]:has(.panel-cambiar),
.panel-contexto[data-panel=admin]:has(.panel-cambiar) { padding: 5px 24px; }
.panel-contexto[data-panel=medico]:has(.panel-cambiar) span,
.panel-contexto[data-panel=admin]:has(.panel-cambiar) span { display: none; }
.panel-contexto[data-panel=medico] .panel-cambiar { padding-top: 5px; padding-bottom: 5px; }
/* «Atender» es una sola pantalla de elegir: sin el margen de 56 px de
   abajo (pensado para páginas largas) cabe entera en un portátil de
   1280 x 720, también con el aviso de alergias y el cambio de panel. */
.page-content:has(> .atender) { padding-top: 14px; padding-bottom: 10px; }
.page-content > .atender .atender-encabezado { margin-bottom: 10px; }
.page-content:has(> .atender) > .alert { margin-bottom: 10px; }

/* ── HISTORIA CLÍNICA: LA FICHA Y EL HISTORIAL ──────────────────
   La ficha del paciente es la cabecera azul noche del panel: nombre en
   la serif, datos en una línea y, lo primero, Atender en cian. Debajo,
   dentro de la misma ficha, las alergias y el resumen clínico en papel:
   es información de seguridad y va con el contraste de siempre.
   Solo .ficha: otras páginas usan .patient-card y no cambian. */
.patient-card.ficha {
  position: relative; overflow: hidden;
  padding: 26px 28px 0; border: 0; border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(26,127,232,.32), transparent 70%),
    var(--azul-950);
  box-shadow: 0 18px 40px rgba(7,29,58,.16);
}
.ficha-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--azul-950); background: var(--cian-claro);
}
.ficha .patient-name {
  margin: 0; color: #fff; font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.03em;
}
.ficha .patient-meta { color: var(--rail-texto); font-size: 13.5px; margin-top: 7px; gap: 6px 18px; }
.ficha .meta-item i { color: var(--rail-tenue); }
.ficha .btn-wa { color: #4ade80; }
.ficha-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-acciones form { margin: 0; }
.ficha-atender {
  height: 44px; padding: 0 20px; border: 0; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cian); color: var(--azul-950); font-weight: 700;
}
.ficha-atender:hover { background: var(--cian-claro); color: var(--azul-950); }
.ficha-atender:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ficha .ficha-nueva {
  height: 44px; border-radius: 10px;
  background: rgba(255,255,255,.06); color: var(--rail-texto);
  border-color: rgba(188,216,251,.25);
}
.ficha .ficha-nueva:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Alergias y resumen: una banda de papel al pie de la ficha */
.ficha .clinico {
  margin: 22px -28px 0; border: 0; border-radius: 0;
  border-top: 1px solid rgba(188,216,251,.18);
}
.ficha .clinico-alergias { padding: 13px 28px; font-size: 14px; }
.ficha .clinico-alergias.alerta { font-size: 14.5px; }
.ficha .clinico-resumen > summary { padding: 12px 28px; }
.ficha .clinico-bloque { padding: 13px 28px; }

/* El historial: una línea de tiempo, los días en la serif */
#historial { border-radius: 14px; }
#historial .card-header h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -.02em; color: var(--azul-900); }
#historial .curso-dia {
  font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--azul-900);
  background: var(--surface); padding-top: 14px;
}
#historial .curso-fila { position: relative; }
#historial .curso-icono {
  position: relative; z-index: 1;
  background: var(--azul-50); color: var(--azul-600);
  box-shadow: 0 0 0 4px var(--surface);
}
#historial .curso-fila:hover .curso-icono { box-shadow: 0 0 0 4px var(--surface-2); }
#historial .curso-cod {
  font-weight: 600; color: var(--azul-600); background: var(--azul-50);
  padding: 1px 6px; border-radius: 5px;
}

@media (max-width: 760px) {
  .patient-card.ficha { padding: 20px 18px 0; border-radius: 14px; }
  .ficha-avatar { width: 44px; height: 44px; font-size: 16px; }
  .ficha-acciones { width: 100%; }
  .ficha-atender { flex: 1; justify-content: center; }
  .ficha .clinico { margin: 18px -18px 0; }
  .ficha .clinico-alergias, .ficha .clinico-resumen > summary, .ficha .clinico-bloque { padding-left: 18px; padding-right: 18px; }
  /* Cada atención: arriba hora, icono y qué fue; abajo quién y acciones.
     Antes los botones quedaban por encima del nombre del formulario. */
  #historial .curso-fila {
    display: grid; grid-template-columns: 44px 30px minmax(0, 1fr);
    align-items: center; gap: 6px 10px;
  }
  #historial .curso-que { grid-column: 3; grid-row: 1; }
  #historial .curso-quien { grid-column: 3; grid-row: 2; }
  #historial .curso-fila > .row-actions { grid-column: 3; grid-row: 3; }
  #historial .curso-hora { grid-row: 1; }
  #historial .curso-icono { grid-row: 1; }
}

/* ── ATENDER: ELEGIR FORMULARIO ──────────────────────────────────
   El paciente, en la franja azul noche; debajo, los formularios como
   fichas con el código en la serif. Tiene que caber entero en un
   portátil de 1280 x 720 (prueba_historial_navegador): la franja no
   crece respecto de la de antes. */
.atender-encabezado {
  border: 0; border-radius: 14px; padding: 12px 18px;
  color: #fff;
  background:
    radial-gradient(420px 160px at 95% 0%, rgba(26,127,232,.30), transparent 70%),
    var(--azul-950);
}
.atender-encabezado h1 {
  color: var(--rail-texto); font-family: inherit; font-size: 12.5px; font-weight: 500;
  margin: 0 0 1px; letter-spacing: 0;
}
.atender-paciente b {
  font-family: var(--serif); font-size: 21px; font-weight: 600; color: #fff; letter-spacing: -.02em;
}
.atender-paciente span { color: var(--rail-texto); }
.atender-encabezado .btn-secondary {
  background: rgba(255,255,255,.06); color: var(--rail-texto); border-color: rgba(188,216,251,.25);
}
.atender-encabezado .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
.atender-grupo h2 { color: var(--azul-900); }
.atender-formulario { border-radius: 10px; transition: border-color .12s, box-shadow .12s; }
.atender-formulario:hover, .atender-formulario:focus-visible {
  border-color: var(--azul-300); box-shadow: 0 6px 16px rgba(13,99,200,.10);
}
.atender-codigo {
  font-family: var(--serif); font-size: 16px; color: var(--azul-600);
  min-width: 2.1em; font-variant-numeric: lining-nums tabular-nums;
}
.atender-formulario:hover .atender-codigo { color: var(--azul-900); }

/* Con los formularios de 2021 son más de cuarenta: el selector sigue
   cabiendo entero en un portátil de 1366 x 768 (prueba_historial_navegador)
   en fichas de una línea, en tantas columnas como quepan. La explicación
   de cada formulario queda para el lector de pantalla y para el título
   que sale al pasar el ratón. */
.atender { max-width: 1320px; }
.page-content:has(> .atender) { padding-top: 10px; }
.page-content > .atender .atender-encabezado { padding: 9px 18px; margin-bottom: 8px; }
.atender-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 72%; }
.atender-acciones .btn-sm { padding: 4px 9px; font-size: 12px; }
/* «Elegir formulario» lo dice ya la página: queda para el lector de
   pantalla y la franja gana una línea. */
.page-content > .atender .atender-encabezado h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.atender-encabezado .atender-otros {
  display: contents; margin: 0; padding: 0; border: 0;
}
.atender-encabezado .atender-otros h2 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
@media (max-width: 640px) { .atender-acciones { max-width: none; justify-content: flex-start; } }
/* El aviso de alergias, en el selector, en una sola línea: sigue rojo y
   arriba, pero no empuja los formularios fuera de la pantalla. */
.page-content:has(> .atender) > #alerta-alergias-atencion {
  padding: 7px 14px; margin-bottom: 8px; align-items: center;
}
.page-content:has(> .atender) > #alerta-alergias-atencion br { display: none; }
.page-content:has(> .atender) > #alerta-alergias-atencion strong::after { content: ': '; }
.page-content:has(> .atender) > #alerta-alergias-atencion .text-small::before { content: ' · '; }
.atender-grupos { columns: 4 230px; column-gap: 12px; }
/* Un grupo puede seguir en la columna siguiente (si no, los de siete
   formularios dejan columnas cojas); el título nunca se queda solo al pie. */
.atender-grupo { margin-bottom: 7px; break-inside: auto; }
.atender-grupo h2 { margin-bottom: 3px; font-size: 12.5px; break-after: avoid; }
.atender-formulario { break-inside: avoid; }
.atender-formulario { min-height: 0; padding: 2px 8px; gap: 6px; border-radius: 8px; }
.atender-formulario + .atender-formulario { margin-top: 3px; }
.atender-codigo { font-size: 13.5px; min-width: 2.4em; }
.atender-nombre b { font-size: 12.5px; line-height: 1.22; font-weight: 600; }
.atender-nombre small {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 640px) {
  /* En el teléfono se desplaza: ahí sí cabe la explicación. */
  .atender-formulario { padding: 8px 10px; }
  .atender-nombre small { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
}

/* ── FORMULARIOS DEL MSP: LA CARROCERÍA ──────────────────────────
   Solo el marco: la franja del paciente, los títulos de sección y la
   barra de guardar. Los campos, sus nombres y sus scripts no cambian.
   La franja del paciente es azul noche; la del 008 (emergencia) y la del
   053 (referencia) conservan su color, que viene en línea y significa. */
.page-content > .patient-card:not(.ficha) {
  border: 0; border-radius: 14px; padding: 16px 22px;
  color: #fff; background:
    radial-gradient(460px 180px at 95% 0%, rgba(26,127,232,.30), transparent 70%),
    var(--azul-950);
  box-shadow: 0 14px 32px rgba(7,29,58,.14);
}
.page-content > .patient-card:not(.ficha) .patient-name {
  font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: #fff;
}
.page-content > .patient-card:not(.ficha) .patient-meta,
.page-content > .patient-card:not(.ficha) .meta-item i { color: rgba(255,255,255,.78); }
.page-content > .patient-card:not(.ficha) .btn-secondary {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28);
}
.page-content > .patient-card:not(.ficha) .btn-secondary:hover { background: rgba(255,255,255,.16); }

.mf-section { border-radius: 12px; }
.mf-section-header { background: var(--surface); position: relative; padding-left: 20px; }
.mf-section-header::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--cian);
}
.mf-section-header h3 { color: var(--azul-900); }
.mf-section-header i { color: var(--azul-600) !important; }

/* La barra de guardar: azul noche, Guardar en cian. Misma altura que
   antes (vertex.css sube su botón 61 px por encima de ella). */
.actionbar {
  background: rgba(7,29,58,.94); border-top: 1px solid rgba(34,211,238,.35);
  -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px);
}
.actionbar .btn-primary { background: var(--cian); color: var(--azul-950); border-color: var(--cian); font-weight: 700; }
.actionbar .btn-primary:hover { background: var(--cian-claro); border-color: var(--cian-claro); }
.actionbar .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.26); }
.actionbar .btn-secondary:hover { background: rgba(255,255,255,.16); color: #fff; }
.actionbar .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── NUEVO / EDITAR PACIENTE ── */
.alta-cabeza {
  padding: 26px 30px; border-radius: 16px; color: #fff;
  background:
    radial-gradient(520px 240px at 92% 0%, rgba(26,127,232,.32), transparent 70%),
    var(--azul-950);
  box-shadow: 0 18px 40px rgba(7,29,58,.16);
}
.alta-cabeza h1 {
  color: #fff; font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.03em;
}
.alta-cabeza h1::after { display: none; }
.alta-cabeza p { color: var(--rail-texto); margin: 6px 0 0; }
.alta-cabeza p strong { color: var(--cian-claro); }
.page-content:has(.alta-cabeza) .card { border-radius: 14px; }
.page-content:has(.alta-cabeza) .card-header h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--azul-900); letter-spacing: -.01em; }
.page-content:has(.alta-cabeza) .card-header h3 i { color: var(--azul-600); }
.alta-barra .btn-lg { height: 46px; }
@media (max-width: 760px) {
  .alta-cabeza { padding: 20px 18px; border-radius: 14px; }
}
/* Las franjas de sección que traen su propio color (008 en rojo, las
   respuestas en verde) lo conservan, sin el acento cian; sobre el rojo
   del 008 el título va en blanco: en oscuro no se leía. */
.mf-section-header[style]::before { display: none; }
.mf-section-header[style*="--danger)"] h3 { color: #fff; }

/* ── PROCEDIMIENTOS ──────────────────────────────────────────────
   Catálogo y registro. En el móvil, una columna con el registro primero:
   antes la rejilla de 1fr + 360 px desbordaba la página a 721 px. */
.proc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.proc-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .proc-layout { grid-template-columns: 1fr; }
  .proc-layout > :last-child { order: -1; }
}
.page-content:has(.proc-layout) .card { border-radius: 14px; }
.page-content:has(.proc-layout) .card-header h3 {
  font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--azul-900); letter-spacing: -.01em;
}
.page-content:has(.proc-layout) .card-header h3 i { color: var(--azul-600); }

/* Imágenes lleva la columna de subir en 340 px */
.proc-layout.lado-340 { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 900px) { .proc-layout.lado-340 { grid-template-columns: 1fr; } }
.page-content:has(.proc-layout) .card-header h3 {
  font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--azul-900); letter-spacing: -.01em;
}

/* Una barra de guardar dentro de una página estrecha (ajustes de Vertex)
   no llega a los bordes: flota con sus esquinas en vez de cortarse a
   media pantalla. */
.page-content > div[style*="max-width"] .actionbar { margin: 20px 0 16px; border-radius: 12px; }


/* ── PANEL DEL ADMINISTRADOR ─────────────────────────────────────
   La misma voz que el del médico. El resumen reutiliza la cabecera y la
   línea del día del inicio; las demás páginas llevan su título en la
   cabecera azul noche. Solo bajo data-panel=admin o clases adm-*. */
.adm-principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.adm-inicio .inicio-agenda > header .badge { font-size: 12px; }
.adm-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
.adm-enlace {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--rail-texto); font-size: 13.5px; text-decoration: none;
}
.adm-enlace:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.adm-enlace:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 4px; }
.adm-acciones .inicio-btn-buscar { display: inline-flex; align-items: center; gap: 8px; height: 44px; text-decoration: none; }

.adm-lista { list-style: none; margin: 0; padding: 6px 0; }
.adm-lista li {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center; gap: 4px 16px; padding: 11px 22px;
}
.adm-lista li + li { border-top: 1px solid #edf2f8; }
.adm-lista-quien b { display: block; font-size: 14px; color: var(--text); }
.adm-lista-quien span { font-size: 12px; color: var(--text-3); }
.adm-lista-medico { font-size: 13.5px; color: var(--text-2); }
.adm-lista-cuando { font-size: 13px; color: var(--text-2); white-space: nowrap; }

.adm-med-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-medicos { list-style: none; margin: 0; padding: 0 22px 14px; }
.adm-medicos li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; }
.adm-medicos li + li { border-top: 1px solid #edf2f8; }
.adm-medicos .avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--azul-50); color: var(--azul-600);
}
.adm-medicos b { display: block; font-size: 14px; color: var(--text); }
.adm-medicos span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.adm-vacio { color: var(--text-3); font-size: 13.5px; }

/* Las demás páginas: el título en la cabecera azul noche */
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header:not(.con-marca) {
  padding: 24px 28px; border-radius: 16px; color: #fff;
  background:
    radial-gradient(520px 240px at 92% 0%, rgba(26,127,232,.32), transparent 70%),
    var(--azul-950);
  box-shadow: 0 18px 40px rgba(7,29,58,.16);
}
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header h1 {
  color: #fff; font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em;
}
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header h1::after { display: none; }
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header p { color: var(--rail-texto); }
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header .btn-primary {
  background: var(--cian); border-color: var(--cian); color: var(--azul-950); font-weight: 700;
}
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header .btn-primary:hover { background: var(--cian-claro); border-color: var(--cian-claro); }
:is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .card { border-radius: 14px; }
.adm-desactivar:hover { color: var(--danger); border-color: var(--danger); }
.adm-activar:hover { color: var(--ok); border-color: var(--ok); }

@media (max-width: 760px) {
  .adm-lista li { grid-template-columns: 1fr; padding: 11px 16px; }
  .adm-medicos { padding: 0 16px 12px; }
  :is(.panel-contexto[data-panel=admin], .panel-contexto[data-panel=sistema]) ~ .page-content .page-header:not(.con-marca) { padding: 20px 18px; border-radius: 14px; }
}
/* Una tabla de dos columnas dentro de una tarjeta (el plan en
   Configuración) parte sus líneas en vez de ensanchar la página: en el
   móvil desbordaba a 548 px. */
.card-body > table.data-table td { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 620px) { .card-body > table.data-table td { padding-left: 10px; padding-right: 10px; } }
/* El botón «Nuevo» dentro de un título en la serif, con la letra de los botones */
.adm-med-titulo .btn { font-family: var(--sans); letter-spacing: 0; }
/* …y sin el mínimo de 520 px del móvil, que es para las tablas que van
   dentro de un .table-container con su propio desplazamiento */
.card-body > table.data-table { min-width: 0; }

/* En el móvil la cabecera del inicio (médico y administrador) no puede
   ensancharse por sus cifras: columna mínima 0 y cifras que se reparten */
@media (max-width: 760px) {
  .inicio-cabeza { grid-template-columns: minmax(0, 1fr); }
  .inicio-hoy { flex-wrap: wrap; row-gap: 12px; }
  .inicio-hoy > div { padding-left: 16px; margin-left: 16px; }
  .adm-acciones .inicio-btn-buscar { width: 100%; justify-content: center; }
}

/* ── LLAMAR, MIS DATOS, VERTEX ──────────────────────────────────
   La cabecera azul noche de alta-cabeza; tarjetas con la serif. */
.page-content:has(.alta-cabeza) .card-header h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--azul-900); letter-spacing: -.01em; }
.page-content:has(.alta-cabeza) .card-header h3 i { color: var(--azul-600); }
.alta-cabeza { margin-bottom: 20px; }
.vx-cabeza-pag { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
.vx-cabeza-pag .vx-cabeza-orbe { grid-row: span 2; width: 64px; height: 64px; }
.vx-cabeza-pag .vx-cabeza-orbe.dormido { filter: grayscale(.85) brightness(.8); }
.vx-cabeza-pag h1 { margin: 0; }
.vx-estado-punto { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.vx-estado-punto.on { background: var(--ok); box-shadow: 0 0 0 5px rgba(15,122,82,.14); }
.vx-estado-punto.off { background: var(--text-3); box-shadow: 0 0 0 5px rgba(119,136,160,.16); }
.actionbar.vx-guardar { position: static; margin: 20px 0 8px; border-radius: 12px; }
@media (max-width: 760px) { .vx-cabeza-pag .vx-cabeza-orbe { width: 48px; height: 48px; } }
/* Las tablas de conteo de dos columnas (Mis datos, Descargar la base) no
   necesitan el mínimo de 520 px del móvil: con él la cantidad quedaba
   oculta a la derecha y no se veía cuántos registros se llevan. */
.data-table.tabla-conteo { min-width: 0; }

/* ── Verificación en dos pasos ─────────────────────────────────────── */
.login-enlace-boton {
  border: none; background: none; padding: 0; font: inherit; font-size: 13.5px;
  color: var(--azul-600); text-decoration: none; cursor: pointer;
}
.login-enlace-boton:hover { text-decoration: underline; text-underline-offset: 3px;
}
.sidebar-cuenta { display: block; }
.mfa-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.mfa-pasos > li {
  position: relative; padding: 0 0 22px 48px; counter-increment: paso;
}
.mfa-pasos > li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul-900); color: #fff; font-weight: 600; font-size: 14px;
}
.mfa-pasos h3 { margin: 4px 0 6px; font-size: 16px; }
.mfa-qr {
  display: inline-block; padding: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
.mfa-qr img { display: block; image-rendering: pixelated; }
.mfa-clave {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.mfa-clave code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: .06em; padding: 8px 12px;
  background: var(--surface-2, #f4f6fa); border: 1px solid var(--line); border-radius: var(--r-sm);
  user-select: all;
}
.mfa-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mfa-linea input { max-width: 220px; }
.mfa-codigos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.mfa-codigos code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; letter-spacing: .08em; text-align: center; padding: 10px 8px;
  background: var(--surface-2, #f4f6fa); border: 1px solid var(--line); border-radius: var(--r-sm);
  user-select: all;
}

/* ── Passkeys: Touch ID / Windows Hello ───────────────────────────── */
.login-passkey[hidden] { display: none; }
.login-o {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  color: var(--text-3); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
}
.login-o::before, .login-o::after { content: ""; flex: 1; height: 1px; background: var(--border, #dbe3ee); }
.btn-passkey {
  width: 100%; min-height: 50px; padding: 8px 14px; border-radius: 10px;
  border: 1.5px solid var(--azul-900); background: #fff; color: var(--azul-900);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color .15s, border-color .15s;
}
.btn-passkey small { font-weight: 500; font-size: 13px; color: var(--text-2); }
.btn-passkey .login-ico { width: 22px; height: 22px; flex: none; color: var(--azul-700); }
.btn-passkey:hover { background: #f1f6fc; border-color: var(--azul-700); }
.btn-passkey:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.btn-passkey:disabled { opacity: .65; cursor: progress; }
.login-passkey-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.passkey-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.passkey-lista li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--border, #e5e9f0);
}
.passkey-lista li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.passkey-lista li .text-muted { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .btn-passkey { transition: none; } }
.login-passkey-ayuda {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 10px;
  background: #eef6ff; border: 1px solid #cfe2fb; font-size: 13.5px; line-height: 1.5; color: var(--text-1, #1b2a41);
}
.login-passkey-ayuda[hidden] { display: none; }
.login-passkey-ayuda p { margin: 0 0 6px; }
.login-passkey-crear { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 18px; }
.login-passkey-crear .login-ico { width: 20px; height: 20px; flex: none; color: var(--azul-700); }
.passkey-nueva { max-width: 520px; margin: 24px auto; text-align: center; }
.passkey-nueva .card-body { padding: 32px 28px; }
.passkey-nueva-ico { font-size: 44px; color: var(--azul-700); margin-bottom: 10px; }
.passkey-nueva h1 { font-size: 24px; margin: 0 0 10px; }
.passkey-nueva-etiqueta { display: block; text-align: left; font-size: 13px; margin: 18px 0 6px; }
.passkey-nueva input { width: 100%; margin-bottom: 14px; }
.passkey-nueva #btn-passkey-anadir { width: 100%; justify-content: center; }
.passkey-nueva-luego { margin-top: 10px; }