/* Tipografía autohospedada (sin llamadas a Google en cada carga -- evita
   filtrar a un tercero que alguien entró al expediente digital). */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/Poppins-Bold.ttf') format('truetype'); }

* { box-sizing: border-box; }
:root {
  --navy: #0A1F54;
  --navy-dark: #071640;
  --gold: #D4AF37;
  --gold-light: #F0C814;
  --accent-teal: #0D9488;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Poppins', 'Inter', 'Segoe UI', Arial, sans-serif;
}
body {
  font-family: var(--font-body);
  background: #F0F2F8;
  color: #1F2937;
  margin: 0;
}
header {
  background: var(--navy);
  color: white;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--gold);
}
header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; }
header .brand img { height: 40px; width: 40px; border-radius: 50%; background: white; }
header .brand-text { line-height: 1.15; }
header .brand-text .name { font-weight: 700; font-size: 13px; font-family: var(--font-heading); }
header .brand-text .sub { font-size: 9px; opacity: .8; letter-spacing: .5px; }
header nav { display: flex; align-items: center; }
header nav a { margin-left: 16px; font-size: 12px; opacity: .85; color: white; text-decoration: none; }
.menu-toggle { display: none; background: none; border: none; color: white; cursor: pointer; padding: 6px; margin: 0; }
.menu-toggle:hover { background: none; opacity: .8; }
header nav a:hover { color: var(--gold-light); opacity: 1; }
header nav a.active { opacity: 1; font-weight: 700; border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
header nav a.nav-icon { display: inline-flex; align-items: center; opacity: .75; }
header nav a.nav-icon:hover { opacity: 1; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; padding: 4px 10px 4px 4px; background: rgba(255,255,255,.08); border-radius: 20px; }
.user-chip-text { font-size: 10px; line-height: 1.3; color: white; }
.user-chip-rol { opacity: .65; text-transform: capitalize; font-size: 9px; }
/* Ancho basado en PORCENTAJE del navegador (no un numero fijo) -- crece y
   encoge junto con la ventana de verdad, con un tope generoso para que en
   monitores enormes el texto no quede ilegible de tan ancho. */
main { width: 100%; max-width: 1800px; margin: 24px auto; padding: 0 24px; }
@media (min-width: 1300px) {
  main { padding: 0 32px; }
}

/* Tabla con scroll horizontal seguro dentro de su tarjeta -- red de seguridad
   si el contenido es mas ancho que la pantalla (celulares chicos), en vez de
   romper el layout de toda la pagina. No afecta tarjetas sin tabla. */
.card { overflow-x: auto; }
.card {
  background: white;
  border: 1px solid #DDE3F0;
  border-top: 3px solid var(--navy);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
h1 { color: var(--navy); font-size: 19px; font-family: var(--font-heading); font-weight: 700; }
h2 { color: var(--navy); font-size: 15px; font-family: var(--font-heading); font-weight: 600; }
h3 { color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--gold); padding-bottom: 4px; margin-top: 24px; font-family: var(--font-heading); font-weight: 600; }
label { display: block; font-size: 11px; font-weight: 600; color: #374151; margin-top: 12px; margin-bottom: 4px; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: white;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
textarea { min-height: 46px; }
button, .btn {
  background: var(--navy);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  display: inline-block;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--navy-dark); }
.btn-secondary { background: #6B7280; }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold-light); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #F3F4F6; }
th { color: #6B7280; font-size: 10px; text-transform: uppercase; border-bottom: 2px solid var(--gold); }
tbody tr:nth-child(even) { background: #F7F9FC; }
tbody tr:hover { background: #EFF3FA; }
th a.sort-link { color: #6B7280; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
th a.sort-link:hover { color: var(--navy); }
th a.sort-link svg { opacity: .5; }
th a.sort-link.active svg { opacity: 1; }
.search-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9CA3AF; }
.search-box input { padding-left: 32px; margin: 0; }
.btn-filtros { background: white; color: #374151; border: 1px solid #DDE3F0; padding: 9px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.folder-link { display: inline-flex; color: var(--navy); opacity: .7; }
.folder-link:hover { opacity: 1; }
.table-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 11px; color: #6B7280; }
.pagination { display: flex; gap: 6px; align-items: center; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 5px; color: #6B7280; text-decoration: none; font-size: 11px; }
.pagination a:hover { background: #EFF3FA; }
.pagination .current { background: var(--navy); color: white; font-weight: 700; }
.tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.tag.pendiente { background: #FEF3C7; color: #92400E; }
.tag.firmada { background: #D1FAE5; color: #065F46; }
.error { background: #FEE2E2; color: #991B1B; padding: 10px 14px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
.login-split {
  position: fixed;
  inset: 0;
  display: flex;
  background: white;
}
.login-side {
  flex: 0 0 44%;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.login-side::before {
  content: "";
  position: absolute;
  top: -20%; right: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(212,175,55,.14) 0%, transparent 70%);
}
.login-side-logo { height: 84px; width: 84px; border-radius: 20px; background: white; padding: 10px; margin-bottom: 28px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.login-side-title { color: white; font-size: 33px; font-weight: 800; margin: 0 0 14px 0; letter-spacing: -.5px; line-height: 1.1; font-family: var(--font-heading); }
.login-side-sub { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.5; margin: 0 0 22px 0; }
.login-side-tag { color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; margin: 0; }
@media (max-width: 800px) {
  .login-side { display: none; }
}

/* Menu movil del header de la app (no del landing) -- hoy la nav es una fila
   plana de links que se desborda en celular. Se agrega boton hamburguesa
   (ver base.html) que despliega el menu como panel apilado. */
@media (max-width: 780px) {
  header { flex-wrap: wrap; }
  .menu-toggle { display: inline-flex; align-items: center; }
  header nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 12px;
    gap: 2px;
  }
  header nav.open { display: flex; }
  header nav a, header nav a.nav-icon { margin-left: 0; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
  header nav a.active { border-bottom: 1px solid var(--gold); }
  .user-chip { margin-left: 0; margin-top: 4px; }
}
.login-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.login-form-wrap { max-width: 380px; width: 100%; }
.login-form-wrap form { text-align: left; }
.login-welcome { color: var(--navy); font-size: 25px; font-weight: 800; margin: 0 0 6px 0; letter-spacing: -.3px; font-family: var(--font-heading); }
.login-welcome-sub { color: #6B7280; font-size: 12.5px; margin: 0 0 26px 0; }
.login-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: 0 4px 12px rgba(10,31,84,.25);
  padding: 12px 18px;
  font-size: 13px;
}
.login-submit:hover { background: linear-gradient(135deg, #0C2568 0%, var(--navy-dark) 100%); }
.input-icon { position: relative; }
.input-icon svg:first-child { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9CA3AF; pointer-events: none; }
.input-icon input { padding-left: 34px; background: #EEF1F8; border-color: #EEF1F8; }
.input-icon input:focus { background: white; border-color: var(--navy); }
.input-icon input#pw-input { padding-right: 36px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px; margin: 0; color: #9CA3AF; cursor: pointer; display: flex; }
.pw-toggle:hover { color: var(--navy); background: none; }
.login-extras { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 11px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; color: #374151; margin: 0; text-transform: none; cursor: pointer; }
.checkbox-label .cb-custom { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.checkbox-label .cb-box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #C7CEDD;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: white;
}
.checkbox-label .cb-custom:checked ~ .cb-box { background: var(--navy); border-color: var(--navy); }
.checkbox-label .cb-box svg { opacity: 0; }
.checkbox-label .cb-custom:checked ~ .cb-box svg { opacity: 1; }
.forgot-link { color: #005182; font-size: 11px; text-decoration: none; font-weight: 600; }
.forgot-link:hover { text-decoration: underline; }

.tab-filter {
  background: #F0F2F8;
  color: #374151;
  border: 1px solid #DDE3F0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0;
}
.tab-filter.active { background: var(--navy); color: white; border-color: var(--navy); }
details summary::-webkit-details-marker { color: var(--navy); }

.app-footer {
  text-align: center;
  font-size: 10.5px;
  color: #9CA3AF;
  padding: 24px 20px 30px;
}
.app-footer a { color: #6B7280; text-decoration: none; font-weight: 600; }
.app-footer a:hover { color: var(--navy); text-decoration: underline; }

@media print {
  @page { size: letter; margin: 12mm 12mm 15mm 12mm; }
  body { background: white; }
  header, nav, .app-footer, .btn, button, a.btn-secondary, .no-print,
  .top-banner, .icon-nav, .icon-nav-toggle, .nav-backdrop, .ficha-tabs, .ficha-tabs-mini,
  .ficha-sidebar, .acciones-form, form input, form select, form button, .dp-popup { display: none !important; }
  .app-shell { display: block; min-height: 0; }
  .app-main-col { margin-left: 0 !important; }
  main { max-width: 100%; margin: 0; padding: 0; }
  .card { box-shadow: none; border: none; border-top: none; padding: 0; margin: 0; }
  /* El documento completo (.imprimible) puede durar varias hojas -- lo que
     NO debe pasar es que una sección se corte a la mitad entre una hoja y
     la siguiente. Se evita a nivel de cada pieza (título+contenido, fila de
     campos, cada input) en vez de forzar todo el documento a una sola hoja.
     Aplica a CUALQUIER documento imprimible (historia clínica, admisión,
     notas genéricas, consentimientos), no solo a los que usan la cuadrícula
     .historia-doc/.admision-doc. */
  .imprimible h3 { break-after: avoid; break-inside: avoid; }
  .imprimible label { break-after: avoid; }
  .imprimible input, .imprimible select, .imprimible textarea,
  .imprimible .chk, .imprimible .firma-box { break-inside: avoid; }
  .imprimible .grid-2, .imprimible .grid-3, .imprimible .grid-4, .imprimible .check-grid,
  .imprimible .firmas { break-inside: avoid; }
  .doc-header, .doc-footer, .doc-firma { break-inside: avoid; }
  /* Los documentos imprimibles sí necesitan mostrar sus campos (son datos, no
     controles de formulario) -- se excluyen de la regla genérica de arriba. */
  .imprimible input, .imprimible select, .imprimible textarea {
    display: block !important; border: none; background: none !important; padding: 2px 0;
    -webkit-text-fill-color: #1F2937 !important; color: #1F2937 !important;
  }
  .imprimible .check-grid .chk input { display: inline-block !important; width: auto; }
  .imprimible input[type="password"], .imprimible .error { display: none !important; }
  /* Los placeholders son guía para llenar en pantalla, no datos del paciente:
     no deben aparecer en el documento impreso, ni cuando el campo está vacío. */
  .imprimible input::placeholder, .imprimible textarea::placeholder { color: transparent !important; opacity: 0 !important; }

  /* El pie de página (dirección, RFC, teléfono) debe repetirse al final de
     CADA hoja impresa, no solo al final del documento. position:fixed dentro
     de @media print se recalcula por cada hoja en Chrome/Firefox, así que
     actúa como un pie de página real. Se coloca DENTRO del margen inferior de
     la página (nunca usado por el contenido normal), no añadiendo espacio al
     final del documento -- así no empuja secciones (p.ej. la firma) a una
     hoja extra por sí solo. */
  .doc-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    margin-top: 0;
  }
}

.warning { background: #FEF3C7; color: #92400E; padding: 10px 14px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
.warning a { color: #92400E; text-decoration: underline; font-weight: 700; }

/* Ficha de paciente: layout de dos columnas (sidebar fija + contenido con
   pestañas) -- solo reorganiza visualmente los mismos datos que ya mandaba
   el backend, sin campos ni endpoints nuevos. */
.ficha-layout { display: flex; align-items: flex-start; gap: 24px; }
.ficha-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: calc(var(--banner-h) + 16px); }
.ficha-sidebar .card { padding: 24px 22px; }
.ficha-main { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .ficha-layout { flex-direction: column; }
  .ficha-sidebar { width: 100%; position: static; }
}

.ficha-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: white; font-size: 23px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ficha-nombre { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 4px; font-family: var(--font-heading); line-height: 1.3; }
.ficha-folio { font-size: 10px; color: #6B7280; margin: 0 0 20px; }
.ficha-datos { border-top: 1px solid #EEF1F8; padding-top: 4px; }
.ficha-dato { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; padding: 9px 0; border-bottom: 1px solid #F3F4F6; }
.ficha-dato:last-child { border-bottom: none; }
.ficha-dato span:first-child { color: #6B7280; }
.ficha-dato span:last-child { color: #1F2937; font-weight: 600; text-align: right; margin-left: 12px; }
.ficha-alerta {
  background: #FEE2E2; color: #991B1B; border-radius: 8px;
  padding: 12px 14px; font-size: 11px; margin-top: 20px; line-height: 1.5;
}
.ficha-alerta b { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.ficha-antecedentes {
  background: #F0F7FF; color: #1E3A5F; border-radius: 8px;
  padding: 12px 14px; font-size: 11px; margin-top: 12px; line-height: 1.5;
}
.ficha-antecedentes b { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; color: #1E85C4; }

.ficha-tabs {
  display: flex; gap: 4px; border-bottom: 2px solid #DDE3F0; margin-bottom: 16px; flex-wrap: wrap;
  position: sticky; top: var(--banner-h); z-index: 15;
  background: #F0F2F8; padding-top: 8px; margin-top: -8px;
}
.ficha-tab {
  background: none; border: none; cursor: pointer;
  padding: 10px 16px; font-size: 12px; font-weight: 600; color: #6B7280;
  border-bottom: 2px solid transparent; margin: 0 0 -2px;
}
.ficha-tab:hover { color: var(--navy); background: none; }
.ficha-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.ficha-panel { display: none; }
.ficha-panel.active { display: block; }

/* Mini-pestañas dentro de la tarjeta del paciente (Resumen / Historial de
   citas), justo debajo de los datos básicos (edad/sexo/nacimiento) -- mismo
   mecanismo que .ficha-tabs pero a escala de sidebar. */
.ficha-tabs-mini {
  border-bottom: 1px solid #EEF1F8;
  margin: 12px -22px 18px; padding: 0 22px;
  gap: 18px;
}
.ficha-tabs-mini .ficha-tab { padding: 12px 0; font-size: 11.5px; }
/* El bloque de datos dentro del panel "Resumen" (ej. Teléfono) va justo bajo
   las pestañas -- no necesita su propia línea separadora arriba. */
.ficha-panel[data-group="sidebar"] > .ficha-datos { border-top: none; padding-top: 0; }

.mini-citas-list { display: flex; flex-direction: column; }
.mini-cita { padding: 12px 0; border-bottom: 1px solid #F3F4F6; }
.mini-cita:last-child { border-bottom: none; }
.mini-cita-fecha { font-size: 11.5px; font-weight: 600; color: #1F2937; text-transform: capitalize; }
.mini-cita-detalle { font-size: 10.5px; color: #6B7280; margin: 3px 0 8px; }
.mini-cita-acciones { display: flex; gap: 12px; margin-top: 8px; }
.mini-cita-acciones form { margin: 0; }
.mini-cita-acciones button {
  all: unset; cursor: pointer; font-size: 9.5px; font-weight: 700;
  color: #1E85C4; margin: 0;
}
.mini-cita-acciones button:hover { text-decoration: underline; }
.ficha-panel[data-group="sidebar"] label { margin-top: 10px; font-size: 10px; }
.ficha-panel[data-group="sidebar"] input, .ficha-panel[data-group="sidebar"] select { font-size: 11px; padding: 7px 9px; }

/* ==================== Banner superior fijo ====================
   Logo + nombre del hospital a la izquierda; fecha y usuario en sesión a
   la derecha. El botón de cerrar sesión se queda donde estaba, dentro del
   menú hamburguesa. */
:root { --banner-h: 72px; }
.top-banner {
  position: sticky; top: 0; z-index: 25; height: var(--banner-h);
  background: var(--navy); box-shadow: 0 1px 6px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
}
.top-banner-left { display: flex; align-items: center; }
.top-banner-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; }
.top-banner-brand img { height: 54px; width: 54px; border-radius: 50%; background: white; }
.top-banner-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.top-banner-brand-text .name { font-weight: 700; font-size: 13px; font-family: var(--font-heading); }
.top-banner-brand-text .sub { font-size: 9px; opacity: .8; letter-spacing: .5px; }
.top-banner-right { display: flex; align-items: center; gap: 14px; }
.top-banner-date { color: rgba(255,255,255,.75); font-size: 11px; text-transform: capitalize; }
.top-banner-divider { width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.top-banner-user { display: flex; flex-direction: column; line-height: 1.25; text-align: right; max-width: 180px; }
.top-banner-user .name { color: white; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-banner-user .sub { color: rgba(255,255,255,.65); font-size: 9.5px; }
.vista-rol-form { display: flex; align-items: center; gap: 6px; }
.vista-rol-label { color: rgba(255,255,255,.65); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; }
.vista-rol-form select { background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; font-size: 11px; padding: 3px 6px; }
.vista-rol-form select option { color: #111; }
.vista-rol-banner { background: #FEF3C7; color: #92400E; font-size: 12px; padding: 7px 18px; text-align: center; border-bottom: 1px solid #FDE68A; }
.vista-rol-banner a { color: #92400E; font-weight: 600; text-decoration: underline; margin-left: 10px; }
@media (max-width: 560px) {
  .vista-rol-label { display: none; }
  .top-banner-date { display: none; }
  .top-banner-brand-text .sub { display: none; }
}

/* ==================== Nav lateral tipo "hamburguesa" ====================
   Debajo del banner: una barra fija de íconos a la izquierda, colapsada
   por default y expandible con el botón de menú (mismos links y roles que
   antes, solo reacomodados). */
.app-shell { display: flex; min-height: calc(100vh - var(--banner-h)); }
.icon-nav {
  width: 64px; flex-shrink: 0;
  background: var(--navy);
  box-shadow: 1px 0 6px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  padding: 12px 0;
  transition: width .18s ease;
  overflow: hidden;
  position: sticky; top: var(--banner-h); height: calc(100vh - var(--banner-h));
  z-index: 20;
}
.icon-nav.expanded { width: 180px; }
.icon-nav-toggle {
  background: none; border: none; color: white; cursor: pointer;
  margin: 0 14px 0 0; padding: 8px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-nav-toggle:hover { background: rgba(255,255,255,.08); }
.icon-nav-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: white; padding: 0 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 10px;
  white-space: nowrap;
}
.icon-nav-brand img { height: 34px; width: 34px; border-radius: 50%; background: white; flex-shrink: 0; }
.icon-nav-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.icon-nav-brand-text .name { font-weight: 700; font-size: 12px; font-family: var(--font-heading); }
.icon-nav-brand-text .sub { font-size: 8px; opacity: .7; letter-spacing: .5px; }
.icon-nav-links { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.icon-nav-link {
  display: flex; align-items: center; gap: 14px;
  color: rgba(255,255,255,.72); text-decoration: none;
  padding: 12px 20px; white-space: nowrap;
  border-radius: 0; border-left: 3px solid transparent;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s, margin .15s, padding .15s, border-radius .15s;
}
/* En expandido, cada link flota como "pill" con aire a los lados -- en
   colapsado (solo íconos, 64px) no cabe el margen lateral, se queda pegado
   como antes para que el ícono siga centrado. */
.icon-nav.expanded .icon-nav-link { padding: 12px 16px; margin: 0 10px; border-radius: 12px; }
.icon-nav-link svg { flex-shrink: 0; transition: color .15s; stroke-linecap: round; stroke-linejoin: round; }
.icon-nav-link:hover { background: rgba(255,255,255,.08); color: white; }
.icon-nav-link.active {
  background: rgba(255,255,255,.1);
  border-left-color: var(--accent-teal);
  color: white; font-weight: 700;
}
.icon-nav-link.active svg { color: var(--accent-teal); }
.icon-nav-label { opacity: 0; width: 0; overflow: hidden; transition: opacity .15s; font-size: 11px; }
.icon-nav.expanded .icon-nav-label { opacity: 1; width: auto; }
.icon-nav-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; margin-top: 12px; }
.icon-nav-user { display: none; }
.icon-nav-user-text { font-size: 11px; color: white; line-height: 1.3; }
.icon-nav-user-text .sub { opacity: .65; text-transform: capitalize; font-size: 9px; }
.app-main-col { flex: 1; min-width: 0; }
.nav-backdrop { display: none; }

@media (max-width: 780px) {
  .icon-nav {
    position: fixed; left: 0; top: var(--banner-h); height: calc(100vh - var(--banner-h));
    width: 64px; transform: translateX(0);
  }
  .icon-nav.expanded { width: 180px; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(7,22,64,.4); z-index: 15; }
  .app-shell.nav-open .nav-backdrop { display: block; }
  .app-main-col { margin-left: 64px; }
}

/* ==================== Documento de Historia Clínica ====================
   Compartido por nota_form.html (llenado) y nota_revisar.html (firma, con
   todos los campos "disabled") -- mismo encabezado y misma cuadrícula en
   ambos para que el médico firme viendo exactamente lo que se llenó. */
.historia-doc .doc-header { display:flex; align-items:center; border-bottom:2px solid #0A1F54; padding-bottom:12px; margin-bottom:14px; }
.historia-doc .doc-header img { height:52px; margin-right:14px; }
.historia-doc .doc-header-info { flex:1; }
.historia-doc .doc-header-hospital { font-weight:800; color:#0A1F54; font-size:14px; letter-spacing:.3px; }
.historia-doc .doc-header-sub { color:#6B7280; font-size:10.5px; }
.historia-doc .doc-header-folio { text-align:right; font-size:10px; color:#374151; line-height:1.5; }
.historia-doc h3 { margin-top: 40px; padding-top: 14px; border-top: 1px solid #EEF1F7; }
.historia-doc h3.sub { margin-top: 30px; padding-top: 0; border-top: none; font-size: 12px; color:#005182; }
.historia-doc .hint-inline { font-weight:400; font-size:10px; color:#6B7280; text-transform:none; letter-spacing:0; }
.historia-doc .hint { font-size:10px; color:#6B7280; margin:2px 0 8px; }
.historia-doc .grid-2, .historia-doc .grid-3, .historia-doc .grid-4 { display:grid; gap:4px 14px; }
.historia-doc .grid-2 { grid-template-columns: repeat(2, 1fr); }
.historia-doc .grid-3 { grid-template-columns: repeat(3, 1fr); }
.historia-doc .grid-4 { grid-template-columns: repeat(4, 1fr); }
.historia-doc .span-2 { grid-column: span 2; }
.historia-doc label { display:block; margin-top: 18px; margin-bottom: 4px; font-size: 10.5px; }
.historia-doc .grid-2 label, .historia-doc .grid-3 label, .historia-doc .grid-4 label { margin-top: 10px; }
.historia-doc input, .historia-doc select, .historia-doc textarea { padding: 6px 8px; font-size: 11.5px; margin-bottom: 2px; }
.historia-doc input[type="date"] { max-width: 170px; }
.historia-doc input:disabled, .historia-doc textarea:disabled, .historia-doc select:disabled,
.historia-doc input:read-only { background:#F3F5FA; color:#4B5563; opacity: 1; -webkit-text-fill-color: #4B5563; }
.historia-doc textarea { min-height: 56px; margin-bottom: 10px; }
.historia-doc textarea.tall { min-height: 90px; }
/* La altura real la controla autogrow.js según el contenido -- sin scroll
   interno ni tirador manual, para que nunca se recorte texto al imprimir. */
.imprimible textarea { overflow: hidden; resize: none; }
.historia-doc .check-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin: 8px 0 16px; }
.historia-doc .check-grid .chk { display:flex; align-items:center; gap:6px; margin:0; font-size:11.5px; text-transform:none; letter-spacing:0; color:#1F2937; }
.historia-doc .check-grid .chk input { width:auto; margin:0; padding:0; }
.historia-doc .check-grid .chk input:disabled ~ span, .historia-doc .check-grid .chk:has(input:disabled) { color: #1F2937; }
.historia-doc .doc-footer, .admision-doc .doc-footer { display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid #DDE3F0; margin-top:18px; padding-top:10px; font-size:10px; color:#6B7280; }
.historia-doc .doc-footer-right, .admision-doc .doc-footer-right { text-align:right; }

/* Documento de Admisión y Registro de Paciente (paciente_form.html y su
   vista previa en /formularios). */
.admision-doc .doc-header { display:flex; align-items:center; border-bottom:2px solid #0A1F54; padding-bottom:12px; margin-bottom:14px; }
.admision-doc .doc-header img { height:52px; margin-right:14px; }
.admision-doc .doc-header-info { flex:1; }
.admision-doc .doc-header-hospital { font-weight:800; color:#0A1F54; font-size:14px; letter-spacing:.3px; }
.admision-doc .doc-header-sub { color:#6B7280; font-size:10.5px; }
.admision-doc .doc-header-folio { text-align:right; font-size:10px; color:#374151; line-height:1.5; }
.admision-doc h3 { margin-top: 34px; padding-top: 14px; border-top: 1px solid #EEF1F7; }
.admision-doc h3.sub { margin-top: 24px; padding-top: 0; border-top: none; }
.admision-doc .grid-2, .admision-doc .grid-3, .admision-doc .grid-4 { display: grid; gap: 0 12px; }
.admision-doc .grid-2 { grid-template-columns: repeat(2, 1fr); }
.admision-doc .grid-3 { grid-template-columns: repeat(3, 1fr); }
.admision-doc .grid-4 { grid-template-columns: repeat(4, 1fr); }
.admision-doc .span-2 { grid-column: span 2; }
.admision-doc label { margin-top: 8px; margin-bottom: 3px; font-size: 10.5px; }
.admision-doc input, .admision-doc select { padding: 6px 8px; font-size: 11.5px; }
.admision-doc input[type="date"] { width: 100%; }
.admision-doc input:disabled, .admision-doc select:disabled { background:#F3F5FA; color:#4B5563; opacity: 1; -webkit-text-fill-color: #4B5563; }
.admision-doc .btn-small { font-size: 10px; padding: 5px 12px; margin-top: 8px; }
.admision-doc .acciones-form { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.admision-doc .acciones-form button, .admision-doc .acciones-form a { margin-top: 0; }
@media (max-width: 700px) {
  .admision-doc .grid-2, .admision-doc .grid-3, .admision-doc .grid-4 { grid-template-columns: 1fr 1fr; }
  .admision-doc .span-2 { grid-column: span 2; }
}
@media (max-width: 480px) {
  .admision-doc .grid-2, .admision-doc .grid-3, .admision-doc .grid-4 { grid-template-columns: 1fr; }
  .admision-doc .span-2 { grid-column: span 1; }
  .admision-doc input[type="date"] { max-width: 100%; }
}

/* Línea de firma al final de cada documento imprimible -- se llena con el
   nombre/cédula de quien firmó electrónicamente, o queda en blanco si el
   documento todavía no se ha firmado (para firma de puño y letra si se
   imprime antes). */
.doc-firma { display: flex; justify-content: flex-end; margin-top: 36px; }
.doc-firma-box { text-align: center; width: 260px; }
.doc-firma-linea { border-top: 1px solid #374151; margin-bottom: 6px; }
.doc-firma-nombre { font-weight: 600; font-size: 11px; color: #1F2937; }
.doc-firma-cargo { font-size: 10px; color: #6B7280; margin-top: 2px; }
.historia-doc .acciones-form { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.historia-doc .acciones-form button, .historia-doc .acciones-form a { margin-top:0; }

/* Carta de autorización: 4 firmantes (paciente, familiar, 2 testigos) en
   cuadrícula, cada uno con su propia línea de firma -- las firmas
   autógrafas van en la hoja impresa, aquí solo se guardan los datos. */
.carta-firmas { margin-top: 10px; }
.carta-firma-caja { padding: 10px 12px 12px; border: 1px solid #E5E7EB; border-radius: 8px; }
.carta-firma-linea { border-top: 1px solid #374151; margin: 22px 0 8px; }
.carta-firma-etiqueta { font-weight: 600; font-size: 11px; color: #1F2937; margin-bottom: 6px; }
.carta-firma-caja label { font-size: 10px; margin-top: 6px; }
.carta-firma-caja input { font-size: 11px; }
@media (max-width: 700px) { .carta-firmas.grid-2 { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .historia-doc .grid-2, .historia-doc .grid-3, .historia-doc .grid-4 { grid-template-columns: 1fr 1fr; }
  .historia-doc .check-grid { grid-template-columns: 1fr 1fr; }
  .historia-doc .span-2 { grid-column: span 2; }
}
@media (max-width: 480px) {
  .historia-doc .grid-2, .historia-doc .grid-3, .historia-doc .grid-4,
  .historia-doc .check-grid { grid-template-columns: 1fr; }
  .historia-doc .span-2 { grid-column: span 1; }
  .historia-doc input[type="date"] { max-width: 100%; }
}

/* ==================== Calendario propio (datepicker.js) ====================
   Reemplaza el <input type="date"> nativo (sin control de estilo posible)
   por un calendario a la medida: flechas horizontales, esquinas redondeadas,
   colores de marca, pie separado. */
.dp-input { cursor: pointer; background: white; }
.dp-input:disabled { cursor: default; }
.dp-popup {
  position: absolute; z-index: 100; width: 260px;
  background: white; border: 1px solid #DDE3F0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10,31,84,.15); padding: 12px;
  font-family: var(--font-body);
}
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--navy); }
.dp-nav {
  background: none; border: none; color: var(--navy); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 4px 8px; margin: 0; border-radius: 6px;
}
.dp-nav:hover { background: #F0F7FF; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-dow span { font-size: 9.5px; font-weight: 600; color: #9CA3AF; padding: 4px 0; text-transform: uppercase; }
.dp-days button {
  all: unset; box-sizing: border-box; width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: #1F2937; border-radius: 50%; cursor: pointer;
}
.dp-days span { aspect-ratio: 1; }
.dp-day:hover { background: #F0F7FF; }
.dp-day-today { font-weight: 700; color: var(--navy); box-shadow: inset 0 0 0 1px #1DB2E1; }
.dp-day-sel, .dp-day-sel:hover { background: #1E85C4; color: white; font-weight: 600; }
.dp-footer { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid #EEF1F7; }
.dp-footer button {
  all: unset; cursor: pointer; font-size: 10.5px; font-weight: 600;
  color: #1E85C4; padding: 4px 8px; border-radius: 6px;
}
.dp-footer button:hover { background: #F0F7FF; }
.dp-footer .dp-clear { color: #6B7280; }

/* Campos de texto en blanco puro con borde tenue (2026-09-17, feedback de
   diseño) -- el fondo general de la página ya delimita las tarjetas
   (#F0F2F8), así que los inputs no necesitan además un fondo gris propio;
   el anillo de enfoque teal (ver regla input:focus arriba) ya marca dónde
   está el cursor sin depender del fondo. */
.tag.pendiente, .tag.firmada { font-weight: 700; }
.tag.pendiente, .tag.firmada { font-weight: 700; }

/* Hoja de enfermería: tablas de horario (signos vitales, balance hídrico),
   tablas dinámicas (hábitus/catéteres/medicamentos) y columnas por turno. */
.tabla-horas, .tabla-dinamica { width: 100%; font-size: 10px; margin: 8px 0 14px; }
.tabla-horas { table-layout: fixed; border-collapse: collapse; }
.tabla-horas td.label, .tabla-horas th.label { width: 130px; }
.tabla-horas th, .tabla-horas td { border: 1px solid #DDE3F0; padding: 4px; text-align: center; }
.tabla-horas th, .tabla-dinamica th { background: #F0F2F8; font-weight: 600; font-size: 9.5px; color: #374151; white-space: nowrap; }
/* Tablas "resumen"/dinámicas: sin líneas verticales, solo separadores
   horizontales muy suaves, esquinas redondeadas y resalte al pasar el
   cursor -- se ven menos rígidas que una cuadrícula completa (2026-09-17,
   feedback de diseño). Las de horario (.tabla-horas, muy densas) se quedan
   con cuadrícula completa porque ahí sí ayuda a no perder la columna/hora. */
.tabla-dinamica {
  border-collapse: separate; border-spacing: 0;
  border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden;
}
.tabla-dinamica th, .tabla-dinamica td { border: none; border-bottom: 1px solid #F1F3F7; padding: 4px; text-align: center; }
.tabla-dinamica tbody tr:last-child td { border-bottom: none; }
.tabla-dinamica tbody tr:hover { background: #F9FAFB; }
.tabla-horas td.label { text-align: left; font-weight: 600; background: #FAFBFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla-horas input, .tabla-dinamica input, .tabla-dinamica select {
  width: 100%; border: none; padding: 2px; text-align: center;
  background: transparent; font-size: 10px; min-height: 0;
}
.tabla-dinamica input, .tabla-dinamica select { min-width: 38px; }
.tabla-horas input { min-width: 0; padding: 2px 1px; }
.tabla-dinamica td:first-child input, .tabla-dinamica th:first-child { text-align: left; }
.tabla-dinamica input[type="text"], .tabla-dinamica input[type="date"], .tabla-dinamica input[type="datetime-local"] { text-align: left; }
.ef-agregar-fila {
  margin: -8px 0 16px; font-size: 11.5px; padding: 8px 16px;
  background: #1E85C4; font-weight: 700;
  box-shadow: 0 1px 3px rgba(30,133,196,.35);
}
.ef-agregar-fila:hover { background: #176B9E; }
.ef-tarjetas { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.ef-tarjeta { border: 1px solid #DDE3F0; border-radius: 8px; padding: 12px 14px; background: #FAFBFF; }
.ef-tarjeta .btn-secondary { margin-top: 4px; font-size: 10.5px; padding: 5px 10px; }
.turno-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 18px; }
.turno-cols h4 { margin: 0 0 4px; font-size: 11.5px; color: #005182; }
@media (max-width: 900px) { .turno-cols { grid-template-columns: 1fr; } }

/* Línea gruesa entre turnos (Matutino/Vespertino/Nocturno) en las tablas de
   horario, igual que en la hoja original. La columna de etiqueta es la 1a;
   en la de 24h (7am-6am) los turnos cambian en la hora 15 y la 23; en la
   de cada-2-horas (cambios posturales) cambian en la hora 16 y la 24. */
.tabla-horas-24 th:nth-child(10), .tabla-horas-24 td:nth-child(10),
.tabla-horas-24 th:nth-child(18), .tabla-horas-24 td:nth-child(18) {
  border-left: 2px solid #374151;
}
.tabla-horas-2h th:nth-child(6), .tabla-horas-2h td:nth-child(6),
.tabla-horas-2h th:nth-child(10), .tabla-horas-2h td:nth-child(10) {
  border-left: 2px solid #374151;
}
.tabla-horas-turnos th {
  background: #E8ECF7; color: #0A1F54; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabla-horas-turnos th:nth-child(3), .tabla-horas-turnos th:nth-child(4) {
  border-left: 2px solid #374151;
}

/* Combobox propio (Vía, Medicamento en Ministración) -- menú blanco con
   sombra definida y hover en tono de marca, en vez del menú oscuro nativo
   del navegador que no se puede estilizar. */
.cb-popup {
  position: fixed; background: white; border: 1px solid #E5E7EB; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); max-height: 220px; overflow-y: auto;
  z-index: 60; font-size: 12px; padding: 4px;
}
.cb-option { padding: 7px 10px; border-radius: 6px; cursor: pointer; color: #374151; }
.cb-option:hover { background: #EAF3FB; color: #0A1F54; }
.cb-vacio { padding: 7px 10px; color: #9CA3AF; font-style: italic; }

/* Campos editables dentro de las tablas de captura: fondo blanco y borde
   visible para que se noten como interactivos (antes se confundían con el
   fondo gris de la fila). */
.tabla-dinamica input:not([disabled]), .tabla-dinamica select:not([disabled]) {
  background: white; border: 1px solid #DDE3F0; border-radius: 5px;
}
.tabla-dinamica input:focus, .tabla-dinamica select:focus { border-color: var(--navy); }

/* Botón "Quitar" minimalista: solo ícono, gris neutro que se pone rojo tenue
   al pasar el cursor -- antes era un bloque sólido que competía en jerarquía
   visual con las acciones principales. */
.ef-quitar-icono {
  background: none; border: none; color: #9CA3AF; cursor: pointer; padding: 4px 8px;
  border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; font-size: 10.5px; font-weight: 600; white-space: nowrap; margin-top: 0;
}
.ef-quitar-icono:hover { background: #FEF2F2; color: #DC2626; }

/* Bloqueo de registros ya llenos: al agregar uno nuevo, los anteriores se
   deshabilitan para que un roce accidental no los modifique; "Editar" los
   reactiva si hace falta corregir algo. */
.ef-editar-fila { background: white; color: #005182; border: 1px solid #DDE3F0; }
.ef-editar-fila:hover { background: #EAF3FB; }
.ef-tarjeta .ef-editar-fila { font-size: 10.5px; padding: 5px 10px; margin-top: 4px; margin-right: 6px; }
.tabla-dinamica .ef-editar-fila { font-size: 9.5px; padding: 3px 7px; margin: 0 4px 0 0; }
.tabla-dinamica td { white-space: nowrap; }

/* Columnas de turno que todavía no corresponden (Medidas asistenciales,
   Terapia IV, Observaciones): se bloquean para que una enfermera no llene
   por adelantado la columna de un turno que aún no empieza; "Habilitar"
   las desbloquea a mano si de verdad hace falta (p. ej. registro tardío). */
.ef-turno-inactivo { opacity: 0.55; }
.ef-turno-inactivo textarea { background: #F3F4F6; }
.ef-turno-habilitar { font-size: 10px; padding: 3px 8px; margin-top: 4px; background: white; color: #005182; border: 1px solid #DDE3F0; }
.ef-turno-habilitar:hover { background: #EAF3FB; }

/* Intervención de enfermería para la seguridad del paciente: tabla agrupada
   en secciones (Riesgos de caídas / UPP / Escala del dolor / Otros), en vez
   de una lista plana de checkboxes sin separación visual. */
.ef-seg-seccion { background: #E8ECF7; font-weight: 700; color: #0A1F54; text-align: left !important; white-space: normal; }
.ef-seguridad-tabla td:first-child { white-space: normal; min-width: 200px; text-align: left; }
.ef-seguridad-tabla th:not(:first-child), .ef-seguridad-tabla td:not(:first-child) { width: 110px; }