/* =====================================================================
   SAR HJNC · estilos compartidos
   ===================================================================== */
:root{
  --primary:#0284C7; --primary-d:#0369A1; --sidebar:#0D1B2A; --bg:#F0F4F8;
  --line:#e5e7eb; --txt:#1f2937; --muted:#6b7280;
  --acceso:#059669; --acceso-bg:#ecfdf5; --acceso-bd:#a7f3d0;
  --vigilancia:#d97706; --vigilancia-bg:#fffbeb; --vigilancia-bd:#fde68a;
  --reserva:#dc2626; --reserva-bg:#fef2f2; --reserva-bd:#fecaca;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Outfit',system-ui,-apple-system,sans-serif;background:var(--bg);
  color:var(--txt);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 60px}
.wrap.angosto{max-width:920px}

/* ---------- barra superior ---------- */
header.app{background:var(--sidebar);color:#fff;padding:14px 0}
header.app .wrap{display:flex;align-items:center;gap:13px;padding-bottom:0}
.mark{width:38px;height:38px;border-radius:8px;background:var(--primary);display:grid;
  place-items:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
header.app h1{font-size:16px;font-weight:600;letter-spacing:-.01em}
header.app p{font-size:12px;color:#93a3b5}
.usr{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:#c6d0da}
.usr .rol{background:rgba(255,255,255,.12);padding:2px 9px;border-radius:99px;font-size:11px}
.usr button{background:none;border:0;color:#93a3b5;cursor:pointer;font-family:inherit;font-size:12.5px}
.usr button:hover{color:#fff}
nav.tabs{background:#fff;border-bottom:1px solid var(--line)}
nav.tabs .wrap{display:flex;gap:2px;padding-bottom:0}
nav.tabs a{padding:11px 15px;font-size:13.5px;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent}
nav.tabs a:hover{color:var(--txt)}
nav.tabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}

/* ---------- avisos ---------- */
.aviso{display:flex;gap:11px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:8px;padding:12px 14px;margin:16px 0;font-size:13.5px}
.aviso i{color:var(--primary);margin-top:2px}

/* ---------- tarjetas ---------- */
section.card{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.card > h2{font-size:13px;font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line);
  background:#fafbfc;display:flex;align-items:center;gap:9px}
.card > h2 i{color:var(--primary);width:15px;text-align:center}
.card > h2 .der{margin-left:auto;font-weight:400;color:var(--muted)}
.card .body{padding:15px 16px}

.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:700px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .g2.keep,.g4.keep,.g5.keep{grid-template-columns:1fr 1fr}}

label.f{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
label.f .nota,.nota{color:var(--primary);font-weight:400;font-size:.92em}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],
select,textarea{width:100%;font-family:inherit;font-size:16px;padding:8px 10px;border:1px solid #d1d5db;
  border-radius:7px;background:#fff;color:var(--txt);transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:54px;line-height:1.4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(2,132,199,.13)}
input.err,select.err,textarea.err{border-color:#dc2626;background:#fff5f5}
input:disabled,select:disabled,textarea:disabled{background:#f3f4f6;color:var(--muted)}
.hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em}

.seg{display:flex;border:1px solid #d1d5db;border-radius:7px;overflow:hidden}
.seg button{flex:1;font-family:inherit;font-size:13.5px;padding:9px 6px;background:#fff;border:0;
  border-right:1px solid #e5e7eb;cursor:pointer;color:var(--muted)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--primary);color:#fff;font-weight:500}

/* ---------- badges ---------- */
.badge{font-size:11px;font-weight:600;padding:2.5px 9px;border-radius:99px;border:1px solid;white-space:nowrap;
  display:inline-block}
.b-acceso{color:var(--acceso);background:var(--acceso-bg);border-color:var(--acceso-bd)}
.b-vigilancia{color:var(--vigilancia);background:var(--vigilancia-bg);border-color:var(--vigilancia-bd)}
.b-reserva{color:var(--reserva);background:var(--reserva-bg);border-color:var(--reserva-bd)}
.b-pendiente{color:#4338ca;background:#eef2ff;border-color:#c7d2fe}
.b-autorizada,.b-autorizado{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}
.b-autorizada_parcial,.b-ajustado{color:#92400e;background:#fffbeb;border-color:#fde68a}
.b-autorizada_verbal{color:#5b21b6;background:#f5f3ff;border-color:#ddd6fe}
.b-rechazada,.b-rechazado{color:#991b1b;background:#fef2f2;border-color:#fecaca}
.b-suspendida{color:#374151;background:#f3f4f6;border-color:#d1d5db}

/* ---------- botones ---------- */
button.btn,a.btn{font-family:inherit;font-size:14px;font-weight:500;padding:10px 17px;border-radius:8px;
  border:1px solid #d1d5db;background:#fff;color:var(--txt);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
button.btn:hover,a.btn:hover{background:#f9fafb}
.btn.p{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.p:hover{background:var(--primary-d)}
.btn.chico{font-size:12.5px;padding:6px 12px}
button:disabled{opacity:.55;cursor:not-allowed}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- tablas ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);padding:8px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:#fafbfc;position:sticky;top:0;z-index:2}
table.data td{padding:9px 10px;border-bottom:1px solid #f1f3f5;vertical-align:top}
table.data tr:hover td{background:#f8fafc}
.tabla-scroll{max-height:66vh;overflow:auto}
.tabla-scroll > table{min-width:640px}
.vacio{padding:36px 16px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin:16px 0 14px}
@media(max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.kpi .n{font-size:25px;font-weight:600;line-height:1.1;font-family:'JetBrains Mono',monospace}
.kpi .l{font-size:11.5px;color:var(--muted);margin-top:3px}
.kpi.a .n{color:var(--acceso)} .kpi.v .n{color:var(--vigilancia)} .kpi.r .n{color:var(--reserva)}

/* ---------- modal ---------- */
.velo{position:fixed;inset:0;background:rgba(13,27,42,.55);display:none;place-items:center;padding:16px;z-index:70}
.velo.on{display:grid}
.modal{background:#fff;border-radius:12px;max-width:620px;width:100%;max-height:90vh;overflow:auto}
.modal h3{font-size:15px;font-weight:600;padding:14px 17px;border-bottom:1px solid var(--line)}
.modal .mb{padding:16px 17px}
.modal .mf{padding:12px 17px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;
  position:sticky;bottom:0;background:#fff}
dl.dl{display:grid;grid-template-columns:128px 1fr;gap:5px 12px;font-size:13.5px}
dl.dl dt{color:var(--muted);font-size:12px;padding-top:1px}

/* ---------- toast ---------- */
#estado{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:var(--sidebar);color:#fff;
  padding:11px 18px;border-radius:9px;font-size:13.5px;box-shadow:0 8px 26px rgba(0,0,0,.22);
  display:none;z-index:90;max-width:92vw}
#estado.ok{background:#065f46} #estado.bad{background:#991b1b}

/* ---------- bitácora ---------- */
ol.bitacora{list-style:none;font-size:13px}
ol.bitacora li{padding:8px 0 8px 18px;border-left:2px solid var(--line);position:relative;margin-left:4px}
ol.bitacora li::before{content:'';position:absolute;left:-5px;top:13px;width:8px;height:8px;border-radius:50%;
  background:var(--primary)}
ol.bitacora .cuando{color:var(--muted);font-size:11.5px}

/* =====================================================================
   HOJA IMPRIMIBLE
   ===================================================================== */
#hoja{display:none}
@media print{
  /* Lista blanca: se oculta TODO lo de la página y se deja solo la hoja.
     Con lista negra, cada elemento nuevo del portal terminaba colándose
     en el PDF (así apareció la nota institucional sobre el encabezado). */
  body{background:#fff;margin:0;padding:0}
  body > *{display:none !important}
  body > #hoja{display:block !important}
  @page{size:letter;margin:12mm 13mm}
}
/* =====================================================================
   HOJA IMPRESA · SAR versión 4.0
   Dos páginas exactas en tamaño carta, con tres antimicrobianos y tres
   tablas de dispensación, que es el caso más largo que admite la hoja.
   ===================================================================== */
#hoja{font-family:'Times New Roman',Georgia,serif;color:#000;font-size:10.5pt;line-height:1.3}
#hoja .pag{page-break-after:always;break-after:page}
#hoja .pag:last-child{page-break-after:auto;break-after:auto}
#hoja .version{text-align:right;font-size:8.5pt;font-weight:bold;margin-bottom:2.5mm}
/* Tres columnas con los costados del mismo ancho: así el título queda
   centrado respecto de la hoja y no respecto del espacio que sobra al
   lado del logo. La tercera columna va vacía, solo como contrapeso. */
#hoja .cab{display:grid;grid-template-columns:42mm 1fr 42mm;align-items:center;
  gap:6mm;border-bottom:2.5pt solid #000;padding-bottom:2.5mm;margin-bottom:4mm}
#hoja .logo{font-size:7pt;line-height:1.2;border-right:.5pt solid #999;padding-right:3mm}
#hoja .logo b{display:block;font-size:8pt;letter-spacing:.02em}
#hoja .titulo{text-align:center;font-weight:bold;letter-spacing:.08em;
  font-size:11.5pt;line-height:1.35}
#hoja .titulo span{display:block}

/* --- filas de campos: nunca se parten a mitad de un rótulo --- */
#hoja .fila{margin-bottom:2.4mm}
#hoja .fila.campos{display:flex;align-items:baseline;gap:2.5mm;flex-wrap:nowrap}
#hoja .fila.campos .fijo{flex:0 0 auto;white-space:nowrap}
#hoja .fila.campos .rellena{flex:1 1 auto}
#hoja .linea{flex:1 1 auto;min-width:14mm;border-bottom:.5pt dotted #000;
  padding:0 1.5mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hoja .linea.corta{flex:0 0 26mm}
#hoja .boxsar{flex:0 0 auto;border:1pt solid #000;padding:1.6mm 4mm;font-size:10pt;white-space:nowrap}
#hoja .chk{font-family:'DejaVu Sans',Arial,sans-serif}

/* --- tablas --- */
#hoja table{width:100%;border-collapse:collapse;margin:3mm 0}
#hoja table.b td,#hoja table.b th{border:.8pt solid #000;padding:1.5mm 2mm;font-size:9pt;vertical-align:top}
#hoja table.b th{font-weight:bold;text-align:center;background:#f2f2f2}
#hoja .nota-sust{font-size:7.6pt;font-style:italic}
/* Con reemplazos el cuadro crece hasta seis renglones: se comprime para
   que la hoja no pase de dos planas. */
#hoja table.b.compacta td,#hoja table.b.compacta th{padding:.9mm 1.6mm;font-size:8.2pt}
#hoja .pag.densa .sello{padding:2mm 3mm}
#hoja .pag.densa .sello ul{margin:.8mm 0 .4mm}
#hoja .pag.densa .consid{font-size:8.8pt}
#hoja .pag.densa .consid li{margin-bottom:.4mm}
#hoja table.cat{margin:1.5mm 0 0;table-layout:fixed}
#hoja table.cat td{border:.6pt solid #333;padding:.95mm 1mm;font-size:7.6pt;
  text-align:center;width:20%;line-height:1.15}
#hoja h4{font-size:9.5pt;text-align:center;margin:3mm 0 0;letter-spacing:.02em}

/* --- textos y firmas --- */
#hoja .consid{font-size:9pt;margin-top:2.5mm}
#hoja ul{margin:1.5mm 0 0 5mm;font-size:9pt}
#hoja li{margin-bottom:.9mm}
#hoja .firmas{display:flex;justify-content:space-between;margin-top:11mm;font-size:9pt;font-weight:bold}
#hoja .firmas div{width:46%;border-top:1pt solid #000;padding-top:1.2mm;text-align:center}
#hoja .sello{border:1.2pt solid #000;padding:2.2mm 3mm;margin-top:3mm;font-size:8.5pt;font-family:Arial,sans-serif}
#hoja .sello b{font-size:9pt;letter-spacing:.04em}
#hoja .sello ul{font-size:8pt;margin:1mm 0 0 4mm}
#hoja .sello .pie{font-size:7.2pt;margin-top:1.2mm;color:#333}
#hoja .emision{text-align:center;font-size:7.2pt;margin-top:2.5mm;
  font-family:Arial,sans-serif;color:#444}

/* =====================================================================
   DÍAS DE TRATAMIENTO · medidor del panel PROA
   Tres estados. El color nunca va solo: siempre lo acompaña el ícono y
   la palabra, porque en el mismo panel ya hay ámbar y rojo marcando la
   categoría del antimicrobiano. Las clases van con prefijo d- para no
   chocar con el componente .aviso de la interfaz.
   ===================================================================== */
/* Indicador de días: la misma pastilla que las categorías, para que la
   tabla tenga un solo lenguaje visual. Dos tamaños de letra en total. */
.dias{min-width:118px}
.dias .badge.b-dia{color:#475569;background:#f1f5f9;border-color:#e2e8f0}
.dias .badge.b-dia i{margin-right:4px;font-size:10px;opacity:.9}
.dias .sub{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.dias.d-aviso .badge.b-dia{color:var(--vigilancia);background:var(--vigilancia-bg);
  border-color:var(--vigilancia-bd)}
.dias.d-aviso .sub{color:#a16207}

.dias.d-vencido .badge.b-dia{color:var(--reserva);background:var(--reserva-bg);
  border-color:var(--reserva-bd)}
.dias.d-vencido .sub{color:#b91c1c}

.dias.d-inactivo{opacity:.65}

tr.tr-aviso > td:first-child{box-shadow:inset 3px 0 0 #fab219}
tr.tr-vencido > td:first-child{box-shadow:inset 3px 0 0 #d03b3b}

/* =====================================================================
   HISTORIAL DEL PACIENTE
   Paleta de la línea de tiempo validada para daltonismo y contraste;
   cada barra lleva además el nombre del fármaco escrito y su fila en la
   tabla de abajo.
   ===================================================================== */
.hist{--viz-acceso:#059669;--viz-vigilancia:#ca8a04;--viz-reserva:#dc2626}
.hist .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-bottom:14px}
.hist .tile{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.hist .tile .n{font-size:26px;font-weight:600;line-height:1.05;color:var(--txt);
  font-family:'JetBrains Mono',monospace}
.hist .tile .l{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3}
.hist .leyenda{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--muted);margin:2px 0 14px}
.hist .leyenda span{display:flex;align-items:center;gap:5px}
.hist .leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.12)}
.hist .linea{position:relative;padding-top:20px}
.hist .eje{position:relative;height:16px;border-bottom:1px solid var(--line);margin-bottom:10px}
.hist .eje span{position:absolute;top:0;font-size:10.5px;color:var(--muted);white-space:nowrap}
.hist .eje span.ini{left:0}
.hist .eje span.med{left:50%;transform:translateX(-50%)}
.hist .eje span.fin{right:0}
.hist .curso{margin-bottom:11px}
.hist .curso .nom{font-size:12.5px;color:var(--txt);display:flex;gap:7px;align-items:baseline;
  margin-bottom:4px;flex-wrap:wrap}
.hist .curso .nom em{font-style:normal;color:var(--muted);font-size:11px}
.hist .pista{position:relative;height:15px;background:#f1f5f9;border-radius:5px;overflow:hidden}
.hist .pista b{position:absolute;top:0;bottom:0;border-radius:5px;min-width:5px;
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.14)}
.hist .hoy{position:absolute;top:36px;bottom:0;width:2px;background:var(--sidebar);opacity:.5}
.hist .hoy em{position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-style:normal;
  font-size:10px;color:var(--sidebar);opacity:.75;background:#fff;padding:0 3px}

/* ---------------- intervenciones del programa ---------------- */
.intervbox{margin-top:16px;padding:13px 14px;border:1px solid var(--line);
  border-radius:9px;background:#f8fafc}
.intervhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px}
.intervhead b{font-size:13.5px}
.intervhead span{font-size:12px;color:#0369a1;background:#e0f2fe;border-radius:20px;
  padding:2px 9px;line-height:1.5}
.intervhead span:empty{display:none}
.intervgrupo{margin-bottom:9px}
.intervgrupo .gtit{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 11px 4px 9px;
  transition:background .12s,border-color .12s}
.chip:hover{border-color:#94a3b8}
.chip input{margin:0;width:13px;height:13px;accent-color:var(--primary)}
.chip:has(input:checked){background:#e0f2fe;border-color:#38bdf8;color:#075985;font-weight:600}
@media (max-width:640px){ .chips{gap:5px} .chip{font-size:12px;padding:4px 9px} }

/* --------- analítica: intervenciones --------- */
table.data th.num, table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
.pie-nota{padding:0 15px 13px;font-size:11.5px;color:var(--muted)}
.pastilla{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;border-radius:20px;
  padding:1px 8px;white-space:nowrap}
.pastilla.auto{background:#eef2ff;color:#3730a3}
.pastilla.mano{background:#ecfeff;color:#155e75}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
td .nota-int{color:var(--muted);font-size:12px}
table.data td.mono{white-space:nowrap}

/* Nota institucional discreta, en lugar de un recuadro de advertencia */
.nota-pie{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);
  line-height:1.55;margin:0 0 14px;padding:0 2px}
.nota-pie i{margin-top:2px;opacity:.7;flex:none}

/* ---------------- línea de tiempo de la solicitud ---------------- */
.pasos{display:flex;list-style:none;margin:0;padding:0;gap:0}
.paso{flex:1 1 0;min-width:0;position:relative;padding-right:12px}
/* el conector va a la altura del punto, y el texto queda debajo: así no
   pasa una línea por detrás de las palabras */
.paso::after{content:'';position:absolute;left:30px;right:8px;top:12px;height:2px;
  background:#e5e7eb;border-radius:2px}
.paso:last-child::after{display:none}
.paso .pt{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;background:#fff;border:2px solid #e5e7eb;color:#94a3b8;
  position:relative;z-index:1}
.paso .pd{margin-top:7px;min-width:0}
.paso .pd b{display:block;font-size:12.5px;font-weight:600;color:var(--txt);line-height:1.3}
.paso .pd span{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:1px}

.paso.p-hecho .pt{background:var(--primary);border-color:var(--primary);color:#fff}
.paso.p-hecho::after{background:var(--primary);opacity:.3}
.paso.p-actual .pt{border-color:var(--primary);color:var(--primary);
  box-shadow:0 0 0 3px rgba(2,132,199,.15)}
.paso.p-curso .pt{background:#0f766e;border-color:#0f766e;color:#fff}
.paso.p-curso .pd b{color:#0f766e}
.paso.p-aviso .pt{background:#fab219;border-color:#fab219;color:#fff;
  box-shadow:0 0 0 3px rgba(250,178,25,.22)}
.paso.p-aviso .pd b{color:#92400e}
.paso.p-fin .pt{background:#64748b;border-color:#64748b;color:#fff}
.paso.p-malo .pt{background:#d03b3b;border-color:#d03b3b;color:#fff}
.paso.p-malo .pd b{color:#991b1b}
.paso.p-nulo{opacity:.55}

@media(max-width:760px){
  .pasos{flex-direction:column;gap:0}
  .paso{display:flex;align-items:flex-start;gap:10px;padding:0 0 14px}
  .paso:last-child{padding-bottom:0}
  .paso::after{left:12px;top:30px;bottom:2px;right:auto;width:2px;height:auto}
  .paso .pt{flex:none}
  .paso .pd{margin-top:3px}
}

/* aviso de término sobre la tarjeta */
.fin-aviso{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;
  border-radius:8px;padding:9px 11px;margin-bottom:13px;border:1px solid}
.fin-aviso i{margin-top:2px;flex:none}
.fin-aviso a{font-weight:600}
.fin-aviso.f-aviso{background:#fffbeb;border-color:#fde68a;color:#92400e}
.fin-aviso.f-aviso a{color:#92400e}
.fin-aviso.f-vencido{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.fin-aviso.f-vencido a{color:#991b1b}
/* campo de solo lectura con el mismo alto que un input */
.lectura{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;
  font-size:14px;color:var(--txt);min-height:39px;display:flex;align-items:center}

/* ---------------- extensiones pendientes ---------------- */
.ext{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:10px;
  background:#fffdf6}
.ext:last-child{margin-bottom:0}
.ext-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:7px}
.ext-top b{font-size:14px}
.ext-cta{font-size:12.5px;color:var(--txt)}
.ext-uni{font-size:12.5px;color:var(--muted)}
.ext-pide{margin-left:auto;font-size:13px;font-weight:650;color:#92400e;
  background:#fef3c7;border:1px solid #fde68a;border-radius:20px;padding:2px 11px;
  font-variant-numeric:tabular-nums}
.ext-just{font-size:13px;line-height:1.5;color:var(--txt);padding:8px 11px;background:#fff;
  border:1px solid var(--line);border-radius:7px;margin-bottom:8px}
.ext-pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:11.5px;
  color:var(--muted)}
.ext-pie i{opacity:.75;margin-right:3px}
.ext-pie .btn{margin-left:auto}
.ext-nofirma{margin-left:auto;font-style:italic}
@media(max-width:640px){
  .ext-pide{margin-left:0}
  .ext-pie{gap:8px}
  .ext-pie .btn,.ext-nofirma{margin-left:0;width:100%}
}
.pastilla.falta{background:#fef2f2;color:#991b1b;font-weight:600}
.card > h2 .mono{white-space:nowrap}

/* Buscador: campo y botón en la misma línea y a la misma altura. Antes el
   botón se alineaba con el pie de ayuda del campo, no con el campo. */
.buscador{display:flex;gap:8px;align-items:stretch}
.buscador input{flex:1 1 auto;min-width:0}
.buscador .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:520px){ .buscador{flex-wrap:wrap} .buscador .btn{width:100%} }

/* Pie institucional: presente sin llamar la atención */
footer.pie{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;
  padding:26px 18px 30px;margin-top:14px;font-size:11.5px;color:#94a3b8;line-height:1.6;
  text-align:center;border-top:1px solid var(--line);background:transparent}
footer.pie b{font-weight:600;color:#64748b}
footer.pie .sep{opacity:.5}
@media(max-width:620px){ footer.pie{gap:2px} footer.pie .sep{display:none} footer.pie span{width:100%} }

/* --------- cuenta corriente: la advertencia y su contraste ---------
   Sutil por defecto; solo sube de tono cuando hay algo que mirar. */
.hint.hint-clave{display:flex;gap:6px;align-items:flex-start;color:#92400e}
.hint.hint-clave i{margin-top:2px;flex:none;opacity:.85;font-size:11px}
.ctachk{font-size:11.5px;line-height:1.45;margin-top:5px;display:flex;gap:6px;
  align-items:flex-start;border-radius:6px;padding:0}
.ctachk:empty{display:none}
.ctachk i{margin-top:2px;flex:none}
.ctachk span{min-width:0}
.ctachk.c-espera{color:var(--muted)}
.ctachk.c-nueva{color:#475569}
.ctachk.c-ok{color:#065f46}
.ctachk.c-ojo{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;padding:7px 9px;
  font-size:12px;font-weight:500}

/* --------- reemplazo dirigido dentro de la misma solicitud --------- */
.reemp{margin-top:10px;padding:10px 12px;border:1px dashed #93c5fd;border-radius:8px;
  background:#f0f9ff}
.reemp .chkline{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;
  color:#075985;font-weight:500}
.reemp .chkline input{width:14px;height:14px;margin:0;accent-color:var(--primary)}
.reemp .campos{margin-top:10px}
.reemp.hecho{display:flex;gap:9px;align-items:flex-start;border-style:solid;
  border-color:#a7f3d0;background:#ecfdf5;font-size:12.5px;line-height:1.5;color:#065f46}
.reemp.hecho i{margin-top:3px;flex:none}
.reemp.hecho b{display:block}
.reemp.hecho .pie{color:#047857;font-size:11.5px;margin-top:2px}
.chkline{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;color:var(--txt)}
.chkline input{width:14px;height:14px;margin:0;accent-color:var(--primary)}

/* --------- farmacia: seguimiento diario y cálculo --------- */
.segdisp{border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:#f8fafc}
.segdisp .cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:8px}
.segdisp .cab b{font-size:13.5px}
.segdisp .cab span{margin-left:auto;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.segdisp .barra{height:5px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.segdisp .barra i{display:block;height:100%;border-radius:999px;background:#64748b}
.segdisp .pie{display:flex;flex-wrap:wrap;gap:13px;margin-top:8px;font-size:11.5px;
  color:var(--muted);font-variant-numeric:tabular-nums}
.segdisp .pie b{color:var(--txt);font-size:12.5px}
.segdisp .obs{display:flex;gap:7px;align-items:flex-start;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line);font-size:12px;color:#92400e;line-height:1.45}
.segdisp .obs i{margin-top:2px;flex:none}
.segdisp.s-ok{border-color:#a7f3d0;background:#f0fdf9}
.segdisp.s-ok .cab b{color:#065f46} .segdisp.s-ok .barra i{background:#059669}
.segdisp.s-atraso{border-color:#fecaca;background:#fef2f2}
.segdisp.s-atraso .cab b{color:#991b1b} .segdisp.s-atraso .barra i{background:#d03b3b}
.segdisp.s-hd{border-color:#bae6fd;background:#f0f9ff}
.segdisp.s-hd .cab b{color:#075985} .segdisp.s-hd .barra i{background:#0284C7}

.calc{display:flex;gap:7px;align-items:flex-start;margin-top:9px;font-size:12px;
  line-height:1.45;border-radius:7px;padding:8px 10px}
.calc:empty{display:none}
.calc i{margin-top:2px;flex:none}
.calc.c-ok{background:#f0f9ff;border:1px solid #bae6fd;color:#0c4a6e}
.calc.c-no{background:#fffbeb;border:1px solid #fde68a;color:#92400e}

/* --------- informe mensual del programa --------- */
#informe{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 30px;
  margin-top:14px;font-family:'Times New Roman',Georgia,serif;color:#111;font-size:13px;line-height:1.45}
.inf-cab{display:grid;grid-template-columns:52mm 1fr 52mm;align-items:center;gap:10px;
  border-bottom:2.5px solid #000;padding-bottom:10px;margin-bottom:16px}
.inf-logo{font-size:10px;line-height:1.25;border-right:1px solid #999;padding-right:10px}
.inf-logo b{display:block;font-size:11px;letter-spacing:.02em}
.inf-tit{text-align:center;font-weight:bold;letter-spacing:.06em;font-size:13.5px;line-height:1.4}
.inf-tit span{display:block}
#informe h3{font-size:13px;margin:18px 0 7px;letter-spacing:.03em;border-bottom:1px solid #bbb;
  padding-bottom:3px}
.inf-t{width:100%;border-collapse:collapse;margin-bottom:4px}
.inf-t td,.inf-t th{padding:4px 8px;border-bottom:1px solid #e7e7e7;font-size:12.5px;vertical-align:top}
.inf-t td.n,.inf-t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inf-t thead th{font-size:11.5px;border-bottom:1.2px solid #999;text-align:left}
.inf-t.serie tr.act{background:#f2f7fb;font-weight:600}
.d-sube{color:#991b1b;font-size:11px} .d-baja{color:#065f46;font-size:11px}
.d-igual{color:#6b7280;font-size:11px}
.inf-nota{font-size:11px;color:#555;margin-top:14px;line-height:1.5}
.inf-firmas{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px;text-align:center;
  font-size:11px;font-weight:bold}
.inf-firmas div{border-top:1px solid #000;padding-top:5px}
.inf-pie{text-align:center;font-size:10px;color:#666;margin-top:16px}
@media print{
  #hoja .inf-pag #informe{border:0;padding:0;margin:0;border-radius:0}
  #hoja .inf-pag{page-break-after:auto}
}

/* ---------- listado de pacientes con antimicrobianos en curso ----------
   Los filtros van en una fila que se parte en móvil, y la tabla marca con
   una línea dónde empieza cada paciente: al ser varias filas por persona,
   sin esa separación se leen como una sola lista continua. */
.filtros-act{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin-bottom:10px}
.filtros-act input{flex:1 1 220px;min-width:0}
.filtros-act select{flex:0 1 auto;width:auto}
@media(max-width:560px){ .filtros-act > *{flex:1 1 100%} .filtros-act .ver-anul{flex:1 1 100%} }

table.data tr.sep-pac > td{border-top:1px solid var(--line)}
table.data tr.sep-pac:first-child > td{border-top:0}
#a_tb .atb-n,#a_tb .sar-n,#a_tb .queda-n{display:block}
#a_tb .sar-n,#a_tb .queda-n{margin-top:2px}
#a_tb .atraso{color:var(--reserva);font-size:11px;font-weight:600;display:block;white-space:nowrap}
#a_scroll > table{min-width:900px}

/* En la tabla, la fila que repite al paciente de arriba dice «idem». */
#a_tb .marca-idem{display:none;color:#cbd5e1;font-size:11px;font-style:italic}
#a_tb tr.rep .marca-idem{display:inline}
#a_tb tr.rep .dato-pac{display:none}

/* En el teléfono la tabla no sirve: las columnas de días —que son el motivo
   de mirar esta pantalla— quedaban fuera del borde y había que arrastrar
   para verlas. Cada fila pasa a ser una tarjeta, con los días etiquetados y
   a la vista. Ahí «idem» no tiene a qué referirse, así que cada tarjeta
   vuelve a nombrar a su paciente. */
@media(max-width:640px){
  #a_scroll{max-height:none;overflow:visible}
  #a_scroll > table{min-width:0;display:block}
  #a_scroll thead{display:none}
  #a_tb{display:block}
  #a_tb tr{display:block;border:1px solid var(--line);border-radius:10px;
           padding:11px 13px;margin-bottom:10px;background:#fff}
  #a_tb tr:hover td{background:transparent}
  #a_tb tr.tr-aviso{border-left:3px solid #fab219}
  #a_tb tr.tr-vencido{border-left:3px solid #d03b3b}
  #a_tb tr.sep-pac > td,#a_tb tr > td{border-top:0;border-bottom:0;box-shadow:none}
  #a_tb td{display:block;padding:2px 0}
  #a_tb tr.rep .marca-idem{display:none}
  #a_tb tr.rep .dato-pac{display:inline}
  #a_tb td[data-l="Paciente"]{font-size:14px;margin-bottom:1px}
  #a_tb td.ubic{font-size:12px;color:var(--muted);margin-bottom:7px}
  #a_tb td[data-l="Antimicrobiano"]{margin-bottom:7px}
  #a_tb td[data-l="Tratamiento"]{margin-bottom:8px}
  #a_tb td.num,#a_tb td.fin-n{display:flex;justify-content:space-between;
           align-items:baseline;gap:10px;padding:3px 0;border-top:1px dashed #f1f3f5}
  #a_tb td.num::before,#a_tb td.fin-n::before{content:attr(data-l);font-family:Outfit,system-ui,sans-serif;
           font-size:11.5px;font-weight:600;color:var(--muted)}
  #a_tb td.num .atraso{display:inline;margin-left:6px}
  #a_tb td.acc{margin-top:9px}
  #a_tb td.acc .btn{width:100%;justify-content:center}
}

/* ---------- trazabilidad de dispensaciones ----------------------------
   La fila anulada no desaparece: se atenúa y se tacha la cantidad. Tiene
   que seguir leyéndose —para eso se anula en vez de borrar— pero sin
   competir con las entregas que sí cuentan. */
.btn.d{border-color:#fecaca;color:#dc2626}
.btn.d:hover{background:#fef2f2;border-color:#fca5a5}
.pastilla.mala{background:#fef2f2;color:#991b1b;font-weight:600}
h3.sub-t{font-size:13px;font-weight:600;color:var(--muted);margin:18px 0 9px;
  display:flex;align-items:center;gap:7px}
#h_tb tr.anul > td{background:#fcfcfd;color:var(--muted)}
#h_tb tr.anul > td:first-child{box-shadow:inset 3px 0 0 #fecaca}
#h_tb tr.anul .mono b,#h_tb tr.anul td.num{text-decoration:line-through}
#h_tb .atb-n,#h_tb .nota-int{display:block}
#h_tb td.num .nota-int{font-size:11px}
#cardHist .filtros-act{margin-bottom:6px}
.filtros-act .ver-anul{flex:0 0 auto;align-self:center;justify-content:flex-start;white-space:nowrap}
.filtros-act .ver-anul span{flex:0 0 auto}
#cardHist .kpis{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
#h_scroll > table{min-width:960px}

/* En el teléfono, cada entrega es una tarjeta con sus datos etiquetados:
   la tabla obliga a arrastrar justo donde están la cantidad y el autor. */
@media(max-width:640px){
  #h_scroll,#h_porQuien .tabla-scroll{max-height:none;overflow:visible}
  #h_scroll > table,#h_porQuien table{min-width:0;display:block}
  #h_scroll thead,#h_porQuien thead{display:none}
  #h_tb,#h_porQuien tbody{display:block}
  #h_tb tr,#h_porQuien tbody tr{display:block;border:1px solid var(--line);border-radius:10px;
    padding:11px 13px;margin-bottom:10px;background:#fff}
  #h_tb tr:hover td,#h_porQuien tr:hover td{background:transparent}
  #h_tb tr.anul{border-left:3px solid #fecaca}
  #h_tb td,#h_porQuien td{display:block;padding:2px 0;border-bottom:0}
  #h_tb tr.anul > td:first-child{box-shadow:none}
  #h_tb td.num,#h_porQuien td.num{display:flex;justify-content:space-between;align-items:baseline;
    gap:10px;padding:3px 0;border-top:1px dashed #f1f3f5}
  #h_tb td.num::before,#h_porQuien td.num::before{content:attr(data-l);
    font-family:Outfit,system-ui,sans-serif;font-size:11.5px;font-weight:600;color:var(--muted)}
  #h_tb td.num .nota-int{display:inline;margin-left:6px}
  #h_tb td.acc{margin-top:9px}
  #h_tb td.acc .btn{width:100%;justify-content:center}
}

/* ---- Solicitudes (buscador general) y etapas del flujo ---- */
.badge.e-en_evaluacion{color:#4338ca;background:#eef2ff;border-color:#c7d2fe}
.badge.e-autorizado_sin_dispensar{color:#0369a1;background:#f0f9ff;border-color:#bae6fd}
.badge.e-en_tratamiento{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}
.badge.e-terminado{color:#374151;background:#f3f4f6;border-color:#d1d5db}
.badge.e-rechazado,.badge.e-fuera_del_registro{color:#991b1b;background:#fef2f2;border-color:#fecaca}
.badge.e-reemplazado{color:#92400e;background:#fffbeb;border-color:#fde68a}
.badge.e-suspendido{color:#374151;background:#f3f4f6;border-color:#d1d5db}
.seg-ok{color:#065f46;font-size:12px;font-weight:600}
.seg-pend{color:var(--primary);font-size:12px;font-weight:600}
.seg-aviso{color:var(--reserva);font-size:12px;font-weight:600}
.seg-fin{color:var(--muted);font-size:12px}
.seg-nota{color:var(--muted);font-size:11.5px}
.tb-seg tr.l-reemp td{color:var(--muted)}
.tb-seg tr.l-reemp td:first-child{text-decoration:none}
a.btn.chico{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
@media(max-width:640px){
  .tb-seg thead{display:none}
  .tb-seg tr{display:block;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px}
  .tb-seg td{display:block;border:0;padding:3px 0}
  .tb-seg td::before{content:attr(data-l);display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
  .pasos{flex-direction:column}
}
@media(max-width:640px){
  .card > h2{flex-wrap:wrap}
  .card > h2 .der{flex:1 1 100%;margin-left:0;font-size:12px;line-height:1.4;white-space:normal}
  .card > h2 .der .mono{white-space:normal}
}
/* Rejillas fijas de KPI: en pantalla ancha mantienen sus columnas; en
   pantalla angosta caen a dos, como el resto (antes iban en línea y el
   estilo en línea ganaba a la regla móvil). */
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k6{grid-template-columns:repeat(6,1fr)}
@media(max-width:860px){.kpis.k4,.kpis.k6{grid-template-columns:repeat(2,1fr)}}
/* Pestañas: con siete secciones ya no caben en un teléfono. Se deslizan
   de lado en vez de ensanchar toda la página. */
nav.tabs .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav.tabs .wrap::-webkit-scrollbar{display:none}
nav.tabs a{white-space:nowrap;flex:0 0 auto}
@media(max-width:640px){
  header.app .usr{flex-wrap:wrap;justify-content:flex-end;gap:6px}
}
/* Tablas de seguimiento dentro de un contenedor con scroll: en teléfono
   pasan a tarjetas y no deben heredar el ancho mínimo de la tabla. */
@media(max-width:640px){ .tabla-scroll > table.tb-seg{min-width:0} }