/* Panel del Agente de compras.
   Estructura: nav lateral fijo · vistas (general / pedidos / proveedores / sistema).
   La vista de pedidos conserva las clases del chat (.msg, .art, .pliego, .sc-*, .sup-*, .att-*)
   porque el bloque @media print las usa para exportar la conversación a PDF.

   ---------- Temas ----------
   Todo el color sale de tokens en :root (oscuro) y [data-theme="light"] (claro). NO hay colores
   literales fuera de esos dos bloques (salvo #fff sobre botones de marca y el iframe del informe):
   agregar un literal rompe el modo claro en silencio. La paleta es la corporativa de Carrefour
   (azul #004A97 · rojo #bb1e10, ver procurement_bot/tools/branding.py): en claro se usan tal cual,
   en oscuro se aclaran lo justo para que pasen contraste sobre el fondo. */

:root{
  /* superficies */
  --bg:#0b0e14;--panel:#111620;--panel2:#161c28;--panel3:#1e2632;
  --border:#232c3a;--border2:#2f3a4c;--txt:#e9edf5;--muted:#8d97ab;--muted2:#616b7d;
  --pill:#1e2431;--btn-hover:#2b3242;--code:#cdd6e6;
  --scroll:#2a3140;--scroll-hover:#39424f;
  /* burbujas del chat */
  --bot:#1a2331;--human:#12324a;--humanbd:#1f5586;--admin:#2b2350;--adminbd:#4a3d8f;
  /* marca — azul Reflex Blue/286 C y rojo Red 032 C. Sobre fondo oscuro los corporativos
     no llegan al contraste mínimo, así que el acento se aclara y los planos (--brand,
     botón primario) quedan en el tono oficial, que sí funciona con texto blanco encima. */
  --brand:#004A97;--brand-red:#bb1e10;
  --accent:#5aa2e8;--accent2:#004A97;--accent3:#00387b;--accent-txt:#93c3f2;
  --accent-soft:rgba(90,162,232,.15);--accent-bd:rgba(90,162,232,.32);
  /* semáforo */
  --ok:#3fb27f;--ok-txt:#5fd0a0;--ok-soft:rgba(63,178,127,.16);--ok-bd:#2c5a41;
  --warn:#e0a13a;--warn-txt:#e6b357;--warn-soft:rgba(224,161,58,.16);--warn-bd:#5a4a2c;
  --err:#d4574a;--err-txt:#ea8b7f;--err-soft:rgba(187,30,16,.22);--err-bd:#6b2a22;
  --err-body:#f2cec8;
  /* fases */
  --ph-scout:rgba(167,108,255,.16);--ph-scout-txt:#bd9bff;
  --ph-appr:rgba(255,160,60,.15);--ph-appr-txt:#ffb347;
  --ph-out:rgba(56,189,248,.15);--ph-out-txt:#38bdf8;
  --ph-qual:rgba(52,211,153,.18);--ph-qual-txt:#34d399;
  /* sombras y velos */
  --sh-sm:0 1px 2px rgba(0,0,0,.2);--sh-md:0 4px 20px rgba(0,0,0,.35);
  --sh-lg:0 20px 60px rgba(0,0,0,.5);
  --veil:rgba(0,0,0,.6);--veil2:rgba(0,0,0,.86);--sunken:rgba(0,0,0,.18);
  --r:10px;
  color-scheme:dark;
}

/* Modo claro: mismo esqueleto, paleta Carrefour sobre blanco. */
[data-theme="light"]{
  --bg:#f2f5fa;--panel:#ffffff;--panel2:#f4f7fb;--panel3:#e8eef6;
  /* --muted2 es el gris "de tercer nivel" (fechas, contadores, el toggle del menú): en claro
     tiene que ser más oscuro que en oscuro o no llega a 4.5:1 sobre el panel blanco. */
  --border:#dde4ee;--border2:#c8d3e2;--txt:#13202f;--muted:#5b6879;--muted2:#5d6a79;
  --pill:#e9eff7;--btn-hover:#dde5f0;--code:#334155;
  --scroll:#c8d3e2;--scroll-hover:#adbccf;
  --bot:#f1f5fa;--human:#e4f1ff;--humanbd:#b6d4f0;--admin:#efeaff;--adminbd:#c9bdf5;
  --brand:#004A97;--brand-red:#bb1e10;
  --accent:#004A97;--accent2:#004A97;--accent3:#00387b;--accent-txt:#00387b;
  --accent-soft:rgba(0,74,151,.09);--accent-bd:rgba(0,74,151,.28);
  /* Los fondos "soft" son más opacos que en oscuro y los textos más profundos: sobre blanco,
     un 12% de alpha deja la píldora casi invisible y el color se lee lavado (todos los pares
     de acá superan 4.5:1 sobre --panel). */
  --ok:#127048;--ok-txt:#0f6340;--ok-soft:rgba(18,112,72,.16);--ok-bd:#8fcdb1;
  --warn:#a86e13;--warn-txt:#7a5008;--warn-soft:rgba(168,110,19,.18);--warn-bd:#dcc189;
  --err:#bb1e10;--err-txt:#95160b;--err-soft:rgba(187,30,16,.14);--err-bd:#e2a49d;
  --err-body:#6e1109;
  --ph-scout:rgba(109,40,217,.16);--ph-scout-txt:#5b21b6;
  --ph-appr:rgba(180,83,9,.17);--ph-appr-txt:#8a4708;
  --ph-out:rgba(2,132,199,.16);--ph-out-txt:#075985;
  --ph-qual:rgba(5,150,105,.17);--ph-qual-txt:#036249;
  --sh-sm:0 1px 2px rgba(16,32,56,.07);--sh-md:0 4px 18px rgba(16,32,56,.12);
  --sh-lg:0 20px 50px rgba(16,32,56,.18);
  --veil:rgba(19,32,47,.42);--veil2:rgba(19,32,47,.72);--sunken:rgba(16,32,56,.05);
  color-scheme:light;
}

/* Sobre blanco, un fondo translúcido no alcanza para que la píldora se lea como pieza: se le
   suma un contorno del mismo tono (inset, no border, para no mover la caja). */
[data-theme="light"] .badge,[data-theme="light"] .chip,[data-theme="light"] .sc-st,
[data-theme="light"] .pl-status,[data-theme="light"] .sup-stage,[data-theme="light"] .pl-chip{
  box-shadow:inset 0 0 0 1px rgba(19,32,47,.09)}
/* Filas de la lista: con panel2 casi blanco, ni el hover ni la selección se distinguían. */
[data-theme="light"] .ord:hover{background:var(--panel2)}
[data-theme="light"] .ord.sel{background:var(--panel3)}
[data-theme="light"] .alert{border-left-width:4px}

*{box-sizing:border-box}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:content-box}
body{margin:0;font:14px/1.55 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);
  color:var(--txt);height:100vh;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased}
h1{font-size:17px;font-weight:700;margin:0}
.min0{min-width:0;flex:1}
.muted{color:var(--muted)} .sm{font-size:12px}
.input{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--txt);
  border-radius:8px;padding:8px 11px;font-size:13px;outline:none}
.input:focus{border-color:var(--accent2)}
.input::placeholder{color:var(--muted2)}

/* ---------- Botones ---------- */
.btn{background:var(--panel3);border:1px solid var(--border2);color:var(--txt);border-radius:8px;
  padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--btn-hover)} .btn:disabled{opacity:.4;cursor:default}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.block{width:100%}
.btn.primary{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn.primary:hover{background:var(--accent3);border-color:var(--accent3)}
.btn.go{border-color:var(--ok-bd);color:var(--ok-txt)} .btn.stop{border-color:var(--err-bd);color:var(--err-txt)}
.btn.warn{border-color:var(--warn-bd);color:var(--warn-txt)}

/* ---------- Chips y badges ---------- */
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;background:var(--pill);color:var(--muted);white-space:nowrap}
.chip.warn{background:var(--warn-soft);color:var(--warn-txt)}
.chip.err{background:var(--err-soft);color:var(--err-txt)}
.chip.ok{background:var(--ok-soft);color:var(--ok-txt)}
.badge{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;white-space:nowrap;flex:none}
.b-triage,.b-confirmation{background:var(--accent-soft);color:var(--accent-txt)}
.b-validation{background:var(--warn-soft);color:var(--warn-txt)}
.b-scouting{background:var(--ph-scout);color:var(--ph-scout-txt)}
.b-deliverable{background:var(--ok-soft);color:var(--ok-txt)}
.b-approval{background:var(--ph-appr);color:var(--ph-appr-txt)}
.b-outreach{background:var(--ph-out);color:var(--ph-out-txt)}
.b-qualification{background:var(--ph-qual);color:var(--ph-qual-txt)}
.b-none{background:var(--pill);color:var(--muted)}
.b-paused{background:var(--warn-soft);color:var(--warn-txt)}
.b-cancelled{background:var(--err-soft);color:var(--err-txt)}
.b-panel{background:var(--ph-scout);color:var(--ph-scout-txt)}

/* ---------- Navegación lateral ---------- */
#nav{width:232px;min-width:232px;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:14px 12px;gap:16px}
/* Banda de marca: bloque propio separado de la lista por una línea, pero alineado a la IZQUIERDA
   como los ítems del menú (el padding izquierdo iguala al de .nav-link, así el logo arranca en la
   misma columna que los iconos). El botón de contraer va absolute para no ocupar lugar en la fila. */
.nav-brand{display:flex;align-items:center;gap:11px;
  padding:2px 26px 13px 10px;border-bottom:1px solid var(--border);position:relative}
/* El logo es el SVG oficial (inyectado server-side). Van las dos versiones en el HTML y el tema
   elige: la de color en claro, la monocroma blanca en oscuro (sobre el fondo oscuro el azul
   corporativo se empasta). El color del monocromo sale de `currentColor`. */
.nav-logo{display:flex;align-items:center;flex:none;line-height:0;color:#fff}
.nav-logo svg{height:24px;width:auto;display:block}
.nav-logo .cf-mono{display:block}
.nav-logo .cf-isotipo:not(.cf-mono){display:none}
[data-theme="light"] .nav-logo .cf-mono{display:none}
[data-theme="light"] .nav-logo .cf-isotipo:not(.cf-mono){display:block}
/* Botón de contraer: fuera del flujo (si no, empuja el título fuera de centro) y a la altura del
   logo, no de la banda, que tiene padding inferior. */
.navtoggle{position:absolute;right:0;top:calc(50% - 7px);transform:translateY(-50%);
  background:none;border:0;color:var(--muted);font-size:15px;
  cursor:pointer;padding:2px 4px;border-radius:6px;line-height:1}
.navtoggle:hover{background:var(--panel2);color:var(--txt)}

/* Cambio de tema: fijo arriba a la derecha de la ventana (es global; no debe irse con el menú
   contraído). Por debajo de modales/lightbox/toast. */
.topctl{position:fixed;top:11px;right:16px;z-index:50;display:flex;gap:6px}
.topbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;cursor:pointer;
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:8px}
.topbtn:hover{background:var(--panel3);color:var(--txt)}
/* Mail de quien está usando el panel. Se corta con ellipsis: hay cuentas corporativas larguísimas
   y esto vive fijo arriba a la derecha, encima del contenido. */
.whoami{display:flex;align-items:center;padding:0 10px;height:30px;max-width:230px;
  background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Menú contraído: solo iconos, para darle todo el ancho posible a la conversación.
   Todo lo que se oculta acá tiene su propio elemento (.lbl, .nav-brandtxt…): un nodo de texto
   suelto no se puede ocultar por CSS y terminaría desbordándose sobre la lista de pedidos. */
#nav.mini{width:60px;min-width:60px;padding:14px 8px;align-items:center;gap:14px;overflow:hidden}
#nav.mini .nav-brandtxt,#nav.mini .nav-link .lbl,#nav.mini .nav-link .nav-n,
#nav.mini .lbl{display:none}
/* El punto de estado del bot sobrevive al contraído: es lo único que no se puede perder de vista. */
#nav.mini .botline{justify-content:center}
#nav.mini .nav-brand{flex-direction:column;gap:8px;width:100%;padding:0}
/* Contraído: el botón vuelve al flujo, debajo del logo (no hay ancho para colgarlo al costado). */
#nav.mini .nav-brand{border-bottom:0;padding:0}
#nav.mini .navtoggle{position:static;transform:none}
#nav.mini .nav-links,#nav.mini .nav-actions,#nav.mini .nav-help,#nav.mini .nav-bot{width:100%;align-items:center}
#nav.mini .nav-link{justify-content:center;padding:10px 0}
#nav.mini .nav-link .ico{font-size:15px}
#nav.mini .nav-actions .btn{padding:9px 0;font-size:15px;display:flex;justify-content:center}
#nav.mini .nav-bot{border-top:1px solid var(--border);padding-top:12px}
#nav.mini .botbtns{flex-direction:column;width:100%;gap:6px}
#nav.mini .botbtns .btn{width:100%;padding:7px 0;font-size:12px}
/* Con el menú contraído, el punto de estado del bot es lo único que queda: se centra. */
#nav.mini .nav-bot .dot{align-self:center}
.nav-link .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-actions .btn,.nav-help .btn{display:flex;align-items:center;justify-content:center;gap:7px}
.nav-brandtxt{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
/* Una sola línea: partido en dos ("Agente de / compras") el bloque se veía suelto del logo.
   El `top:-2px` es un ajuste ÓPTICO: centrada por caja, la palabra se lee más baja que el isotipo
   (la caja de línea incluye el espacio del descendente de la "p"). */
.nav-brandtxt b{font-size:13px;white-space:nowrap;letter-spacing:.01em;position:relative;top:-2px}
/* El badge de modo cierra la barra, alineado a la izquierda del pie. */
#testbadge{display:none;width:fit-content;align-self:flex-start}
#testbadge.on{display:inline-block}
/* Contraído no hay ancho para el texto ("Prod. restringida" se cortaba contra el borde): el badge
   queda como un punto del color del modo y el texto completo vive en el `title`. */
#nav.mini #testbadge{width:12px;height:12px;padding:0;border-radius:50%;
  overflow:hidden;text-indent:-999px;align-self:center;border:0}
/* El atributo `hidden` tiene que ganarle a CUALQUIER display de este archivo.
   La regla del navegador (`[hidden]{display:none}`) vive en la hoja del user-agent, así que
   cualquier `.clase{display:flex}` de acá la pisa y el elemento queda visible con el atributo
   puesto. Pasó con la pestaña de Usuarios: se le mostraba al rol `user` aunque el JS la ocultaba. */
[hidden]{display:none!important}

.nav-links{display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:0;color:var(--muted);border-radius:8px;padding:9px 10px;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background .12s,color .12s}
.nav-link:hover{background:var(--panel2);color:var(--txt)}
.nav-link.on{background:var(--panel3);color:var(--txt)}
.nav-link .ico{opacity:.9}
/* Set de iconos del nav: SVG de trazo, mismo grosor y color del texto.
   El tamaño y el trazo van como ATRIBUTOS en cada <svg> (ver index.html), no solo acá: si el
   CSS todavía no llegó, un SVG sin `fill` se pinta negro y sin `width` ocupa 300px. El CSS solo
   los reencuadra por contexto. */
.ico{display:inline-flex;align-items:center;justify-content:center;flex:none}
.ico svg{display:block;width:18px;height:18px}
.nav-actions .ico svg,.nav-help .ico svg{width:17px;height:17px}
.botbtns .btn{display:flex;align-items:center;justify-content:center;gap:6px}
.botbtns .ico svg{width:14px;height:14px}
#nav.mini .ico svg{width:19px;height:19px}
/* El contador va sobre --pill (más oscuro que el panel): con --muted2 no llegaba al contraste. */
.nav-n{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--pill);
  border-radius:20px;padding:1px 7px}
.nav-n.alert{background:var(--warn-soft);color:var(--warn-txt)}
.nav-actions{display:flex;flex-direction:column;gap:7px}
/* Ayuda va pegado a las acciones (arriba); el pie lo empuja `.nav-bot` con margin-top:auto. */
.nav-bot{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;display:flex;
  flex-direction:column;gap:8px}
.botline{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.botbtns{display:flex;gap:6px}
.botbtns .btn{flex:1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted2);flex:none}
.dot.up{background:var(--ok);box-shadow:0 0 0 0 rgba(63,178,127,.5);animation:pulse 2s infinite}
.dot.down{background:var(--err)} .dot.stopped{background:var(--warn)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,178,127,.5)}70%{box-shadow:0 0 0 6px rgba(63,178,127,0)}100%{box-shadow:0 0 0 0 rgba(63,178,127,0)}}

/* ---------- Vistas ---------- */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.view{display:none;flex:1;flex-direction:column;overflow:hidden;min-width:0}
.view.on{display:flex}
/* El padding derecho reserva el lugar del control de tema, que va FIJO arriba a la derecha de la
   ventana: sin ese aire, con la ventana angosta el botón se montaba sobre los chips de estado. */
.vhead{padding:15px 62px 15px 22px;border-bottom:1px solid var(--border);background:var(--panel);
  display:flex;align-items:center;gap:12px;flex:none}
/* Los chips de estado no se comprimen ni se parten: si no entran, lo que cede es el título. */
#hbadge{display:flex;align-items:center;gap:6px;flex:none}
.vhead .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.vbody{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}

/* ---------- Tarjetas / KPIs / tablas ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.kpi .n{font-size:26px;font-weight:800;line-height:1.2}
.kpi .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:2px}
.kpi.alert .n{color:var(--err)} .kpi.warn .n{color:var(--warn)} .kpi.ok .n{color:var(--ok)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1100px){.cols2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.card-h{padding:11px 16px;border-bottom:1px solid var(--border);background:var(--panel2);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.card-b{padding:14px 16px}
.row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0}
.row .r-main{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.row .r-sub{color:var(--muted);font-size:12px;white-space:nowrap}
.row.click{cursor:pointer;border-radius:6px;padding-left:8px;padding-right:8px;margin:0 -8px}
.row.click:hover{background:var(--panel2)}
.bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bar:last-child{margin-bottom:0}
.bar .lbl{width:96px;font-size:12px;color:var(--muted);flex:none}
.bar .track{flex:1;height:8px;background:var(--panel3);border-radius:20px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--accent);border-radius:20px}
.bar .n{width:28px;text-align:right;font-size:12px;font-weight:700;color:var(--muted)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;padding:8px 10px;color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--border2);white-space:nowrap;cursor:pointer;user-select:none;
  position:sticky;top:0;background:var(--panel2);z-index:1}
table.tbl th:hover{color:var(--txt)}
table.tbl td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
table.tbl tr:hover td{background:var(--panel2)}
table.tbl td a{color:var(--accent);text-decoration:none}
.tblwrap{overflow:auto;max-height:60vh;border:1px solid var(--border);border-radius:var(--r);background:var(--panel)}
.empty{margin:auto;color:var(--muted);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:40px 0}
.empty .big{font-size:34px;opacity:.5}
.banner{display:none;padding:10px 16px;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--border)}
.banner.on{display:block}
.banner.err{background:var(--err-soft);color:var(--err-txt)}

/* ---------- Pestañas ---------- */
.tabs{display:flex;gap:2px;padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel);flex:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 14px;
  font-size:13px;font-weight:600;cursor:pointer;margin-bottom:-1px}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--txt);border-bottom-color:var(--accent)}
.opane{display:none;flex:1;overflow:hidden;flex-direction:column;min-height:0}
.opane.on{display:flex}
#pane-results.on,#pane-control.on{display:block;overflow-y:auto;padding:18px 22px}
.spane{display:none}
.spane.on{display:block}

/* ---------- Padrón de conocidos: alta por drag & drop de un Excel ---------- */
.drop{border:2px dashed var(--border2);border-radius:12px;padding:20px;text-align:center;
  cursor:pointer;margin-bottom:12px;background:var(--panel2);transition:border-color .12s,background .12s}
.drop:hover,.drop:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
/* .over = hay un archivo encima. Los hijos tienen pointer-events:none o el dragleave del texto
   interno apagaría el resaltado mientras el puntero sigue adentro del recuadro. */
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop.over *,.drop-ico,.drop-t,.drop-s{pointer-events:none}
.drop.busy{opacity:.55;cursor:progress}
.drop-ico{font-size:22px;line-height:1}
.drop-t{font-weight:600;margin-top:6px}
.drop-s{margin-top:4px}
.drop .lnk{color:var(--accent-txt);text-decoration:underline}
.drop-help{margin:-4px 0 12px;text-align:center}
.drop-help a{color:var(--accent-txt)}
.import-res{display:none;font-size:13px;border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;margin-bottom:12px;background:var(--panel2)}
.import-res.on{display:block}
.import-res.ok{border-color:var(--ok-bd);color:var(--ok-txt)}
.import-res.warn{border-color:var(--warn-bd);color:var(--warn-txt)}
.import-res.err{border-color:var(--err-bd);color:var(--err-txt)}

/* ---------- Pedidos: lista ---------- */
.split{flex:1;display:flex;overflow:hidden;min-height:0}
/* El ancho lo maneja el JS (--sidew, persistido en localStorage) vía el divisor arrastrable. */
#side{width:var(--sidew,300px);min-width:180px;max-width:560px;background:var(--panel);
  display:flex;flex-direction:column;flex:none}
#dragger{width:5px;flex:none;cursor:col-resize;background:var(--border);
  transition:background .12s;position:relative}
#dragger:hover,#dragger.drag{background:var(--accent)}
/* Zona de agarre más ancha que la línea visible: 5px a mano alzada es una tortura. */
#dragger:after{content:"";position:absolute;inset:0 -4px}
body.resizing{cursor:col-resize;user-select:none}
.side-h{padding:12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
#orders{overflow-y:auto;flex:1}
.ord{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;position:relative;transition:background .12s}
.ord:hover,.ord.sel{background:var(--panel2)}
.ord.sel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.ord .top{display:flex;align-items:center;gap:7px}
.ord .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:13.5px}
.ord .m{color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord .when{color:var(--muted2);font-size:11px;margin-top:2px}
.newdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.alert{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--err-soft);
  border-left:3px solid var(--err);cursor:pointer}
.alert:hover{background:var(--err-soft);filter:brightness(1.06)}
.alert .at{font-weight:700;font-size:12.5px;color:var(--err-txt);display:flex;align-items:center;gap:6px}
.alert .am{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert .retry{margin-left:auto;font-size:10px;font-weight:700;color:var(--accent-txt)}

/* ---------- Pedidos: detalle ---------- */
#detail{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.fbar{display:flex;gap:8px;align-items:center;padding:8px 22px;border-bottom:1px solid var(--border);
  background:var(--panel);font-size:12px;flex:none}
.fbar select{background:var(--panel2);border:1px solid var(--border2);color:var(--txt);border-radius:6px;
  padding:4px 8px;font-size:12px;outline:none}
.fbar label{display:flex;align-items:center;gap:5px;color:var(--muted);cursor:pointer}
.fbar .sp{flex:1}
#chat{flex:1;overflow-y:auto;padding:24px 26px 32px;display:flex;flex-direction:column;gap:13px;scroll-behavior:smooth}
.phase{align-self:center;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;margin:14px 0 4px;padding:5px 16px;background:var(--pill);
  border:1px solid var(--border);border-radius:20px}
.msg{max-width:74%;padding:11px 15px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;
  box-shadow:var(--sh-sm);animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bot{align-self:flex-start;background:var(--bot);border:1px solid var(--border2);border-bottom-left-radius:4px}
.human{align-self:flex-end;background:var(--human);border:1px solid var(--humanbd);border-bottom-right-radius:4px}
.msg.admin{align-self:flex-end;background:var(--admin);border:1px solid var(--adminbd);border-bottom-right-radius:4px}
.who{font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600}
.who .tm{color:var(--muted2);font-weight:400}
.art{align-self:stretch;max-width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:12px}
.art summary{cursor:pointer;padding:12px 15px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.art summary::-webkit-details-marker{display:none}
.art summary:before{content:"▸";color:var(--accent);font-size:11px;transition:transform .15s}
.art[open] summary:before{transform:rotate(90deg)}
.art pre{margin:0;padding:0 15px 15px;overflow-x:auto;color:var(--code);font:12.5px/1.5 ui-monospace,Consolas,monospace}
.msg.err{align-self:stretch;max-width:100%;background:var(--err-soft);
  border:1px solid var(--err-bd);color:var(--err-txt);border-radius:12px}
.msg.err .who{color:var(--err)}
.errmsg{margin:6px 0 0;color:var(--err-body);font-size:13.5px;line-height:1.5}
.errtb{margin-top:9px}
.errtb summary{cursor:pointer;font-size:11.5px;color:var(--err-txt);font-weight:600;list-style:none}
.errtb summary::-webkit-details-marker{display:none}
.errtb summary:before{content:"▸";font-size:10px;margin-right:6px;display:inline-block;transition:transform .15s}
.errtb[open] summary:before{transform:rotate(90deg)}
.errtb pre{margin:7px 0 0;white-space:pre-wrap;font:11.5px/1.45 ui-monospace,Consolas,monospace;
  color:var(--err-body);background:var(--sunken);padding:9px 11px;border-radius:8px;max-height:240px;overflow:auto}

/* ---------- Gate: contestar como humano ---------- */
#gatebox{border-top:1px solid var(--border);background:var(--panel);flex:none}
.gate{padding:12px 22px}
.gate-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--warn-txt);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.gate-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.gate textarea{flex:1;min-width:240px;background:var(--panel2);border:1px solid var(--border2);
  color:var(--txt);border-radius:8px;padding:8px 11px;font:13px system-ui;resize:vertical;min-height:38px;outline:none}
.gate textarea:focus{border-color:var(--accent2)}
.gate .hint{font-size:11px;color:var(--muted2);margin-top:7px}
.gate .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:8px}

/* ---------- Modales ---------- */
#modal{position:fixed;inset:0;background:var(--veil);display:none;align-items:center;
  justify-content:center;z-index:60;padding:24px}
#modal.on{display:flex}
.mbox{background:var(--panel);border:1px solid var(--border2);border-radius:14px;width:min(620px,100%);
  max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.mbox h2{margin:0;font-size:15px}
.m-h{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.m-h .x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.m-b{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.m-f{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.field textarea{background:var(--panel2);border:1px solid var(--border);color:var(--txt);border-radius:8px;
  padding:8px 11px;font:13px system-ui;resize:vertical;min-height:70px;outline:none}
.field textarea:focus,.field select:focus{border-color:var(--accent2)}
.field select{background:var(--panel2);border:1px solid var(--border);color:var(--txt);
  border-radius:8px;padding:8px 11px;font-size:13px;outline:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-note{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;line-height:1.5}
/* Aviso de modo abierto (RFQ a proveedores reales): tiene que gritar en los dos temas. */
.m-note.danger{color:var(--err-txt);background:var(--err-soft);border-color:var(--err-bd)}
.specrow{display:flex;gap:8px;margin-bottom:6px}

/* ---------- Formularios de configuración ---------- */
.fhelp{font-size:11.5px;color:var(--muted);line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0}
.fhelp code{background:var(--panel3);border-radius:4px;padding:1px 5px;font-size:11px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.catrow .cat-x{flex:none;color:var(--muted)}
.catrow .cat-x:hover{color:var(--err-txt)}

/* interruptor */
.switch{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:2px 0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .sw{width:38px;height:21px;border-radius:20px;background:var(--panel3);border:1px solid var(--border2);
  flex:none;position:relative;transition:background .15s,border-color .15s;margin-top:1px}
.switch .sw:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--muted);transition:transform .15s,background .15s}
.switch input:checked + .sw{background:var(--ok-soft);border-color:var(--ok-bd)}
.switch input:checked + .sw:after{transform:translateX(17px);background:var(--ok)}
.switch input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px}
.swtxt{display:flex;flex-direction:column;gap:3px;font-size:13.5px}

/* selector de modo de envío */
.modos{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.modo{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--border2);
  border-radius:var(--r);background:var(--panel2);cursor:pointer;transition:border-color .12s,background .12s}
.modo:hover{background:var(--panel3)}
.modo.on{border-color:var(--accent);background:var(--panel3)}
.modo input{margin-top:3px;accent-color:var(--accent);flex:none}
.modo-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.modo-txt b{font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* barra de guardado */
.savebar{display:none;align-items:center;gap:8px;padding:11px 22px;border-top:1px solid var(--border);
  background:var(--panel);flex:none;font-size:13px}
.savebar.on{display:flex}
.savebar .sp{flex:1}
#sysbar-txt{color:var(--warn-txt);font-weight:600}

/* ---------- Scouting: tarjetas por zona ---------- */
.scout{align-self:stretch;max-width:100%;display:flex;flex-direction:column;gap:18px;margin:2px 0 6px}
.sc-zone{background:var(--panel2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sc-zh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--panel3)}
.sc-zh h3{margin:0;font-size:14px;font-weight:700}
.sc-zh .cnt{font-size:11px;color:var(--muted);font-weight:600}
.sc-zh .cnt .ok{color:var(--ok)} .sc-zh .cnt .rj{color:var(--err)}
.sc-list{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.sc-card{border:1px solid var(--border2);border-radius:12px;padding:12px 14px;background:var(--panel)}
.sc-card.ok{border-left:3px solid var(--ok)}
.sc-card.rejected{border-left:3px solid var(--err);opacity:.92}
.sc-card.not_found{border-left:3px solid var(--muted2)}
.sc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sc-rank{font-size:12px;font-weight:700;color:var(--muted);min-width:24px}
.sc-name{font-weight:700;font-size:14px;flex:1;min-width:120px}
.sc-st{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.sc-st.ok{background:var(--ok-soft);color:var(--ok-txt)}
.sc-st.rejected{background:var(--err-soft);color:var(--err-txt)}
.sc-st.not_found{background:var(--pill);color:var(--muted)}
.sc-tag{font-size:10px;color:var(--muted);background:var(--pill);border-radius:20px;padding:2px 8px}
.sc-score{font-size:13px;font-weight:800;color:var(--accent)}
.sc-why{margin:9px 0 0;color:var(--txt);font-size:13px;line-height:1.5}
.sc-why.rej{color:var(--err-body)}
.sc-why b{color:var(--muted);font-weight:700}
.sc-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.sc-chip{font-size:11px;color:var(--muted);background:var(--panel2);border:1px solid var(--border);
  border-radius:7px;padding:2px 8px}
.sc-chip a{color:var(--accent);text-decoration:none}
.sc-bd{margin-top:9px}
.sc-bd summary{cursor:pointer;font-size:11.5px;color:var(--muted);font-weight:600;list-style:none}
.sc-bd summary::-webkit-details-marker{display:none}
.sc-bd summary:before{content:"▸";color:var(--accent);font-size:10px;margin-right:6px;display:inline-block;transition:transform .15s}
.sc-bd[open] summary:before{transform:rotate(90deg)}
.sc-bd ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.sc-bd li{display:flex;gap:8px;font-size:12px;color:var(--code)}
.sc-bd .pts{color:var(--ok);font-weight:700;min-width:42px}

/* ---------- Pliego / validación / aprobación / calificación / entregables ---------- */
.pliego{align-self:stretch;max-width:100%;background:var(--panel2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin:2px 0 6px}
.pl-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);
  background:var(--panel3)}
.pl-doc{font-size:20px;line-height:1}
.pl-htxt{flex:1;min-width:0}
.pl-ttl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.pl-prod{font-size:15px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-status{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;white-space:nowrap;flex:none}
.pl-status.ok{background:var(--ok-soft);color:var(--ok-txt)}
.pl-status.wip{background:var(--warn-soft);color:var(--warn-txt)}
.pl-status.err{background:var(--err-soft);color:var(--err-txt)}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border)}
.pl-field{background:var(--panel2);padding:11px 16px}
.pl-k{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.pl-v{font-size:13.5px;color:var(--txt);margin-top:3px;word-wrap:break-word}
.pl-sub{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:12px 16px 0}
.pl-spec-list{display:flex;flex-direction:column;padding:8px 16px 14px;gap:1px}
.pl-spec{display:flex;gap:12px;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:8px}
.pl-sc{font-size:12.5px;color:var(--muted);font-weight:600;min-width:140px;flex:none}
.pl-sv{font-size:12.5px;color:var(--txt);flex:1;word-wrap:break-word}
.pl-missing{padding:12px 16px 14px;border-top:1px solid var(--border);margin-top:2px}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pl-chip{font-size:11.5px;color:var(--warn-txt);background:var(--warn-soft);border:1px solid var(--warn-bd);
  border-radius:20px;padding:3px 10px}
/* Variantes del chip: antes se pintaban con hex inline desde render.js (y no tenían modo claro). */
.pl-chip.ok{color:var(--ok-txt);background:var(--ok-soft);border-color:var(--ok-bd)}
.pl-chip.err{color:var(--err-txt);background:var(--err-soft);border-color:var(--err-bd)}
.pl-chip.info{color:var(--ph-out-txt);background:var(--ph-out);border-color:transparent}
.pl-chip.alt{color:var(--ph-scout-txt);background:var(--ph-scout);border-color:transparent}
.art-pliego .pliego{margin:0;border:0;border-radius:0;background:transparent}
.art-pliego .pl-head{border-top:1px solid var(--border)}
.art-link{display:block;padding:10px 14px;background:var(--panel);border:1px solid var(--border2);
  border-radius:8px;color:var(--accent-txt);text-decoration:none;font-size:13px;font-weight:600}
.art-link:hover{background:var(--panel2);border-color:var(--accent)}

/* ---------- Proveedores (Fase 5) ---------- */
.sup-zone{align-self:stretch;max-width:100%;background:var(--panel2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin:2px 0 6px}
.sup-zh{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel3);
  font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.sup-list{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.sup-card{border:1px solid var(--border2);border-radius:12px;padding:11px 13px;background:var(--panel)}
.sup-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sup-name{font-weight:700;font-size:13.5px;flex:1;min-width:120px}
.sup-stage{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 8px;border-radius:20px;background:var(--pill);color:var(--muted)}
.sup-stage.calificado{background:var(--ok-soft);color:var(--ok-txt)}
.sup-stage.derivado{background:var(--ph-out);color:var(--ph-out-txt)}
.sup-stage.sin_respuesta{background:var(--err-soft);color:var(--err-txt)}
.sup-meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px}
.sup-chip{font-size:11px;color:var(--muted);background:var(--panel2);border:1px solid var(--border);
  border-radius:7px;padding:2px 8px}
.sup-rfq{margin-top:8px}
.sup-rfq summary{cursor:pointer;font-size:11.5px;color:var(--muted);font-weight:600;list-style:none}
.sup-rfq summary::-webkit-details-marker{display:none}
.sup-rfq summary:before{content:"▸";color:var(--accent);font-size:10px;margin-right:6px;display:inline-block}
.sup-rfq[open] summary:before{transform:rotate(90deg)}
.sup-rfq pre{margin:7px 0 0;white-space:pre-wrap;font:11.5px/1.45 ui-monospace,Consolas,monospace;
  color:var(--code);background:var(--panel2);padding:9px 11px;border-radius:8px;max-height:200px;overflow:auto}

/* ---------- Bandeja de mails sin asignar ---------- */
.tab-n{margin-left:6px;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
  background:var(--warn-soft);color:var(--warn-txt)}
.tab-n:empty,.nav-n:empty{display:none}
.sup-stage.pend{background:var(--warn-soft);color:var(--warn-txt)}
.orph-intro{margin:0 0 14px;max-width:820px;line-height:1.5}
.orph-list{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.orph-subj{margin-top:6px;font-size:13px;font-weight:600}
.orph-note{margin-top:8px;font-size:12px;color:var(--warn-txt)}
.orph-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.orph-act select{flex:1;min-width:240px;max-width:100%}
.orph-h{font-size:13px;margin:6px 0 10px}

/* ---------- Adjuntos ---------- */
.att-zone{align-self:stretch;max-width:100%;background:var(--panel2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin:2px 0 6px}
.att-zh{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel3);
  font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.att-grid{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px}
.att-thumb{width:104px;height:104px;border-radius:10px;border:1px solid var(--border2);object-fit:cover;
  cursor:zoom-in;background:var(--panel);transition:border-color .12s,transform .12s}
.att-thumb:hover{border-color:var(--accent);transform:scale(1.03)}
.att-pdf{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel);
  border:1px solid var(--border2);border-radius:10px;color:var(--accent-txt);text-decoration:none;font-size:13px;
  font-weight:600;height:104px;box-sizing:border-box}
.att-pdf:hover{border-color:var(--accent);background:var(--panel3)}
.att-pdf .ico{font-size:24px}
#lightbox{position:fixed;inset:0;background:var(--veil2);display:none;align-items:center;
  justify-content:center;z-index:70;cursor:zoom-out;padding:32px}
#lightbox.on{display:flex}
#lightbox img{max-width:96%;max-height:96%;border-radius:8px;box-shadow:var(--sh-lg)}

/* ---------- Reporte HTML embebido ---------- */
/* El informe trae su propio tema claro: el fondo blanco es del documento, no del panel. */
.reportframe{width:100%;height:70vh;border:1px solid var(--border);border-radius:var(--r);background:#fff}

/* ---------- Toasts ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.toast{background:var(--panel3);border:1px solid var(--border2);color:var(--txt);
  padding:10px 18px;border-radius:8px;font-size:13px;box-shadow:var(--sh-md);
  opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:auto;
  max-width:80vw;text-align:center}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:var(--err-bd);color:var(--err-txt)}
.toast.ok{border-color:var(--ok-bd);color:var(--ok-txt)}

/* ---------- Accesibilidad ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,.ord:focus-visible,.alert:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Exportación de la conversación a PDF ---------- */
#printhead{display:none}
@media print{
  @page{size:A4;margin:12mm 13mm 14mm;background:#fff}
  /* La exportación siempre se imprime en claro, esté el panel en el tema que esté. */
  :root,[data-theme="light"]{
    --bg:#fff;--panel:#fff;--panel2:#f6f7f9;--panel3:#eef0f4;
    --border:#d3d8e0;--border2:#c2c8d2;--txt:#161a22;--muted:#5a6473;--muted2:#7c8494;
    --bot:#f4f6f9;--human:#eaf6ee;--humanbd:#c4e2cf;--code:#2c3546;
    --accent:#004A97;--accent2:#004A97;--accent3:#00387b;--accent-txt:#004A97;
    --accent-soft:rgba(0,74,151,.08);--accent-bd:rgba(0,74,151,.25);
    --ok:#2f8f63;--ok-txt:#22754f;--ok-soft:rgba(47,143,99,.12);--ok-bd:#a6d7bf;
    --warn:#b57d1a;--warn-txt:#8d5d0d;--warn-soft:rgba(181,125,26,.12);--warn-bd:#e3cd9d;
    --err:#bb1e10;--err-txt:#98180d;--err-soft:rgba(187,30,16,.08);--err-bd:#e9b7b1;--err-body:#6e1109;
    --pill:#eef1f6;--sunken:rgba(0,0,0,.05);
  }
  html,body{height:auto!important;overflow:visible!important;background:var(--bg)!important;color:var(--txt)!important}
  body{display:block!important;min-height:100%!important}
  /* Fuera el cromo: no pertenece al documento impreso. */
  #nav,#side,#dragger,.vhead,.tabs,.fbar,#gatebox,#lightbox,#toast,#modal,.banner,
  .topctl{display:none!important}
  #main,.view,#detail,.split,.opane{display:block!important;flex:none!important;overflow:visible!important}
  #chat{display:block!important;overflow:visible!important;padding:0!important;height:auto!important;
    max-width:178mm;margin:0 auto}
  #chat>*{margin-bottom:10px}
  .empty{display:none!important}
  /* La exportación es para leer: fuera progreso interno, RAW y errores técnicos. */
  .export-technical,#scout-rich,#sup-rich,.phase[data-phase="scouting"],
  .phase[data-phase="system"],.local-link{display:none!important}
  #printhead{display:flex!important;align-items:center;justify-content:space-between;gap:16px;
    max-width:178mm;margin:0 auto 18px;padding-bottom:12px;border-bottom:2px solid #004A97}
  #printhead .ph-logo{display:flex;align-items:center;gap:10px}
  #printhead .ph-logo svg{height:44px;width:auto;display:block}
  #printhead .ph-brand{font-size:11px;font-weight:700;color:#004A97;letter-spacing:.03em}
  #printhead .ph-meta{text-align:right;min-width:0}
  #printhead .ph-eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;
    letter-spacing:.1em;color:var(--muted);margin-bottom:2px}
  #printhead .ph-title{font-size:15px;font-weight:700;color:#111}
  #printhead .ph-sub{font-size:10.5px;color:var(--muted);margin-top:3px;word-break:break-word}
  .msg,.art,.pliego,.att-zone{break-inside:auto;page-break-inside:auto;box-shadow:none!important;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .phase,.art summary,.pl-head,.pl-field,.pl-spec{
    break-inside:avoid;page-break-inside:avoid;break-after:avoid-page}
  .msg{max-width:88%!important;font-size:11.5px;line-height:1.48;padding:9px 12px}
  .msg.bot{margin-right:auto}
  .msg.human,.msg.admin{margin-left:auto;max-width:82%!important}
  .phase{margin:14px auto 7px!important;padding:4px 13px;font-size:9.5px}
  .who{font-size:9.5px;margin-bottom:4px}
  details.art{display:block!important}
  .art summary{padding:9px 12px;font-size:11px}
  .pl-head{padding:10px 13px}
  .pl-field{padding:8px 13px}
  .pl-spec-list{padding:7px 13px 11px}
  .pl-spec{padding:6px 10px}
  a{color:var(--accent)!important;text-decoration:none}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;animation:none!important}
}

/* ---------- Vista: usuarios ---------- */
/* Alta de acceso en una línea: el mail se lleva el ancho sobrante, el rol y el botón van al tamaño
   de su contenido. En pantalla angosta se apila (ver el bloque responsive). */
.usr-form{display:flex;gap:8px;align-items:center}
.usr-form .input{flex:1;min-width:0}
.usr-form select.input{flex:0 0 auto;width:auto;cursor:pointer}
.usr-form .btn{flex:0 0 auto}
/* El select de rol dentro de la tabla: chico, para que la fila no crezca de alto. */
.input.sm{padding:4px 8px;font-size:12px;width:auto;cursor:pointer}
#view-users .tbl td{vertical-align:middle}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body{flex-direction:column;height:auto;min-height:100vh;overflow:auto}
  #nav{width:100%;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .nav-links{flex-direction:row;flex:1}
  .nav-bot{margin-top:0;border-top:0;padding-top:0}
  .nav-actions{flex-direction:row}
  .split{flex-direction:column}
  /* Apilado en vertical, el ancho de la lista no aplica y el divisor no tiene sentido. */
  #side{width:100%!important;min-width:0;max-width:none;max-height:40vh}
  #dragger{display:none}
  .msg{max-width:92%}
  .usr-form{flex-direction:column;align-items:stretch}
  .usr-form select.input,.usr-form .btn{width:100%}
  /* El mail del usuario compite con los botones de tema y salida: se achica antes que ellos. */
  .whoami{max-width:120px}
}