:root {
  --fondo: #f5f6f4; --sup: #ffffff; --texto: #1d2321; --tenue: #66706b; --borde: #dfe3e0;
  --acento: #1f6f5c; --acento-claro: #e3f1ec;
  --verde: #2f855a; --verde-f: #e6f4ec; --amar: #a86b00; --amar-f: #fdf3dc; --rojo: #b42318; --rojo-f: #fdecea;
  --radio: 8px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
button:disabled { opacity: .5; cursor: default; }
body { margin: 0; font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .1rem 0 .2rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem; margin: .8rem 0 .3rem; }
code { font-size: .85em; background: #eef0ee; padding: 1px 4px; border-radius: 4px; }
main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; }
.tenue { color: var(--tenue); }
.chico { font-size: .85rem; }

.barra { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--sup); border-bottom: 1px solid var(--borde); }
.marca { font-weight: 700; color: var(--texto); }
.marca span { color: var(--acento); font-weight: 500; }
.barra nav { flex: 1; display: flex; gap: 16px; }
.quien { font-size: .9rem; }

.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.chico-enc { margin: 18px 0 4px; align-items: center; }
.chico-enc h2 { margin: 0; }
.miga { margin: 0; font-size: .85rem; color: var(--tenue); }
.acciones, .fila-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acciones form, .fila-botones form, .enlinea { display: inline; margin: 0; }

.tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin-bottom: 16px; }
details.tarjeta summary { cursor: pointer; font-weight: 600; }
details.tarjeta[open] summary { margin-bottom: 12px; }
.dos-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .dos-col { grid-template-columns: minmax(0, 1fr); }
  .dos-col > .columna { order: -1; } /* en el celular, la carga primero */
  .ocultar-celu { display: none; }
}

button, .boton { font: inherit; padding: 7px 14px; border: 1px solid var(--borde); background: var(--sup); color: var(--texto); border-radius: 6px; cursor: pointer; display: inline-block; }
button:hover, .boton:hover { border-color: var(--acento); text-decoration: none; }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.peligro { color: var(--rojo); }
button.chico, .boton.chico { padding: 4px 10px; font-size: .85rem; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 6px; width: 100%; background: #fff; }
input[type=checkbox] { width: auto; }
.formulario { display: grid; gap: 10px; }
.formulario label { display: grid; gap: 3px; font-size: .85rem; color: var(--tenue); }
label.check { display: flex; gap: 8px; align-items: center; color: var(--texto); font-size: .9rem; }
.buscar { display: flex; gap: 8px; min-width: 320px; }
.enlace { font-size: .8rem; margin-bottom: 8px; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); font-weight: 600; }
.tabla .num { text-align: right; }
tr.clic { cursor: pointer; }
tr.clic:hover { background: var(--acento-claro); }

.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; background: #eef0ee; color: var(--tenue); white-space: nowrap; }
.chip.verde { background: var(--verde-f); color: var(--verde); }
.chip.amarillo { background: var(--amar-f); color: var(--amar); }
.chip.rojo { background: var(--rojo-f); color: var(--rojo); }
.chip.procesando { background: var(--acento-claro); color: var(--acento); }
.alerta { background: var(--rojo-f); color: var(--rojo); padding: 10px 14px; border-radius: var(--radio); }
.alerta.info { background: var(--acento-claro); color: var(--acento); }
.cita { border-left: 3px solid var(--acento); padding: 4px 10px; margin: 6px 0; background: #fafbfa; white-space: pre-wrap; }

.login { max-width: 360px; margin: 10vh auto; }

/* Revisión */
.revision { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .revision { grid-template-columns: 1fr; } }
.paginas { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; }
.pagina { position: relative; margin-bottom: 12px; border: 1px solid var(--borde); background: #fff; }
.pagina img { width: 100%; display: block; }
.num-pag { position: absolute; right: 6px; top: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 4px; }
.caja { position: absolute; border: 2px solid; border-radius: 3px; }
.caja.c-verde { border-color: rgba(47,133,90,.55); }
.caja.c-amarillo { border-color: rgba(168,107,0,.7); }
.caja.c-rojo { border-color: rgba(180,35,24,.8); }
.caja.c-verde, .caja.c-amarillo, .caja.c-rojo { border-style: dashed; }
.caja.ok { border: 1px solid rgba(47,133,90,.35); background: rgba(47,133,90,.10); }
.caja.ok .tilde { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%;
  background: var(--verde); color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-weight: 700; }
.caja.activo { background: rgba(31,111,92,.18); border-width: 3px; }
body.solo-pendientes .caja.ok { display: none; }

/* Progreso de revisión */
.progreso { position: sticky; top: 0; z-index: 2; padding: 10px 12px; }
.progreso-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.progreso-fila form { margin: 0; }
.progreso p { margin: 6px 0 0; }
.barra-progreso { height: 6px; background: #eef0ee; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--verde); transition: width .3s; }
.chip.ok { background: var(--verde); color: #fff; }

/* Valor revisado: compacto, con resumen; "Editar" lo abre */
.valor.revisado { border-left-color: var(--verde); background: #f6fbf8; padding: 7px 12px; }
.valor.revisado .valor-detalle { display: none; }
.valor.revisado.editando .valor-detalle { display: block; }
.valor.revisado.editando { background: var(--sup); }
.tilde-lista { color: var(--verde); font-weight: 700; margin-right: 4px; }
.resumen { font-size: .9rem; }
body.solo-pendientes .valor.revisado:not(.editando), body.solo-pendientes .valor.e-descartado { display: none; }

.valor { background: var(--sup); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; margin-bottom: 10px; }
.valor.c-verde { border-left-color: var(--verde); }
.valor.c-amarillo { border-left-color: var(--amar); }
.valor.c-rojo { border-left-color: var(--rojo); }
.valor.e-descartado { opacity: .5; }
.valor.activo { box-shadow: 0 0 0 2px var(--acento); }
.valor:target { box-shadow: 0 0 0 2px var(--acento); }
.valor-cab, .valor-pie { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.valor-pie { margin-top: 8px; align-items: center; }
.recorte { display: block; max-width: 100%; max-height: 90px; margin: 6px 0; border: 1px solid var(--borde); border-radius: 4px; }
.valor-campos { display: grid; grid-template-columns: 1fr 1fr 1.4fr 2fr; gap: 6px; }
.valor-campos label { display: grid; gap: 2px; font-size: .75rem; color: var(--tenue); }
.valor-campos input, .valor-campos select { padding: 5px 7px; font-size: .9rem; }
@media (max-width: 600px) { .valor-campos { grid-template-columns: 1fr 1fr; } }

/* Seguimiento */
.desplaza { overflow-x: auto; }
.seguimiento td, .seguimiento th { white-space: nowrap; }
.seguimiento .fija { position: sticky; left: 0; background: var(--sup); z-index: 1; }
.seguimiento tr.seccion td { background: var(--acento-claro); color: var(--acento); font-weight: 600; font-size: .85rem; position: sticky; left: 0; }
.celda { display: inline-block; padding: 1px 5px; border-radius: 4px; color: var(--texto); }
.celda + .celda { margin-left: 4px; }
.celda.fuera, .leyenda.fuera { color: var(--rojo); font-weight: 700; }
.celda.sinrev, .leyenda.sinrev { font-style: italic; background: var(--amar-f); }
.leyenda { padding: 0 5px; border-radius: 4px; }
.linea-tiempo { list-style: none; padding: 0; margin: 12px 0 0; }
.linea-tiempo li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
.lt-fecha { font-weight: 600; color: var(--tenue); }

/* Carga (cámara / archivos) */
.botones-carga { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.boton.grande { padding: 14px 10px; text-align: center; font-weight: 600; }
.cola { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cola:empty { display: none; }
.cola li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--borde); border-radius: 6px; }
.cola img, .icono-pdf { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.icono-pdf { display: grid; place-items: center; background: var(--rojo-f); color: var(--rojo); font-weight: 700; font-size: .8rem; }
.cola .nombre { font-size: .85rem; overflow-wrap: anywhere; }
.alerta-texto { color: var(--rojo); margin: 0; }
.alerta-texto:empty { display: none; }
.angosto { max-width: 560px; margin: 0 auto; }
.resultados { list-style: none; padding: 0; margin: 6px 0; }
.resultados li { padding: 10px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.resultados li:hover { background: var(--acento-claro); }
.elegido { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px; background: var(--acento-claro); border-radius: 6px; }

/* Celular */
@media (max-width: 640px) {
  main { padding: 12px 10px 40px; }
  .barra { gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
  .solo-ancho { display: none; }
  .buscar { min-width: 0; width: 100%; }
  .tabla th, .tabla td { padding: 6px 5px; font-size: .88rem; }
  .tarjeta { padding: 12px; }
  h1 { font-size: 1.3rem; }
  input, select, textarea, button { font-size: 16px; } /* evita el zoom automático de iOS */
}
.tarjeta > .tabla { display: block; overflow-x: auto; }

/* Vista del paciente */
.paciente-vista { max-width: 560px; margin: 0 auto; }
.subir-grande { display: grid; gap: 8px; padding: 18px; border: 2px dashed var(--borde); border-radius: var(--radio); text-align: center; color: var(--texto) !important; font-size: 1rem !important; }
.lista-docs { list-style: none; padding: 0; margin: 0; }
.lista-docs li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); align-items: baseline; flex-wrap: wrap; }
.lista-docs li span { color: var(--tenue); min-width: 120px; }

/* Revisión rápida (D-030) */
.valor.actual { box-shadow: 0 0 0 2px var(--acento); }
.valor.enviando { opacity: .6; pointer-events: none; }
.alertas-control { margin: 6px 0; padding: 6px 10px 6px 24px; background: var(--amar-f); color: var(--amar); border-radius: 6px; }
.alertas-control li + li { margin-top: 2px; }
kbd { font: .78rem/1 ui-monospace, Consolas, monospace; padding: 2px 5px; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--texto); }
@media (max-width: 900px) { .atajos { display: none; } }
#avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 10; max-width: calc(100vw - 32px); }
.aviso { background: var(--acento); color: #fff !important; padding: 10px 14px; border-radius: var(--radio); box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* Variable nueva (D-033) */
.crear-linea { margin: 4px 0 0; }
.vinculo { background: none; border: 0; padding: 0; color: var(--acento); font: inherit; cursor: pointer; text-decoration: underline; }
.dialogo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; width: min(520px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(0,0,0,.35); }
.dialogo h2 { margin: 0; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lista-parecidas { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; font-size: .85rem; color: var(--tenue); }

/* Tendencias e historia */
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.tend { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); text-decoration: none; white-space: nowrap; }
.tend-txt { font-size: .78rem; }
.sparkline { display: block; }
.sp-banda { fill: var(--verde-f); }
.sp-linea { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-linejoin: round; }
.sp-ultimo { fill: var(--acento); }
.sp-fuera, .sp-ultimo.sp-fuera { fill: var(--rojo); }
.grafico { width: 100%; height: auto; display: block; }
.gr-banda { fill: var(--verde-f); }
.gr-grilla { stroke: var(--borde); stroke-width: 1; }
.gr-limite { stroke: var(--verde); stroke-width: 1; stroke-dasharray: 4 3; }
.gr-limite-txt { fill: var(--verde); font-size: 11px; }
.gr-eje { fill: var(--tenue); font-size: 11px; }
.gr-linea { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; }
.gr-punto { fill: var(--sup); stroke: var(--acento); stroke-width: 2.5; cursor: pointer; }
.gr-punto:hover { r: 7; }
.gr-fuera { stroke: var(--rojo); fill: var(--rojo-f); }
.gr-valor { fill: var(--texto); font-size: 12px; font-weight: 600; }
.gr-fuera-txt, .fuera-txt { fill: var(--rojo); color: var(--rojo); }
.leyenda-banda { display: inline-block; width: 14px; height: 10px; background: var(--verde-f); border: 1px solid var(--verde); vertical-align: middle; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros button.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.historia { list-style: none; padding: 0; margin: 0; }
.hito { display: grid; grid-template-columns: 110px 1fr; gap: 14px; margin-bottom: 10px; }
.hito-fecha { font-weight: 600; color: var(--tenue); }
.hito-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hito p { margin: 4px 0; }
.fuera-lista { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; }
@media (max-width: 640px) { .hito { grid-template-columns: 1fr; gap: 4px; } }

/* Historia como tabla (D-034) */
.historia-tabla .fecha-col { vertical-align: bottom; }
.lab-col { display: block; font-size: .7rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tenue); }
.historia-tabla .col-info { border-left: 2px solid var(--borde); padding-left: 14px; }