/* DCI Integra - industrial control surface, DCI TECH palette (blue #05FF09 + green #05FF09), text >= 16px */
:root{
  --bg:#0B0C0E;--panel:#121316;--card:#17181B;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --ink:#ECEEF0;--muted:#B4B8BF;--blue:#05FF09;--blue2:#04C707;--green:#05FF09;--green2:#04C707;
  --ok:#3DDC5A;--warn:#FBBF24;--bad:#FF5C5C;--work:#05FF09;
  --display:'Chakra Petch',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
#pushMsg:empty{display:none}   /* .login/.shell/.vivo set display:grid/flex, which beats the hidden attribute without this */
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.5 var(--body);
  background:radial-gradient(900px 500px at 0% -10%,rgba(5,255,9,.07),transparent),radial-gradient(700px 400px at 100% 0%,rgba(5,255,9,.035),transparent),var(--bg)}
h1,h2,h3{font-family:var(--display);margin:0}
h2{font-size:1.75rem}.sub{font-size:1.2rem;margin:28px 0 12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.muted{color:var(--muted)}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.btn{min-height:44px;padding:8px 16px;border-radius:9px;border:1px solid var(--line2);background:#1B1D20;color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.btn:hover{border-color:var(--blue)}.btn.primary{background:var(--green2);color:#04110A;border:0}.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:wait}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input,select{min-height:44px;padding:8px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px}
.brand{font:700 1.4rem var(--display);font-style:italic}.brand .b1{color:#fff}.brand .b2{color:var(--green)}.brand .b3{color:var(--blue);font-style:normal;font-size:1.1rem}
.brand.small{font-size:1.25rem}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.login-card h1{font-size:2rem}.login-card label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.msg{color:var(--bad);min-height:1.5em;margin:0}
.qr{width:max-content;margin:4px auto;background:#fff;border-radius:12px;padding:6px;line-height:0}.qr svg{display:block;width:220px;height:220px}
.secret{font-size:1.05rem;letter-spacing:.06em;word-break:break-all;background:#0E0F11;border:1px solid #33363C;border-radius:9px;padding:8px 12px;margin:0}
#codeForm p{margin:0}
.btn.ms{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1b1b1b;border:1px solid #8c8c8c;text-decoration:none}
.btn.ms:hover{border-color:var(--blue)}
.local summary{cursor:pointer;color:var(--muted);min-height:44px;display:flex;align-items:center}
.local[open]{display:flex;flex-direction:column;gap:14px}
.sso-admin{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.sso-admin h3{font-size:1.2rem}.sso-admin p{margin:0;overflow-wrap:anywhere}
.sso-form{display:flex;flex-direction:column;gap:12px;max-width:640px}.sso-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.sso-form .row{display:flex;gap:8px;flex-wrap:wrap}.warn{color:var(--warn)}

/* shell */
/* shell: grouped icon rail (68px) that expands to 252px; tools (Asistente/Contratos) get the whole rest, edge to edge */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;transition:grid-template-columns .18s ease}
.side{background:linear-gradient(180deg,rgba(18,19,22,.92),rgba(11,12,14,.96));border-right:1px solid var(--line);padding:14px 10px;
  display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;z-index:5;min-width:0}
.sidetop{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.logo img{width:34px;height:34px;border-radius:9px;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.logo-txt>span{font:700 1.15rem var(--display);font-style:italic}.logo-txt .g{color:var(--green)}
.logo-txt small{font:500 1rem var(--mono);color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;scrollbar-width:thin}
nav .grp{margin:12px 12px 4px;font:600 1rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:#A2A6AD;white-space:nowrap}
nav a{position:relative;display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;padding:9px 12px;min-height:44px;
  border-radius:10px;font-weight:500;white-space:nowrap}
nav a:hover{background:#191A1D}nav a.on{background:#15241A;color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot.live{background:var(--green);box-shadow:0 0 10px var(--green)}
.dot.badge{position:absolute;left:30px;top:9px;width:8px;height:8px}
.me{margin-top:auto;border-top:1px solid var(--line);padding:12px 4px 4px;display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--display);color:#04110A;
  background:linear-gradient(135deg,var(--blue),var(--green2))}
.me-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}.me-txt>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{display:grid;place-items:center;width:44px;height:44px;flex:none;margin-left:auto;border-radius:10px;border:1px solid var(--line2);
  background:transparent;color:var(--ink);cursor:pointer}.iconbtn:hover{border-color:var(--blue);color:var(--blue)}
.rail-btn{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;border:0;border-radius:10px;background:transparent;
  color:var(--muted);font:500 1rem var(--body);cursor:pointer;white-space:nowrap}.rail-btn:hover{background:#191A1D;color:var(--ink)}
@media (min-width:901px){
  .shell.rail{grid-template-columns:68px minmax(0,1fr)}
  .shell.rail .lbl{display:none}
  .shell.rail nav .grp{height:1px;margin:10px 12px;background:var(--line);font-size:0;overflow:hidden}
  .shell.rail nav a,.shell.rail .rail-btn{justify-content:center;padding:9px 0}
  .shell.rail .me{flex-direction:column;padding:12px 0 4px}.shell.rail .iconbtn{margin:0}
  .shell.rail .sidetop{justify-content:center;padding:2px 0 10px}
  .shell.rail .rail-btn .ic{transform:rotate(180deg)}
  .shell.rail nav{scrollbar-width:none}.shell.rail nav::-webkit-scrollbar{display:none}   /* still scrolls; no grey bar in the slim rail */
}
/* tools fill the screen: no padding, no frame border */
.shell.appmode .main{padding:0}
.main{padding:28px clamp(16px,3vw,40px) 60px;min-width:0}
.vh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}

/* inicio */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi b{display:block;font:700 2rem var(--display);font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted)}
.health,.conns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;align-items:start}
.hcard>:not(.ltile){grid-column:2}
.ltile{grid-row:1 / span 4;position:relative;width:56px;height:56px;border-radius:14px;background:#F4F5F6;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.35)}
.ltile img{width:38px;height:38px;object-fit:contain}
.ltile.duo{grid-template-columns:1fr 1fr;padding:0 6px;gap:2px}.ltile.duo img{width:20px;height:20px}
.ltile>b{font:700 1.5rem var(--display);color:#15171A}
.hcard .lamp{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;border:3px solid var(--card)}
.st-ok .lamp{background:var(--ok);box-shadow:0 0 12px var(--ok)}.st-alerta .lamp{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.st-error .lamp{background:var(--bad);box-shadow:0 0 12px var(--bad)}.st-trabajando .lamp{background:var(--work);box-shadow:0 0 12px var(--work);animation:pulse 1.4s infinite}
.hcard h3{font-size:1.15rem}.hcard .rol{color:var(--muted)}.hcard .det{font-family:var(--mono);font-size:1rem}
.hcard .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);font:500 1rem var(--mono);color:var(--muted)}
.crons{display:flex;flex-direction:column;gap:6px}
.cron{display:flex;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 14px}

/* pedidos */
.orders{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.order{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.order .head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.order .num{font:700 1.3rem var(--display)}.tag{font:600 1rem var(--mono);color:var(--warn)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.step{border-radius:9px;padding:8px 10px;background:#121316;border:1px solid var(--line);min-width:0}
.step b{display:block;font-weight:600}.step span{font-family:var(--mono);color:var(--muted);overflow-wrap:anywhere}
.step.s-ok{border-color:rgba(61,220,90,.5)}.step.s-ok b{color:var(--ok)}
.step.s-alerta{border-color:rgba(251,191,36,.6)}.step.s-alerta b{color:var(--warn)}
.step.s-espera b{color:var(--blue)}
.nota{color:var(--muted);font-family:var(--mono)}

/* envíos */
.scard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.scard ul{margin:4px 0;padding-left:20px;color:var(--muted)}
.scard .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.scard label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}.scard input{width:120px;font-family:var(--mono)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.punto label{display:flex;flex-direction:column;gap:6px;color:var(--ink)}.punto select{max-width:100%;min-width:0}
.confirm{border:1px solid var(--warn);border-radius:9px;padding:10px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* debug en vivo */
.vivo{display:flex;flex-direction:column;height:calc(100vh - 88px)}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.chip{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:500 1rem var(--body);cursor:pointer}
.chip.on{color:var(--ink);border-color:var(--blue);background:#15241A}
.log{flex:1;min-height:300px;overflow:auto;background:#070708;border:1px solid var(--line);border-radius:12px;padding:10px 0;font:1rem/1.55 var(--mono)}
.ln{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;padding:2px 14px}
.ln:hover{background:#0E0F11}.ln .t{color:#9599A0}.ln .s{color:var(--blue);white-space:nowrap}.ln .x{overflow-wrap:anywhere;white-space:pre-wrap}
.ln.aviso .x{color:var(--warn)}.ln.error .x{color:var(--bad)}.ln.error{background:rgba(255,92,92,.06)}
.ln.new{animation:flash 1.2s ease-out}

/* bitácora */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600}td{font-family:var(--mono)}

/* sincronización / productos */
.banner{border:1px solid var(--line2);border-radius:12px;padding:12px 16px;margin:8px 0 16px;background:var(--card)}
.banner.b-ok{border-color:rgba(61,220,90,.45)}.banner.b-warn{border-color:rgba(251,191,36,.6)}.banner.b-run{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch;margin-bottom:16px}
.fstep{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.fstep h4{margin:0 0 4px;font:600 1rem var(--display);color:var(--blue);letter-spacing:.04em;text-transform:uppercase}
.fstep>b{display:block;font:700 1.9rem var(--display);font-variant-numeric:tabular-nums}.fstep>span{color:var(--muted)}
.arrow{align-self:center;color:var(--muted);font-size:1.4rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0;margin-bottom:12px}
.panel h3{font-size:1.1rem;margin-bottom:10px}.panel h5{font:600 1rem var(--body);color:var(--muted);margin:12px 0 6px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:8px 0 0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
ul.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.activity{max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.act{display:grid;grid-template-columns:auto 80px minmax(0,1fr);gap:12px;padding:4px 6px;border-radius:6px}.act:hover{background:#191A1D}
.act .eng{color:var(--blue)}.act.error{color:var(--bad)}.act.warn,.act.aviso{color:var(--warn)}
.row-form{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.row-form input{flex:1 1 260px;min-width:0;font-family:var(--mono)}
.prod{display:flex;gap:16px;align-items:center;margin:8px 0 14px}.prod img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:10px}
.scard input.path{flex:1 1 320px;width:auto;min-width:0}
/* monitoreo */
.mons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mon{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mon .lamp{width:14px;height:14px;border-radius:50%;margin-top:6px}
.mon.st-ok .lamp{background:var(--ok)}.mon.st-error .lamp{background:var(--bad);box-shadow:0 0 12px var(--bad)}.mon.st-alerta .lamp{background:var(--warn)}
.bars{display:flex;gap:2px;margin-top:6px}.bars i{flex:1;max-width:10px;height:18px;border-radius:2px;background:#33363C}
.bars .b1{background:var(--ok)}.bars .b0{background:var(--bad)}.bars .b2{background:var(--warn)}.bars .b3{background:var(--blue)}
td.ok{color:var(--ok)}td.espera{color:var(--blue)}td.alerta{color:var(--warn)}td.bad{color:var(--bad)}td.muted{color:var(--muted)}

@keyframes pulse{50%{opacity:.35}}
@keyframes flash{from{background:rgba(5,255,9,.18)}}
/* embedded tools */
.appview{display:flex;flex-direction:column;height:100vh}
.appview .app-msg{min-height:0;margin:0}.appview .app-msg:not(:empty){padding:12px 16px}
.appframe{flex:1;width:100%;min-height:0;border:0;background:#0B0C0E;display:block}
@media (max-width:900px){.appview{height:calc(100dvh - 64px)}}
/* WhatsApp */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pill.warn{color:var(--warn);border-color:rgba(251,191,36,.45)}.pill.ok{color:var(--ok);border-color:rgba(61,220,90,.45)}
.wa{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;margin-top:16px;min-height:60vh}
.wa-list{display:flex;flex-direction:column;gap:8px;max-height:75vh;overflow:auto}
.wa-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink)}
.wa-item:hover{border-color:var(--line2)}.wa-item.on{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.wa-item:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wa-top{display:flex;justify-content:space-between;gap:8px}.wa-last{color:var(--muted);overflow-wrap:anywhere}
.wa-tags{display:flex;gap:6px;flex-wrap:wrap}
.wa-chat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.wa-empty{margin:auto}
.wa-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:10px}
.wa-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wa-back{display:none}
.wa-msgs{flex:1;overflow:auto;max-height:60vh;display:flex;flex-direction:column;gap:8px;padding:4px}
.msg-b{max-width:78%;border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-b.in{align-self:flex-start;background:#1B1D20;border:1px solid var(--line)}
.msg-b.out{align-self:flex-end;background:#0F2A1A;border:1px solid rgba(5,255,9,.18)}
.msg-b.r-agent{background:#2B2312;border-color:rgba(251,191,36,.5)}.msg-b.r-agent .who{color:#FBD46B}.msg-b.r-agent .who::before{content:"ASESOR";font:700 1rem var(--mono);color:#1A1405;background:#FBBF24;border-radius:6px;padding:0 6px;margin-right:8px}.msg-b.r-assistant .who{color:#7CFF7E}
.msg-b .who{color:var(--muted)}
.wa-send{display:flex;gap:8px;align-items:flex-end}
.wa-send textarea{flex:1;min-width:0;min-height:44px;padding:8px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px;resize:vertical}
.wa-closed{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.35);border-radius:9px;padding:10px 12px;margin:0}
@media (max-width:900px){.wa{grid-template-columns:1fr}.wa .wa-chat{display:none}.wa.chat-open .wa-chat{display:flex}
  .wa.chat-open .wa-list{display:none}.wa-back{display:inline-block}.msg-b{max-width:92%}}
@media (prefers-reduced-motion:reduce){.st-trabajando .lamp,.ln.new{animation:none}}
.menu-btn,.here{display:none}
@media (max-width:900px){.shell{grid-template-columns:1fr}
  /* phone / installed app: one slim top bar; the menu opens as a drawer instead of wrapping into rows */
  .side{position:sticky;top:0;z-index:20;height:auto;padding:10px 16px;gap:0;background:rgba(11,12,14,.96);border-right:0;border-bottom:1px solid var(--line)}
  .sidetop{justify-content:space-between;border-bottom:0;margin:0;padding:0}.logo-txt,.rail-btn{display:none}nav{overflow:visible;flex:none}
  .here{display:block;flex:1;min-width:0;font:600 1rem var(--display);color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-btn{display:inline-flex;align-items:center}
  .drawer{display:none;max-height:calc(100dvh - 64px);overflow:auto;padding-top:10px}.side.open .drawer{display:flex}
  .me{flex-direction:row;align-items:center;flex-wrap:wrap}
  .product{display:none}.health,.conns{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.vivo{height:auto}.log{height:70vh}
  .flow{grid-template-columns:1fr}.arrow{transform:rotate(90deg);justify-self:center}.two,.mons{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1250px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.flow .arrow{display:none}}

/* ══════════════ Brand energy (Javier 2026-10-16: "too dry, colours too down and sad") ══════════════
   The DCI mark is blue AND green: let both work. Colour by area (Ventas green, Operaciones blue, Integraciones aqua),
   stronger light washes + a faint technical grid, gradient accents. Text stays >= 16px, contrast stays high. */
:root{--aqua:#C6FF4D;--grad:linear-gradient(90deg,#05FF09,#C6FF4D 55%,#05FF09)}
body{background:
  radial-gradient(1100px 620px at -5% -15%,rgba(5,255,9,.16),transparent 60%),
  radial-gradient(900px 560px at 105% -10%,rgba(5,255,9,.09),transparent 60%),
  radial-gradient(800px 600px at 50% 120%,rgba(198,255,77,.07),transparent 60%),var(--bg)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(5,255,9,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(5,255,9,.05) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}
.shell,.login{position:relative;z-index:1}
/* brand block: DCI TECH GUATEMALA */
.logo-txt .co{font:700 1.08rem var(--display);font-style:italic;letter-spacing:.01em;white-space:nowrap}
.logo-txt .co .b{color:var(--blue)}
.logo-txt small{display:flex;gap:6px;align-items:center}
.tag{font:600 1rem var(--mono);padding:0 8px;border-radius:999px;color:#04110A;background:var(--grad);letter-spacing:.02em}
.side{background:linear-gradient(180deg,rgba(21,22,25,.94),rgba(11,12,14,.97));box-shadow:1px 0 0 rgba(5,255,9,.06)}
.sidetop{border-image:var(--grad) 1;border-bottom:1px solid}
/* menu: tinted icon tiles per area, glowing active edge */
nav a .ic{padding:3px;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.04)}
nav a.gv .ic{color:#05FF09;background:rgba(5,255,9,.10)}
nav a.go .ic{color:#05FF09;background:rgba(5,255,9,.12)}
nav a.gi .ic{color:var(--aqua);background:rgba(198,255,77,.11)}
nav a.ga .ic,nav a.gh .ic{color:#ECEEF0;background:rgba(255,255,255,.07)}
nav a:hover{background:linear-gradient(90deg,rgba(5,255,9,.10),rgba(5,255,9,0))}
nav a.on{background:linear-gradient(90deg,rgba(5,255,9,.20),rgba(5,255,9,.06));color:#fff;box-shadow:none}
nav a.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--grad);box-shadow:0 0 12px rgba(198,255,77,.7)}
nav .grp{color:#C4C7CC}
nav .grp:has(+ a.gv){color:#7CFF7F}nav .grp:has(+ a.go){color:#B9FFB9}nav .grp:has(+ a.gi){color:#DCFF9A}
/* headings: gradient underline accent */
.vh h2{position:relative;padding-bottom:6px}
.vh h2::after{content:'';position:absolute;left:0;bottom:-2px;width:56px;height:3px;border-radius:3px;background:var(--grad)}
.sub{color:#D3D6DB}
/* cards with a coloured top edge and depth */
.kpi,.hcard,.order,.card,.rcard,.ucard,.sso-admin{position:relative;background:linear-gradient(180deg,#1B1D20,#141518);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.kpi::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.9}
.kpi:nth-child(3n+2)::before{background:linear-gradient(90deg,#05FF09,#C6FF4D)}.kpi:nth-child(3n)::before{background:linear-gradient(90deg,#C6FF4D,#05FF09)}
.kpi b{background:linear-gradient(180deg,#fff,#DCFFDC);-webkit-background-clip:text;background-clip:text;color:transparent}
/* buttons */
.btn.primary{background:linear-gradient(180deg,#22F026,#04C707);color:#04110A;box-shadow:0 6px 18px -8px rgba(5,255,9,.6)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 8px 22px -8px rgba(5,255,9,.75)}
.btn.ghost:hover{background:rgba(5,255,9,.08)}
.avatar{background:var(--grad);box-shadow:0 0 0 2px rgba(11,12,14,.9),0 0 14px rgba(198,255,77,.45)}
@media (prefers-reduced-motion:no-preference){nav a,.btn,.kpi{transition:background .15s ease,box-shadow .15s ease,filter .15s ease}}
/* ══════════════ Ajustes ══════════════ */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:6px 0 18px;flex-wrap:wrap}
.tab{min-height:44px;padding:8px 16px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font:600 1rem var(--body);cursor:pointer}
.tab.on{color:#fff;border-image:var(--grad) 1;border-bottom:3px solid}
.tab:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.rcard{border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rcard b{font:700 1.15rem var(--display)}.rcard span{color:var(--muted)}.rcard em{font-style:normal;font-family:var(--mono);color:#D3D6DB;margin-top:auto}
.rcard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px}
.r-admin::before{background:var(--grad)}.r-ventas::before{background:#05FF09}.r-operaciones::before{background:#05FF09}.r-contabilidad::before{background:#C6FF4D}
.card{border-radius:12px;padding:16px}.card h3{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin:0 0 12px}.card h3 .ic{color:var(--green)}
.add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}.add-grid .btn{grid-column:1/-1}
.add-grid .opt{font-weight:400;color:var(--muted)}
.add-grid label{display:flex;flex-direction:column;gap:6px;color:var(--muted);min-width:0}
.add-grid input,.add-grid select,.uact select{width:100%}
select{min-height:44px;padding:8px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px}
.linkbox{margin-top:12px;padding:12px 14px;border-radius:10px;border:1px solid rgba(198,255,77,.4);background:rgba(198,255,77,.07)}
.linkbox p{margin:4px 0 10px;color:var(--muted)}.linkbox .row{display:flex;gap:8px}.linkbox input{flex:1;min-width:0}
.users{display:flex;flex-direction:column;gap:10px}
.invite{padding:10px 14px;border:1px dashed rgba(5,255,9,.4);border-radius:10px;color:#D3D6DB}
.ucard{border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.ucard.off{opacity:.7}.ucard .avatar.live{box-shadow:0 0 0 2px rgba(11,12,14,.9),0 0 0 4px var(--green)}
.uinfo{display:flex;flex-direction:column;min-width:0}.uinfo>span{overflow-wrap:anywhere}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.pill.bad{color:var(--bad);border-color:rgba(255,92,92,.45)}
.uact{display:flex;gap:8px;align-items:center}.uact select{min-width:170px}
.more{position:relative}.more summary{list-style:none;cursor:pointer}.more summary::-webkit-details-marker{display:none}
.more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:10;min-width:280px;display:flex;flex-direction:column;padding:6px;border-radius:12px;
  background:#1B1D20;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -12px rgba(0,0,0,.8)}
.more .menu button{min-height:44px;text-align:left;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:1rem var(--body);cursor:pointer}
.more .menu button:hover{background:rgba(5,255,9,.1)}.more .menu button.danger{color:var(--bad)}
@media (max-width:1100px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}.add-grid{grid-template-columns:1fr 1fr}.add-grid .btn{grid-column:span 2}}
@media (max-width:700px){.ucard{grid-template-columns:auto minmax(0,1fr)}.uact{grid-column:1/-1;flex-wrap:wrap}.uact select{flex:1}
  .add-grid{grid-template-columns:1fr}.add-grid .btn{grid-column:auto}.roles{grid-template-columns:1fr}}
/* 2026-10-21 (Javier's screenshot at ~850px): the Más menu was clipped by the card, the email broke mid-word ("dcitech.g / t")
   and the name/role/version in the menu footer were cut off */
.ucard{overflow:visible}.ucard:has(.more[open]){z-index:15}
.uinfo>span.mono{overflow-wrap:normal;word-break:normal}
.users{container-type:inline-size}
@container (max-width:820px){.ucard{grid-template-columns:auto minmax(0,1fr)}.uact{grid-column:2/-1;flex-wrap:wrap}.uact select{flex:1 1 170px}}
@container (max-width:480px){.uact{grid-column:1/-1}}
/* 2FA by WhatsApp (2026-10-21): login step + per-person number form in Ajustes */
.wa-step{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;border:1px solid rgba(5,255,9,.35);background:rgba(5,255,9,.06)}
.wa-head{display:flex;gap:10px;align-items:flex-start;margin:0}.wa-head .ic{color:var(--green);margin-top:2px}
.wa-how{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.wa-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wa-btns .btn{min-height:48px;justify-content:center;text-align:center;text-decoration:none}
@media (hover:hover) and (pointer:fine){.wa-btns{grid-template-columns:1fr}.wa-btns #waOpen{display:none}}
.wa-more{display:flex;gap:8px;flex-wrap:wrap}.wa-more .btn{flex:1 1 160px}
#code{font:600 1.5rem var(--mono);letter-spacing:.3em;text-align:center}
.note{color:#C4C7CC;margin:0;min-height:0}.note:empty{display:none}
.ucard .telf{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding-top:12px;border-top:1px solid var(--line)}
.ucard .telf[hidden]{display:none}.ucard .telf label{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;color:var(--muted)}
.ucard .telf .muted{flex-basis:100%}
@media (min-width:901px){.shell:not(.rail) .me{flex-wrap:wrap;row-gap:6px}
  .shell:not(.rail) .me-txt{flex:1 1 0}
  .shell:not(.rail) .me .theme-btn{margin-left:auto}
  .shell:not(.rail) .me-txt>span.app-ver{white-space:normal;overflow:visible}}

/* per-person app access (Ajustes → Acceso) */
.apps{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.app-chip{padding:2px 10px;border-radius:999px;background:rgba(5,255,9,.10);border:1px solid rgba(5,255,9,.28);color:#DCFFDC;font-size:1rem}
.ucard .acc{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.ucard .acc[hidden]{display:none}
.acc fieldset{margin:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.acc legend{padding:0 6px;font:600 1rem var(--display);letter-spacing:.04em;text-transform:uppercase}
.acc fieldset:nth-of-type(1) legend{color:#7CFF7F}.acc fieldset:nth-of-type(2) legend{color:#B9FFB9}.acc fieldset:nth-of-type(3) legend{color:#DCFF9A}
.acc label{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer}
.acc input[type=checkbox]{width:20px;height:20px;accent-color:#04C707;min-height:0}
.acc-foot{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
[data-acc].on{border-color:var(--green);color:#fff}
@media (max-width:1100px){.ucard .acc{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.ucard .acc{grid-template-columns:1fr}}

/* ══════════════ Green on neutral black (Javier 2026-10-16: "I don't like the blue") ══════════════
   Neutral charcoal surfaces, DCI green as the single accent (#05FF09 small / #04C707 large), green-family group tints.
   Blue lives only inside the DCI logo icon. The "working" lamp is white so it never reads as the green "OK". */
:root{--work:#ECEEF0;--grad:linear-gradient(90deg,#04C707,#05FF09 55%,#C6FF4D)}
body{background:
  radial-gradient(1100px 620px at -5% -15%,rgba(5,255,9,.07),transparent 60%),
  radial-gradient(900px 560px at 105% -10%,rgba(198,255,77,.05),transparent 60%),var(--bg)}
body::before{background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px)}
.logo-txt .co .b{color:#ECEEF0}
nav a.go .ic{color:#7CFF7F;background:rgba(124,255,127,.10)}
nav .grp:has(+ a.go){color:#9DFFA0}

/* ══════════════ Login / 2FA / setup cards: contrast (Javier 2026-10-16) ══════════════
   Card lifted off the background (lighter surface, visible border, green top edge, glow behind), near-white labels,
   inputs with a >= 3:1 border against the card and a green focus ring, readable placeholder, full-width action. */
::placeholder{color:#A2A6AD;opacity:1}
.login{background:radial-gradient(520px 420px at 50% 45%,rgba(5,255,9,.10),transparent 70%)}
.login-card{width:min(440px,100%);padding:32px 30px;gap:16px;background:linear-gradient(180deg,#1C1E22,#16181B);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(5,255,9,.06),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.login-brand{display:flex;align-items:center;gap:12px}
.login-brand img{width:44px;height:44px;border-radius:11px}
.login-brand>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.login-brand .co{font:700 1.15rem var(--display);font-style:italic;color:#fff;white-space:nowrap}.login-brand .co .g{color:var(--green)}
.login-card h1{font-size:2rem;margin-top:4px}
.login-card .muted,.login-card p{color:#C4C7CC}
.login-card label{color:#ECEEF0;font-weight:600}
.login-card input{background:#0B0C0E;border:1px solid #686D75;color:#fff;font-weight:400}
.login-card input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(5,255,9,.28)}
.login-card .btn.primary{width:100%;min-height:48px;font-size:1.05rem}
.login-card .btn.ghost{width:100%;border-color:#686D75;color:#ECEEF0}
.login-card .btn.ms{width:100%;min-height:48px;font-weight:600}
.login-card .msg{color:#FF8A8A;font-weight:500}
.local summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #4A4E55;border-radius:10px;color:#ECEEF0;font-weight:600;list-style:none}
.local summary::-webkit-details-marker{display:none}
.local summary::before{content:'▸';color:var(--green)}.local[open] summary::before{content:'▾'}
.local.solo summary{display:none}
.secret{background:#0B0C0E;border-color:#686D75;color:#fff}
/* <details> lays its content out in an internal slot, so the flex gap does not apply: space the fields explicitly */
.local label{margin-bottom:16px}.local .btn.primary{margin-top:4px}
.login-card .msg:empty{display:none}

/* Nova v2 (2026-10-16): pending items + practice chat */
.tab .count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;margin-left:6px;border-radius:999px;background:var(--green2);color:#04110A;font:700 1rem var(--mono)}
.nalerts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nalert{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.nalert.k-aprobar_cotizacion{border-color:rgba(251,191,36,.45)}.nalert.k-pedido_confirmado{border-color:rgba(5,255,9,.35)}
.na-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.na-det{margin:0;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.nalert .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.nalert.k-pago_linkbi,.nalert.k-linkbi_crear{border-color:rgba(251,191,36,.45)}
.na-aut{font:inherit;font-size:16px;min-width:0;flex:1 1 180px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg,#0f1115);color:inherit}
.np{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:14px;margin-top:8px}
.np-chat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.np-chat .wa-msgs{min-height:40vh}
.np-tools{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;max-height:75vh;overflow:auto}
.np-t{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.np-t:first-child{border-top:0}
.nstate{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px){.nalerts,.np{grid-template-columns:1fr}}
.wa-locked{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px dashed var(--line2);border-radius:12px;padding:14px 16px}.wa-locked p{margin:0;flex:1 1 280px;color:var(--muted)}
/* Llaves y APIs + Reglas de Nova (2026-10-16) */
.kgroup{display:flex;flex-direction:column;gap:8px;margin:14px 0}.kgroup h3{font-size:1.2rem}
.krow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.kinfo{display:flex;flex-direction:column;gap:4px;min-width:0}.kinfo>span:last-child{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kform{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.kform label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}.kform label.chk{flex-direction:row;align-items:center;gap:8px}
.kform .row{display:flex;gap:8px;flex-wrap:wrap}
.rules{display:flex;flex-direction:column;gap:14px}
.rules-ed{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rules-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#rulesText{min-height:55vh;width:100%;box-sizing:border-box;resize:vertical;padding:12px;font-size:1rem;line-height:1.55;color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px}
.rules-ed .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rules-core pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:1rem;color:var(--muted);max-height:60vh;overflow:auto}
@media (max-width:700px){.krow{grid-template-columns:1fr}}
/* Probar Nova: what the customer sees on WhatsApp (2026-10-16) */
.wa-card{padding:6px;max-width:300px}.wa-card img{width:100%;border-radius:9px;background:#fff;aspect-ratio:1;object-fit:contain}
.wa-card .txt{padding:6px 6px 2px}
.wa-btns{display:flex;flex-direction:column;gap:6px;margin-top:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
.wa-btn{min-height:44px;border:0;border-radius:9px;background:rgba(5,255,9,.08);color:#7CFF7E;font:600 1rem var(--body);cursor:pointer}
.wa-btn:hover{background:rgba(5,255,9,.16)}.wa-btns.menu .wa-btn{text-align:left;padding:0 12px;color:var(--ink);background:rgba(255,255,255,.05)}
.ad-tag{margin-top:4px;color:var(--ink)}.ad-tag a{color:var(--green)}
.wa-media{display:block;max-width:260px;max-height:320px;border-radius:9px;margin:4px 0;background:#fff;object-fit:contain}.wa-audio{display:block;width:260px;max-width:100%;margin:4px 0}

/* surfaces (2026-10-17, Javier: containers must stand out from the page) */
:root{--surf:#2B2F35;--surf2:#343940;--surf3:#3C424A;--edge:rgba(255,255,255,.22)}
/* ---- WhatsApp inbox (2026-10-17 redesign): list | chat | actions; amber = needs a person; nothing under 16px ---- */
.wx-top{flex-wrap:wrap;align-items:center;gap:14px}
.wx-title{display:flex;flex-direction:column;gap:2px}.wx-title h2{margin:0}
.wx-stats{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 420px;justify-content:center}
.wx-stat{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--surf);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.wx-stat b{color:var(--ink);font:700 1.05rem var(--display);font-variant-numeric:tabular-nums}
.wx-stat .ic{width:18px;height:18px;color:var(--green)}
.wx-stat.hot{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08)}.wx-stat.hot .ic,.wx-stat.hot b{color:var(--warn)}
.btn .ic{width:19px;height:19px;margin-right:7px;vertical-align:-4px}.btn.icon{padding:8px 11px}.btn.icon .ic{margin:0}
.btn.sm{min-height:38px;padding:6px 12px}
.wx-tabs{margin:8px 0 12px}.wx-tabs .tab{display:inline-flex;align-items:center;gap:8px}.wx-tabs .tab .ic{width:19px;height:19px}
/* tabs = a clear segmented bar on every screen; active one filled green */
.wx-tabs{display:inline-flex;gap:6px;padding:5px;margin:8px 0 12px;background:var(--surf);border:1px solid var(--edge);border-radius:14px}
.wx-tabs .tab{min-height:44px;padding:8px 16px;border:0;border-radius:10px;color:#D5D8DD}.wx-tabs .tab .ic{color:#AEB3BA}
.wx-tabs .tab:hover{background:#22252A;color:#fff}
.wx-tabs .tab.on{background:var(--green2);color:#04110A;border-image:none;border-bottom:0}.wx-tabs .tab.on .ic{color:#04110A}
.wx-tabs .tab .count{background:#C92A2A;color:#fff}.wx-tabs .ts{display:none}
/* notifications CTA: must stand out until it is switched on */
.wx-push{background:var(--warn);color:#1B1300;border:0;font-weight:700}.wx-push:hover{background:#FFD45C;border:0}.wx-push .ic{color:#1B1300}

.wx-toast{position:fixed;right:22px;bottom:22px;z-index:60;max-width:min(460px,calc(100vw - 32px));margin:0;padding:12px 16px;border-radius:10px;
  background:#102214;border:1px solid rgba(5,255,9,.45);color:#DFFFE0;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.wx-toast.bad{background:#2A1212;border-color:rgba(255,92,92,.55);color:#FFDCDC}
[hidden]{display:none!important}

/* three panes, filling the window */
.wx{display:grid;grid-template-columns:clamp(330px,25vw,390px) minmax(0,1fr);gap:12px;height:calc(100vh - 210px);min-height:520px}
.wx-left{display:flex;flex-direction:column;gap:8px;min-height:0;background:var(--surf);border:1px solid var(--edge);border-radius:12px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.wx-search{display:flex;align-items:center;gap:8px;background:#14161A;border:1px solid #2C2F34;border-radius:9px;padding:0 10px}
.wx-search:focus-within{border-color:var(--green2)}.wx-search .ic{width:18px;height:18px;color:var(--muted)}
.wx-search input{flex:1;min-width:0;min-height:42px;border:0;background:transparent;color:var(--ink);font:1rem var(--body);outline:none}
.wx-chips{display:flex;gap:6px;flex-wrap:wrap}
.wx-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 11px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:600 1rem var(--body);cursor:pointer}
.wx-chip .ic{width:17px;height:17px}
#waFilters{flex-wrap:nowrap;gap:5px;overflow-x:auto;min-width:0;scrollbar-width:none}#waFilters .wx-chip{padding:4px 9px;white-space:nowrap}.wx-chip .n:empty{display:none}
.wx-chip .n{min-width:22px;padding:0 6px;border-radius:999px;background:rgba(251,191,36,.18);color:var(--warn);font:700 1rem var(--mono);text-align:center}
.wx-chip:hover{color:var(--ink);border-color:#4A4E55}.wx-chip.on{background:rgba(5,255,9,.12);border-color:rgba(5,255,9,.5);color:#E6FFE6}
.wx-chip:focus-visible,.wx-row:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.wx-list{flex:1;min-height:0;max-height:none;overflow:auto;gap:2px;margin:0 -4px;padding:0 4px}
.wx-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 10px;border-radius:10px;color:var(--ink);border:1px solid transparent}
.wx-row+.wx-row{border-top-color:rgba(255,255,255,.07)}.wx-row:hover{background:var(--surf3)}.wx-row.on{background:#1C2A1E;border-color:rgba(5,255,9,.35)}
.wx-row.hot{box-shadow:inset 3px 0 0 var(--warn)}
.wx-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#4A5059;color:#F4F6F8;font:700 1rem var(--display);letter-spacing:.02em}
.wx-av.open{background:rgba(5,255,9,.16);color:#9BFF9D}.wx-av.agent{background:rgba(236,238,240,.16);color:#fff}
.wx-av.hot{background:rgba(251,191,36,.2);color:var(--warn)}
.wx-mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-l1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.wx-l1 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-l1 time{color:var(--muted);font:1rem var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}
.wx-l2{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-need{display:inline-flex;align-items:center;gap:5px;font-weight:600}.wx-need .ic{width:17px;height:17px}
.wx-need.warn{color:var(--warn)}.wx-need.bad{color:var(--bad)}.wx-need.ok{color:var(--ok)}
.wx-flags{display:flex;gap:4px;color:var(--muted)}.wx-flags .ic{width:18px;height:18px}
.wx-none{padding:18px 8px;text-align:center}

.wx-chat{padding:0;gap:0;min-height:0;overflow:hidden;background:#1B1E22;border-color:var(--edge)}
.wx-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);text-align:center;max-width:340px;padding:20px}
.wx-empty .ic{width:44px;height:44px;color:#5C6168}
.wx-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wx-who{display:flex;flex-direction:column;min-width:0;flex:1 1 160px}.wx-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-state{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:rgba(5,255,9,.1);color:#9BFF9D;font-weight:600}
.wx-state .ic{width:17px;height:17px}.wx-state.agent{background:rgba(236,238,240,.12);color:#fff}
.wx-body{flex:1;min-height:0;display:flex}
.wx-conv{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px}
.wx-conv .wa-msgs{max-height:none;flex:1;min-height:0}
.wx-hint{margin:0}
.wa-locked .ic{width:26px;height:26px;color:var(--green)}
.wx-sidetog,.wx-actbtn{display:none}.wx-sidebody{display:contents}
.wx-side{width:340px;flex:none;border-left:1px solid var(--line);padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;background:#1F2226}
.wx-sh{display:flex;align-items:center;gap:8px;font:700 1rem var(--display);letter-spacing:.04em;text-transform:uppercase;color:#C9CDD3}
.wx-sh .ic{width:18px;height:18px;color:var(--green)}
.wx-info ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.wx-info li{display:flex;gap:9px;align-items:flex-start;overflow-wrap:anywhere}.wx-info li .ic{width:18px;height:18px;color:var(--muted);margin-top:2px}

/* action cards (side panel + Pendientes) */
.wx-card{display:flex;flex-direction:column;gap:6px;background:var(--surf);border:1px solid var(--edge);border-radius:11px;padding:11px 12px;min-width:0}
.wx-card.t-warn{border-color:rgba(251,191,36,.45);background:linear-gradient(180deg,rgba(251,191,36,.07),rgba(251,191,36,0) 60%),var(--card)}
.wx-card.t-bad{border-color:rgba(255,92,92,.5)}.wx-card.t-ok{border-color:rgba(61,220,90,.35)}
.wx-ch{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wx-ch time{color:var(--muted);font:1rem var(--mono);white-space:nowrap}
.wx-kind{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#D5D8DD}.wx-kind .ic{width:18px;height:18px}
.wx-kind.warn{color:var(--warn)}.wx-kind.bad{color:var(--bad)}.wx-kind.ok{color:var(--ok)}
.wx-title{line-height:1.35}
.wx-det{margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.wx-ctl{display:flex;gap:8px;flex-wrap:wrap}
.wx-in{flex:1 1 180px;min-width:0;min-height:44px;padding:8px 11px;border-radius:9px;border:1px solid #3A3E44;background:#14161A;color:var(--ink);font:1rem var(--body)}
.wx-in:focus{outline:none;border-color:var(--warn);box-shadow:0 0 0 3px rgba(251,191,36,.18)}
.wx-cf{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.wx-cf:empty{display:none}
.wx-pend{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px;margin-top:12px;align-items:start}

/* 2026-10-26: was max-width:1280px - on wider windows the side panel (Qué falta / Explícame / Cliente) stayed open and
   squeezed the chat (Javier: 'why the hell does the action panel stay open all the time'). Now it always folds away
   behind the ⚡ / 👤 buttons. */
@media (max-width:100000px){
  .wx-body{flex-direction:column;position:relative;overflow:hidden}
  .wx-side{width:auto;order:-1;border-left:0;border-bottom:1px solid var(--line);padding:0;flex:none;overflow:visible;background:transparent}
  .wx-side:not(.has){display:none}
  .wx-sidetog{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:6px 14px;border:0;background:rgba(251,191,36,.10);color:var(--warn);font:1rem var(--body);cursor:pointer;text-align:left}
  .wx-sidetog.bad{background:rgba(255,92,92,.12);color:var(--bad)}.wx-sidetog.ok{background:rgba(61,220,90,.10);color:var(--ok)}
  .wx-sidetog span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-sidetog .ic{width:19px;height:19px}
  .wx-side.open .wx-sidetog .ic:last-child{transform:rotate(180deg)}
  .wx-sidebody{display:none}
  .wx-side{position:relative}.wx-sidebody>.wx-sh{display:none}
  .wx-side .wx-sidetog{display:none}.wx-side.has{border-bottom:0}
  .wx-actbtn{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:6px 13px;border:0;border-radius:999px;background:#C92A2A;color:#fff;font:700 1rem var(--body);cursor:pointer;box-shadow:0 0 0 3px rgba(255,92,92,.25)}
  .wx-actbtn .ic{width:19px;height:19px}.wx-actbtn[aria-expanded="true"]{background:#fff;color:#C42727}
  .wx-actbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
  .wx-side.open .wx-sidebody{display:flex;flex-direction:column;gap:10px;position:absolute;left:0;right:0;top:100%;z-index:5;max-height:min(65dvh,560px);overflow:auto;
    padding:12px;background:#1F2226;border-bottom:1px solid var(--line2);box-shadow:0 18px 30px rgba(0,0,0,.55)}
  .wx-side .wx-info{display:none}
}
@media (max-width:900px){
  .wx{grid-template-columns:1fr;height:auto;min-height:0}.wx-left{max-height:none}.wx-list{max-height:70vh}
  .wx .wx-chat{display:none}.wx.chat-open .wx-chat{display:flex}.wx.chat-open .wx-left{display:none}
  .wx-stats{justify-content:flex-start}.wx-pend{grid-template-columns:1fr}
  .wx-left{min-width:0}
  .wx-top{display:grid;grid-template-columns:1fr auto;gap:10px}.wx-top .wx-stats{grid-column:1 / -1;grid-row:3}
  .wx-top>.row{display:contents}.wx-top .wx-push{grid-column:1 / -1;grid-row:2;width:100%;min-height:48px}
  .wx-top [data-reload]{grid-column:2;grid-row:1;align-self:start}
  /* tabs = one clear 4-button bar: icon over label, active filled */
  .wx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border:0;margin:6px 0 12px;padding:5px;background:var(--surf);border:1px solid var(--edge);border-radius:14px}
  .wx-tabs .tab{position:relative;flex-direction:column;gap:3px;min-height:62px;padding:6px 2px;border:0;border-radius:10px;color:#D5D8DD;font-weight:600;white-space:nowrap}
  .wx-tabs .tab .ic{width:22px;height:22px;color:#AEB3BA}.wx-tabs .tl{display:none}.wx-tabs .ts{display:inline}
  .wx-tabs .tab.on{background:var(--green2);color:#04110A;border-image:none;border-bottom:0}.wx-tabs .tab.on .ic{color:#04110A}
  .wx-tabs .tab .count{position:absolute;top:4px;right:8px;margin:0;min-width:24px;height:24px;background:#C92A2A;color:#fff}
  .wx-left{min-height:calc(100dvh - 360px)}
  .wx-conv{padding:8px 10px}.wx-side{padding:10px}
  [data-view="whatsapp"]:has(.wx.chat-open) .wx-top,[data-view="whatsapp"]:has(.wx.chat-open) .wx-tabs,[data-view="whatsapp"]:has(.wx.chat-open) #pushMsg{display:none}
  .shell{grid-template-rows:auto 1fr}.side{align-self:start}   /* the top bar keeps its own height when the chat floats */
  .wx.chat-open .wx-chat{position:fixed;top:var(--topbar,58px);left:0;right:0;bottom:0;z-index:15;height:auto;min-height:0;border:0;border-radius:0}
  .wx-head{flex-wrap:nowrap;gap:8px;padding:8px 10px}.wx-head .wx-state,.wx-head [data-wa="tomar"]{display:none}
  .wx-head .wa-back{padding:8px 10px;background:#2B2E33;border-color:rgba(255,255,255,.3);color:#fff}.wx-head .wa-back .ic{stroke-width:2.6}.wx-head .wa-actions{flex-wrap:nowrap}
  .wx-toast{top:12px;bottom:auto;left:12px;right:12px;max-width:none}
  .wa-locked{padding:8px;gap:8px}.wa-locked p,.wa-locked>.ic,.wx-hint{display:none}.wa-locked .btn{flex:1}
  .wx.chat-open .wx-conv .wa-msgs{min-height:0}
}
@media (prefers-reduced-motion:no-preference){.wx-row,.wx-chip{transition:background .12s ease,border-color .12s ease}}

/* ---- Inicio (2026-10-17): WhatsApp first; compact numbers and integrations ---- */
.ini-wa{background:linear-gradient(135deg,rgba(5,255,9,.10),rgba(5,255,9,0) 45%),var(--surf);border:1px solid rgba(5,255,9,.35);border-radius:16px;padding:16px;margin:4px 0 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ini-wa-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ini-wa-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(5,255,9,.16);color:var(--green)}.ini-wa-ic .ic{width:30px;height:30px}
.ini-wa-t{flex:1 1 220px;min-width:0}.ini-wa-t h3{margin:0;font:700 1.35rem var(--display)}
.ini-open{display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;min-height:52px;padding:10px 22px;font-size:1.1rem}.ini-open .ic{width:22px;height:22px}
.ini-need{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 8px;padding:10px 14px;border-radius:11px}
.ini-need .ic{width:22px;height:22px}.ini-need a{margin-left:auto;color:inherit;font-weight:700}
.ini-need.hot{background:rgba(201,42,42,.18);border:1px solid rgba(255,92,92,.55);color:#FFD0D0}.ini-need.hot .ic{color:#FF7A7A}
.ini-need.ok{background:rgba(61,220,90,.10);border:1px solid rgba(61,220,90,.35);color:#C9FFD2}
.ini-wa-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px}.ini-wa-list:empty{display:none}
.ini-wa-list .wx-row{background:#4A515B;border:1px solid rgba(255,255,255,.32);text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.ini-wa-list .wx-row.hot{box-shadow:inset 4px 0 0 var(--warn),0 3px 10px rgba(0,0,0,.35)}
.ini-wa-list .wx-l2,.ini-wa-list .wx-l1 time,.ini-wa-list .wx-flags .ic{color:#DDE0E4}.ini-wa-list .wx-need.warn{color:#FFC93D}
.ini-wa-list .wx-av{background:#68707B;color:#fff}.ini-wa-list .wx-av.hot{background:rgba(251,191,36,.28);color:#FFD566}
.ini-wa-list .wx-row:hover{background:#565E69;border-color:rgba(5,255,9,.4)}
.ini-wa-list .wx-flags .ic{transform:rotate(180deg);color:#8F959C}
/* wide screens: WhatsApp card and the day's numbers side by side; without WhatsApp access the numbers take the row */
.ini-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start;margin:4px 0 0}
.ini-row>*{min-width:0}   /* a one-column grid must not grow to its widest line on phones */
.ini-row:has(#iniWa[hidden]){grid-template-columns:1fr}.ini-row:has(#iniWa[hidden]) .ini-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.ini-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ini-row .ini-wa{margin:0;padding:12px 14px}.ini-row .ini-wa-ic{width:42px;height:42px;border-radius:12px}.ini-row .ini-wa-ic .ic{width:24px;height:24px}
.ini-row .ini-wa-t h3{font-size:1.2rem}.ini-row .ini-open{min-height:44px;padding:8px 16px;font-size:1rem}
.ini-row .ini-need{margin:10px 0 6px;padding:7px 12px}.ini-row .ini-wa-list{grid-template-columns:1fr}
.ini-row .ini-wa-list .wx-row{padding:7px 10px}
.ini-row .ini-k{min-height:64px}
.ini-k{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;background:var(--surf);border:1px solid var(--edge);border-radius:12px}
.ini-k .ic{grid-row:1 / span 2;width:24px;height:24px;color:var(--green)}
.ini-k .s,.ini-open .s{display:none}
.ini-k b{font:700 1.3rem var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ini-k span{color:var(--muted)}
.ini-k.warn{border-color:rgba(251,191,36,.5)}.ini-k.warn .ic,.ini-k.warn b{color:var(--warn)}
.ini-sec{display:flex;align-items:baseline;gap:12px;margin:22px 0 10px}.ini-sec .sub{margin:0}
.ini-health{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ini-h{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;background:var(--surf);border:1px solid var(--edge);
  border-radius:12px;color:var(--ink);text-decoration:none}
a.ini-h:hover{border-color:rgba(5,255,9,.45);background:var(--surf2)}
.ltile.sm{grid-row:auto;width:40px;height:40px;border-radius:10px}.ltile.sm img{width:28px;height:28px}.ltile.sm.duo img{width:16px;height:16px}.ltile.sm>b{font-size:1.1rem}
.ini-h-t{display:flex;flex-direction:column;min-width:0}.ini-h-t span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-h-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:600}
.ini-h .dot{width:12px;height:12px;border-radius:50%;background:var(--muted)}
.ini-h.st-ok .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}.ini-h.st-ok .ini-h-st{color:var(--ok)}
.ini-h.st-alerta .dot{background:var(--warn);box-shadow:0 0 10px var(--warn)}.ini-h.st-alerta .ini-h-st{color:var(--warn)}
.ini-h.st-error .dot{background:var(--bad);box-shadow:0 0 10px var(--bad)}.ini-h.st-error .ini-h-st{color:var(--bad)}
.ini-h.st-trabajando .dot{background:var(--green)}.ini-h.st-trabajando .ini-h-st{color:var(--green)}
.ini-crons{margin:18px 0 8px;background:var(--surf);border:1px solid var(--edge);border-radius:12px;padding:0 12px}
.ini-crons summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-weight:700;color:#D5D8DD;list-style:none}
.ini-crons summary::-webkit-details-marker{display:none}.ini-crons summary .ic{width:20px;height:20px;color:var(--green)}
.ini-crons[open]{padding-bottom:12px}
@media (max-width:1100px){.ini-health{grid-template-columns:minmax(0,1fr)}.ini-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  /* phones: Inicio is a launcher - one compact WhatsApp block, then the numbers; the top bar already says "Inicio" */
  [data-view="inicio"]>header.vh{display:none}
  .ini-wa{padding:10px;margin:0 0 12px;border-radius:14px}
  .ini-wa-head{flex-wrap:nowrap;gap:10px}.ini-wa-ic{display:none}
  .ini-wa-t h3{font-size:1.15rem;white-space:nowrap}.ini-wa-t .muted{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ini-open{min-height:44px;padding:8px 14px;font-size:1rem;flex:none}.ini-open .l{display:none}.ini-open .s{display:inline}
  .ini-need{margin:10px 0 6px;padding:7px 10px;flex-wrap:nowrap}.ini-need b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ini-need a{margin-left:auto;white-space:nowrap}.ini-need a .l{display:none}
  .ini-wa-list{grid-template-columns:1fr;gap:4px}
  .ini-wa-list .wx-row{padding:7px 9px}
  .ini-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ini-k{display:block;padding:7px 9px}.ini-k .ic,.ini-k .l{display:none}
  .ini-k .s{display:block;color:var(--muted)}.ini-k b{display:block;font-size:1.1rem}
  .ini-h-st .w{display:none}.ini-h-st .dot{width:14px;height:14px}   /* phones: the coloured dot says it */
}

/* ---- WhatsApp: one-row header + chat rows as cards (2026-10-17, Javier: "too big, not organized, rows not separated") ---- */
.wx-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:12px}
.wx-top .wx-tabs{justify-self:center;margin:0}
.wx-stats{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:flex-start;flex:none;margin-top:2px}
.wx-stat{padding:0;border:0;background:none;color:var(--muted);gap:4px}.wx-stat b{font:700 1rem var(--body);color:var(--ink)}
.wx-stat.hot{background:none;border:0;color:var(--warn)}.wx-stat.hot b{color:var(--warn)}
.wx-stats .sep{color:#6F757D}
.wx{height:calc(100vh - 150px)}
.wx-list{gap:6px}
.wx-row{background:#4A515B;border:1px solid rgba(255,255,255,.32);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.wx-row:hover{background:#565E69;border-color:rgba(255,255,255,.4)}
.wx-row.hot{box-shadow:inset 4px 0 0 var(--warn),0 3px 10px rgba(0,0,0,.35)}
.wx-row.on{background:#3E5A46;border-color:#05FF09;box-shadow:inset 4px 0 0 #05FF09,0 3px 10px rgba(0,0,0,.35)}
.wx-row .wx-l2,.wx-row .wx-l1 time,.wx-row .wx-flags{color:#DDE0E4}.wx-row .wx-need.warn{color:#FFC93D}
.wx-row .wx-av{background:#68707B;color:#fff}.wx-row .wx-av.hot{background:rgba(251,191,36,.28);color:#FFD566}
@media (max-width:1500px){.wx-tabs .tl{display:none}.wx-tabs .ts{display:inline}.wx-title{max-width:300px}}
@media (max-width:1250px){.wx-top{grid-template-columns:minmax(0,1fr) auto}.wx-top .wx-tabs{grid-column:1 / -1;grid-row:2;justify-self:start}.wx-title{max-width:none}}
@media (max-width:900px){
  .wx-top{grid-template-columns:minmax(0,1fr) auto}
  .wx-top .wx-tabs{grid-column:1 / -1;grid-row:3;justify-self:stretch}
  .wx-top .wx-push{grid-row:2}
}

/* ---- density pass (2026-10-17, Javier: "everything is a bit too big, specially the chat list") ----
   text stays >= 16px; the space comes out of padding, avatars, control heights and column widths */
.wx-row{grid-template-columns:34px minmax(0,1fr) auto;gap:9px;padding:6px 9px;border-radius:9px}
.wx-row .wx-av,.wx-head .wx-av{width:34px;height:34px}
.wx-l1 time{font:1rem var(--body);font-variant-numeric:tabular-nums}
.wx-list{gap:5px}
.wx-need .ic,.wx-flags .ic{width:16px;height:16px}
@media (min-width:901px){
  .wx{grid-template-columns:clamp(310px,22vw,340px) minmax(0,1fr);gap:10px;height:calc(100vh - 130px)}
  .wx-left{padding:8px;gap:6px}
  .wx-search input{min-height:38px}
  .wx-chip{min-height:32px;padding:2px 9px}
  .wx-top{margin-bottom:10px}.wx-top h2{font-size:1.45rem}
  .wx-tabs{padding:4px;gap:4px}.wx-tabs .tab{min-height:38px;padding:5px 12px}
  .wx-top .btn{min-height:40px;padding:6px 14px}
  .wx-head{padding:7px 12px;gap:10px}.wx-head .btn{min-height:40px;padding:6px 14px}.wx-state{padding:3px 10px}
  .wx-conv{padding:8px 12px 10px;gap:6px}
  .wx-side{width:300px;padding:10px;gap:8px}
  .wx-card{padding:9px 10px;gap:5px}.wx-ctl .btn,.wx-in{min-height:40px}.btn.sm{min-height:34px;padding:4px 10px}
  .wa-locked{padding:8px 12px;gap:10px}.wa-locked .btn{min-height:40px}
}
/* chat-list filters: the four always fit in one row (Javier: "after ASESOR it is cut out") - no icons, equal share */
#waFilters{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:4px;overflow:visible}
#waFilters .wx-chip{justify-content:center;padding:2px 6px;min-width:0}
#waFilters .wx-chip .ic{display:none}
#waFilters .wx-chip .n{min-width:20px;padding:0 5px}

/* collapsed menu opened by hover: drawn over the page, the content keeps its 68px column */
@media (min-width:901px){
  .shell.overlay{grid-template-columns:68px minmax(0,1fr)}.shell.overlay>main{grid-column:2}
  .shell.overlay .side{position:fixed;left:0;top:0;bottom:0;width:264px;z-index:70;background:#16181C;border-right:1px solid rgba(5,255,9,.35);
    box-shadow:14px 0 40px rgba(0,0,0,.6)}
  /* the expand button in the slim rail: visible, not a grey glyph */
  .shell.rail .rail-btn{background:rgba(5,255,9,.14);color:#8CFF8E;border:1px solid rgba(5,255,9,.45)}
  .shell.rail .rail-btn:hover{background:rgba(5,255,9,.24);color:#fff}
}
/* Probar Nova + Reglas de Nova on the same surfaces (Javier 2026-10-17: contrast) */
.np-chat,.np-tools,.rules-ed{background:var(--surf);border-color:var(--edge);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.rules-core{background:var(--surf);border:1px solid var(--edge);border-radius:12px;padding:6px 8px}
.rules-core pre{background:#1B1E22;border-color:rgba(255,255,255,.18);color:#C9CDD3;margin:8px 0 2px}
#rulesText,#npText{background:#1B1E22;border:1px solid rgba(255,255,255,.24);color:var(--ink)}
#rulesText:focus,#npText:focus{outline:none;border-color:var(--green2);box-shadow:0 0 0 3px rgba(5,255,9,.15)}
.np-chat .wa-msgs{background:#1F2226;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px}
#rulesMsg{color:var(--warn)}#rulesMsg .ok,#rulesMsg.ok{color:var(--ok)}

/* conversation status (2026-10-18) */
.wx-est{display:inline-block;padding:0 7px;border-radius:999px;font-weight:600;background:rgba(255,255,255,.1);color:#E8EAED;white-space:nowrap}
.wx-est.e-nuevo{background:rgba(5,255,9,.16);color:#9BFF9D}.wx-est.e-cotizado{background:rgba(184,140,255,.2);color:#DCC6FF}
.wx-est.e-esperando{background:rgba(251,191,36,.2);color:#FFE08A}.wx-estsel.e-esperando{border-color:rgba(251,191,36,.6)}
.wx-est.e-vendido{background:rgba(61,220,90,.22);color:#B6FFC4}.wx-est.e-perdido{background:rgba(255,92,92,.2);color:#FFC2C2}
.wx-est.e-cerrado{background:rgba(255,255,255,.08);color:#C9CDD3}
.wx-estf{width:100%;min-height:36px;padding:4px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:#1B1E22;color:var(--ink);font:1rem var(--body)}
.wx-estsel{min-height:40px;max-width:210px;padding:4px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:#2B2F35;color:var(--ink);font:600 1rem var(--body)}
.wx-estsel.e-vendido{border-color:rgba(61,220,90,.6)}.wx-estsel.e-perdido{border-color:rgba(255,92,92,.6)}.wx-estsel.e-cotizado{border-color:rgba(251,191,36,.6)}
@media (max-width:900px){.wx-head .wx-estsel{max-width:120px}}
@media (min-width:901px) and (max-width:1500px){.wx-head{flex-wrap:nowrap}.wx-head .wx-state{display:none}.wx-head .wx-estsel{max-width:165px}
  .wx-head .wa-actions{flex-wrap:nowrap}.wx-head .wa-actions .btn.primary{padding:6px 10px}}

/* chat ID + customer form (2026-10-18) */
.wx-cid{font:600 1rem var(--mono);color:#AEB3BA}
.wx-sh .wx-editlink{margin-left:auto;text-transform:none;letter-spacing:0;font-family:var(--body)}
.wx-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}.wx-form label{display:flex;flex-direction:column;gap:4px;color:#C9CDD3;font-weight:600}
.wx-form textarea.wx-in{resize:vertical;min-height:70px}
.wx-nota{margin:8px 0 0;padding:8px 10px;border-radius:9px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);color:#FFE6A6;white-space:pre-wrap}
.wx-editbtn{display:none}
@media (max-width:100000px){.wx-editbtn{display:inline-flex}.wx-side.open .wx-sidebody .wx-info{display:block}}
.wx-form .wx-in{flex:none;min-height:42px;width:100%}.wx-form textarea.wx-in{min-height:72px}
@media (max-width:900px){.wx-cidh{display:none}.wx-who .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

.app-ver{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Reglas de Nova: base de conocimiento por secciones (2026-10-18) ---- */
.kb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kb-top>p{margin:0;flex:1 1 420px}
.kb-stats{display:flex;gap:8px;flex-wrap:wrap}
.kb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surf2);border:1px solid var(--edge);color:#DDE1E6;font-size:1rem;white-space:nowrap}
.kb-chip .ic{width:18px;height:18px}
.kb-chip.ok{border-color:rgba(61,220,90,.55);color:#BFF5C9}.kb-chip.ok .ic{color:var(--ok)}
.kb-chip.bad{border-color:rgba(255,92,92,.6);color:#FFC9C9}.kb-chip.bad .ic{color:var(--bad)}
.kb{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:14px;align-items:start}
.kb-list{background:var(--surf);border:1px solid var(--edge);border-radius:12px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  position:sticky;top:12px;max-height:calc(100vh - 140px);overflow:auto}
.kb-list-h{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 8px}
.kb-list-h h3{margin:0;font-size:1.05rem}
.kb-list-h .btn{min-height:38px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px}
.kb-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kb-it{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;cursor:pointer;
  background:var(--surf2);border:1px solid rgba(255,255,255,.12);border-left:3px solid transparent;color:var(--ink);font:inherit;font-size:1rem}
.kb-it:hover{background:var(--surf3);border-color:rgba(255,255,255,.22)}
.kb-it.on{background:#1F2A20;border-color:rgba(5,255,9,.45);border-left-color:var(--green)}
.kb-it:focus-visible{outline:2px solid var(--green2);outline-offset:2px}
.kb-t{font-weight:600;line-height:1.3}
.kb-s{color:#C3C8CF;font-size:1rem;line-height:1.3}
.kb-it.off .kb-t{color:#C3C8CF;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.kb-off{display:inline-block;padding:0 8px;border-radius:999px;background:rgba(251,191,36,.16);color:#FDE3A0;border:1px solid rgba(251,191,36,.45)}
.kb-ed{gap:10px}
.kb-ed-h{display:flex;gap:10px;align-items:center}
#kbTitle{flex:1;min-width:0;min-height:44px;padding:8px 12px;font:600 1.05rem var(--body);color:var(--ink);background:#1B1E22;border:1px solid rgba(255,255,255,.24);border-radius:9px}
#kbBody{min-height:52vh;width:100%;resize:vertical;padding:12px;font-size:1rem;line-height:1.55;color:var(--ink);background:#1B1E22;border:1px solid rgba(255,255,255,.24);border-radius:9px}
#kbTitle:focus,#kbBody:focus{outline:none;border-color:var(--green2);box-shadow:0 0 0 3px rgba(5,255,9,.15)}
#kbTitle[readonly],#kbBody[readonly]{opacity:.9}
#kbCount{white-space:nowrap}
.kb-meta{margin:0}
#kbHist{min-height:42px;max-width:100%}
@media (max-width:900px){
  .kb{grid-template-columns:minmax(0,1fr)}
  .kb-list{position:static;max-height:42vh}
  #kbBody{min-height:55vh}
  .kb-ed .row .btn,#kbHist{flex:1 1 100%;min-height:46px}
  .kb-ed-h{flex-wrap:wrap}#kbCount{flex:1 1 100%}
}

/* ---- Chat rows coloured by status (Javier 2026-10-18). Rail + tint; text stays >= 4.5:1. No blue. ---- */
.wx-row[class*=" st-"]{box-shadow:inset 5px 0 0 var(--rail),0 3px 10px rgba(0,0,0,.35);background:var(--tint);border-color:var(--edge-st)}
.wx-row[class*=" st-"]:hover{background:var(--tint-h)}
.wx-row.st-asesor{--rail:#FBBF24;--tint:#5C4F26;--tint-h:#6A5B2C;--edge-st:rgba(251,191,36,.65)}
.wx-row.st-nuevo{--rail:#05FF09;--tint:#2E5035;--tint-h:#355C3D;--edge-st:rgba(5,255,9,.5)}
.wx-row.st-en_progreso{--rail:#AEB4BC;--tint:#4A515B;--tint-h:#565E69;--edge-st:rgba(255,255,255,.32)}
.wx-row.st-cotizado{--rail:#B88CFF;--tint:#47395F;--tint-h:#52436D;--edge-st:rgba(184,140,255,.6)}
.wx-row.st-esperando{--rail:#FBBF24;--tint:#4A3F1F;--tint-h:#564A25;--edge-st:rgba(251,191,36,.55)}
.wx-row.st-vendido{--rail:#3DDC5A;--tint:#1F5A35;--tint-h:#25663D;--edge-st:rgba(61,220,90,.7)}
.wx-row.st-perdido{--rail:#FF5C5C;--tint:#5A2E33;--tint-h:#66353B;--edge-st:rgba(255,92,92,.6)}
/* cerrado = "parked": flat and see-through (no fill, no lift, dashed edge) so it never reads like an active chat */
.wx-row.st-cerrado{--rail:rgba(160,166,174,.45);--tint:rgba(255,255,255,.025);--tint-h:rgba(255,255,255,.07);--edge-st:rgba(255,255,255,.2)}
.wx-row.st-cerrado[class*=" st-"]{border-style:dashed;box-shadow:inset 3px 0 0 var(--rail)}
.wx-row.st-cerrado .wx-l1 b{color:#B9BEC5;font-weight:500}.wx-row.st-cerrado .wx-l2,.wx-row.st-cerrado time,.wx-row.st-cerrado .wx-flags{color:#A3A9B1}
.wx-row.st-cerrado .wx-av{background:transparent;border:1px dashed rgba(255,255,255,.3);color:#A3A9B1}
.wx-row.st-cerrado .wx-est{background:transparent;border-color:rgba(255,255,255,.22);color:#A3A9B1;font-weight:500}
.wx-row.st-cerrado:hover .wx-l1 b{color:#ECEEF0}
/* "needs action" keeps its amber marker on top of any status; the open chat keeps the green outline */
.wx-row.hot[class*=" st-"]{box-shadow:inset 5px 0 0 var(--rail),inset -4px 0 0 var(--warn),0 3px 10px rgba(0,0,0,.35)}
.wx-row.on[class*=" st-"]{border-color:#05FF09;outline:2px solid #05FF09;outline-offset:-2px}
/* status pill inside the row matches the rail */
.wx-row[class*=" st-"] .wx-est{border:1px solid var(--rail);background:rgba(0,0,0,.28);color:#F2F4F6}

/* ♻️ Retomado (2026-10-18): a Perdido / Cerrado chat whose customer wrote again - warm lead, pink-magenta (no blue) */
.wx-row.st-retomado{--rail:#FF6FB5;--tint:#55304A;--tint-h:#623756;--edge-st:rgba(255,111,181,.6)}
.wx-est.e-retomado{background:rgba(255,111,181,.2);color:#FFC8E3}
.wx-ret{margin:8px 0 0;padding:8px 10px;border-radius:9px;background:rgba(255,111,181,.12);border:1px solid rgba(255,111,181,.45);color:#F6DCE9;line-height:1.45}

/* ---- WhatsApp view (2026-10-18): the chat looks like WhatsApp dark mode on the customer's phone ----
   WhatsApp palette: wall #0B141A, received #202C33, sent #005C4B, text #E9EDEF. Times lighter than WhatsApp's own grey
   so they keep >= 4.5:1 on the green bubble; every text >= 16px (house rule). Sender label is for staff only. */
.wa-msgs.wa-skin{background-color:#101113;gap:2px;padding:12px 4% 16px;border-radius:10px;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.025) 1px,transparent 1.4px);
  background-size:26px 26px,26px 26px;background-position:0 0,13px 13px}
.wb-grp{display:flex;flex-direction:column;max-width:min(78%,520px);margin-top:2px}
.wb-grp.in{align-self:flex-start}.wb-grp.out{align-self:flex-end}
.wb-grp:has(.wb.first){margin-top:10px}
.wb{position:relative;padding:6px 9px 7px;border-radius:8px;color:#E9EDEF;font-size:1rem;line-height:1.42;white-space:normal;
  overflow-wrap:anywhere;box-shadow:0 1px .5px rgba(0,0,0,.35)}
.wb.in{background:#30353C;border:1px solid rgba(255,255,255,.22);color:#F4F6F8}.wb.out{background:#0F2A1A;border:1px solid rgba(5,255,9,.22)}
.wb.out.r-agent{background:#2B2312;border-color:rgba(251,191,36,.5)}
.wb.first.in{border-top-left-radius:0}.wb.first.out{border-top-right-radius:0}
.wb.first.in::before,.wb.first.out::before{content:"";position:absolute;top:0;width:0;height:0;border-top:10px solid}
.wb.first.in::before{left:-8px;border-left:8px solid transparent;border-top-color:#30353C}
.wb.first.out::before{right:-8px;border-right:8px solid transparent;border-top-color:#0F2A1A}
.wb.first.out.r-agent::before{border-top-color:#2B2312}
.wb-t{white-space:pre-wrap}.wb-t b{font-weight:700;color:#fff}
.wb-who{display:block;font-weight:600;color:#7CFF7E;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb.r-agent .wb-who{color:#FFD98A}
.wb-who i{font:700 1rem var(--mono);font-style:normal;color:#1A1405;background:#FBBF24;border-radius:5px;padding:0 6px;margin-right:6px}
.wb-time{float:right;margin:6px 0 -3px 14px;color:#BCC1C8;font-size:1rem;line-height:1;white-space:nowrap}
.wb.only-media .wb-time{position:absolute;right:12px;bottom:10px;margin:0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.wb-img{display:block;margin:-3px -6px 6px;border-radius:6px;overflow:hidden;background:#111B21}
.wb.only-media .wb-img{margin:-3px -6px -4px}
.wb-img img{display:block;width:100%;max-width:330px;max-height:340px;object-fit:cover}
.wb-img.ph{padding:22px 14px;text-align:center;color:#C6CDD1;border:1px dashed rgba(255,255,255,.18)}
.wb-img.ph span{display:block;color:#A9B2B7}
.wb-doc{display:flex;align-items:center;gap:10px;margin:-2px -4px 6px;padding:10px 12px;border-radius:6px;background:rgba(0,0,0,.22);
  color:#E9EDEF;text-decoration:none;white-space:normal}
.wb-doc:hover{background:rgba(0,0,0,.32)}
.wb-pdf{flex:none;font:700 1rem var(--mono);color:#fff;background:#E5484D;border-radius:4px;padding:6px 6px}
.wb-docn{display:flex;flex-direction:column;min-width:0}.wb-docn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-docn span{color:rgba(233,237,239,.78)}
.wb-btns{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.wb-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:8px;font-weight:600;color:#8FE6C2;
  box-shadow:0 1px .5px rgba(0,0,0,.35)}
.wb-grp.out .wb-btn{background:#0F2A1A;border:1px solid rgba(5,255,9,.22);color:#7CFF7E}.wb-grp.in .wb-btn{background:#30353C;border:1px solid rgba(255,255,255,.22)}
.wb-btn .ic{width:18px;height:18px}
.wb-day{align-self:center;margin:12px 0 6px}
/* one floating date while scrolling (WhatsApp style, 2026-10-24); zero height so it never moves the messages */
.wb-float{position:sticky;top:6px;height:0;align-self:center;z-index:3;margin:0}
.wb-float span{position:relative;top:0}
.wb-float[hidden]{display:none!important}
.wb-day span{display:inline-block;padding:5px 12px;border-radius:8px;background:#1F2226;border:1px solid rgba(255,255,255,.1);color:#D5D9DE;box-shadow:0 1px .5px rgba(0,0,0,.35);
  text-transform:capitalize}
.wb-t audio,.wb .wa-audio{max-width:100%}
@media (max-width:900px){.wb-grp{max-width:88%}.wa-msgs.wa-skin{padding:10px 10px 14px}}

/* ---- Answer Nova from Integra (2026-10-18): she continues with the customer and learns it ---- */
.wx-teach{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;border-radius:10px;background:rgba(5,255,9,.06);border:1px solid rgba(5,255,9,.28)}
.wx-teach textarea.wx-in{min-height:64px;resize:vertical}
.wx-teach-o{display:flex;flex-direction:column;gap:4px;color:#DDE1E6}
.wx-teach-o label{display:flex;gap:8px;align-items:center;cursor:pointer}
.wx-teach-o input{width:18px;height:18px;accent-color:#04C707}
.wx-teach-o input:disabled+*,.wx-teach-o label:has(input:disabled){color:#9AA0A8;cursor:not-allowed}
.wx-teach .btn{align-self:flex-start}
.wx-teachd{margin-top:8px}
.wx-teachd>summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:#7CFF7E;font-weight:600;list-style:none;padding:6px 10px;
  border-radius:8px;border:1px solid rgba(5,255,9,.3)}
.wx-teachd>summary::-webkit-details-marker{display:none}
.wx-teachd>summary .ic{width:18px;height:18px}
.wx-teachd[open]>summary{margin-bottom:4px}

/* answer-Nova box: a little light too */
.wx-teach{background:linear-gradient(180deg,rgba(5,255,9,.10),rgba(5,255,9,.04));border-color:rgba(61,220,90,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.wx-teach textarea.wx-in{background:#15181B;border-color:rgba(61,220,90,.35)}
.wx-teach textarea.wx-in:focus{border-color:#3DDC5A;box-shadow:0 0 0 3px rgba(5,255,9,.16);outline:none}

/* ---- Chat modes (Javier 2026-10-18): A = WhatsApp claro (default), C = Grafito limpio (dark). One set of tokens per mode;
   every bubble, tail, button, separator and time reads them. Contrast: all text >= 4.5:1 in both modes. ---- */
.wa-msgs.wa-skin{--wall:#EFEAE2;--dots:rgba(0,0,0,.05);--in-bg:#FFFFFF;--in-fg:#111B21;--out-bg:#D9FDD3;--out-fg:#111B21;
  --ag-bg:#FFF1C2;--ag-fg:#111B21;--edge:transparent;--rail:transparent;--ag-rail:transparent;--who:#0B7A2E;--ag-who:#7A4F00;
  --time:#54656F;--btn-bg:#FFFFFF;--btn-fg:#027E3B;--btn-edge:transparent;--day-bg:#FFFFFF;--day-fg:#3B4A54;--strong:#0B141A;
  --shadow:0 1px .5px rgba(11,20,26,.13);--doc-bg:rgba(11,20,26,.06)}
.wa-msgs.wa-skin.chat-dark{--wall:#15171A;--dots:rgba(255,255,255,.035);--in-bg:#2E333A;--in-fg:#ECEEF0;--out-bg:#24282E;--out-fg:#ECEEF0;
  --ag-bg:#24282E;--ag-fg:#ECEEF0;--edge:rgba(255,255,255,.1);--rail:#3DDC5A;--ag-rail:#FBBF24;--who:#5DFF6A;--ag-who:#FFD34D;
  --time:#AEB4BC;--btn-bg:#202328;--btn-fg:#7CFF7E;--btn-edge:rgba(61,220,90,.4);--day-bg:#202328;--day-fg:#D5D9DE;--strong:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.35);--doc-bg:rgba(0,0,0,.25)}
.wa-msgs.wa-skin{background-color:var(--wall);background-image:radial-gradient(var(--dots) 1px,transparent 1.4px);background-size:22px 22px;background-position:0 0}
.wa-skin .wb{box-shadow:var(--shadow);border:1px solid var(--edge)}
.wa-skin .wb.in{background:var(--in-bg);color:var(--in-fg)}
.wa-skin .wb.out{background:var(--out-bg);color:var(--out-fg);border-left:3px solid var(--rail)}
.wa-skin .wb.out.r-agent{background:var(--ag-bg);color:var(--ag-fg);border-left-color:var(--ag-rail)}
.wa-skin .wb.first.in::before{border-top-color:var(--in-bg)}
.wa-skin .wb.first.out::before{border-top-color:var(--out-bg)}
.wa-skin .wb.first.out.r-agent::before{border-top-color:var(--ag-bg)}
.wa-skin .wb-t b{color:var(--strong)}
.wa-skin .wb-who{color:var(--who)}
.wa-skin .wb.r-agent .wb-who{color:var(--ag-who)}
.wa-skin .wb-time,.wa-skin .wb.out .wb-time,.wa-skin .wb.out.r-agent .wb-time{color:var(--time)}
.wa-skin .wb.only-media .wb-time{color:#fff}
.wa-skin .wb-grp .wb-btn,.wa-skin .wb-grp.out .wb-btn,.wa-skin .wb-grp.in .wb-btn{background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-edge);box-shadow:var(--shadow)}
.wa-skin .wb-day span{background:var(--day-bg);color:var(--day-fg);border:1px solid var(--edge);box-shadow:var(--shadow)}
.wa-skin .wb-doc{background:var(--doc-bg);color:inherit}
.wa-skin .wb-docn span{color:var(--time)}
.wa-skin .wb-img.ph{color:var(--time);border-color:var(--edge)}
.wa-msgs.wa-skin>.muted{color:var(--time)}
/* light / dark switch in the chat header */
#waTheme .ic{width:20px;height:20px}
.wa-skin .wb.out,.wa-skin .wb.out.r-agent{border-top-color:var(--edge);border-right-color:var(--edge);border-bottom-color:var(--edge)}

/* ══════════════ Light theme for the whole panel (Javier 2026-10-18: "the same light theme on the entire Integra UI") ══════════════
   Same look as the WhatsApp claro chat: warm off-white page, white cards, ink #111B21, grey #54656F, dark green #0B7A2E for green text
   (pure #05FF09 is 1.4:1 on white, so it stays for fills, rails and the logo only). Dark mode = everything above, untouched.
   Every text colour below checked >= 4.5:1 on its own surface; input borders >= 3:1. No blue. */
html[data-theme="light"]{
  --bg:#F3F4F1;--panel:#FFFFFF;--card:#FFFFFF;--line:rgba(17,27,33,.10);--line2:rgba(17,27,33,.20);
  --ink:#111B21;--muted:#54656F;--blue:#0B7A2E;--green:#0B7A2E;--green2:#04C707;
  --ok:#13803A;--warn:#8A5A00;--bad:#C62828;--work:#54656F;--aqua:#4F7300;
  --surf:#FFFFFF;--surf2:#F5F6F3;--surf3:#ECEFEA;--edge:rgba(17,27,33,.16);
  --field:#FFFFFF;--field-edge:#8C969C;--lift:0 1px 2px rgba(11,20,26,.07),0 8px 24px -16px rgba(11,20,26,.28);
  color-scheme:light}
html[data-theme="light"] body{background:radial-gradient(1100px 620px at -5% -15%,rgba(4,199,7,.09),transparent 60%),
  radial-gradient(900px 560px at 105% -10%,rgba(198,255,77,.12),transparent 60%),var(--bg)}
html[data-theme="light"] body::before{background-image:linear-gradient(rgba(17,27,33,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,27,33,.035) 1px,transparent 1px)}
html[data-theme="light"] ::placeholder{color:#6B7780}

/* controls */
html[data-theme="light"] .btn{background:#FFFFFF;border-color:var(--line2);color:var(--ink)}
html[data-theme="light"] .btn:hover{border-color:#04C707}
html[data-theme="light"] .btn.ghost{background:transparent}
html[data-theme="light"] .btn.ghost:hover{background:rgba(4,199,7,.10)}
html[data-theme="light"] .btn.primary{background:linear-gradient(180deg,#22F026,#04C707);color:#04110A;border:0;box-shadow:0 4px 14px -6px rgba(4,160,7,.55)}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea,
html[data-theme="light"] .wa-send textarea,html[data-theme="light"] #rulesText,html[data-theme="light"] #npText,
html[data-theme="light"] #kbTitle,html[data-theme="light"] #kbBody,html[data-theme="light"] .wx-in,html[data-theme="light"] .wx-estf,
html[data-theme="light"] .wx-estsel,html[data-theme="light"] .wx-teach textarea.wx-in,html[data-theme="light"] .na-aut{
  background:var(--field);color:var(--ink);border-color:var(--field-edge)}
html[data-theme="light"] .wx-search input{background:transparent}
html[data-theme="light"] .wx-search{background:var(--surf2);border-color:var(--line2)}
html[data-theme="light"] .iconbtn{color:var(--ink)}
html[data-theme="light"] .iconbtn:hover{border-color:#04C707;color:#0B7A2E}
html[data-theme="light"] :focus-visible{outline-color:#0B7A2E}

/* login */
html[data-theme="light"] .login{background:radial-gradient(520px 420px at 50% 45%,rgba(4,199,7,.12),transparent 70%)}
html[data-theme="light"] .login-card{background:#FFFFFF;border-color:var(--line2);box-shadow:0 30px 70px -28px rgba(11,20,26,.35),0 0 0 1px rgba(4,199,7,.08)}
html[data-theme="light"] .login-brand .co,html[data-theme="light"] .brand .b1{color:var(--ink)}
html[data-theme="light"] .login-card .muted,html[data-theme="light"] .login-card p{color:var(--muted)}
html[data-theme="light"] .login-card label{color:var(--ink)}
html[data-theme="light"] .login-card input{background:#FFFFFF;border-color:var(--field-edge);color:var(--ink)}
html[data-theme="light"] .login-card input:focus{border-color:#04C707;box-shadow:0 0 0 3px rgba(4,199,7,.22)}
html[data-theme="light"] .login-card .btn.ghost{border-color:var(--field-edge);color:var(--ink)}
html[data-theme="light"] .login-card .msg{color:var(--bad)}
html[data-theme="light"] .local summary{border-color:var(--field-edge);color:var(--ink)}
html[data-theme="light"] .secret{background:var(--surf2);border-color:var(--field-edge);color:var(--ink)}

/* menu */
html[data-theme="light"] .side{background:linear-gradient(180deg,#FFFFFF,#FAFBF9);border-right:1px solid var(--line2);box-shadow:1px 0 0 rgba(4,199,7,.08)}
html[data-theme="light"] .logo-txt .co .b{color:var(--ink)}
html[data-theme="light"] nav .grp,html[data-theme="light"] nav .grp:has(+ a.gv),html[data-theme="light"] nav .grp:has(+ a.go),
html[data-theme="light"] nav .grp:has(+ a.gi){color:#3B4A54}
html[data-theme="light"] nav a .ic{background:rgba(17,27,33,.05)}
html[data-theme="light"] nav a.gv .ic,html[data-theme="light"] nav a.go .ic{color:#0B7A2E;background:rgba(4,199,7,.12)}
html[data-theme="light"] nav a.gi .ic{color:#4F7300;background:rgba(150,200,40,.18)}
html[data-theme="light"] nav a.ga .ic,html[data-theme="light"] nav a.gh .ic{color:#3B4A54;background:rgba(17,27,33,.06)}
html[data-theme="light"] nav a:hover{background:linear-gradient(90deg,rgba(4,199,7,.10),rgba(4,199,7,0))}
html[data-theme="light"] nav a.on{background:linear-gradient(90deg,rgba(4,199,7,.18),rgba(4,199,7,.05));color:#0A5C23}
html[data-theme="light"] nav a.on::before{box-shadow:none}
html[data-theme="light"] .rail-btn:hover{background:var(--surf3);color:var(--ink)}
html[data-theme="light"] .avatar,html[data-theme="light"] .ucard .avatar.live{box-shadow:0 0 0 2px #FFFFFF,0 0 0 3px rgba(4,199,7,.45)}
@media (max-width:900px){html[data-theme="light"] .side{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line2)}}
@media (min-width:901px){
  html[data-theme="light"] .shell.overlay .side{background:#FFFFFF;border-right-color:rgba(4,199,7,.45);box-shadow:14px 0 40px rgba(11,20,26,.18)}
  html[data-theme="light"] .shell.rail .rail-btn{background:rgba(4,199,7,.12);color:#0B7A2E;border-color:rgba(4,199,7,.45)}
  html[data-theme="light"] .shell.rail .rail-btn:hover{background:rgba(4,199,7,.2);color:#0A5C23}
}
.me .iconbtn+.iconbtn{margin-left:0}

/* cards and surfaces */
html[data-theme="light"] .sub{color:#3B4A54}
html[data-theme="light"] .kpi,html[data-theme="light"] .hcard,html[data-theme="light"] .order,html[data-theme="light"] .card,
html[data-theme="light"] .rcard,html[data-theme="light"] .ucard,html[data-theme="light"] .sso-admin{background:#FFFFFF;border-color:var(--line2);box-shadow:var(--lift)}
html[data-theme="light"] .kpi b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
html[data-theme="light"] .rcard em,html[data-theme="light"] .invite{color:#3B4A54}
html[data-theme="light"] .ltile{box-shadow:inset 0 0 0 1px rgba(17,27,33,.10)}
html[data-theme="light"] .step{background:var(--surf2)}
html[data-theme="light"] .chip.on{background:rgba(4,199,7,.12)}
html[data-theme="light"] .log{background:#FAFBF9}
html[data-theme="light"] .ln:hover,html[data-theme="light"] .act:hover{background:var(--surf3)}
html[data-theme="light"] .ln .t{color:#5F6B73}
html[data-theme="light"] .bars i{background:#D5DADD}
html[data-theme="light"] .tab.on{color:var(--ink)}
html[data-theme="light"] .more .menu{background:#FFFFFF;border-color:var(--line2);box-shadow:0 20px 40px -16px rgba(11,20,26,.35)}
html[data-theme="light"] .app-chip{background:rgba(4,199,7,.10);border-color:rgba(4,199,7,.35);color:#0A5C23}
html[data-theme="light"] .acc fieldset:nth-of-type(n) legend{color:#0B7A2E}
html[data-theme="light"] [data-acc].on{color:#0A5C23}
html[data-theme="light"] .ini-wa,html[data-theme="light"] .wx-left,html[data-theme="light"] .kb-list,
html[data-theme="light"] .np-chat,html[data-theme="light"] .np-tools,html[data-theme="light"] .rules-ed{box-shadow:var(--lift)}
html[data-theme="light"] .ini-need.hot{background:rgba(229,72,77,.10);border-color:rgba(198,40,40,.45);color:#8E1B1B}
html[data-theme="light"] .ini-need.hot .ic{color:var(--bad)}
html[data-theme="light"] .ini-need.ok{background:rgba(19,128,58,.08);border-color:rgba(19,128,58,.35);color:#0E5F2A}
html[data-theme="light"] .ini-crons summary{color:var(--ink)}
html[data-theme="light"] .rules-core pre{background:var(--surf2);border-color:var(--line2);color:#3B4A54}
html[data-theme="light"] .np-chat .wa-msgs{background:#EFEAE2;border-color:var(--line)}
html[data-theme="light"] .wa-btns{border-top-color:var(--line)}
html[data-theme="light"] .wa-btn{background:#FFFFFF;color:#027E3B;box-shadow:0 1px .5px rgba(11,20,26,.13)}
html[data-theme="light"] .wa-btn:hover{background:#F0FBF2}
html[data-theme="light"] .wa-btns.menu .wa-btn{color:var(--ink);background:#FFFFFF}
html[data-theme="light"] .msg-b.in{background:#FFFFFF;border-color:var(--line);color:var(--ink)}
html[data-theme="light"] .msg-b.out{background:#D9FDD3;border-color:transparent;color:var(--ink)}
html[data-theme="light"] .msg-b.r-agent{background:#FFF1C2;border-color:transparent}
html[data-theme="light"] .msg-b.r-agent .who{color:#7A4F00}
html[data-theme="light"] .msg-b.r-assistant .who{color:#0B7A2E}

/* WhatsApp section */
html[data-theme="light"] .wx-tabs .tab{color:#3B4A54}
html[data-theme="light"] .wx-tabs .tab .ic{color:#54656F}
html[data-theme="light"] .wx-tabs .tab:hover{background:var(--surf3);color:var(--ink)}
html[data-theme="light"] .wx-tabs .tab.on{background:#04C707;color:#04110A}
html[data-theme="light"] .wx-tabs .tab.on .ic{color:#04110A}
html[data-theme="light"] .wx-push{background:#F5B800;color:#1B1300}
html[data-theme="light"] .wx-push:hover{background:#FFC929}
html[data-theme="light"] .wx-stats .sep{color:#8A949B}
html[data-theme="light"] .wx-toast{background:#E9F9EC;border-color:rgba(4,199,7,.5);color:#0B3D18;box-shadow:0 12px 32px rgba(11,20,26,.18)}
html[data-theme="light"] .wx-toast.bad{background:#FDECEC;border-color:rgba(198,40,40,.45);color:#7A1414}
html[data-theme="light"] .wx-chip:hover{border-color:var(--field-edge)}
html[data-theme="light"] .wx-chip.on{background:rgba(4,199,7,.12);border-color:rgba(4,199,7,.55);color:#0A5C23}
html[data-theme="light"] .wx-chat{background:#FFFFFF}
html[data-theme="light"] .wx-empty .ic{color:#8A949B}
html[data-theme="light"] .wx-state{background:rgba(4,199,7,.12);color:#0A5C23}
html[data-theme="light"] .wx-state.agent{background:rgba(17,27,33,.07);color:var(--ink)}
html[data-theme="light"] .wx-side{background:#F7F8F6}
html[data-theme="light"] .wx-sh,html[data-theme="light"] .wx-kind,html[data-theme="light"] .wx-form label,html[data-theme="light"] .wx-teach-o{color:#3B4A54}
html[data-theme="light"] .wx-cid{color:var(--muted)}
html[data-theme="light"] .wx-nota{background:rgba(251,191,36,.14);border-color:rgba(214,158,0,.45);color:#5C3D00}
html[data-theme="light"] .wx-ret{background:rgba(214,51,132,.08);border-color:rgba(214,51,132,.4);color:#7A1A50}
html[data-theme="light"] .wx-teach{background:linear-gradient(180deg,rgba(4,199,7,.09),rgba(4,199,7,.03));border-color:rgba(19,128,58,.35);box-shadow:none}
html[data-theme="light"] .wx-teach textarea.wx-in:focus{border-color:#13803A;box-shadow:0 0 0 3px rgba(4,199,7,.18)}
html[data-theme="light"] .wx-teach-o label:has(input:disabled){color:#55616A}
html[data-theme="light"] .wx-teachd>summary{color:#0B7A2E;border-color:rgba(19,128,58,.4)}
html[data-theme="light"] .wx-actbtn:focus-visible{outline-color:var(--ink)}
@media (max-width:100000px){html[data-theme="light"] .wx-side.open .wx-sidebody{background:#FFFFFF;border-bottom-color:var(--line2);box-shadow:0 18px 30px rgba(11,20,26,.2)}}
@media (max-width:900px){html[data-theme="light"] .wx-head .wa-back{background:#FFFFFF;border-color:var(--line2);color:var(--ink)}}

/* chat list rows: white cards; status = light tint + strong rail (same meaning as dark mode) */
html[data-theme="light"] .wx-row,html[data-theme="light"] .ini-wa-list .wx-row{background:#FFFFFF;border-color:var(--line2);box-shadow:0 1px 2px rgba(11,20,26,.07)}
html[data-theme="light"] .wx-row:hover,html[data-theme="light"] .ini-wa-list .wx-row:hover{background:var(--surf2);border-color:rgba(17,27,33,.28)}
html[data-theme="light"] .wx-row.hot,html[data-theme="light"] .ini-wa-list .wx-row.hot{box-shadow:inset 4px 0 0 #E0A800,0 1px 2px rgba(11,20,26,.07)}
html[data-theme="light"] .wx-row.on{background:#E7F8EA;border-color:#0B9A2E;box-shadow:inset 4px 0 0 #04C707}
html[data-theme="light"] .wx-row .wx-l2,html[data-theme="light"] .wx-row .wx-l1 time,html[data-theme="light"] .wx-row .wx-flags,
html[data-theme="light"] .ini-wa-list .wx-l2,html[data-theme="light"] .ini-wa-list .wx-l1 time,html[data-theme="light"] .ini-wa-list .wx-flags .ic{color:var(--muted)}
html[data-theme="light"] .wx-row .wx-need.warn,html[data-theme="light"] .ini-wa-list .wx-need.warn{color:#8A5A00}
html[data-theme="light"] .wx-row .wx-av,html[data-theme="light"] .ini-wa-list .wx-av{background:#DFE3E6;color:#2B3940}
html[data-theme="light"] .wx-row .wx-av.hot,html[data-theme="light"] .ini-wa-list .wx-av.hot{background:#FDEBB3;color:#6B4700}
html[data-theme="light"] .wx-av.open{background:rgba(4,199,7,.14);color:#0A5C23}
html[data-theme="light"] .wx-av.agent{background:rgba(17,27,33,.08);color:var(--ink)}
html[data-theme="light"] .wx-row.st-asesor{--rail:#E0A800;--tint:#FFF6DA;--tint-h:#FFEFC2;--edge-st:rgba(214,158,0,.55)}
html[data-theme="light"] .wx-row.st-nuevo{--rail:#04C707;--tint:#ECFBEE;--tint-h:#DDF7E0;--edge-st:rgba(4,199,7,.5)}
html[data-theme="light"] .wx-row.st-en_progreso{--rail:#8A949B;--tint:#FFFFFF;--tint-h:#F5F6F3;--edge-st:rgba(17,27,33,.2)}
html[data-theme="light"] .wx-row.st-cotizado{--rail:#8B5CF6;--tint:#F4EEFF;--tint-h:#EBE1FF;--edge-st:rgba(124,77,214,.45)}
html[data-theme="light"] .wx-row.st-esperando{--rail:#B7791F;--tint:#FFF6E0;--tint-h:#FDEDC4;--edge-st:rgba(183,121,31,.45)}
html[data-theme="light"] .wx-row.st-vendido{--rail:#13803A;--tint:#E3F6E8;--tint-h:#D4F0DC;--edge-st:rgba(19,128,58,.5)}
html[data-theme="light"] .wx-row.st-perdido{--rail:#E5484D;--tint:#FDEEEE;--tint-h:#FBDEDE;--edge-st:rgba(198,40,40,.45)}
html[data-theme="light"] .wx-row.st-retomado{--rail:#D63384;--tint:#FDEDF5;--tint-h:#FADCEB;--edge-st:rgba(214,51,132,.45)}
html[data-theme="light"] .wx-row.st-cerrado{--rail:rgba(84,101,111,.45);--tint:rgba(17,27,33,.015);--tint-h:rgba(17,27,33,.05);--edge-st:rgba(17,27,33,.25)}
html[data-theme="light"] .wx-row[class*=" st-"]{box-shadow:inset 5px 0 0 var(--rail),0 1px 2px rgba(11,20,26,.07)}
html[data-theme="light"] .wx-row.st-cerrado[class*=" st-"]{box-shadow:inset 3px 0 0 var(--rail)}
html[data-theme="light"] .wx-row.hot[class*=" st-"]{box-shadow:inset 5px 0 0 var(--rail),inset -4px 0 0 #E0A800,0 1px 2px rgba(11,20,26,.07)}
html[data-theme="light"] .wx-row.on[class*=" st-"]{border-color:#0B9A2E;outline-color:#0B9A2E}
html[data-theme="light"] .wx-row.st-cerrado .wx-l1 b{color:#54656F}
html[data-theme="light"] .wx-row.st-cerrado .wx-l2,html[data-theme="light"] .wx-row.st-cerrado time,html[data-theme="light"] .wx-row.st-cerrado .wx-flags{color:#66737B}
html[data-theme="light"] .wx-row.st-cerrado .wx-av{background:transparent;border-color:rgba(17,27,33,.3);color:#66737B}
html[data-theme="light"] .wx-row.st-cerrado .wx-est{background:transparent;border-color:rgba(17,27,33,.25);color:#66737B}
html[data-theme="light"] .wx-row.st-cerrado:hover .wx-l1 b{color:var(--ink)}
html[data-theme="light"] .wx-row[class*=" st-"] .wx-est{background:rgba(255,255,255,.75);color:var(--ink)}
/* status pills elsewhere (header, side panel) */
html[data-theme="light"] .wx-est{background:rgba(17,27,33,.07);color:#3B4A54}
html[data-theme="light"] .wx-est.e-nuevo{background:rgba(4,199,7,.14);color:#0A5C23}
html[data-theme="light"] .wx-est.e-cotizado{background:rgba(139,92,246,.14);color:#5B2DB8}
html[data-theme="light"] .wx-est.e-esperando{background:rgba(183,121,31,.14);color:#7A4E00}
html[data-theme="light"] .wx-est.e-vendido{background:rgba(19,128,58,.14);color:#0E5F2A}
html[data-theme="light"] .wx-est.e-perdido{background:rgba(229,72,77,.13);color:#A51D24}
html[data-theme="light"] .wx-est.e-cerrado{background:rgba(17,27,33,.05);color:#54656F}
html[data-theme="light"] .wx-est.e-retomado{background:rgba(214,51,132,.13);color:#9C1F63}

/* Reglas de Nova (knowledge base) */
html[data-theme="light"] .kb-chip{color:#3B4A54}
html[data-theme="light"] .kb-chip.ok{border-color:rgba(19,128,58,.5);color:#0E5F2A}
html[data-theme="light"] .kb-chip.bad{border-color:rgba(198,40,40,.5);color:#A51D24}
html[data-theme="light"] .kb-it{border-color:var(--line2)}
html[data-theme="light"] .kb-it:hover{border-color:rgba(17,27,33,.3)}
html[data-theme="light"] .kb-it.on{background:#E7F8EA;border-color:rgba(4,199,7,.5);border-left-color:#04C707}
html[data-theme="light"] .kb-s,html[data-theme="light"] .kb-it.off .kb-t{color:var(--muted)}
html[data-theme="light"] .kb-it.off .kb-t{text-decoration-color:rgba(17,27,33,.35)}
html[data-theme="light"] .kb-off{background:rgba(251,191,36,.18);color:#5C3D00;border-color:rgba(214,158,0,.45)}

/* ---- Light mode colour pass (Javier 2026-10-18: "add some colours and contrast in the chat list and Acciones") ----
   List: soft sage panel so the white rows pop; avatar + status pill filled with the status colour (white text >= 5:1);
   stronger row tints. Acciones: tone-coloured header band + left edge on every action card, white Cliente card. */
html[data-theme="light"] .wx-left{background:#E9EFE6;border-color:rgba(17,27,33,.14)}
html[data-theme="light"] .wx-left .wx-search,html[data-theme="light"] .wx-left .wx-estf{background:#FFFFFF}
html[data-theme="light"] .wx-left .wx-chip{background:#FFFFFF;border-color:rgba(17,27,33,.16);color:#3B4A54}
html[data-theme="light"] .wx-left .wx-chip.on{background:#0B7A2E;border-color:#0B7A2E;color:#FFFFFF}
html[data-theme="light"] .wx-left .wx-chip.on .n{background:#FFFFFF;color:#0B7A2E}
html[data-theme="light"] .wx-row .wx-l1 b{color:#0B141A;font-weight:700}
/* avatar = status colour */
html[data-theme="light"] .wx-row[class*=" st-"] .wx-av{background:var(--av);color:var(--av-fg,#FFFFFF);border:0}
html[data-theme="light"] .wx-row.st-asesor{--av:#F5B800;--av-fg:#2A1D00;--tint:#FFF0C7;--tint-h:#FFE9AE}
html[data-theme="light"] .wx-row.st-nuevo{--av:#0B7A2E;--tint:#E1F7E5;--tint-h:#D2F2D8}
html[data-theme="light"] .wx-row.st-en_progreso{--av:#3B4A54;--rail:#3B4A54;--tint:#FFFFFF;--tint-h:#F4F6F3}
html[data-theme="light"] .wx-row.st-cotizado{--av:#6D3FD1;--tint:#EFE6FF;--tint-h:#E6DAFF}
html[data-theme="light"] .wx-row.st-vendido{--av:#13803A;--tint:#DCF3E3;--tint-h:#CDEDD7}
html[data-theme="light"] .wx-row.st-perdido{--av:#C62828;--tint:#FCE4E4;--tint-h:#FAD5D5}
html[data-theme="light"] .wx-row.st-retomado{--av:#B4236E;--tint:#FCE3F0;--tint-h:#F9D3E7}
html[data-theme="light"] .wx-row.st-cerrado .wx-av{background:transparent;color:#66737B;border:1px dashed rgba(17,27,33,.35)}
html[data-theme="light"] .wx-row.hot .wx-av,html[data-theme="light"] .wx-row.hot[class*=" st-"] .wx-av{background:#F5B800;color:#2A1D00}
/* status pill = solid colour, white text */
html[data-theme="light"] .wx-row .wx-est,html[data-theme="light"] .wx-row[class*=" st-"] .wx-est{border:0;color:#FFFFFF;font-weight:600;padding:1px 9px}
html[data-theme="light"] .wx-row .wx-est.e-nuevo{background:#0B7A2E}
html[data-theme="light"] .wx-row .wx-est.e-en_progreso{background:#3B4A54}
html[data-theme="light"] .wx-row .wx-est.e-cotizado{background:#6D3FD1}
html[data-theme="light"] .wx-row .wx-est.e-esperando{background:#8A5A00}
html[data-theme="light"] .wx-row .wx-est.e-vendido{background:#13803A}
html[data-theme="light"] .wx-row .wx-est.e-perdido{background:#C62828}
html[data-theme="light"] .wx-row .wx-est.e-retomado{background:#B4236E}
html[data-theme="light"] .wx-row .wx-est.e-cerrado,html[data-theme="light"] .wx-row.st-cerrado .wx-est{background:#FFFFFF;color:#54656F;border:1px solid rgba(17,27,33,.25);font-weight:500}
/* selected chat */
html[data-theme="light"] .wx-row.on,html[data-theme="light"] .wx-row.on[class*=" st-"]{background:#DDF5E2;border-color:#0B9A2E;outline:2px solid #0B9A2E;outline-offset:-2px}

/* Acciones side panel */
html[data-theme="light"] .wx-side{background:#EEF2EC;border-left-color:rgba(17,27,33,.14)}
html[data-theme="light"] .wx-sh{color:#0B141A}
html[data-theme="light"] .wx-sh .ic{width:28px;height:28px;padding:5px;border-radius:8px;background:rgba(4,199,7,.16);color:#0B7A2E}
.wx-sh .count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#C92A2A;color:#FFFFFF;font:700 1rem var(--mono);letter-spacing:0}
html[data-theme="light"] .wx-card{--band:#EEF1EC;--tone:#8A949B;background:#FFFFFF;border:1px solid rgba(17,27,33,.14);border-left:4px solid var(--tone);
  box-shadow:0 1px 2px rgba(11,20,26,.06),0 6px 18px -12px rgba(11,20,26,.3);overflow:hidden}
html[data-theme="light"] .wx-card.t-warn{--band:#FFEDB8;--tone:#E0A800;border-color:rgba(214,158,0,.45);border-left-color:var(--tone);background:#FFFFFF}
html[data-theme="light"] .wx-card.t-bad{--band:#FDDCDC;--tone:#E5484D;border-color:rgba(198,40,40,.4);border-left-color:var(--tone)}
html[data-theme="light"] .wx-card.t-ok{--band:#D7F1DF;--tone:#13803A;border-color:rgba(19,128,58,.4);border-left-color:var(--tone)}
html[data-theme="light"] .wx-card .wx-ch{background:var(--band);margin:-11px -12px 4px;padding:8px 12px}
@media (min-width:901px){html[data-theme="light"] .wx-card .wx-ch{margin:-9px -10px 4px;padding:7px 10px}}
html[data-theme="light"] .wx-card .wx-ch time{color:#3B4A54}
html[data-theme="light"] .wx-kind.warn{color:#6B4700}
html[data-theme="light"] .wx-kind.bad{color:#9E1B1B}
html[data-theme="light"] .wx-kind.ok{color:#0E5F2A}
html[data-theme="light"] .wx-card .wx-title{color:#0B141A}
html[data-theme="light"] .wx-teach{background:#F1FAF2;border:1px solid #9FD8AA}
html[data-theme="light"] .wx-info{background:#FFFFFF;border:1px solid rgba(17,27,33,.14);border-radius:11px;padding:10px 12px;
  box-shadow:0 1px 2px rgba(11,20,26,.06)}
html[data-theme="light"] .wx-info li .ic{color:#0B7A2E}
html[data-theme="light"] .wx-side .wx-none{background:#FFFFFF;border:1px dashed rgba(17,27,33,.2);border-radius:11px}
@media (max-width:100000px){html[data-theme="light"] .wx-side{background:transparent}}

/* ---- Dark mode, graphite (Javier 2026-10-18: "I really don't like the colour in the Acciones panel") ----
   Same language as the graphite chat: neutral #24282E cards, colour only where it means something - a tone header
   strip + 4px left edge per card (amber = needs a person, red = urgent, green = done). No brown/green gradients.
   List: avatar + status pill filled with the status colour, dark text on it (>= 7:1), like light mode. */
html[data-theme="dark"] .wx-side{background:#181A1E;border-left-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .wx-sh{color:#ECEEF0}
html[data-theme="dark"] .wx-sh .ic{width:28px;height:28px;padding:5px;border-radius:8px;background:rgba(61,220,90,.14);color:#5DFF6A}
html[data-theme="dark"] .wx-card{--band:rgba(255,255,255,.06);--tone:#6F767F;--kind:#D5D9DE;background:#24282E;border:1px solid rgba(255,255,255,.1);
  border-left:4px solid var(--tone);box-shadow:0 8px 20px -14px rgba(0,0,0,.8);overflow:hidden}
html[data-theme="dark"] .wx-card.t-warn{--band:rgba(251,191,36,.15);--tone:#FBBF24;--kind:#FFD34D;background:#24282E;border-color:rgba(255,255,255,.1);border-left-color:var(--tone)}
html[data-theme="dark"] .wx-card.t-bad{--band:rgba(255,92,92,.16);--tone:#FF5C5C;--kind:#FF9A9A;border-color:rgba(255,255,255,.1);border-left-color:var(--tone)}
html[data-theme="dark"] .wx-card.t-ok{--band:rgba(61,220,90,.13);--tone:#3DDC5A;--kind:#7CFF7E;border-color:rgba(255,255,255,.1);border-left-color:var(--tone)}
html[data-theme="dark"] .wx-card .wx-ch{background:var(--band);margin:-11px -12px 4px;padding:8px 12px}
@media (min-width:901px){html[data-theme="dark"] .wx-card .wx-ch{margin:-9px -10px 4px;padding:7px 10px}}
html[data-theme="dark"] .wx-card .wx-kind{color:var(--kind)}
html[data-theme="dark"] .wx-card .wx-ch time{color:#C9CDD3}
html[data-theme="dark"] .wx-card .wx-title{color:#FFFFFF}
html[data-theme="dark"] .wx-card .wx-det{color:#AEB4BC}
html[data-theme="dark"] .wx-teach{background:#1D2025;border:1px solid rgba(255,255,255,.12);box-shadow:none}
html[data-theme="dark"] .wx-teach textarea.wx-in{background:#15171A;border-color:rgba(255,255,255,.24)}
html[data-theme="dark"] .wx-teach textarea.wx-in:focus{border-color:#3DDC5A;box-shadow:0 0 0 3px rgba(61,220,90,.18)}
html[data-theme="dark"] .wx-teach-o{color:#D5D9DE}
html[data-theme="dark"] .wx-teach-o label:has(input:disabled){color:#9AA0A8}
html[data-theme="dark"] .wx-info{background:#24282E;border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:10px 12px}
html[data-theme="dark"] .wx-info li .ic{color:#5DFF6A}
html[data-theme="dark"] .wx-side .wx-none{background:#24282E;border:1px dashed rgba(255,255,255,.18);border-radius:11px}
@media (max-width:100000px){html[data-theme="dark"] .wx-side{background:transparent}
  html[data-theme="dark"] .wx-side.open .wx-sidebody{background:#181A1E}}
/* chat list: solid status avatar + pill */
html[data-theme="dark"] .wx-row[class*=" st-"] .wx-av{background:var(--av);color:#0B0C0E;border:0}
html[data-theme="dark"] .wx-row.st-asesor{--av:#FBBF24}
html[data-theme="dark"] .wx-row.st-nuevo{--av:#3DDC5A}
html[data-theme="dark"] .wx-row.st-en_progreso{--av:#C9CDD3}
html[data-theme="dark"] .wx-row.st-cotizado{--av:#B88CFF}
html[data-theme="dark"] .wx-row.st-vendido{--av:#3DDC5A}
html[data-theme="dark"] .wx-row.st-perdido{--av:#FF7A7A}
html[data-theme="dark"] .wx-row.st-retomado{--av:#FF6FB5}
html[data-theme="dark"] .wx-row.st-cerrado .wx-av{background:transparent;color:#A3A9B1;border:1px dashed rgba(255,255,255,.3)}
html[data-theme="dark"] .wx-row.hot .wx-av,html[data-theme="dark"] .wx-row.hot[class*=" st-"] .wx-av{background:#FBBF24;color:#1A1405}
html[data-theme="dark"] .wx-row .wx-est,html[data-theme="dark"] .wx-row[class*=" st-"] .wx-est{border:0;color:#0B0C0E;font-weight:600;padding:1px 9px}
html[data-theme="dark"] .wx-row .wx-est.e-nuevo,html[data-theme="dark"] .wx-row .wx-est.e-vendido{background:#3DDC5A}
html[data-theme="dark"] .wx-row .wx-est.e-en_progreso{background:#C9CDD3}
html[data-theme="dark"] .wx-row .wx-est.e-cotizado{background:#B88CFF}
html[data-theme="dark"] .wx-row .wx-est.e-esperando{background:#FBBF24}
html[data-theme="dark"] .wx-row .wx-est.e-perdido{background:#FF7A7A}
html[data-theme="dark"] .wx-row .wx-est.e-retomado{background:#FF6FB5}
html[data-theme="dark"] .wx-row .wx-est.e-cerrado,html[data-theme="dark"] .wx-row.st-cerrado .wx-est{background:transparent;color:#C9CDD3;border:1px solid rgba(255,255,255,.25);font-weight:500}
/* en progreso rows: graphite instead of the heavy grey slab */
html[data-theme="dark"] .wx-row.st-en_progreso{--tint:#2A2E34;--tint-h:#33383F;--edge-st:rgba(255,255,255,.16);--rail:#C9CDD3}
/* row status text on tinted rows + link buttons (2026-10-18 checks) */
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
html[data-theme="dark"] .wx-row .wx-need.bad{color:#FFC9C9}html[data-theme="dark"] .wx-row .wx-need.ok{color:#B6FFC4}
html[data-theme="light"] .wx-row .wx-need.bad{color:#A51D24}html[data-theme="light"] .wx-row .wx-need.ok{color:#0E5F2A}

/* 2026-10-19 (Javier): action cards were squeezed to a thin strip on narrow windows (flex column + max-height lets
   children shrink), hiding "Llamar al cliente" behind the customer panel. Cards keep their height; the panel scrolls. */
.wx-side>*,.wx-sidebody>*,.wx-sidebody .wx-card>*{flex-shrink:0}
/* customer number: one tap copies it, the phone button calls it */
.wx-num{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;margin:0 -4px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;cursor:copy;user-select:text}
.wx-num .ic{width:16px;height:16px;opacity:.85}
.wx-num:hover,.wx-num:focus-visible{background:rgba(127,127,127,.18);outline:none}
.wx-who,.wx-who *{user-select:text}
.wx-call{flex:none}
.wx-tel{flex-wrap:wrap}.wx-tel .btn{flex:1 1 auto;justify-content:center}
@media (max-width:900px){.wx-who{flex:1 1 110px}.wx-head #waTheme{display:none}}
/* Acciones dropdown: visible Cerrar bar on narrow windows (Javier 2026-10-19: "no X to close") */
.wx-sideclose{display:none}
@media (max-width:100000px){
  .wx-side.open .wx-sideclose{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-12px;z-index:2;margin:-12px -12px 0;padding:8px 12px;background:inherit;border-bottom:1px solid var(--line)}
  .wx-sideclose b{display:inline-flex;align-items:center;gap:8px;font:700 1rem var(--display);letter-spacing:.04em;text-transform:uppercase}
  .wx-sideclose b .ic{width:18px;height:18px;color:var(--green)}
  .wx-sideclose .btn{min-height:40px}.wx-sideclose .btn .ic{width:18px;height:18px}
}
/* Narrow windows: give the conversation the room (Javier 2026-10-19 "can't navigate the page") */
.wx-short{display:none}
.wx-sum{display:flex;align-items:flex-start;gap:8px}.wx-sum details{flex:1;min-width:0}
.wx-sum summary{cursor:pointer;padding:6px 0;color:var(--muted)}.wx-sum details[open]>div{max-height:30vh;overflow:auto;padding:4px 0 6px}
.wx-sum .btn.icon{flex:none;min-height:40px}
#waMsg:empty{display:none}
@media (max-width:100000px){
  #waFoot:has(.wa-locked){display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
  #waFoot .wa-locked{flex:1 1 220px;padding:6px;border-style:solid}#waFoot .wa-locked p,#waFoot .wa-locked>.ic{display:none}
  #waFoot .wa-locked .btn{flex:1;min-height:44px}
  #waFoot .wx-teachd{margin:0;flex:0 1 auto;display:flex;flex-direction:column;justify-content:center}
  #waFoot .wx-teachd[open]{flex-basis:100%}
  #waFoot .wx-teachd>summary{min-height:44px}
  .wx-long{display:none}.wx-short{display:inline}
}
#waMsg .wx-sum{color:var(--ink)}#waMsg .wx-sum summary .ok{font-weight:600}
/* Acciones on narrow windows = full-height drawer on the right, not a half-screen dropdown (Javier 2026-10-19) */
@media (max-width:100000px){
  .wx-side{position:static}
  .wx-side.open .wx-sidebody{top:0;bottom:0;right:0;left:auto;width:min(440px,100%);max-height:none;
    border-bottom:0;border-left:1px solid var(--line2);box-shadow:-18px 0 30px rgba(0,0,0,.45)}
}
.wx-wan{font-weight:400;color:var(--muted)}

/* ══ 2026-10-21 (Javier screenshot ~950px window + phone): chat header and list squeezed ══
   The header now adapts to the width of the CHAT panel (not the window): when narrow it uses two rows -
   row 1 = back · avatar · name/number · call · client data, row 2 = state + actions. */
.wx-chat{container:wxchat/inline-size}
/* 2026-10-26: 760 -> 1100px - at ~790px (Javier's wider window, full-width layout) one row cut the name and wrapped Devolver a Nova */
@container wxchat (max-width:1100px){
  .wx-head{flex-wrap:wrap;row-gap:8px;column-gap:8px}
  .wx-head .wa-back{order:0}.wx-head>.wx-av{order:1}.wx-head .wx-who{order:2;flex:1 1 0;min-width:0}
  .wx-head .wx-call{order:3}.wx-head .wx-editbtn{order:4;display:inline-flex}
  .wx-head::after{content:'';order:5;flex-basis:100%;height:0}
  .wx-head .wx-state{display:none}
  .wx-head .wx-estsel{order:6;flex:1 1 130px;max-width:none;min-width:0}
  .wx-head .wa-actions{order:7;flex-wrap:nowrap;gap:6px;margin-left:auto}
  .wx-head .wa-actions .btn{white-space:nowrap}
  .wx-who .mono{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@container wxchat (max-width:420px){
  .wx-head .wa-actions [data-wa] .ic{display:none}
  .wx-head .wa-actions a[download]{display:none}
}
/* list: the four filters always fit, status pills shorten with … instead of being cut */
#waFilters{grid-template-columns:repeat(4,auto);justify-content:space-between}
#waFilters .wx-chip{padding:2px 8px}
.wx-l2 .wx-est{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.wx-av{overflow:hidden;line-height:1}

/* 2026-10-21: dark/light is a setting for the whole app -> its own labelled menu item (not in the WhatsApp header) */
.theme-row .ic{transform:none!important}
@media (max-width:900px){.side .theme-row{display:flex}}
/* notifications banner (top of every section until this device has them on) */
.push-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(251,191,36,.55);background:rgba(251,191,36,.12);color:var(--ink)}
.push-banner[hidden]{display:none}.push-banner>.ic{color:var(--warn);flex:none}
.push-banner p{margin:0;flex:1 1 260px}.push-banner .btn{min-height:44px}
html[data-theme="light"] .push-banner{background:#FFF6DD;border-color:#E2B33B}
html[data-theme="light"] .push-banner>.ic{color:#8A5A00}

/* 2026-10-21: customer replied in a chat an asesor has -> strong red, first in the list; unread -> bold + dot */
.wx-row.wait{--rail:#FF3B3B;box-shadow:inset 6px 0 0 #FF3B3B,0 0 0 2px rgba(255,59,59,.55),0 3px 10px rgba(0,0,0,.35)!important;background:#5A2328!important;border-color:#FF3B3B!important}
.wx-wait{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;background:#E5252A;color:#fff;font-weight:700;white-space:nowrap}
.wx-wait .ic{width:16px;height:16px}
.wx-row.unread .wx-l1 b{font-weight:800}
.wx-row.unread .wx-flags::before{content:'';display:inline-block;width:12px;height:12px;border-radius:50%;background:#05FF09;box-shadow:0 0 0 2px rgba(5,255,9,.25)}
.wx-row.wait.unread .wx-flags::before{background:#FF3B3B;box-shadow:0 0 0 2px rgba(255,59,59,.3)}
@media (prefers-reduced-motion:no-preference){.wx-row.wait .wx-wait{animation:waitpulse 1.6s ease-in-out infinite}}
@keyframes waitpulse{50%{box-shadow:0 0 0 4px rgba(229,37,42,.35)}}
.nav-wait{margin-left:auto;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;
  background:#05FF09;color:#04110A;font:700 1rem var(--body)}.nav-wait.red{background:#E5252A;color:#fff}.nav-wait[hidden]{display:none}
.shell.rail .nav-wait{position:absolute;top:2px;right:4px;margin:0;min-width:20px;height:20px;font-size:1rem;padding:0 4px}
.msg-toast{position:fixed;right:16px;bottom:16px;z-index:60;max-width:min(420px,calc(100vw - 32px));display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;border:1px solid rgba(5,255,9,.55);background:#14301C;color:#fff;font:1rem var(--body);text-align:left;
  cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.msg-toast.red{background:#5A1F23;border-color:#FF3B3B}.msg-toast[hidden]{display:none}.msg-toast .ic{flex:none;color:#7CFF7E}.msg-toast.red .ic{color:#FF8A8A}
.msg-toast em{font-style:normal;font-weight:700;margin-left:auto;padding-left:8px}
html[data-theme="light"] .wx-row.wait{background:#FFE3E3!important}
html[data-theme="light"] .wx-row.wait .wx-l1 b,html[data-theme="light"] .wx-row.wait .wx-l2{color:#5A0E12}
html[data-theme="light"] .msg-toast{background:#E8FBE8;color:#0B2E14;border-color:#0B7A2E}
html[data-theme="light"] .msg-toast.red{background:#FFE3E3;color:#5A0E12;border-color:#E5252A}
html[data-theme="light"] .msg-toast .ic{color:#0B7A2E}html[data-theme="light"] .msg-toast.red .ic{color:#B3161B}

/* ══ 2026-10-21 helpers for the people answering (reply tools, qué falta, explicar, llamadas, respuestas rápidas) ══ */
.wx-tools{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
.wx-tools .btn.sm{min-height:36px;padding:4px 10px}.wx-tools .btn .ic{width:17px;height:17px}
.wx-toolmsg{color:var(--muted);flex:1 1 200px}.wx-toolmsg:empty{display:none}
.wx-quick{position:absolute;left:0;bottom:calc(100% + 6px);z-index:12;width:min(460px,100%);max-height:min(55vh,420px);overflow:auto;
  display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:12px;background:#1F2226;border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.wx-quick[hidden]{display:none}
.wx-quick button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px}
.wx-quick button:hover,.wx-quick button:focus-visible{background:rgba(5,255,9,.1)}.wx-quick button span{color:var(--muted)}
.wx-falta .wx-sh,.wx-expl .wx-sh{display:flex;align-items:center;gap:8px}.wx-falta .wx-sh .btn{margin-left:auto}
.fl-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:4px 0}.fl-row b{margin-right:2px}
.fl-chip{display:inline-block;padding:1px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.fl-chip.miss{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.55);color:#FFD566}
.fl-ok{color:#9BFF9D;margin:4px 0}.fl-next{margin:6px 0 0;font-weight:600}
.wx-expl .wx-ctl input{flex:1;min-width:0}
.ex-res{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ex-res button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid var(--line)}
.ex-res button:hover{border-color:var(--green)}.ex-res button span{white-space:nowrap;color:var(--muted)}
.ex-out p{margin:4px 0}.ex-out ul{margin:4px 0;padding-left:20px}.ex-say{padding:8px 10px;border-radius:8px;background:rgba(5,255,9,.08)}
.ll-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.ll-new,.ll-list{display:flex;flex-direction:column;gap:12px}
.ll-new label,.ll-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);min-width:0}
.ll-new textarea,.ll-form textarea{width:100%;min-height:44px;padding:8px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px;resize:vertical}
.ll-who{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ll-rec{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ll-rec p{margin:0;flex:1 1 200px}
.ll-mic{display:inline-flex;align-items:center;gap:10px;min-height:64px;padding:10px 22px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#22F026,#04C707);color:#04110A;font:700 1.15rem var(--body);box-shadow:0 8px 22px -8px rgba(5,255,9,.7)}
.ll-mic .ic{width:26px;height:26px}.ll-mic.on{background:linear-gradient(180deg,#FF5252,#D32020);color:#fff;box-shadow:0 0 0 6px rgba(229,37,42,.25)}
.ll-res{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}.ll-res[hidden]{display:none}
.ll-res h4{display:flex;align-items:center;gap:8px;margin:0;font-size:1.1rem}
.ll-qs{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.ll-qs label{color:var(--ink);font-weight:600}.ll-qrow{display:flex;gap:6px}.ll-qrow input{flex:1;min-width:0}
.ll-qmic.on{background:#D32020;color:#fff}
.ll-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ll-form .w2{grid-column:1/-1}
.ll-form label.ck{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.ll-item{padding:10px 0;border-top:1px solid var(--line)}.ll-item:first-of-type{border-top:0}.ll-item p{margin:4px 0}
.ll-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rq-list{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.rq-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) auto;gap:10px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px}
.rq-item label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.rq-item textarea{width:100%;padding:8px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px;resize:vertical}
@media (max-width:1000px){.ll-grid{grid-template-columns:1fr}}
@media (max-width:700px){.ll-who,.ll-form{grid-template-columns:1fr}.rq-item{grid-template-columns:1fr}}
html[data-theme="light"] .wx-quick{background:#FFFFFF}
html[data-theme="light"] .fl-chip{background:#EEF2EC;border-color:rgba(17,27,33,.16)}
html[data-theme="light"] .fl-chip.miss{background:#FFF3D1;border-color:#E2B33B;color:#7A4F00}
html[data-theme="light"] .fl-ok{color:#0B7A2E}
html[data-theme="light"] .ll-new textarea,html[data-theme="light"] .ll-form textarea,html[data-theme="light"] .rq-item textarea{background:#FFFFFF;border-color:rgba(17,27,33,.25)}
html[data-theme="light"] .ll-qs{background:#FFF8E5}
/* 2026-10-21 (Javier: "the layout is way too small"): when the chat area is narrow, show the list OR the chat (back arrow),
   like on the phone, instead of two squeezed columns */
.tabp[data-tabp="wa-conv"]{container:waconv/inline-size}
@container waconv (max-width:820px){
  .wx{grid-template-columns:minmax(0,1fr)}
  .wx .wx-chat{display:none}.wx.chat-open .wx-chat{display:flex}.wx.chat-open .wx-left{display:none}
  .wx-head .wa-back{display:inline-flex}
}
.wx-wait.amber{background:#B26B00}

/* ══ 2026-10-21 Registros: customer files (calls, site visits, notes) - "field service file" ══ */
.rg-sub{margin:4px 0 0}
.rg{display:grid;grid-template-columns:clamp(270px,24vw,340px) minmax(0,1fr);gap:14px;align-items:start}
.rg-left{display:flex;flex-direction:column;gap:8px;position:sticky;top:12px;max-height:calc(100dvh - 140px);overflow:auto}
.rg-left .msg:empty{display:none}
.rg-h{margin:10px 0 2px;font:600 1rem var(--display);letter-spacing:.04em;text-transform:uppercase;color:#A2A6AD}
.rg-res,.rg-recent{display:flex;flex-direction:column;gap:6px}
.rg-hit,.rg-rec{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:10px;border:1px solid var(--line)}
.rg-hit:hover,.rg-rec:hover,.rg-hit:focus-visible,.rg-rec:focus-visible{border-color:var(--green);background:rgba(5,255,9,.06)}
.rg-hit span,.rg-rec em{color:var(--muted);font-style:normal}
.rg-rec{flex-direction:row;align-items:flex-start;gap:10px}.rg-rec .ic{flex:none;margin-top:2px;color:var(--green)}.rg-rec span{display:flex;flex-direction:column;min-width:0}
.rg-rec u{text-decoration:none;color:var(--warn)}
.rg-src{display:flex;gap:5px;flex-wrap:wrap}.rg-src i,.rg-tags i,.rg-sh i{font-style:normal;padding:0 8px;border-radius:999px;border:1px solid var(--line2);color:#D3D6DB;white-space:nowrap}
.rg-src i.src-whatsapp{border-color:rgba(5,255,9,.45)}.rg-src i.src-crm{border-color:rgba(198,255,77,.5)}
.rg-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.rg-tags i.ok{border-color:rgba(5,255,9,.5);color:#9BFF9D}
.rg-tags i.warn{border-color:rgba(251,191,36,.6);color:#FFD566}.rg-tags i.bad{border-color:rgba(255,92,92,.6);color:#FFB3B3}
.rg-newc{justify-content:center;margin-top:4px}
.rg-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.rg-empty h3{display:flex;gap:10px;align-items:center;margin:0 0 6px}
.rg-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.rg-bigbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;border:1px solid var(--line2);min-height:110px}
.rg-bigbtn:hover,.rg-bigbtn:focus-visible{border-color:var(--green);background:rgba(5,255,9,.06)}.rg-bigbtn .ic{width:28px;height:28px;color:var(--green)}
.rg-bigbtn b{font:700 1.15rem var(--display)}.rg-bigbtn span{color:var(--muted)}
.rg-head{display:flex;flex-direction:column;gap:12px}
.rg-who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}.rg-who h3{margin:0;font-size:1.35rem}.rg-who p{margin:2px 0;color:var(--muted)}
.rg-actions{display:flex;gap:8px;flex-wrap:wrap}.rg-actions .btn{min-height:48px}
.rg-cform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rg-cform[hidden]{display:none}.rg-cform label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.rg-cform .row{grid-column:1/-1}
.rg-wa{display:flex;flex-direction:column;gap:6px}.rg-sh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700}
.rg-wam{margin:0;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04)}.rg-wam.user{background:rgba(5,255,9,.06)}
.rg-tl{display:flex;flex-direction:column;gap:8px;position:relative}
.rg-item{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(0,0,0,.6)}
.rg-item:hover,.rg-item:focus-visible{border-color:var(--green)}
.rg-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(5,255,9,.1);color:var(--green)}
.rg-item.t-llamada .rg-ic{background:rgba(198,255,77,.12);color:#C6FF4D}.rg-item.t-nota .rg-ic{background:rgba(255,255,255,.07);color:#D3D6DB}
.rg-body{display:flex;flex-direction:column;gap:2px;min-width:0}.rg-body em{font-style:normal;color:var(--muted)}
.rg-ebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rg-ebar b{font:700 1.15rem var(--display)}
.rg-status{margin-left:auto;padding:2px 10px;border-radius:999px;border:1px solid rgba(251,191,36,.55);color:#FFD566}.rg-status.ok{border-color:rgba(5,255,9,.5);color:#9BFF9D}
.rg-ed{display:flex;flex-direction:column;gap:12px}.rg-ed label,.rg-form label,.rg-sum label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.rg-ed textarea,.rg-form textarea,.rg-sum textarea,.rg-f textarea,.rg-it textarea{width:100%;min-height:44px;padding:10px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px;resize:vertical}
.rg-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rg-form label.ck{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.rg-form label:has(textarea){grid-column:1/-1}
.rg-dict{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.rg-dict p{margin:0}.rg-dict>div{flex:1 1 260px;display:flex;flex-direction:column;gap:6px}
.rg-dict details summary{cursor:pointer;color:var(--muted)}.rg-dict details[open]{display:flex;flex-direction:column;gap:8px}
.rg-mic{display:inline-flex;align-items:center;gap:10px;min-height:64px;padding:10px 24px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#22F026,#04C707);color:#04110A;font:700 1.15rem var(--body);box-shadow:0 8px 22px -8px rgba(5,255,9,.7)}
.rg-mic .ic{width:26px;height:26px}.rg-mic.on{background:linear-gradient(180deg,#FF5252,#D32020);color:#fff;box-shadow:0 0 0 6px rgba(229,37,42,.25)}
.rg-qs{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.rg-qs h4{display:flex;gap:8px;align-items:center;margin:0}.rg-qs label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink)}.rg-qrow{display:flex;gap:6px}.rg-qrow input{flex:1;min-width:0}
.rg-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.rg-foot.sticky{position:sticky;bottom:0;z-index:5;padding:12px 14px;border-radius:12px;background:rgba(20,22,25,.96);border:1px solid var(--line2);box-shadow:0 -10px 30px -12px rgba(0,0,0,.6)}
.rg-foot .btn.primary{min-height:52px;padding:8px 22px;font-size:1.05rem}
.rg-visit{display:flex;flex-direction:column;gap:12px}
.rg-prog p{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rg-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.rg-bar span{display:block;height:100%;background:linear-gradient(90deg,#04C707,#05FF09)}
.rg-miss{all:unset;cursor:pointer;padding:0 9px;border-radius:999px;border:1px solid rgba(251,191,36,.55);color:#FFD566}
.rg-sec summary{cursor:pointer;font:700 1.1rem var(--display);padding:2px 0}
.rg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:12px}
.rg-f{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px;border-radius:10px;border:1px solid transparent}
.rg-f.t-nota,.rg-f.t-fotos,.rg-f.t-multi,.rg-f.t-opcion{grid-column:1/-1}
.rg-f.miss{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.05)}
.rg-f.nova{border-color:rgba(5,255,9,.55);background:rgba(5,255,9,.06)}
.rg-f input:not([type=file]){width:100%;min-height:48px}
.rg-flab{font-weight:600;color:var(--ink)}.rg-flab .req{color:#FFD566;font-style:normal}.rg-help{display:block}
.rg-yn,.rg-opts{display:flex;flex-wrap:wrap;gap:6px}
.rg-yn button,.rg-opts button{min-height:48px;padding:6px 16px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.rg-yn button.on,.rg-opts button.on{background:#04C707;border-color:#04C707;color:#04110A}
.rg-yn button:disabled,.rg-opts button:disabled{cursor:default;opacity:.85}
.rg-photos{display:flex;flex-wrap:wrap;gap:10px}
.rg-photos figure{margin:0;width:150px;display:flex;flex-direction:column;gap:4px}.rg-photos img{width:150px;height:112px;object-fit:cover;border-radius:10px;border:1px solid var(--line2)}
.rg-photos figcaption{display:flex;justify-content:space-between;align-items:center;gap:4px;color:var(--muted)}
.rg-cam{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:150px;height:112px;border-radius:10px;border:2px dashed rgba(5,255,9,.5);color:#9BFF9D;cursor:pointer;font-weight:600}
.rg-cam:hover{background:rgba(5,255,9,.06)}.rg-cam .ic{width:28px;height:28px}
.rg-sum{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rg-serv{display:flex;flex-direction:column;gap:10px;border-color:rgba(5,255,9,.45)}.rg-serv h3{display:flex;gap:10px;align-items:center;margin:0}
.rg-chips{display:flex;flex-wrap:wrap;gap:8px}.rg-chip{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 16px;border-radius:10px;border:1px solid var(--line2);cursor:pointer;font-weight:600}
.rg-chip:has(input:checked){border-color:#04C707;background:rgba(5,255,9,.1)}.rg-chip input{width:20px;height:20px}
.rg-prop{display:flex;flex-direction:column;gap:12px;border-color:rgba(5,255,9,.4)}.rg-prop h3,.rg-prop h4{display:flex;gap:10px;align-items:center;margin:0}
.rg-it,.rg-q{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.rg-itf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rg-itf label,.rg-it>label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.rg-tw{overflow-x:auto}
.rg-lines{width:100%;border-collapse:collapse}.rg-lines th,.rg-lines td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rg-lines td:first-child{display:flex;flex-direction:column;gap:2px;min-width:220px}.rg-lines input{min-height:44px;width:100%}
.rg-lines td:nth-child(2) input{width:90px}.rg-lines td:nth-child(3) input{width:120px}.mono{font-variant-numeric:tabular-nums}
.rg-elegir{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;border:1px solid rgba(251,191,36,.5)}
.ck-editor{display:flex;flex-direction:column;gap:10px;margin-top:10px}.ck-editor summary{cursor:pointer;padding:4px 0}
.ck-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) 170px minmax(0,1.6fr) auto auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.ck-row input[hidden]{display:none}.ck-row label.ck{display:flex;gap:6px;align-items:center;white-space:nowrap}
.ck-sec{display:flex;flex-direction:column;gap:6px;padding:10px 0}.ck-sec>input{font-weight:700;max-width:420px}
@media (max-width:1100px){.rg{grid-template-columns:minmax(0,1fr)}.rg-left{position:static;max-height:none}
  .ck-row{grid-template-columns:1fr 1fr}.ck-row label.ck,.ck-row .btn{justify-self:start}}
@media (max-width:700px){.rg-big{grid-template-columns:1fr}.rg-fields,.rg-form,.rg-sum,.rg-cform,.rg-itf{grid-template-columns:1fr}
  .rg-who{grid-template-columns:auto minmax(0,1fr)}.rg-who .btn{grid-column:1/-1;justify-self:start}
  .rg-mic{width:100%;justify-content:center}.rg-photos figure,.rg-photos img,.rg-cam{width:calc(50vw - 40px)}.rg-photos img{height:calc((50vw - 40px)*.75)}}
.roles{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1250px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}.roles .rcard:last-child:nth-child(odd){grid-column:1/-1}}
html[data-theme="light"] .rg-ed textarea,html[data-theme="light"] .rg-form textarea,html[data-theme="light"] .rg-sum textarea,html[data-theme="light"] .rg-f textarea,html[data-theme="light"] .rg-it textarea{background:#FFFFFF;border-color:rgba(17,27,33,.25)}
html[data-theme="light"] .rg-item{background:#FFFFFF}
html[data-theme="light"] .rg-foot.sticky{background:rgba(255,255,255,.97)}
html[data-theme="light"] .rg-tags i.ok{color:#0B7A2E}html[data-theme="light"] .rg-tags i.warn,html[data-theme="light"] .rg-status,html[data-theme="light"] .rg-miss,html[data-theme="light"] .rg-flab .req,html[data-theme="light"] .rg-rec u{color:#7A4F00}
html[data-theme="light"] .rg-tags i.bad{color:#B3161B}html[data-theme="light"] .rg-status.ok{color:#0B7A2E}
html[data-theme="light"] .rg-src i,html[data-theme="light"] .rg-tags i,html[data-theme="light"] .rg-sh i{color:#3B4A54}
html[data-theme="light"] .rg-cam{color:#0B7A2E;border-color:rgba(4,199,7,.6)}
html[data-theme="light"] .rg-ic{color:#0B7A2E}html[data-theme="light"] .rg-item.t-llamada .rg-ic{color:#4D7A00}
.rg-lines td,.rg-lines th{font-family:var(--body)}.rg-lines td.mono,.rg-lines td:nth-child(3){font-variant-numeric:tabular-nums}

/* ══ 2026-10-22 Trabajos: jobs in phases (board, phase stepper, tasks, signature pad, contract flow) ══ */
.rg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}.rg-tabs{display:flex;gap:6px}
.tb-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.tb-top h3{display:flex;gap:10px;align-items:center;margin:0}
.rg-chip.on{border-color:#04C707;background:rgba(5,255,9,.1)}
.tb-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(220px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.tb-col{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.tb-col h4{display:flex;justify-content:space-between;margin:0;font:700 1rem var(--display);letter-spacing:.04em;text-transform:uppercase;color:#C9CDD3}
.tb-col h4 span{min-width:24px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.08);text-align:center}
.tb-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line2)}
.tb-card:hover,.tb-card:focus-visible{border-color:var(--green)}.tb-card span,.tb-card em{color:var(--muted);font-style:normal}
.tb-card.late{box-shadow:inset 4px 0 0 #FBBF24}.tb-meta{color:#C9CDD3!important}.tb-none{text-align:center}
.tb-jobs{display:flex;flex-direction:column;gap:8px}.tb-sh .btn{margin-left:auto}
.tb-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.tb-row:hover{border-color:var(--green)}.tb-row em{grid-column:1/-1;font-style:normal;color:var(--muted)}
.tb-steps{display:flex;gap:4px;align-items:center}.tb-steps i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.12)}
.tb-steps i.ok{background:#04C707}.tb-steps i.now{background:#FBBF24;box-shadow:0 0 0 3px rgba(251,191,36,.25)}
.tb-estado{min-height:40px}
.ph-steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.ph-step{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line2);white-space:nowrap}
.ph-step span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);font:700 1rem var(--display)}
.ph-step em{font-style:normal;color:var(--muted);max-width:210px;overflow:hidden;text-overflow:ellipsis}
.ph-step.ok span{background:#04C707;color:#04110A}.ph-step.now span{background:#FBBF24;color:#1A1405}
.ph-step.sel{border-color:var(--green);background:rgba(5,255,9,.07)}.ph-step.sel em{color:var(--ink)}
.ph-head h3{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 8px}.ph-ok{font-style:normal;font-size:1rem;color:#9BFF9D}
.ph-head dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0}.ph-head dt{color:var(--muted)}.ph-head dd{margin:0}
.tb-task{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 16px;border-radius:10px;border:1px dashed rgba(5,255,9,.55);background:transparent;color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.tb-done{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;color:#9BFF9D;font-weight:600}
.tb-int{font-style:normal;font-weight:400;padding:0 6px;border-radius:6px;border:1px solid var(--line2);color:var(--muted)}
.tb-pad{display:flex;flex-direction:column;gap:8px}.tb-pad canvas{width:100%;max-width:640px;aspect-ratio:3/1;background:#fff;border-radius:10px;border:2px dashed #04C707;touch-action:none}
.tb-firma-ok{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.tb-firma-ok img{max-width:320px;background:#fff;border-radius:8px}
.tb-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tb-kchip{padding:4px 12px;border-radius:999px;border:1px solid rgba(251,191,36,.55);color:#FFD566}.tb-kchip.ok{border-color:rgba(5,255,9,.5);color:#9BFF9D}
.tb-flow{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;counter-reset:fl}
.tb-flow li{counter-increment:fl;padding:4px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}.tb-flow li::before{content:counter(fl) ". "}
.tb-flow li.ok{border-color:#04C707;color:#9BFF9D}
.tb-sign{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line)}.tb-sign h4{display:flex;gap:8px;align-items:center;margin:0}
.tb-reg{display:block;padding:8px 0;border-top:1px solid var(--line);color:var(--ink)}
.pt-fase{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}.pt-fn{font-weight:700;max-width:520px}
.pt-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pt-meta label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.pt-meta textarea,.pt-cl textarea{width:100%;padding:8px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px;resize:vertical}
.pt-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 190px minmax(0,1.4fr) auto auto auto}
.pt-cl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr) auto;gap:8px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
@media (max-width:1100px){.pt-meta{grid-template-columns:1fr}.pt-row{grid-template-columns:1fr 1fr}.pt-cl{grid-template-columns:1fr}}
@media (max-width:700px){.rg-top{align-items:flex-start}.ph-head dl{grid-template-columns:1fr}.tb-board{grid-template-columns:repeat(var(--cols),minmax(240px,82vw))}}
html[data-theme="light"] .tb-col{background:#F3F6F1}html[data-theme="light"] .tb-card{background:#FFFFFF}
html[data-theme="light"] .tb-col h4{color:#3B4A54}html[data-theme="light"] .tb-meta{color:#3B4A54!important}
html[data-theme="light"] .ph-ok,html[data-theme="light"] .tb-done,html[data-theme="light"] .tb-flow li.ok,html[data-theme="light"] .tb-kchip.ok{color:#0B7A2E}
html[data-theme="light"] .tb-kchip{color:#7A4F00}
html[data-theme="light"] .pt-meta textarea,html[data-theme="light"] .pt-cl textarea{background:#FFFFFF;border-color:rgba(17,27,33,.25)}

/* ══ 2026-10-22 after-sale + control: equipment, change orders, maintenance, profit, calendar ══ */
.eq-tab{width:100%;border-collapse:collapse}.eq-tab th,.eq-tab td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-family:var(--body)}
.eq-tab input,.eq-tab select{min-height:44px;width:100%;min-width:90px}.eq-edit td:first-child input{min-width:110px}
.eq-card,.ch-card,.pf-card,.rg-cal{display:flex;flex-direction:column;gap:10px}
.ch-row{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--line)}.ch-row i,.mt-row i{font-style:normal;padding:0 8px;border-radius:999px;border:1px solid var(--line2)}
.ch-aprobado,.mt-hecho,.mt-agendado{border-color:rgba(5,255,9,.5)!important;color:#9BFF9D}.ch-rechazado,.mt-cancelado{border-color:rgba(255,92,92,.5)!important;color:#FFB3B3}
.ch-pendiente,.mt-pendiente,.mt-avisado{border-color:rgba(251,191,36,.55)!important;color:#FFD566}
.ch-acc{display:flex;flex-direction:column;gap:6px;color:var(--muted);max-width:420px}
.ch-new{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:10px;border-top:1px solid var(--line)}
.ch-new label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.mt-row{margin:4px 0}
.pf-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pf-kpis div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:10px;border:1px solid var(--line2)}
.pf-kpis span{color:var(--muted)}.pf-kpis b{font:700 1.3rem var(--display);font-variant-numeric:tabular-nums}.pf-kpis .ok b{color:#9BFF9D}.pf-kpis .bad b{color:#FFB3B3}
.pf-est{font-style:normal;color:#FFD566;display:block}
.rg-cal ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}.rg-cal h3{display:flex;gap:10px;align-items:center;margin:0}
@media (max-width:700px){.ch-new,.pf-kpis{grid-template-columns:1fr}}
html[data-theme="light"] .ch-aprobado,html[data-theme="light"] .mt-hecho,html[data-theme="light"] .mt-agendado,html[data-theme="light"] .pf-kpis .ok b{color:#0B7A2E}
html[data-theme="light"] .ch-pendiente,html[data-theme="light"] .mt-pendiente,html[data-theme="light"] .mt-avisado,html[data-theme="light"] .pf-est{color:#7A4F00}
html[data-theme="light"] .ch-rechazado,html[data-theme="light"] .mt-cancelado,html[data-theme="light"] .pf-kpis .bad b{color:#B3161B}

/* ══ 2026-10-22 layout pass (Javier's screenshot): compact header, full-width job, all phases visible, one phase card ══ */
.rg-top{align-items:center}.rg-tabs{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}.rg-tabs .btn{min-height:40px;width:auto;padding:6px 14px}
.rg.focus{grid-template-columns:minmax(0,1fr)}.rg.focus .rg-left{display:none}
#rgMain .msg:empty,#tbQs:empty{display:none}
.ph-steps{display:flex;flex-wrap:wrap;overflow:visible;gap:6px}
.ph-step{min-height:44px;padding:4px 12px 4px 4px}.ph-step span{width:32px;height:32px}.ph-step em{max-width:none}
.ph-card{display:flex;flex-direction:column;gap:14px}
.ph-head h3{margin:0 0 4px}.ph-head p{margin:2px 0}
.ph-dict{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:12px;background:rgba(5,255,9,.05);border:1px solid rgba(5,255,9,.25)}
.ph-dtext{display:flex;gap:8px;align-items:flex-end}.ph-dtext textarea{flex:1;min-width:0;min-height:52px;padding:10px 12px;font:1rem var(--body);color:var(--ink);background:#0E0F11;border:1px solid #33363C;border-radius:9px;resize:vertical}
.ph-fields{margin-top:0}.ph-sub{grid-column:1/-1;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font:700 1.05rem var(--display)}
.pf-card summary{cursor:pointer;list-style:none}.pf-card[open]{display:flex;flex-direction:column;gap:10px}
@media (max-width:700px){.ph-dict{grid-template-columns:1fr}.ph-dtext{flex-direction:column;align-items:stretch}.rg-mic{width:100%}}
html[data-theme="light"] .ph-dtext textarea{background:#FFFFFF;border-color:rgba(17,27,33,.25)}
html[data-theme="light"] .ph-dict{background:#F2FBF1}
/* Registros header tabs: active state (2026-10-22) */
.rg-tabs .btn.on{border-color:rgba(5,255,9,.55);background:rgba(5,255,9,.10);color:var(--ink)}
html[data-theme="light"] .rg-tabs .btn.on{background:#E9FBE8;border-color:#04C707}

/* Registros tabs, one colour each (Javier 2026-10-22). The tabs used to sit in a <nav>, so the sidebar's "nav a" /
   "nav a.on::before" rules leaked in (green side bar, cramped size), and html[data-theme="light"] .btn (0,2,1) beat
   ".rg-tabs .rgt" (0,2,0) so the colours never showed. Now a <div role=navigation> + selectors that outrank the theme. */
html[data-theme] .rg-top{align-items:flex-end}
html[data-theme] .rg-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
html[data-theme] .rg-tabs .btn.rgt{--c:#04C707;--cs:rgba(4,199,7,.14);--ct:#05FF09;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;width:auto;padding:8px 18px;border-radius:12px;font:700 1rem var(--body);white-space:nowrap;
  border:2px solid var(--c);background:var(--cs);color:var(--ct);box-shadow:none;text-decoration:none}
html[data-theme] .rg-tabs .btn.rgt::before{content:none}
html[data-theme] .rg-tabs .btn.rgt-tab{--c:#F59E0B;--cs:rgba(245,158,11,.14);--ct:#FBBF24}
html[data-theme] .rg-tabs .btn.rgt-cal{--c:#A855F7;--cs:rgba(168,85,247,.16);--ct:#D8B4FE}
html[data-theme] .rg-tabs .btn.rgt:hover{filter:brightness(1.08)}
html[data-theme] .rg-tabs .btn.rgt.on{background:var(--c);color:#0B0C0E;box-shadow:0 4px 14px -6px var(--c)}
html[data-theme="light"] .rg-tabs .btn.rgt-cli{--ct:#027A04}
html[data-theme="light"] .rg-tabs .btn.rgt-tab{--ct:#92400E}
html[data-theme="light"] .rg-tabs .btn.rgt-cal{--c:#7E22CE;--cs:rgba(126,34,206,.10);--ct:#6B21A8}
html[data-theme="light"] .rg-tabs .btn.rgt-cal.on{color:#FFFFFF}
@media (max-width:700px){html[data-theme] .rg-tabs{justify-content:stretch;width:100%}html[data-theme] .rg-tabs .btn.rgt{flex:1 1 auto}}

/* Registro todo-en-uno (2026-10-22): guided flow cliente -> motivo */
.wz{display:flex;flex-direction:column;gap:14px}
.wz-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}.wz-head h3{margin:0;display:flex;align-items:center;gap:8px;flex:1 1 auto}
.wz-steps{display:flex;gap:8px;list-style:none;margin:0;padding:0}.wz-steps li{padding:4px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.wz-steps li.now{border-color:#04C707;color:var(--ink);font-weight:700}.wz-steps li.ok{color:#04C707}
.wz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.wz-grid h4,.wz h4{margin:6px 0}
.wz-q{width:100%;min-height:48px;padding:10px 14px;font:1rem var(--body);border-radius:10px;border:1.5px solid var(--line2);background:var(--surf2,#fff);color:var(--ink)}
.wz-new{display:grid;gap:10px}.wz-new label{display:flex;flex-direction:column;gap:4px}
.wz-new input{min-height:44px;padding:8px 12px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink)}
.wz-who{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}.wz-who>div{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.wz-job{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;border:1.5px solid rgba(4,199,7,.45);background:rgba(4,199,7,.06)}
.wz-job>div:first-child{display:flex;flex-direction:column}
.wz-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wz-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;border:1px solid var(--line2)}
.wz-opt:hover,.wz-opt:focus-visible,.wz-opt.on{border-color:#04C707;background:rgba(4,199,7,.08)}.wz-opt span{color:var(--muted)}.wz-opt .ic{color:#04C707}
.wz-tipos{margin-top:4px}
@media (max-width:760px){.wz-grid,.wz-opts{grid-template-columns:1fr}}
/* 2026-10-22: buttons in Registros fell back to the browser's 13.3px (rg-chip, rg-yn, rg-opts…). :where() keeps this at
   (0,0,1) so it only replaces the browser default, never .btn's own font. Hard rule: no text under 16px. */
:where([data-view="registros"], #ckEditor, #ptEditor) :where(button, input, select, textarea){font:inherit;font-size:max(1rem, 1em)}

.wz-tel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:12px;border-radius:12px;border:1.5px solid #F59E0B;background:rgba(245,158,11,.10)}
.wz-tel label{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;font-weight:700}
.wz-tel input{min-height:44px;padding:8px 12px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink)}

/* job "Más opciones" menu (cancel / change type / delete) */
.tb-more{position:relative}.tb-more>summary{list-style:none;cursor:pointer}.tb-more>summary::-webkit-details-marker{display:none}
.tb-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;gap:8px;min-width:300px;max-width:min(420px,90vw);padding:12px}
html[data-theme] .tb-menu .btn{justify-content:flex-start;text-align:left;width:100%}
html[data-theme] .tb-menu .btn.tb-del{border-color:#E53935;color:#C62828;background:rgba(229,57,53,.08)}
html[data-theme="dark"] .tb-menu .btn.tb-del{color:#FF8A8A}

/* customer page: each job row + its Opciones menu */
.tb-rowwrap{display:flex;align-items:flex-start;gap:8px}.tb-rowwrap>.tb-row{flex:1 1 auto;min-width:0}.tb-rowwrap>.tb-more{flex:none;margin-top:6px}
html[data-theme] #rgJobs.card{overflow:visible;position:relative;z-index:5}   /* the Opciones menu must not be clipped by the card */

/* Productos panel in the WhatsApp reply box (2026-10-22) */
.wx-tools{position:relative}
html[data-theme] .wx-prod{flex:1 1 100%;width:100%;margin-top:8px;max-height:min(55vh,460px);overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
html[data-theme] .wx-prod[hidden]{display:none}
.wp-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.wp-head b{display:flex;align-items:center;gap:6px}
.wp-head input{flex:1 1 220px;min-height:42px;padding:8px 12px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink)}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.wp-grid:empty{display:none}.wp-grid h5{grid-column:1/-1;margin:2px 0;font:700 1rem var(--display)}
.wp-card{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;border:1px solid var(--line2)}
.wp-card img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px}
.wp-noimg{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;border:1px dashed var(--line2);color:var(--muted)}
.wp-price{font:700 1.1rem var(--mono,monospace);font-variant-numeric:tabular-nums;color:#04C707}
.wp-card.off{opacity:.75}
html[data-theme="light"] .wp-price{color:#027A04}
/* compact product cards: photo beside name + price, buttons below */
.wp-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.wp-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 10px;align-items:center}
.wp-card img,.wp-card .wp-noimg{width:72px;height:72px;aspect-ratio:auto;grid-row:span 2}
.wp-card>b{align-self:end;line-height:1.25}.wp-card>.wp-price{align-self:start}
.wp-card>.btn{grid-column:1/-1;justify-content:center}

.wa-locked.wa-otro{border-color:#F59E0B;background:rgba(245,158,11,.10)}

/* ⏳ Esperando respuesta: we answered, the customer has not (2026-10-22) - calm blue-free slate, clearly not an alarm */
.wx-espera{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:#3A4049;color:#E6E9ED;font-weight:600;white-space:nowrap}
html[data-theme="light"] .wx-espera{background:#ECEEF1;border-color:#C5CAD1;color:#2E343B}

/* Cotizar desde el chat (2026-10-22) */
html[data-theme] .wx-cot{max-height:min(70vh,640px)}
.wc-sec{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin:0;display:flex;flex-direction:column;gap:8px}
.wc-sec legend{padding:0 6px;font-weight:700}
.wc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 12px}.wc-grid label{display:flex;flex-direction:column;gap:4px}.wc-wide{grid-column:1/-1}
.wx-cot input:not([type=checkbox]):not([type=radio]),.wx-cot select{min-height:42px;padding:8px 10px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink);width:100%;box-sizing:border-box}
.wc-line{display:grid;grid-template-columns:minmax(0,1fr) 86px auto;gap:8px;align-items:center}
.wc-res{display:flex;flex-direction:column;gap:4px;margin-top:6px}.wc-res button{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 10px;border-radius:8px;border:1px solid var(--line2)}
.wc-res button:hover,.wc-res button:focus-visible{border-color:#04C707;background:rgba(4,199,7,.08)}
.wc-total{margin:2px 0}.wc-total b{font-variant-numeric:tabular-nums}
.wc-falta{margin:0;padding:8px 10px;border-radius:10px;border:1px solid #F59E0B;background:rgba(245,158,11,.10)}

/* review before sending (2026-10-22, chat #3625) */
.wa-rev{margin:8px 0;padding:12px;display:flex;flex-direction:column;gap:8px;border-color:#F59E0B;background:rgba(245,158,11,.08)}
.wa-rev p{margin:0}.wa-rev blockquote{margin:0;padding:8px 12px;border-left:3px solid #04C707;background:var(--surf2,#fff);border-radius:6px;white-space:normal}
.wx-to{color:var(--ink)}.wx-revck{display:inline-flex;align-items:center;gap:6px}
html[data-theme] .wx-hint label.ck.wx-revck{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;min-height:0;vertical-align:baseline;width:auto}
html[data-theme] .wx-hint label.ck.wx-revck input{margin:0;width:18px;height:18px;min-height:0;padding:0}

/* quotes sent in this chat (2026-10-22) */
.wx-quotes{position:relative}.wx-quotes>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.wx-quotes>summary::-webkit-details-marker{display:none}
.wx-qmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:320px;max-width:min(440px,92vw);max-height:60vh;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.wx-qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px}
.wx-qrow>div{display:flex;flex-direction:column;gap:2px;min-width:0}.wx-qtot{font-variant-numeric:tabular-nums;font-weight:700}

/* Productos importados (2026-10-22) */
.im-tar>summary{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;cursor:pointer}.im-warn{color:#B26B00;font-weight:700}
.im-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px}.im-grid label{display:flex;flex-direction:column;gap:4px}.im-wide{grid-column:1/-1}
html[data-theme] .im-grid input,html[data-theme] .im-form textarea,html[data-theme] .im-grid textarea{min-height:42px;padding:8px 10px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink);width:100%;box-sizing:border-box}
.im-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px;align-items:start;margin:16px 0}
.im-form{display:flex;flex-direction:column;gap:12px}.im-form>label{display:flex;flex-direction:column;gap:4px}
.im-calc{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.im-precio{font:800 1.8rem var(--display);margin:0;font-variant-numeric:tabular-nums}
.im-tab{width:100%;border-collapse:collapse}.im-tab td{padding:4px 0;border-bottom:1px solid var(--line)}.im-tab td:last-child{text-align:right}
.im-tab .im-sub td{font-weight:700}.im-tab .ok td{color:#04C707;font-weight:700}
html[data-theme="light"] .im-tab .ok td{color:#027A04}
@media (max-width:900px){.im-cols{grid-template-columns:1fr}.im-calc{position:static}}
html[data-theme] .im-tab td{font-family:var(--body)}html[data-theme] .im-tab td.mono{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}
.im-precio span{font:600 1rem var(--body);color:var(--muted)}

/* create an imported product from Cotizar (2026-10-22) */
.wc-res button.wc-imp-btn{border-style:dashed;border-color:#04C707;font-weight:700;display:flex;align-items:center;gap:6px}
.wc-imp{display:flex;flex-direction:column;gap:8px;padding:10px;border-color:#04C707}.wc-imp label{display:flex;flex-direction:column;gap:4px}
html[data-theme] .wx-cot .wc-imp textarea{min-height:42px;padding:8px 10px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink);width:100%;box-sizing:border-box}

/* WhatsApp side panel (Acciones / ¿Qué falta? / Cliente): scales with the window (Javier 2026-10-22: "way too small") */
@media (min-width:1281px){html[data-theme] .wx-side{width:clamp(320px,28vw,440px)}}

/* sin existencia switch (2026-10-22) */
.wp-card.agot{opacity:.85;border-style:dashed}.wp-agot{font-style:normal;font-size:1rem;font-weight:700;color:#C62828;margin-left:6px}
.wp-agotlist{padding:8px 10px;border-radius:10px;border:1px solid #E53935;background:rgba(229,57,53,.07);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html[data-theme="dark"] .wp-agot{color:#FF8A8A}

.wc-line.wc-nf select{border-color:#F59E0B;background:rgba(245,158,11,.08)}.wc-line .wc-imp-line{grid-column:1/-1;justify-self:start}

/* importados: photo (2026-10-23) */
.im-foto{display:flex;flex-direction:column;gap:8px}.im-fotobtn{align-self:flex-start;cursor:pointer}
#imFotoPrev{max-width:220px;max-height:220px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:10px}

/* Cotizar: photo + SKU per line (2026-10-23) */
.wc-line{grid-template-columns:auto minmax(0,1fr) 86px auto}
.wc-prod{display:flex;flex-direction:column;align-items:center;gap:2px;width:96px}
.wc-prod img,.wc-prod .wc-noimg{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:8px}
.wc-prod .wc-noimg{display:grid;place-items:center;color:var(--muted);font-size:1rem;text-align:center;line-height:1.1}
.wc-prod .mono{font-size:1rem;word-break:break-all;text-align:center}
.wc-res button{display:flex;align-items:center;gap:10px}.wc-res button img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
#wiFotoPrev{max-width:160px;max-height:160px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:8px}
@media (max-width:700px){.wc-line{grid-template-columns:1fr 86px auto}.wc-prod{grid-column:1/-1;flex-direction:row;width:auto}}

.wc-line{grid-template-columns:72px minmax(0,1fr) 86px auto;grid-template-rows:auto auto;align-items:center}
.wc-line .wc-prod{grid-row:1 / span 2;width:auto}.wc-line .wc-sku{grid-column:2 / -1;grid-row:2;color:var(--muted);font-size:1rem;overflow-wrap:anywhere}
.wc-line .wc-imp-line{grid-column:1/-1;grid-row:3}
@media (max-width:700px){.wc-line{grid-template-columns:64px minmax(0,1fr) 72px auto}.wc-prod{grid-column:auto;flex-direction:column}}
.wc-line .wc-nota{color:var(--warn,#FBBF24);font-weight:600;font-family:var(--f-body,inherit)}   /* 2026-10-23: why a line was completed with another model */

/* Inicio · "Mi lista de hoy" (2026-10-24): one numbered checklist, big buttons, priority rail. Both themes via tokens; no blue */
section.tl{background:var(--surf);border:1px solid var(--edge);border-radius:16px;padding:16px;margin:4px 0 16px}
section.tl:empty{display:none}
.tl-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}.tl-h>.ic{width:28px;height:28px;color:var(--green);flex:none;margin-top:2px}
.tl-hi{font:700 1.3rem var(--display);display:block}.tl-h span{color:var(--ink)}
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tl-item{display:flex;gap:14px;background:var(--surf2);border:1px solid var(--edge);border-radius:12px;padding:14px;box-shadow:inset 5px 0 0 var(--rail,var(--muted))}
.tl-item.p1{--rail:var(--bad)}.tl-item.p2{--rail:var(--warn)}.tl-item.p3{--rail:var(--green2)}.tl-item.p4{--rail:var(--green)}.tl-item.p5{--rail:var(--muted)}
.tl-n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surf3);font:700 1.2rem var(--display);margin-left:4px}
.tl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tl-p{font-size:1rem;font-weight:600;color:var(--rail)}
.tl-q{font-size:1.15rem}.tl-c{color:var(--ink);overflow-wrap:anywhere}.tl-d{margin:4px 0 0;color:var(--muted);overflow-wrap:anywhere}
.tl-ask{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:8px 12px;border-radius:10px;background:rgba(5,255,9,.08);border:1px solid rgba(5,255,9,.28)}
.tl-ask .ic{color:var(--green);flex:none;margin-top:3px}
.tl-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tl-a .btn{min-height:44px}
.tl-more{margin-top:10px;width:100%}
@media (max-width:600px){section.tl{padding:12px}.tl-item{padding:12px;gap:10px}.tl-n{width:34px;height:34px}.tl-a .btn{flex:1 1 auto}}
html[data-theme="light"] .tl-ask{background:rgba(4,199,7,.08);border-color:rgba(11,122,46,.3)}
html[data-theme="light"] .tl-item.p3{--rail:#0B7A2E}

/* security pause banner (2026-10-25) */
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;justify-content:space-between;background:rgba(255,92,92,.14);
  border:2px solid var(--bad);border-radius:16px;padding:16px;margin:4px 0 16px}
.seg-b{display:flex;gap:12px;align-items:flex-start;flex:1 1 320px}.seg-b>.ic{width:30px;height:30px;color:var(--bad);flex:none}
.seg-b b{display:block;font:700 1.25rem var(--display);color:var(--ink)}.seg-b span{color:var(--ink)}
.seg p{margin:0;font-weight:600}.seg .btn{min-height:48px}
html[data-theme="light"] .seg{background:#FDEEEE}

/* ---- Estado de propuestas (2026-10-24, Yeison): no prices, plain words, big targets ---- */
.pp-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pp-bar input[type=search]{flex:1 1 280px;min-width:0}
.pp-mis{display:flex;gap:10px;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.pp-mis input{width:24px;height:24px;min-height:0;accent-color:var(--green2)}
.pp-fil{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pp-item{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;background:var(--surf2);color:var(--ink);border:1px solid var(--edge);
  border-radius:12px;padding:14px 14px 14px 20px;font:inherit;cursor:pointer;box-shadow:inset 5px 0 0 var(--rail,var(--muted))}
.pp-item:hover{border-color:var(--green2)}
.pp-ok{--rail:var(--green2)}.pp-warn{--rail:var(--warn)}.pp-bad{--rail:var(--bad)}.pp-gris{--rail:var(--muted)}
.pp-num{color:var(--muted);font-size:1rem}.pp-cli{font-size:1.15rem}
.pp-est{font-weight:600;display:flex;gap:8px;align-items:center}
.pp-est::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--rail);flex:none}
.pp-est.big{font-size:1.2rem;margin:4px 0 12px}
.pp-det{margin-top:12px;box-shadow:inset 5px 0 0 var(--rail,var(--muted));padding-left:22px}
.pp-det h3{font-size:1.4rem;margin:2px 0}
.pp-dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0 0 14px}
.pp-dl dt{color:var(--muted)}.pp-dl dd{margin:0;overflow-wrap:anywhere}
.pp-msg{background:var(--surf3);border-radius:10px;padding:12px 14px;margin:0 0 14px}.pp-msg p{margin:0 0 8px}
.pp-eq,.pp-hist{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.pp-aviso{background:var(--surf3);border-radius:10px;padding:12px 14px}
.pp-pag{align-items:center;gap:12px;margin-top:12px}
@media (max-width:560px){.pp-dl{grid-template-columns:1fr}.pp-dl dt{margin-top:6px}}
.pp-dl a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Inicio: one-line warning when an integration needs attention (the full list is in Monitoreo, 2026-10-25) */
.ini-aviso{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border-radius:10px;background:var(--surf2);
  border:1px solid var(--edge);box-shadow:inset 5px 0 0 var(--warn);font-weight:600}
.ini-aviso[hidden]{display:none!important}.ini-aviso .ic{color:var(--warn);width:22px;height:22px;flex:none}
.ini-aviso a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- Recogidas y entregas (2026-10-25): one card per package, step tracker, one big green button ---- */
.ent-bar{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:8px}
.ent-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.ent-card{background:var(--surf2);border:1px solid var(--edge);border-radius:12px;padding:16px 16px 14px 20px;display:flex;flex-direction:column;gap:10px;
  box-shadow:inset 5px 0 0 var(--rail,var(--muted));min-width:0}
.ent-listo{--rail:var(--warn)}.ent-recogido{--rail:var(--green2)}.ent-entregado{--rail:var(--muted)}
.ent-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ent-org{font-weight:700;padding:2px 10px;border-radius:999px;background:var(--surf3)}
.ent-card h3{font-size:1.25rem;margin:0}
.ent-pasos{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.ent-pasos li{flex:1;height:8px;border-radius:4px;background:var(--surf3)}
.ent-pasos li.hecho{background:var(--green2)}.ent-pasos li.ahora{background:var(--rail,var(--green2))}
.ent-ahora{margin:-2px 0 0}
.ent-items{margin:0;padding-left:20px;display:grid;gap:4px}
.ent-dest{display:flex;gap:10px;margin:0}.ent-dest .ic{width:22px;height:22px;flex:none;margin-top:2px}
.ent-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.ent-big{min-height:52px;font-size:1.1rem;flex:1 1 220px}
.ent-rec{display:flex;flex-direction:column;gap:4px;flex:1 1 100%}
.ent-ok{display:flex;gap:8px;align-items:center;font-weight:700;margin:0}
.ent-mas summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted)}
.ent-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px;margin:8px 0}
.ent-form label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}.ent-form .ent-wide{grid-column:1/-1}
.ent-form select,.ent-form input{width:100%;min-width:0}
.ent-hist{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.ent-nuevo{margin:8px 0 16px;display:flex;flex-direction:column;gap:8px}.ent-nuevo[hidden]{display:none!important}
.ent-vacio{background:var(--surf2);border-radius:12px;padding:20px;font-size:1.1rem}
.ent-card .btn.danger{color:var(--bad)}
.ent-espera{display:flex;gap:8px;align-items:center;flex:1 1 220px;margin:0;padding:12px 14px;border-radius:10px;background:var(--surf3);font-weight:600}.ent-espera .ic{width:22px;height:22px;flex:none}
/* Correo (2026-10-25) */
.co-envio{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--surf3);font-weight:600}
.co-envio .ic{width:22px;height:22px;flex:none}.co-envio.on{box-shadow:inset 5px 0 0 var(--green2)}.co-envio:not(.on){box-shadow:inset 5px 0 0 var(--warn)}
.co-bz .pp-item{position:relative;padding-right:60px;cursor:default}.co-bz-sel{position:absolute;right:16px;top:16px}.co-bz-sel input{width:24px;height:24px;accent-color:var(--green2)}
.co-n{display:inline-block;min-width:26px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--surf3);color:var(--ink);font-weight:700}
.co-item{min-width:0;max-width:100%;overflow-wrap:anywhere}.co-item>*{min-width:0;max-width:100%}   /* 2026-11-01: a long email address pushed the row 2px past a 390px phone */
.co-item .co-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.co-acc{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.co-acc .row{display:flex;gap:8px;flex-wrap:wrap}
.co-lbl{display:flex;flex-direction:column;gap:6px;font-weight:600}
.co-lbl textarea{width:100%;min-height:160px;font:inherit;font-size:1rem;line-height:1.5;resize:vertical}
.co-motivo{display:flex;gap:8px;align-items:center;margin:0;padding:12px 14px;border-radius:10px;background:var(--surf3);font-weight:600;box-shadow:inset 5px 0 0 var(--warn)}
.co-motivo.ok{box-shadow:inset 5px 0 0 var(--green2)}.co-motivo .ic{width:22px;height:22px;flex:none}
.co-seg{display:flex;gap:10px;padding:14px;border-radius:10px;background:var(--surf3);box-shadow:inset 5px 0 0 var(--bad)}.co-seg .ic{width:24px;height:24px;flex:none;color:var(--bad)}
.co-msgs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.co-m{padding:12px 14px;border-radius:10px;background:var(--surf3)}.co-m.out{box-shadow:inset 5px 0 0 var(--green2)}
.co-m p{margin:0 0 6px}
.co-cuerpo{white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto}

/* Javier 2026-10-26 ("I don't see an option to close Indicarle a Nova"): the title says what a click does - Abrir / Cerrar -
   and the open box keeps the chat visible (short text box). */
.wx-teachd>summary::after{content:"▾ Abrir";margin-left:auto;padding-left:14px;font-weight:700;color:var(--muted,#aab4bf)}
.wx-teachd[open]>summary::after{content:"✕ Cerrar";color:#E9EDF2}
.wx-teachd>summary{display:flex}
#waFoot .wx-teachd[open] .wx-in{flex:0 0 auto;height:76px;min-height:64px;max-height:160px}
/* the two options side by side and the button on the same row: the open box is ~200px, the chat keeps its room */
#waFoot .wx-teachd[open] .wx-teach{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
#waFoot .wx-teachd[open] .wx-teach > .wx-in{grid-column:1/-1}
#waFoot .wx-teachd[open] .wx-teach-o{display:flex;flex-wrap:wrap;gap:4px 18px}
#waFoot .wx-teachd[open] .wx-teach-o label{min-height:36px}
html[data-theme="light"] .wx-teachd[open]>summary::after{color:#1D2630}

/* 2026-10-26: Nova's "faltan" are suggestions, not blockers (Javier thought email/address were required) */
.wc-sug{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:9px;border:1px solid rgba(5,255,9,.25);background:rgba(5,255,9,.06);color:#d6dde4;margin:6px 0}
.wc-sug .ic{flex:none;width:18px;height:18px;margin-top:3px;color:#7CFF7E}
.wc-req{margin:4px 0 8px}
html[data-theme="light"] .wc-sug{color:#1d2630;background:rgba(4,199,7,.08);border-color:rgba(4,128,42,.3)}

/* Javier 2026-10-26 ("I don't see a button to send in Cotizar"; "why is the layout like that"): the panel scrolls inside the
   chat foot, so the create button sat below the fold. It now stays pinned at the bottom of the panel; envío is folded
   (optional); checkboxes are a row, not a tall empty box. */
html[data-theme] .wx-cot{padding-bottom:0}
.wc-acts{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:6px;margin:4px -12px 0;padding:10px 12px 12px;
  background:var(--surf,#111418);border-top:1px solid var(--line2);box-shadow:0 -10px 18px -12px rgba(0,0,0,.6)}
.wc-acts .row{display:flex;gap:8px;flex-wrap:wrap}
.wc-acts .msg:empty{display:none}
.wx-cot label.ck,.wc-grid label.ck{flex-direction:row!important;align-items:center;gap:8px}
.wx-cot label.ck input{width:20px;height:20px;min-height:0!important;flex:none}
.wc-envio summary{cursor:pointer;list-style:none;display:flex;gap:6px;align-items:center}
.wc-envio summary::before{content:"▸";color:var(--muted,#aab4bf)}
.wc-envio[open] summary::before{content:"▾"}
.wc-envio summary::-webkit-details-marker{display:none}
html[data-theme="light"] .wc-acts{background:#fff;box-shadow:0 -10px 18px -12px rgba(0,0,0,.18)}
/* Javier 2026-10-26 (Pendientes "look at this"): every "teach Nova" box (.wx-teach) had its textarea stretched to 180px by
   .wx-in's flex:1 1 180px inside a column - one tall card made the whole row tall. Short box, grows if the text is long. */
.wx-teach textarea.wx-in{flex:0 0 auto;height:72px;min-height:64px;max-height:200px}
.wx-pend .wx-teach{gap:8px}
.wx-pend .wx-teach > .btn{align-self:flex-start}
/* Javier 2026-10-26 ("make this go down more, why does it stop at less than half the screen"): while Cotizar or Productos
   is open the messages shrink to a short strip (last message still visible) and the panel takes the rest of the pane. */
@media (min-width:901px){
  .wx-conv:has(#waCot:not([hidden])) > .wa-msgs,.wx-conv:has(#waProd:not([hidden])) > .wa-msgs{flex:0 0 110px}
  .wx{height:calc(100dvh - 190px)}
}
@media (min-width:901px){
  /* while quoting: the WhatsApp title/stats/tabs step aside so the panel gets ~150px more (they come back on close) */
  [data-view="whatsapp"]:has(#waCot:not([hidden])) .wx-top,[data-view="whatsapp"]:has(#waCot:not([hidden])) .wx-tabs,
  [data-view="whatsapp"]:has(#waProd:not([hidden])) .wx-top,[data-view="whatsapp"]:has(#waProd:not([hidden])) .wx-tabs{display:none}
  [data-view="whatsapp"]:has(#waCot:not([hidden])) .wx,[data-view="whatsapp"]:has(#waProd:not([hidden])) .wx{height:calc(100dvh - 56px)}
  .wx-conv:has(#waCot:not([hidden])) > .wa-msgs,.wx-conv:has(#waProd:not([hidden])) > .wa-msgs{flex:0 0 80px}
}
/* Javier 2026-10-26 ("extend this a bit more, I don't like how small it is"): with a chat open on a computer the page
   title/stats row steps aside (tabs stay), the pane reaches the bottom of the window, and the hint under the reply box is
   one line - the messages get the height. */
@media (min-width:901px){
  /* only the title/stats and the buttons step aside; the Bandeja/Pendientes/Probar/Reglas tabs (inside .wx-top) stay */
  [data-view="whatsapp"]:has(.wx.chat-open) .wx-top > .wx-title,[data-view="whatsapp"]:has(.wx.chat-open) .wx-top > .row,
  [data-view="whatsapp"]:has(.wx.chat-open) #pushMsg{display:none}
  [data-view="whatsapp"]:has(.wx.chat-open) .wx-top{margin-bottom:8px}
  [data-view="whatsapp"]:has(.wx.chat-open) .wx{height:calc(100dvh - 140px)}
  .wx-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Javier 2026-10-26 ("I need this section to extend more"): with a chat open on a computer, the page padding (28/35/60px)
   shrinks to 12px and the chat area runs to the bottom of the window. */
@media (min-width:901px){
  .main:has(> [data-view="whatsapp"]:not([hidden]) .wx.chat-open){padding:12px 14px 10px}
  [data-view="whatsapp"]:has(.wx.chat-open) .wx-top{margin-bottom:0}
  [data-view="whatsapp"]:has(.wx.chat-open) .wx{margin-top:8px;height:calc(100dvh - 92px)}
}
/* ...and with no chat open too (Javier 2026-10-26 "look no change"): same 12px padding, list + panel to the window bottom */
@media (min-width:901px){
  .main:has(> [data-view="whatsapp"]:not([hidden]) .wx){padding:12px 14px 10px}
  [data-view="whatsapp"] .wx:not(.chat-open){height:calc(100dvh - 186px)}
}

/* chat header, two rows: the name and number never squeeze; Devolver a Nova stays one line */
@container wxchat (max-width:1100px){
  .wx-head .wx-who b{font-size:17px}
  .wx-head .wx-who .mono{white-space:nowrap}
  .wx-head .wa-actions .btn,.wx-head .wa-actions a.btn{white-space:nowrap}
}
/* 2026-10-26 (Javier: "the general container still stays the same size"): wider chat list so names fit, long messages
   may use more of the chat width */
@media (min-width:901px){
  .wx{grid-template-columns:clamp(350px,29vw,440px) minmax(0,1fr)}
  .wa-msgs .wb-grp{max-width:min(80%,680px)}
}
/* Javier 2026-10-26 ("it feels like I'm zoomed in"): compact density for WhatsApp on a computer - text stays 16px (his rule),
   the boxes around it shrink: buttons 36px, tighter padding, 16px icons, chat rows ~56px, line-height 1.35. */
@media (min-width:901px){
  [data-view="whatsapp"]{line-height:1.35}
  [data-view="whatsapp"] .btn{min-height:36px;padding:4px 12px}
  [data-view="whatsapp"] .btn .ic,[data-view="whatsapp"] .tabs .ic{width:16px;height:16px}
  [data-view="whatsapp"] .wx-tabs button,[data-view="whatsapp"] .wx-tabs a{min-height:36px;padding:4px 12px}
  [data-view="whatsapp"] select,[data-view="whatsapp"] input.field,[data-view="whatsapp"] .wx-left input{min-height:36px;padding-top:4px;padding-bottom:4px}
  .wx-left{gap:6px;padding:8px}
  .wx-row .wx-av,.wx-head .wx-av{width:30px;height:30px;font-size:16px}
  .wx-row .wx-state{padding:1px 8px}
  .wx-head{padding:6px 10px;row-gap:6px}
  .wx-head .btn{min-height:36px;padding:4px 12px}
  .wx-tools .btn{min-height:34px;padding:3px 10px}
  .wa-msgs .wb-grp{padding:6px 10px}
  .wx-chips .chip,[data-view="whatsapp"] .chips .chip{min-height:32px;padding:2px 10px}
}

/* Javier 2026-10-26 ("allow the text to be smaller" - it felt zoomed in): on a computer the content area (not the side
   menu) is scaled to 90%: text ~14.4px, buttons/icons/spacing in proportion, tools in frames (Asistente, etc.) too.
   Heights tied to the window are divided by .9 so every pane still reaches the bottom. Phones unchanged. */
@media (min-width:901px){
  .main{zoom:.9}
  .appview{height:calc(100vh / .9)}
  .vivo{height:calc(100vh / .9 - 88px)}
  .wx{height:calc(100dvh / .9 - 210px)}
  [data-view="whatsapp"] .wx:not(.chat-open){height:calc(100dvh / .9 - 186px)}
  [data-view="whatsapp"]:has(.wx.chat-open) .wx{height:calc(100dvh / .9 - 92px)}
  [data-view="whatsapp"]:has(#waCot:not([hidden])) .wx,[data-view="whatsapp"]:has(#waProd:not([hidden])) .wx{height:calc(100dvh / .9 - 56px)}
}
/* Javier 2026-10-26 ("why keep the chat boxes at that height, make them taller"): title + stats, tabs and buttons on ONE
   row on a computer; the list and the chat start ~70px higher and run to the bottom. */
@media (min-width:901px){
  [data-view="whatsapp"] .wx-top{display:flex!important;align-items:center;gap:14px;flex-wrap:nowrap;margin-bottom:0}
  [data-view="whatsapp"] .wx-top .wx-title{flex-direction:row;align-items:baseline;gap:12px;min-width:0;flex:0 1 auto}
  [data-view="whatsapp"] .wx-top .wx-title h2{font-size:22px;white-space:nowrap}
  [data-view="whatsapp"] .wx-top .wx-stats{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  [data-view="whatsapp"] .wx-top .wx-tabs{flex:none;margin:0}
  [data-view="whatsapp"] .wx-top > .row{margin-left:auto;flex:none}
  [data-view="whatsapp"] .wx:not(.chat-open){margin-top:10px;height:calc(100dvh / .9 - 96px)}
}
/* Javier 2026-10-26 (Pendientes "why is this like this?"): cards flow in columns like a board - a tall card no longer
   leaves empty space next to short ones; the answer box options sit side by side. */
@media (min-width:901px){
  .wx-pend{display:block!important;columns:3 340px;column-gap:10px}
  .wx-pend > *{break-inside:avoid;display:block;width:100%;margin:0 0 10px}
  .wx-pend .wx-teach{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}
  .wx-pend .wx-teach > .wx-in{grid-column:1 / -1}
  .wx-pend .wx-teach-o{display:flex;flex-wrap:wrap;gap:2px 14px}
  .wx-pend .wx-teach-o label{min-height:30px}
  .wx-pend .wx-teach > .btn{align-self:center;justify-self:end}
}
/* Javier 2026-10-26 ("47 mensajes is almost cut out - pay attention to the little details"): stats on their own short line
   under the title (never cut with "…"); tabs and buttons stay on the same row. */
@media (min-width:901px){
  [data-view="whatsapp"] .wx-top .wx-title{flex-direction:column;align-items:flex-start;gap:0;flex:1 1 auto}
  [data-view="whatsapp"] .wx-top .wx-title h2{font-size:20px;line-height:1.2}
  [data-view="whatsapp"] .wx-top .wx-stats{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
}
@media (min-width:901px){ [data-view="whatsapp"] .wx-top .wx-stats{white-space:nowrap} }
@media (min-width:901px) and (max-width:1180px){ [data-view="whatsapp"] .wx-top .wx-stats{white-space:normal} }

/* Lista de espera (2026-10-26): one card per product, people below; DCI green accent only */
.esp-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:4px 0 8px}
.esp-top p{margin:0;max-width:70ch}
.esp-hist{display:inline-flex;gap:8px;align-items:center;color:var(--muted);cursor:pointer}
.esp-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));align-items:start}
.esp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.esp-h{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.esp-h h3{margin:0 0 2px;font:700 1.15rem var(--display);color:var(--ink)}
.esp-txt{margin:10px 0 4px}
.esp-txt summary{cursor:pointer;color:var(--muted);font-weight:600;min-height:36px;display:flex;align-items:center}
.esp-txt textarea{width:100%;min-height:96px;margin-top:6px}
.esp-txt p{margin:6px 0 0}
.esp-rows{list-style:none;margin:10px 0 0;padding:0;display:grid}
.esp-rows li{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
.esp-rows li.done{opacity:.6}
.esp-who{display:flex;flex-direction:column;min-width:0}
.esp-when{font-size:1rem}
.esp-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.esp-tag{border:1px solid var(--warn);color:var(--warn);border-radius:999px;padding:2px 10px;font-weight:600}
.esp-tag.bad{border-color:var(--bad);color:var(--bad)}
.esp-empty{padding:24px 0}

/* Lo que Nova sabe (2026-10-27) */
.sabe-semsel select{min-height:40px}
.sabe-stats{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.kb-chip.bad{border-color:var(--bad);color:var(--bad)}
.sabe-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));align-items:start}
.sabe-h{margin:0 0 8px;font:700 1.15rem var(--display);color:var(--ink)}
.sabe-grid h4{margin:12px 0 4px;font:600 1rem var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sabe-pts{margin:4px 0 0;padding-left:20px;display:grid;gap:6px}
.sabe-pts li{line-height:1.45}
.sabe-pts li::marker{color:var(--green)}
.sabe-by{display:block;font-size:1rem}
.sabe-quito summary{cursor:pointer;color:var(--muted);min-height:36px;display:flex;align-items:center}
.sabe-qs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sabe-q{border-top:1px solid var(--line2);padding-top:10px;display:grid;gap:8px}
.sabe-q:first-child{border-top:0;padding-top:0}
.sabe-qt{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.sabe-nova{font-style:italic}
.sabe-q textarea{width:100%;min-height:72px}
.sabe-acts{display:flex;gap:6px;flex-wrap:wrap}
.sabe-todo-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#sabeBuscar{width:100%;margin:4px 0 10px;min-height:40px}
.sabe-sec{border-top:1px solid var(--line2)}
.sabe-sec summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.sabe-sec[open] summary{color:var(--green)}
.sabe-sec .sabe-pts{padding-bottom:10px}

/* Correo: answer yourself + teach Nova (2026-10-27) */
.co-mas{margin-top:10px;border-top:1px solid var(--line2);padding-top:6px}
.co-mas summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.co-mas[open] summary{color:var(--green)}
.co-lec{padding:12px 14px;display:grid;gap:4px}
.co-lec p{margin:0;overflow-wrap:anywhere}
.co-lec.off{opacity:.6}
.co-lec .btn{justify-self:start}

/* ---- Mensajes header with six tabs (2026-10-27, Javier's screenshot at a 942px window: the one-row header of 10-26 no
   longer fits - the title shrank to 0px, the tab bar slid over the stats, the refresh button went off-screen and the page
   scrolled sideways). 901-1899px: title + buttons on row 1, tabs on row 2, chat area 54px shorter so the page does not
   scroll (measured at 942px: no overlap, no scroll, chat ends inside the screen). 1900px+: one row with the short tab
   labels; the tab bar may shrink and scroll inside itself and the title keeps 280px, so nothing can overlap. ---- */
@media (min-width:901px) and (max-width:1899px){
  [data-view="whatsapp"] .wx-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 14px}
  [data-view="whatsapp"] .wx-top .wx-title{grid-column:1;grid-row:1;min-width:0}
  [data-view="whatsapp"] .wx-top > .row{grid-column:2;grid-row:1;margin-left:0}
  [data-view="whatsapp"] .wx-top .wx-tabs{grid-column:1 / -1;grid-row:2;justify-self:start;max-width:100%;overflow-x:auto;scrollbar-width:thin}
  [data-view="whatsapp"] .wx-top .wx-stats{white-space:normal}
  [data-view="whatsapp"] .wx:not(.chat-open){height:calc(100dvh / .9 - 150px)}
}
@media (min-width:1900px){
  [data-view="whatsapp"] .wx-tabs .tl{display:none}[data-view="whatsapp"] .wx-tabs .ts{display:inline}
  [data-view="whatsapp"] .wx-top .wx-title{min-width:280px}
  [data-view="whatsapp"] .wx-top .wx-tabs{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}
}
@media (max-width:900px){
  .wx-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* revisión visual 2026-10-27 (390px): the 7-day summary chip did not wrap and pushed the page 106px sideways */
.sabe-stats .kb-chip{white-space:normal;max-width:100%;overflow-wrap:anywhere}

/* WhatsApp checks (2026-10-27) */
.wb-tick{margin-left:5px;font-weight:700;letter-spacing:-3px;color:var(--time,#AEB4BC)}
.wb-tick.read{color:#2FBF4A}
html[data-theme="dark"] .wb-tick.read{color:#5DFF6A}
.wb-tick.failed{color:var(--bad);letter-spacing:0}

/* Importados: drop zone (2026-10-27) */
.im-drop{border:2px dashed var(--line2);border-radius:12px;padding:14px 16px;display:grid;gap:4px;margin:4px 0 10px;cursor:default}
.im-drop b{display:flex;gap:8px;align-items:center;color:var(--ink)}
.im-drop.on{border-color:var(--green);background:rgba(5,255,9,.06)}
.im-droplink{color:var(--green);text-decoration:underline;cursor:pointer;font-weight:600}
.im-adjs{display:flex;gap:8px;flex-wrap:wrap}
.im-adj{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line2);border-radius:8px;padding:4px 6px;max-width:100%}
.im-adj img{width:40px;height:40px;object-fit:cover;border-radius:4px}
.im-adj span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Correo: risk card (2026-10-27) - kind, reason, signals, what to check, two verdicts */
.co-riesgo{display:grid;gap:12px;margin:4px 0 14px;padding:16px 18px;border-radius:12px;background:var(--surf3);box-shadow:inset 6px 0 0 var(--bad)}
.co-r-top{display:flex;gap:12px;align-items:center}
.co-r-top .ic{width:28px;height:28px;flex:none;color:var(--bad)}
.co-r-top b{display:block;font-size:1.15em;color:var(--ink)}
.co-r-top span{color:var(--muted)}
.co-riesgo .co-r-mot{margin:0;font-weight:600;color:var(--ink);font-size:1.05em;line-height:1.5}
.co-r-h{margin:0 0 4px;font-weight:700;color:var(--muted)}
.co-r-sen{margin:0;padding-left:20px;display:grid;gap:4px;line-height:1.45;overflow-wrap:anywhere}
.co-r-ver{padding:10px 14px;border-radius:10px;background:var(--surf2,rgba(255,255,255,.04));border:1px solid var(--line)}
.co-r-ver p:last-child{margin:0;line-height:1.5}
.co-riesgo .row{display:flex;gap:8px;flex-wrap:wrap}
.co-riesgo .row .btn{flex:1 1 220px}
.co-riesgo .muted{margin:0}

/* Agenda de visitas (2026-10-27) - reuses the Recogidas cards; chips for day and hour, a summary strip */
.vis-res{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin:0 0 12px}
.vis-n{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surf2);border:1px solid var(--edge);color:var(--ink);text-decoration:none}
.vis-n b{font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.1}.vis-n span{color:var(--muted)}
.vis-n.hot{border-color:var(--warn);box-shadow:inset 4px 0 0 var(--warn)}
.vis-card{--rail:var(--muted)}.vis-por_agendar{--rail:var(--warn)}.vis-agendada{--rail:var(--green2)}.vis-tarde{--rail:var(--bad)}
.vis-top{display:flex;gap:14px;align-items:center}
.vis-q{display:flex;flex-direction:column;gap:2px;min-width:0}.vis-q h3{margin:0;font-size:1.2rem;overflow-wrap:anywhere}
.vis-hora{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:8px 10px;border-radius:10px;background:var(--surf3)}
.vis-hora b{font-size:1.35rem;font-variant-numeric:tabular-nums}.vis-hora span{color:var(--muted)}
.vis-mot{margin:0;line-height:1.45;overflow-wrap:anywhere}
.vis-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}.vis-meta .ic{width:20px;height:20px}
.vis-tag{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:999px;background:var(--surf3);font-weight:600}
.vis-tag .ic{width:18px;height:18px}.vis-tag.ok{color:var(--green2)}.vis-tag.warn{color:var(--warn)}
.vis-aviso{display:flex;gap:8px;align-items:center;margin:0;padding:8px 12px;border-radius:10px;background:var(--surf3);font-weight:700;color:var(--bad)}
.vis-aviso .ic{width:20px;height:20px;flex:none}
.vis-ag{display:flex;flex-direction:column;gap:10px;padding-top:4px;border-top:1px solid var(--edge)}
.vis-step{margin:0;font-weight:700}
.vis-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.vis-horas{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.vis-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;padding:6px;border-radius:10px;border:1px solid var(--edge);background:var(--surf3);color:var(--ink);cursor:pointer;font:inherit}
.vis-chip span{color:var(--muted)}
.vis-chip.on{border-color:var(--green2);box-shadow:inset 0 0 0 2px var(--green2)}
.vis-chip.ocupada{opacity:.55;text-decoration:line-through}
.vis-ya{display:flex;gap:8px;margin:0;color:var(--muted)}.vis-ya .ic{width:20px;height:20px;flex:none}
.vis-check{display:flex;gap:10px;align-items:center;min-height:44px}
.vis-check input{width:20px;height:20px}
.vis-mas{display:grid;gap:8px;margin:8px 0}.vis-mas label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.vis-dia{margin:14px 0 8px;font-size:1.1rem}
.vis-cerr{margin-top:16px}.vis-cerr summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted)}

/* Reglas: when Nova reads a section + '¿Qué leería Nova?' (2026-10-27) */
.kb-lt{display:inline-block;padding:0 8px;border-radius:999px;background:var(--surf3);font-weight:600}
.kb-lt.tema{color:var(--green2)}
.kb-lec{border:1px solid var(--edge);border-radius:12px;padding:12px 14px;margin:4px 0 10px;display:grid;gap:8px;min-width:0}
.kb-lec[hidden]{display:none!important}
.kb-lec legend{font-weight:700;padding:0 6px}
.kb-opt{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer}
.kb-opt input{width:20px;height:20px;margin-top:2px;flex:none}
.kb-tema{display:grid;gap:6px}.kb-tema[hidden]{display:none!important}
.kb-tema input{width:100%;min-width:0}
.kb-probar{margin:12px 0;display:grid;gap:8px}
.kb-probar h3{margin:0}.kb-probar .row{display:flex;gap:8px;flex-wrap:wrap}
.kb-probar .row input{flex:1 1 260px;min-width:0}
.kb-probar-res ul{margin:4px 0;padding-left:20px;display:grid;gap:4px}
.kb-probar-res p{margin:4px 0}
#kbUso{white-space:normal;max-width:100%;flex-wrap:wrap}

/* Marketing (Nova on Facebook + Instagram, 2026-10-27) */
.mk-estado{display:grid;gap:12px;margin-bottom:16px}.mk-estado.activo{border-color:var(--green2)}
.mk-est-t{display:flex;gap:12px;align-items:flex-start}.mk-est-t .dot{margin-top:10px;flex:none}.mk-est-t h3{margin:0 0 4px}
.mk-falta{display:flex;gap:8px;align-items:flex-start;margin:0}.mk-meta{margin:0}
.mk-plan{margin-bottom:16px}.mk-plan p{margin:4px 0}
.mk-cal{margin:8px 0 20px}.mk-h{font-size:1.25rem;margin:0 0 8px}.mk-dia{margin:14px 0 8px;color:var(--muted);font-weight:600}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.mk-p{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;border:1px solid var(--edge);border-radius:12px;padding:10px;background:var(--surf)}
.mk-img img,.mk-noimg{width:132px;aspect-ratio:4/5;object-fit:cover;border-radius:8px;display:block;background:var(--surf2)}
.mk-p.story .mk-img img,.mk-p.story .mk-noimg{aspect-ratio:9/16}
.mk-noimg{display:grid;place-items:center;text-align:center;padding:8px;color:var(--muted)}
.mk-body{min-width:0;display:grid;gap:4px;align-content:start}.mk-body p{margin:0}
.mk-top{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.mk-top b{font-family:var(--mono)}
.mk-tit{font-weight:700;font-size:1.05rem;line-height:1.25}.mk-g{color:var(--green)}
.mk-prob{margin:2px 0;padding-left:18px}.mk-txt{white-space:pre-wrap;background:var(--surf2);padding:8px;border-radius:8px;margin:4px 0;font:inherit;max-height:260px;overflow:auto}
.mk-apr{margin-top:10px}.mk-temp{margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mk-temp h3{width:100%;margin:0}
.mk-sec{margin-bottom:14px}.mk-sec summary{cursor:pointer;list-style:none}.mk-sec summary h3{margin:0}.mk-sec[open] summary{margin-bottom:10px}
.mk-sec textarea{width:100%;min-height:320px;font:inherit;line-height:1.5}
.mk-promo{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--edge);padding:8px 0}
.mk-promo>div{display:grid;min-width:0}.mk-wide{grid-column:1/-1}
@media (max-width:520px){.mk-p{grid-template-columns:96px minmax(0,1fr)}.mk-img img,.mk-noimg{width:96px}}
.mk-manual{max-height:420px}

/* 2026-10-29 Importados: Streakwave / DCI TECH USA purchases */
.im-sw{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.im-sw>p{margin:0}
.im-swnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.im-swnums>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.im-swnums span{color:var(--muted)}.im-swnums b{font:800 1.5rem var(--display);font-variant-numeric:tabular-nums}.im-swnums small{color:var(--muted);font-size:1rem}
.im-sw details>summary{cursor:pointer;padding:6px 0}.im-swq{display:flex;flex-direction:column;gap:4px;margin:8px 0;max-width:420px}
html[data-theme] .im-swq input{min-height:42px;padding:8px 10px;font:1rem var(--body);border-radius:9px;border:1px solid var(--line2);background:var(--surf2,#fff);color:var(--ink)}
@media (max-width:900px){.im-swnums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.im-swnums{grid-template-columns:1fr}}
.im-sw a{color:var(--green);font-weight:700;text-underline-offset:3px}   /* Integra: no blue (links too) */

/* Finanzas > Costo de ventas (2026-10-29) */
.cv-top{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.cv-top>p{margin:0}
.cv-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cv-nums>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cv-nums span{color:var(--muted)}.cv-nums b{font:800 1.5rem var(--display);font-variant-numeric:tabular-nums}.cv-nums small{color:var(--muted);font-size:1rem}
.cv-nums .cv-est{color:var(--warn)}
.cv-carga{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cv-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 10px}.cv-bar input{min-width:240px;flex:0 1 320px}
.cv-tab td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.cv-tab td.bad{color:var(--bad)}
.cv-row{cursor:pointer}.cv-row:hover>td,.cv-row.on>td{background:rgba(5,255,9,.05)}
.cv-detalle{display:flex;flex-direction:column;gap:10px;padding:6px 0 10px}.cv-detalle h4{margin:6px 0 0}
.cv-detalle a{color:var(--green);font-weight:700}
@media (max-width:900px){.cv-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cv-nums{grid-template-columns:1fr}.cv-bar input{min-width:0;flex:1 1 100%}}

/* ===== Readable controls (Javier 2026-10-29: "a lot of buttons just have an outline, no background - you barely notice
   the X, the back button, the close button; menus and sections need their own contrast"). Every secondary control now has
   a tinted fill + an edge >= 3:1 against the card it sits on (WCAG non-text contrast), and states differ by fill, not by
   a hairline. Primary (green) buttons are unchanged. Loaded last; html[data-theme] keeps it above the older theme rules,
   while the coloured Registros tabs / delete buttons (more specific) keep their own colours. */
html[data-theme="light"]{--c-bg:#EBEEE8;--c-edge:#78838A;--c-ink:#111B21;--c-hbg:#D8F3D5;--c-hedge:#04A106;--c-hink:#0A5C23;
  --c-sh:0 1px 0 rgba(17,27,33,.12),inset 0 1px 0 rgba(255,255,255,.9);--c-on-bg:#0B7A2E;--c-on-ink:#FFFFFF;
  --n-on-bg:#D8F3D5;--n-on-ink:#08471B;--n-bar:#04A106}
html[data-theme="dark"]{--c-bg:#2A2E35;--c-edge:#646C77;--c-ink:#F2F4F6;--c-hbg:#1F3A26;--c-hedge:#05FF09;--c-hink:#FFFFFF;
  --c-sh:0 1px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);--c-on-bg:#04C707;--c-on-ink:#04110A;
  --n-on-bg:rgba(5,255,9,.17);--n-on-ink:#FFFFFF;--n-bar:#05FF09}

/* secondary + ghost buttons ("Actualizar", "Ahora no", "Abrir chat", X, volver...) */
html[data-theme] .btn:not(.primary):not(.ms):not(.danger):not(.wx-push):not(.on),html[data-theme] .iconbtn,html[data-theme] .wa-back{
  background:var(--c-bg);border:1px solid var(--c-edge);color:var(--c-ink);box-shadow:var(--c-sh)}
html[data-theme] .btn:not(.primary):not(.ms):not(.danger):not(.wx-push):not(.on):hover,html[data-theme] .iconbtn:hover,html[data-theme] .wa-back:hover{
  background:var(--c-hbg);border-color:var(--c-hedge);color:var(--c-hink)}
html[data-theme] .btn:not(.primary):not(.ms):not(.danger):not(.wx-push):not(.on) .ic,html[data-theme] .iconbtn .ic{color:inherit}
/* icon-only buttons (close X, back, refresh): a little heavier stroke so the symbol reads at a glance */
html[data-theme] .btn.icon .ic,html[data-theme] .iconbtn .ic,html[data-theme] .wa-back .ic{stroke-width:2.4}
html[data-theme] .btn.danger,html[data-theme] .ent-card .btn.danger{background:rgba(229,57,53,.10);border:1px solid #D32F2F;color:#B71C1C}
html[data-theme="dark"] .btn.danger,html[data-theme="dark"] .ent-card .btn.danger{background:rgba(255,92,92,.14);border-color:#FF6B6B;color:#FFB3B3}
html[data-theme] .btn:disabled{opacity:.55}

/* filter chips + segmented filters: unselected = tinted pill with a real edge; selected = solid fill */
html[data-theme] .wx-chip,html[data-theme] .wx-left .wx-chip,html[data-theme] .rg-chip{background:var(--c-bg);border:1px solid var(--c-edge);color:var(--c-ink)}
html[data-theme] .wx-chip:hover,html[data-theme] .rg-chip:hover{background:var(--c-hbg);border-color:var(--c-hedge);color:var(--c-hink)}
html[data-theme] .wx-chip.on,html[data-theme] .wx-left .wx-chip.on,html[data-theme] .rg-chip.on,
html[data-theme] .wx-chip[aria-pressed="true"]{background:var(--c-on-bg);border-color:var(--c-on-bg);color:var(--c-on-ink)}

/* section tabs (Mensajes: Bandeja / Pendientes / Probar...): each tab is a visible button, the open one solid green */
html[data-theme] .wx-tabs .tab:not(.on){background:var(--c-bg);box-shadow:inset 0 0 0 1px var(--c-edge);color:var(--c-ink)}
html[data-theme] .wx-tabs .tab:not(.on) .ic{color:inherit}
html[data-theme] .wx-tabs .tab:not(.on):hover{background:var(--c-hbg);box-shadow:inset 0 0 0 1px var(--c-hedge);color:var(--c-hink)}
html[data-theme] .tab:not(.on){color:var(--c-ink)}

/* side menu: the open section is a solid block with a green bar; group titles separated by a rule */
html[data-theme] nav a.on{background:var(--n-on-bg);color:var(--n-on-ink);font-weight:700}
html[data-theme] nav a.on::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--n-bar);box-shadow:none}
html[data-theme] nav .grp{padding-top:10px;border-top:1px solid var(--line2)}
html[data-theme] nav .grp:first-child{border-top:0;padding-top:0}
html[data-theme] .rail-btn{color:var(--c-ink)}
html[data-theme] .rail-btn:hover{background:var(--c-hbg);color:var(--c-hink)}

/* Informe de Nova (Mensajes › Sabe, 2026-10-29) */
.inf-card{margin-bottom:14px}.inf-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inf-h .sabe-h{margin-right:auto}
#infDia{min-height:40px}.inf-card h4{margin:14px 0 6px}.inf-card p{margin:10px 0}

/* Reolink one-click refresh (2026-10-30) */
.im-rlact{margin:12px 0;padding:12px 14px;border:1px solid var(--line2);border-radius:12px}
.im-rlact ol{margin:8px 0 8px 22px;padding:0}.im-rlact li{margin:6px 0}
.im-rlbm{cursor:grab}
.im-rlbox{position:fixed;z-index:9999;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(640px,calc(100vw - 32px));padding:14px 18px;border-radius:12px;background:#1B1E22;color:#F2F4F6;border:1px solid #05FF09;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.im-rlbox.bad{border-color:#FF5C5C}

/* Sincronización de proveedores (2026-10-30): one summary card per provider; the selected one is the open tab */
.prov-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 14px}
@media (max-width:1200px){.prov-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.prov-cards{grid-template-columns:1fr}}
.prov-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border-radius:12px;cursor:pointer;
  background:var(--c-bg);border:1px solid var(--c-edge);color:var(--c-ink);box-shadow:var(--c-sh);font:inherit;min-width:0}
.prov-card b{font-size:1.1rem}.prov-card span{max-width:100%;overflow-wrap:anywhere}
.prov-card:hover,.prov-card:focus-visible{background:var(--c-hbg);border-color:var(--c-hedge);color:var(--c-hink)}
.prov-card.on{border-width:2px;border-color:var(--c-hedge)}
.prov-card.warn{border-left:5px solid var(--warn)}.prov-card.run{border-left:5px solid var(--c-hedge)}.prov-card.ok{border-left:5px solid var(--ok)}
.pill.run{color:var(--c-hink);border-color:var(--c-hedge)}.pill.bad{color:var(--bad);border-color:rgba(255,92,92,.5)}
.prov-tabs{margin:0 0 12px}
.prov-run{margin:0 0 10px}

/* 2026-10-30 (Javier, chat #9749): the asesor sets the unit price on each line of Cotizar desde el chat */
.wc-line{grid-template-columns:72px minmax(0,1fr) 150px 86px auto}
.wc-line .wc-precio{display:flex;align-items:center;gap:6px}
.wc-line .wc-precio i{font-style:normal;color:var(--muted);font-weight:600}
.wc-line .wc-precio input{width:100%;min-width:0;font-variant-numeric:tabular-nums}
.wc-line .wc-imp-line{grid-row:4}
@media (max-width:700px){.wc-line{grid-template-columns:64px minmax(0,1fr) 72px auto}.wc-line .wc-precio{grid-column:2 / -1;grid-row:3}}
/* Ajustes › Grupos (2026-10-30) */
.grp-intro{max-width:72ch;margin:0 0 12px}
.grp-bar{display:flex;justify-content:flex-end;margin-bottom:12px}
.grp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.grp-card{display:flex;flex-direction:column;gap:8px}
.grp-card .grp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grp-card .grp-head b{font-size:1.1em}
.grp-card p{margin:0}
.grp-card .apps{display:flex;flex-wrap:wrap;gap:6px}
.grp-card .grp-act{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.grp-form{margin-bottom:12px}
.grp-form .acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
@media (max-width:700px){.grp-list{grid-template-columns:1fr}}

/* En vivo (2026-11-01): who is on the website and the store now (Visitas GT, CT 152) */
.ev-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.ev-ctl .pp-fil{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cv-nums .ev-live{color:var(--ok)}
.ev-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ev-card{border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ev-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ev-page{display:flex;gap:8px;align-items:flex-start;min-width:0}
.ev-page>div{display:flex;flex-direction:column;min-width:0}
.ev-page b,.ev-page small{overflow-wrap:anywhere}
.ev-page small,.ev-top>.muted{color:var(--muted);font-size:1rem;white-space:nowrap}
.ev-meta{margin:0;color:var(--muted);overflow-wrap:anywhere}
.ev-meta b{color:inherit;font-weight:600}
.ev-card .btn{align-self:flex-start}
.ev-rec{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.ev-rec li{overflow-wrap:anywhere}
.ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.ev-bars h4{margin:0 0 8px}
.ev-bar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:3px 0}
.ev-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-bar i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--ok),rgba(61,220,90,.35));width:var(--w)}
.ev-bar b{font-variant-numeric:tabular-nums}
@media (max-width:1100px){.ev-list{grid-template-columns:1fr}}
@media (max-width:700px){.ev-grid{grid-template-columns:1fr}.ev-top{flex-direction:column}}

/* Centro de seguridad (2026-11-01): switches, world map, numbers. Red only for danger (attacks, switched off). */
.sg-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.sg-bar .pp-fil,.sg-head .pp-fil{display:flex;flex-wrap:wrap;gap:6px}
.sg-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.sg-head h3{margin:0}
.sg-sws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.sg-sw{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:12px;padding:12px 14px;min-width:0}
.sg-sw.off{border-left-color:var(--bad)}
.sg-sw>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.sg-sw small{color:var(--muted);font-size:1rem;overflow-wrap:anywhere}
.sg-sw .btn{flex:0 0 auto;max-width:55%;white-space:normal;text-align:center}
.sg-alarma{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid rgba(255,92,92,.5);background:rgba(255,92,92,.08);border-radius:12px;padding:12px 14px;margin:10px 0}
.sg-alarma>div{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}
.sg-alarma small{color:var(--muted);font-size:1rem}
.sg-map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start}
.sg-map{width:100%;height:auto;display:block;background:var(--surf2,rgba(255,255,255,.02));border-radius:12px}
.sg-map path{fill:var(--line2);stroke:var(--bg,#0B0C0E);stroke-width:.4}
.sg-map path.sg-ok{fill:rgba(61,220,90,var(--a))}
.sg-map path.sg-th{fill:rgba(255,92,92,var(--a))}
.sg-map circle{stroke:#fff;stroke-width:.8;fill-opacity:.85}
.sg-map circle.sg-ok{fill:#3DDC5A}.sg-map circle.sg-th{fill:#FF5C5C}
.sg-top{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.sg-top li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:4px}
.sg-top b{font-variant-numeric:tabular-nums}
.sg-nums{grid-template-columns:repeat(5,minmax(0,1fr))}
.cv-nums .sg-bad{color:var(--bad)}.cv-nums .sg-warn{color:var(--warn)}
.sg-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.sg-2>.card{min-width:0}
.sg-txt{max-width:420px;overflow-wrap:anywhere}
.sg-ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.sg-ul li{overflow-wrap:anywhere}
html[data-theme]:not([data-theme="dark"]) .sg-map path{stroke:#fff}
@media (max-width:1200px){.sg-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.sg-map-wrap,.sg-2,.sg-sws{grid-template-columns:1fr}}
@media (max-width:700px){.sg-nums{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-sw{flex-direction:column;align-items:stretch}.sg-sw .btn{max-width:none}}
@media (max-width:420px){.sg-nums{grid-template-columns:1fr}}

/* En vivo: chat satisfaction (2026-11-01) */
.ev-enc{grid-template-columns:repeat(3,minmax(0,1fr))}
.cv-nums .ev-small{font:600 1.05rem var(--body,inherit)}
.ev-com{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ev-com li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.ev-com li>small{grid-column:2}
.ev-com li>span{overflow-wrap:anywhere}
.ev-st{color:var(--warn);letter-spacing:1px;white-space:nowrap}
@media (max-width:700px){.ev-enc{grid-template-columns:1fr}}

/* Pendientes (Javier 2026-11-02): docs/todo.json, one panel per section, filled filter buttons */
.pd-filtro{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pd-sec h3{margin:0 0 10px;font-size:1.15rem}
.pd{list-style:none;margin:0;padding:0}
.pd-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.pd-i:first-child{border-top:0;padding-top:4px}
.pd-i .pill{white-space:nowrap;min-width:7.5em;text-align:center}
.pd-t{margin:0;font-weight:500;overflow-wrap:anywhere}
.pd-n{margin:4px 0 0;overflow-wrap:anywhere}
.pd-done .pd-t{color:var(--muted)}
@media (max-width:560px){.pd-i{grid-template-columns:1fr;gap:6px}.pd-i .pill{justify-self:start;min-width:0}}

/* En vivo (Javier 2026-11-02: website and store visits looked the same): one colour per site, filter above the numbers */
.ev-sitios{margin:0 0 12px}
.pill.ev-s-sitio{color:var(--ok);border-color:rgba(61,220,90,.45)}
.pill.ev-s-tienda{color:var(--warn);border-color:rgba(251,191,36,.45)}
.ev-card.ev-c-tienda{border-left-color:var(--warn)}

/* ---- Mensajes on a phone (Javier 2026-11-05: "the bandeja and pendientes take over the phone screen too much, create a
   menu that consolidates"). One compact header row, one 4-button bar (Bandeja · Pendientes · Espera · Más), Probar /
   Sabe / Reglas inside "Más", search + estado on one line, filter chips on one scrolling line. Desktop unchanged. ---- */
.wx-mas{display:none}
@media (max-width:900px){
  .wx-top{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin-bottom:8px}
  .wx-top .wx-title{grid-column:1;grid-row:1;align-self:center}.wx-top .wx-title h2{font-size:1.5rem;line-height:1.2}
  .wx-top [data-reload]{grid-column:2;grid-row:1;align-self:center;min-height:44px;min-width:44px;padding:6px}
  .wx-top .wx-stats{grid-column:1 / -1;grid-row:2;gap:0 8px;margin:0}
  .wx-top .wx-push{grid-column:1 / -1;grid-row:3;min-height:44px}
  .wx-top #pushBtn.ghost{display:none}          /* avisos already on: nothing to do, no full-width button */
  .wx-top .wx-tabs{grid-column:1 / -1;grid-row:4;justify-self:stretch;margin:2px 0 0}
  .wx-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px}
  .wx-tabs .tab[data-tab="wa-prueba"],.wx-tabs .tab[data-tab="wa-sabe"],.wx-tabs .tab[data-tab="wa-reglas"]{display:none}
  .wx-tabs .tab,.wx-mas-b{min-height:52px;gap:2px;padding:4px 2px}
  .wx-tabs .tab .ic,.wx-mas-b .ic{width:20px;height:20px}
  .wx-mas{display:block;position:relative;min-width:0}
  .wx-mas-b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;
    border:0;border-radius:10px;background:transparent;color:#D5D8DD;font:600 1rem var(--body);cursor:pointer;white-space:nowrap}
  .wx-mas-b .ic{color:#AEB3BA}.wx-mas-b:hover{background:#22252A;color:#fff}
  .wx-mas-b.on{background:var(--green2);color:#04110A}.wx-mas-b.on .ic{color:#04110A}
  .wx-mas-b:focus-visible,.wx-mas-m button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
  .wx-mas-b .count{position:absolute;top:4px;right:6px;margin:0;min-width:24px;height:24px;background:#C92A2A;color:#fff}
  .wx-mas-m{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;padding:6px;display:flex;flex-direction:column;gap:2px;
    background:#1C1F24;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
  .wx-mas-m[hidden]{display:none}
  .wx-mas-m button{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:0;border-radius:8px;background:transparent;
    color:#E6E8EB;font:600 1rem var(--body);text-align:left;cursor:pointer}
  .wx-mas-m button:hover{background:#2A2E34}.wx-mas-m .ic{width:20px;height:20px;color:#AEB3BA}
  .wx-mas-m .count{margin-left:auto;background:#C92A2A;color:#fff}
  /* chat list: search on its own line; estado + the filter chips share the next one, chips scroll sideways (was 4 lines) */
  .wx-left{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-content:start}
  .wx-left>*{grid-column:1 / -1;min-width:0}
  .wx-left>.wx-estf{grid-column:1;grid-row:2;width:8.6em;min-height:40px}
  #waFilters{grid-column:2;grid-row:2;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;padding-bottom:2px}
  #waFilters::-webkit-scrollbar{display:none}#waFilters .wx-chip{flex:none}
}
html[data-theme="light"] .wx-mas-b{color:#3B4A54}html[data-theme="light"] .wx-mas-b .ic{color:#54656F}
html[data-theme="light"] .wx-mas-b.on{background:#04C707;color:#04110A}
html[data-theme="light"] .wx-mas-m{background:#fff;border-color:#D5DBE0;box-shadow:0 12px 32px rgba(0,0,0,.18)}
html[data-theme="light"] .wx-mas-m button{color:#1F2A30}html[data-theme="light"] .wx-mas-m button:hover{background:#EEF1F3}

/* "¿Por qué cierras este chat?" (Javier 2026-11-05): closing / losing a chat asks the reason */
.mot-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6)}
.mot{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:18px;
  background:#1C1F24;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.55);color:var(--ink)}
.mot h3{margin:0;font-size:1.25rem}.mot p{margin:0}
.mot-ops{display:flex;flex-wrap:wrap;gap:6px}.mot-ops .wx-chip{white-space:normal;text-align:left}
.mot label{font-weight:600}
.mot textarea{width:100%;min-height:76px;padding:10px;border-radius:9px;border:1px solid #2C2F34;background:#14161A;color:var(--ink);font:1rem var(--body);resize:vertical}
.mot textarea:focus{outline:none;border-color:var(--green2)}
.mot-bt{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.mot-bt .btn{min-height:44px}
html[data-theme="light"] .mot{background:#fff;border-color:#D5DBE0;box-shadow:0 18px 48px rgba(0,0,0,.2)}
html[data-theme="light"] .mot textarea{background:#F6F8F9;border-color:#C9D1D6}
.mot-ops .wx-chip{color:#E6E8EB;border-color:rgba(255,255,255,.28)}
html[data-theme="light"] .mot-ops .wx-chip{color:#1F2A30;border-color:#C9D1D6}

/* chat number on every row of the list (Javier 2026-11-05: "right now I need to open the chat to see the chat number");
   the name shortens first, the number and time never wrap */
.wx-l1 b{flex:1 1 auto;min-width:0}
.wx-r{display:inline-flex;align-items:baseline;gap:7px;flex:none}
.wx-cid{font:600 1rem var(--mono);font-variant-numeric:tabular-nums;color:#C3C9D0;white-space:nowrap}
.wx-row.on .wx-cid{color:#E6FFE6}
html[data-theme="light"] .wx-cid{color:#46555E}
.wx-ocultos{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 6px;padding:8px 10px;
  border-radius:9px;border:1px solid rgba(251,191,36,.45);background:rgba(251,191,36,.1);color:#FFE3A1}
html[data-theme="light"] .wx-ocultos{color:#6B4A00;background:#FFF6DD;border-color:#E9C46A}

/* Books' customer number (CUS-00000) beside the chat number (Javier 2026-11-05: one number per customer everywhere).
   It replaces the chat number (same width), so the name keeps its room (11-05: as a second tag it cut the name to «Confia…») */
.wx-cus{font:600 1rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:#BFFFC0;
  padding:0 4px;border-radius:6px;background:rgba(4,199,7,.13);border:1px solid rgba(4,199,7,.35)}
.wx-row.on .wx-cus{color:#E6FFE6}
html[data-theme="light"] .wx-cus{color:#0B5D0D;background:#E6F7E6;border-color:#9FD8A0}

/* Attachments from the chat (Javier 2026-11-05: "send images to clients and any type of attachments") */
.wx-clip{flex:none;align-self:flex-end;min-width:44px;min-height:44px;cursor:pointer}
.wx-clip svg{width:20px;height:20px}
.wx-adj{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 10px;border-radius:9px;
  background:#16181C;border:1px solid #33363C;color:var(--ink);max-width:100%}
.wx-adj img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.wx-adj-n{display:flex;flex-direction:column;min-width:0;flex:1}
.wx-adj-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-adj-n span{color:#AEB3BA}
.wx-adj-err{flex:1;color:#FFB4B4}
.wx-adj .btn{flex:none}
.wb-vid{display:block;max-width:min(320px,100%);max-height:320px;border-radius:8px;background:#000}
.wb .wb-pdf{text-transform:uppercase}
html[data-theme="light"] .wx-adj{background:#F4F6F7;border-color:#C9D1D6}
html[data-theme="light"] .wx-adj-n span{color:#46555E}
html[data-theme="light"] .wx-adj-err{color:#9B1C1C}

/* chat header: CUS- tag on the name line, never split (Javier 2026-11-05: "CUS-" / "00317" broke over two lines) */
.wx-whol1{display:flex;align-items:center;gap:8px;min-width:0}
.wx-whol1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-whol1 .wx-cus{flex:none}
.wx-who .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Llaves y APIs by provider (Javier 2026-11-05: "not enterprise level", organize by provider) */
.ktools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0 14px}
.ktools input[type=search]{flex:1 1 260px;min-width:0;max-width:440px;min-height:44px;padding:8px 12px;font:1rem var(--body);color:var(--ink);
  background:#0E0F11;border:1px solid #33363C;border-radius:9px}
.kprov{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 10px;overflow:hidden}
.kprov>summary{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:14px 16px;cursor:pointer;list-style:none}
.kprov>summary::-webkit-details-marker{display:none}
.kp-n{display:flex;flex-direction:column;gap:2px;min-width:0}.kp-n b{font-size:1.1rem}
.kp-s{display:flex;align-items:center;gap:8px;flex:none}
.kp-s .ic{width:18px;height:18px;transition:transform .15s}
.kprov[open]>summary .kp-s .ic{transform:rotate(180deg)}
.kprov .krow{border-radius:0;border-width:1px 0 0;background:transparent}
@media (prefers-reduced-motion:reduce){.kp-s .ic{transition:none}}
html[data-theme="light"] .ktools input[type=search]{background:#fff;border-color:#C9D1D6;color:#1F2A30}

/* ---- Pedidos y entregas (2026-11-06): list of orders (status rail, 9-step tracker) + the order's whole process */
#nav a.nav-oculto{display:none!important}
.ord-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ord-chips{display:flex;gap:6px;flex-wrap:wrap;max-width:100%}
.ord-chips .btn{min-height:40px;padding:6px 12px}
.ord-n{display:inline-block;min-width:1.6em;padding:0 6px;margin-left:4px;border-radius:999px;background:rgba(127,127,127,.22);font-variant-numeric:tabular-nums}
.ord-buscar{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0;background:var(--surf2);border:1px solid var(--edge);border-radius:10px;padding:0 10px}
.ord-buscar .ic{width:20px;height:20px;flex:none;color:var(--muted)}
.ord-buscar input{flex:1;min-width:0;border:0;background:transparent;min-height:42px;color:inherit;font:inherit}
.ord-nuevo-aviso{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:rgba(251,191,36,.14);border:1px solid var(--warn);margin:0 0 12px}
.ord-nuevo-aviso[hidden]{display:none}.ord-nuevo-aviso .ic{width:20px;height:20px}
.ord-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.ord-wrap.con-detalle{grid-template-columns:minmax(300px,420px) minmax(0,1fr)}
.ord-lista{display:flex;flex-direction:column;gap:8px;min-width:0}
.ord-wrap:not(.con-detalle) .ord-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.ord-fila{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px 18px;border-radius:12px;cursor:pointer;
  background:var(--surf2);border:1px solid var(--edge);position:relative;min-width:0;--rail:var(--ok)}
.ord-fila::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:0 4px 4px 0;background:var(--rail)}
.ord-fila.ord-tarde{--rail:var(--warn)}.ord-fila.ord-trabado{--rail:var(--bad)}
.ord-fila:hover{border-color:var(--green2)}.ord-fila:focus-visible{outline:2px solid var(--green2);outline-offset:2px}
.ord-fila.sel{border-color:var(--green2);box-shadow:inset 0 0 0 1px var(--green2)}
.ord-l1{display:flex;gap:8px;align-items:baseline;min-width:0}
.ord-cli{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ord-tot{flex:none}
.ord-l2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-l4{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ord-esp{color:var(--muted)}
.ord-pts{list-style:none;margin:2px 0;padding:0;display:flex;gap:4px}
.ord-pts li{flex:1;height:7px;border-radius:4px;background:var(--surf3)}
.ord-pts li.op-hecho{background:var(--green2)}.ord-pts li.op-ahora{background:var(--rail)}.ord-pts li.op-omitido{background:transparent;border:1px dashed var(--edge)}
.ord-pts li.op-espera{background:repeating-linear-gradient(90deg,var(--surf3) 0 4px,var(--warn) 4px 6px)}
.ord-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 10px;border-radius:999px;background:var(--surf3);font-weight:600}
.ord-tag .ic{width:16px;height:16px}.ord-tag.bad{background:rgba(255,92,92,.16);color:var(--bad)}.ord-tag.ok{background:rgba(4,199,7,.16)}
.ord-det{background:var(--surf);border:1px solid var(--edge);border-radius:14px;padding:18px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ord-wrap:not(.con-detalle) .ord-det{display:none}
.ord-elige{display:flex;gap:10px;align-items:center}
.ord-dh{display:flex;gap:10px;align-items:flex-start}.ord-dh h3{margin:0;font-size:1.3rem}.ord-dh p{margin:4px 0 0}
.ord-volver{flex:none;width:44px;padding:0;display:grid;place-items:center}
.ord-viendo{display:flex;gap:8px;align-items:center;margin:0;padding:8px 12px;border-radius:10px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.5)}
.ord-viendo .ic,.ord-contacto .ic,.ord-nota .ic,.ord-caja p .ic{width:20px;height:20px;flex:none}
.ord-contacto{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.ord-contacto>span{display:inline-flex;gap:6px;align-items:center}
.ord-contacto .btn{display:inline-flex;gap:6px;align-items:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ord-ahora{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;border-left:5px solid var(--ok);background:var(--surf2)}
.ord-ahora.ord-tarde{border-left-color:var(--warn)}.ord-ahora.ord-trabado{border-left-color:var(--bad)}
.ord-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ord-tl li{display:flex;gap:12px;padding:0 0 12px;position:relative}
.ord-tl li:not(:last-child)::after{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:var(--surf3)}
.ord-tl li.op-hecho:not(:last-child)::after{background:var(--green2)}
.ord-tl-dot{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--surf3);display:grid;place-items:center;background:var(--surf)}
.ord-tl-dot .ic{width:16px;height:16px}
.ord-tl li.op-hecho .ord-tl-dot{background:var(--green2);border-color:var(--green2);color:#04110A}
.ord-tl li.op-ahora .ord-tl-dot{border-color:var(--warn);box-shadow:0 0 0 4px rgba(251,191,36,.18)}
.ord-tl li.op-omitido{opacity:.6}
.ord-tl li>div{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ord-det h4{margin:8px 0 0;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.ord-caja{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;background:var(--surf2);border:1px solid var(--edge)}
.ord-caja p{display:flex;gap:8px;margin:0;align-items:flex-start}
.ord-caja.ord-ok{border-color:var(--green2)}.ord-caja.ord-bad{border-color:var(--bad)}
.ord-caja .row,.ord-com-n{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ord-caja .row input{flex:1 1 200px;min-width:0}
.ord-nota{display:flex;gap:8px;margin:0;padding:10px 12px;border-radius:10px;background:var(--surf2)}
.ord-paq{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--surf2);border:1px solid var(--edge)}
.ord-llamar{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--edge)}
.ord-llamar p{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}.ord-llamar p .ic{width:18px;height:18px;vertical-align:-3px}
.ord-com{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ord-com li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:var(--surf2);overflow-wrap:anywhere}
.ord-com-n input{flex:1 1 220px;min-width:0}.ord-com-n select{flex:0 1 200px;min-width:0}
.ord-cierre{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.ord-cierre label{display:flex;flex-direction:column;gap:4px;flex:1 1 200px}
.ord-det details summary{cursor:pointer}
@media (max-width:1000px){
  .ord-wrap.con-detalle{grid-template-columns:minmax(0,1fr)}
  .ord-wrap.con-detalle .ord-lista{display:none}
}

/* ---- Buscar piezas (2026-11-06) */
#pzMain{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
#pzMain>*,#pzRes>*{min-width:0;max-width:100%}
#pzRes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
#pzMain textarea{width:100%;min-height:120px}
.pz-form .row{margin-top:6px}
.pz-prog ol{margin:0;padding-left:22px;display:grid;gap:8px}
.pz-prog li{color:var(--muted)}.pz-prog li.ahora{color:var(--ink);font-weight:700}.pz-prog li.hecho{color:var(--ink)}
.pz-prog li.hecho::marker{color:var(--green2)}
.pz-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pz-chip{border:1px solid var(--line2);border-radius:999px;padding:4px 12px;background:var(--surf2)}
.pz-preg{border-left:4px solid var(--warn);padding:6px 12px;margin:10px 0;background:var(--surf2);border-radius:0 8px 8px 0}
.pz-preg ul{margin:6px 0 0;padding-left:20px}
.pz-fuentes a{color:inherit;text-decoration:underline}
.pz-tab td{vertical-align:top}.pz-tab td small{display:block;max-width:420px}
.pz-ver{display:inline-block;font-weight:700;border-radius:6px;padding:2px 8px;margin-bottom:4px;white-space:nowrap}
.pz-ver.ok{background:var(--green2);color:#0B0D0F}.pz-ver.warn{background:#FBBF24;color:#0B0D0F}.pz-ver.bad{background:var(--bad);color:#fff}
tr.pz-bad{opacity:.75}
.pz-malas>summary{cursor:pointer;font-weight:700;margin:10px 0}
.pz-resp textarea{width:100%;min-height:200px}
.pz-hl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pz-hl .btn{width:100%;justify-content:flex-start;text-align:left;display:grid;gap:2px;min-height:44px;height:auto;padding:8px 12px;white-space:normal}
.pz-hl-t{color:var(--ink);font-weight:600}
.pz-item>summary{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;cursor:pointer;min-height:44px}
.pz-item>summary b{flex:1 1 220px;min-width:0}
.pz-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surf2);font-weight:700}
.pz-item[open]>summary{margin-bottom:10px}
#pzRes h4{display:flex;gap:8px;align-items:center;margin:12px 0 6px}
/* Pregúntale a Nova (2026-11-06) */
.pz-tabs{margin:0}.pz-tabs .tab{display:inline-flex;align-items:center;gap:8px}.pz-tabs .tab .ic{width:19px;height:19px}
#pzRap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}#pzRap[hidden]{display:none}
.pz-qrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.pz-qrow input{flex:1 1 260px;min-width:0;min-height:44px}
.pz-chatl{margin-top:10px;max-height:420px;overflow:auto}
.pz-rhead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.pz-rhead b{flex:1 1 220px;min-width:0}
.pz-decir{margin:12px 0;padding:10px 14px;border-left:4px solid var(--green2);background:var(--surf2);border-radius:0 8px 8px 0}
.pz-decir p{margin:6px 0 8px}
.pz-prods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pz-prods li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px}
.pz-prods img,.pz-noimg{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:8px;display:block}
.pz-prods li>div{display:grid;gap:2px;min-width:0}.pz-pr{text-align:right;justify-items:end}
.pz-racc{flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.pz-tab td small{display:block}
.pz-prov>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}.pz-prov>summary h3{margin:0}
.pz-provl{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.pz-provl li{display:grid;grid-template-columns:150px minmax(0,200px) minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;border-bottom:1px solid var(--line);padding:4px 0}
.pz-ver.gris{background:var(--surf2);color:var(--ink);border:1px solid var(--line2)}
@media (max-width:700px){.pz-provl li{grid-template-columns:1fr auto}.pz-provl li .muted{grid-column:1/-1}.pz-prods li{grid-template-columns:48px minmax(0,1fr)}.pz-pr{grid-column:2;text-align:left;justify-items:start}}
/* Búsqueda global + Cotizar (2026-11-07) */
.gbar{position:relative;margin:0 0 18px;z-index:30}
.gb-box{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:12px;background:var(--panel);border:1px solid rgba(5,255,9,.4)}
.gb-box .ic{width:20px;height:20px;color:var(--muted);flex:none}
.gb-box input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:500 1.05rem var(--body);outline:none;min-height:46px}
.gb-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(5,255,9,.18)}
.gb-k,.gb-nova kbd{font:600 1rem var(--mono);color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:1px 8px;flex:none}
.gb-list{position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:min(70vh,640px);overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.gb-nova{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid var(--green2);background:rgba(5,255,9,.10);color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.gb-nova>span{flex:1;display:grid}.gb-nova small{font-size:1rem;font-weight:400;color:var(--muted)}.gb-nova .ic{color:var(--green)}
.gb-g{margin:12px 8px 4px;color:var(--muted);font-weight:600;letter-spacing:.03em}
.gb-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:6px 8px;border-radius:10px}
.gb-f:hover{background:var(--surf2)}
.gb-i{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surf3)}.gb-i.ok{background:rgba(5,255,9,.14);color:var(--green)}
.gb-t{flex:1 1 220px;min-width:0;display:grid}.gb-t b,.gb-t span{overflow:hidden;text-overflow:ellipsis}
.gb-load{margin:10px 8px}
/* ---- Cotizar v2 (Javier 2026-11-07: "this layout and structure UI design is really bad"; approved mockup artifact
   S7SJnrhTjHQELJd8ZKSwej). Customer strip on top, the work column (Lo que pide + Productos), the quote fixed on the right.
   Layout by the page's own width (container), not the window: the side menu takes 260 px on desktop and Javier's laptop
   window is 942 px (page ~618 px), where the quote goes below the work column and the phone bar shows the total. */
[data-view="cotizar"]{container-type:inline-size;padding-bottom:90px}
.cot-main{display:grid;gap:16px;min-width:0}
.cot-v2{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
.cot-work{display:grid;gap:16px;min-width:0;align-content:start}
@container (min-width:900px){
  .cot-v2{grid-template-columns:minmax(0,1fr) minmax(340px,400px)}
  .cot-q{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
}
@media (min-width:901px){.cot-bar{display:none!important}}
.cot-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid rgba(5,255,9,.45)}
.cot-bar b{flex:1;min-width:0}.cot-bar .mono{flex:none;font-size:1.15rem}
@media (max-width:600px){.gb-k{display:none}}
.cot-msg{margin:0;padding:10px 14px;border-radius:10px;color:var(--ink);background:rgba(5,255,9,.08);border:1px solid rgba(5,255,9,.3)}
.cot-msg.bad{color:var(--bad);background:rgba(255,92,92,.08);border-color:rgba(255,92,92,.4)}
/* customer strip */
.cot-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:14px 18px}
.cot-who{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:14px}
.cot-who>div{min-width:0;display:grid;gap:2px}
.cot-av{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(5,255,9,.12);color:var(--green);border:1px solid var(--line2);font:700 1.05rem var(--display)}
.cot-big{font:700 1.2rem var(--display)}
.cot-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}.cot-meta span{display:inline-flex;align-items:center;gap:6px}.cot-meta .ic{width:18px;height:18px}
.cot-sug{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.cot-acts{display:flex;flex-wrap:wrap;gap:8px}
.cot-acts .btn .ic,.cot-ch .btn .ic{width:18px;height:18px}
.btn .ic{vertical-align:-4px;margin-right:6px}
/* card headers */
.cot-ch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.cot-ch h3{margin:0;display:flex;align-items:center;gap:10px;font-size:1.2rem}.cot-ch h3 .ic{color:var(--green)}
.cot-ch .sp{flex:1}
.cot-src{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono)}.cot-src .ic{width:18px;height:18px}
.cot-vacio p{margin:0 0 10px}
.cot-pasos{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surf2);margin:0 0 10px}.cot-pasos .ic{color:var(--green)}
/* what the customer asks */
.cot-ask{list-style:none;margin:0;padding:0;display:grid}
.cot-ask>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.cot-ask>li:first-child{border-top:0;padding-top:0}
.cot-qty0{min-width:44px;height:36px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:8px;font-weight:600}
.cot-askb{display:grid;gap:8px;min-width:0}
.cot-askb>.btn{justify-self:start}
.cot-op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:12px;border:1px solid var(--line)}
.cot-op.best{background:var(--surf2);border-color:var(--line2)}
.cot-opn{min-width:0;display:grid;gap:4px;line-height:1.3}
.cot-opf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cot-added{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:600;white-space:nowrap}.cot-added .ic{width:18px;height:18px}
.cot-nota{margin:0}
/* photos everywhere (Javier 2026-11-07: "images on all item display"); white ground: product photos are shot on white */
.cot-img{display:block;object-fit:contain;background:#fff;border-radius:8px}
.cot-img.sm{width:56px;height:56px}
.cot-img.lg{width:100%;height:150px}
.cot-img.xl{width:100%;height:min(46vh,380px);border-radius:12px}
.cot-noimg{display:grid;place-items:center;background:var(--surf2);color:var(--muted);border:1px solid var(--line)}
.cot-noimg .ic{width:26px;height:26px}
.cot-thumb,.cot-pimg{padding:0;border:0;background:none;cursor:zoom-in;border-radius:8px;flex:none}
.cot-thumb:disabled{cursor:default}
.cot-thumb:focus-visible,.cot-pimg:focus-visible,.linkish:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.linkish{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;line-height:1.3}
.linkish:hover{text-decoration:underline;text-underline-offset:3px}
/* products */
.cot-chips{display:flex;flex-wrap:wrap;gap:8px}
.cot-chips button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.cot-chips button.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.cot-novabar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px dashed var(--line2);border-radius:12px;background:var(--surf2);margin-bottom:12px}
.cot-novabar>.ic{color:var(--green);flex:none}
.cot-novabar input{flex:1;min-width:0;min-height:42px;background:transparent;border:0;color:var(--ink);font:1rem var(--body);outline:none}
.cot-decir{margin:0 0 12px;padding:10px 12px;border-left:4px solid var(--green2);background:var(--surf2);border-radius:0 8px 8px 0}.cot-decir p{margin:0}
.cot-hint{margin:4px 0 0}
.cot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cot-p{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--surf2);border:1px solid var(--line);min-width:0}
.cot-p.off{opacity:.7}
.cot-pn{font-weight:700}
.cot-pf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px}.cot-pf b{font-size:1.15rem}
.cot-badge{align-self:flex-start;display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700}
.cot-badge.ok{background:rgba(61,220,90,.16);color:var(--ok)}.cot-badge.warn{background:rgba(251,191,36,.16);color:var(--warn)}.cot-badge.bad{background:rgba(255,92,92,.16);color:var(--bad)}
.cot-sub{display:flex;gap:8px;align-items:center;margin:18px 0 8px;font-size:1.1rem}
/* the quote */
.cot-q{padding:0;display:flex;flex-direction:column;border:1px solid rgba(5,255,9,.35)}
.cot-qh{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}.cot-qh h2{flex:1;margin:0;font-size:1.3rem}
.cot-pill{padding:2px 12px;border-radius:999px;border:1px solid var(--line2);font-weight:600;white-space:nowrap}.cot-pill.on{border-color:rgba(5,255,9,.5);background:rgba(5,255,9,.10)}
.cot-qv{padding:16px 18px;margin:0}
.cot-ls{list-style:none;margin:0;padding:0}
.cot-ls li{display:grid;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line)}
.cot-ln{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start}
.cot-x{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.cot-x:hover{background:var(--surf2);color:var(--ink)}.cot-x .ic{width:18px;height:18px}
.cot-lr{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cot-qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:8px}
.cot-qty button{width:38px;height:38px;border:0;background:transparent;color:var(--ink);font-size:1.25rem;cursor:pointer}
.cot-qty span{min-width:30px;text-align:center}
.cot-pr{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}.cot-pr input{width:112px;min-height:38px;font-family:var(--mono)}
.cot-lt{margin-left:auto}
.cot-lg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.cot-gan{font-weight:600}.cot-gan.ok{color:var(--ok)}.cot-gan.lo{color:var(--warn)}.cot-gan.bad{color:var(--bad)}
.cot-sum{display:grid;gap:8px;padding:14px 18px;background:var(--surf2)}
.cot-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cot-tot{font:700 1.6rem var(--display)}
.cot-qf{display:grid;gap:10px;padding:14px 18px}
.cot-l{display:grid;gap:4px;color:var(--muted)}.cot-l input,.cot-l select,#cotNotas{width:100%;min-height:44px}
.cot-save{width:100%;min-height:50px}
.cot-two{display:flex;flex-wrap:wrap;gap:8px}.cot-two>*{flex:1 1 120px}
.cot-ok{display:grid;gap:8px;padding:12px;border-radius:10px;background:rgba(5,255,9,.10);border:1px solid rgba(5,255,9,.4)}
.cot-prev{padding:0 18px 14px}.cot-prev summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.cot-prev ul,.cot-qlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cot-prev li,.cot-qlist li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
/* dialogs (customer, list, drafts, product popup) */
.cot-dlg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.cot-dlg[hidden]{display:none}
.cot-dbg{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.cot-dbox{position:relative;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.cot-dbox.wide{width:min(900px,100%)}
.cot-dh{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.cot-dh h2{flex:1;min-width:0;margin:0;font-size:1.25rem;line-height:1.3}
.cot-dx{min-width:44px}.cot-dx .ic{margin:0}
.cot-db{padding:16px 18px;display:grid;gap:12px}
.cot-dsub{margin:8px 0 0;font-size:1.05rem}
body.cot-dlg-on{overflow:hidden}
.cot-seg{display:flex;flex-wrap:wrap;gap:6px}
.cot-seg button{min-height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.cot-seg button.on{border-color:var(--green);background:rgba(5,255,9,.12)}
.cot-seg .ic{width:18px;height:18px;vertical-align:-4px;margin-right:6px}
.cot-filt{width:100%;min-height:44px}
.cot-chats{list-style:none;margin:0;padding:0;display:grid}
.cot-chats li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 8px;border-radius:12px}
.cot-chats li:hover{background:var(--surf2)}
.cot-ct{min-width:0;display:grid}
.cot-ct span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
.cot-row{display:flex;flex-wrap:wrap;gap:8px}.cot-row input{flex:1 1 220px;min-width:0;min-height:44px}
.cot-nuevo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.cot-nuevo>.btn{grid-column:1/-1}
.cot-lista{display:grid;gap:10px}.cot-lista p{margin:0}.cot-lista textarea{width:100%}
.cot-pop{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:760px){.cot-pop{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.cot-popt{display:grid;gap:8px;align-content:start;min-width:0}
.cot-popp{font:700 1.8rem var(--display)}
.cot-chipsrow{display:flex;flex-wrap:wrap;gap:6px}
.cot-popd{margin:4px 0;color:var(--muted);line-height:1.5}
.cot-popa{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.cot-popa .btn.primary{flex:1 1 200px;min-height:48px}
@media (max-width:560px){
  .cot-op{grid-template-columns:auto minmax(0,1fr)}.cot-op>.btn,.cot-op>.cot-added{grid-column:2;justify-self:start}
  .cot-chats li{grid-template-columns:auto minmax(0,1fr)}.cot-chats li .cot-cw,.cot-chats li .btn{grid-column:2;justify-self:start}
  .cot-dlg{padding:0;place-items:end stretch}.cot-dbox,.cot-dbox.wide{width:100%;max-height:92vh;border-radius:16px 16px 0 0}
}

/* ---- Notificaciones (Javier 2026-11-07: "a global notification page, not the Home page containing everything") */
.gbar{display:flex;gap:10px;align-items:stretch}
.gbar .gb-box{flex:1;min-width:0}
.gbar .gb-list{right:58px}
.nb-btn{position:relative;flex:none;width:50px;min-height:50px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.nb-btn:hover,.nb-btn[aria-expanded="true"]{border-color:var(--green)}
.nb-btn .ic{width:22px;height:22px}
.nb-c{position:absolute;top:-8px;right:-8px;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font:700 1rem/26px var(--body);text-align:center;border:2px solid var(--bg)}
.nb-drop{position:absolute;right:0;top:calc(100% + 8px);width:min(440px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);overflow:hidden;z-index:35}
.nb-dh{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.nb-dh h3{flex:1;margin:0;font-size:1.15rem}
.nb-pill{padding:2px 10px;border-radius:999px;border:1px solid var(--line2);font-weight:600}
.nb-ul{list-style:none;margin:0;padding:6px;max-height:min(60vh,480px);overflow:auto}
.nb-ul a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:10px;color:var(--ink);text-decoration:none}
.nb-ul a:hover{background:var(--surf2)}
.nb-ul a.nueva .nb-t b::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:2px}
.nb-t{display:grid;min-width:0}.nb-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-vacio{padding:16px;margin:0}
.nb-df{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.nt-main{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start}
[data-view="notificaciones"]{container-type:inline-size}
@container (min-width:760px){.nt-main{grid-template-columns:250px minmax(0,1fr)}.nt-rail{position:sticky;top:12px;flex-direction:column}.nt-rail button{width:100%}}
.nt-rail{display:flex;flex-wrap:wrap;gap:4px}
.nt-rail button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:500 1rem var(--body);text-align:left;cursor:pointer}
.nt-rail button:hover{background:var(--surf2)}
.nt-rail button.on{background:rgba(5,255,9,.10);box-shadow:inset 3px 0 0 var(--green);font-weight:700}
.nt-rail .ic{width:20px;height:20px;flex:none;color:var(--muted)}
.nt-rail hr{width:100%;border:0;border-top:1px solid var(--line);margin:6px 0}
.nt-n{margin-left:auto}.nt-n.u{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--bad);color:#fff;font-weight:700;display:grid;place-items:center}
.nt-dev{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.nt-dev{min-width:0;max-width:100%;box-sizing:border-box}.nt-dev>span{display:grid;min-width:0;white-space:normal;overflow-wrap:anywhere}
.nt-sola{align-self:center}.nt-dev .ic{color:var(--green);flex:none}
.nt-feed{display:grid;gap:12px;min-width:0}
.nt-day{display:flex;align-items:center;gap:12px;margin:8px 0 0;font-size:1.05rem;color:var(--muted);text-transform:capitalize}
.nt-day::after{content:'';flex:1;border-top:1px solid var(--line)}
.nt-ev{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.nt-ev.nueva{border-color:var(--line2);background:linear-gradient(90deg,rgba(5,255,9,.07),transparent 45%),var(--card)}
.nt-ev.nueva::before{content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--green)}
.nt-ev.nueva.urg::before{background:var(--bad)}
.nt-ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line2);background:var(--surf2);color:var(--muted)}
.nt-ic .ic{width:20px;height:20px}
.nt-ic.g-chats{color:var(--warn)}.nt-ic.g-pedidos{color:var(--ok)}.nt-ic.g-cotizaciones{color:#B88CFF}.nt-ic.g-correo{color:var(--ink)}.nt-ic.g-sistema,.nt-ic.urg{color:var(--bad)}
.nt-t{min-width:0}.nt-t p{margin:2px 0 0;color:var(--muted);overflow-wrap:anywhere}
.nt-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nt-tm{color:var(--muted);text-align:right;white-space:nowrap;display:grid;gap:6px}
.nt-urg{color:var(--bad);font-family:var(--body);font-weight:700}
.nt-mas{justify-self:center}
.nt-vacio p{margin:0 0 6px}
@media (max-width:560px){.nt-ev{grid-template-columns:auto minmax(0,1fr)}.nt-tm{grid-column:2;text-align:left;display:flex;gap:10px}}
html[data-theme="light"] .cot-chips button.on{background:var(--ink);color:#fff}
html[data-theme="light"] .nt-ic.g-cotizaciones{color:#6D3FD1}
html[data-theme="light"] .cot-dbg{background:rgba(17,27,33,.45)}
.shell.appmode .gbar{display:none}

/* ---- Nova (IA) 2026-11-07 (approved mockup DzohRvATHqZUxJZsPjjVpa; Integra USA has the same page for Mega) ---- */
.ia-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.ia-crumb{margin:0}
.ia-top h2{margin:2px 0 0}
.ia-sub{font:600 1.1rem var(--body);color:var(--muted);margin-left:6px}
.ia-pills{display:flex;flex-wrap:wrap;gap:8px}
.ia-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);font-weight:600;white-space:nowrap}
.ia-pill.ok{background:rgba(5,255,9,.10);border-color:rgba(5,255,9,.4);color:#BFF5C9}
.ia-pill.bad{background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.5);color:#FFC9C9}
.ia-pill .ic{width:18px;height:18px}
.ia-tabs{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
.ia-tabs .ts{display:none}
section[data-view="ia"] .tabp{display:grid;gap:16px;min-width:0}
section[data-view="ia"] .tabp[hidden]{display:none}
.ia-intro{margin:0;max-width:80ch}
.ia-h{margin:0 0 10px;font:700 1.2rem var(--display)}
.ia-hrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ia-hrow .ia-h{margin:0}
.ia-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ia-tile{display:grid;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--ink);text-decoration:none;min-width:0}
a.ia-tile:hover{border-color:var(--line2)}
.ia-tl{color:var(--muted)}
.ia-tv{font-size:2.2rem;line-height:1.1}
.ia-tile.ok .ia-tv{color:#7dff80}.ia-tile.warn .ia-tv{color:var(--warn)}
.ia-dos,.ia-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ia-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ia-sws{display:grid}
.ia-sw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.ia-sw>div:first-child{display:grid;min-width:0}
.ia-sw-r{display:flex;align-items:center;gap:10px}
.ia-glob{border-top:0}
.ia-nota{margin:10px 0 0}
.ia-lims{display:grid;gap:12px}
.ia-lim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.ia-lim>div:first-child{flex:1 1 360px;min-width:0}
.ia-lim p{margin:4px 0 0}
.ia-lim-f{display:flex;gap:8px;align-items:center}
.ia-lim-f input{width:9rem;font:500 1.1rem var(--mono)}
.ia-lec{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.ia-lec p{margin:0}
.ia-lec textarea{width:100%;min-height:4.5em;resize:vertical}
.ia-lec-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ia-lec.rechazada p{color:var(--muted);text-decoration:line-through}
.ia-dia{margin:14px 0 2px;font:600 1rem var(--body);color:var(--muted);text-transform:capitalize}
.ia-hechas summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.ia-hist{list-style:none;margin:0;padding:0;display:grid}
.ia-hist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.ia-hist p{margin:2px 0 0;overflow-wrap:anywhere}
.ia-tipo{padding:2px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--line2);white-space:nowrap}
.ia-tipo.t-leccion{border-color:rgba(5,255,9,.4)}.ia-tipo.t-interruptor{border-color:rgba(251,191,36,.5)}.ia-tipo.t-limite{border-color:rgba(255,255,255,.3)}
.ia-when{text-align:right;white-space:nowrap}
.wx-ia .ic{width:18px;height:18px}
@media (max-width:1100px){.ia-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.ia-tabs .tl{display:none}.ia-tabs .ts{display:inline}.ia-dos{grid-template-columns:minmax(0,1fr)}.ia-tv{font-size:1.8rem}
  .ia-hist li{grid-template-columns:minmax(0,1fr)}.ia-when{text-align:left}.ia-sub{display:block;margin:0}}