/* El documento clínico: la historia precargada y la consulta de seguimiento.
   Lo usan las dos cosas — las páginas que se revisan a ojo y la pantalla de la
   consulta— porque las dos las dibuja `motor/vista.py`. */
:root {
  --papel: #000000;
  --carta: #0C0C08;
  --tinta: #FFFFFF;
  --suave: #A8A894;
  --linea: rgba(255, 255, 255, 0.09);
  --linea-fuerte: rgba(255, 255, 255, 0.18);
  --acento: #D6EB42;
  --acento-suave: rgba(214, 235, 66, 0.14);
  --ambar: #F59E0B;
  --ambar-fondo: rgba(245, 158, 11, 0.14);
  --morado: #A78BFA;
  --morado-fondo: rgba(167, 139, 250, 0.14);
  --turquesa: #06B6D4;
  --turquesa-fondo: rgba(6, 182, 212, 0.14);
  --verde: #00D97A;
  --verde-fondo: rgba(0, 217, 122, 0.14);
  --rojo: #EF4444;
  --rojo-fondo: rgba(239, 68, 68, 0.14);
  --gris-chip: rgba(255, 255, 255, 0.07);
  --sombra: 0 4px 20px -2px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
  --papel: #FFFFFF;
  --carta: #FFFFFF;
  --tinta: #050705;
  --suave: #4A554C;
  --linea: #E3E8E4;
  --linea-fuerte: #C9D2CB;
  --acento: #55631A;
  --acento-suave: rgba(214, 235, 66, 0.22);
  --ambar: #D97706;
  --ambar-fondo: #FEF3C7;
  --morado: #7C3AED;
  --morado-fondo: #EDE9FE;
  --turquesa: #0891B2;
  --turquesa-fondo: #CFFAFE;
  --verde: #00874D;
  --verde-fondo: #D1FAE5;
  --rojo: #DC2626;
  --rojo-fondo: #FEE2E2;
  --gris-chip: #E2E8F0;
  --sombra: 0 4px 16px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  /* Solo el color: `background` entero borraba el resplandor que pone
     `estilo.css`, y la consola era la única pantalla sin él. El documento
     descargado, que carga esta hoja sola, se sigue viendo sobre negro. */
  background-color: var(--papel);
  color: var(--tinta);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.envoltorio {
  max-width: 60rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 5rem;
}

header.top { padding: 3rem 0 1.5rem; }
.eyebrow {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 0.8rem;
  font-weight: 600;
}

h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
  .sub { color:var(--suave); margin:0 0 1.5rem; max-width:44rem; }
  .cifras { display:flex; flex-wrap:wrap; gap:0 2.25rem; border-top:1px solid var(--linea);
    border-bottom:1px solid var(--linea); padding:.9rem 0; margin-bottom:2rem; }
  .cifra strong { display:block; font-family:'Poppins', system-ui, sans-serif; font-size:1.3rem;
    font-weight:500; font-variant-numeric:tabular-nums; }
  .cifra span { font-size:.76rem; color:var(--suave); }

  /* Quién es. Al principio de toda historia. */
  .ficha { font-size:1.05rem; margin:0 0 1rem; padding-bottom:.7rem;
    border-bottom:1px solid var(--linea-fuerte); color:var(--suave); }
  .ficha strong { color:var(--tinta); font-weight:600; }
  .bloqueo { background:var(--rojo-fondo); color:var(--rojo); padding:.9rem 1.1rem;
    border-radius:3px; margin-bottom:.6rem; font-size:.92rem; }
  .listo { background:var(--acento-suave); color:var(--acento); padding:.9rem 1.1rem;
    border-radius:3px; margin-bottom:.6rem; font-size:.92rem; }
  .listo strong { color:var(--tinta); }
  .gris { font-size:.86rem; color:var(--suave); margin:.2rem 0 1.5rem; }
  .gris code { font-family:'Poppins', system-ui, sans-serif; background:var(--gris-chip);
    padding:.1rem .35rem; border-radius:2px; }

  /* Los números que orientan al abrir la consulta. */
  .orientan { display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-bottom:1rem; }
  .orienta { display:flex; flex-direction:column; }
  .orienta .que { font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--suave); }
  .orienta .hoy { font-family:'Poppins', system-ui, sans-serif; font-size:1.25rem;
    font-weight:500; font-variant-numeric:tabular-nums; }
  .orienta .antes { font-size:.76rem; color:var(--suave);
    font-variant-numeric:tabular-nums; }
  .bloque { background:var(--carta); border:1px solid var(--linea); border-radius:3px;
    padding:1.5rem 1.75rem; margin-bottom:1.1rem; box-shadow:var(--sombra); }
  .bloque h2 { font-family:'Poppins', system-ui, sans-serif; font-weight:500; font-size:1.35rem;
    margin:0 0 .1rem; }
  .quien, .aviso-historia { color:var(--suave); font-size:.85rem; margin:0 0 1.2rem; max-width:52rem; }
  .bloque h3 { font-family:'Poppins', system-ui, sans-serif; font-size:.74rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--suave); margin:1.6rem 0 .2rem; font-weight:500; }
  .bloque h3 .n { color:var(--acento); }
  /* La consola carga primero estilo.css, y ahí `.n` es otra cosa —un número
     de lista, con relleno arriba y ancho mínimo—. Lo que esta hoja no pisa se
     hereda: el contador de «Para preguntar 10» quedaba corrido. Por eso los
     títulos de sección y los avisos de la historia se llaman `parte-historia`
     y `aviso-historia`: con el nombre de la aplicación, heredaban su tarjeta
     entera —borde, fondo, relleno y un salto al pasar el mouse—. */
  .bloque .n { padding-top:0; min-width:0; }
  .nota { font-size:.8rem; color:var(--suave); margin:0 0 .7rem; }
  .franja { color:var(--acento) !important; }
  .grupo { font-family:'Poppins', system-ui, sans-serif; font-size:.74rem; color:var(--acento);
    margin:1rem 0 .25rem; }
  /* Las partes de siempre: enfermedad actual, funciones biológicas, antecedentes. */
  .parte-historia { font-family:'Poppins', system-ui, sans-serif; font-size:1.05rem; color:var(--tinta);
    margin:1.9rem 0 .1rem; padding-bottom:.3rem; border-bottom:1px solid var(--linea-fuerte); }
  .punto { display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
    margin-right:.5rem; vertical-align:.05rem; background:var(--linea-fuerte); }
  .punto.AMBAR { background:var(--ambar); }
  .punto.MORADO { background:var(--morado); }
  .punto.TURQUESA { background:var(--turquesa); }

  /* El punto de la bandera va **delante de la categoría** —en la fila de la
     matriz que está encendida, o delante del nombre del dato— igual que en el
     resto de la historia. El código de la regla no se muestra: no lo lee
     nadie, y lo que hay que ver es qué está marcado. */
  /* El punto vive dentro de la celda del dato que marca, así que la celda
     lleva la línea completa: si el nombre se parte en dos renglones, el punto
     se queda arriba con la primera. */
  /* El punto y el nombre que marca van en la misma línea: en una tabla
     angosta el nombre se iba al renglón de abajo y el punto quedaba solo
     arriba, como descentrado. */
  table.matriz td.primera { padding-left:0; white-space:nowrap; }
  table.matriz td.primera .punto { vertical-align:.08em; }

  table { border-collapse:collapse; width:100%; font-size:.88rem; margin-bottom:.3rem; }
  th { text-align:left; font-weight:500; font-size:.72rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--suave); border-bottom:1px solid var(--linea-fuerte);
    padding:.3rem .6rem; }
  td { padding:.4rem .6rem; border-bottom:1px solid var(--linea); vertical-align:top; }
  table.propia td:nth-child(2) { font-variant-numeric:tabular-nums; white-space:nowrap; }
  table.propia td:nth-child(3) { width:34%; background:var(--gris-chip); }
  /* El bloque 0 son respuestas, no banderas: dos columnas y nada que escribir. */
  table.dicho { max-width:46rem; margin-bottom:1rem; }
  table.dicho td:first-child { width:17rem; color:var(--suave); }
  table.dicho td:nth-child(2) { color:var(--tinta); font-variant-numeric:tabular-nums;
    white-space:normal; }
  table.encuesta { max-width:34rem; }
  table.encuesta td:first-child { color:var(--turquesa); }
  table.encuesta td:nth-child(2) { font-variant-numeric:tabular-nums; width:3rem; }
  table.encuesta td:last-child { width:40%; background:var(--gris-chip); }
  .matriz-caja { overflow-x:auto; margin:.2rem 0 1rem; }
  table.matriz { width:auto; min-width:min(100%,22rem); font-size:.84rem; }
  table.matriz th[scope="row"] { text-transform:none; letter-spacing:0; font-size:.84rem;
    font-weight:400; color:var(--tinta); border-bottom:1px solid var(--linea);
    padding:.35rem .8rem .35rem 0; white-space:nowrap; }
  table.matriz thead th { padding-left:0; }
  table.matriz td { font-variant-numeric:tabular-nums; padding-left:0; padding-right:1.4rem; }
  .matriz-caja .chip { margin-left:0; }
  /* La semana de entrenamiento: siete casillas, una por día. Los días sin
     nada quedan apagados para que se vean los huecos. */
  .semana { display:grid; grid-template-columns:repeat(7, minmax(6.2rem, 1fr));
    gap:.35rem; margin:.2rem 0 1rem; }
  .semana .dia { border:1px solid var(--linea); border-radius:8px; padding:.45rem .5rem;
    background:var(--carta); min-height:5.2rem; }
  .semana .dia.libre { background:var(--papel); border-style:dashed; }
  .semana .dia p { margin:0; line-height:1.3; }
  .semana .nombre { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--suave); margin-bottom:.25rem !important; }
  .semana .que { font-weight:500; font-size:.88rem; }
  .semana .cuanto { font-family:'Poppins', system-ui, sans-serif; font-size:.76rem;
    color:var(--suave); font-variant-numeric:tabular-nums; }
  .semana .fin { font-size:.76rem; color:var(--suave); margin-top:.15rem !important; }
  .semana .nada { color:var(--linea-fuerte); font-size:1rem; }
  @media (max-width: 640px) { .semana { grid-template-columns:repeat(2, 1fr); } }
  /* Lo que enciende la tabla completa, dicho una vez arriba y no repetido en
     cada fila. */
  .marca-tabla { font-size:.8rem; color:var(--suave); margin:.1rem 0 .35rem;
    display:flex; flex-wrap:wrap; gap:.15rem .55rem; align-items:baseline; }
  .marca-tabla .punto { margin-right:.3rem; }
  /* Por qué importa, debajo del nombre de la bandera: para decírselo al
     paciente con las palabras que el equipo aprobó. */
  /* La guía del bloque: qué se dice y en qué orden, a la vista mientras se
     llena. Se pliega con un clic. */
  details.guia { margin:.4rem 0 1rem; padding:.55rem .9rem; border-radius:8px;
    background:var(--acento-suave); border:1px solid var(--linea); max-width:70ch; }
  details.guia summary { cursor:pointer; font-family:'Poppins', system-ui, sans-serif;
    font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--acento); }
  details.guia ol { margin:.45rem 0 0; padding-left:1.2rem; font-size:.86rem; line-height:1.45; }
  details.guia li { margin:.25rem 0; }
  .por-que { margin:.2rem 0 0; font-size:.78rem; color:var(--suave); line-height:1.35;
    max-width:36ch; }
  /* Las banderas que esperan un dato: se ven con su color, no como texto.
     El nombre es largo a propósito: esta hoja se carga **encima** de la de la
     consola, y ahí `espera` ya era el sello de una consulta que todavía no
     se hizo. Una clase con nombre común le cambia el dibujo a media consola. */
  .bandera-en-espera { display:inline-block; margin-right:.55rem; white-space:nowrap; }
  .bandera-en-espera .punto { margin-right:.3rem; }
  table.cruce { background:var(--acento-suave); }
  table.cruce td { border-bottom-color:var(--linea); }
  table.cruce td:last-child { color:var(--suave); font-size:.84rem; }
  .falta { color:var(--ambar); font-style:italic; }
  /* La corrida de extremo a extremo. */
  table.pasos td:first-child { width:44%; }
  table.pasos td.dato { font-family:'Poppins', system-ui, sans-serif; font-size:.82rem;
    color:var(--suave); }
  table.pasos tr.mal td:first-child { color:var(--rojo); font-weight:500; }
  table.pasos tr.mal td:first-child::before { content:"✗  "; }
  table.pasos tr:not(.mal):not(.detalle) td:first-child::before { content:"·  ";
    color:var(--suave); }
  table.pasos tr.detalle td { border-bottom:0; padding-top:0; font-size:.8rem;
    color:var(--suave); font-style:italic; }
  .bloque.con-fallo { border-left:3px solid var(--rojo); }
  .bloque h2 .n { font-family:'Poppins', system-ui, sans-serif; font-size:.7rem;
    color:var(--rojo); vertical-align:.4rem; }
/* Cómo va cada bandera en el seguimiento.
   Cada columna se dimensiona por su clase, no por su posición: con siete u
   ocho columnas, apoyarse en el orden hacía que al agregar una se corrieran
   todos los anchos y los textos se montaran unos sobre otros. */
.ancha { overflow-x:auto; }
table.evolucion { min-width:64rem; table-layout:fixed; }
table.evolucion td, table.evolucion th {
  white-space:normal; overflow-wrap:anywhere; hyphens:auto; vertical-align:top; }
table.evolucion .col-bandera { width:16%; }
table.evolucion .col-valor { width:10%; font-variant-numeric:tabular-nums; }
table.evolucion .col-medio { width:10%; font-variant-numeric:tabular-nums; }
table.evolucion .col-corte { width:9%; font-size:.78rem; color:var(--suave);
  font-family:'Poppins', system-ui, sans-serif; }
table.evolucion .col-estado { width:8%; font-size:.8rem; white-space:nowrap; }
table.evolucion .col-dicho { width:19%; font-size:.82rem; color:var(--suave); }
table.evolucion .col-notas { width:20%; background:var(--gris-chip); }
table.evolucion.con-medio { min-width:70rem; }

/* El tema dentro de cada tabla: los mismos del basal, para buscar igual. */
  table.evolucion tr.tema th { font-family:'Poppins', system-ui, sans-serif;
    font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--acento); background:transparent; border-bottom:0;
    padding:.9rem .6rem .1rem; }
  table.evolucion tr.tema:first-child th { padding-top:.3rem; }
  /* Los tres grupos del seguimiento. */
  .bloque h3.grupo-seg { font-family:'Poppins', system-ui, sans-serif; font-size:1.1rem;
    letter-spacing:0; text-transform:none; font-weight:500; margin:1.9rem 0 .1rem;
    padding-left:.6rem; border-left:3px solid var(--linea-fuerte); }
  .bloque h3.grupo-seg.bien { border-left-color:#2E8B57; color:#2E8B57; }
  .bloque h3.grupo-seg.quieto { border-left-color:var(--suave); }
  .bloque h3.grupo-seg.mal { border-left-color:var(--rojo); color:var(--rojo); }
  /* Los insumos del plan: el mismo morado que en la historia inicial, para que
     sea la misma cosa en las dos y no dos secciones que se parecen. */
  .bloque h3.grupo-seg.plan { border-left-color:var(--morado); color:var(--morado); }
  .bloque h3.grupo-seg .n { color:var(--suave); font-family:'Poppins', system-ui, sans-serif;
    font-size:.75rem; }
  .contexto-paciente { background:var(--acento-suave); }
  .contexto-paciente table.dicho td:nth-child(2) { color:var(--tinta); }
  .foco-cab { margin:1rem 0 .15rem; display:flex; align-items:baseline; gap:.5rem;
    border-top:1px solid var(--linea); padding-top:.7rem; }
  .cifras-bloque { margin-left:auto; font-family:'Poppins', system-ui, sans-serif;
    font-size:.76rem; color:var(--suave); font-variant-numeric:tabular-nums;
    white-space:nowrap; }
  .desglose { margin:0; font-size:.84rem; color:var(--suave); line-height:1.7; }
  .desglose b.prendida { color:var(--ambar); font-weight:600; }
  td.bien { color:#2E8B57; } td.mal { color:var(--rojo); }
  td.quieto { color:var(--suave); } td.sindato { color:var(--suave); font-style:italic; }
  .pidio { border-left:3px solid var(--acento); }
  .bloque h2 .n { font-family:'Poppins', system-ui, sans-serif; font-size:.8rem;
    color:var(--acento); vertical-align:.35rem; }
  .alta { color:var(--rojo); }

  .dato, .insumo, .contexto { font-size:.88rem; margin:.25rem 0; }
  .rotulo { display:inline-block; min-width:12rem; color:var(--suave); font-size:.8rem; }
  .contexto { color:var(--suave); margin-top:1rem; }
  .chip { font-family:'Poppins', system-ui, sans-serif; font-size:.66rem; padding:.08rem .3rem;
    border-radius:2px; margin-left:.3rem; background:var(--gris-chip); }
  .chip.AMBAR, .chip.AMBAR‼ { background:var(--ambar-fondo); color:var(--ambar); }
  .chip.MORADO, .chip[class*="MORADO"] { background:var(--morado-fondo); color:var(--morado); }
  .chip.TURQUESA { background:var(--turquesa-fondo); color:var(--turquesa); }
  footer { margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--linea);
    font-size:.78rem; color:var(--suave); }
  footer code { font-family:'Poppins', system-ui, sans-serif; }

  /* El foco del mes: la categoría con su recuento a la izquierda y sus ítems
     al costado, para ver de un golpe dónde están las alarmas. */
  table.foco th[scope="row"] { width:34%; text-transform:none; letter-spacing:0;
    font-size:.9rem; color:var(--tinta); font-weight:500; vertical-align:top;
    border-bottom:1px solid var(--linea); }
  table.foco .cifras-bloque { display:block; margin-left:0; }
  table.foco td { font-size:.84rem; color:var(--suave); line-height:1.7; }
  table.foco tr.con-alarma th[scope="row"] { box-shadow:inset 3px 0 var(--ambar); 
    padding-left:.6rem; }
  table.foco b.prendida { color:var(--ambar); font-weight:600; }

  /* Lo que trajo el cuestionario: verde mejoró, gris sigue igual, ámbar se
     movió para el otro lado. Lo que está en rango no lleva marca. */
  .marca { font-family:'Poppins', system-ui, sans-serif; font-size:.66rem;
    padding:.08rem .32rem; border-radius:2px; margin-left:.5rem; }
  .marca.verde { background:#E2F2EC; color:#0F6B52; }
  .marca.ambar { background:var(--ambar-fondo); color:var(--ambar); }
  .marca.gris { background:var(--gris-chip); color:var(--suave); }
  tr.fuera-de-rango td:first-child { font-weight:500; color:var(--tinta); }
  tr.fuera-de-rango.ambar td:first-child { box-shadow:inset 3px 0 var(--ambar); 
    padding-left:.6rem; }
  tr.fuera-de-rango.verde td:first-child { box-shadow:inset 3px 0 #0F6B52; 
    padding-left:.6rem; }

  /* Lo que se escribe en la consulta. En la página de revisión no hay dónde
     escribir: son las mismas celdas, vacías. */
  .campo { border-top:1px solid var(--linea); padding:.7rem 0 .2rem; }
  .campo .etiqueta { font-size:.92rem; font-weight:500; margin:0 0 .3rem; }
  .campo .etiqueta .obliga { color:var(--ambar); }
  .campo .etiqueta .ayuda { display:block; font-weight:400; font-size:.8rem;
    color:var(--suave); margin-top:.15rem; }
  .campo textarea { width:100%; min-height:2.8rem; font:inherit; font-size:.9rem;
    padding:.4rem .55rem; border:1px solid var(--linea-fuerte); border-radius:3px;
    background:var(--carta); color:var(--tinta); resize:vertical; }
  .campo .opciones { display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; }
  .campo .opciones label { display:flex; gap:.55rem; align-items:flex-start;
    cursor:pointer; }
  /* Qué trae cada opción, debajo de su nombre: «C · Del 0 al 10» no se
     entiende sin decir qué se mide. */
  .campo .opciones label .ayuda { display:block; font-size:.8rem;
    color:var(--suave); margin-top:.1rem; font-weight:400; }
  .campo table.editable input { width:100%; font:inherit; font-size:.88rem;
    padding:.3rem .45rem; border:1px solid var(--linea-fuerte); border-radius:3px;
    background:var(--carta); color:var(--tinta); }
  .campo table.editable th[scope="row"] { width:3rem; color:var(--suave);
    font-weight:400; text-transform:none; letter-spacing:0; font-size:.85rem; }
  .bloque.plan { border-left:3px solid var(--linea-fuerte); }
  .bloque.plan.B1, .bloque.plan.B5 { border-left-color:#2F6FA8; }
  .bloque.plan.B6 { border-left-color:#7A7F87; }
  .bloque .quien .cifra { margin-left:.6rem; font-family:'Poppins', system-ui, sans-serif;
    font-size:.74rem; }
  .bloque .quien .cifra.mal { color:var(--ambar); }
  .bloque .quien .cifra.bien { color:#0F6B52; }
  /* Donde se escribe una bandera: la celda es el recuadro. */
  td.escribible { background:var(--gris-chip); }
  td.escribible textarea { width:100%; min-height:2.2rem; font:inherit;
    font-size:.84rem; padding:.25rem .4rem; border:1px solid transparent;
    border-radius:2px; background:transparent; color:var(--tinta); resize:vertical; }
  td.escribible textarea:hover { border-color:var(--linea-fuerte); }
  td.escribible textarea:focus { background:var(--carta); border-color:var(--acento);
    outline:none; }
  td.escribible textarea.guardado { border-color:#0F6B52; }
  td.escribible textarea.guardando { border-color:var(--acento); }

/* Los insumos del plan: mismas secciones que lo que se pregunta, en tabla.
   En una sola lista corrida no se encuentra nada — son treinta datos. */
table.insumos { max-width:46rem; margin-bottom:1rem; }
table.insumos td:first-child { width:19rem; }
table.insumos td:nth-child(2) { color:var(--tinta); font-variant-numeric:tabular-nums;
  white-space:normal; }

/* Los rótulos de sección llevan el color de lo que encabezan: ámbar lo que se
   pregunta, morado lo que alimenta el plan. Es la misma clave de color de los
   puntos, para no tener que acordarse de nada. */
.bloque h3.rotulo-AMBAR { color:var(--ambar); }
.bloque h3.rotulo-AMBAR .n { color:var(--ambar); }
.bloque h3.rotulo-MORADO { color:var(--morado); }
.bloque h3.rotulo-MORADO .n { color:var(--morado); }
/* Lo que falta abre cada bloque y se tiene que ver como lo que es: lo que hay
   que preguntarle sí o sí (Dr. León, 18-09-2026). */
.bloque h3.rotulo-ROJA { color:var(--rojo); }
.bloque h3.rotulo-ROJA .n { color:var(--rojo); }
.punto.ROJA { background:var(--rojo); }
/* El contexto no enciende nada: viaja como dato. Va en el tono apagado, que
   es lo que dice «esto se tiene en cuenta, no se pregunta». */
.bloque h3.rotulo-CONTEXTO { color:var(--suave); }

/* Se pregunta y además alimenta el plan. Va una sola vez, donde se actúa
   sobre ella, con esta marca — no dos veces en el mismo bloque. */
.tambien-plan { font-family:'Poppins', system-ui, sans-serif; font-size:.62rem;
  letter-spacing:.06em; text-transform:uppercase; margin-left:.45rem;
  padding:.08rem .3rem; border-radius:2px; white-space:nowrap;
  background:var(--morado-fondo); color:var(--morado); }

/* Los comandos para correr la demo: no empujan la página a lo ancho. */
pre { overflow-x:auto; background:var(--gris-chip); padding:.8rem 1rem;
  border-radius:3px; font-size:.84rem; }
pre code { font-family:'Poppins', system-ui, sans-serif; }

/* Tablas de texto —no de valores—: acá el renglón se parte, o la página entera
   se va de ancho. La regla de `nowrap` es para las columnas de números. */
table.texto td { white-space:normal; }
table.texto td:nth-child(2) { white-space:normal; }

/* El laboratorio: lo marcó una persona leyendo el PDF, no lo evaluó ninguna
   regla. Por eso no lleva punto de bandera sino su propia flecha. */
h3.rotulo-lab { color:var(--acento); }
h3.rotulo-lab .n { color:var(--acento); }
table.lab td:first-child { font-weight:500; }
.lab.alto, .lab.bajo { display:inline-block; width:1.15rem; font-weight:600;
  font-family:'Poppins', system-ui, sans-serif; }
.lab.alto { color:var(--rojo); }
.lab.bajo { color:var(--acento); }

/* Ir directo a lo de cada uno: la historia es larga a propósito, pero nadie
   tiene que bajar tres pantallas para llegar a su bloque. */
nav.atajos { position:sticky; top:0; z-index:5; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; background:var(--papel);
  padding:.6rem 0 .7rem; margin-bottom:.8rem;
  border-bottom:1px solid var(--linea); }
nav.atajos span { font-family:'Poppins', system-ui, sans-serif; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--suave); }
nav.atajos a { font-size:.86rem; text-decoration:none; color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:3px; padding:.25rem .7rem; }
nav.atajos a:hover { border-color:var(--acento); color:var(--acento); }
/* El ancla no queda debajo de la barra al saltar. */
section.bloque[id] { scroll-margin-top:4rem; }

/* Los dos lados: el recorrido del paciente y el del equipo, paso a paso. */
.lado.paciente { border-left:3px solid var(--turquesa); }
.lado.equipo { border-left:3px solid var(--acento); }
.paso { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 0;
  border-top:1px solid var(--linea); }
.paso .numero { font-family:'Poppins', system-ui, sans-serif; font-size:1.1rem;
  color:var(--suave); margin:0; min-width:1.6rem; }
.paso h3 { font-family:'Poppins', system-ui, sans-serif; font-size:1.05rem;
  text-transform:none; letter-spacing:0; color:var(--tinta); margin:0 0 .2rem; }
.paso p { margin:0 0 .2rem; font-size:.92rem; }
.paso .nota { margin:.25rem 0 0; }

/* La tabla de reglas: se lee de corrido, buscando la propia. */
table.reglas { min-width:52rem; }
table.reglas td { vertical-align:top; }
table.reglas td:first-child { width:5rem; }
table.reglas td:nth-child(2) { width:22%; font-weight:500; }
table.reglas td:nth-child(3) { width:24%; font-size:.8rem; }
table.reglas code { font-family:'Poppins', system-ui, sans-serif; font-size:.74rem;
  background:var(--gris-chip); padding:.08rem .3rem; border-radius:2px; }
table.reglas tr.subtema td { background:transparent; color:var(--acento);
  font-family:'Poppins', system-ui, sans-serif; font-size:.7rem; letter-spacing:.06em;
  border-bottom:0; padding-bottom:0; }
table.reglas td.sigue { color:var(--verde, #0F6B52); }
table.reglas td.no-sigue { color:var(--suave); font-style:italic; }
table.reglas td.rojo { color:var(--rojo); font-weight:500; }
table.reglas td.ambar { color:var(--ambar); }
table.reglas td.verde { color:#0F6B52; }

/* La ficha del seguimiento: de qué periodo habla y qué quedó de la vez
   pasada. Va aparte de la historia clínica, y se ve que es aparte. */
.seguimiento-ficha { border-left:3px solid var(--suave); }
.seguimiento-ficha table.dicho td:first-child { width:15rem; }

/* La historia toda junta: un renglón por dato, con su bandera y —cuando hay
   con qué comparar— lo que decía antes y cómo va. */
table.todo-junto td:first-child { width:36%; }
table.todo-junto td:nth-child(2) { white-space:normal; }
table.todo-junto td:nth-child(3) { width:14%; color:var(--suave);
  font-variant-numeric:tabular-nums; }
table.todo-junto td:nth-child(4) { width:12%; }
table.todo-junto td.bien { color:#0F6B52; }
table.todo-junto td.mal { color:var(--rojo); }
table.todo-junto td.quieto, table.todo-junto td.sindato { color:var(--suave); }

/* Lo mismo en el documento suelto, para que no salte al descargarlo. */
.listo, .bloqueo { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

/* Lo que contestó tal cual no es un bloque de la historia: va **debajo** de
   la barra, en su propia línea. Iba dentro, empujado a la derecha, y en el
   teléfono —donde la barra se parte en dos filas— quedaba colgando solo en la
   esquina (Dr. León, 14-09-2026). */
.atajo-aparte { margin: 0 0 1rem; font-size: .86rem; }

.atajo-aparte a {
  text-decoration: none;
  color: var(--suave);
  border-bottom: 1px solid var(--linea-fuerte);
  padding-bottom: .1rem;
}

.atajo-aparte a:hover { color: var(--acento); border-color: var(--acento); }

/* El pie de guardado de cada sección. Mientras no haya nada escrito queda
   apagado; en cuanto hay algo sin salir, se enciende y dice cuánto. */
.guardar-seccion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea);
}

.guardar-seccion { flex-wrap: wrap; }
/* El estado va debajo del botón, chico, con su tilde delante: se mira después
   de guardar, no antes. */
.guardar-seccion .cuantos {
  flex-basis: 100%;
  text-align: right;
  margin-top: .3rem;
  font-size: .72rem;
  color: var(--suave);
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .3rem;
}
.guardar-seccion .cuantos .tic { color: var(--verde); font-size: .78rem; }
.guardar-seccion.hay-cambios .cuantos { color: var(--acento); font-weight: 600; }

/* Qué quedó sin escribir en esta sección. No impide guardar ni cerrar, pero
   tampoco puede pasar desapercibido: va en su propia caja, en ámbar, que es
   el color de lo que hay que mirar (Dr. León, 13-09-2026). */
.guardar-seccion .sin-texto {
  /* De borde a borde de la sección: `flex-basis` sola perdía contra el
     `max-width` de `.ayuda` y la caja salía a media página, descolgada del
     margen izquierdo. */
  flex: 1 0 100%;
  max-width: none;
  margin: .45rem 0 0;
  text-align: left;
  font-size: .8rem;
  color: var(--suave);
}
.guardar-seccion .sin-texto:empty { display: none; }
.guardar-seccion .sin-texto.hay-vacios {
  color: var(--ambar);
  font-weight: 500;
  background: var(--ambar-fondo);
  border: 1px solid var(--ambar);
  border-radius: 6px;
  padding: .55rem .8rem;
  line-height: 1.45;
}

/* Un recuadro escrito y sin guardar se ve distinto del guardado: es la única
   forma de que alguien no cierre la pestaña creyendo que ya salió. */
textarea.sin-guardar, td.escribible textarea.sin-guardar {
  border-color: var(--acento);
  background: var(--acento-suave);
}

/* El documento descargado se abre solo, sin la hoja de la aplicación: la
   misma regla contra la inflación de texto de Safari tiene que estar acá. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── En el teléfono y en la tablet ────────────────────────────────────────
   La consulta se abre desde un iPad y desde el teléfono (Dr. León,
   12-09-2026). Las tablas del documento se armaron para una pantalla ancha:
   en 375 px medían 800 y quedaban cortadas, sin forma de desplazarlas —la
   página no se mueve de lado a propósito—, así que la tercera columna, la
   que se escribe, era inalcanzable.

   Acá no se esconde ninguna columna: se deja que el texto se parta. Una
   historia clínica con datos ocultos es peor que una angosta. */
@media (max-width: 820px) {
  .documento table { font-size: .86rem; }
  .documento th, .documento td { padding: .35rem .4rem; overflow-wrap: anywhere; }
  /* El valor ya no se queda en una línea: «2-3 por semana» cabe partido. */
  .documento table.propia td:nth-child(2),
  .documento table.dicho td:nth-child(2) { white-space: normal; }
  .documento table.propia td:nth-child(3) { width: 38%; }
  .documento table.dicho td:first-child { width: 45%; }
  .documento table.encuesta td:last-child { width: 38%; }
  .documento .por-que { max-width: none; }
  .documento details.guia { max-width: none; }
  /* Lo que se escribe: el dedo necesita el recuadro entero, y menos de 16 px
     hace que el iPhone acerque la página al tocarlo. */
  .documento textarea, .documento table.editable input {
    font-size: 16px; min-height: 2.6rem;
  }
  .documento td.escribible textarea { min-height: 3.2rem; }
  /* Los títulos de sección no se parten en la mitad de una palabra. */
  .documento h2 { font-size: 1.1rem; }
  .documento h3 { font-size: .95rem; }
}

/* En el teléfono de pie, una tabla de tres columnas no entra. Cada bandera
   pasa a ser una fila de dos lados —el nombre a la izquierda, su valor a la
   derecha— y debajo, ancho completo, el recuadro donde se escribe. Sin
   rótulos inventados: «valor:» delante de cada número ensuciaba la lectura. */
@media (max-width: 560px) {
  .documento table.propia, .documento table.encuesta { display: block; }
  .documento table.propia thead, .documento table.encuesta thead { display: none; }
  .documento table.propia tbody, .documento table.encuesta tbody { display: block; }
  .documento table.propia tr, .documento table.encuesta tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .8rem;
    border-bottom: 1px solid var(--linea);
    /* Con relleno a los lados: la tabla tiene borde y esquinas redondeadas, y
       el texto quedaba pegado a la línea, a un píxel del borde. */
    padding: .55rem .7rem;
  }
  .documento table.propia td, .documento table.encuesta td {
    /* Sin bordes de celda: en columnas separaban, apiladas dejaban una rayita
       vertical suelta entre el nombre y el valor. */
    border: 0; padding: 0; width: auto !important;
  }
  /* El nombre de la bandera manda y se lleva el espacio que sobra. */
  .documento table.propia td:first-child,
  .documento table.encuesta td:first-child { flex: 1 1 60%; }
  /* El valor, a la derecha, en su propia tinta.
     `flex: 0 1` y `min-width: 0`, no `0 0`: una respuesta larga —«Infarto o
     problema del corazón antes de los 55, Hipertensión arterial»— se pasaba
     a su propia línea pero seguía midiendo lo que mide entera, 565 px en una
     pantalla de 375, y se cortaba por la derecha. Ahora se encoge y se parte
     en varias líneas (Dr. León, 14-09-2026). */
  .documento table.propia td:nth-child(2),
  .documento table.encuesta td:nth-child(2) {
    flex: 0 1 auto; min-width: 0; max-width: 100%;
    margin-left: auto; text-align: right; color: var(--tinta);
    font-variant-numeric: tabular-nums;
  }
  /* Y el recuadro de escribir, debajo y entero. */
  .documento table.propia td.escribible,
  .documento table.encuesta td.escribible {
    flex: 1 1 100%; margin-top: .35rem; padding: .4rem; border-radius: 4px;
  }
}

/* El registro de cambios: quién tocó la consulta. Va al principio y **no se
   ve hasta que alguien lo abre** — es para cuando se pregunta quién escribió
   algo, no para leerlo en la llamada. */
.documento details.cambios {
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--linea);
  padding-bottom: .6rem;
}
.documento details.cambios summary {
  cursor: pointer;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--suave);
}
.documento details.cambios summary .n { color: var(--tinta); }
.documento details.cambios table { max-width: 46rem; margin-top: .5rem; }
.documento details.cambios td:first-child { width: 8rem; color: var(--suave);
  font-variant-numeric: tabular-nums; }
.documento details.cambios td:nth-child(2) { width: 12rem; }

/* ── el teléfono ────────────────────────────────────────────────────────────
   Una matriz de cinco columnas en 375 px deja celdas de 40 px: cada dato se
   parte en tres renglones de cuatro letras y la tabla se lee «jalada»
   (Dr. León, 18-09-2026). Debajo de 620 px cada fila pasa a ser una tarjeta y
   cada dato se lee con el nombre de su columna delante, que es como se lee en
   voz alta: «Dosis: 500 mg». El nombre viaja en `data-col`. */
@media (max-width: 620px) {
  .documento .matriz-caja table, .documento table.cruce,
  .documento .matriz-caja tbody, .documento table.cruce tbody,
  .documento .matriz-caja tr, .documento table.cruce tr,
  .documento .matriz-caja td, .documento table.cruce td,
  .documento .matriz-caja th[scope="row"] {
    display: block;
    width: auto;
  }
  .documento .matriz-caja thead, .documento table.cruce thead { display: none; }
  .documento .matriz-caja tr, .documento table.cruce tr {
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: .55rem .7rem;
    margin-bottom: .5rem;
    background: var(--carta);
  }
  .documento .matriz-caja td, .documento table.cruce td {
    border: 0;
    padding: .18rem 0;
  }
  .documento .matriz-caja td[data-col]::before,
  .documento table.cruce td[data-col]::before {
    content: attr(data-col) ": ";
    color: var(--suave);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: .35rem;
  }
  /* El primer dato nombra la fila —el medicamento, el suplemento—: va como
     título de la tarjeta y sin su etiqueta delante. */
  .documento .matriz-caja td.primera,
  .documento .matriz-caja th[scope="row"] {
    font-weight: 500;
    padding-bottom: .35rem;
  }
  .documento .matriz-caja td.primera::before { content: none; }
  /* Una celda vacía no ocupa un renglón para decir que está vacía. */
  .documento .matriz-caja td:empty, .documento table.cruce td:empty {
    display: none;
  }
}