:root {
  --fondo: #f3f5f8; --papel: #ffffff; --texto: #1b1f26; --gris: #5d6674; --linea: #e1e5eb;
  --primario: #1f5eff; --primario-h: #174ad1;
  --ok: #1e7b34; --ok-f: #e6f4ea; --adv: #b26a00; --adv-f: #fff4e0; --mal: #c62828; --mal-f: #fdecea; --info: #2e6da4; --info-f: #e8f1fa;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #121417; --papel: #1c1f24; --texto: #e7e9ec; --gris: #9aa3ae; --linea: #2e333a;
    --ok-f: #16311f; --adv-f: #3a2c11; --mal-f: #3b1c1c; --info-f: #16283a; --sombra: none; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--fondo); padding: 1px 4px; border-radius: 4px; }
a { color: var(--primario); }
h1 { font-size: 20px; margin: 0; } h2 { font-size: 18px; margin: 0 0 8px; } h3 { margin: 0; font-size: 17px; }
.gris { color: var(--gris); }
.error { color: var(--mal); min-height: 1.2em; }

.barra { background: var(--papel); border-bottom: 1px solid var(--linea); padding: 12px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca p { margin: 0; color: var(--gris); font-size: 13px; }
.logo { background: linear-gradient(135deg, #1f5eff, #12b3a6); color: #fff; font-weight: 800; padding: 8px 11px; border-radius: 10px; letter-spacing: .5px; }
.producto { font-weight: 500; color: var(--gris); font-size: 15px; margin-left: 6px; }
.lema { margin: 0; color: var(--gris); font-size: 13px; }
.pie { text-align: center; color: var(--gris); font-size: 12px; padding: 24px 16px 40px; }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs button { border: 0; background: transparent; color: var(--gris); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.tabs button.activo, .tabs button:hover { background: var(--fondo); color: var(--texto); }
.estado-servidor { font-size: 12px; color: var(--gris); }

main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
.tab { display: none; } .tab.activo { display: block; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 18px; box-shadow: var(--sombra); margin-bottom: 16px; }

.subida { text-align: center; }
.subida.arrastrando { border-color: var(--primario); background: var(--info-f); }
.zona-texto { padding: 26px 10px; font-size: 16px; }
.zona-texto button { margin-top: 12px; }
.opciones { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center; border-top: 1px solid var(--linea); padding-top: 14px; font-size: 14px; }
.progreso { margin-top: 12px; }
.barra-progreso { height: 6px; background: var(--linea); border-radius: 3px; overflow: hidden; position: relative; }
.barra-progreso::after { content: ""; position: absolute; left: -40%; width: 40%; height: 100%; background: var(--primario); animation: mover 1.2s infinite linear; }
@keyframes mover { to { left: 100%; } }

/* Carga: nada se queda en blanco sin decir qué está pasando. */
.cargando { display: flex; align-items: center; gap: 10px; color: var(--gris); font-size: 14px; padding: 10px 2px; }
.cargando::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--linea); border-top-color: var(--primario); animation: girar .7s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }
.esqueleto { border-radius: 9px; background: linear-gradient(90deg, var(--linea) 25%, var(--fondo) 50%, var(--linea) 75%); background-size: 300% 100%; animation: latir 1.3s ease-in-out infinite; }
@keyframes latir { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.esqueleto-lista { display: grid; gap: 10px; }
.esqueleto-lista .esqueleto { height: 66px; }
.esqueleto-lista .esqueleto:nth-child(2) { opacity: .75; }
.esqueleto-lista .esqueleto:nth-child(3) { opacity: .5; }
.esqueleto-lista .esqueleto:nth-child(4) { opacity: .3; }
.chip-cargando { display: inline-flex; align-items: center; gap: 7px; color: var(--gris); font-size: 13px; }
.chip-cargando::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linea); border-top-color: var(--primario); animation: girar .7s linear infinite; }

.btn { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-block; }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.primario:hover { background: var(--primario-h); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.peligro { color: var(--mal); }

.resumen-cabecera { margin-bottom: 14px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.kpi { margin: 0; padding: 12px 14px; }
.kpi b { display: block; font-size: 28px; line-height: 1.1; } .kpi span { color: var(--gris); font-size: 13px; }
.kpi.ok b { color: var(--ok); } .kpi.adv b { color: var(--adv); } .kpi.mal b { color: var(--mal); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.filtros button { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.filtros button.activo { border-color: var(--primario); color: var(--primario); font-weight: 600; }
.filtros input, .filtros select { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 7px 10px; border-radius: 9px; min-width: 200px; }

.lista-facturas { display: grid; gap: 8px; }
.fila-factura { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; cursor: pointer; }
.fila-factura:hover { border-color: var(--primario); }
.fila-factura .num { font-weight: 700; font-size: 16px; }
.fila-factura .meta { color: var(--gris); font-size: 13px; }
.fila-factura .contadores { display: flex; gap: 6px; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip.RECHAZADA, .chip.RECHAZO { background: var(--mal-f); color: var(--mal); }
.chip.CON_ADVERTENCIAS, .chip.ADVERTENCIA { background: var(--adv-f); color: var(--adv); }
.chip.LISTA, .chip.CORREGIDO { background: var(--ok-f); color: var(--ok); }
.chip.INFO { background: var(--info-f); color: var(--info); }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
@media (max-width: 900px) { .tabla { display: block; overflow-x: auto; } }
.tabla th, .tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { color: var(--gris); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tabla tr.clic { cursor: pointer; } .tabla tr.clic:hover { background: var(--fondo); }
.tabla code.cod { font-weight: 700; }

.panel-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; display: flex; justify-content: flex-end; }
.panel { width: min(760px, 100%); height: 100%; background: var(--papel); overflow: auto; box-shadow: -8px 0 30px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.panel > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--papel); }
.cerrar { border: 0; background: transparent; font-size: 26px; cursor: pointer; color: var(--gris); }
#p-cuerpo { padding: 14px 18px 40px; }
.bloque { margin-bottom: 18px; }
.bloque h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.hallazgo { border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.hallazgo.RECHAZO { border-left-color: var(--mal); } .hallazgo.ADVERTENCIA { border-left-color: var(--adv); } .hallazgo.INFO { border-left-color: var(--info); } .hallazgo.CORREGIDO { border-left-color: var(--ok); }
.hallazgo .cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.hallazgo .cab b { font-family: ui-monospace, Consolas, monospace; }
.hallazgo .obs { font-weight: 600; }
.hallazgo .desc { color: var(--gris); font-size: 13px; }
.hallazgo .ruta { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--gris); word-break: break-all; margin-top: 4px; }
/* Contexto del registro: paciente, servicio, diagnóstico y fecha. Es lo que hace
   buscable un hallazgo cuando la factura trae miles de servicios. */
.hallazgo .ctx { font-size: .82rem; color: #0f766e; background: #ecfdf5;
  border-left: 3px solid #2fb7a0; padding: .25rem .5rem; margin: .25rem 0 .35rem;
  border-radius: 3px; }
#p-buscar { flex: 1 1 18rem; padding: .45rem .6rem; border: 1px solid #d4d4d8;
  border-radius: 6px; font-size: .9rem; }

.hallazgo .sug { margin-top: 6px; font-size: 13px; background: var(--fondo); padding: 6px 8px; border-radius: 8px; }
.resumen-factura { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; font-size: 13px; }
.resumen-factura div { background: var(--fondo); border-radius: 8px; padding: 8px 10px; } .resumen-factura span { display: block; color: var(--gris); font-size: 11px; text-transform: uppercase; }
pre.json { background: var(--fondo); border-radius: 10px; padding: 10px; font-size: 12px; overflow: auto; max-height: 420px; }

.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--papel); border-radius: 14px; padding: 22px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
.modal input[type=text], .modal input[type=password], .modal input:not([type]) { border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); padding: 9px 10px; border-radius: 9px; font-size: 15px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--papel); padding: 10px 16px; border-radius: 10px; z-index: 40; max-width: 90%; }
.detalle-cups { background: var(--fondo); border-radius: 10px; padding: 12px; margin-bottom: 12px; font-size: 14px; }
.frecuentes-lista { display: flex; flex-wrap: wrap; gap: 8px; } .frecuentes-lista span { background: var(--fondo); border-radius: 999px; padding: 4px 10px; font-size: 13px; }

@media (max-width: 720px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .fila-factura { grid-template-columns: 1fr; }
  .tabs { margin-left: 0; width: 100%; overflow-x: auto; }
  .tabla th:nth-child(3), .tabla td:nth-child(3) { display: none; }
}

.modal.ancha { width: min(900px, 100%); }
#json-texto { width: 100%; min-height: 55vh; font: 12px/1.4 ui-monospace, Consolas, monospace; border: 1px solid var(--linea); border-radius: 9px; background: var(--fondo); color: var(--texto); padding: 8px; }
.editar { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.editar input { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 6px 9px; border-radius: 8px; min-width: 180px; font-family: ui-monospace, Consolas, monospace; }
.editar .actual { font-size: 12px; color: var(--gris); }
.editar .btn { padding: 5px 10px; font-size: 13px; }

/* --- Formulario con semáforo --- */
.vista-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.vista-tabs button { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; }
.vista-tabs button.activo { border-color: var(--primario); color: var(--primario); }
.barra-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; background: var(--papel); padding: 8px 0; z-index: 2; border-bottom: 1px solid var(--linea); margin-bottom: 10px; }
.leyenda { font-size: 12px; color: var(--gris); display: flex; align-items: center; gap: 6px; }
.pt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pt.rojo { background: var(--mal); } .pt.amarillo { background: var(--adv); } .pt.verde { background: var(--ok); }
.aviso { background: var(--info-f); color: var(--info); border-radius: 9px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.aviso.ok { background: var(--ok-f); color: var(--ok); } .aviso.mal { background: var(--mal-f); color: var(--mal); }
.seccion { border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; background: var(--papel); }
.seccion > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 14px; }
.seccion.rojo { border-left: 4px solid var(--mal); } .seccion.amarillo { border-left: 4px solid var(--adv); } .seccion.verde { border-left: 4px solid var(--ok); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 4px 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.campo .et { color: var(--gris); display: flex; align-items: center; gap: 5px; }
.campo .req { color: var(--mal); }
.campo .tec { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--gris); opacity: .65; }
.campo input, .campo select { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); border-radius: 8px; padding: 7px 9px; font-size: 14px; width: 100%; }
.campo.rojo input, .campo.rojo select { border-color: var(--mal); background: var(--mal-f); }
.campo.amarillo input, .campo.amarillo select { border-color: var(--adv); background: var(--adv-f); }
.campo.editado input, .campo.editado select { border-color: var(--primario); box-shadow: 0 0 0 2px rgba(31,94,255,.15); }
.campo .ayuda { border: 0; background: var(--gris); color: var(--papel); width: 16px; height: 16px; border-radius: 50%; font-size: 11px; line-height: 16px; cursor: pointer; padding: 0; }
.con-busqueda { position: relative; display: flex; gap: 4px; }
.lupa { padding: 4px 8px; }
.sugerencias { position: absolute; top: 100%; left: 0; right: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 9px; max-height: 240px; overflow: auto; z-index: 6; box-shadow: var(--sombra); }
.sugerencias button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--texto); padding: 6px 9px; cursor: pointer; font-size: 13px; }
.sugerencias button:hover { background: var(--fondo); }
.usuario { margin: 14px 0; }
.usuario h3 { font-size: 15px; margin: 0 0 6px; }
.ayuda-flotante { position: fixed; width: min(420px, 92vw); background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); padding: 12px; z-index: 40; max-height: 60vh; overflow: auto; }
.ayuda-flotante h4 { margin: 0 0 4px; font-size: 14px; }
.ayuda-flotante .ruta { font-size: 11px; color: var(--gris); display: block; margin-bottom: 8px; word-break: break-all; }

.campo.historico input, .campo.historico select { border-color: var(--info); background: var(--info-f); }
.seccion.historico { border-left: 4px solid var(--info); }
.pt.historico { background: var(--info); }
.chip.HISTORICO { background: var(--info-f); color: var(--info); }

/* --- Curso de vida, gestantes, planos 3374 --- */
.vista-tabs.lote { margin: 4px 0 12px; }
.grupo-eps { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); }
.grupo-eps select { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 7px 10px; border-radius: 9px; }
.planos-opciones { justify-content: flex-start; text-align: left; }
.planos-opciones label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--gris); }
.planos-opciones input, .planos-opciones select { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 6px 9px; border-radius: 8px; font-size: 14px; }
.lista-chequeos { display: grid; gap: 4px; max-height: 240px; overflow: auto; border: 1px solid var(--linea); border-radius: 10px; padding: 8px; margin-bottom: 10px; }
.lista-chequeos label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.chip.cumplida { background: var(--ok-f); color: var(--ok); }
.chip.pendiente { background: var(--adv-f); color: var(--adv); }
.chip.vencida { background: var(--mal-f); color: var(--mal); }
.chip.no-exigible { background: var(--fondo); color: var(--gris); }
.ficha-usuario { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--papel); }
.ficha-usuario > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ficha-usuario > summary::-webkit-details-marker { display: none; }
.ficha-usuario .barra-cumpl { flex: 1; min-width: 90px; height: 7px; background: var(--linea); border-radius: 4px; overflow: hidden; }
.ficha-usuario .barra-cumpl i { display: block; height: 100%; background: var(--ok); }
.ventanas { display: flex; gap: 4px; flex-wrap: wrap; }
.ventanas span { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--fondo); color: var(--gris); }
.ventanas span.cumplida { background: var(--ok-f); color: var(--ok); }
.ventanas span.vencida { background: var(--mal-f); color: var(--mal); }
.ventanas span.pendiente { background: var(--adv-f); color: var(--adv); }
.aviso { border: 1px solid var(--linea); border-left: 4px solid var(--info); background: var(--info-f); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.aviso.ok { border-left-color: var(--ok); background: var(--ok-f); }
.aviso.mal { border-left-color: var(--mal); background: var(--mal-f); }

/* --- Ayudas para entender los hallazgos --- */
.tooltip { position: fixed; z-index: 40; max-width: 420px; background: var(--papel); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  font-size: 13px; line-height: 1.45; pointer-events: none; }
.tooltip hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 0; }
.tooltip i { color: var(--gris); font-style: normal; font-size: 12px; }
[data-tip] { cursor: help; }
.leyenda-niveles { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 13px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.leyenda-niveles .pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.leyenda-niveles .pt.rojo { background: var(--mal); } .leyenda-niveles .pt.amarillo { background: var(--adv); }
.glosario-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.glosario-niveles > div { border: 1px solid var(--linea); border-left: 5px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.glosario-niveles > div.RECHAZO { border-left-color: var(--mal); background: var(--mal-f); }
.glosario-niveles > div.ADVERTENCIA { border-left-color: var(--adv); background: var(--adv-f); }
.glosario-niveles > div.INFO { border-left-color: var(--info); background: var(--info-f); }
.glosario-niveles h4 { margin: 0 0 6px; font-size: 15px; }
.glosario-niveles p { margin: 4px 0; font-size: 13px; }



/* --- El flujo de acciones: arreglar → CUV → radicar ------------------------------------------------
   Va en línea porque el orden es la información: no se radica sin CUV, y el CUV no sale si hay
   rechazos. En cuadrícula los cuatro bloques parecían opciones sueltas del mismo nivel. */
.flujo { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 0; align-items: stretch;
  list-style: none; margin: 0 0 16px; padding: 0; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.etapa { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0;
  border-right: 1px solid var(--linea); position: relative; }
.etapa:last-child { border-right: 0; }
/* La flecha entre etapas: marca la secuencia sin ocupar una columna */
.etapa:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 50%;
  transform: translateY(-50%); z-index: 2; width: 18px; height: 18px; line-height: 16px;
  text-align: center; font-size: 15px; color: var(--gris); background: var(--papel);
  border: 1px solid var(--linea); border-radius: 50%; }
.etapa-cab { display: flex; align-items: center; gap: 8px; }
.etapa-cab h4 { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--texto); }
.etapa-cab .num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primario);
  color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.etapa .btn, .etapa select { width: 100%; text-align: center; }
.etapa select { border: 1px solid var(--linea); background: var(--papel); color: var(--texto);
  padding: 8px 10px; border-radius: 9px; font: inherit; }
.etapa-mas { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.etapa-mas.fila { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
.pista { color: var(--gris); font-size: 11.5px; line-height: 1.35; }

/* Las acciones secundarias son enlaces, no botones: así el botón azul de cada etapa manda solo */
.enlace { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--primario); cursor: pointer; text-align: left; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* La columna de informes no es un paso del proceso: se separa */
.etapa-informes { background: var(--fondo); border-left: 1px solid var(--linea); min-width: 190px; }
.etapa-informes .num { background: var(--gris); }
.etapa-informes::after { display: none; }

/* Una etapa que todavía no se puede usar se ve apagada, pero sigue legible */
.etapa.bloqueada { opacity: .5; }
.etapa.bloqueada .num { background: var(--gris); }

@media (max-width: 900px) {
  .flujo { grid-template-columns: 1fr; }
  .etapa { border-right: 0; border-bottom: 1px solid var(--linea); }
  .etapa:not(:last-child)::after { right: 50%; top: auto; bottom: -9px; transform: translateX(50%); content: "⌄"; }
  .etapa-informes { border-left: 0; }
}
.enlace:disabled { color: var(--gris); cursor: default; text-decoration: none; opacity: .6; }

/* --- Filtros del panel de una factura -------------------------------------------------------------
   Una factura puede traer miles de hallazgos y casi todos son el mismo código repetido. Sin filtro
   la lista no se puede leer. */
.filtros-novedad { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.filtros-novedad button { border: 1px solid var(--linea); background: var(--papel); color: var(--texto);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.filtros-novedad button:hover:not(:disabled) { border-color: var(--primario); color: var(--primario); }
.filtros-novedad button.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.filtros-novedad button:disabled { opacity: .4; cursor: default; }
#p-filtro-codigo { border: 1px solid var(--linea); background: var(--papel); color: var(--texto);
  border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; max-width: 240px; }

/* Barra de filtros y corrección masiva de la ventana del formulario (pedido de la IPS) */
.filtros-form { gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.filtros-form label { display: flex; align-items: center; gap: 5px; color: var(--gris); }
.filtros-form select { max-width: 230px; }

/* Correcciones automáticas, con interruptor. Las pidió la IPS a la vista en la pantalla de carga. */
.reglas-auto { border-top: 1px solid var(--linea); margin-top: 14px; padding-top: 10px; text-align: left; }
.reglas-auto > summary { cursor: pointer; font-weight: 600; }
.reglas-auto > p { margin: 8px 0 12px; font-size: 13px; }
#reglas-lista { display: grid; gap: 8px; }
.regla { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 9px; background: var(--papel); }
.regla b { display: block; font-size: 14px; }
.regla span { color: var(--gris); font-size: 13px; }
/* En su propio renglón: pegado al detalle se leía «…que elijas aquí.Asume un valor…». */
.regla .asume { display: block; margin-top: 3px; color: var(--adv); font-size: 12px; }
.interruptor { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; margin-top: 2px; }
.interruptor input { opacity: 0; width: 0; height: 0; }
.interruptor i { position: absolute; inset: 0; background: var(--linea); border-radius: 22px; transition: background .15s; }
.interruptor i::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--papel); border-radius: 50%; transition: transform .15s; }
.interruptor input:checked + i { background: var(--ok); }
.interruptor input:checked + i::before { transform: translateX(18px); }
.interruptor input:focus-visible + i { outline: 2px solid var(--primario); outline-offset: 2px; }
.regla.apagada b, .regla.apagada span { opacity: .55; }
.regla .dentro-de-regla { display: block; margin-top: 7px; font-size: 13px; color: var(--texto); }
.regla .dentro-de-regla select { margin-left: 4px; }

/* Respuesta del Ministerio: una ventana, no 2,8 MB de texto al final de la página. */
.modal.ancha { width: min(900px, 100%); max-height: 86vh; }
.min-listado { overflow: auto; max-height: 48vh; border: 1px solid var(--linea); border-radius: 10px; }
.min-listado table { width: 100%; border-collapse: collapse; font-size: 13px; }
.min-listado th { position: sticky; top: 0; background: var(--papel); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); font-size: 12px; color: var(--gris); }
.min-listado td { padding: 7px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.min-listado tr:last-child td { border-bottom: 0; }
.min-listado .n { text-align: right; color: var(--gris); white-space: nowrap; }
.min-crudo summary { cursor: pointer; font-size: 13px; color: var(--gris); }
.min-crudo pre { max-height: 32vh; overflow: auto; margin-top: 8px; }
.ok-txt { color: var(--ok); } .mal-txt { color: var(--mal); }
#f-valor-texto { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 7px 10px; border-radius: 9px; font-size: 14px; min-width: 190px; }
#f-valor-texto:focus { outline: 2px solid var(--primario); outline-offset: 1px; }

/* Acciones del panel: lo que se usa siempre va con texto; el resto, iconos con tooltip. */
.barra-acciones { align-items: center; gap: 8px; }
.barra-acciones .separador { width: 1px; height: 26px; background: var(--linea); margin: 0 4px; }
.btn-icono { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--linea); border-radius: 9px; background: var(--papel); color: var(--gris); cursor: pointer; text-decoration: none; transition: color .12s, border-color .12s, background .12s; }
.btn-icono:hover { color: var(--primario); border-color: var(--primario); background: var(--info-f); }
.btn-icono:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.btn-icono[disabled] { opacity: .4; cursor: not-allowed; }
.btn-icono[disabled]:hover { color: var(--gris); border-color: var(--linea); background: var(--papel); }
.btn-icono svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Por qué módulo del Ministerio va a salir el lote: dato, no adorno. */
.aviso-modulo { margin: 2px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--info-f); color: var(--texto); font-size: 13px; line-height: 1.45; }

/* Avisos que el Ministerio emite de oficio: se ven, pero no gritan. */
.hallazgo.SIN_ACCION { border-left-color: var(--linea); opacity: .82; }
.hallazgo.SIN_ACCION .chip { background: var(--fondo-2, #f1f3f6); color: var(--gris); }
.sug.sin-accion { color: var(--gris); font-style: italic; }
.pt.gris { background: var(--linea); }
.chip.SIN_ACCION { background: var(--fondo-2, #f1f3f6); color: var(--gris); }

/* Códigos de medicamento que el Ministerio no reconoce: se dicen una vez y quedan. */
.med-fila { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.med-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 14px; }
.med-cab code { background: var(--mal-f, #fdecec); color: var(--mal); padding: 1px 6px; border-radius: 6px; }
.med-aviso { margin-top: 6px; font-size: 13px; color: var(--texto); background: var(--info-f); border-radius: 8px; padding: 8px 10px; line-height: 1.45; }
.med-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.med-opciones select, .med-opciones input { flex: 1 1 320px; min-width: 220px; border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 7px 10px; border-radius: 9px; font-size: 14px; }

/* La luz de «Enlazado con el Ministerio» en la ventana de envío. */
.enlace-estado { margin: 0 0 10px; padding: 9px 12px; border-radius: 9px; font-size: 13px; line-height: 1.45; background: var(--info-f); color: var(--texto); }
.enlace-estado.ok { background: var(--ok-f, #e8f6ee); color: var(--ok); }
.enlace-estado.mal { background: var(--mal-f, #fdecec); color: var(--mal); }
.enlace-estado.ok .gris { color: var(--texto); }
.enlace-estado .enlace { margin-left: 6px; }

/* Decisiones pendientes: un paciente por renglón, con su respuesta al lado. */
.dec-regs { margin-top: 8px; display: grid; gap: 6px; }
.dec-reg { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; font-size: 13px; }
.dec-ctl { display: flex; gap: 6px; align-items: center; }
.dec-ctl select, .dec-ctl input { border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 5px 8px; border-radius: 8px; font-size: 13px; min-width: 160px; }

/* Las etapas que piden respuestas (medicamentos y decisiones) llevan listas con controles: ocupan
   toda la fila en vez de una columna angosta, y cortan la secuencia con una raya, no con la flecha. */
#etapa-medicamentos, #etapa-decisiones { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--linea); }
#etapa-medicamentos::after, #etapa-decisiones::after { content: none; }
.etapa .dec-ctl select, .etapa .dec-ctl input, .etapa .dec-ctl .btn,
.etapa .med-opciones .btn { width: auto; }
.etapa .med-opciones label { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Pantalla de resultado, amigable (4 nov 2026) ==================================================
   Una frase que dice cómo va el lote, una barra y UN botón que dice qué hacer ahora. Lo secundario
   —leyenda, filtros finos, «lo que más se repite», informes— queda a un clic y no abruma. */
.hero-lote { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px;
  display: grid; gap: 12px; }
.hero-texto h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.2; }
.hero-texto p { margin: 0; font-size: 15px; line-height: 1.45; }
.barra-lote { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--linea); }
.barra-lote i { display: block; height: 100%; transition: width .5s ease; }
.barra-lote .b-ok { background: var(--ok); } .barra-lote .b-adv { background: var(--adv); } .barra-lote .b-mal { background: var(--mal); }
.hero-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn.grande { padding: 11px 22px; font-size: 15px; border-radius: 11px; }
.hero-extra { font-size: 13px; }

/* Las cinco tarjetas de números pasan a ser un resumen discreto: la frase de arriba ya lo dice */
.resumen-cabecera { margin-bottom: 10px; }
.resumen-cabecera .tarjetas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.resumen-cabecera .kpi { padding: 8px 12px; background: transparent; box-shadow: none; border: 1px solid var(--linea); }
.resumen-cabecera .kpi b { font-size: 20px; }
.resumen-cabecera .kpi span { font-size: 12px; }

/* Los tres pasos, en una sola fila */
.flujo-pasos { grid-template-columns: repeat(2, 1fr); }
.flujo-acciones { grid-template-columns: 1fr; border-color: var(--adv); }
.flujo-acciones:not(:has(> li:not([hidden]))) { display: none; }
.flujo-acciones .etapa { border-right: 0; border-bottom: 1px solid var(--linea); }
.flujo-acciones .etapa:last-child { border-bottom: 0; }
.flujo-acciones .etapa::after { display: none; }
.flujo-mas { grid-template-columns: 1fr; margin: 8px 0 0; }
.flujo-mas .etapa::after { display: none; }

/* Desplegables: «Más herramientas», leyenda, informes y lo que más se repite */
.mas-herramientas, .leyenda-desplegable { margin: 0 0 12px; }
.mas-herramientas > summary, .leyenda-desplegable > summary, .mas-filtros > summary {
  cursor: pointer; list-style: none; color: var(--primario); font-size: 13.5px; font-weight: 600; padding: 6px 2px; }
.mas-herramientas > summary::-webkit-details-marker, .leyenda-desplegable > summary::-webkit-details-marker, .mas-filtros > summary::-webkit-details-marker { display: none; }
.mas-herramientas > summary::before, .leyenda-desplegable > summary::before, .mas-filtros > summary::before { content: "▸ "; }
.mas-herramientas[open] > summary::before, .leyenda-desplegable[open] > summary::before, .mas-filtros[open] > summary::before { content: "▾ "; }
.informes-fila { display: flex; gap: 6px 18px; flex-wrap: wrap; padding: 4px 2px 8px; }
.mas-filtros { flex-basis: 100%; }
.mas-filtros-cuerpo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0 2px; }

/* La lista: una línea por factura, lo que falta primero */
.fila-factura { grid-template-columns: 150px 1fr auto; }
.vacio-bueno { display: grid; gap: 4px; padding: 22px; text-align: center; border: 1px dashed var(--linea); border-radius: 12px; background: var(--ok-f); }
.vacio-bueno b { color: var(--ok); font-size: 16px; }
#mas-facturas { width: 100%; margin-top: 4px; }

/* Pestañas: las de todos los días, a la vista; las técnicas, en «Más» */
.tabs-mas { position: relative; }
.tabs-mas > summary { list-style: none; cursor: pointer; color: var(--gris); padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.tabs-mas > summary::-webkit-details-marker { display: none; }
.tabs-mas > summary::after { content: " ▾"; font-size: 11px; }
.tabs-mas > summary:hover, .tabs-mas[open] > summary, .tabs-mas.activo > summary { background: var(--fondo); color: var(--texto); }
.tabs-mas-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: grid; gap: 2px; padding: 6px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.tabs-mas-lista button { text-align: left; width: 100%; }

@media (max-width: 720px) {
  .flujo-pasos { grid-template-columns: 1fr; }
  .hero-texto h2 { font-size: 20px; }
  .fila-factura { grid-template-columns: 1fr; }
}

/* Cada novedad dice qué pasó y qué hacer, en cristiano; lo técnico queda a un clic. */
.hallazgo .titulo-claro { font-size: 15px; font-weight: 650; line-height: 1.4; margin: 6px 0 2px; }
.hallazgo .tecnico { margin-top: 6px; font-size: 12px; color: var(--gris); }
.hallazgo .tecnico > summary { cursor: pointer; color: var(--gris); }
.hallazgo .tecnico[open] > summary { margin-bottom: 4px; }
.hallazgo .previsto { margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; background: var(--info-f); color: var(--texto); font-size: 12.5px; line-height: 1.4; }
.revision-completa { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--info-f); font-size: 13px; line-height: 1.45; }

.otra-via { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.otra-via a { cursor: pointer; }

/* Lo repetido se lee como UNA situación con su cantidad; los casos, a un clic. */
.grupo-novedad { border: 1px solid var(--linea); border-left: 4px solid var(--adv); border-radius: 12px; background: var(--papel); margin: 0 0 8px; }
.grupo-novedad.RECHAZO { border-left-color: var(--mal); }
.grupo-novedad > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.grupo-novedad > summary::-webkit-details-marker { display: none; }
.grupo-novedad > summary::after { content: "▸"; margin-left: auto; color: var(--gris); }
.grupo-novedad[open] > summary::after { content: "▾"; }
.grupo-n { flex: none; min-width: 52px; text-align: center; padding: 4px 10px; border-radius: 999px; background: var(--adv-f); color: var(--adv); font-weight: 700; font-size: 15px; }
.grupo-novedad.RECHAZO .grupo-n { background: var(--mal-f); color: var(--mal); }
.grupo-titulo { font-weight: 650; font-size: 15px; line-height: 1.35; }
.grupo-aviso { font-weight: 400; color: var(--gris); font-size: 13px; }
.grupo-accion { padding: 0 14px 10px 78px; color: var(--gris); font-size: 13.5px; line-height: 1.45; }
.grupo-casos { padding: 0 10px 10px; display: grid; gap: 8px; }
.grupo-casos .sug, .grupo-casos .previsto { display: none; }  /* ya lo dice el encabezado del grupo */
.grupo-mas { width: 100%; }

/* Panel de la factura: primero qué corregir; lo técnico, plegado. */
.resumen-claro { font-size: 16px; line-height: 1.45; padding: 12px 14px; margin: 0 0 10px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linea); }
.barra-principal { margin-bottom: 12px; }
.mas-detalles { margin: 14px 0 0; border-top: 1px solid var(--linea); padding-top: 8px; }
.mas-detalles > summary { cursor: pointer; color: var(--gris); font-size: 13.5px; padding: 6px 0; }
.nota-sin-accion { font-size: 13px; margin: 0 0 8px; }
.editar .actual i { color: var(--gris); }

/* Cola de decisiones: un botón para todo y una barra que dice qué está pasando. */
.dec-todos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 2px; font-size: 13px; }
.dec-todos select, .dec-todos input { flex: 1 1 260px; min-width: 200px; border: 1px solid var(--linea); background: var(--papel); color: var(--texto); padding: 6px 9px; border-radius: 8px; font-size: 13px; }
.dec-recordar { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.dec-pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.etapa .dec-pie .btn, .etapa .dec-todos .btn { width: auto; }
.dec-avance { margin-top: 10px; }
.dec-avance span { display: block; margin-top: 6px; font-size: 13px; color: var(--gris); }

/* Sugerencias bajo cada renglón de la cola de decisiones: un clic las pone en la casilla. */
.dec-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; flex-basis: 100%; }
.chip-sug { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); cursor: pointer; font: inherit; font-size: 13px; color: inherit; max-width: 320px; }
.chip-sug:hover { border-color: #3b5bdb; background: #eef2ff; }
.chip-sug small { color: var(--gris); font-size: 11.5px; line-height: 1.25; }

/* Acciones de cada factura: con texto, a la vista. */
.btn.con-icono { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.btn.con-icono .ico-btn { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn.con-icono[disabled] { opacity: .45; cursor: not-allowed; }
.barra-excel { margin-bottom: 10px; }

/* Cuadrar copagos: escoger el servicio y ajustarlo. */
.ajuste-cobro { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--linea); border-radius: 10px; display: grid; gap: 8px; }
.ajuste-cobro .fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ajuste-cobro select { min-width: 240px; flex: 1; }

/* Rechazos de la factura entera en la pantalla principal: se ven, con a dónde ir. */
.dec-otros .dec-reg { display: grid; gap: 4px; }
.dec-otros .dec-reg button { justify-self: start; }

/* Los iconos de cada factura llevan su rótulo: nadie tiene que adivinar cuál es el Excel. */
.btn-icono.con-rotulo { width: auto; padding: 0 12px 0 9px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto); }
.btn-icono.con-rotulo .rotulo { white-space: nowrap; }
.barra-iconos { flex-wrap: wrap; }

/* El estado del envío al Ministerio se ve donde se está mirando, no debajo de los botones. */
.cuv-estado:not(:empty) { padding: 10px 12px; border-radius: 10px; background: var(--info-f); color: var(--texto); font-weight: 600; }
#modal-cuv .modal { max-height: 92vh; overflow-y: auto; }

/* Respuesta del Ministerio anterior a los cambios: se ve, pero apagada. */
.rechazo-ministerio.vieja { opacity: .6; }
.rechazo-ministerio.vieja h4 { text-transform: none; }

/* Historial: lo caducado se ve apagado pero sigue ahí con su CUV. */
#tabla-historial tr.caducado { color: var(--gris); }
#tabla-historial tr.caducado code { opacity: .8; }

/* Pestaña «CUV por factura». */
#tabla-cuvs .cuv-codigo { font-size: 12px; }
#cuvs-buscar { flex: 1; min-width: 220px; }

/* Usuarios */
.quien { color: var(--gris); font-size: 13px; white-space: nowrap; }
.usr-nuevo { display: grid; grid-template-columns: 1.2fr 1.4fr 1.2fr auto auto; gap: 8px; align-items: center; margin: 10px 0 4px; }
.usr-nuevo input, .usr-nuevo select { border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); padding: 9px 10px; border-radius: 9px; font-size: 14px; min-width: 0; }
.usr-fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.usr-fila-acciones .btn { padding: 4px 9px; font-size: 12.5px; }
.usr-inactivo td { color: var(--gris); text-decoration: line-through; }
.usr-inactivo td:last-child { text-decoration: none; }
@media (max-width: 900px) { .usr-nuevo { grid-template-columns: 1fr 1fr; } }