/* Estilos das telas (balcão, caixa, oficina, clientes, estoque, mecânicos, procedimentos, painel, gestão). */

/* ---------- balcão ---------- */
.balcao{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.bl-esq{display:flex;flex-direction:column;gap:12px;min-width:0}
.bl-dir{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.prod{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--p1);color:var(--cream);min-height:110px;transition:border-color .15s,background .15s}
.prod:hover{background:var(--p2);border-color:var(--bella)}
.prod.zerado{opacity:.55}
.prod .pn{font-weight:600;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .pm{font-size:11.5px;color:var(--mut)}
.prod .pf{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;gap:8px}
.prod .pf b{font-size:17px;color:var(--bella);font-family:var(--f-disp)}
.prod .pf small{font-size:11.5px;color:var(--mut)}
.prod .pc{font-size:10.5px;color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-itens{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow-y:auto;margin-bottom:10px}
.bl-it{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--p2);border:1px solid var(--line)}
.bl-it .t{flex:1;min-width:0}.bl-it .t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bl-it .t small{color:var(--mut);font-size:12px}
.bl-it .q{display:flex;align-items:center;gap:6px}.bl-it .q b{min-width:22px;text-align:center}
.bl-it .v{min-width:80px;text-align:right}
.bl-tot .l{display:flex;justify-content:space-between;padding:4px 0;color:var(--cream2)}
.bl-tot .total{font-size:22px;font-weight:800;color:var(--cream);border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-family:var(--f-disp)}
.bl-tot .total b{color:var(--bella)}
.bl-carr .bt.lg{margin:12px 0 10px}
.bl-abas{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;grid-template-columns:1fr 1fr;background:var(--ink2);border-top:1px solid var(--line2);padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
.bl-abas button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:0;border-radius:12px;background:none;color:var(--mut);font-weight:700}
.bl-abas button.on{background:var(--p2);color:var(--bella)}
.bl-abas b{background:var(--bella);color:var(--on-bella);border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;padding:0 5px}
@media (max-width:980px){
  .balcao{grid-template-columns:minmax(0,1fr);padding-bottom:70px}
  .bl-dir,.bl-carr,.bl-cli{min-width:0;max-width:100%}
  .bl-dir{position:static}
  .bl-abas{display:grid}
  .balcao:not([data-aba=dir]) .bl-dir{display:none}
  .balcao[data-aba=dir] .bl-esq{display:none}
  .bl-itens{max-height:none}
}

/* ---------- clientes ---------- */
.cl-busca input{font-size:22px;letter-spacing:.04em;min-height:62px;padding-left:48px}
.cl-busca .ic{width:24px;height:24px;left:16px}

/* ---------- oficina: quadro ---------- */
.os-board{display:grid;grid-template-columns:repeat(6,minmax(230px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px;align-items:start}
.os-col{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:var(--r2);padding:10px;min-height:180px}
.os-col h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.os-col h4 b{background:var(--p3);color:var(--cream);border-radius:999px;padding:1px 8px;font-size:11px}
.os-col.c-sky h4{color:var(--sky)}.os-col.c-alerta h4{color:var(--alerta)}.os-col.c-ember h4{color:var(--ember)}.os-col.c-bella h4{color:var(--bella)}.os-col.c-ok h4{color:var(--ok)}
.os-cards{display:flex;flex-direction:column;gap:8px}
.os-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.os-card{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r);background:var(--p1);border:1px solid var(--line);color:var(--cream);text-decoration:none;transition:border-color .15s,transform .1s}
.os-card:hover{border-color:var(--bella);transform:translateY(-1px)}
.os-card.retorno{border-color:rgba(255,84,104,.5)}
.os-card.late{box-shadow:inset 3px 0 0 var(--verm)}
.os-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.os-moto{font-weight:700;font-size:14px}
.os-cli{font-size:13px;color:var(--cream2)}
.os-sin{font-size:12.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.os-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.os-rod{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--cream2);margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.os-rod span{display:inline-flex;align-items:center;gap:4px}
@media (max-width:1300px){.os-board{grid-template-columns:repeat(6,250px)}}
@media (max-width:700px){.os-board{display:flex;flex-direction:column}.os-col{min-height:0}.os-col.vazia{display:none}}

/* ---------- oficina: nova OS ---------- */
.os-nova{align-items:start}
.np-info{min-height:60px}
.np-moto{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r);background:var(--p1);border:1px solid var(--line2)}
.np-moto b{font-size:16px}.np-moto span{color:var(--cream2);font-size:13.5px}.np-moto small{color:var(--mut);font-size:12.5px}
.np-moto .tag{align-self:flex-start}

/* ---------- oficina: ficha ---------- */
.os-status{font-family:var(--f-disp);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:var(--p3);color:var(--cream)}
.os-status.st-aprovacao{background:rgba(255,165,58,.18);color:var(--alerta)}.os-status.st-peca{background:rgba(255,122,47,.18);color:var(--ember)}.os-status.st-servico{background:rgba(255,196,20,.18);color:var(--bella)}.os-status.st-pronta{background:rgba(61,220,151,.18);color:var(--ok)}.os-status.st-entregue{background:rgba(61,220,151,.1);color:#9ff0c2}.os-status.st-cancelada{background:rgba(255,84,104,.15);color:#ffb3bd}.os-status.st-diagnostico{background:rgba(92,200,255,.15);color:var(--sky)}
.os-steps{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto}
.os-steps li{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--p1);border:1px solid var(--line);font-size:12.5px;color:var(--mut);white-space:nowrap}
.os-steps li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--p3);font-size:11px;font-weight:700;flex:none}
.os-steps li.feito{color:var(--cream2)}.os-steps li.feito span{background:var(--ok);color:#06251a}
.os-steps li.agora{color:var(--cream);border-color:var(--bella);background:rgba(255,196,20,.08)}.os-steps li.agora span{background:var(--bella);color:var(--on-bella)}
.os-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.os-main,.os-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.os-side{position:sticky;top:0}
.os-txt{margin:0 0 10px;white-space:pre-wrap;line-height:1.5}
.os-itens td{padding:8px 6px}.os-itens .tot td{border-top:1px solid var(--line2);font-size:16px;padding-top:12px}
.os-tl{display:flex;flex-direction:column;gap:0;margin-top:6px}
.os-tl .ev{display:flex;gap:12px;padding:6px 0 12px;position:relative}
.os-tl .ev::before{content:"";position:absolute;left:6px;top:20px;bottom:0;width:1px;background:var(--line2)}
.os-tl .ev:last-child::before{display:none}
.os-tl .dot{width:13px;height:13px;border-radius:50%;background:var(--bella);flex:none;margin-top:5px;box-shadow:0 0 0 3px rgba(255,196,20,.18)}
.os-tl .ev.interno .dot{background:var(--mut2);box-shadow:none}
.os-tl p{margin:0;line-height:1.45}.os-tl small{color:var(--mut);font-size:12px}
.os-foto{display:block;max-width:260px;max-height:200px;border-radius:10px;margin:6px 0;border:1px solid var(--line2);object-fit:cover}
@media (max-width:900px){.os-grid{grid-template-columns:1fr}.os-side{position:static;order:-1}}

/* ---------- mecânicos ---------- */
.mc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.mc.off{opacity:.6}
.mc-esp{margin:10px 0;display:flex;flex-wrap:wrap;gap:4px}
.mc-dias{display:flex;gap:4px;align-items:center;margin-bottom:10px}
.mc-dias span{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--p2);color:var(--mut2);border:1px solid transparent}
.mc-dias span.on{background:var(--p3);color:var(--cream)}.mc-dias span.hoje{border-color:var(--bella)}.mc-dias span.on.hoje{background:var(--bella);color:var(--on-bella)}
.mc-dias small{margin-left:auto;color:var(--mut);font-size:12px}
.mc-kpis{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-bottom:12px}
.mc-kpis .kpi{padding:10px 12px}.mc-kpis .kpi b{font-size:18px}

/* ---------- procedimentos ---------- */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pr-card{text-align:left;color:var(--cream);display:flex;flex-direction:column;gap:6px;transition:border-color .15s}
.pr-card:hover{border-color:var(--bella)}
.pr-passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pr-passos li{display:flex;gap:12px;padding:12px;border-radius:var(--r);background:var(--p1);border:1px solid var(--line)}
.pr-passos li.agora{border-color:var(--bella)}
.pr-passos li.feito{opacity:.6}
.pr-passos li p{margin:0 0 6px;line-height:1.5}
.pr-chk{width:34px;height:34px;border-radius:50%;flex:none;border:2px solid var(--line2);background:var(--p2);color:var(--cream);font-weight:700;display:grid;place-items:center}
.pr-passos li.feito .pr-chk{background:var(--ok);border-color:var(--ok);color:#06251a}
.pr-passos li.agora .pr-chk{border-color:var(--bella);color:var(--bella)}
.pr-senao{font-size:13px;color:var(--cream2);background:rgba(255,165,58,.08);border-left:3px solid var(--alerta);padding:6px 10px;border-radius:0 8px 8px 0}
.ch-card{padding:14px}.ch-card.aberto{border-color:rgba(255,165,58,.4)}
.ch-resp{display:flex;gap:10px;background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.3);border-radius:var(--r);padding:10px 12px;margin:8px 0}
.ch-resp .ic{color:var(--ok);flex:none;margin-top:2px}.ch-resp p{margin:4px 0 0}

/* ---------- assistente / chat ---------- */
.ia-card{display:flex;flex-direction:column;gap:12px}
.ia-chat{display:flex;flex-direction:column;gap:10px;max-height:55vh;min-height:220px;overflow-y:auto;padding:4px}
.ia-msg{max-width:85%;padding:10px 14px;border-radius:16px;line-height:1.5;font-size:14.5px}
.ia-msg.bot{align-self:flex-start;background:var(--p2);border:1px solid var(--line);border-bottom-left-radius:4px}
.ia-msg.eu{align-self:flex-end;background:var(--bella);color:var(--on-bella);border-bottom-right-radius:4px;font-weight:600}
.ia-msg p{margin:0}.ia-msg .chips{margin-top:8px}
.ia-form{display:flex;gap:8px}.ia-form .inp{flex:1}
.mcorpo .ia-chat{max-height:50vh}

/* ---------- painel ---------- */
.pn-precisa .item{border-left:3px solid var(--alerta)}
.pn-chart{display:flex;gap:4px;align-items:flex-end;height:160px;padding-top:6px}
.pn-chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:1px;position:relative}
.pn-chart .bar i{display:block;border-radius:3px 3px 0 0;min-height:0}
.pn-chart .bar .bl{background:var(--bella)}.pn-chart .bar .of{background:var(--ember);order:-1;border-radius:3px 3px 0 0}
.pn-chart .bar span{font-size:10px;color:var(--mut);text-align:center;margin-top:4px}
.pn-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:r}
.pn-rank li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px;counter-increment:r}
.pn-rank li::before{content:counter(r);color:var(--mut);font-family:var(--mono);font-size:11px;margin-right:8px;min-width:14px}
.pn-rank li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-rank li:last-child{border-bottom:0}
.pn-td{border-color:rgba(255,196,20,.35);background:linear-gradient(180deg,rgba(255,196,20,.06),transparent),var(--p1)}

.ia-ok{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line2);font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.ia-ok .chip{min-height:30px;font-size:12px;padding:0 10px}
.td-grande{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:14px;align-items:stretch}
.td-num{background:var(--bella);color:var(--on-bella);border-radius:var(--r2);padding:18px;display:flex;flex-direction:column;justify-content:center}
.td-num small{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;opacity:.75}
.td-num b{font-size:56px;line-height:1;font-family:var(--f-disp);font-weight:900;margin:6px 0}
.td-num em{font-style:normal;font-size:13px;font-weight:600;opacity:.85}
.td-dias{display:flex;gap:6px;align-items:flex-end;height:90px;margin-top:8px;justify-content:flex-start}
.td-dias .d{flex:1;max-width:64px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;height:100%}
.td-dias .d i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--ok)}
.td-dias .d i.ch{background:var(--alerta)}
.td-dias .d span{font-size:10px;color:var(--mut)}
@media (max-width:760px){.td-grande{grid-template-columns:1fr}}