/* Informe de tomografía cardíaca — hoja de estilo local.
   Sin fuentes ni recursos externos: la aplicación funciona sin internet.

   DOS PALETAS A PROPÓSITO (01/10/2026). Todo lo que es programa —la barra,
   las tarjetas, los formularios, el borrador— usa los colores del eco, para
   que pasar de un estudio a otro no se sienta como cambiar de aplicación. El
   MAPA sigue oscuro, como en la app de origen: las tres vistas imitan una
   estación de trabajo y los colores de cada grado se leen contra el negro.
   `.mapwrap` redefine las variables y todo lo de adentro las hereda. */
[hidden]{display:none!important}
:root{
  --tinta:#131a24; --tenue:#5c6b7f; --borde:#dde3ec; --fondo:#f5f7fa; --papel:#ffffff;
  /* Los tres colores del origen de una frase: los mismos del eco. */
  --derivado:#1f6feb; --asumido:#b06d00; --medico:#197a4b;
  --marca:#0b57d0; --marca-sv:#eaf1fe; --alerta:#b3261e; --alerta-sv:#fdeceb;

  --bg:var(--fondo); --panel:var(--papel); --panel2:#f0f3f8; --line:var(--borde);
  --text:var(--tinta); --muted:var(--tenue);
  --accent:var(--marca); --accent2:var(--marca); --sobre-accent:#fff;
  --vessel:#b8574c; --vesselDark:#7a342d;
  --g1:#5aa9e6; --g2:#e8c547; --g3:#f08a3c; --g4:#d6336c; --gN:#7d8a92; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 "Segoe UI",system-ui,sans-serif}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------------ la barra */
.barra{display:flex;align-items:center;gap:20px;background:var(--papel);border-bottom:1px solid var(--borde);padding:11px 28px}
.marca{display:flex;align-items:center;gap:11px}
.marca-icono{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--marca);color:#fff;display:flex;align-items:center;justify-content:center}
.marca-texto{display:flex;flex-direction:column;line-height:1.25}
.marca-texto strong{font-size:15px;font-weight:600}
.marca-texto span{font-size:12px;color:var(--tenue)}
.paciente{color:var(--tenue);font-size:13.5px;flex:1;min-width:0;padding-left:20px;border-left:1px solid var(--borde)}
.paciente:empty{border:none}
.aclaracion{margin-left:auto;flex-shrink:0;font-size:12px;color:var(--asumido);font-weight:600;background:#fdf6e8;border:1px solid #f0dcb4;border-radius:999px;padding:4px 13px}
.sesion{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:12px;color:#6b7683}
.sesion #sesion-quien{font-weight:600;color:#445164}
.sesion a{color:#6b7683;text-decoration:none}
.sesion a:hover{color:#2f6fb2;text-decoration:underline}
.sesion form{margin:0}
.sesion button{border:1px solid #d7dde4;background:#fff;color:#6b7683;border-radius:999px;padding:3px 11px;font-size:12px}
.sesion button:hover{border-color:#b9c3cd;color:#33404f}

/* EL AVISO DE BORRADOR, EN SU PROPIA FRANJA (servicio, 02/10/2026). Iba como
   una pastilla en el medio de la barra, y con la ventana angosta quedaba
   encima del nombre del estudio. Ahora es una franja fija a todo el ancho,
   pegada debajo de la barra: no compite por lugar con nada y siempre se lee
   entera. El nombre del estudio, si no entra, se corta con puntos suspensivos. */
.barra { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
.barra > .marca, .barra > .paciente, .barra > .sesion { margin-bottom: 11px; }
.paciente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion { margin-left: auto; }
.aclaracion {
  order: 9; flex: 0 0 auto; width: auto; margin: 0 -28px; align-self: stretch;
  flex-basis: calc(100% + 56px); text-align: center;
  border: none; border-top: 1px solid #f0dcb4; border-radius: 0;
  padding: 3px 28px; font-size: 11.5px;
}

/* ---------------------------------------------------------- pestañas */
/* Las mismas del eco (`.tabs` / `.tab` en estilo.css). Acá se llaman
   `.pestanas` porque el menú de Anatomía ya usa `.tabs` para las suyas. */
.pestanas{display:flex;gap:4px;align-items:center;padding:0 28px;background:var(--papel);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:40}
.pestana{background:none;border:none;border-bottom:2px solid transparent;color:var(--tenue);border-radius:0;padding:12px 16px;font-weight:600}
.pestana.activa{color:var(--marca);border-bottom-color:var(--marca)}
.pestana:hover{color:var(--tinta)}
.pestanas-fin{margin-left:auto;display:flex;align-items:center;gap:6px}
.boton{border-radius:8px;border:1px solid var(--marca);background:var(--marca);color:#fff;padding:6px 15px;font-size:13px;font-weight:500}
.boton:hover{filter:brightness(1.09)}
.boton.secundario{background:var(--papel);color:var(--tinta);border-color:var(--borde)}
.boton.secundario:hover{border-color:var(--marca);color:var(--marca);filter:none}
.globo{display:inline-block;min-width:19px;padding:1px 6px;margin-left:5px;background:var(--asumido);color:#fff;border-radius:10px;font-size:11.5px;font-weight:700;text-align:center}

.panel{padding:26px 28px 72px;max-width:1040px}
.panel-ancho{max-width:1280px}
.ayuda{color:var(--tenue);font-size:13.5px;max-width:74ch;margin:0 0 18px;line-height:1.5}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.card-titulo{margin:0 0 10px;font-size:16px;font-weight:600}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.seg button{background:none;border:0;border-radius:7px;padding:6px 12px;color:var(--muted)}
.seg button.on{background:var(--accent);color:var(--sobre-accent);font-weight:600}
.tog{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--muted)}
.tog.on{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent);font-weight:600}
.btn{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 12px}
.btn:hover{border-color:var(--accent2)}
.btn.pri{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent);font-weight:600}
.btn.warn{color:var(--alerta);border-color:#f0c4c0}
.btn.menu{border-color:var(--accent2);color:var(--accent)}
.btn.menu.open{background:var(--marca-sv)}
.left{display:flex;flex-direction:column;gap:12px;position:relative;min-width:0}
.toolbar{display:flex;flex-direction:column;gap:10px}

/* ------------------------------------------------------------- el mapa */
.mapwrap{
  --panel:#161d22; --panel2:#1c252b; --line:#2a353d; --text:#e6ecef; --muted:#8b9aa3;
  --accent:#4fb3b8; --accent2:#2f7f84; --sobre-accent:#06292b;
  color:var(--text);
  position:relative;background:radial-gradient(ellipse at 50% 40%,#1b262d,#11181c 70%);border:1px solid #2a353d;border-radius:var(--radius);min-height:300px}
.hint{position:absolute;top:10px;left:10px;font-size:11.5px;color:var(--muted);background:#0008;padding:4px 8px;border-radius:7px;pointer-events:none;z-index:2}
/* EL ÁREA DE CADA VISTA (servicio, 02/10/2026): el esquema ocupaba todo el
   ancho y, por su proporción, no entraba en la ventana. Ahora su alto se
   ajusta a la ventana, con un tope. El 3D y la TC curva se achicaron apenas. */
#map{display:block;width:100%;height:min(720px,calc(100vh - 250px));min-height:340px;user-select:none}
#map .hit{stroke:transparent;fill:none;cursor:pointer;stroke-linecap:round}
#map .base,#map .over{fill:none;stroke-linecap:round;pointer-events:none}
#map .stent{fill:none;stroke:#dfe6ea;stroke-dasharray:2 3;pointer-events:none}
#map .num{font-size:11px;font-weight:700;pointer-events:none;text-anchor:middle;dominant-baseline:central}
#map .luz{fill:none;stroke-linecap:round;pointer-events:none;opacity:.95}
/* Los glóbulos rojos del esquema los mueve `schema.js`, al ritmo del latido.
   La luz late apenas con el ciclo. Ilustrativo. */
#map .gr{pointer-events:none}
#map .late{animation:late 1s ease-in-out infinite}
@keyframes late{0%,100%{opacity:.85} 40%{opacity:1}}
@media (prefers-reduced-motion:reduce){#map .late{animation:none}}
#map .rotulo{pointer-events:none}
#map .rotulo rect{fill:#0d1316;stroke:#5fd3d9;stroke-width:.8;opacity:.92}
#map .rotulo text{fill:#d7f5f7;font-size:10px}
#map .vname{fill:#cfd8dc;font-size:14px;font-weight:700;pointer-events:none}
#map g.segment:hover .base{filter:brightness(1.35)}
#map g.segment.sel .base{stroke:#fff}
/* 3D */
#v3d{position:relative}
#c3d{width:100%;height:min(610px,calc(100vh - 250px));min-height:340px;border-radius:var(--radius);overflow:hidden;cursor:grab;background:#000}
#c3d canvas{display:block;width:100%;height:100%}
#lbl3d{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:var(--radius)}
.l3{position:absolute;transform:translate(-50%,-50%);min-width:16px;height:15px;padding:0 5px;border-radius:8px;background:#1f2a31;border:1px solid #0c1114;color:#e6ecef;font:600 9px/14px system-ui;text-align:center;pointer-events:auto;cursor:pointer;white-space:nowrap}
.l3.g{background:#24322a;font-size:10px}
.l3.hov{transform:none;pointer-events:none;background:#0d1316;border-color:#5fd3d9;color:#d7f5f7;font-weight:600;font-size:10.5px;z-index:3;display:none}
.v3tools{position:absolute;bottom:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.v3tools button{background:#0d1316cc;border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--muted);font-size:12px}
.v3tools button.on{background:var(--accent);color:var(--sobre-accent)}
.v3tools .sp{flex:1}
.ori3d{position:absolute;inset:0;pointer-events:none;font:600 15px/1.1 system-ui,sans-serif;color:#e8e8e8;letter-spacing:.04em}
.ori3d span{position:absolute}
.ori3d .o-t{top:14px;left:50%;transform:translateX(-50%)}
.ori3d .o-b{bottom:52px;left:50%;transform:translateX(-50%)}
.ori3d .o-l{left:14px;top:50%;transform:translateY(-50%)}
.ori3d .o-r{right:14px;top:50%;transform:translateY(-50%)}
.ori3d .o-ang{right:14px;bottom:52px;text-align:right;font-weight:500;font-size:13px;line-height:1.35}
@media (max-width:700px){.ori3d .o-b,.ori3d .o-ang{bottom:100px}}
/* CPR */
#vCpr{display:flex;gap:14px;padding:12px;flex-wrap:wrap}
.cprimg{position:relative;height:min(640px,calc(100vh - 277px));min-height:330px;aspect-ratio:300/640;background:#000;border-radius:8px;overflow:hidden;flex:none}
.cprimg canvas,.cprimg svg{position:absolute;inset:0;width:100%;height:100%}
.cprimg svg{cursor:grab;touch-action:none}
.cprside{flex:1;min-width:220px;display:flex;flex-direction:column;gap:7px}
#cprVessels{display:flex;flex-wrap:wrap;gap:4px}
#cprVessels button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 9px;color:var(--muted);font-size:12px}
#cprVessels button.on{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent);font-weight:600}
#cprXs{width:118px;height:118px;border-radius:50%;background:#000;cursor:ew-resize;border:1px solid var(--line)}
#cprInfo{font-size:12.5px;color:var(--text);min-height:34px;line-height:1.35}
input[type=range]{accent-color:var(--accent)}
/* la ventana de la lesión. Sobre el mapa flota y es oscura como él (hereda
   las variables de `.mapwrap`); sobre el informe va en un cuadro claro. */
#pop{position:absolute;z-index:20;width:290px;background:#131a1f;border:1px solid #33424b;border-radius:12px;box-shadow:0 12px 40px #000a;padding:12px;display:none}
.lesion h3{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.lesion h3 button{background:none;border:0;color:var(--muted);font-size:18px}
.lesion .sect{margin-top:10px}
#pop .btn{background:var(--panel2)}
#pop .btn.warn{color:#f1a39b;border-color:#5a2c28}
.gbtns{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.gbtns button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 0;font-weight:700;line-height:1.1}
.gbtns button small{display:block;font-weight:400;font-size:9px;color:var(--muted)}
.gbtns button.on{outline:2px solid var(--text);outline-offset:-2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.grid2 button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 4px;font-size:12px;color:var(--muted)}
.grid2 button.on{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent);font-weight:600}
.lesion .ir{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);margin-top:6px}

/* leyenda */
.legend{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:12px;color:var(--muted)}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700;font-size:11px;color:#111}
.note{font-size:11.5px;color:var(--muted);margin:4px 0}
.warnnote{font-size:12px;color:#6b5200;background:#fff8e1;border-left:3px solid #d19a00;border-radius:4px;padding:8px 10px;margin:6px 0}
/* dropdown */
#dd{position:absolute;z-index:30;width:min(560px,100%);max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 50px rgba(16,24,40,.25);padding:14px;display:none}
#dd h4{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ddsec{padding:6px 0 10px}
.ddsec+.ddsec{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pills button,.grid2c button,.grid3c button,.tabs button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--muted);font-size:12.5px}
.pills button.on,.grid2c button.on,.grid3c button.on,.tabs button.on{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent);font-weight:600}
.grid2c{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grid3c{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.preview{margin-top:10px;background:#f8fafc;border:1px solid var(--line);color:var(--tinta);border-radius:8px;padding:10px 12px;font-size:13px}
.fld{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);margin-top:8px}

/* ------------------------------------------------------------ derecha */
.right{display:flex;flex-direction:column;gap:12px;min-width:0}
.result{display:flex;gap:10px;align-items:center}
.badge{min-width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:18px;color:#111;background:#dfe5ec}
.result .cat{font-size:15px;font-weight:700;word-break:break-word;line-height:1.2}
.result .desc{color:var(--muted);font-size:12.5px}
.result .note{margin:0}
select,input[type=number],input[type=text],textarea{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;width:100%}
textarea{resize:vertical;min-height:70px}

/* -------------------------------------------------- datos del estudio */
.grupo{background:var(--papel);border:1px solid var(--borde);border-radius:11px;padding:14px 18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.grupo h3{margin:0 0 10px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.grupo .note{margin:10px 0 0}
.campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 12px}
.campos label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)}
.campos label.ancho{grid-column:1/-1}
/* Lo que falta para poder emitir: el ID del paciente o la fecha del estudio. */
.campos input.falta{border-color:#b3261e;background:#fdeceb}
.campos .con-unidad{display:flex;align-items:center;gap:6px}
.campos .con-unidad span{font-size:12px;color:var(--muted);white-space:nowrap}
.campos input[readonly]{background:#fff;color:var(--derivado);border-style:dashed}
.casilla{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta);margin-bottom:8px}
.casilla input{width:auto}

/* --------------------------------------------------------- el informe */
/* EL MISMO ASPECTO QUE EL ECO Y EL DOPPLER VASCULAR (servicio, 02/10/2026):
   una tarjeta por bloque, un párrafo por oración, la barra de 3 px al margen
   que dice de dónde sale cada frase y el subrayado sólo al pasar el mouse.
   Las reglas son las de `web/estilo.css`, copiadas: esta página no carga esa
   hoja porque su `button` global pisaría los controles del mapa. Lo que se
   EXPORTA —Courier, encabezado, antropometría— es otra cosa y no se ve acá. */
.punto{position:relative;background:var(--papel);border:1px solid var(--borde);border-radius:11px;padding:14px 18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.punto-cabecera{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.punto-titulo{font-size:12px;color:var(--tenue);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.punto-texto{font-size:15.5px;line-height:1.65}
.punto-cabecera .mas{margin-left:auto;background:none;color:var(--tenue);border:1px solid var(--borde);border-radius:6px;min-width:24px;height:24px;padding:0 6px;font-size:13px;line-height:1;font-weight:600}
.punto-cabecera .mas:hover{border-color:var(--derivado);color:var(--derivado);background:#f2f7ff}
.seccion-titulo{margin:26px 0 10px;font-size:13px;text-transform:uppercase;color:var(--tenue);letter-spacing:.05em;font-weight:600}
.seccion-titulo:first-child{margin-top:0}

.origen-derivado{--org:var(--derivado);--org-sv:#eef4ff}
.origen-asumido{--org:var(--asumido);--org-sv:#fff6e6}
.origen-medico{--org:var(--medico);--org-sv:#eefaf3}
.frase{cursor:pointer;border-radius:4px;padding:1px 3px;border-bottom:2px solid transparent}
.frase:hover,.frase.abierta{background:var(--org-sv,#eef4ff);border-bottom-color:var(--org,var(--derivado))}
.frase.provisoria{text-decoration:underline dotted #b8c2cf;text-underline-offset:4px}
.frase.desactualizada{background:var(--alerta-sv)}
.vasc-linea,.conc-item{position:relative}
.vasc-linea::before,.conc-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:var(--org)}
.vasc-linea:not([class*="origen-"])::before,.conc-item:not([class*="origen-"])::before{content:none}
.vasc-linea{margin:0 0 11px;line-height:1.65;padding-left:13px}
.vasc-linea:last-child{margin-bottom:0}
/* Una medida cargada: no es una frase. Un click lleva al casillero. */
.vasc-linea.medida{margin-bottom:3px;cursor:pointer;color:var(--tinta)}
.vasc-linea.medida b{font-weight:600}
.vasc-linea.medida:hover{color:var(--marca)}
.vasc-linea.medida + .vasc-linea:not(.medida){margin-top:11px}
.vasc-linea.vacio{color:var(--tenue);font-style:italic}
.conc-item{display:flex;align-items:flex-start;gap:8px;background:var(--papel);border:1px solid var(--borde);border-radius:8px;padding:9px 12px;margin-bottom:6px;font-size:15.5px;line-height:1.65}
.conc-item .frase{flex:1}
.conc-nota{margin-top:14px}

.origenes{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;font-size:12px;color:var(--muted)}
.origenes span{position:relative;padding-left:10px}
.origenes span::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--org,#b8c2cf)}
.origenes .provisoria-leyenda{padding-left:0;text-decoration:underline dotted #8d9aab;text-underline-offset:3px}
.origenes .provisoria-leyenda::before{content:none}
.pendientes{font-size:13.5px;color:#6b5200;background:#fff8e1;border-left:3px solid #d19a00;border-radius:4px;padding:8px 12px;margin-bottom:10px}
.avisos{font-size:13px;color:var(--tenue);margin:0 0 14px;padding-left:18px}

/* ----------------------------------------------------------- los cuadros */
/* Cambiar una frase, describir una lesión, elegir el segmento. */
dialog.cuadro{width:min(560px,94vw);max-width:none;padding:18px 20px}
#dlgLesion.cuadro{width:min(340px,94vw)}
.editor h3,.cuadro h3{margin:0 0 10px;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.editor h3 button,.cuadro h3 button{background:none;border:0;font-size:20px;color:var(--muted);line-height:1}
.editor .ed-vista{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:15px;line-height:1.6;margin-bottom:10px;cursor:default}
/* Alternativas y opciones con botones, como el eco (20/10/2026). */
.editor .ed-alts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.editor .chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 13px;font-size:13.5px;cursor:pointer}
.editor .chip:hover{border-color:var(--accent)}
.editor .chip.elegida{background:var(--accent);border-color:var(--accent);color:#fff}
.editor .ed-botones{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.editor .ed-fila{display:flex;gap:10px;align-items:flex-start}
.editor .ed-fila>span{flex:0 0 130px;font-size:12.5px;color:var(--muted);padding-top:6px}
.editor .ed-fila>div{display:flex;flex-wrap:wrap;gap:5px}
.editor .opcion-boton{font-size:13px;padding:5px 11px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;line-height:1.3}
.editor .opcion-boton:hover{border-color:var(--accent)}
.editor .opcion-boton.elegida{background:rgba(0,82,204,.1);border-color:var(--accent);color:var(--accent);font-weight:600}
.editor button:disabled{opacity:.5;cursor:not-allowed}
.editor .ed-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 12px;margin-bottom:10px}
.editor label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.editor select,.editor input,.editor textarea{background:#fff}
.editor textarea{font:inherit;font-size:14.5px;line-height:1.55;min-height:90px}
.editor .ed-pie{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lista-segmentos{display:grid;gap:6px}
.lista-segmentos button{display:flex;justify-content:space-between;gap:10px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.lista-segmentos button:hover{border-color:var(--marca)}
.lista-segmentos button span{color:var(--muted);font-size:12.5px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:9px 16px;border-radius:9px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;max-width:640px;padding:20px 24px}
dialog::backdrop{background:rgba(16,24,40,.45)}
dialog h2{margin-top:0}
dialog table{border-collapse:collapse;width:100%;font-size:13px}
dialog td,dialog th{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}

/* ---------- Medidas sobre la imagen (orejuela) ----------
   Una vista dibujada con las líneas de cada medida y, al lado, la lista de
   medidas y los pasos. El ancho de la imagen sigue al alto de la ventana,
   como las vistas del mapa coronario: tiene que entrar sin desplazarse. */
.esq{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.esq-img{flex:1 1 420px;max-width:min(100%,calc((100vh - 250px)*1.14));min-width:320px}
.esq-lienzo{position:relative;margin-top:10px;border-radius:var(--radius);overflow:hidden;background:#000;line-height:0}
.esq-lienzo canvas{display:block;width:100%;height:auto}
.esq-lienzo svg{position:absolute;inset:0;width:100%;height:100%}
.esq-lado{flex:1 1 300px;max-width:440px}
.esq-lado h4{margin:18px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--tenue)}
.esq-lado ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.5}
.esq-lado ol li{margin-bottom:6px}
#esqEnFace{display:block;width:220px;margin-top:10px}
.esq-medida{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--papel);border:1px solid var(--borde);border-radius:9px;padding:9px 12px;margin-bottom:7px;cursor:pointer;font:inherit}
.esq-medida:hover,.esq-medida.sobre{border-color:var(--marca);background:var(--marca-sv)}
.esq-medida i{flex:none;width:22px;height:4px;border-radius:2px}
.esq-medida b{font-weight:600}
.esq-medida span{margin-left:auto;color:var(--tenue);font-size:13px;text-align:right}
.esq-medida span.cargada{color:var(--tinta)}
#esqSvg .linea{cursor:pointer}
#esqSvg .linea .trazo{transition:stroke-width .12s}
#esqSvg .linea:hover .trazo,#esqSvg .linea.sobre .trazo{stroke-width:6}
#esqSvg text{font-family:Arial,sans-serif;paint-order:stroke;stroke:rgba(0,0,0,.8);stroke-width:2.4px;stroke-linejoin:round}
#esqSvg .sin-borde text{stroke:none}

/* ---------- Tabla de consulta dentro del cuadro de una frase ---------- */
.ayuda-tabla{margin-top:14px;border-top:1px solid var(--borde);padding-top:10px}
.ayuda-tabla h4{margin:0 0 8px;font-size:13px;color:var(--tenue);font-weight:600}
.ayuda-tabla table{border-collapse:collapse;width:100%;font-size:13px}
.ayuda-tabla th{text-align:left;vertical-align:top;padding:8px 10px 8px 0;white-space:nowrap}
.ayuda-tabla td{vertical-align:top;padding:8px 10px 8px 0;line-height:1.45}
.ayuda-tabla tr+tr{border-top:1px solid var(--borde)}

/* Las variantes de las venas pulmonares son seis: los botones bajan de renglón. */
#esqDisp{flex-wrap:wrap}

/* Las pestañas de las placas de un segmento, en la ventana de lesión. */
.lesion .placas{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
.lesion .placas button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 10px;color:var(--muted);font-size:12.5px;cursor:pointer}
.lesion .placas button.on{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent);font-weight:600}

/* Una frase que el médico quitó del informe: tachada, para poder reponerla. */
.frase.oculta{text-decoration:line-through;opacity:.5}

/* Las medidas del informe en pantalla: el nombre a la izquierda y el valor
   contra el borde derecho (servicio, 13/10/2026). */
.vasc-linea.medida{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.vasc-linea.medida b{text-align:right;white-space:nowrap}

/* El cuadro de avisos y preguntas del programa. */
.aviso-texto p{margin:0 0 10px;line-height:1.5}
.aviso-texto p:first-child{font-weight:600}

/* Lo leído del CAS Report de la resonancia, para confirmar (17/10/2026). */
dialog.lectura{width:min(920px,96vw);max-width:none}
.lectura-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lectura-boton{cursor:pointer}
.lectura-tabla{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.lectura-tabla thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.lectura-img{display:block;max-width:440px;width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
dialog.lectura td input[type=text]{width:7em}
dialog.lectura tr.dudosa{background:#fff8e1}
.chip.ok{background:#e3f4e8;color:#14532d}
.chip.duda{background:#fde7c2;color:#6b3d00}
dialog.lectura details{margin-top:10px}
dialog.lectura summary{cursor:pointer;font-size:13px}

/* Valores normales de la resonancia (17/10/2026). */
.normal-chip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:600;vertical-align:1px;cursor:help}
.normal-chip.normal{background:#e3f4e8;color:#14532d}
.normal-chip.aumentado,.normal-chip.disminuido{background:#fde2e1;color:#8a1c14}
.normal-chip.discordante,.normal-chip.limite_superior{background:#fde7c2;color:#6b3d00}
.normal-chip.sin_referencia{background:#eceff3;color:#4b5563}
table.normales{border-collapse:collapse;width:100%;font-size:13px;margin-top:6px}
table.normales th,table.normales td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
table.normales tr.aumentado td:first-child,table.normales tr.disminuido td:first-child{box-shadow:inset 3px 0 #b3261e}
table.normales tr.discordante td:first-child{box-shadow:inset 3px 0 #d19a00}

/* Una frase optativa que no se informa: un «+» discreto (19/10/2026). */
#report .frase.agregar{color:var(--muted);font-style:italic;font-size:12.5px;border-bottom:1px dashed var(--line)}
#report .frase.agregar:hover{color:var(--accent)}
.normal-chip.estadio{background:#e6ecf7;color:#1e3a6e}

/* Mapa polar de la resonancia (19/10/2026): el mismo dibujo que el del eco. */
#polarCaja{padding:16px 18px}
.polar-capas{display:inline-flex;margin-bottom:6px}
.polar-cuerpo{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
#polarSvg{max-width:100%;height:auto}
#polarSvg .seg{stroke:#9aa5b1;stroke-width:1;cursor:pointer}
#polarSvg .seg:hover{filter:brightness(.93)}
#polarSvg .seg.apagado{cursor:not-allowed;opacity:.45}
#polarSvg .seg-n{font-size:12px;font-weight:700;text-anchor:middle;pointer-events:none;fill:#1f2933}
#polarSvg .seg-t{font-size:8.5px;text-anchor:middle;pointer-events:none;fill:#1f2933}
#polarSvg .corte{stroke:#4b5563;stroke-width:2}
#polarSvg .aro{fill:none;stroke:#4b5563;stroke-width:1.2}
#polarSvg .cara-inicial{font-size:11px;font-weight:700;text-anchor:middle;fill:#4b5563}
.polar-lado{display:flex;flex-direction:column;gap:10px;min-width:240px;max-width:380px}
.polar-paleta,.polar-trans{display:flex;flex-direction:column;gap:4px}
.polar-paleta button,.polar-trans button{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:5px 9px;display:flex;align-items:center;gap:8px}
.polar-paleta button.on,.polar-trans button.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,82,204,.15);font-weight:600}
.polar-paleta .muestra{width:16px;height:16px;border-radius:4px;border:1px solid #9aa5b1;display:inline-block}
.polar-previa .frase{margin:4px 0 0}
.polar-mm{display:flex;align-items:center;gap:6px;font-weight:600}
.polar-atajos{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.polar-atajos-bot{display:flex;flex-wrap:wrap;gap:4px}
.polar-atajos .chip,#mcpCaja .mcp-atajos .chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:13px;cursor:pointer}
.polar-atajos .chip:hover{border-color:var(--accent)}
.polar-atajos .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.polar-niveles{border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.polar-niveles .note{margin:4px 0 0}
.polar-editar{display:flex;flex-direction:column;gap:6px;border:1px solid var(--accent);border-radius:8px;padding:8px 10px;background:#f4f8ff}
.polar-editar input{width:70px}
#polarSvg .union{fill:#fff;stroke:#7b5ea7;stroke-width:2;cursor:pointer}
#polarSvg .union.marcada{fill:#7b5ea7}
#polarSvg .union.apagado{cursor:not-allowed;opacity:.45}
.polar-mm input{width:70px}
/* El buscador de frases (resonancia, 20/10/2026), como el del eco. */
.buscador{position:relative;margin-bottom:14px}
.buscador input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.buscador .resultados{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:420px;overflow:auto}
.buscador .resultado{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:8px 12px;cursor:pointer}
.buscador .resultado:hover{background:#f4f8ff}
.buscador .marca{display:inline-block;width:auto;font-size:11px;border-radius:10px;padding:1px 7px;margin-left:4px;background:#e8f0fe;color:var(--accent)}
.buscador .marca-alternativa{background:#fff6e6;color:#8a5a00}
.buscador .marca-conclusion{background:#eaf6ee;color:#1f7a3d}
/* Miocardiopatías de la resonancia (20/10/2026). */
#mcpCaja{padding:16px 18px}
#mcpCaja fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 12px;padding:8px 12px}
#mcpCaja legend{font-weight:700;padding:0 4px}
#mcpCaja .chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:13px;cursor:pointer;margin:2px}
#mcpCaja .chip.elegida{background:var(--accent);border-color:var(--accent);color:#fff}
#mcpCaja .opcion-boton{font-size:12.5px;padding:3px 9px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;margin:2px}
#mcpCaja .opcion-boton.elegida{background:rgba(0,82,204,.1);border-color:var(--accent);color:var(--accent);font-weight:600}
.mcp-fila{display:flex;gap:10px;align-items:flex-start;margin:4px 0}
.mcp-rot{flex:0 0 110px;font-size:12.5px;color:var(--muted);padding-top:6px}
.mcp-chips{display:flex;flex-wrap:wrap;gap:2px}
.mcp-frase{background:var(--panel2);border-radius:6px;padding:6px 10px;margin:6px 0;font-size:14px;cursor:pointer}
.mcp-frase:hover{outline:2px solid var(--accent);outline-offset:1px}
.mcp-ya{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mcp-rasgo{background:#eaf6ee;color:#1f7a3d;border-radius:12px;padding:2px 9px;font-size:12.5px}
.mcp-check{display:flex;gap:6px;align-items:center;margin:8px 0;font-size:13px}
.mcp-dx{border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:8px 12px;margin:0 0 10px}
.mcp-dx.estado-cumple{border-left-color:#1f7a3d}
.mcp-dx.estado-faltan_datos{border-left-color:#e0a63a}
.mcp-dx.estado-no_cumple,.mcp-dx.estado-en_contra{border-left-color:#9aa5b1}
.mcp-dx.elegida{background:rgba(0,82,204,.05)}
.mcp-dx-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.mcp-dx-cab .btn{margin-left:auto}
.mcp-estado{font-size:12px;color:var(--muted)}
.mcp-contra{color:#b42318;font-size:.9em}
.mcp-etio{margin:6px 0}
.mcp-cita{font-style:italic}
/* El botón de acción al lado del título de cada bloque (22/10/2026). */
.mcp-accion{margin-left:10px;border:0;border-radius:18px;padding:5px 14px;font-size:13px;font-weight:600;
  background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.18);vertical-align:middle}
.mcp-accion:hover{filter:brightness(1.1)}
.mcp-fig7{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
/* Las vistas para probar (23/10/2026). */
#mcpCaja .chip.mcp-mas{border-style:dashed;color:var(--muted)}
.mcp-ver{margin:6px 0}
.mcp-ver>summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600}
.mcp-detalle{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.mcp-grupo{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:2px 0}
.mcp-crit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px}
.mcp-crit li{display:flex;gap:8px;align-items:baseline}
.mcp-m{width:16px;flex:none;text-align:center;font-weight:700}
.mcp-m.si{color:#1f7a3d}.mcp-m.no{color:#b42318}.mcp-m.q{color:#b7791f}
.mcp-etio-det{margin:4px 0 6px 0}
.mcp-paso{display:flex;gap:8px;align-items:center;font-weight:600;margin:10px 0 6px}
.mcp-paso b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px}
.mcp-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,38%);gap:18px;align-items:start}
@media (max-width:900px){.mcp-b{grid-template-columns:minmax(0,1fr)}}
.mcp-b-der{position:sticky;top:8px;display:flex;flex-direction:column;gap:6px}
.mcp-b-der>.mcp-rot{flex:none;padding:0;font-weight:700}
.mcp-sec{border:1px solid var(--line);border-radius:10px;margin:0 0 8px;background:var(--panel2)}
.mcp-sec.abierta{background:var(--panel)}
.mcp-sec-cab{display:flex;gap:10px;align-items:baseline;width:100%;border:0;background:none;padding:10px 12px;cursor:pointer;text-align:left;font-size:14px}
.mcp-sec-cab .note{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-flecha{color:var(--accent);font-weight:700}
.mcp-sec-cuerpo{padding:0 12px 10px}
.mcp-sec-acciones{margin:0 0 6px}
.mcp-sec-acciones .mcp-accion{margin:0 6px 0 0}
/* B2: las plantillas del realce con su ojo de buey (23/10/2026). */
.mcp-plantillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin:8px 0}
.mcp-pl-grupo{border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.mcp-pl-grupo>span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mcp-pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.mcp-pl{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:6px 4px 7px;font-size:11.5px;line-height:1.2;text-align:center;cursor:pointer}
.mcp-pl:hover{border-color:var(--accent)}
.mcp-pl.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,82,204,.18);background:rgba(0,82,204,.06);font-weight:600}
.mcp-pl.hall{border-style:dashed}
.mcp-mini{width:56px;height:56px}
.mcp-detectado{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(0,82,204,.07);border-radius:8px;padding:8px 10px;margin:4px 0}
.mcp-detectado .btn{margin-left:auto}
.mcp-fig7-plegada>summary{cursor:pointer;font-weight:600;color:var(--accent);margin:8px 0}
.mcp-fig7 th,.mcp-fig7 td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.mcp-fig7 th{background:var(--panel2)}
/* Masas de la resonancia (20/10/2026). */
#masasCaja{padding:16px 18px}
.masas-barra{display:inline-flex;margin:0 8px 8px 0}
.masas-cuerpo{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
.masas-rasgos{flex:1 1 520px;min-width:0}
.masas-rasgos fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:8px 12px}
.masas-rasgos legend{font-weight:700;padding:0 4px}
.masas-carac{display:flex;gap:10px;align-items:baseline;padding:3px 0;flex-wrap:wrap}
.masas-nombre{width:170px;flex:none;color:var(--muted)}
.masas-chips{display:flex;gap:4px;flex-wrap:wrap}
.masas-chips button{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:4px 12px;font-size:13px;cursor:pointer}
.masas-chips button:hover{border-color:var(--accent)}
.masas-chips button.on{border-color:var(--accent);background:var(--accent);color:#fff}
.masas-chips button:disabled{opacity:.45;cursor:not-allowed}
.masas-medidas{display:flex;gap:6px;align-items:center}
.masas-medidas input{width:70px}
.masas-lado{flex:1 1 340px;max-width:460px;display:flex;flex-direction:column;gap:8px}
.masas-previa .frase{margin:4px 0}
.masas-dx{padding-left:20px;margin:4px 0}
.masas-dx li{margin:0 0 8px;padding:6px 8px;border-radius:8px}
.masas-dx li.elegido{background:rgba(0,82,204,.08)}
.masas-dx-cab{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.masas-dx-cab .btn{margin-left:auto;padding:2px 10px}
.masas-contra{color:#b42318;font-size:.9em}
.masas-fuente{font-style:italic}

/* El «+» de cada punto, como el eco (20/10/2026). */
.punto-cabecera .mas{font-weight:700}
h3.seccion-titulo .mas{font-size:12px;vertical-align:middle}

/* Los mapas leídos con OCR (copia de la resonancia, 07/11/2026). */
.mapas-lista{padding:8px}
.mapa-img{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:12px;background:var(--panel)}
.mapa-cab{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.mapa-mini{width:120px;height:auto;border:1px solid var(--line);border-radius:4px}
.mapa-rois{margin:8px 0;border-collapse:collapse}
.mapa-rois td,.mapa-rois th{padding:3px 8px;text-align:left}
.mapa-rois input[type=text]{width:7em}

/* Valvulopatías de la resonancia (07/11/2026). */
#valvCaja{padding:16px 18px}
#valvCaja fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 12px;padding:8px 12px}
#valvCaja legend{font-weight:700;padding:0 4px}
#valvCaja .chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:13px;cursor:pointer;margin:2px}
#valvCaja .chip.elegida{background:var(--accent);border-color:var(--accent);color:#fff}
#valvCaja .chip.valv-propuesto{border-color:var(--accent);border-style:dashed;color:var(--accent)}
.valv-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:0 12px}
.valv-lesion{border-top:1px solid var(--line);padding:6px 0;margin-top:4px}
.valv-lesion-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:14px}
.valv-campos{display:flex;flex-wrap:wrap;gap:6px 12px;margin:6px 0}
.valv-campo{font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.valv-campo input{width:80px}
.valv-crit{margin:2px 0 4px 18px;padding:0;font-size:13px}
.valv-ok{color:#1f7a3d;font-size:13px}
.valv-duda{color:#8a5a00;font-size:13px}
@media (max-width:520px){.valv-grilla{grid-template-columns:1fr}}

/* La lista de estudios (08/11/2026). */
.wl-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.wl-barra a.boton{text-decoration:none}
.wl-barra input[type=search]{flex:1 1 260px;min-width:200px;padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.wl-barra select{flex:0 0 auto;width:auto;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.wl-tabla-caja{overflow-x:auto}
.wl-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.wl-tabla th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:6px 8px}
.wl-tabla td{border-bottom:1px solid var(--line);padding:7px 8px;vertical-align:top}
.wl-tabla tr:hover td{background:var(--panel2)}
.wl-concl{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.wl-acciones{white-space:nowrap}
.wl-acciones .btn{display:inline-block;text-decoration:none;color:inherit;padding:4px 9px;font-size:12.5px;margin:1px}
.wl-acciones .btn.pri{color:var(--sobre-accent)}
.wl-tabla .chip{display:inline-block;border-radius:10px;padding:1px 8px;font-size:12px}
.wl-tabla .chip.ok{background:#eaf6ee;color:#1f7a3d}
.wl-tabla .chip.duda{background:#fff6e6;color:#8a5a00}
.dlg-informe{width:min(900px,94vw);max-height:90vh;border:1px solid var(--line);border-radius:12px;padding:0}
.dlg-informe-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.dlg-informe-cuerpo{padding:14px 20px;overflow:auto;max-height:calc(90vh - 60px)}
.dlg-pregunta{border:1px solid var(--line);border-radius:12px;padding:16px;max-width:440px}
.guardado-estado{font-size:12px;color:var(--muted);margin-right:6px}
@media (max-width:700px){.wl-concl{display:none}}

/* ------------------------------------------- la plataforma (modo servidor, 09/11/2026) */
.ingreso{max-width:380px;margin:64px auto;padding:0 16px}
.ingreso .card{padding:22px}
.form-col{display:flex;flex-direction:column;gap:10px}
.form-col label,.form-grid label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.form-col input,.form-col select,.form-grid input,.form-grid select,.form-grid textarea,.form-col textarea{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--text);background:var(--papel)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.form-grid .ancho{grid-column:1/-1}
.form-error{color:var(--alerta);font-size:13px;min-height:1.2em;margin:4px 0 0}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--text)}
.checks label{flex-direction:row;align-items:center;gap:5px;color:var(--text)}
.flujo{display:inline-block;border-radius:10px;padding:1px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.flujo-pendiente{background:#eef2f7;color:#425066}
.flujo-en_informe{background:#e8f0fe;color:#1a4fa0}
.flujo-para_revisar{background:#fff6e6;color:#8a5a00}
.flujo-aprobado{background:#eaf6ee;color:#1f7a3d}
.flujo-entregado{background:#e3efe7;color:#2b5e3d}
.flujo-descartado{background:#f3e8e8;color:#7a2d2d}
.flujo-devuelto{background:var(--alerta-sv);color:var(--alerta)}
.vencido{color:var(--alerta);font-weight:700;font-size:11.5px}
.wl-tabla .codigo{font-family:Consolas,monospace;font-size:12.5px;color:var(--muted);white-space:nowrap}
.wl-barra select.chico{max-width:190px}
.dlg-form{border:1px solid var(--line);border-radius:12px;padding:18px;width:min(640px,calc(100vw - 32px))}
.dlg-form h3{margin:0 0 12px;font-size:16px}
.admin-seccion{margin-bottom:18px}
.admin-seccion h2{font-size:16px;margin:0 0 10px}
.tag-rol{display:inline-block;background:var(--panel2);border-radius:6px;padding:0 6px;margin:1px;font-size:11.5px}
.inactivo td{color:var(--muted);text-decoration:line-through}
.comentario-revisor{margin:6px 0 0;border-left:3px solid var(--alerta);background:var(--alerta-sv);color:#5c1712;padding:8px 12px;border-radius:4px;font-size:13.5px}
.solo-lectura{margin:6px 0 0;border-left:3px solid var(--tenue);background:var(--panel2);padding:8px 12px;border-radius:4px;font-size:13.5px}
@media (max-width:640px){.panel{padding:16px 16px 60px}.barra{padding:11px 16px}}