:root{
  /* IDENTIDAD HF GROUP (elegida 20-jul-2026, opción D).
     Ámbar corporativo sobre grafito azulado. Hereda la familia amarilla de OMP
     (#FFE948) pero un tono más bajo, para que el holding no se confunda con la
     pizzería. El grafito azulado reemplaza el negro plano: menos fatiga de
     noche y los bordes de las tarjetas se leen mejor. */
  --brand:#F2B01E; --brand-d:#D99206; --accent:#4A9EFF;
  --bg:#1e232d; --s1:#28303c; --s2:#323b4a; --s3:#3d4757; --s4:#4a5566;
  --line:#3a4453; --line2:#4d5868;
  --txt:#eef0f4; --txt2:#a8b0be; --txt3:#828b9a;
  --ok:#3ddc7f; --warn:#ffab2e; --crit:#ff5c52; --info:#4A9EFF;
  --r1:12px; --r2:16px; --r3:20px;
  --sh1:0 1px 2px rgba(0,0,0,.4);
  --sh2:0 6px 24px rgba(0,0,0,.45);
  --ease:cubic-bezier(.4,0,.2,1);
}
body.light{
  --bg:#eef0f3; --s1:#ffffff; --s2:#ffffff; --s3:#eef0f3; --s4:#e1e4e9;
  --line:#e4e7ec; --line2:#d4d8df;
  --txt:#16161a; --txt2:#5c606a; --txt3:#8a8f99;
  --ok:#1f9d4d; --warn:#d98200; --crit:#e0352b; --info:#0a6ed1;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:var(--bg);color:var(--txt);
  font-family:'Lexend',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;}
.hidden{display:none!important;}

#offline{position:fixed;top:0;left:0;right:0;background:var(--crit);color:#fff;text-align:center;
  padding:7px;font-size:13px;font-weight:600;z-index:200;transform:translateY(-100%);transition:.3s var(--ease);}
#offline.show{transform:translateY(0);}

/* login */
.screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{width:100%;max-width:360px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r3);padding:36px 28px;text-align:center;box-shadow:var(--sh2);}
.login-card h1{font-family:'Anton';letter-spacing:3px;font-size:28px;margin-top:14px;}
.login-card .sub{color:var(--txt3);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin:6px 0 26px;}
.login-card input{width:100%;padding:14px;margin-bottom:12px;border-radius:var(--r1);
  border:1px solid var(--line2);background:var(--s2);color:var(--txt);font-size:15px;}
.login-card input:focus{outline:none;border-color:var(--brand);}
.btn-primary{width:100%;padding:14px;border:none;border-radius:var(--r1);
  background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#0e0e0e;
  font-weight:700;font-size:15px;letter-spacing:.5px;}
.err{color:var(--crit);font-size:13px;margin-top:12px;min-height:18px;}

/* shell */
#app{height:100%;display:flex;flex-direction:column;}
header{display:flex;align-items:center;gap:14px;padding:12px 18px;padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--s1);border-bottom:1px solid var(--line);flex-shrink:0;}
.brand{display:flex;align-items:center;gap:11px;}
.mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-d));
  display:flex;align-items:center;justify-content:center;font-family:'Anton';font-size:20px;color:#0e0e0e;box-shadow:var(--sh1);}
.mark.big{width:64px;height:64px;font-size:32px;margin:0 auto;}
.bt b{font-family:'Anton';font-size:16px;letter-spacing:1.5px;display:block;}
.bt span{font-size:9px;color:var(--txt3);letter-spacing:2.5px;}
.h-spacer{flex:1;}
.sync{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt2);
  padding:7px 12px;background:var(--s2);border-radius:30px;border:1px solid var(--line);}
.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--txt3);transition:.3s;}
.sync .dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(48,209,88,.18);}
.sync .dot.off{background:var(--crit);}
.icon-btn{background:var(--s2);border:1px solid var(--line);color:var(--txt2);
  width:38px;height:38px;border-radius:12px;font-size:16px;}

main{flex:1;overflow-y:auto;padding:16px;padding-bottom:calc(80px + env(safe-area-inset-bottom));}

/* tabs */
#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--s1);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:50;}
.tab{flex:1;padding:10px 0 12px;background:none;border:none;color:var(--txt3);
  font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;}
.tab .ti{font-size:18px;}
.tab.on{color:var(--brand);}
.badge{position:absolute;top:4px;right:calc(50% - 26px);background:var(--crit);color:#fff;
  font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* cards */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r2);
  padding:16px;margin-bottom:12px;box-shadow:var(--sh1);}
.card h3{font-size:13px;color:var(--txt2);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;}
.kpi-row{display:flex;gap:10px;flex-wrap:wrap;}
.kpi{flex:1;min-width:90px;background:var(--s2);border-radius:var(--r1);padding:12px;text-align:center;}
.kpi b{font-size:22px;display:block;font-weight:700;}
.kpi span{font-size:11px;color:var(--txt3);}
.kpi.ok b{color:var(--ok);} .kpi.warn b{color:var(--warn);} .kpi.crit b{color:var(--crit);}

.agente{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);}
.agente:last-child{border-bottom:none;}
.agente .st{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.st.ok{background:var(--ok);} .st.err{background:var(--crit);}
.st.warn{background:var(--warn);} .st.off{background:var(--txt3);}
.agente .nm{font-weight:600;font-size:14px;flex:1;}
.agente .meta{font-size:11px;color:var(--txt3);text-align:right;}

.gate{background:var(--s1);border:1px solid var(--line);border-radius:var(--r2);padding:16px;margin-bottom:12px;}
.gate .g-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.gate .g-tipo{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:1px;text-transform:uppercase;}
.gate .g-time{font-size:11px;color:var(--txt3);}
.gate .g-titulo{font-weight:600;font-size:15px;margin-bottom:6px;}
.gate pre{background:var(--s2);border-radius:var(--r1);padding:10px;font-size:11px;color:var(--txt2);
  overflow-x:auto;max-height:180px;margin:8px 0;}
.gate .g-btns{display:flex;gap:10px;margin-top:10px;}
.gate .g-btns a,.gate .g-btns button{flex:1;text-align:center;padding:11px;border-radius:var(--r1);
  font-weight:700;font-size:13px;text-decoration:none;border:none;}
.b-ok{background:var(--ok);color:#04220e;}
.b-no{background:var(--s3);color:var(--txt2);border:1px solid var(--line2)!important;}

.empty{text-align:center;color:var(--txt3);padding:40px 0;font-size:14px;}
.spin{text-align:center;color:var(--txt3);padding:30px 0;font-size:13px;}

/* ============ COMMAND CENTER ============ */
.cmd-opts{display:flex;gap:8px;}
.cmd-opts select{flex:1;padding:10px;border-radius:var(--r1);border:1px solid var(--line2);
  background:var(--s2);color:var(--txt);font-size:13px;font-family:inherit;}
.cmd-activa{margin-top:10px;padding:10px;background:var(--s2);border-radius:var(--r1);
  font-size:12px;color:var(--txt2);display:flex;align-items:center;gap:8px;}
.cmd-activa .pill{background:var(--s3);padding:3px 8px;border-radius:20px;font-size:11px;}
.cmd-activa .stop{margin-left:auto;background:var(--crit);color:#fff;border:none;
  padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;}

#cmd-chat{display:flex;flex-direction:column;gap:10px;padding-bottom:8px;}
.msg{max-width:88%;padding:11px 14px;border-radius:var(--r2);font-size:14px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;}
.msg.yo{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#0e0e0e;font-weight:500;}
.msg.ia{align-self:flex-start;background:var(--s1);border:1px solid var(--line);}
.msg.tool{align-self:flex-start;background:var(--s2);border:1px dashed var(--line2);
  color:var(--txt3);font-size:11.5px;font-family:ui-monospace,monospace;padding:7px 11px;}
.msg.err{align-self:flex-start;background:rgba(255,69,58,.12);border:1px solid var(--crit);color:var(--crit);font-size:13px;}
.msg.meta{align-self:center;color:var(--txt3);font-size:11px;background:none;padding:2px;}
.pensando{align-self:flex-start;color:var(--txt3);font-size:12px;padding:6px 12px;}
.pensando::after{content:'▌';animation:parpadeo 1s steps(2) infinite;}
@keyframes parpadeo{50%{opacity:0;}}

#cmd-barra{position:fixed;bottom:calc(62px + env(safe-area-inset-bottom));left:0;right:0;
  display:flex;gap:8px;padding:10px 14px;background:var(--s1);border-top:1px solid var(--line);z-index:40;}
#cmd-input{flex:1;padding:11px 14px;border-radius:20px;border:1px solid var(--line2);
  background:var(--s2);color:var(--txt);font-size:14px;font-family:inherit;resize:none;max-height:120px;}
#cmd-input:focus{outline:none;border-color:var(--brand);}
#cmd-enviar{width:44px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#0e0e0e;font-size:15px;font-weight:700;}
#cmd-enviar:disabled{opacity:.4;}

.gate-msg{align-self:flex-start;max-width:92%;background:var(--s1);
  border:1px solid var(--warn);border-radius:var(--r2);padding:13px 15px;font-size:13.5px;}
.gate-msg code{background:var(--s3);padding:2px 6px;border-radius:5px;font-size:12px;}
.gate-msg pre{background:var(--s2);border-radius:var(--r1);padding:9px;font-size:11px;
  color:var(--txt2);overflow-x:auto;margin:8px 0;max-height:130px;}
.gate-msg .b-ok{display:block;text-align:center;padding:10px;border-radius:var(--r1);
  text-decoration:none;font-weight:700;font-size:13px;}

#cmd-voz{width:44px;border-radius:50%;border:1px solid var(--line2);background:var(--s2);
  color:var(--txt2);font-size:17px;flex-shrink:0;}
#cmd-voz.hablando{background:var(--crit);border-color:var(--crit);color:#fff;
  animation:latido 1.4s ease-in-out infinite;}
@keyframes latido{50%{transform:scale(1.09);}}
#voz-estado{position:fixed;bottom:calc(120px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;font-size:12px;color:var(--txt3);z-index:41;pointer-events:none;}

/* Logo HF Group — monograma con asta compartida (ver olimpo/marca/) */
.mark .lg{width:56%;height:56%;color:#15181e;}
.mark.big .lg{width:52%;height:52%;}

/* Gates legibles: etiqueta → valor, en vez del volcado de JSON */
.gate .g-sub{color:var(--txt2);font-size:12.5px;margin-bottom:12px;}
.g-campos{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border-radius:var(--r1);overflow:hidden;margin-bottom:10px;}
.g-fila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--s2);padding:9px 12px;}
.g-fila span{font-size:11.5px;color:var(--txt3);flex-shrink:0;}
.g-fila b{font-size:13px;font-weight:600;text-align:right;word-break:break-word;}
.g-fila b.ojo{color:var(--warn);}
.g-raw{margin-bottom:10px;}
.g-raw summary{font-size:11px;color:var(--txt3);cursor:pointer;padding:4px 0;}
.g-raw pre{margin-top:6px;}

/* Detalle de productos facturados — sin esto no se puede evaluar la factura */
.g-lineas{background:var(--s2);border-radius:var(--r1);padding:11px 12px;margin-bottom:10px;}
.g-lineas-tit{font-size:11px;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.6px;font-weight:600;margin-bottom:8px;}
.g-item{padding:7px 0;border-bottom:1px solid var(--line);}
.g-item:last-child{border-bottom:none;padding-bottom:0;}
.g-item-nom{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:3px;}
.g-item-det{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.g-item-det span{font-size:11.5px;color:var(--txt3);}
.g-item-det b{font-size:13px;font-weight:600;}