/* ============================================================
   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;
}

.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: absolute; right: 0; top: calc(100% + 4px);
  min-width: 178px; padding: 5px;
  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; }

/* ── 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; }
}

/* 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: 2.6em; 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.

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

/* 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: 290px; 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(3, 1fr);
}
.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 {
  min-width: 440px;
  max-width: min(78vw, 760px);
}
.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; margin-top: 16px;
  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);
}

/* ── PANTALLA DE ENTRADA ───────────────────────── */
/* Dos mitades: el centro a la izquierda, el formulario a la derecha. A
   partir de 900 px de ancho hay sitio para las dos; por debajo se apilan y
   la izquierda se queda solo con el logotipo, que en un movil es lo unico
   que aporta. */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 560px at 12% -12%, #dfeaf3 0%, transparent 62%),
    radial-gradient(900px 500px at 108% 112%, #e6eff6 0%, transparent 58%),
    var(--bg);
}

.login-panel {
  width: 100%; max-width: 960px;
  display: grid; grid-template-columns: 46% 54%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(27,58,82,.18), 0 3px 10px rgba(27,58,82,.08);
  overflow: hidden;
}

/* Mitad izquierda: quien es el centro.
   En azul noche. Es la primera pantalla que ve un cliente y la unica que
   ve todos los dias su personal: si tiene que transmitir algo, es que
   detras hay una empresa, no una hoja de calculo con formulario. */
.login-marca {
  padding: 44px 40px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(700px 420px at 20% 0%, #2b5b7d 0%, transparent 70%),
    linear-gradient(165deg, #24506f 0%, var(--rail) 100%);
  color: #fff;
}
.login-marca-logo {
  width: 100%; max-width: 250px; height: auto; display: block;
}
/* El logotipo de un centro puede venir con fondo blanco; sobre el azul
   noche se le da su propia superficie clara para que no parezca un
   recorte mal pegado. */
.login-marca-logo:not(.es-marca) {
  background: #fff; border-radius: 10px; padding: 12px;
  max-width: 190px;
}
.login-marca h1 {
  font-family: var(--serif);
  font-size: 24px; line-height: 1.25; margin: 28px 0 10px; color: #fff;
  letter-spacing: -.015em;
}
.login-marca-texto {
  font-size: 13.5px; line-height: 1.6; color: var(--rail-texto); margin: 0;
}
.login-marca-lista {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.login-marca-lista li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13px; color: var(--rail-texto);
}
.login-marca-lista i {
  width: 27px; height: 27px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08);
  border: 1px solid var(--rail-linea);
  color: #fff; font-size: 11.5px;
}
.login-marca-pie {
  margin: auto 0 0; padding-top: 28px;
  border-top: 1px solid var(--rail-linea);
  font-size: 11.5px; color: var(--rail-tenue);
}

/* Mitad derecha: entrar y nada mas */
.login-acceso {
  padding: 44px 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
}
.login-acceso-caja { width: 100%; max-width: 340px; }

.login-titulo { margin-bottom: 26px; }
.login-titulo h2 {
  font-family: var(--serif); font-size: 23px; margin: 0 0 5px;
  letter-spacing: -.012em;
}
.login-titulo p { font-size: 13.5px; color: var(--text-2); margin: 0; }

.login-input { position: relative; }
.login-input > i:first-child {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; pointer-events: none;
}
.login-input input { padding-left: 34px; height: 42px; }
.login-ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  color: var(--text-3); font-size: 14px; border-radius: var(--r-sm);
}
.login-ojo:hover { color: var(--text-2); background: var(--surface-3); }

.login-nota {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--text-3);
}
.login-nota i { color: var(--ok); margin-right: 4px; }

@media (max-width: 900px) {
  .login-page { padding: 16px; align-items: flex-start; }
  .login-panel { grid-template-columns: 1fr; max-width: 430px; margin: 24px auto; }
  .login-marca {
    padding: 30px 28px 26px; text-align: center;
    border-right: none;
  }
  .login-marca-logo { margin: 0 auto; max-width: 230px; }
  .login-marca-logo:not(.es-marca) { max-width: 150px; }
  /* En un movil sobra el discurso: lo que hace falta es entrar */
  .login-marca h1, .login-marca-texto,
  .login-marca-lista, .login-marca-pie { display: none; }
  .login-acceso { padding: 28px 28px 32px; }
}

.btn-login {
  width: 100%; height: 44px; border: none; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.btn-login:hover { background: var(--accent-dark); }
.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;
}

/* ── LA MARCA DEL PRODUCTO EN LA ENTRADA ───────────
   El logotipo de un establecimiento es una imagen cuadrada que puede
   llegar a 250 px de ancho; la marca del sistema es una firma apaisada
   y a ese ancho se ve desproporcionada. Se le da su propio tope. */
.login-marca-logo.es-marca { max-width: 230px; }

/* ── 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); }