:root {
  --bg: #f6f9f9;
  --panel: #ffffff;
  --ink: #14212b;
  --ink-2: #38454f;
  --muted: #5d6b74;
  --line: #e3eaeb;
  --line-2: #eef3f3;
  --accent: #0f6f70;
  --accent-bg: #e4f1f1;
  --ok: #16794f;
  --ok-bg: #e4f3ea;
  --warn: #96590a;
  --warn-bg: #fdf0da;
  --bad: #b3261e;
  --bad-bg: #fbe8e6;
  --lock: #5b3cc4;
  --lock-bg: #f0ebff;
  --gray-bg: #f1f4f4;
  --azul: #1a6fa3;
  --radius: 10px;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { height: 100vh; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Enlace de salto: visible solo al llegar con el teclado. */
.salto { position: absolute; left: 8px; top: -48px; z-index: 40; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; }
.salto:focus { top: 8px; }
#expediente:focus { outline: none; }

.login-local {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: linear-gradient(135deg, #e4f1f1, #f6f9f9 55%, #eaf2f7);
}
.login-card {
  width: min(390px, 100%); padding: 30px;
  display: grid; gap: 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 45px rgba(20, 33, 43, .14);
}
.login-card .logo { margin-bottom: 4px; }
.login-card h1 { margin: 0; font-size: 24px; }
.login-card p { margin: 0 0 5px; color: var(--muted); line-height: 1.45; }
.login-card label { display: grid; gap: 5px; color: var(--ink-2); font-size: 13px; }
.login-card input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.login-card input:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); }
.login-card button { margin-top: 4px; padding: 9px 12px; }
.login-error { color: var(--bad) !important; font-size: 13px; }

/* ---------- top bar ---------- */
.topbar {
  min-height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.brand strong { display: block; font-size: 15px; letter-spacing: .2px; }
.brand small { color: var(--muted); font-size: 12px; }
.logo {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 700;
}
.metrics { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.metric {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--gray-bg); font-size: 12px; color: var(--ink-2);
  white-space: nowrap;
}
.metric b { font-size: 13px; color: var(--ink); }
.metric.bad { background: var(--bad-bg); color: var(--bad); }
.metric.bad b { color: var(--bad); }
.metric.warn { background: var(--warn-bg); color: var(--warn); }
.metric.warn b { color: var(--warn); }
.controls { display: flex; align-items: center; gap: 10px; }
.controls label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 2px; }
.controls select {
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; background: #fff; font-size: 13px;
}

.btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.btn:hover { border-color: #c9ced6; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.primary:disabled { opacity: .6; cursor: progress; }
.btn.ghost { background: transparent; }
.btn.small { padding: 3px 9px; font-size: 12px; }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(380px, 1.3fr) minmax(300px, 1fr) minmax(340px, 1fr);
  flex: 1;
  min-height: 0;
}
.col {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-right: 1px solid var(--line); background: var(--panel);
}
.col:last-child { border-right: 0; }
.col-casos { background: #fafbfc; }
.col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--line-2);
}
.col-head h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-2); }
.col-head .sub { color: var(--muted); font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-casos .col-head { flex-direction: column; align-items: stretch; }
.col-casos input {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; background: #fff; width: 100%;
}
.scroll { overflow-y: auto; flex: 1; min-height: 0; }

/* ---------- lista de casos ---------- */
.grupo h3 {
  margin: 0; padding: 12px 14px 6px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; display: flex; justify-content: space-between;
}
.caso-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 14px; cursor: pointer; border-left: 3px solid transparent;
}
.caso-item:hover { background: #f0f2f5; }
.caso-item.activo { background: var(--accent-bg); border-left-color: var(--accent); }
.caso-item .nombre { font-weight: 600; font-size: 13px; display: block; }
.caso-item .meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; align-items: center; }
.caso-item .fecha { color: var(--muted); font-size: 11px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--gray-bg); color: var(--ink-2); white-space: nowrap;
}
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.lock { background: var(--lock-bg); color: var(--lock); }
.chip.accent { background: var(--accent-bg); color: var(--accent); }
.chip.mono { font-family: var(--mono); font-weight: 500; }

/* ---------- expediente ---------- */
.pad { padding: 14px; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 12px 14px; margin-bottom: 12px;
}
.card h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.titulo-caso { font-size: 17px; font-weight: 650; margin: 0 0 4px; }

.banner {
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px;
  display: flex; gap: 8px; align-items: flex-start;
}
.banner.warn { background: var(--warn-bg); color: #6b3d00; }
.banner.lock { background: var(--lock-bg); color: #3d2787; }
.banner.bad { background: var(--bad-bg); color: #7a1a12; }
.banner.info { background: var(--accent-bg); color: #0b4f50; }

.visor { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.visor-tabs { display: flex; gap: 4px; padding: 6px; background: #fafbfc; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.visor-tabs button {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 3px 8px;
  font-size: 11px; cursor: pointer; white-space: nowrap;
}
.visor-tabs button.activo { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
/* Un botón por PDF del caso: con muchos, la fila se desplaza y el nombre se recorta. */
.visor-docs button { flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pagina { position: relative; background: #e9ebef; }
.pagina img { display: block; width: 100%; height: auto; }
.bbox {
  position: absolute; border: 2px solid var(--accent); background: rgba(15, 111, 112, .14);
  border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 4px rgba(15, 111, 112, .15);
}
/* Escaneado: el bloque del OCR que contiene el valor, no el valor exacto. */
.bbox.aproximada { border-style: dashed; background: rgba(15, 111, 112, .07); box-shadow: none; }
/* «Ver todos los campos»: cada campo leido, coloreado por estado y seleccionable. */
.bbox.todos { pointer-events: auto; cursor: pointer; box-shadow: none; border-width: 2px; }
.bbox.todos.ok { border-color: var(--ok); background: rgba(22, 121, 79, .12); }
.bbox.todos.revision { border-color: #d98a14; background: rgba(217, 138, 20, .16); }
.bbox.todos.confirmado { border-color: var(--azul); background: rgba(26, 111, 163, .12); }
.bbox.todos.aproximada { background: transparent; }
.bbox.todos:hover { z-index: 3; }
.bbox.todos.sel { z-index: 2; outline: 2px solid var(--ink); outline-offset: 1px; }
.bbox-etq {
  display: none; position: absolute; left: -2px; bottom: 100%; margin-bottom: 1px;
  padding: 1px 5px; border-radius: 3px; font-size: 10.5px; line-height: 1.3; white-space: nowrap;
  color: #fff; background: var(--ink); pointer-events: none;
}
.bbox.todos.ok .bbox-etq { background: var(--ok); }
.bbox.todos.revision .bbox-etq { background: #b8700d; }
.bbox.todos.confirmado .bbox-etq { background: var(--azul); }
.bbox.todos:hover .bbox-etq, .bbox.todos.sel .bbox-etq { display: block; }
.ver-todos {
  position: absolute; top: 8px; right: 96px;
  background: rgba(27, 31, 36, .78); color: #fff; border: 0; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.ver-todos:hover, .ver-todos:focus-visible, .ver-todos.activo { background: var(--accent); }
.vg-controles .ver-todos { position: static; }
.bbox-leyenda { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 0; font-size: 11.5px; color: var(--muted); }
.bbox-leyenda span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px;
  vertical-align: -1px; border: 2px solid currentColor; border-radius: 2px;
}
.bbox-leyenda .ok { color: var(--ok); }
.bbox-leyenda .revision { color: var(--warn); }
.bbox-leyenda .revision::before { border-color: #d98a14; }
.visor-grande .bbox-leyenda .revision { color: #e0a040; }
.bbox-leyenda .confirmado { color: var(--azul); }
.bbox-leyenda .punteado::before { border-style: dashed; }
.visor-grande .bbox-leyenda { justify-content: center; color: #cfd6db; padding: 4px 0; }
.visor-bloqueado { padding: 28px 18px; text-align: center; background: var(--lock-bg); color: #3d2787; }
.visor-bloqueado b { display: block; font-size: 14px; margin-bottom: 6px; }

table.campos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.campos th {
  text-align: left; font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
table.campos td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.campos tr { cursor: pointer; }
table.campos.llano tr { cursor: default; }
table.campos.llano td:first-child { width: 45%; color: var(--ink-2); }
table.campos tr:hover td { background: #f7f8fa; }
table.campos tr.sel td { background: var(--accent-bg); }
.campo-nombre { font-weight: 600; }
.campo-nombre .crit { color: var(--bad); margin-left: 3px; }
.valor { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.valor.nulo { color: var(--muted); font-family: inherit; font-style: italic; }
.conf { display: flex; align-items: center; gap: 6px; min-width: 110px; }
.barra { flex: 1; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: visible; }
.barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ok); }
.barra > span.rev { background: var(--warn); }
.barra > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; }
.conf small { font-family: var(--mono); font-size: 11px; color: var(--ink-2); min-width: 32px; text-align: right; }
.motivo { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); background: #f7f8fa; border-radius: 8px; padding: 9px 11px; }
.motivo code { font-family: var(--mono); background: #fff; border: 1px solid var(--line); padding: 0 4px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Afirmaciones: la lista no pretende que la confianza sea una decision. Cada
   entrada abre la evidencia y las acciones solo aparecen tras contrastarla. */
.afirmaciones-sub { margin: -3px 0 10px; color: var(--muted); font-size: 12px; }
.afirmaciones { display: grid; gap: 5px; }
.afirmacion {
  appearance: none; width: 100%; display: grid; grid-template-columns: minmax(125px, 1fr) minmax(110px, 1.15fr) auto;
  gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.afirmacion:hover { background: #f7f8fa; border-color: var(--line-2); }
.afirmacion:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.afirmacion.sel { background: var(--accent-bg); border-color: #b8dada; }
.afirmacion-campo { font-weight: 600; font-size: 12.5px; }
.afirmacion-campo .crit { color: var(--bad); margin-left: 3px; }
.afirmacion-valor { min-width: 0; }
.afirmacion-meta { display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
.conf-text { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.conf-text.warn { color: var(--warn); }
.evidencia-campo { margin-top: 10px; padding: 11px 12px; border: 1px solid #cbe0e0; border-radius: 9px; background: #fbfdfd; }
.evidencia-cab { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.evidencia-bloque { margin-top: 10px; }
.evidencia-bloque b { display: block; font-size: 11px; color: var(--ink-2); }
.evidencia-bloque p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.evidencia-bloque code { font-family: var(--mono); font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
.revision-rapida { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; font-weight: 600; }
.revision-rapida .acciones { display: flex; gap: 6px; margin: 0; }

@media (max-width: 520px) {
  .afirmacion { grid-template-columns: 1fr; gap: 3px; }
  .afirmacion-meta { justify-content: flex-start; }
}

/* ---------- resultado ---------- */
.estado-grande { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.estado-grande .chip { font-size: 12px; padding: 3px 10px; }
.bloqueo {
  border: 1px solid #f3c1bb; background: var(--bad-bg); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px; color: #5e150e;
}
.bloqueo .pen { font-family: var(--mono); font-weight: 700; color: var(--bad); }
.bloqueo h5 { margin: 0 0 6px; font-size: 14px; color: var(--bad); }
.bloqueo p { margin: 4px 0; font-size: 13px; }
.bloqueo .acciones { margin-top: 8px; }
.tramo {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; margin-bottom: 10px;
  border-left: 4px solid var(--ok);
}
.tramo.bloq { border-left-color: var(--bad); background: #fffafa; }
.tramo .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tramo .dias { font-weight: 650; }
.tramo .valor-t { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.tramo .fechas { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tramo .reg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tramo .texto { font-size: 12.5px; color: var(--ink-2); margin-top: 7px; }
.total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 13px; border-radius: var(--radius); background: var(--gray-bg); margin-bottom: 12px;
}
.total b { font-family: var(--mono); font-size: 16px; }
ul.lista { margin: 0; padding-left: 18px; font-size: 13px; }
ul.lista li { margin: 4px 0; }
.disc { border-left: 3px solid var(--warn); padding: 6px 10px; background: var(--warn-bg); border-radius: 6px; margin-bottom: 8px; font-size: 12.5px; }
.disc b { display: block; font-size: 11px; letter-spacing: .4px; color: var(--warn); margin-bottom: 2px; }
.disc.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.disc.ok b { color: var(--ok); }
details.aud summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.evento { font-size: 12px; border-bottom: 1px dashed var(--line); padding: 6px 0; }
.evento code { font-family: var(--mono); font-size: 11px; }
.vacio { color: var(--muted); padding: 28px 16px; text-align: center; font-size: 13px; }

/* ---------- chat ---------- */
.chat-log { padding: 14px; display: flex; flex-direction: column; gap: 12px; background: #fbfbfc; }
.msg { max-width: 94%; }
.msg.usuario { align-self: flex-end; }
.msg .burbuja { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.usuario .burbuja { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.asistente .burbuja { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.asistente.rechazo .burbuja { border-color: #d9ccff; background: #faf8ff; }
.msg.asistente.bloqueado .burbuja { border-color: #f3c1bb; background: #fffafa; }
.msg .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.msg details { margin-top: 5px; font-size: 12px; }
.msg details summary { cursor: pointer; color: var(--muted); }
.traza { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 4px; }
.traza h6 { margin: 8px 0 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.traza h6:first-child { margin-top: 0; }
.control { display: flex; gap: 6px; font-size: 12px; padding: 2px 0; }
.control .ic { width: 16px; flex: none; font-weight: 700; }
.control.ok .ic { color: var(--ok); }
.control.no .ic { color: var(--bad); }
.frag { font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line-2); }
.frag code { font-family: var(--mono); font-size: 11px; }
.chat-sug { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--line-2); }
.chat-sug button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px;
  font-size: 12px; cursor: pointer; text-align: left;
}
.chat-sug button:hover { border-color: var(--accent); color: var(--accent); }
.chat-form { display: flex; gap: 8px; padding: 10px 14px 14px; }
.chat-form textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13.5px;
}
.chat-form textarea:focus, .col-casos input:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); }
.pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.pill.real { background: var(--ok-bg); color: var(--ok); }
#plano-ia { white-space: nowrap; }
.escribiendo { color: var(--muted); font-size: 12px; font-style: italic; }

/* ---------- modal / toast ---------- */
/* La columna con minimo 0 impide que un select o una tabla ancha estiren la
   tarjeta mas alla de la pantalla: en un telefono los botones quedaban fuera. */
.modal { position: fixed; inset: 0; background: rgba(20, 24, 31, .45); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; z-index: 20; padding: 16px; }
.modal-card { background: #fff; border-radius: 14px; width: min(1100px, 100%); min-width: 0; max-height: 88vh; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head .btn { flex: none; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { overflow: auto; padding: 16px 18px; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
table.tabla td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.tabla tr.resuelto td { background: #f6fbf8; }
.tabla-wrap { overflow-x: auto; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px;
  max-width: min(640px, calc(100% - 32px)); z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* ---------- visor ampliado ---------- */
.pagina img { cursor: zoom-in; }
.ampliar {
  position: absolute; top: 8px; right: 8px;
  background: rgba(27, 31, 36, .78); color: #fff; border: 0; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.ampliar:hover, .ampliar:focus-visible { background: var(--accent); }
.visor-grande {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(15, 18, 23, .98); display: flex; flex-direction: column;
}
.vg-barra {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; color: #fff; flex-wrap: wrap;
}
.vg-titulo { font-size: 14px; }
.vg-controles { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vg-controles button {
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 14px; min-width: 36px;
}
.vg-controles button:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }
.vg-controles button:disabled { opacity: .35; cursor: default; }
.vg-zoom { color: #fff; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.vg-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .2); margin: 0 4px; }
.vg-lienzo { flex: 1; overflow: auto; padding: 8px 16px 16px; }
.vg-hoja {
  position: relative; margin: 0 auto; background: #fff;
  width: calc(var(--z, 1) * min(100%, 1000px));
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.vg-hoja img { display: block; width: 100%; height: auto; }
.vg-pie { color: rgba(255, 255, 255, .6); font-size: 12px; text-align: center; padding: 4px 0 10px; }

/* ---------- carga y ayuda ---------- */
.modal-card.pequeno { width: min(560px, 100%); }
.form-carga label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.form-carga input, .form-carga select { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-size: 14px; background: #fff; }
.form-carga small { color: var(--muted); }
#form-cedula textarea { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-size: 14px; background: #fff; resize: vertical; }
.form-carga .error { margin: 0 0 8px; color: var(--bad); font-size: 13px; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
ol.pasos { padding-left: 20px; }
ol.pasos li { margin: 8px 0; line-height: 1.45; }
.col-casos .col-head .btn { width: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 1750px) {
  /* Las metricas pasan a su propia fila en vez de apilarse en columna. */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .metrics { order: 3; flex-basis: 100%; }
}
@media (max-width: 1350px) {
  .layout { grid-template-columns: 230px minmax(340px, 1.2fr) minmax(320px, 1fr); grid-template-rows: 1fr 1fr; }
  .col-casos { grid-row: 1 / span 2; }
  .col-res { grid-column: 3; grid-row: 1; border-bottom: 1px solid var(--line); }
  .col-chat { grid-column: 2 / span 2; grid-row: 2; border-top: 1px solid var(--line); }
  .col-exp { grid-row: 1; }
}
@media (max-width: 900px) {
  body { height: auto; display: block; }
  .topbar { flex-wrap: wrap; padding: 10px 16px; }
  .metrics { order: 3; flex-basis: 100%; }
  .metric { white-space: normal; }
  .controls { flex-wrap: wrap; }
  .layout { display: flex; flex-direction: column; height: auto; }
  .col { border-right: 0; border-bottom: 1px solid var(--line); }
  .scroll { max-height: 70vh; }
  .col-casos .scroll { max-height: 40vh; }
}

/* ---------- pestanas ---------- */
.tabs {
  flex: none; display: flex; gap: 4px; padding: 0 18px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 14px 9px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink-2); }
.tab.activo { color: var(--accent); border-bottom-color: var(--accent); }
.tabpanel { min-height: 0; }

/* ---------- panel ---------- */
.panel { flex: 1; overflow-y: auto; background: var(--bg); }
.panel-wrap { max-width: 1220px; margin: 0 auto; padding: 22px 20px 40px; display: grid; gap: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.panel-head h1 { margin: 2px 0 3px; font-size: 23px; letter-spacing: -.2px; }
.panel-head .sub { margin: 0; color: var(--muted); font-size: 13.5px; }
.etiqueta {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.pastilla {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: 12.5px; color: var(--ink-2);
}
.pastilla::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none;
}

.panel .tarjeta {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.panel .tarjeta > h3 {
  margin: 0; font-size: 15px; font-weight: 600;
}
.panel .tarjeta > h3 + .sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tarjeta-cab .cuenta { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.panel-top { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; align-items: stretch; }
.hero {
  position: relative; overflow: hidden; border-radius: 14px; padding: 20px 22px;
  background: linear-gradient(103deg, var(--accent) 0%, #14707f 48%, var(--azul) 100%);
  color: #fff; display: grid; gap: 12px; align-content: start;
}
.hero::after {
  content: ""; position: absolute; top: -70px; right: -50px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.hero .etiqueta { color: rgba(255, 255, 255, .82); }
.hero h2 { margin: 0; font-size: 21px; line-height: 1.28; font-weight: 600; max-width: 34ch; }
.hero p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 56ch; }
.hero .acciones { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 2px; position: relative; }
.hero .btn { border-color: transparent; }
.hero .btn.claro { background: #fff; color: var(--accent); font-weight: 600; }
.hero .btn.translucido { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .34); }
.hero .btn.translucido:hover { background: rgba(255, 255, 255, .26); }

.dato-grande { display: flex; align-items: baseline; gap: 7px; }
.dato-grande b { font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dato-grande span { color: var(--muted); font-size: 14px; }
.medidor { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin: 12px 0 14px; }
.medidor > span { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.sub-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sub-datos div { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.sub-datos dt { font-size: 11.5px; color: var(--muted); }
.sub-datos dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

/* Tarjeta sin fuente: ocupa su lugar, no inventa el numero. */
.sin-fuente { border-style: dashed; background: #fbfdfd; }
.sin-fuente .dato-grande b, .sin-fuente .sub-datos dd { color: var(--muted); font-weight: 500; }
.sin-fuente .medidor > span { background: var(--line); }
.aviso-fuente {
  margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2);
  background: var(--gray-bg); border-radius: 9px; padding: 9px 11px;
}
.aviso-fuente b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.tile .etiqueta { color: var(--muted); font-size: 10.5px; }
.tile b { display: block; margin: 9px 0 5px; font-size: 27px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .pie { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.tile.vacia { border-style: dashed; background: #fbfdfd; }
.tile.vacia b { color: var(--line); }

.procesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 13px; }
.proceso {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px 0; background: var(--panel);
  display: flex; flex-direction: column; gap: 8px;
}
.proceso .fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.proceso .nombre { font-size: 14.5px; font-weight: 600; }
.proceso .dato { display: flex; align-items: baseline; gap: 6px; }
.proceso .dato b { font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.proceso .dato span { font-size: 12.5px; color: var(--muted); }
.proceso .franja { height: 3px; border-radius: 3px 3px 0 0; margin: 6px -15px 0; background: var(--accent); }
.proceso.revision .franja { background: #d98324; }
.proceso.detenido .franja { background: var(--bad); }

.tareas { list-style: none; margin: 0; padding: 0; }
.tareas li {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: start;
  padding: 11px 0; border-top: 1px solid var(--line-2);
}
.tareas li:first-child { border-top: 0; }
.tareas .marca {
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--line); margin-top: 1px;
}
.tareas .que { font-size: 13.5px; color: var(--ink); }
.tareas .tarea-acciones { display: flex; gap: 8px; align-items: center; }
.tareas .quien { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.panel-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.panel-side { display: grid; gap: 14px; }
.servicio {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line-2);
}
.servicio:first-of-type { border-top: 0; }
.servicio .av {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 12.5px;
}
.servicio .nom { font-size: 13.5px; font-weight: 500; }
.servicio .det { display: block; font-size: 11.5px; color: var(--muted); }
.enlinea { font-size: 11.5px; color: var(--ok); white-space: nowrap; }
.enlinea.caido { color: var(--muted); }

.aprob { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.aprob .flecha {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 15px;
}
.actividad { list-style: none; margin: 0; padding: 0; }
.actividad li {
  display: grid; grid-template-columns: 9px 1fr auto; gap: 11px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13px;
}
.actividad li:first-child { border-top: 0; }
.actividad .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.actividad li.anomalia .punto { background: var(--bad); }
/* Tres niveles, los mismos del expediente: rojo impide aprobar, ambar hay que
   conocerlo y explicarlo, sin color solo informa. */
.actividad li.observacion .punto { background: var(--warn); }
.actividad .quien { font-weight: 600; color: var(--ink); }
.actividad .cuando { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .panel-top, .panel-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .panel { overflow: visible; }
  .panel-wrap { padding: 16px 14px 28px; }
  .sub-datos { grid-template-columns: 1fr; }
  .tabs { padding: 0 12px; }
}

/* decision del analista y correccion de campos */
.decision .acciones, .form-dec .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Fecha, franja y botón del día compensatorio: en la columna angosta se apilan. */
.pide-descanso { flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; }
.pide-descanso label { display: flex; flex-direction: column; gap: 2px; }
.decision .btn:disabled { opacity: .55; cursor: not-allowed; }
.form-dec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.form-dec label { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--ink-2); }
/* Un select toma el ancho de su opción más larga (el nombre de un PDF): sin tope se salía de la columna. */
.form-dec select { max-width: 100%; min-width: 0; }
.form-dec select, .form-dec textarea, .form-dec input, .corr input, .corr select {
  font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--ink);
}
.corr { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.corr input[name="motivo"] { flex: 1 1 160px; }
.corr input[name="pagina"] { width: 7em; }
/* Las etiquetas de causa son largas: sin tope, en un telefono el select se sale del panel. */
.corr select { max-width: 100%; }
.corr .btn:disabled { opacity: .6; }
.form-dec .error { margin: 0; color: var(--bad); font-size: 12.5px; }
/* Las dos opciones de la nota del jefe: el botón de radio junto a su texto. */
.form-dec label.opcion { display: flex; align-items: center; gap: 6px; }
.form-dec label.opcion input { padding: 0; }
.siguiente p { margin: 0; }
.ayuda-campo { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- pildora de usuario: sesion y configuracion ---------- */
.usuario-menu { position: relative; }
.pill-usuario {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--accent-bg); color: var(--ink);
  border-radius: 999px; padding: 4px 14px 4px 4px; font: inherit;
}
.pill-usuario:hover, .pill-usuario[aria-expanded="true"] { border-color: var(--accent); }
.pill-usuario .avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
}
.usuario-textos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.usuario-textos b { font-size: 13px; }
.usuario-textos small { font-size: 11px; color: var(--muted); }
.usuario-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: 290px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 33, 43, .12); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.usuario-panel h4 { margin: 4px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.usuario-panel .sub { margin: 0; }
.usuario-panel .interruptor { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; color: var(--ink); }
.interruptor input { margin-top: 3px; accent-color: var(--accent); }
.interruptor span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.interruptor small { color: var(--muted); font-size: 12px; }
#btn-logout { align-self: stretch; margin-top: 4px; }

/* ---------- historial del asistente ---------- */
.chat-acciones { margin-left: auto; display: flex; gap: 4px; }
.chat-caso { align-self: center; font-size: 11px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; width: 100%; text-align: center; }
.chat-otros { align-self: center; font-size: 11px; color: var(--muted); font-style: italic; }
.hilos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hilos-lista button { width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; }
.hilos-lista button:hover { border-color: var(--accent); }
.hilos-lista small { display: block; color: var(--muted); font-size: 12px; }
.hilo-lectura { max-height: 60vh; overflow: auto; }

/* ---------- carga: destino y soportes ---------- */
.form-carga fieldset.destino { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.form-carga fieldset.destino legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.form-carga label.opcion { flex-direction: row; align-items: center; gap: 6px; margin: 0; }
/* resumen tras cargar y asignacion de archivos sin persona */
.resumen-carga h4 { margin: 4px 0 8px; font-size: 13px; }
.resumen-carga ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.resumen-carga li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.resumen-carga li small { color: var(--muted); }
.resumen-carga .chip { margin-left: 4px; }
.avisos-carga { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.asigna-persona { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.resumen-carga li.confirma { flex-direction: column; align-items: stretch; }
.resumen-carga li.confirma .asigna-persona { min-width: 0; }
.resumen-carga li > span { min-width: 0; overflow-wrap: anywhere; }
.asigna-persona select, .asigna-flujo select { max-width: 100%; }
.asigna-persona select, .asigna-persona input, .asigna-flujo select { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 13px; background: #fff; }
.chat-form .chat-clip { align-self: stretch; padding: 0 10px; font-size: 16px; }
.chat-form .chat-clip:disabled { opacity: .6; cursor: progress; }
.soportes-lista { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.tipo-soporte { margin-left: 6px; font-size: 12px; max-width: 220px; }
.quita-tipo { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 13px; line-height: 1; }
.origen-tipo { margin-left: 6px; font-size: 11px; color: var(--muted); font-style: italic; }

.chulo { color: var(--ok); font-weight: 700; }

/* ---------- arranque fallido ---------- */
.alertas-ia { padding: 8px 20px 0; display: grid; gap: 8px; }
.alertas-ia .banner { margin: 0; }
.error-arranque { margin: 48px auto; padding: 0 20px; max-width: 460px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.error-arranque p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- cabecera compacta en una sola columna ---------- */
/* Organizacion, perfil y metricas ocupaban media pantalla en un telefono:
   quedan detras de «Opciones». */
.solo-movil { display: none; }
@media (max-width: 900px) {
  .solo-movil { display: inline-block; margin-left: auto; }
  .brand { min-width: 0; }
  .topbar:not(.abierta) .metrics, .topbar:not(.abierta) .controls { display: none; }
}

/* Los botones del modal de carga siguen a la vista aunque la lista sea larga. */
.resumen-carga > .acciones {
  position: sticky; bottom: -16px; margin-bottom: -16px; padding: 10px 0 16px; background: #fff;
}

/* En pantallas bajas las sugerencias no le quitan alto a la conversacion. */
@media (min-width: 901px) and (max-height: 820px) {
  .chat-sug { flex-wrap: nowrap; overflow-x: auto; }
  .chat-sug button { flex: none; white-space: nowrap; }
}
/* Cédula del paciente en el modal de confirmación (spec 2026-10-01). */
.cedula-paciente { display: flex; flex-direction: column; gap: 2px; font-size: 0.85em; }
.cedula-paciente input { max-width: 14ch; font-variant-numeric: tabular-nums; }
.aviso-cedula { display: block; color: var(--warn); background: var(--warn-bg); padding: 4px 6px; border-radius: 4px; }
.aviso-cedula[hidden] { display: none; }

/* Aviso de que el modelo falló y respondieron las reglas (ports/modelo.py). */
.aviso-modelo { color: var(--muted); font-size: 12px; }

/* Enrutamiento de AG-01 en el panel */
.enr-fila { display: grid; grid-template-columns: 150px 1fr 32px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.enr-barra { height: 8px; background: var(--line, #e5e7eb); border-radius: 999px; overflow: hidden; }
.enr-barra span { display: block; height: 100%; background: var(--accent, #0f766e); border-radius: 999px; }
.enr-n { text-align: right; font-variant-numeric: tabular-nums; }
.enr-urgente { color: var(--bad, #b91c1c); }