/* Visor: base, cabecera, botones, avisos y puntos de corte generales. Colores y familias de letra: paletas/idealmedic.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1rem; line-height: 1.48; }
button, select { font: inherit; }
/* Titulares y pregunta actual en la familia de titulares. */
h1, h2, h3, h4, .brand-name, .current-question, .notes-title { font-family: var(--f-display); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hidden { display: none !important; }
.site-shell { max-width: 1512px; margin: auto; min-height: 100vh; }
.topbar { min-height: 86px; padding: 19px clamp(18px, 4.1vw, 66px); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; flex: none; object-fit: cover; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.brand-name { font-weight: 850; font-size: 1.15625rem; letter-spacing: -.6px; line-height: 1.1; }
.brand-caption { font-size: 0.78125rem; color: var(--muted); letter-spacing: .25px; margin-top: 4px; }
main { padding: 0 clamp(18px, 4.1vw, 66px) 60px; }
.eyebrow { margin: 0 0 12px; color: var(--ink-2); font-family: var(--f-mono); font-size: 0.78125rem; font-weight: 800; letter-spacing: 2.1px; }
.eyebrow.small { font-size: 0.78125rem; letter-spacing: 1.45px; margin: 0 0 3px; }
h1 { font-size: clamp(1.6875rem, 3vw, 2.4375rem); line-height: 1.18; letter-spacing: -1.2px; margin: 0 0 10px; font-weight: 750; }
.error-banner { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); border-radius: 11px; padding: 13px 18px; margin-bottom: 20px; }
.welcome { border: 1px dashed var(--line-strong); border-radius: 20px; background: var(--surface); min-height: 360px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 20px; box-shadow: var(--shadow); }
.welcome h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; letter-spacing: -.5px; }
.flow-column { min-width: 0; }
.flow-toolbar { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 16px; padding: 22px 24px; display: flex; justify-content: space-between; gap: 17px; align-items: center; margin-bottom: 18px; }
.flow-toolbar h2 { font-size: 1.1875rem; letter-spacing: -.45px; margin: 0; }
/* «PROTOCOLO ACTIVO» y, a su derecha en la misma línea, el detalle del protocolo (versión, nodos y formato). */
.toolbar-eyebrow { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
.meta { color: var(--muted); font-family: var(--f-mono); font-size: 0.78125rem; }
/* Meta del protocolo activo (versión, nodos y formato), a la derecha de «PROTOCOLO ACTIVO»: solo al pasar el ratón por la barra o al enfocar uno de sus botones.
   Se oculta con transparencia para conservar la altura y que la lean los lectores de pantalla; en pantallas táctiles sigue visible. */
@media (hover: hover) { .flow-toolbar #protocol-meta { opacity: 0; transition: opacity .15s; } .flow-toolbar:hover #protocol-meta, .flow-toolbar:focus-within #protocol-meta { opacity: 1; } }
.toolbar-buttons { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.button-quiet { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; color: var(--ink-2); padding: 8px 10px; font-size: 1rem; font-weight: 670; white-space: nowrap; }
.button-quiet:not(:disabled):hover { border-color: var(--deep); background: var(--tint); color: var(--ink); }
.history { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.past-card { border: 0px solid var(--line); padding: 16px 18px 0; border-radius: 0; background: var(--surface); display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow-soft); }
/* Pasos realizados como un único bloque: sin separación, un solo borde entre pasos y esquinas redondeadas
   solo arriba del primero y abajo del último. */
.past-card + .past-card { border-top: 0; }
.past-card:first-child { border-top-left-radius: 13px; border-top-right-radius: 13px; }
.past-card:last-child { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
.step-number { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 50%; font-weight: 850; font-size: 0.875rem; }
.step-number.done { background: var(--ok-bg); color: var(--ok); }
.past-content { min-width: 0; flex: 1; }
.past-question { font-weight: 710; font-size: 0.90625rem; color: var(--ink-2); margin-bottom: 8px; }
.picked-answer { display: inline-flex; gap: 8px; align-items: flex-start; color: var(--ink); background: var(--surface); border: 0px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 1rem; font-weight: 700; }
.picked-icon { color: var(--ok); font-weight: 900; }
.current-node { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 16px; padding: clamp(20px, 2.5vw, 30px); box-shadow: var(--shadow); }
.node-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.node-step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.node-step-actions .button-quiet { padding: 7px 11px; font-size: 1rem; }
.stage-tag { background: var(--surface-2); color: var(--ink-2); font-family: var(--f-mono); padding: 5px 9px; border-radius: 7px; font-size: 0.78125rem; font-weight: 750; }
.action-box { border-left: 3px solid var(--deep); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 15px 18px; margin-bottom: 22px; }
.action-text { margin: 0; color: var(--ink); font-size: 1.5rem; font-weight: 520; white-space: pre-wrap; }
.current-question { font-size: clamp(1.75rem, 2.4vw, 2rem); letter-spacing: -.45px; line-height: 1.33; margin: 0 0 18px; }
/* Indicación para el operador («remind»): ámbar de aviso; cabecera solo si el protocolo declara un [Título]. */
.remind { background: var(--warn-bg); color: var(--warn-fg); border: 1.5px solid var(--warn-line); border-radius: 12px; padding: 12px 18px; margin-bottom: 18px; display: grid; gap: 6px; font-size: 1.0625rem; overflow-wrap: anywhere; }
.remind .t { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.remind .t i { width: 22px; height: 22px; border-radius: 50%; background: var(--warn-fg); color: var(--warn-bg); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 0.875rem; flex: none; }
.remind-text { white-space: pre-line; }
.remind-text p { margin: 4px 0 0; }
.remind-text p:first-child { margin-top: 0; }
.remind ul, .say ul, .current-question ul { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 4px; white-space: normal; }
/* Lo que dice el operador («say»): verde bosque con la etiqueta «Di». */
.say { background: var(--say-bg); color: var(--say-fg); border-radius: 14px; padding: 16px 22px 18px; margin-bottom: 22px; display: grid; gap: 8px; }
.say-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.78125rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; opacity: .85; }
.say-text { margin: 0; font-size: clamp(1.3rem, 2vw, 1.62rem); line-height: 1.4; font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
/* Datos del operador (#OP_FULLNAME#, #OP_USERNAME#) dentro de cualquier texto del nodo. */
.dato-operador { background: var(--tint); color: inherit; border-radius: 6px; padding: 0 .3em; font-weight: 700; }
.say .dato-operador { background: var(--say-chip); color: var(--say-chip-fg); }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice-button { min-height: 3.875rem; width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--ink); transition: background-color .12s, border-color .12s, transform .12s; }
.choice-button:hover { background: var(--tint); border: 1px solid var(--deep); transform: translateX(2px); }
.choice-button[data-centro="true"] { background-color: var(--brand); }
.choice-num { border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-2); padding: 5px 7px; color: var(--ink-2); font-family: var(--f-mono); min-width: 31px; text-align: center; font-size: 0.875rem; font-weight: 750; }
.choice-text {  color: var(--ink); font-size: 1.21875rem; font-weight: 650; flex: 1; }
.choice-arrow { color: var(--brand); font-size: 1.3125rem; line-height: 1; }
.no-options { color: var(--warn-fg); font-size: 0.9375rem; }
.node-footnote { margin-top: 19px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--f-mono); font-size: 0.78125rem; }
/* Caso finalizado (data-estado del flujo): tarjetas del historial, panel del nodo actual y sus textos con el gris
   de las notas de solo lectura, y la respuesta elegida sin fondo; el aviso «Caso finalizado» conserva su color. En curso, nuevo o reabierto: blanco.
   Los textos grises pequeños se oscurecen para mantener el contraste (4,5:1) sobre el gris. */
#flow[data-estado="finalizada"] .past-card,
#flow[data-estado="finalizada"] .current-node,
#flow[data-estado="finalizada"] .action-box { background: var(--closed); }
#flow[data-estado="finalizada"] .remind,
#flow[data-estado="finalizada"] .say { background: var(--closed); color: var(--closed-ink); border-color: var(--closed-line); }
#flow[data-estado="finalizada"] .remind .t i { background: var(--closed-ink); color: var(--closed); }
/* La respuesta elegida de cada tarjeta, sin su fondo blanco: queda sobre el gris de la tarjeta. */
#flow[data-estado="finalizada"] .picked-answer { background: transparent; }
#flow[data-estado="finalizada"] .picked-icon { color: var(--deep); }
#flow[data-estado="finalizada"] .node-footnote { color: var(--ink-2); }
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.summary-card { padding: 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
/* Cabecera del contexto: «CONTEXTO» y «Datos del caso» con el estilo de «PROTOCOLO ACTIVO» y su título; botón a la derecha. */
.summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.summary-head h2 { font-size: 1.1875rem; letter-spacing: -.45px; margin: 0; }
/* Los datos, cuando se despliegan, van separados de la cabecera por una línea. Miden 400 px como máximo; si no caben,
   se desplazan por dentro y la cabecera sigue visible. */
#case-summary { padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--line); max-height: 400px; overflow-y: auto; }
/* Botón de minimizar/desplegar: estilo de «Cerrar sesión» (button-quiet), cuadrado de 2 rem y solo con el icono.
   Usa el mismo símbolo que el del histórico, girado: » apunta hacia abajo (desplegar) y « hacia arriba (minimizar). */
.context-toggle { flex: none; width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; }
.context-toggle span { display: inline-block; transform: rotate(90deg); }
/* Datos del caso (estilo «ficha» de la propuesta UX): lista dt/dd de pares etiqueta | valor separados por una línea fina.
   Los vacíos o pendientes (su ht_vacio) van en cursiva gris; la fila que cambia se resalta un momento. */
.context-rows { margin: 0; display: grid; }
.summary-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 10px; align-items: baseline; padding: 8px; border-top: 1px solid var(--line); border-radius: 6px; }
.summary-row:first-child { border-top: 0; }
.summary-label { font-size: 0.90625rem; color: var(--muted); }
.summary-value { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.summary-value.pendiente { font-weight: 400; font-style: italic; color: var(--muted); }
.summary-row.cambiado { animation: fila-cambiada 1.6s ease-out; }
@keyframes fila-cambiada { from { background: var(--brand); } to { background: transparent; } }
/* Footer fijo abajo, de 20 px, con el texto centrado en una línea (el contenido tiene margen inferior para no quedar tapado). */
.footer { position: fixed; left: 0; bottom: 0; z-index: 10; box-sizing: border-box; width: 100%; height: 20px; padding: 0 12px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.78125rem; line-height: 19px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .toolbar-buttons { justify-content: flex-start; } }
@media (max-width: 840px) { .sidebar { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; } }
@media (max-width: 540px) { .topbar { min-height: 77px; } .sidebar { grid-template-columns: 1fr; } .flow-toolbar { padding: 17px; } .current-node { padding: 18px; } .past-card { padding: 13px; } .toolbar-buttons .button-quiet { font-size: 0.875rem; } }
/* Pantallas bajas (800 px de alto o menos, p. ej. 1366×768): pregunta y respuestas algo más compactas para que quepan. */
@media (max-height: 800px) { .current-question { font-size: 1.5rem; } .choice-button { min-height: 3.375rem; } .choice-text { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } .summary-row.cambiado { animation: none; } }