/* ============================================================================
   SimuLab LIS — Sistema de diseño (v2)
   Identidad "instrumento diagnóstico": neutros fríos + primario teal, IBM Plex.
   Tema claro y oscuro. Los nombres de clase se mantienen para no tocar plantillas.
   ========================================================================== */

:root{
  /* Superficies y texto */
  --bg:#eef3f2; --surface:#ffffff; --surface-2:#f5f9f8;
  --ink:#122420; --muted:#5a6b67;
  --border:#d4ddda; --border-strong:#bcc7c3;
  /* Marca / primario */
  --primary:#0c7b76; --primary-strong:#095e5a; --primary-tint:#dcefed; --on-primary:#ffffff;
  /* Semánticos */
  --critical:#c0362c; --critical-tint:#f7e3e0;
  --warn:#9a5c00;    --warn-tint:#f6ead2;
  --ok:#1f7a4d;      --ok-tint:#dcefe4;
  --info:#0b6ea8;    --info-tint:#dcecf7;
  --accent:#4527a0;  --accent-tint:#ece0f7;
  /* Utilidades */
  --shadow:0 1px 2px rgba(18,36,32,.06), 0 6px 20px rgba(18,36,32,.05);
  --radius:10px; --radius-sm:7px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
  /* Nombres del estilo anterior que siguen en estilos inline de algunas
     plantillas (validación, ingreso, informe, login): alias a los tokens v2. */
  --stat:var(--critical); --azul-osc:var(--primary-strong); --borde:var(--border); --texto:var(--ink);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1a18; --surface:#152522; --surface-2:#1b2e2a;
  --ink:#e7efed; --muted:#9db0ab; --border:#26403b; --border-strong:#375853;
  --primary:#26b6ad; --primary-strong:#54ccc4; --primary-tint:#103a37; --on-primary:#04211f;
  --critical:#e77163; --critical-tint:#38201d;
  --warn:#e0a53a; --warn-tint:#332813;
  --ok:#54b487; --ok-tint:#123326;
  --info:#7cc0ec; --info-tint:#123047;
  --accent:#c8a6ee; --accent-tint:#2a1d3d;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.28);
}}
:root[data-theme="dark"]{
  --bg:#0e1a18; --surface:#152522; --surface-2:#1b2e2a;
  --ink:#e7efed; --muted:#9db0ab; --border:#26403b; --border-strong:#375853;
  --primary:#26b6ad; --primary-strong:#54ccc4; --primary-tint:#103a37; --on-primary:#04211f;
  --critical:#e77163; --critical-tint:#38201d;
  --warn:#e0a53a; --warn-tint:#332813;
  --ok:#54b487; --ok-tint:#123326;
  --info:#7cc0ec; --info-tint:#123047;
  --accent:#c8a6ee; --accent-tint:#2a1d3d;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
body{font-family:var(--sans); margin:0; color:var(--ink); background:var(--bg);
  line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:var(--primary-strong)}
::selection{background:var(--primary-tint)}

/* ---------- Topbar / header ---------- */
header{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:11px clamp(14px,2.5vw,22px);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--border)}
header .marca{font-weight:700; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink)}
header nav{display:flex; flex-wrap:wrap; gap:2px; align-items:center}
header nav a{color:var(--muted); text-decoration:none; margin:0; font-size:.86rem; font-weight:500;
  padding:6px 10px; border-radius:var(--radius-sm); white-space:nowrap}
header nav a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
header nav a.active{color:var(--primary-strong); background:var(--primary-tint); font-weight:600}
header .sesion{margin-left:auto; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:9px}
header .sesion .rol{background:var(--primary-tint); color:var(--primary-strong); padding:2px 9px;
  border-radius:999px; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
header .sesion a{color:var(--primary-strong); text-decoration:none; font-weight:600}
header .sesion a:hover{text-decoration:underline}

/* ---------- Menú por fase ----------
   Tres fases en el orden del recorrido (1 › 2 › 3) como desplegables nativos
   (<details>); Docencia y Configuración aparte. */
header details.menu{position:relative}
header details.menu > summary{list-style:none; cursor:pointer; color:var(--muted); font-size:.86rem;
  font-weight:500; padding:6px 10px; border-radius:var(--radius-sm); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; user-select:none}
header details.menu > summary::-webkit-details-marker{display:none}
header details.menu > summary::after{content:"▾"; font-size:.7rem; opacity:.7}
header details.menu > summary:hover,
header details.menu[open] > summary{color:var(--ink); background:var(--surface-2)}
header details.menu.activo > summary{color:var(--primary-strong); background:var(--primary-tint); font-weight:600}
header .paso{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  border:1.5px solid currentColor; font-size:.66rem; font-weight:700; font-family:var(--mono); line-height:1}
header .fases{display:inline-flex; align-items:center}
header .fases > .menu + .menu{margin-left:14px}
header .fases > .menu + .menu::before{content:"›"; position:absolute; left:-11px; top:50%;
  transform:translateY(-50%); color:var(--border-strong); font-size:1rem; pointer-events:none}
.menu-panel{position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:240px;
  display:flex; flex-direction:column; padding:6px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
header nav .menu-panel a{display:block; color:var(--ink); padding:7px 10px; white-space:normal; font-weight:500}
header nav .menu-panel a small{display:block; color:var(--muted); font-size:.74rem; font-weight:400}
header nav .menu-panel a.active small{color:inherit; opacity:.8}
.menu-panel hr{border:0; border-top:1px solid var(--border); margin:4px 2px}
/* Con todos los grupos (docente/admin) el menú no cabe en una fila junto al
   nombre: bajo 1440px queda la insignia del rol, con el nombre como tooltip. */
@media (max-width:1440px){ header .sesion .nombre{display:none} }

main{max-width:1040px; margin:0 auto; padding:22px clamp(16px,3vw,28px) 56px}
h1{font-size:1.5rem; font-weight:600; letter-spacing:-.01em; margin:.1rem 0 1.1rem; text-wrap:balance}
h2{font-size:1.1rem; font-weight:600; margin:1.4rem 0 .7rem; text-wrap:balance}
h3{font-size:1rem; font-weight:600; margin:1rem 0 .4rem}
h3.area{color:var(--primary-strong); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em;
  margin:1.1rem 0 .4rem}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; margin-bottom:1rem; box-shadow:var(--shadow)}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden}
th,td{text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--border); font-size:.9rem}
th{background:var(--surface-2); color:var(--muted); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}

/* ---------- Formularios ---------- */
label{display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin:.6rem 0 .2rem;
  letter-spacing:.01em}
input,select,textarea{width:100%; padding:.5rem .6rem; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.92rem; font-family:inherit; background:var(--surface); color:var(--ink)}
textarea{font-family:inherit}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible,.btn:focus-visible{outline:2px solid var(--primary); outline-offset:1px}
.row{display:flex; gap:1rem; flex-wrap:wrap}
.row>div{flex:1; min-width:180px}

/* ---------- Botones ---------- */
button,.btn{display:inline-flex; align-items:center; gap:7px; background:var(--primary); color:var(--on-primary);
  border:1px solid var(--primary); padding:.5rem .9rem; border-radius:var(--radius-sm); font-size:.88rem;
  font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit; line-height:1.2}
button:hover,.btn:hover{background:var(--primary-strong); border-color:var(--primary-strong)}
.btn.sec{background:transparent; color:var(--primary-strong); border:1px solid var(--border-strong)}
.btn.sec:hover{background:var(--surface-2)}
.btn.warn{background:var(--warn); border-color:var(--warn); color:#fff}
.btn.warn:hover{filter:brightness(.94)}
.btn.mini,.btn.sm{padding:.3rem .6rem; font-size:.78rem}
.btn.ghost,.btn-ghost{background:transparent; color:var(--primary-strong); border:1px solid var(--border-strong)}
.btn.ghost:hover,.btn-ghost:hover{background:var(--surface-2)}

/* ---------- Badges de estado ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:.15rem .55rem; border-radius:999px;
  font-size:.72rem; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--muted)}
.b-registrado{background:var(--surface-2); color:var(--muted); border-color:var(--border)}
.b-etiquetado{background:var(--info-tint); color:var(--info); border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.b-tomado{background:var(--warn-tint); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.b-en_proceso{background:var(--info-tint); color:var(--info); border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.b-recepcionado{background:var(--ok-tint); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.b-resultado_ingresado{background:var(--accent-tint); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.b-validado{background:var(--ok-tint); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.b-liberado{background:var(--primary); color:var(--on-primary); border-color:var(--primary)}
.b-anulado{background:var(--surface-2); color:var(--muted); border-color:var(--border-strong); text-decoration:line-through}
.b-rechazado{background:var(--critical-tint); color:var(--critical); border-color:color-mix(in srgb,var(--critical) 28%,transparent)}
.estado-chip{display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px;
  font-size:.72rem; font-weight:600; background:var(--surface-2); border:1px solid var(--border); color:var(--muted)}
.stat{background:var(--critical); color:#fff; padding:.1rem .45rem; border-radius:4px; font-weight:700;
  font-size:.7rem; letter-spacing:.03em}

/* ---------- Tiles (KPIs) ---------- */
.tiles{display:flex; gap:1rem; flex-wrap:wrap}
.tile{flex:1; min-width:150px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; text-align:center; box-shadow:var(--shadow)}
.tile .n{font-size:2rem; font-weight:700; color:var(--primary-strong); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.tile .n small{font-size:1rem; color:var(--muted)}
.tile .t{color:var(--muted); font-size:.82rem}

/* ---------- Callouts / errores ---------- */
.error{background:var(--critical-tint); color:var(--critical); padding:.6rem .85rem; border-radius:var(--radius-sm);
  margin-bottom:.9rem; font-size:.9rem; border:1px solid color-mix(in srgb,var(--critical) 25%,transparent)}

/* ---------- Selección de prestaciones ---------- */
.presta{border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .7rem; margin-bottom:.5rem;
  background:var(--surface)}
.presta label{display:flex; align-items:center; gap:.5rem; color:var(--ink); margin:.15rem 0; cursor:pointer;
  font-weight:500; font-size:.9rem; text-transform:none; letter-spacing:0}
.presta input{width:auto}

/* ---------- Flags de resultado ---------- */
.f-normal{color:var(--ink)}
.f-bajo,.f-alto{color:var(--warn); font-weight:600}
.f-critico,.f-critico_bajo,.f-critico_alto{color:#fff; background:var(--critical); padding:.1rem .4rem;
  border-radius:4px; font-weight:700; font-size:.85em}
.valor{font-weight:600; font-variant-numeric:tabular-nums; font-family:var(--mono)}

/* ---------- Código / HL7 ---------- */
code,.mono{font-family:var(--mono)}
code{background:var(--surface-2); padding:.05rem .3rem; border-radius:4px; font-size:.86em; color:var(--primary-strong)}
pre.trama{background:#0c1f1d; color:#7fe0c9; padding:.75rem .85rem; border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:.8rem; line-height:1.45; white-space:pre-wrap; word-break:break-all;
  overflow-x:auto; margin:.4rem 0; border:1px solid #123c37}
pre.trama.mini{font-size:.75rem; padding:.5rem .6rem}
.seg{display:inline-block; background:var(--primary-strong); color:var(--on-primary); font-weight:700;
  padding:.1rem .45rem; border-radius:4px; font-family:var(--mono); font-size:.78rem}

/* ---------- Adjuntos ---------- */
.miniatura{width:100%; max-height:150px; object-fit:cover; border:1px solid var(--border);
  border-radius:var(--radius-sm); display:block; margin-bottom:.25rem}

/* Datos clínicos de la orden: diagnóstico y preguntas al pedir. */
.datos-clinicos{display:grid; gap:.35rem; margin:.6rem 0 1rem; padding:.7rem .9rem;
  border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:0;
  background:var(--surface); font-size:.9rem}
.datos-clinicos code{font-weight:600}
.dc-rotulo{display:inline-block; min-width:9.5rem; color:var(--muted); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em}
.dc-chips{display:flex; flex-wrap:wrap; gap:6px}
.dc-chips:empty{display:none}
.dc-chip{padding:.12rem .55rem; border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border)}
.dc-alerta{background:var(--warn-tint); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 30%,transparent)}

/* Adjuntos en la validación: grandes para poder leer un citograma o un cromatograma. */
.adjuntos-grilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:12px; margin-top:.6rem}
.adjuntos-grilla figure{margin:0; display:grid; gap:6px; align-content:start}
.adjuntos-grilla img{width:100%; max-height:260px; object-fit:contain; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm)}
.adjuntos-grilla a.pdf{display:grid; place-items:center; min-height:120px; border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface-2); font-weight:600; text-decoration:none}
.adjuntos-grilla figcaption{font-size:.82rem}

/* ---------- Utilidades ---------- */
.muted,.text-dim,.text-sec{color:var(--muted); font-size:.85rem}
.flex{display:flex} .gap-1{gap:.5rem}
.page-header{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:1rem}
.page-header h1{margin:0}

/* ---------- Seguir un folio (buscador de la barra superior) ---------- */
.buscar-folio{margin:0}
.buscar-folio input{width:9rem; padding:.3rem .55rem; font-size:.82rem; font-family:var(--mono)}
.buscar-folio input::placeholder{font-family:var(--sans)}
@media (max-width:720px){
  header{flex-wrap:wrap; row-gap:8px}
  header nav{order:3; width:100%}
  .buscar-folio input{width:8.5rem}
  header .fases{flex-wrap:wrap}
  header details.menu[open]{flex-basis:100%}
  .menu-panel{position:static; box-shadow:none; margin:4px 0 6px}
}
a.folio{font-weight:600; font-family:var(--mono); font-size:.92em; color:var(--primary-strong); text-decoration:none}
a.folio:hover{text-decoration:underline}
.volver-ruta{display:inline-block; font-size:.82rem; font-weight:500; text-decoration:none; margin-bottom:.3rem}
.volver-ruta:hover{text-decoration:underline}

/* ---------- Hoja de ruta del folio ----------
   La etapa se lee por posición + marca (✓ ● ○); el color no codifica estado.
   El único acento es el botón del siguiente paso. */
.ruta{list-style:none; margin:.2rem 0 1rem; padding:0; display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.ruta-etapa{display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:var(--muted)}
.ruta-etapa::before{content:""; height:4px; border-radius:2px; background:var(--border)}
.ruta-etapa.hecha::before{background:var(--muted)}
.ruta-etapa.actual::before{background:var(--ink); height:6px; margin-top:-1px}
.ruta-etapa.actual{color:var(--ink); font-weight:700}
.ruta-etapa.pendiente{color:var(--muted); opacity:.75}
.ruta-marca{font-family:var(--mono); font-size:.8rem; margin-right:4px}
@media (max-width:640px){
  .ruta{grid-template-columns:1fr; gap:4px}
  .ruta-etapa{flex-direction:row; align-items:center}
  .ruta-etapa::before{width:4px; height:18px; flex:none}
  .ruta-etapa.actual::before{width:6px; height:18px; margin:0}
}
.siguiente{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:.8rem 1rem;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-2)}
.siguiente > div{flex:1; min-width:200px}
.siguiente-rotulo{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.siguiente-texto{font-size:1.02rem; font-weight:600}
.otros-pasos{margin-top:.7rem; font-size:.88rem}
.otros-pasos summary{cursor:pointer; color:var(--muted)}
.otros-pasos ul{margin:.5rem 0 0; padding-left:1.1rem}
.otros-pasos li{margin:.35rem 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
form.en-linea{display:inline; margin:0}
.acciones-tubo{white-space:nowrap}
.acciones-tubo > *{margin-right:6px}
.aviso{background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:.55rem .85rem; margin-bottom:.9rem; font-size:.9rem}

/* TAT en el LIS principal: mismas reglas que el módulo de trazabilidad. */
.tat-pill{display:inline-flex; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.tat-ok{background:#e1ebf3; color:#2f5f86}
.tat-warn{background:var(--warn-tint); color:var(--warn)}
.tat-over{background:var(--critical-tint); color:var(--critical)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tat-ok{background:#142a3a; color:#8cbde3} }
:root[data-theme="dark"] .tat-ok{background:#142a3a; color:#8cbde3}

/* ---------- Componentes de configuración (adopción por pantalla) ---------- */
.section{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:1.1rem; overflow:hidden}
.section>header{position:static; display:flex; align-items:center; gap:10px; padding:.8rem 1.1rem;
  border-bottom:1px solid var(--border); background:none; backdrop-filter:none}
.section>header h2{font-size:.95rem; margin:0}
.section .body{padding:1rem 1.1rem}

/* Toma en sala con doble identificación. El paso en curso se marca por posición y
   número (1, 2, ✓), no por color. */
.toma-pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:1rem; align-items:start}
.toma-paso h2{display:flex; align-items:center; gap:.55rem; margin:0 0 .4rem; font-size:1.05rem}
.toma-num{display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  border:2px solid var(--border-strong); font-weight:700; font-size:.9rem}
.toma-paso.actual .toma-num{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.toma-paso.bloqueado{opacity:.7}
.toma-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:.6rem; align-items:end; margin:.6rem 0}
.toma-form-tubo{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.toma-form input,.toma-form select{width:100%}
.toma-accion .btn{width:100%}
.toma-hecho{font-weight:600; margin:.3rem 0}
.toma-alerta{font-weight:600; font-size:1rem}
.toma-casi{color:var(--critical)}
.toma-tubos{margin-top:.6rem}
.toma-salida{align-items:center; margin:1rem 0}