/* ============================================================
   Clinic Agent — capa visual
   Misma familia que Note Reviewer (navy + IBM Plex + tarjetas
   planas de 9px + mono para datos), marca propia: el acento pasa
   de azul #2A73C7 a cian profundo #0e7490.
   Pensada para reemplazar el <style> de templates/base.html.
   Los nombres de clase de Bootstrap se conservan.
   ============================================================ */

:root{
  /* Marca */
  --navy:#0d1f3c; --navy-hover:#16305c; --navy-line:#2c456e; --navy-line-hi:#3d5a89;
  --navy-ink:#dce6f4; --navy-muted:#9fb3cf; --navy-faint:#7f95b4;

  --accent:#0e7490; --accent-hover:#0a5a71; --accent-tint:#e8f2f6;
  --accent-tint-soft:#f2f8fa; --accent-border:#bcd6df;

  /* Neutros */
  --white:#fff; --c-25:#fbfcfd; --c-30:#fafcfe; --c-50:#f9fafb; --c-75:#f6f8fb;
  --c-110:#f0f3f7; --c-150:#eef1f5; --c-200:#e5e7eb; --border:#e4e9f0;
  --c-250:#dde3ec; --c-300:#d1d5db; --meta:#a3aebe; /* solo cifras/timestamps accesorios — nunca prosa */ --c-400:#9ca3af;
  --slate-500:#8695aa; --slate-600:#5b6b82; --c-700:#4b5563; --c-800:#1f2937;

  /* Semánticos — idénticos a Note Reviewer, son la firma de la familia */
  --ok:#147a5c; --ok-bg:#e9f5f0; --ok-surface:#f2faf6;
  --warn:#b8730c; --warn-ink:#95600a; --warn-bg:#fdf3e2; --warn-surface:#fefaf3;
  --err:#b4232a; --err-bg:#fbe9ea; --err-surface:#fdf5f5; --err-border:#eeb9bb;

  /* LIVE — el estado más peligroso de la app, tratamiento propio */
  --live:#9f1239; --live-bg:#fdf2f5;

  --font-sans:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-xs:3px; --r-sm:4px; --r-md:6px; --r-input:7px; --r-lg:8px; --r-card:9px; --r-xl:10px; --r-pill:14px;
  --shadow-pop:0 14px 30px -20px rgba(13,31,60,.45);
  --shadow-rail:2px 0 10px rgba(0,0,0,.10);
  --t:background-color .15s ease,border-color .15s ease,color .15s ease;
  --dots:radial-gradient(circle,#fff 1px,transparent 1px);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--c-75);color:var(--c-800);font-family:var(--font-sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
code,.mono,pre,textarea.mono{font-family:var(--font-mono)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--navy);font-weight:600;letter-spacing:-.005em}
h3{font-size:17px}
hr{border:none;border-top:1px solid var(--border);margin:16px 0}

/* ---------- Eyebrow: la etiqueta mono en mayúsculas ---------- */
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.eyebrow-sm{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.muted{color:var(--slate-600)}
.dim{color:var(--slate-500)}

.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--meta);margin-bottom:12px}
.crumbs a{color:var(--slate-500)}
.crumbs .sep{color:var(--c-300)}
.crumbs .here{color:var(--navy)}

/* ---------- Tarjeta ---------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.card-head{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--c-25);border-bottom:1px solid var(--c-110)}
.card-head .title{font-size:13px;font-weight:600;color:var(--navy)}
.card-body{padding:14px}
.card-foot{padding:10px 14px;border-top:1px solid var(--border)}

/* ---------- Métricas ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.metric{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;position:relative}
.metric .label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);margin-bottom:8px}
.metric .value{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.metric .value.ok{color:var(--ok)}.metric .value.warn{color:var(--warn)}.metric .value.err{color:var(--err)}
.metric .sub{margin-top:8px;font-size:11px;color:var(--slate-600)}
.metric .spark{margin-top:10px;height:4px;border-radius:2px;background:var(--c-150);overflow:hidden}
.metric .spark i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.metric .spark i.ok{background:var(--ok)}.metric .spark i.warn{background:var(--warn)}

/* ---------- Tabla ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl thead th{text-align:left;padding:8px 12px;background:var(--c-25);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);font-weight:400;white-space:nowrap}
table.tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--c-110);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr[data-href]{cursor:pointer}
table.tbl tbody tr:hover{background:var(--c-30)}
table.tbl td.num,table.tbl th.num{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
table.tbl td.id{font-family:var(--font-mono);color:var(--accent);font-size:12px}
.row-child{background:var(--c-75)}
.row-child td{font-size:11.5px}
.row-child td:nth-child(2){padding-left:32px}
.tbl-empty{padding:36px 16px;text-align:center;color:var(--meta);font-size:12px}
.disclose{background:none;border:none;padding:0 4px;cursor:pointer;color:var(--slate-500);font-size:9px;line-height:1}
.disclose:hover{color:var(--navy)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-sans);font-size:12px;font-weight:500;line-height:1;padding:7px 12px;border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-hover);color:#fff}
.btn-default{background:var(--white);color:var(--c-800);border-color:var(--border)}
.btn-default:hover{border-color:var(--accent-border);color:var(--c-800)}
.btn-outline{background:var(--white);color:var(--accent);border-color:var(--accent-border)}
.btn-outline:hover{background:var(--accent-tint-soft);color:var(--accent)}
.btn-ok{background:var(--white);color:var(--ok);border-color:#bfded2}
.btn-ok:hover{background:var(--ok-surface)}
.btn-danger{background:var(--white);color:var(--err);border-color:var(--err-border)}
.btn-danger:hover{background:var(--err-surface)}
.btn-solid-danger{background:var(--err);color:#fff}
.btn-solid-danger:hover{background:#95181f;color:#fff}
.btn-ondark{background:transparent;color:var(--navy-ink);border-color:var(--navy-line)}
.btn-ondark:hover{background:rgba(255,255,255,.08);border-color:var(--navy-line-hi);color:#fff}
.btn-sm{font-size:11px;padding:5px 9px;border-radius:var(--r-sm)}
.btn-lg{font-size:13px;font-weight:600;padding:11px 16px;border-radius:var(--r-lg)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-group{display:inline-flex;gap:6px}
.iconbtn{width:26px;height:26px;border:none;background:transparent;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:var(--meta);cursor:pointer;transition:var(--t);flex-shrink:0}
.iconbtn:hover{background:var(--c-110);color:var(--slate-600)}

/* ---------- Badges y pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:500;line-height:1;padding:3px 7px;border-radius:var(--r-xs)}
.badge-neutral{background:var(--c-110);color:var(--slate-600)}
.badge-accent{background:var(--accent-tint);color:var(--accent)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn-ink)}
.badge-err{background:var(--err-bg);color:var(--err)}
.badge-live{background:var(--live-bg);color:var(--live);border:1px solid #f0c9d4;letter-spacing:.1em}
.badge-up{text-transform:uppercase;letter-spacing:.08em}
.chip{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:5px 10px;border-radius:var(--r-pill);border:none;cursor:default}
.chip .n{font-family:var(--font-mono);font-weight:500}
.chip-accent{background:var(--accent-tint);color:var(--accent)}
.chip-warn{background:var(--warn-bg);color:var(--warn-ink)}
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.chip-btn{cursor:pointer}
.filterchip{white-space:nowrap;font-size:11px;padding:4px 10px;border-radius:12px;border:1px solid var(--border);background:var(--white);color:var(--slate-600);cursor:pointer;transition:var(--t)}
.filterchip:hover{border-color:var(--accent-border)}
.filterchip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* Estado de job — pill mono */
.status{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-xs);display:inline-flex;align-items:center;gap:5px}
.status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.status-queued{background:var(--c-110);color:var(--slate-500)}
.status-running{background:var(--warn-bg);color:var(--warn-ink)}
.status-done{background:var(--ok-bg);color:var(--ok)}
.status-failed{background:var(--err-bg);color:var(--err)}

/* ---------- Formularios ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.input,select.input,textarea.input{width:100%;background:var(--white);border:1px solid var(--border);border-radius:var(--r-input);padding:8px 10px;font-family:var(--font-sans);font-size:12.5px;color:var(--c-800);outline:none;transition:var(--t)}
.input:focus,select.input:focus,textarea.input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,116,144,.10)}
.input.mono{font-family:var(--font-mono);font-size:12px}
.input::placeholder{color:var(--c-400)}
.hint{font-size:11px;color:var(--slate-600)}
.filterbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}

/* ---------- Rejilla etiqueta/valor: el patrón de dato del sistema ---------- */
.kv{display:grid;grid-template-columns:104px 1fr;gap:6px 12px;align-items:baseline}
.kv > dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);padding-top:2px}
.kv > dd{margin:0;font-size:12px;color:var(--slate-600);line-height:1.5}
.kv > dd.strong{color:var(--navy);font-weight:500}
.kv > dd.missing{color:var(--err);font-style:italic}

/* ---------- Cinta de severidad ---------- */
.rail{width:3px;border-radius:2px;flex-shrink:0;align-self:stretch;min-height:15px}
.rail-ok{background:var(--ok)}.rail-warn{background:var(--warn)}.rail-err{background:var(--err)}

/* ---------- Score ---------- */
.score{display:flex;align-items:baseline;gap:3px;flex-shrink:0}
.score .n{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em}
.score .max{font-family:var(--font-mono);font-size:12px;color:var(--meta)}
.score .n.ok{color:var(--ok)}.score .n.warn{color:var(--warn)}.score .n.err{color:var(--err)}
.bar{height:5px;border-radius:3px;background:var(--c-150);overflow:hidden;width:100%;max-width:260px}
.bar i{display:block;height:100%;border-radius:3px}
.bar i.ok{background:var(--ok)}.bar i.warn{background:var(--warn)}.bar i.err{background:var(--err)}

/* ---------- Issues ---------- */
.issue{border:1px solid var(--c-110);border-radius:var(--r-lg);padding:10px 12px;display:flex;gap:9px;align-items:flex-start}
.issue .body{flex:1;min-width:0}
.issue .t{font-size:12.5px;font-weight:600;color:var(--navy)}
.issue .d{font-size:12px;color:var(--slate-600);line-height:1.55;margin-top:3px}
.issue .quote{font-family:var(--font-mono);font-size:10.5px;color:var(--slate-600);background:var(--c-75);border-left:2px solid var(--err-border);padding:5px 8px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-top:6px}
.issue .tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--meta);flex-shrink:0;padding-top:3px}
.issue.done{background:var(--ok-surface);border-color:#d8ece4}
.issue.done .t{color:var(--ok)}

/* Coincidencia aproximada — lila, heredado de Note Reviewer */
.approx{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 8px;border-radius:var(--r-sm);background:#f1edf9;color:#5b4a86;line-height:1.35}
.approx .g{font-family:var(--font-mono);font-size:10px}

/* ---------- Alertas ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-lg);font-size:12px;line-height:1.55}
.alert-ok{background:var(--ok-surface);border:1px solid #d8ece4;color:var(--ok)}
.alert-warn{background:var(--warn-surface);border:1px solid #f2e0c2;color:var(--warn-ink)}
.alert-err{background:var(--err-surface);border:1px solid var(--err-border);color:var(--err)}
.alert-info{background:var(--accent-tint-soft);border:1px solid var(--accent-border);color:var(--accent)}

/* ---------- Editor de nota ---------- */
.editor{font-family:var(--font-mono);font-size:12px;line-height:1.65;color:var(--c-800);background:var(--white);border:1px solid var(--border);border-radius:var(--r-input);padding:12px;min-height:220px;outline:none;white-space:pre-wrap;overflow-wrap:anywhere}
.editor:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,116,144,.10)}
mark.hl{padding:0 3px;border-radius:var(--r-xs);font-weight:500}
mark.hl-behaviors{background:#dce9f7;color:#12466f}
mark.hl-interventions{background:var(--ok-bg);color:var(--ok)}
mark.hl-replacements{background:var(--warn-bg);color:var(--warn-ink)}
mark.hl-forbidden{background:var(--err-bg);color:var(--err)}

/* ---------- Visor JSON ---------- */
.json{background:var(--navy);color:#c9d9ee;border-radius:var(--r-lg);padding:12px;font-family:var(--font-mono);font-size:11px;line-height:1.6;max-height:340px;overflow:auto;white-space:pre;margin:0}

/* ---------- Barra pegajosa ---------- */
.sticky{position:sticky;top:0;z-index:20}
.docbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card)}

/* ---------- Login ---------- */
.login-page{display:flex;min-height:100vh}
.login-brand{position:relative;flex:1;background:var(--navy);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.login-brand::before{content:'';position:absolute;inset:0;opacity:.08;background-image:var(--dots);background-size:28px 28px}
.login-form{width:420px;flex-shrink:0;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:40px;border-left:1px solid var(--border)}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-250);border-radius:5px;border:2px solid var(--c-75)}
::-webkit-scrollbar-thumb:hover{background:var(--c-300)}

/* ---------- Utilidades ---------- */
.row{display:flex;gap:12px}
.col{flex:1;min-width:0}
.stack{display:flex;flex-direction:column}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.center{align-items:center}
.auto{margin-left:auto}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.nowrap{white-space:nowrap}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- Buckets (detalle de job) ---------- */
.bucketgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.bucket{display:block;background:var(--white);border:1px solid var(--border);border-left:3px solid var(--c-250);border-radius:var(--r-lg);padding:10px 12px;text-decoration:none;transition:var(--t)}
.bucket:hover{border-color:var(--accent-border);border-left-color:var(--accent);text-decoration:none}
.bucket .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bucket .v{font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin-top:5px}
.bucket.on{border-color:var(--accent);border-left-color:var(--accent);background:var(--accent-tint-soft)}
.bucket.zero{opacity:.45}
.bucket.b-ok{border-left-color:var(--ok)} .bucket.b-ok .v{color:var(--ok)}
.bucket.b-warn{border-left-color:var(--warn)} .bucket.b-warn .v{color:var(--warn)}
.bucket.b-err{border-left-color:var(--err)} .bucket.b-err .v{color:var(--err)}
.bucket.b-accent{border-left-color:var(--accent)} .bucket.b-accent .v{color:var(--accent)}

/* ---------- Elección en tarjeta (launch run) ---------- */
.choicegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.choice{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 12px;cursor:pointer;transition:var(--t);background:var(--white)}
.choice:hover{border-color:var(--accent-border)}
.choice.on{border-color:var(--accent);background:var(--accent-tint-soft)}
.choice input{margin:2px 0 0;accent-color:var(--accent);flex-shrink:0}
.choice .t{display:block;font-size:12.5px;font-weight:500;color:var(--navy)}
.choice .h{display:block;font-size:11px;color:var(--slate-600);margin-top:3px;line-height:1.45}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--c-800);cursor:pointer}
.checkline input{margin:2px 0 0;accent-color:var(--accent);flex-shrink:0}
.checkline > span{flex:1;min-width:0}
.checkline .h{display:block;font-size:11px;color:var(--slate-600);margin-top:3px;line-height:1.45}
.fieldset{border-top:1px solid var(--border);padding-top:16px;margin-top:16px}
.fieldset:first-child{border-top:none;padding-top:0;margin-top:0}
.fieldset > .legend{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-600);margin-bottom:10px}

/* ---------- Zona peligrosa ---------- */
.danger-zone{border:1px solid var(--err-border);background:var(--err-surface);border-radius:var(--r-card);padding:14px}
.danger-zone .t{font-size:12.5px;font-weight:600;color:var(--err)}
.danger-zone .d{font-size:11.5px;color:var(--slate-600);line-height:1.55;margin-top:3px}

/* ---------- Barra de acciones por lote ---------- */
.bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--warn-surface);border:1px solid #f2e0c2;border-radius:var(--r-card)}

/* ---------- WhatsApp ---------- */
.wa{display:flex;height:calc(100vh - 150px);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--white)}
.wa-side{width:300px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--c-25)}
.wa-list{overflow-y:auto;flex:1}
.wa-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--c-110);cursor:pointer;transition:var(--t)}
.wa-item:hover{background:var(--white)}
.wa-item.on{background:var(--white);box-shadow:inset 3px 0 0 var(--accent)}
.wa-av{width:34px;height:34px;border-radius:var(--r-lg);flex-shrink:0;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600}
.wa-unread{background:var(--accent);color:#fff;border-radius:999px;font-family:var(--font-mono);font-size:9.5px;min-width:17px;height:17px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.wa-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--c-75)}
.bubble{max-width:66%;width:fit-content;padding:8px 11px;border-radius:var(--r-xl);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.bubble.in{align-self:flex-start;background:var(--white);border:1px solid var(--border);color:var(--c-800)}
.bubble.out{align-self:flex-end;background:var(--accent);color:#fff}
.bubble .m{font-family:var(--font-mono);font-size:9.5px;opacity:.7;margin-top:4px;text-align:right}
.wa-composer{border-top:1px solid var(--border);padding:10px;display:flex;gap:8px;align-items:flex-end;background:var(--white)}

/* ---------- Cita textual de la nota ---------- */
.evidence{font-family:var(--font-mono);font-size:10.5px;color:var(--slate-600);background:var(--c-75);border-left:2px solid var(--c-250);padding:6px 9px;border-radius:0 var(--r-sm) var(--r-sm) 0;line-height:1.6}
.evidence + .evidence{margin-top:5px}
/* ---------- Rejilla sí/no/poco claro ---------- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tri > div{border:1px solid var(--c-110);border-radius:var(--r-lg);padding:9px 10px}
.tri .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);margin-bottom:6px;line-height:1.3}
/* ---------- Conmutador de variante ---------- */
.variants{display:flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.variants button{flex:1;border:none;background:var(--white);color:var(--slate-600);font-family:var(--font-mono);font-size:11.5px;font-weight:500;padding:8px 12px;cursor:pointer;transition:var(--t);white-space:nowrap}
.variants button:hover{background:var(--c-30)}
.variants button.on{background:var(--navy);color:#fff}

/* ---------- Selector de agencia (WhatsApp) ---------- */
.agencytabs{display:flex;gap:8px;flex-wrap:wrap}
.agencytab{display:flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px 13px;cursor:pointer;transition:var(--t);text-align:left;font-family:var(--font-sans)}
.agencytab:hover{border-color:var(--accent-border)}
.agencytab.on{background:var(--navy);border-color:var(--navy)}
.agencytab .nm{font-size:12.5px;font-weight:500;color:var(--navy);white-space:nowrap;flex-shrink:0}
.agencytab .st{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--slate-500);white-space:nowrap;flex-shrink:0}
.agencytab.on .nm{color:#fff}
.agencytab.on .st{color:var(--navy-muted)}
.agencytab .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.agencytab .d-ok{background:var(--ok)}
.agencytab .d-warn{background:var(--warn)}
.agencytab .d-err{background:var(--err)}
.agencytab .d-mut{background:var(--c-300)}
.qr{width:210px;height:210px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;padding:8px;display:flex;align-items:center;justify-content:center}

/* ============================================================
   Añadidos del proyecto (no vienen en el kit)
   ============================================================ */

/* Job.Status tiene seis valores; el kit solo estila cuatro. */
.status-paused{background:var(--c-110);color:var(--warn-ink)}
.status-cancelled{background:var(--c-110);color:var(--slate-500)}

/* Los formularios de config y tools renderizan {{ field }} de Django, que sale
   sin clase. Se estilan por contexto en vez de tocar cada widget en Python. */
.formcard input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formcard select,
.formcard textarea{width:100%;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-input);padding:8px 10px;font-family:var(--font-sans);
  font-size:12.5px;color:var(--c-800);outline:none;transition:var(--t)}
.formcard input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.formcard select:focus,
.formcard textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,116,144,.10)}
.formcard textarea{font-family:var(--font-mono);font-size:12px;line-height:1.6;min-height:80px}
.formcard select[multiple]{padding:4px}
.formcard input[type="checkbox"],.formcard input[type="radio"]{accent-color:var(--accent)}
.formcard input[type="file"]{font-size:12px;color:var(--slate-600)}
/* Dentro de una tabla los campos no llevan ancho completo ni margen. */
.formcard .tbl input:not([type="checkbox"]),.formcard .tbl select{padding:5px 8px;font-size:12px}

/* Pie fijo del formulario: guardar/cancelar a la izquierda, destructivo a la derecha. */
.form-actions{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);
  padding-top:14px;margin-top:16px}

/* Fila de documento ya abierta por este operador — se atenúa. */
tr.doc-row.visited > td{background:var(--c-75);color:var(--slate-500)}
tr.doc-row.visited > td:first-child{box-shadow:inset 3px 0 0 var(--accent-border)}
tr.doc-row.visited:hover > td{background:var(--c-110)}

/* Spinner — reemplaza .spinner-border de Bootstrap. */
.spinner{display:inline-block;width:13px;height:13px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* Rejilla de datos del encabezado de un job: etiqueta mono arriba, valor abajo.
   Es la .kv del kit puesta en vertical, para filas de 4–5 datos cortos. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.facts .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-500);margin-bottom:6px}
.facts .v{font-size:12.5px;color:var(--c-800);line-height:1.5}
.facts .v.strong{color:var(--navy);font-weight:500}

/* Botones sólidos que el kit no trae: el toggle «lista para enviar» y el
   estado «hay cambios sin guardar» del editor de nota. */
.btn-solid-ok{background:var(--ok);color:#fff}
.btn-solid-ok:hover{background:#0f6249;color:#fff}
.btn-warn{background:var(--white);color:var(--warn-ink);border-color:#f2e0c2}
.btn-warn:hover{background:var(--warn-surface)}

/* note_consistency — venía del <style> del base.html viejo. */
.consistency-consistent{color:var(--ok);font-weight:500}
.consistency-partially_consistent{color:var(--warn-ink);font-weight:500}
.consistency-inconsistent{color:var(--err);font-weight:500}

/* Pestañas del panel de debug del LLM — reemplazan los nav-pills de Bootstrap. */
.pills{display:flex;flex-wrap:wrap;gap:4px}
.pill{border:1px solid var(--border);background:var(--white);color:var(--slate-600);
  font-family:var(--font-mono);font-size:10.5px;padding:4px 8px;border-radius:var(--r-sm);
  cursor:pointer;transition:var(--t)}
.pill:hover{border-color:var(--accent-border)}
.pill.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* Visor de imagen ampliada — reemplaza el modal de Bootstrap. */
dialog.shot{border:none;padding:0;border-radius:var(--r-card);max-width:94vw;max-height:94vh;
  background:var(--white);box-shadow:var(--shadow-pop)}
dialog.shot::backdrop{background:rgba(13,31,60,.55)}
dialog.shot .head{display:flex;align-items:center;gap:9px;padding:10px 14px;
  background:var(--c-25);border-bottom:1px solid var(--c-110)}
dialog.shot img{display:block;max-width:100%;max-height:80vh;object-fit:contain}

/* Detalle de documento — tres columnas en pantallas anchas: review · principal · campos+debug.
   El JSON crudo va en la barra de navegación (Anterior / Siguiente). */
.doc-grid{display:grid;gap:12px;grid-template-columns:1fr}
.doc-sticky{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}
@media (min-width:1200px){
  .doc-grid{grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,3fr)}
}

/* ============================================================
   Resumen de la review (_review_summary / _service_log_summary /
   _analyst_monthly_summary). Conserva los nombres .rev-* del markup
   pero cambia el tratamiento: las nueve clases .rev-cell-* con nueve
   acentos distintos se unifican en una sola rejilla etiqueta/valor —
   el color queda reservado para severidad.
   Vivía en el <style> de _review_summary.html, que las otras dos
   plantillas no incluían: ahí no se estilaba nada.
   ============================================================ */
.rev-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.rev-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:10px 14px;background:var(--c-25);border-bottom:1px solid var(--c-110)}
.rev-card-body{padding:12px 14px}
.rev-section-title{margin:0;font-size:13px;font-weight:600;color:var(--navy)}
.rev-event-count{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  background:var(--accent-tint);color:var(--accent);border-radius:var(--r-xs);padding:3px 7px}

.rev-event-card{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--c-110)}
.rev-event-card:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.rev-event-counter{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}

.rev-abc-grid-3,.rev-abc-grid-2{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}

/* La celda: etiqueta mono arriba, valor debajo. Sin acento por campo. */
.rev-abc-cell{padding:0}
.rev-abc-cell .rev-cell-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-500);margin-bottom:3px}
.rev-abc-cell .rev-cell-value{font-size:12px;color:var(--slate-600);line-height:1.5}
/* Un campo vacío es un hallazgo, no un vacío: no se muestra un guion gris. */
.rev-abc-cell .rev-cell-value:empty::before{content:'no documentado';color:var(--err);font-style:italic}

/* Los nueve .rev-cell-* quedan como no-ops: el markup no cambia. */
.rev-cell-antecedent,.rev-cell-behavior,.rev-cell-topography,.rev-cell-intervention,
.rev-cell-response,.rev-cell-name,.rev-cell-activity,.rev-cell-prompt,.rev-cell-reinforcer{}

/* alignment / quality / outcome comparten un mismo pill mono. */
.rev-pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-xs)}
.rev-pill-strong,.rev-pill-success{background:var(--ok-bg);color:var(--ok)}
.rev-pill-moderate{background:var(--warn-bg);color:var(--warn-ink)}
.rev-pill-weak{background:var(--err-bg);color:var(--err)}
.rev-pill-none{background:var(--c-110);color:var(--slate-500)}

.rev-chips{display:flex;flex-wrap:wrap;gap:4px}
.rev-chip{background:var(--ok-bg);color:var(--ok);padding:2px 8px;border-radius:var(--r-sm);font-size:11px}

.rev-notes-box{margin-top:14px;padding:10px 12px;background:var(--accent-tint-soft);
  border-left:2px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0}
.rev-notes-title{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.rev-notes-list{font-size:11.5px;color:var(--slate-600)}
.rev-notes-list > div{margin:3px 0;padding-left:12px;position:relative}
.rev-notes-list > div::before{content:'·';color:var(--accent);position:absolute;left:3px}

.rev-meta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;
  color:var(--slate-600);margin-bottom:10px}
.rev-meta-row strong{color:var(--navy);font-weight:500}

.rev-flagged{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.rev-flagged-chip{background:var(--c-110);color:var(--slate-500);padding:2px 8px;
  border-radius:var(--r-sm);font-size:10px;font-style:italic}

/* Coincidencia aproximada — el tag lila heredado de Note Reviewer. */
.rev-approx{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 7px;
  border-radius:var(--r-sm);background:#f1edf9;color:#5b4a86}

/* Utilidad que faltaba: el kit no trae cursiva. */
.italic{font-style:italic}