/* Portal de preinforme de ECG — Drimian
 *
 * Dos criterios mandan sobre el gusto:
 *
 *   EL OPERADOR. Quien usa esto puede ser un tecnico a las tres de la manana. Nada de
 *   informacion que haya que buscar: el nivel de urgencia y que hacer estan arriba de todo
 *   y en ese orden. Los cuerpos de texto van a 16px y con medida de linea corta porque se
 *   leen apurado.
 *
 *   EL PACIENTE. El color NUNCA es el unico portador del nivel — va siempre con la palabra
 *   y con el plazo ("ahora", "en este turno"). Un daltonico, una pantalla mala o un brillo
 *   al sol no pueden ser la diferencia entre leer CRITICO y no leerlo.
 */

/* Tipografia de marca, self-hosted (no hay red hacia afuera desde el contenedor). */
@font-face {
  font-family: "Clash Display";
  src: url("/estatico/fuentes/ClashDisplay-Variable.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/estatico/fuentes/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* Paleta del manual de marca Drimian. Dos reglas que no se negocian:
 *
 *   AZAFRAN SOLO PARA CTA. Lo dice el manual, y ademas acá hay una razón clínica: el ámbar
 *   ya significa PRIORITARIO. Un botón naranja al lado de una banda de urgencia ámbar
 *   compite por el mismo canal de atención. Por eso el CTA azafrán solo aparece en pantallas
 *   donde no hay banda (carga y login), y en el resultado el botón queda al pie.
 *
 *   LOS COLORES CLINICOS NO SON DE MARCA. Rojo, ámbar y verde significan lo que significan
 *   en cualquier servicio del mundo y no se tocan para que combinen. La marca cede ahí.
 */
:root {
  color-scheme: dark light;

  --fondo:        #0a0f24;   /* abyss */
  --fondo-alto:   #101733;
  --panel:        #131a37;   /* azul campeón */
  --panel-alto:   #192145;
  --borde:        #232c4e;   /* line-dark */
  --borde-vivo:   #33406c;

  --tinta:        #f7f8fb;   /* mist */
  --tinta-media:  #aeb6cf;   /* cloud */
  --tinta-tenue:  #7b85a6;

  /* cobalto aclarado: el #0143a0 del manual no tiene contraste sobre el abyss */
  --acento:       #5b9bf5;
  --acento-hondo: #0143a0;
  --cta:          #ea7600;   /* azafrán */
  --cta-vivo:     #ff8c2e;
  --sobre-cta:    #1a0d00;

  --critico:      #ff6b6b;
  --critico-piso: #2c1218;
  --prioritario:  #ffb44d;
  --prio-piso:    #2b2010;
  --rutina:       #5ad39a;
  --rutina-piso:  #0f2a22;
  --neutro:       #8f9ab8;
  --neutro-piso:  #1a2140;

  --radio: 14px;
  --radio-chico: 9px;
  --sombra: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7);
  --tipo: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titular: "Clash Display", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f7f8fb; --fondo-alto: #ffffff; --panel: #ffffff; --panel-alto: #edf0f7;
    --borde: #dde2ee; --borde-vivo: #c3cbe0;
    --tinta: #131a37; --tinta-media: #454d68; --tinta-tenue: #6c7590;
    --acento: #0143a0; --acento-hondo: #013075;
    --cta: #d96c00; --cta-vivo: #ea7600; --sobre-cta: #ffffff;
    --critico: #c62828; --critico-piso: #fdecec;
    --prioritario: #9c5a00; --prio-piso: #fff4e2;
    --rutina: #1c7a48; --rutina-piso: #e8f7ee;
    --neutro: #454d68; --neutro-piso: #edf0f7;
    --sombra: 0 1px 2px rgba(19,26,55,.06), 0 10px 28px -16px rgba(19,26,55,.28);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }

/* ------------------------------------------------------------------ estructura */
.marco { max-width: 940px; margin: 0 auto; padding: 0 20px 72px; }
.angosto { max-width: 560px; }

.barra {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--borde);
  background: var(--fondo-alto);
  position: sticky; top: 0; z-index: 20;
}
.barra .marca { display: flex; align-items: center; gap: 11px; font-weight: 650; letter-spacing: -.01em; }
.barra .marca svg { display: block; }
.barra .resto { margin-left: auto; display: flex; align-items: center; gap: 16px;
                color: var(--tinta-tenue); font-size: 13.5px; }

h1 { font-family: var(--titular); font-size: 31px; line-height: 1.15; letter-spacing: -.02em;
     margin: 34px 0 8px; font-weight: 600; }
h2 { font-size: 15px; margin: 0; font-weight: 640; letter-spacing: -.005em; }
.bajada { color: var(--tinta-media); margin: 0 0 26px; max-width: 62ch; }

.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra);
}
.panel + .panel { margin-top: 16px; }

/* ------------------------------------------------------------------ formulario */
label.campo { display: block; margin-bottom: 20px; }
label.campo > .rotulo { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
label.campo > .porque {
  display: block; font-size: 13px; color: var(--tinta-tenue);
  margin-bottom: 9px; max-width: 60ch; line-height: 1.45;
}

input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--fondo-alto); color: var(--tinta);
  border: 1px solid var(--borde-vivo); border-radius: var(--radio-chico);
  font-family: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
textarea { resize: vertical; min-height: 74px; }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .fila { grid-template-columns: 1fr; } }

/* Sexo: dos pastillas en vez de un desplegable. Sin preseleccionar — dejar las dos sin
   marcar es "no lo sé", que es un estado clínico válido (el QTc sale conservador). */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pastilla {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border: 1px solid var(--borde-vivo); border-radius: var(--radio-chico);
  background: var(--fondo-alto); cursor: pointer; font-size: 15px; font-weight: 550;
  transition: border-color .15s, background .15s, box-shadow .15s; user-select: none;
}
.pastilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastilla:hover { border-color: var(--acento); }
.pastilla:has(input:checked) {
  border-color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent);
  box-shadow: 0 0 0 1px var(--acento) inset;
}
.pastilla:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); }
.pastilla span::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 2px;
  border: 2px solid var(--borde-vivo); border-radius: 50%; vertical-align: -2px;
  transition: border-color .15s, box-shadow .15s;
}
.pastilla:has(input:checked) span::before {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 3px var(--acento);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border: 0; border-radius: var(--radio-chico);
  background: var(--cta); color: var(--sobre-cta);
  font-family: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .06s;
  text-decoration: none;
}
.boton:hover { background: var(--cta-vivo); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton.ancho { width: 100%; }

/* ------------------------------------------------------------------ zona de carga */
.zona {
  border: 1.5px dashed var(--borde-vivo); border-radius: var(--radio);
  padding: 34px 22px; text-align: center; cursor: pointer;
  background: var(--fondo-alto); transition: border-color .15s, background .15s;
}
.zona:hover, .zona.encima { border-color: var(--acento); background: var(--panel-alto); }
.zona .grande { font-weight: 620; margin-bottom: 4px; }
.zona .chico { color: var(--tinta-tenue); font-size: 13.5px; }
.zona.cargado { border-style: solid; border-color: var(--acento); }
.zona input[type=file] { display: none; }

/* ------------------------------------------------------------------ progreso */
.escena { padding: 30px 0 8px; }

.trazo { width: 100%; height: 76px; display: block; margin-bottom: 26px; overflow: visible; }
.trazo path {
  fill: none; stroke: var(--acento); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento) 45%, transparent));
}
.trazo .barrido {
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: barrer 3.4s linear infinite;
}
@keyframes barrer { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .trazo .barrido { animation: none; stroke-dashoffset: 0; }
}

ol.etapas { list-style: none; margin: 0; padding: 0; }
ol.etapas > li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--borde);
  opacity: .38; transition: opacity .35s;
}
ol.etapas > li:last-child { border-bottom: 0; }
ol.etapas > li.activa { opacity: 1; }
ol.etapas > li.lista { opacity: 1; }

.pip {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--borde-vivo);
  display: grid; place-items: center; transition: border-color .3s, background .3s;
}
li.activa .pip { border-color: var(--acento); animation: latir 1.15s ease-in-out infinite; }
li.lista   .pip { border-color: var(--acento); background: var(--acento); }
li.lista   .pip::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--fondo); border-bottom: 2px solid var(--fondo);
  transform: rotate(-45deg);
}
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 40%, transparent); }
  60%      { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) { li.activa .pip { animation: none; } }

.etapa-titulo { font-weight: 600; font-size: 15px; }
.etapa-que { color: var(--tinta-tenue); font-size: 13.5px; line-height: 1.45; }
.hallazgos { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.dato {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--panel-alto); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px 11px; color: var(--tinta-media);
  animation: entrar .3s ease-out both;
}
.dato b { color: var(--tinta); font-weight: 620; }
@keyframes entrar { from { opacity: 0; transform: translateY(3px); } }

/* ------------------------------------------------------------------ resultado */
.banda {
  border-radius: var(--radio); padding: 20px 22px; margin-bottom: 18px;
  border: 1px solid; display: grid; gap: 10px;
}
.banda .encabezado { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.banda .nivel { font-size: 21px; font-weight: 720; letter-spacing: -.015em; }
.banda .plazo {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px;
}
.banda .frase { color: var(--tinta); font-size: 16px; }
.banda .porque { color: var(--tinta-media); font-size: 14px; }

.banda.CRITICO           { border-color: var(--critico);     background: var(--critico-piso); }
.banda.CRITICO .nivel,
.banda.CRITICO .plazo    { color: var(--critico); }
.banda.PRIORITARIO       { border-color: var(--prioritario); background: var(--prio-piso); }
.banda.PRIORITARIO .nivel,
.banda.PRIORITARIO .plazo{ color: var(--prioritario); }
.banda.RUTINA            { border-color: var(--rutina);      background: var(--rutina-piso); }
.banda.RUTINA .nivel,
.banda.RUTINA .plazo     { color: var(--rutina); }
.banda.NEUTRO            { border-color: var(--neutro);      background: var(--neutro-piso); }
.banda.NEUTRO .nivel,
.banda.NEUTRO .plazo     { color: var(--neutro); }

.hacer {
  border: 1px solid var(--borde-vivo); border-left: 3px solid var(--acento);
  border-radius: var(--radio-chico); background: var(--panel-alto);
  padding: 15px 18px; margin-bottom: 18px;
}
.hacer .rot {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-tenue); font-weight: 700; margin-bottom: 4px;
}
.hacer .texto { font-size: 16.5px; font-weight: 560; }

/* NO INTERPRETABLE: la instruccion de repetir el estudio llama tanto como un aviso duro.
   Borde neutro (no es urgencia) pero peso visual alto — el operador tiene que ver que
   este registro no sirve, no que "salio gris". */
.hacer.rehacer {
  border-color: var(--neutro); border-left-color: var(--neutro);
  border-left-width: 3px; background: var(--neutro-piso);
}
.hacer.rehacer .rot { color: var(--tinta-media); }

.seccion { border-top: 1px solid var(--borde); padding: 16px 0; }
.seccion:first-child { border-top: 0; }
.seccion h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .085em;
  color: var(--tinta-tenue); margin-bottom: 7px;
}
.seccion .cuerpo { white-space: pre-wrap; font-size: 15.5px; }

/* MEDICIONES / DESCRIPCION como filas clave-valor (igual que el visor de produccion) */
dl.kv { margin: 0; display: grid; gap: 1px; }
dl.kv > div {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--borde);
}
dl.kv > div:last-child { border-bottom: 0; }
dl.kv dt { color: var(--tinta-tenue); font-size: 13px; text-transform: uppercase;
           letter-spacing: .04em; font-weight: 600; }
dl.kv dd { margin: 0; font-size: 15px; }
@media (max-width: 520px) { dl.kv > div { grid-template-columns: 1fr; gap: 2px; } }

/* CHECKLIST agrupado en cuatro estados. Un checklist de 21 renglones donde 18 dicen AUSENTE
   entierra los 2 que importan: acá el PRESENTE va primero y en rojo, lo no-evaluable después,
   y lo descartado/no-aplica plegado. El color clínico manda sobre la marca. */
.chk-res { font-size: 12.5px; color: var(--tinta-tenue); margin: 0 0 10px; }
.chk-cp { color: var(--critico); font-weight: 700; }
.chk-cq { color: var(--tinta-tenue); }
ul.chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ul.chk li { display: flex; gap: 10px; font-size: 13.5px; padding: 4px 8px; border-radius: 6px; }
ul.chk li span { flex: 1; color: var(--tinta-media); }
ul.chk li b { font-weight: 600; }
.chk-pos { background: var(--critico-piso); }
.chk-pos b { color: var(--critico); }
.chk-nv { background: var(--prio-piso); }
.chk-nv b { color: var(--prioritario); }
.chk-neg b { color: var(--tinta-tenue); font-weight: 400; }
.chk-na b { color: var(--tinta-tenue); font-weight: 400; font-style: italic; }
.chk-na span { opacity: .72; }
.chk-sub { font-size: 12.5px; color: var(--tinta-media); margin: 14px 0 6px; font-weight: 600; }
.chk-det { margin-top: 12px; }
.chk-det summary {
  cursor: pointer; font-size: 12.5px; color: var(--tinta-tenue); list-style: none; padding: 5px 0;
}
.chk-det summary::-webkit-details-marker { display: none; }
.chk-det summary::before { content: "▸ "; }
.chk-det[open] summary::before { content: "▾ "; }

/* Borrador para el informe — formato CAF: su propio panel con boton de copiar. Es lo que
   el medico se lleva, asi que tiene jerarquia propia y el boton bien visible (>=44px, se
   toca con el dedo). */
.copiar {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--panel); margin: 16px 0 0; overflow: hidden; box-shadow: var(--sombra);
}
.cop-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel-alto); padding: 12px 18px; border-bottom: 1px solid var(--borde);
  font-weight: 640; font-size: 14.5px;
}
.btn-cop {
  margin-left: auto; min-height: 40px; padding: 9px 20px;
  border: 0; border-radius: var(--radio-chico);
  background: var(--cta); color: var(--sobre-cta);
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .06s;
}
.btn-cop:hover { background: var(--cta-vivo); }
.btn-cop:active { transform: translateY(1px); }
@media (max-width: 520px) { .cop-cab { gap: 8px; } .btn-cop { margin-left: 0; min-height: 44px; width: 100%; } }
.cop-cuerpo { padding: 16px 18px; }
.cop-blq { margin-bottom: 12px; }
.cop-blq:last-child { margin-bottom: 0; }
.cop-blq h4 {
  margin: 0 0 4px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 700;
}
.cop-blq p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.cop-falta {
  margin: 0; padding: 13px 18px; background: var(--prio-piso);
  border-bottom: 1px solid var(--borde); font-size: 14px; color: var(--tinta-media);
}
.cop-falta p { margin: 0 0 6px; }
.cop-falta p:last-child { margin: 6px 0 0; font-size: 12.5px; }
.cop-falta ul { margin: 0; padding-left: 19px; }
.cop-falta li { margin: 2px 0; }
.cop-falta strong { color: var(--tinta); }
.cop-pie {
  margin: 0; padding: 10px 18px 13px; font-size: 12px; color: var(--tinta-tenue);
  line-height: 1.5; border-top: 1px solid var(--borde);
}
.cop-pie strong { color: var(--tinta-media); }

.aviso {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--panel-alto); padding: 13px 16px; margin: 16px 0;
  font-size: 14px; color: var(--tinta-media);
}
.aviso strong { color: var(--tinta); }
.aviso.duro { border-color: color-mix(in srgb, var(--prioritario) 45%, var(--borde)); }

ul.faltantes { margin: 8px 0 0; padding-left: 18px; color: var(--tinta-media); font-size: 14px; }
ul.faltantes li { margin: 2px 0; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
  font-size: 12.5px; border: 1px solid var(--borde); border-radius: 999px;
  padding: 3px 11px; color: var(--tinta-media); background: var(--panel-alto);
}
.chip b { color: var(--tinta); font-weight: 620; }

.pie {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--borde);
  color: var(--tinta-tenue); font-size: 13px; line-height: 1.5;
}

.error-caja {
  border: 1px solid var(--critico); background: var(--critico-piso);
  border-radius: var(--radio); padding: 18px 20px; color: var(--tinta);
}
.oculto { display: none !important; }