:root{
  --black:#0e0e11; --black2:#17171c; --black3:#20202a;
  --red:#e11923; --red-600:#c1121f; --red-soft:#fde8e9;
  --bg:#f3f4f6; --surface:#fff; --border:#e5e7eb; --text:#15151a; --muted:#6b7280;
  --green:#15a34a; --amber:#f59e0b; --blue:#2563eb; --blue-soft:#dbeafe;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sb:240px;                       /* largura da barra lateral (recolhida via html.sb-col) */
}
html.sb-col{--sb:66px}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px}
a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:var(--black);color:#cfd3da;position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;transition:width .16s ease;overflow-x:hidden}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid #23232b}
.sidebar .logo{width:36px;height:36px;border-radius:9px;background:var(--red);display:flex;align-items:center;justify-content:center}
.sidebar .brand b{color:#fff;font-size:15px}.sidebar .brand b span{color:var(--red)}
.sidebar .brand small{display:block;color:#9aa1ab;font-size:10.5px}
.nav{flex:1;padding:12px}
.nav .grp{color:#6b6f78;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:#c3c8d0;font-weight:500;margin-bottom:2px;font-size:13.5px}
.nav a:hover{background:#1c1c22;color:#fff}
.nav a.active{background:var(--red);color:#fff}
.nav-ic{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav a:hover .nav-ic,.nav a.active .nav-ic{opacity:1}
.nav a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{flex:1;min-width:0;margin-left:var(--sb);display:flex;flex-direction:column;transition:margin-left .16s ease}
.topbar{height:58px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:5}
.topbar .crumb{font-size:13px;color:var(--muted)}.topbar .crumb b{color:var(--text)}
.topbar .spacer{flex:1}
.topbar .user{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.content{padding:26px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.page-head h2{font-size:22px;margin:0}.page-head p{color:var(--muted);margin:4px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.05);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.kpi .v{font-size:28px;font-weight:800}.kpi .l{color:var(--muted);font-size:13px;margin-top:2px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.panel .p-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid #eef0f3}
.panel .p-head h3{font-size:15px;margin:0}
.panel .p-body{padding:18px}.panel .p-body.flush{padding:0}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:11px 18px;border-bottom:1px solid #eef0f3;background:#fafbfc}
tbody td{padding:12px 18px;border-bottom:1px solid #eef0f3}
tbody tr:hover{background:#fafbfc}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;font-size:13px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--red);color:#fff}.btn.primary:hover{background:var(--red-600)}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border)}.btn.ghost:hover{background:var(--bg)}
.btn.sm{padding:6px 11px;font-size:12px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px}
.b-green{background:#e7f6ec;color:var(--green)}.b-gray{background:#eef0f3;color:#5b6472}
.b-red{background:var(--red-soft);color:var(--red)}
.b-blue{background:var(--blue-soft);color:#1d4ed8}
.alert{background:#e7f6ec;border:1px solid #bfe6cd;color:#0f7a37;padding:10px 14px;border-radius:9px;margin-bottom:16px;font-size:13px}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fg label{font-size:12.5px;font-weight:600;color:#3d4451}
.fg input:not([type=checkbox]):not([type=radio]),.fg select,.fg textarea{
  border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:14px;
  font-family:inherit;color:var(--text);line-height:1.2;min-height:40px;
  width:100%;max-width:420px;background:#fff;appearance:none;-webkit-appearance:none}
.fg select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px}
.fg input[type=file]{padding:8px 12px}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
/* campos de data: ícone do calendário na cor da marca, sem visual nativo */
.fg input[type=date],.fg input[type=datetime-local],.fg input[type=time]{max-width:200px}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;filter:grayscale(1)}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1;filter:none}
/* checkbox + label lado a lado (o .fg é coluna; aqui volta a ser linha) */
.check{display:flex;flex-direction:row;align-items:center;gap:8px}
.check input[type=checkbox]{width:16px;height:16px;min-height:0;accent-color:var(--red);cursor:pointer}
.check label{cursor:pointer}
/* botão do seletor de arquivo no padrão dos botões "ghost" */
.fg input[type=file]::file-selector-button{
  border:1px solid var(--border);background:#fff;color:var(--text);border-radius:7px;
  padding:5px 11px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;margin-right:10px}
.fg input[type=file]::file-selector-button:hover{background:var(--bg);border-color:var(--red);color:var(--red)}
.val{color:var(--red);font-size:12.5px}
.row-ac{display:flex;gap:8px}
.b-pf{background:#eef2ff;color:#4353c4}.b-pj{background:#fff2e5;color:#b4630c}
/* ---- BUSCA AVANÇADA ---- */
.hide{display:none}
.filtro-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search-ico{position:relative;display:flex;align-items:center;flex:1;min-width:240px}
.search-ico svg{position:absolute;left:12px;width:16px;height:16px;stroke:#9aa1ab;fill:none;stroke-width:2}
/* Os :not() estão aqui por ESPECIFICIDADE, não por lógica: a regra genérica
   ".fg input:not(...):not(...)" (0-3-1) esmagava o padding-esquerdo de 36px
   e o texto deslizava para DEBAIXO da lupa. Mesmo peso + vir depois = ganha. */
.search-ico input:not([type=checkbox]):not([type=radio]){width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 12px 10px 36px;font-size:14px;background:#fff}
.search-ico input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.btn .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn .cnt{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:2px}
.btn.ghost .cnt{background:var(--red);color:#fff}
.adv-panel{margin-top:16px;padding-top:16px;border-top:1px dashed #e3e6ea}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.adv-grid .fg{margin-bottom:0}
.adv-grid .fg select,.adv-grid .fg input{max-width:none;width:100%}
.adv-actions{display:flex;gap:8px;margin-top:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.chips-lbl{font-size:12px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--red-soft);color:var(--red);border:1px solid #f6c9cc;border-radius:20px;padding:5px 11px;font-size:12px;font-weight:600}
.chip:hover{background:#fbd9db}
.chip b{font-weight:800}.chip .x{font-weight:800}
.chips-clear{font-size:12px;color:var(--muted);text-decoration:underline}
.chips-clear:hover{color:var(--red)}
/* ---- PROGRAMAÇÃO (quadro por técnico) ---- */
/* Colunas compactas: 9 técnicos numa linha só. O mínimo de 132px é o que
   permite 9 colunas em ~1.250px de conteúdo; abaixo disso quebra sozinho. */
.prog-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;align-items:start}
.prog-col{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;min-width:0}
.prog-head{padding:8px 9px;border-bottom:1px solid #eef0f3;background:#fafbfc}
.prog-head .nome{font-weight:800;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-head .cap{font-size:10.5px;color:var(--muted);margin-top:1px;white-space:nowrap}
.prog-head .cap b{color:var(--green)}
.prog-head .cap b.warn{color:#b4630c}.prog-head .cap b.over{color:var(--red)}
.prog-bar{height:5px;background:#eef0f3;border-radius:20px;margin-top:5px;overflow:hidden}
.prog-bar span{display:block;height:100%;background:var(--green);border-radius:20px}
.prog-bar span.warn{background:#f59e0b}.prog-bar span.over{background:var(--red)}
.prog-head .folga{font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* teto de altura: sem isso uma coluna cheia estica a linha inteira */
.prog-cards{padding:7px;display:flex;flex-direction:column;gap:6px;min-height:44px;max-height:430px;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cfd4db transparent}
/* barra de rolagem sempre visível: sem ela o corte no último cartão parece defeito */
.prog-cards::-webkit-scrollbar{width:6px}
.prog-cards::-webkit-scrollbar-track{background:transparent}
.prog-cards::-webkit-scrollbar-thumb{background:#cfd4db;border-radius:20px}
.prog-vazio{color:#9aa1ab;font-size:11px;text-align:center;padding:14px 2px}

/* ── arrastar e soltar entre técnicos ── */
.prog-dica{margin-bottom:10px}
.prog-card[draggable="true"]{cursor:grab}
.prog-card[draggable="true"]:active{cursor:grabbing}
.prog-card.arrastando{opacity:.4}
.prog-card.salvando{opacity:.5;pointer-events:none}
.prog-col{transition:box-shadow .12s,opacity .12s}
.prog-col.drop-ok{box-shadow:0 0 0 2px var(--green) inset}
.prog-col.drop-ok.sobre{box-shadow:0 0 0 3px var(--green) inset;background:#f2fdf6}
.prog-col.drop-no{opacity:.55;box-shadow:0 0 0 2px #e5b4b7 inset}
.prog-drop-msg{font-size:9.5px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
  padding:5px 6px;background:#e7f7ee;color:#0f7a38;text-align:center;line-height:1.3}
.prog-drop-msg.no{background:var(--red-soft);color:var(--red-600)}
.prog-card{border:1px solid var(--border);border-left:3px solid var(--red);border-radius:7px;padding:6px 7px;background:#fff}
.prog-card.sobre{border-left-color:#f59e0b;background:#fffbf3}
.prog-card .topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prog-card .topo{gap:5px}
.prog-card .placa{font-weight:800;font-size:11px}
.prog-card .tpr{font-size:9.5px;font-weight:800;color:#5b6472;background:#eef0f3;border-radius:5px;padding:1px 5px;white-space:nowrap}
/* duas linhas no máximo: o nome completo do serviço fica no title do cartão */
.prog-card .serv{font-size:11px;font-weight:600;margin-top:3px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* o cliente sai do cartão para caber 9 colunas — vem no tooltip */
.prog-card .meta{display:none}
.prog-card .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.tag{font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;letter-spacing:.2px}
.tag.manual{background:#eef2ff;color:#4353c4}
.tag.over{background:#fff4e5;color:#b4630c}
.tag.exec{background:#e0f2fe;color:#0369a1}
.tag.done{background:#e7f6ec;color:var(--green)}
/* ── cancelamento de um serviço do agendamento ── */
tr.serv-cancelado td{opacity:.55}
tr.serv-cancelado td:nth-child(2) > *:first-child,
tr.serv-cancelado td:nth-child(3){text-decoration:line-through}
.serv-acoes{position:relative}
.serv-acoes summary{font-size:12px;color:var(--muted);cursor:pointer;list-style:none;
  border:1px solid var(--border);border-radius:7px;padding:5px 11px;white-space:nowrap}
.serv-acoes summary::-webkit-details-marker{display:none}
.serv-acoes summary:hover{border-color:var(--red);color:var(--red)}
.serv-acoes[open] summary{border-color:var(--red);color:var(--red)}
/* white-space:normal reverte o nowrap da célula, senão o botão sai da caixa */
.serv-acoes form{position:absolute;right:0;top:calc(100% + 6px);z-index:6;width:250px;
  white-space:normal;background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.serv-acoes form .btn{width:100%;justify-content:center}
.serv-acoes label{display:block;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.serv-acoes input[type=text]{width:100%;border:1px solid var(--border);border-radius:7px;
  padding:7px 9px;font-size:12.5px;font-family:var(--font);margin-bottom:9px}
.serv-acoes input[type=text]:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.prog-acoes{margin-top:6px;border-top:1px dashed #e3e6ea;padding-top:6px}
.prog-acoes summary{font-size:10.5px;color:var(--muted);cursor:pointer}
.prog-acoes summary:hover{color:var(--red)}
.prog-acoes .mover{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.prog-acoes select,.prog-acoes input[type=date]{border:1px solid var(--border);border-radius:7px;padding:5px 7px;font-size:11.5px;flex:1;min-width:96px}
/* ---- AGENDAMENTO (formulário) ---- */
.ag-sugestoes{margin-top:6px}
.ag-sug{border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13px;cursor:pointer;margin-bottom:5px;background:#fff}
.ag-sug:hover{border-color:var(--red);background:var(--red-soft)}
.ag-sug.vazio{color:var(--muted);cursor:default}
.ag-escolhido{margin-top:8px;background:var(--red-soft);border:1px solid #f6c9cc;border-radius:9px;padding:10px 13px;font-size:13.5px}
/* layout duas colunas: formulário + sugestão automática */
.ag-layout{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
@media(max-width:1100px){.ag-layout{grid-template-columns:1fr}}
.ag-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.ag-grid2 .fg{margin-bottom:0}
.ag-grid2 .fg input,.ag-grid2 .fg select{max-width:none}
.ag-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.ag-chip{display:inline-flex;align-items:center;gap:8px;background:var(--red-soft);color:var(--red);
  border:1px solid #f6c9cc;border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600}
.ag-chip .x{cursor:pointer;font-weight:800;font-size:14px;line-height:1}
.ag-chip .x:hover{color:var(--red-600)}
.ag-total{margin-bottom:4px}
/* painel de sugestão */
.ag-sugestao{position:sticky;top:74px}
.sug-card{border:1px solid var(--border);border-left:3px solid var(--red);border-radius:9px;
  padding:10px 12px;margin-bottom:9px;background:#fff}
.sug-card.over{border-left-color:#f59e0b;background:#fffbf3}
.sug-card .topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sug-card .serv{font-weight:700;font-size:13px;line-height:1.3}
.sug-card .tpr{font-size:12px;font-weight:800;color:var(--red);white-space:nowrap}
.sug-card .quem{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;color:#5b6472}
.sug-card .av{width:22px;height:22px;border-radius:50%;background:var(--black2);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:0 0 auto}
.sug-info{background:var(--red-soft);border:1px solid #f6c9cc;border-radius:9px;padding:10px 12px;
  font-size:12.5px;color:#8a2b32;margin-top:10px;line-height:1.5}
.sug-info.over{background:#fff4e5;border-color:#f5d6a8;color:#8a5a12}
.sug-btn{border:1px solid currentColor;background:transparent;color:inherit;border-radius:7px;
  padding:3px 10px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-left:4px}
.sug-btn:hover{background:rgba(0,0,0,.05)}
.sug-troca{margin-top:7px;background:#fff7ed;border:1px solid #fcd9a8;border-radius:7px;
  padding:6px 9px;font-size:11.5px;line-height:1.35;color:#8a5a12}
.sug-tec{width:100%;margin-top:8px;border:1px solid var(--border);border-radius:7px;padding:6px 26px 6px 9px;
  font-size:12px;font-family:inherit;background:#fff;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:13px}
.sug-tec:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.sug-titulo{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;margin:16px 0 8px;padding-top:12px;border-top:1px solid #eef0f3}
.disp-leg{display:flex;gap:14px;margin-bottom:8px;font-size:10.5px;color:var(--muted)}
.disp-leg span{display:inline-flex;align-items:center;gap:5px}
.disp-leg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.disp-leg i.ag{background:var(--red)}
.disp-leg i.sim{background:var(--blue)}
.disp-linha{display:flex;align-items:center;gap:9px;padding:6px 0;border-radius:8px}
.disp-linha.ativo{background:var(--red-soft);padding:6px 8px;margin:2px -8px}
.disp-linha .av{width:22px;height:22px;border-radius:50%;background:var(--black2);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:0 0 auto}
.disp-linha .info{flex:1;min-width:0}
.disp-linha .n{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;justify-content:space-between;gap:8px}
.disp-linha .n .det{font-weight:500;color:var(--muted);font-size:11px;flex:0 0 auto}
.disp-linha .prog-bar{height:6px;margin-top:4px}
/* barra em duas faixas: cinza = já agendado, vermelho = este agendamento */
.prog-bar.dupla{display:flex;gap:0}
.prog-bar.dupla span{border-radius:0;height:100%;display:block}
.prog-bar.dupla span.ag{background:var(--red);border-radius:20px 0 0 20px}
.prog-bar.dupla span.sim{background:var(--blue);border-radius:0 20px 20px 0}
.prog-bar.dupla span.ag:only-child{border-radius:20px}
.prog-bar.dupla.over span.sim{background:#f59e0b}
.disp-linha .f{font-size:11px;font-weight:700;color:#5b6472;white-space:nowrap;flex:0 0 auto}
.disp-linha .f.zero{color:var(--red)}
.ag-cat{margin-bottom:18px}
.ag-cat-nome{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #eef0f3}
.ag-servicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:7px}
.ag-serv{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:13px;cursor:pointer;background:#fff}
.ag-serv:hover{border-color:var(--red)}
.ag-serv.on{border-color:var(--red);background:var(--red-soft)}
.ag-serv .d{flex:1;line-height:1.25}
.ag-serv .t{font-size:11.5px;font-weight:700;color:#5b6472;background:#eef0f3;border-radius:6px;padding:1px 7px;white-space:nowrap}
.ag-serv.on .t{background:#fff;color:var(--red)}
/* ---- CALENDÁRIO DA OFICINA ---- */
.cal-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
@media(max-width:1100px){.cal-layout{grid-template-columns:1fr}}
.cal-tbl td{padding:9px 14px;vertical-align:middle}
.cal-tbl th{padding:10px 14px}
.cal-dia{opacity:.5}
.cal-dia.on{opacity:1}
.cal-dia .check{gap:9px}
.cal-turno{display:flex;align-items:center;gap:6px}
.cal-turno input{width:66px;min-height:0;border:1px solid var(--border);border-radius:7px;
  padding:6px 8px;font-size:12.5px;font-family:inherit;text-align:center;background:#fff}
.cal-turno input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.cal-turno span{font-size:11.5px;color:var(--muted)}
.cal-hnu{width:66px;min-height:0;border:1px solid var(--border);border-radius:7px;
  padding:6px 8px;font-size:12.5px;font-family:var(--font);text-align:center;background:#fff}
.cal-hnu:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.cal-total{font-weight:700;font-size:12.5px;color:#3d4451}
.cal-total small{display:block;font-weight:500;font-size:10.5px;color:var(--muted);margin-top:1px}
.cal-novo{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.cal-novo .fg input{max-width:none}
/* ---- CAMPO DE DATA pt-BR (dd/mm/aaaa) ---- */
.dp-input{max-width:170px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:32px;cursor:pointer}
.dp-pop{position:absolute;z-index:80;background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.16);padding:12px;width:250px;font-family:var(--font)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-mes{font-size:13px;font-weight:700}
.dp-nav{border:1px solid var(--border);background:#fff;border-radius:7px;width:26px;height:26px;
  cursor:pointer;font-size:15px;line-height:1;color:#5b6472}
.dp-nav:hover{border-color:var(--red);color:var(--red)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font-size:10.5px;font-weight:800;color:var(--muted);text-align:center;padding:4px 0}
.dp-dia{border:none;background:transparent;border-radius:7px;height:30px;cursor:pointer;
  font-size:12.5px;color:var(--text);font-family:inherit}
.dp-dia:hover{background:var(--red-soft);color:var(--red)}
.dp-dia.hoje{font-weight:800;box-shadow:inset 0 0 0 1px var(--border)}
.dp-dia.sel{background:var(--red);color:#fff;font-weight:700}
.dp-foot{display:flex;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid #eef0f3}
.dp-acao{flex:1;border:1px solid var(--border);background:#fff;border-radius:7px;padding:5px;
  font-size:12px;font-weight:600;cursor:pointer;color:#3d4451;font-family:inherit}
.dp-acao:hover{border-color:var(--red);color:var(--red)}
/* ---- PERMISSÕES / PERFIS ---- */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:7px}
.perm-item{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:13px;cursor:pointer;background:#fff}
.perm-item:hover{border-color:var(--red)}
.perm-item.on{border-color:var(--red);background:var(--red-soft)}
.perm-item input[type=checkbox]{width:15px;height:15px;min-height:0;accent-color:var(--red);cursor:pointer;flex:0 0 auto}
.perm-item .nome{flex:1;line-height:1.25}
.perm-item .errst{flex:0 0 auto}
.perm-modulo .p-head{gap:12px}
.perm-modulo .p-head .check{margin:0}
/* ---- LOG DE ERROS / AUDITORIA ---- */
.alert-err{background:#fdecea;border-color:#f5c6cb;color:#a12}
.err-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
@media(max-width:900px){.err-charts{grid-template-columns:1fr}}
.spark{display:flex;align-items:flex-end;gap:4px;height:90px}
.spark .bar{flex:1;display:flex;align-items:flex-end;height:100%}
.spark .bar span{width:100%;background:var(--red);border-radius:3px 3px 0 0;opacity:.85;display:block}
.spark-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.err-tbl tbody td{vertical-align:top}
.err-exp{border:1px solid var(--border);background:#fff;border-radius:7px;width:24px;height:24px;cursor:pointer;color:#5b6472;font-size:11px;line-height:1}
.err-exp:hover{border-color:var(--red);color:var(--red)}
.err-type{font-weight:700;font-size:13px}
.err-msg{color:#5b6472;font-size:12.5px;max-width:520px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.err-rota{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#4b5563}
.errst{display:inline-flex;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.3px;white-space:nowrap}
.st-aberto{background:#fdecea;color:#c1121f}.st-analise{background:#fff4e5;color:#b4630c}
.st-resolvido{background:#e7f6ec;color:var(--green)}.st-ignorado{background:#eef0f3;color:#5b6472}
.op-create{background:#e7f6ec;color:var(--green)}.op-update{background:#eef2ff;color:#4353c4}
.op-delete{background:#fdecea;color:#c1121f}.op-import{background:#fff4e5;color:#b4630c}
.op-outro{background:#eef0f3;color:#5b6472}
.errlvl{display:inline-flex;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px}
.errlvl.err{background:#fdecea;color:#c1121f}.errlvl.warn{background:#fff4e5;color:#b4630c}.errlvl.fatal{background:#2a0a0d;color:#fff}
.errorg{display:inline-flex;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:#eef0f3;color:#5b6472}
.err-detrow>td{background:#fafbfc;padding:0!important}
.err-detbox{padding:14px 18px}
.err-empty{color:var(--muted);font-size:12.5px;padding:12px 0}
.err-sub{color:var(--muted);font-size:12px}
.errdethead{margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
.errtabs{display:flex;gap:4px;border-bottom:1px solid var(--border);flex-wrap:wrap;margin-bottom:12px}
.errtab{padding:8px 12px;font-size:12.5px;font-weight:600;color:#5b6472;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.errtab:hover{color:var(--red)}
.errtab.on{color:var(--red);border-bottom-color:var(--red)}
.errtab .b{background:#eef0f3;color:#5b6472;border-radius:5px;padding:1px 6px;font-size:10.5px;margin-left:3px}
.errpre{background:#0f0f13;color:#d7dae0;border-radius:9px;padding:14px;font-size:12px;line-height:1.55;overflow:auto;max-height:420px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;margin:0}
.errpre .mine{color:#ffb4b8;font-weight:600}.errpre .inner{color:#f6c177}.errpre .at{color:#9aa4ad}.errpre .ex{color:#ff8a8a}
.errkvt{width:100%;border-collapse:collapse;font-size:12.5px}
.errkvt th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;padding:6px 12px;border-bottom:1px solid #eef0f3}
.errkvt td{padding:6px 12px;border-bottom:1px solid #eef0f3;word-break:break-word}
.errkvt td:first-child{font-weight:600;width:190px;color:#3d4451}
.errkvt tr.bad td{background:#fdecea}
.errreq{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.errreq .l{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.errreq .v{font-size:13px;font-weight:600;word-break:break-word}
.errtl{border-left:2px solid var(--border);margin-left:6px;padding-left:14px;display:flex;flex-direction:column;gap:8px}
.errtl .ev{font-size:12.5px;position:relative}
.errtl .ev::before{content:"";position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;background:#c3c8d0}
.errtl .ev.err{font-weight:700;color:var(--red)}
.errtl .ev.err::before{background:var(--red)}
.errtl .t{color:var(--muted);margin-right:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.errtl .aud{background:#eef0f3;color:#5b6472;border-radius:5px;padding:1px 6px;font-size:10.5px;font-weight:700}
.errsim{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef0f3;font-size:12.5px;flex-wrap:wrap}
.errnotes{background:#fffbe6;border:1px solid #f5e6a8;border-radius:9px;padding:10px 14px;font-size:12.5px;margin-top:12px;color:#6b5a12}
.errfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap}
.auddiff{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
.auddiff th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;padding:7px 12px;border-bottom:1px solid #eef0f3;background:#fff}
.auddiff td{padding:7px 12px;border-bottom:1px solid #eef0f3;word-break:break-word;vertical-align:top}
.auddiff td:first-child{font-weight:600;width:200px;color:#3d4451}
.auddiff tr.chg td{background:#fffbe6}
.auddiff tr.chg .old{color:#a12;text-decoration:line-through}
.auddiff tr.chg .new{color:#0f7a37;font-weight:700}
.auddiff tr.isid td{background:#f3f4f6;font-weight:700}
.nav a .badge-n{flex:0 0 auto;background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:20px;padding:1px 7px}
.nav a.active .badge-n{background:#fff;color:var(--red)}
/* ---- DETALHE OS ---- */
.os-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.os-grid>div{display:flex;flex-direction:column;gap:3px}
.os-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
/* pre-line, não normal: reclamação, diagnóstico, avarias e pertences são
   digitados em várias linhas desde que viraram textarea. Sem isso a
   lista de avarias vira um parágrafo corrido e ninguém a confere item
   por item na entrega, que é a única coisa que ela serve para fazer. */
.os-val{font-size:15px;font-weight:600;white-space:pre-line}
/* ---- LOGIN ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1000px 500px at 70% -10%,#2a0a0d,#0e0e11 55%)}
.login-card{background:var(--black2);border:1px solid #2a2a32;border-radius:16px;padding:38px;width:380px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.login-card .brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.login-card .logo{width:44px;height:44px;border-radius:10px;background:var(--red);display:flex;align-items:center;justify-content:center}
.login-card h1{color:#fff;font-size:19px;margin:0}.login-card h1 span{color:var(--red)}
.login-card .sub{color:#9aa1ab;font-size:12px;margin-top:2px}
.login-card label{display:block;color:#c7ccd4;font-size:12px;font-weight:600;margin-bottom:6px}
.login-card input[type=text],.login-card input[type=password]{width:100%;background:#0f0f13;border:1px solid #2f2f38;color:#fff;border-radius:9px;padding:11px 13px;font-size:14px;margin-bottom:16px}
.login-card input:focus{outline:none;border-color:var(--red)}
.login-card .btn-red{background:var(--red);color:#fff;font-weight:700;border:none;border-radius:9px;padding:12px;width:100%;font-size:14px;cursor:pointer}
.login-card .btn-red:hover{background:var(--red-600)}
.login-card .err{background:#2a1113;border:1px solid #5a1a1e;color:#ff8a8a;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.login-foot{color:#6b7280;font-size:11px;text-align:center;margin-top:18px}
.wrench{width:22px;height:22px}

/* Login: mostrar/ocultar senha + aviso de Caps Lock */
.login-card .pw{position:relative}
.login-card .pw input{padding-right:44px}
.pw-olho{position:absolute;top:10px;right:9px;width:28px;height:28px;display:flex;
  align-items:center;justify-content:center;background:none;border:0;color:#8b929c;cursor:pointer;padding:0}
.pw-olho svg{width:18px;height:18px}
.pw-olho:hover{color:#fff}
.pw-olho.on{color:var(--red)}
.caps-aviso{color:#f1b6bb;background:#3a1c1f;border:1px solid #5a2a2e;border-radius:8px;
  padding:6px 10px;font-size:11.5px;margin:-8px 0 14px}


/* ══════════ Barra lateral recolhível ══════════
   O estado mora em html.sb-col, aplicado por um script no <head> antes da
   pintura — se dependesse do fim do carregamento, a barra piscaria aberta. */
.sb-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  margin-right:14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:#5b6472;cursor:pointer;flex:0 0 auto}
.sb-toggle:hover{border-color:var(--red);color:var(--red)}
.sb-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

html.sb-col .sidebar .brand{justify-content:center;padding:18px 0;gap:0}
html.sb-col .sidebar .brand .txt{display:none}
html.sb-col .nav{padding:12px 9px}
/* o título do grupo vira um fio separador: sem rótulo, o texto só atrapalharia */
html.sb-col .nav .grp{font-size:0;line-height:0;padding:0;margin:14px 6px 10px;border-top:1px solid #23232b}
html.sb-col .nav .grp:first-child{margin-top:2px;border-top:0}
html.sb-col .nav a{justify-content:center;padding:10px 0;gap:0;position:relative}
html.sb-col .nav a > span{display:none}
html.sb-col .nav a .badge-n{display:block;position:absolute;top:3px;right:6px;padding:0 4px;font-size:9px;line-height:14px}

/* ══════════════════════════════════════════════════════════════════════
   MENSAGENS DO SISTEMA
   Confirmação = janela central. Informação = aviso flutuante no canto.
   Ver wwwroot/js/ui.js.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Confirmação ── */
body.sem-rolagem{overflow:hidden}
.modal-fundo{position:fixed;inset:0;z-index:60;background:rgba(14,14,17,.55);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;transition:opacity .16s ease}
.modal-fundo.on{opacity:1}
.modal{width:100%;max-width:430px;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.22);transform:translateY(8px) scale(.98);
  transition:transform .16s ease}
.modal-fundo.on .modal{transform:none}
.modal .corpo{padding:22px 22px 4px;display:flex;gap:14px}
.modal .sino{width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center}
.modal .sino svg{width:20px;height:20px}
.modal .sino.perigo{background:var(--red-soft);color:var(--red)}
.modal .sino.refazer,.modal .sino.aviso{background:#fff4e5;color:#b4630c}
.modal .sino.info{background:#eef2ff;color:#4353c4}
.modal h3{margin:0 0 5px;font-size:15.5px;line-height:1.3}
.modal p{margin:0;font-size:13px;color:#5b6472;line-height:1.45}
.modal .pe{display:flex;justify-content:flex-end;gap:9px;padding:18px 22px 20px}
.modal .btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:520px){
  .modal .pe{flex-direction:column-reverse}
  .modal .pe .btn{width:100%;justify-content:center}
}

/* ── Avisos flutuantes ── */
.toasts{position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none}
.toast{width:340px;max-width:calc(100vw - 36px);background:var(--black2);color:#fff;
  border-radius:11px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;
  box-shadow:0 12px 30px rgba(0,0,0,.25);pointer-events:auto;
  opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease}
.toast.on{opacity:1;transform:none}
.toast svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px}
.toast.ok svg{color:#4ade80}
.toast.erro svg{color:#fb7185}
.toast.aviso svg{color:#fbbf24}
.toast.info svg{color:#93b4fd}
.toast .t{flex:1;font-size:12.5px;line-height:1.4}
.toast .x{background:none;border:0;color:#fff;opacity:.5;cursor:pointer;
  font-size:17px;line-height:1;padding:0 2px;font-family:inherit}
.toast .x:hover{opacity:1}

/* ── Faixas de conteúdo (informação fixa da página, não retorno de ação) ── */
/* BLOCO por padrão, não flex. Num container flex, cada <b> e cada <a> soltos
   no meio do texto viram um item próprio — a frase se parte em colunas. Só os
   avisos que têm ÍCONE precisam de flex, e esses envolvem o texto num <div>,
   o que dá exatamente os dois itens que o alinhamento espera. */
.alert{display:block}
.alert:has(> svg){display:flex;align-items:flex-start;gap:10px}
.alert.ok{background:#e7f6ec;border-color:#bfe6cd;color:#0f7a37}
.alert.err,.alert.alert-err{background:#fdecea;border-color:#f5c6cb;color:#a1121f}
.alert.warn{background:#fff4e5;border-color:#f5d6a8;color:#8a5a12}
.alert.info{background:#eef2ff;border-color:#c7d0f5;color:#3a45a8}

/* ══════════════ CADASTRO DE CLIENTES ══════════════ */
.cli-layout{max-width:940px}
.panel.sec{margin-bottom:16px}
.req{color:var(--red)}

/* seletor PF x PJ */
.tipo-pessoa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tipo-pessoa .tp{display:flex;align-items:center;gap:9px;border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;cursor:pointer;font-weight:600;font-size:13.5px;background:#fff}
.tipo-pessoa .tp:hover{border-color:var(--red)}
.tipo-pessoa .tp.on{border-color:var(--red);background:var(--red-soft);color:var(--red-600)}
.tipo-pessoa .tp input{width:16px;height:16px;accent-color:var(--red);cursor:pointer;margin:0}
@media(max-width:640px){.tipo-pessoa{grid-template-columns:1fr}}

/* endereço: CEP curto, logradouro largo, número curto */
.end-grid{display:grid;grid-template-columns:150px 1fr 120px;gap:14px}
/* cidade/UF/IBGE: a cidade é que precisa de espaço, não a UF */
.end-grid.cid{grid-template-columns:1fr 100px 160px}
.end-grid.bcu{grid-template-columns:1fr 1fr 100px}
.end-grid .fg input,.end-grid .fg select{max-width:none}
@media(max-width:760px){.end-grid,.end-grid.cid,.end-grid.bcu{grid-template-columns:1fr}}

/* telefones adicionais */
.tel-extras{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tel-linha{display:grid;grid-template-columns:1fr 190px 34px;gap:8px;align-items:center}
.tel-linha input{border:1px solid var(--border);border-radius:9px;padding:9px 12px;
  font-size:13.5px;font-family:var(--font);min-height:40px;background:#fff;width:100%}
.tel-linha input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.tel-x{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.tel-x:hover{border-color:var(--red);color:var(--red)}
@media(max-width:640px){.tel-linha{grid-template-columns:1fr 34px}}
.btn-add{margin-top:10px;width:100%;border:1px dashed #c7cdd6;border-radius:10px;background:#fff;
  color:var(--muted);padding:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-add:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}

/* campo consultando o CEP */
input.carregando{background-image:linear-gradient(90deg,transparent,rgba(225,25,35,.10),transparent);
  background-size:200% 100%;animation:cep-load 1s linear infinite}
@keyframes cep-load{from{background-position:200% 0}to{background-position:-200% 0}}

/* ficha do cliente */
.cli-vazio{color:var(--muted);font-size:13px}

/* ══════════════ PREÇO DO SERVIÇO POR VIGÊNCIA ══════════════ */
.prc-layout{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
@media(max-width:1100px){.prc-layout{grid-template-columns:1fr}}

/* cartão do preço que vale hoje */
.preco-atual{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:16px}
.preco-atual > div{background:#fff;padding:12px 14px}
.preco-atual .l{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.preco-atual .v{font-size:18px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.preco-atual .v.venda{color:var(--green)}
.preco-atual .v.custo{color:#5b6472}
.preco-atual .v.margem{color:var(--blue)}
.preco-atual .s{font-size:10.5px;color:var(--muted);margin-top:1px}

/* linha do tempo */
.linha{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:16px 1fr;gap:12px}
.tl .marca{display:flex;flex-direction:column;align-items:center}
.tl .bolinha{width:11px;height:11px;border-radius:50%;background:#cfd4db;margin-top:6px;flex:0 0 auto}
.tl.on .bolinha{background:var(--green);box-shadow:0 0 0 3px #d7f2e1}
.tl.fut .bolinha{background:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.tl .fio{flex:1;width:2px;background:#e7eaef;margin:3px 0}
.tl:last-child .fio{display:none}
.tl .cx{border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:10px;background:#fff}
.tl.on .cx{border-color:#bfe6cd;background:#f4fbf6}
.tl.fut .cx{border-color:#c7dbfd;background:#f5f8ff}
.tl .topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tl .per{font-size:12.5px;font-weight:700}
.tl .vals{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:13px;font-variant-numeric:tabular-nums}
.tl .vals b{font-weight:800}
.tl .obs{margin-top:6px;font-size:12px;color:#5b6472;font-style:italic}
.tl .rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px dashed #e3e6ea}
.tl .meta{font-size:11px;color:var(--muted)}
.tl .meta.trancado{font-style:italic}
.tl .acoes{display:flex;gap:12px;align-items:center}
.tl .acoes form{margin:0}
.lnk{background:none;border:0;padding:0;font-family:inherit;font-size:11.5px;font-weight:700;
  color:var(--muted);cursor:pointer}
.lnk:hover{color:var(--red)}

/* prévia da margem no formulário */
.prc-margem{background:#eef2ff;border:1px solid #c7d0f5;color:#3a45a8;border-radius:9px;
  padding:9px 12px;font-size:12.5px;line-height:1.4;margin-bottom:14px}
.prc-margem.neg{background:var(--red-soft);border-color:#f2c9cc;color:var(--red-600)}

.prc-vazio{border:1px dashed #c7cdd6;border-radius:10px;padding:16px;margin-bottom:14px;
  font-size:13px;color:var(--muted);line-height:1.5}
.prc-vazio b{display:block;color:var(--text);margin-bottom:3px}
.prc-preco{font-weight:700;font-variant-numeric:tabular-nums}
/* coluna numérica: alinhada à direita e com dígitos de largura fixa,
   para as casas decimais ficarem uma embaixo da outra */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.prc-sem{color:#b6bcc5;font-size:12px}

/* ══════════════ CADASTRO DE PRODUTOS ══════════════ */
.prod-layout{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start;max-width:1180px}
@media(max-width:1100px){.prod-layout{grid-template-columns:1fr}}
.est-baixo{color:var(--red);font-weight:800}
.tl .vals.sec2{font-size:11.5px;color:var(--muted);gap:12px;margin-top:3px}

/* sub-navegação das telas do produto */
.sub-nav{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.sub-nav a{padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sub-nav a:hover{color:var(--text)}
.sub-nav a.on{color:var(--red);border-bottom-color:var(--red)}

/* abas do bloco fiscal */
.fis-tabs{display:flex;gap:4px;padding:10px 14px 0;background:#fafbfc;
  border-bottom:1px solid #eef0f3;overflow-x:auto;flex-wrap:nowrap}
.fis-tab{border:1px solid transparent;border-bottom:0;background:none;cursor:pointer;
  padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  border-radius:8px 8px 0 0;white-space:nowrap}
.fis-tab:hover{color:var(--text);background:#f1f3f5}
.fis-tab.on{background:#fff;border-color:var(--border);color:var(--red);margin-bottom:-1px}
.fis-aba{display:none}
.fis-aba.on{display:block}
.fis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fis-grid .fg{margin-bottom:0}
.fis-grid .fg input{max-width:none}
@media(max-width:900px){.fis-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.fis-grid{grid-template-columns:1fr}}

/* ═══════════════════════════ FINANCEIRO ═══════════════════════════ */

/* faltavam duas cores de badge: âmbar para "parcial"/"atenção" e roxo para origem */
.b-amber{background:#fff4e5;color:#b4630c}
.b-purple{background:#f3e8ff;color:#6d28d9}

/* linha vencida: fundo avermelhado, sem depender de ler a coluna de status */
tbody tr.venc{background:#fff8f8}
tbody tr.venc:hover{background:#fff2f2}
tbody tr.cancelada{opacity:.55}
tbody tr.tot td{background:#fafbfc;font-weight:700;border-bottom:none}

.fin-neg{color:var(--red)}
.fin-pos{color:var(--green)}
.fin-sub{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;font-weight:500}

/* barra de seleção em lote que aparece no rodapé da listagem */
.fin-lote{display:flex;gap:9px;align-items:center;padding:11px 18px;
  border-top:1px solid #eef0f3;background:#fafbfc;font-size:13px}
.fin-lote b{font-size:13px}
.fin-lote.off{display:none}

/* KPI compacto do painel */
.kpi.g::before{background:var(--green)}
.kpi.a::before{background:var(--amber)}
.kpi.b::before{background:var(--blue)}
.kpi .l b{color:var(--red)}

/* ── calendário financeiro ── */
.fincal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.fincal .dh{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;
  text-align:center;padding:5px 0}
.fincal .d{background:#fff;border:1px solid var(--border);border-radius:9px;
  min-height:88px;padding:6px 7px}
.fincal .d.out{background:#f7f8fa;border-style:dashed}
.fincal .d.hoje{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.fincal .d .n{font-size:11.5px;font-weight:700;color:#4b5563}
.fincal .ev{display:block;font-size:10.5px;border-radius:5px;padding:2px 5px;margin-top:3px;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fincal .ev.p{background:var(--red-soft);color:var(--red-600)}
.fincal .ev.r{background:#e7f6ec;color:#0f7a37}
.fincal .ev.x{background:#eef0f3;color:#6b7280;text-decoration:line-through}
.fincal-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:12px}
.fincal-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ── fluxo de caixa projetado ── */
.flx{display:flex;gap:4px;align-items:flex-end;height:150px;margin:8px 0 6px}
.flx .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.flx .b{border-radius:4px 4px 0 0;background:var(--blue);min-height:3px}
.flx .b.alerta{background:var(--red)}
.flx-lbl{display:flex;gap:4px;font-size:9.5px;color:var(--muted)}
.flx-lbl span{flex:1;text-align:center;overflow:hidden;white-space:nowrap}

/* ── extrato e conciliação ── */
.fin-extrato td.num{font-variant-numeric:tabular-nums}
.conc-so-banco{background:#fff8f8}
.conc-so-sistema{background:#fffaf2}
.conc-casado{background:#fff}
.fin-caixa{background:#fafbfc;border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;font-size:12.5px;line-height:1.55;margin-bottom:14px}
.fin-caixa b{color:var(--text)}

/* ── detalhe do título: parcelas e baixas ── */
.parc{border:1px solid var(--border);border-radius:11px;margin-bottom:12px;overflow:hidden}
.parc.venc{border-color:#f5c6cb}
.parc.quit{border-color:#bfe6cd}
.parc.canc{opacity:.6}
.parc .top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 15px;background:#fafbfc;border-bottom:1px solid #eef0f3;flex-wrap:wrap}
.parc .top .t{font-weight:700;font-size:13.5px}
.parc .top .v{font-variant-numeric:tabular-nums;font-weight:700}
.parc .corpo{padding:11px 15px}
.parc .baixa{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;
  background:#f5fbf7;border:1px solid #c9e8d6;border-radius:9px;margin-bottom:8px;
  font-size:12.5px;flex-wrap:wrap}
.parc .baixa.est{background:#fdecea;border-color:#f5c6cb;text-decoration:line-through;opacity:.85}
.parc .baixa .meta{color:var(--muted);font-size:11.5px}
.parc .vazio{color:var(--muted);font-size:12.5px}

/* ── tela de baixa ── */
.baixa-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
@media(max-width:980px){.baixa-grid{grid-template-columns:1fr}}
.baixa-total{background:#fafbfc;border:1px solid var(--border);border-radius:10px;
  padding:13px 15px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.baixa-total b{font-size:19px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.g2 .fg,.g3 .fg,.g4 .fg{margin-bottom:0}
@media(max-width:820px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* aviso azul de contexto, reaproveitado em várias telas do módulo */
.alert.info{background:#eef2ff;border-color:#c7d0f5;color:#3a45a8}
.alert.warn{background:#fff7ed;border-color:#fcd9a8;color:#8a5a12}

/* ── categorias: hierarquia na tabela ── */
.cat-filha td:first-child{padding-left:44px;position:relative}
.cat-filha td:first-child::before{content:"›";position:absolute;left:28px;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}

/* ═══════════════════ Ordem de serviço ═══════════════════ */

/* Trilha do fluxo: agendamento → OS → orçamento → aprovação → execução →
   fechamento. A OS é o único documento que atravessa a oficina inteira, e
   quem abre a tela precisa saber em dois segundos onde ela parou. */
.os-trilha{display:flex;align-items:center;gap:0;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:18px;
  overflow-x:auto}
.os-trilha .passo{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9aa1ab;
  font-weight:600;white-space:nowrap;flex:1;min-width:0}
.os-trilha .passo:not(:last-child)::after{content:"";flex:1;height:2px;background:#eef0f3;
  margin:0 10px;min-width:14px}
.os-trilha .bola{width:24px;height:24px;border-radius:50%;background:#eef0f3;color:#9aa1ab;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;flex:0 0 24px}
.os-trilha .passo.feito{color:var(--green)}
.os-trilha .passo.feito .bola{background:#e7f6ec;color:var(--green)}
.os-trilha .passo.feito:not(:last-child)::after{background:#bfe6cd}
.os-trilha .passo.atual{color:var(--text)}
.os-trilha .passo.atual .bola{background:var(--red);color:#fff}

/* Duas colunas: o documento à esquerda, as ações do momento à direita.
   A coluna de ação some no celular — no balcão a OS é consultada, não operada. */
.os-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1180px){.os-layout{grid-template-columns:1fr}}

/* Registro formal de aprovação: é a defesa da oficina quando o cliente diz
   que autorizou outra coisa. Fica visível, não escondido num histórico. */
.os-aprov{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border:1px solid var(--border);border-left:3px solid var(--green);border-radius:9px;
  padding:11px 14px;margin-bottom:9px;font-size:13px}
.os-aprov:last-child{margin-bottom:0}
.os-aprov.neg{border-left-color:var(--red)}

.os-check-lista{border:1px solid var(--border);border-radius:9px;max-height:230px;overflow-y:auto}
.os-check{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;font-size:12.5px;
  border-bottom:1px solid #f1f2f4;cursor:pointer}
.os-check:last-child{border-bottom:none}
.os-check:hover{background:#fafbfc}
.os-check input{margin-top:2px;flex:0 0 auto}
.os-check span{flex:1;min-width:0}
.os-check b{float:right;margin-left:10px}

/* Semáforo do tempo: previsto × realizado. Verde até 85% do TPR, amarelo até
   o limite, vermelho quando estourou. Vale para o texto e para a barra. */
.sem-verde{color:var(--green)}
.sem-amarelo{color:#b4630c}
.sem-vermelho{color:var(--red-600)}
.sem-neutro{color:var(--muted)}
.prog-bar span.sem-verde{background:var(--green)}
.prog-bar span.sem-amarelo{background:var(--amber)}
.prog-bar span.sem-vermelho{background:var(--red)}
.prog-bar span.sem-neutro{background:#cbd0d8}

/* ═══════════════════ Chão de oficina ═══════════════════ */
/* Tela de tablet fixo na parede, usada em pé e de mão suja: alvo mínimo de
   56px, fonte grande, nenhuma digitação obrigatória no caminho principal. */

.chao-tecnicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.chao-tec{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:16px 18px;min-height:76px;
  font-size:16px;font-weight:600;transition:border-color .12s,box-shadow .12s}
.chao-tec:hover{border-color:var(--red);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.chao-tec .ini{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--black);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.chao-tec .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}

.chao-barra{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:16px}
.chao-barra .quem{display:flex;align-items:center;gap:12px}
.chao-barra .quem .ini{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--red);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.chao-barra .quem b{display:block;font-size:17px}
.chao-barra .quem small{color:var(--muted);font-size:12px}
.chao-barra .nums{display:flex;gap:26px;margin-left:auto}
.chao-barra .nums b{display:block;font-size:20px;line-height:1.15}
.chao-barra .nums small{color:var(--muted);font-size:11.5px}

/* O serviço em andamento sai da lista e vira faixa: de longe, a única
   pergunta que o mecânico faz à tela é "o que estou fazendo agora". */
.chao-agora{background:var(--black);color:#fff;border-radius:12px;padding:18px 22px;margin-bottom:16px;
  position:relative;overflow:hidden}
.chao-agora .rot{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8b919b;
  font-weight:700;margin-bottom:6px}
.chao-agora .serv{font-size:22px;font-weight:700;line-height:1.25}
.chao-agora .meta{color:#9aa1ab;font-size:13px;margin-top:4px}
.chao-agora .cron{position:absolute;top:18px;right:22px;font-size:34px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--amber);line-height:1}
.chao-agora .prev{position:absolute;top:58px;right:22px;font-size:12px;color:#8b919b}
@media(max-width:640px){
  .chao-agora .cron,.chao-agora .prev{position:static;text-align:left;margin-top:8px}
}

.chao-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.chao-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.chao-card.exec{border-color:var(--amber);box-shadow:0 0 0 2px #fef3c7}
.chao-card.feito{opacity:.62}
.chao-card .cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.chao-card .os{font-weight:700;font-size:13px}
.chao-card .placa{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--muted);margin-left:7px}
.chao-card .tempo{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.chao-card .tempo small{font-weight:500;color:var(--muted);font-size:12px}
.chao-card .serv{font-size:17px;font-weight:600;line-height:1.3}
.chao-card .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.chao-card .recl{font-size:12.5px;color:#6b7280;font-style:italic;margin-top:7px;white-space:pre-line;
  border-left:2px solid var(--border);padding-left:9px}
.chao-card .prog-bar{margin-top:10px;height:7px}
.chao-card .acoes{display:flex;gap:9px;align-items:stretch;margin-top:14px}
.chao-card .acoes form{margin:0;flex:1;display:flex}
.chao-card .ok-linha{flex:1;color:var(--green);font-weight:700;font-size:14.5px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chao-card .ok-linha .ef{font-weight:600;font-size:12.5px}
.chao-card .ok-linha .ef.boa{color:var(--green)}
.chao-card .ok-linha .ef.ruim{color:#b4630c}

/* 56px é o alvo mínimo confortável para um dedo com luva de mecânico. */
.btn-chao{flex:1;min-height:56px;border:none;border-radius:10px;font-family:inherit;font-size:16px;
  font-weight:700;cursor:pointer;color:#fff;padding:0 14px;transition:filter .12s}
.btn-chao:hover{filter:brightness(1.07)}
.btn-chao:disabled{opacity:.5;cursor:default}
.btn-chao.inicia{background:var(--green)}
.btn-chao.pausa{background:var(--amber);color:#3d2a00}
.btn-chao.conclui{background:var(--blue)}
.btn-chao.desfaz{flex:0 0 56px;background:#eef0f3;color:#6b7280;font-size:20px}

.chao-motivos{margin-top:14px;border-top:1px solid var(--border);padding-top:13px}
.chao-motivos .rot{font-size:12.5px;font-weight:700;color:#3d4451;margin-bottom:9px}
.chao-motivos .grade{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.chao-motivos .grade form{margin:0;display:flex}
.btn-motivo{flex:1;min-height:52px;border:1px solid var(--border);border-radius:9px;background:#fafbfc;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;padding:0 10px}
.btn-motivo:hover{border-color:var(--amber);background:#fff7ed}

/* ═══════════════════ Estoque ═══════════════════ */

/* Faltava o KPI vermelho: saldo negativo e falta de inventário são as duas
   únicas situações do módulo que exigem alguém agir hoje. */
.kpi.r::before{background:var(--red)}

/* Barra de ação do inventário: fica ACIMA da lista porque o número que decide
   se a contagem pode ser aplicada é o impacto, não a última linha contada. */
.inv-acoes{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--amber);
  border-radius:12px;padding:14px 18px;margin-bottom:18px}
.inv-acoes b{display:block;font-size:15px}
.inv-acoes small{display:block;color:var(--muted);font-size:12px;margin-top:3px;max-width:640px}

/* Linha de contagem: quantidade, diferença e observação numa linha só, para a
   contagem ser digitação em série com Enter, sem pegar no mouse. */
.inv-linha{display:flex;align-items:center;gap:9px;margin:0}
.inv-qtd{width:110px;text-align:right;flex:0 0 110px}
.inv-dif{flex:0 0 190px;font-size:12.5px;font-weight:600;text-align:right}
.inv-obs{flex:1;min-width:120px}
@media(max-width:900px){
  .inv-linha{flex-wrap:wrap}
  .inv-dif{flex:0 0 auto;text-align:left}
}

/* ═══════════════════ Veículo ═══════════════════ */

/* Ficha técnica em duas colunas: rótulo estreito à esquerda, valor à direita.
   É consulta rápida no balcão ("qual é o motor?"), não formulário — por isso
   lista de definição e não tabela. */
.ficha{display:grid;grid-template-columns:104px 1fr;gap:7px 12px;margin:0;font-size:13px}
.ficha dt{color:var(--muted);font-size:12px;padding-top:1px}
.ficha dd{margin:0;min-width:0;word-break:break-word}
.ficha dd .fin-sub{margin-top:1px}

/* ═══════════════════ Indicadores (RF09) ═══════════════════ */

.ind-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1180px){.ind-layout{grid-template-columns:1fr}}

/* Série diária: barra empilhada simples, em CSS puro. A pergunta que ela
   responde é de tendência ("a oficina está mais parada esta semana?"), e para
   isso a proporção basta — número exato está na tabela ao lado. */
.ind-serie{display:flex;align-items:flex-end;gap:4px;height:150px;overflow-x:auto;padding-bottom:2px}
.ind-serie .col{flex:1;min-width:26px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%}
.ind-serie .barra{width:100%;background:#fde2e2;border-radius:4px 4px 0 0;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:3px}
.ind-serie .barra .prod{display:block;width:100%;background:var(--green);border-radius:4px 4px 0 0}
.ind-serie .dia{font-size:9.5px;color:var(--muted);margin-top:5px;white-space:nowrap}

/* Cada motivo de parada com sua barra. O evitável é o que a oficina consegue
   atacar; o neutro fica visualmente apagado para não competir por atenção. */
.ind-parada{margin-bottom:13px}
.ind-parada:last-child{margin-bottom:0}
.ind-parada .topo{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;font-size:13px;margin-bottom:4px}
.ind-parada .topo b{white-space:nowrap;font-variant-numeric:tabular-nums}
.ind-parada .meta{font-size:11px;color:var(--muted);margin-top:3px}
.ind-parada:not(.evitavel){opacity:.6}

/* ═══════════════════ Preventiva da frota (RF10) ═══════════════════ */

/* Cartão por VEÍCULO, não por serviço: quem liga fala com o dono do carro uma
   vez e oferece tudo o que está vencido de uma vez só. Uma linha por serviço
   faria a mesma pessoa aparecer quatro vezes na fila. */
.prev-card{border:1px solid var(--border);border-left:3px solid var(--border);
  border-radius:11px;margin-bottom:12px;overflow:hidden;background:var(--surface);
  /* o sem-* do cartão tinge só a BORDA: sem esta linha a cor vazaria para o
     texto inteiro e o cartão viraria um bloco vermelho, em que nada se destaca */
  color:var(--text)}
.prev-card:last-child{margin-bottom:0}
.prev-card.sem-vermelho{border-left-color:var(--red)}
.prev-card.sem-amarelo{border-left-color:var(--amber)}
.prev-card.sem-verde{border-left-color:var(--green)}
.prev-card.atendendo{opacity:.72;background:#fafbfc}

.prev-card .cab{display:grid;grid-template-columns:1.1fr 1.2fr .8fr auto;gap:16px;
  align-items:center;padding:13px 16px}
@media(max-width:980px){.prev-card .cab{grid-template-columns:1fr;gap:9px}}

.prev-card .placa{font-weight:800;font-size:15px}
.prev-card .ident .meta{color:var(--muted);font-size:12px;margin-top:2px}
.prev-card .quem{min-width:0}
.prev-card .quem b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-card .quem .fone{display:block;font-size:12.5px;color:var(--blue);margin-top:2px}
.prev-card .km b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.prev-card .km small{color:var(--muted);font-size:11px}
.prev-card .acao{display:flex;align-items:center;gap:8px;justify-self:end}
.prev-card .acao .valor{font-weight:700;font-size:14px;margin-right:4px;white-space:nowrap}

.prev-card .itens{border-top:1px solid #f1f2f4;background:#fcfcfd;padding:4px 16px 8px}
.prev-card .item{display:flex;align-items:baseline;gap:9px;padding:6px 0;font-size:12.5px;
  border-bottom:1px dashed #eef0f3;flex-wrap:wrap}
.prev-card .item:last-child{border-bottom:none}
.prev-card .item .bola{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.prev-card .item .nome{font-weight:600;min-width:150px}
.prev-card .item .quando{font-weight:700;white-space:nowrap}
.prev-card .item .ultima{color:var(--muted);font-size:11.5px;margin-left:auto;text-align:right}

/* ═══════════════════ Resultado gerencial ═══════════════════ */

/* A DRE é lida de cima para baixo, como uma conta. A hierarquia é toda do
   recuo e do peso — linha de grade em cada nível transformaria a leitura numa
   planilha, que é justamente o que o dono não quer abrir. */
.dre td{ padding:5px 18px; border-bottom:none }
.dre tr.grupo td{ border-top:1px solid var(--border); padding-top:9px; font-weight:600 }
.dre tr.total td{ border-top:1px solid var(--border); padding-top:8px; font-weight:700; font-size:14px }
.dre tr.resultado td{ border-top:2px solid var(--text); padding:11px 18px; font-size:16px; font-weight:800 }
.dre td.filha{ padding-left:34px; color:#3d4451 }
.dre td.neta{ padding-left:50px; color:var(--muted); font-size:12px }
.dre td.pct{ width:74px; color:var(--muted); font-size:11.5px }
.dre .apagado{ color:var(--muted) }

/* ═══════════════════ Notificações (RF11) ═══════════════════ */

/* Cartão por AVISO, com o texto que vai sair escondido num <details>: quem
   aperta "enviar" precisa poder ver o que o cliente vai ler, mas a fila
   inteira aberta viraria uma parede de texto. */
.not-card{border:1px solid var(--border);border-radius:11px;padding:13px 16px;
  margin-bottom:11px;background:var(--surface)}
.not-card:last-child{margin-bottom:0}
.not-card.tratado{opacity:.62;background:#fafbfc}

.not-card .cab{display:grid;grid-template-columns:1.4fr 1fr auto;gap:14px;align-items:start}
@media(max-width:900px){.not-card .cab{grid-template-columns:1fr;gap:6px}}
.not-card .quem{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.not-card .quem b{font-size:13.5px}
.not-card .contato{font-size:12.5px;min-width:0}
.not-card .contato a{color:var(--blue);display:block;overflow:hidden;text-overflow:ellipsis}
.not-card .contato .wa{color:var(--green);font-size:11.5px}
.not-card .quando{text-align:right;font-size:12px;white-space:nowrap}
.not-card .quando small{display:block;color:var(--muted);font-size:11px}

.not-card .motivo{margin-top:8px;font-size:13px}
.not-card .texto{margin-top:7px}
.not-card .texto summary{font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.not-card .texto .corpo{margin-top:7px;padding:10px 12px;background:#fafbfc;
  border:1px solid var(--border);border-radius:8px;font-size:12.5px;white-space:pre-wrap}

.not-card .erro{margin-top:8px;background:#fdecea;border:1px solid #f5c6cb;color:#a1121f;
  border-radius:8px;padding:8px 11px;font-size:12px}
.not-card .obs{margin-top:7px;font-size:12px;color:var(--muted);font-style:italic}

.not-card .acoes{display:flex;gap:8px;align-items:center;margin-top:11px;flex-wrap:wrap}
.not-card .acoes form{margin:0}
.not-card .linha-obs{display:flex;gap:7px;align-items:center;flex:1;min-width:260px}
.not-card .linha-obs input{flex:1;min-width:120px}

/* Grade de marcadores da tela de modelos. */
.marcadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px}
.mrc{display:flex;align-items:baseline;gap:8px;font-size:12px}
.mrc code{background:#eef2ff;color:#3a45a8;border-radius:5px;padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.mrc span{color:var(--muted)}

/* Um modelo por canal, separados por um filete — a tela tem três blocos
   parecidos por tipo, e sem a separação eles se confundem. */
.modelo{border-top:1px solid #eef0f3;padding-top:14px;margin-top:14px}
.modelo:first-child{border-top:none;padding-top:0;margin-top:0}
.modelo .topo{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.modelo textarea{width:100%;border:1px solid var(--border);border-radius:9px;padding:9px 12px;
  font-family:inherit;font-size:13px;line-height:1.5;resize:vertical}
.modelo textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}

/* ═══════════════════════════════════════════════════════════════════════════
   Campo de largura inteira, grade com respiro e fotos da recepção
   ═══════════════════════════════════════════════════════════════════════════ */

/* `hidden` só funciona enquanto ninguém declara display no elemento — e aqui
   o .fg, o .check, o .alert e os cartões todos declaram. O resultado é que
   esconder um bloco pelo atributo simplesmente não fazia efeito: a caixa "OS
   que está sendo refeita" da garantia, por exemplo, aparecia sempre. É a mesma
   regra que os normalize da vida trazem, e é o único lugar do arquivo em que
   !important se justifica: `hidden` é intenção do HTML, não sugestão. */
[hidden]{display:none!important}

/* O padrão do .fg trava o controle em 420px, que é o certo para nome, placa e
   valor. Texto corrido não cabe nisso: a reclamação do cliente viraria uma
   coluna estreita de oito linhas com rolagem, e ninguém relê o que não vê
   inteiro. O modificador é opt-in para não mexer nas outras 40 telas. */
.fg.full input:not([type=checkbox]):not([type=radio]),
.fg.full select,
.fg.full textarea{max-width:none}
.fg textarea{line-height:1.45;resize:vertical}

/* As grades de campo não tinham margem embaixo: o rodapé de ajuda do último
   campo de uma linha encostava no rótulo da linha seguinte. Mesmos 14px do .fg. */
.g2,.g3,.g4{margin-bottom:14px}

/* ---- Fotos da recepção ----
   A grade se ajusta sozinha: no tablet do pátio cabem duas, no balcão, cinco. */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.foto{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.foto .img{display:block;width:100%;height:118px;object-fit:cover;background:#e5e7eb}
.foto .cap{padding:8px;border-top:1px solid #eef0f3;display:flex;flex-direction:column;gap:6px}
.foto .cap select,.foto .cap input{width:100%;border:1px solid var(--border);border-radius:7px;
  padding:5px 8px;font-family:inherit;font-size:11.5px;background:#fff;min-height:0;color:var(--text)}
.foto .cap select:focus,.foto .cap input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}
.foto .rm{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;
  background:rgba(14,14,17,.68);color:#fff;font-size:13px;font-weight:800;line-height:1;cursor:pointer;
  font-family:inherit;padding:0;display:flex;align-items:center;justify-content:center}
.foto .rm:hover{background:var(--red)}
.foto .sel{position:absolute;top:6px;left:6px;font-size:10px;font-weight:800;letter-spacing:.2px;
  border-radius:5px;padding:2px 7px;background:rgba(14,14,17,.68);color:#fff}
/* Avaria é a única foto que vira prova na entrega: tem que saltar sem legenda. */
/* box-shadow inset num <img> fica ATRÁS da imagem e não aparece; o realce
   precisa morar no cartão. */
.foto.avaria{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.foto.avaria .sel{background:var(--red)}
.foto .leg{padding:8px;border-top:1px solid #eef0f3;font-size:11.5px;color:var(--muted);line-height:1.35}
.foto .leg b{display:block;color:var(--text);font-size:12px;font-weight:600}

.foto-add{border:1px dashed #c7cdd6;border-radius:10px;background:#fff;min-height:186px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);
  font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;text-align:center;padding:12px}
.foto-add:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.foto-add svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.foto-add small{font-weight:500;font-size:11px;line-height:1.35}

/* Marca o campo que o sistema preencheu sozinho — quem está atendendo precisa
   saber que aquilo veio de outro lugar antes de sair editando. */
.veio-de{display:flex;align-items:center;gap:6px;color:var(--blue);font-size:11.5px;font-weight:600}
.veio-de svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;flex:0 0 13px}
.veio-de button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline}

/* ═══════════════ Busca rápida (componente) ═══════════════
   Um campo que procura enquanto se digita e aceita leitor de código de barras.
   Nasceu no lançamento de itens da OS, mas é genérico — ver busca-rapida.js. */
.bq{position:relative}

/* ".fg.bq" e não só ".bq": a regra geral dos campos é
   `.fg input:not([type=checkbox]):not([type=radio])`, de especificidade (0,3,1).
   Um seletor mais fraco perde e o padding do ícone é ignorado — o texto digitado
   nasce embaixo da lupa. Por isso o componente pede que o `.bq` fique no mesmo
   elemento que o `.fg`. */
.fg.bq input[data-bq-input],
.bq input[data-bq-input]{max-width:none;padding-left:38px;font-size:15px}

/* Ancorado por BAIXO: o campo é o último elemento em fluxo do bloco (a lista de
   sugestões é absoluta e não ocupa espaço), então a distância até a base é
   estável — centrar por 50% desalinharia conforme o rótulo quebrasse de linha. */
.bq-lupa{position:absolute;left:12px;bottom:11px;
  width:17px;height:17px;color:#9aa1ab;pointer-events:none}

.bq-sug{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.13);max-height:330px;overflow:auto}
.bq-sug:empty{display:none}
.bq-li{display:flex;align-items:center;gap:11px;padding:9px 13px;
  border-bottom:1px solid #f2f4f6;cursor:pointer}
.bq-li:last-of-type{border-bottom:none}
.bq-li.on{background:var(--red-soft)}
.bq-txt{flex:1;min-width:0}
.bq-nome{font-size:13.5px;font-weight:600;line-height:1.3}
.bq-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.bq-alerta{color:var(--red)}
/* O saldo entre parenteses e contexto, nao a informacao principal: o numero
   que decide e o disponivel, e os dois com o mesmo peso competiriam. */
.bq-fraco{color:#9aa1ab;font-weight:400}
.bq-pr{text-align:right;font-size:13.5px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bq-pr small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.bq-vazio{padding:15px 13px;font-size:12.5px;color:var(--muted)}
.bq-nota{font-size:11.5px}
.bq-dica{padding:8px 13px;background:#fafbfc;border-top:1px solid #f2f4f6;
  font-size:11px;color:var(--muted);position:sticky;bottom:0}
.bq-sug kbd{background:var(--surface);border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;padding:1px 5px;font-size:10.5px;font-family:inherit;font-weight:700}

/* O sinal do leitor apaga quando o campo perde o foco — que é justamente
   quando bipar deixaria de cair na busca. */
.bq-leitor{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:600;color:var(--green)}
.bq-leitor .pt{width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:bq-pulso 1.6s infinite}
.bq-leitor.off{color:var(--muted)}
.bq-leitor.off .pt{background:#c9ced6;animation:none}
@keyframes bq-pulso{0%,100%{opacity:1}50%{opacity:.35}}

/* ═══════════════ Linha de lançamento de item da OS ═══════════════ */
.lanc{display:flex;gap:10px;align-items:flex-start}
.lanc .fg{margin-bottom:0}
.lanc .fg.qtd{width:92px;flex:0 0 92px}
.lanc .fg.qtd input{max-width:none;text-align:right}
.lanc .fg.busca{flex:1}
.lanc .fg.acao{flex:0 0 auto}
.lanc .fg.acao .btn{min-height:40px}
.lanc-lbl{display:flex;justify-content:space-between;align-items:center;gap:10px}
@media(max-width:640px){
  .lanc{flex-wrap:wrap}
  .lanc .fg.busca{flex:1 1 100%;order:-1}
}

.lanc-mais{margin-top:12px}
.lanc-mais>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.lanc-mais>summary::-webkit-details-marker{display:none}
.lanc-mais>summary::before{content:"▸";font-size:11px}
.lanc-mais[open]>summary::before{content:"▾"}
.lanc-mais .corpo{margin-top:12px;padding-top:14px;border-top:1px dashed var(--border)}

/* Item recém-incluído pisca uma vez: sem a recarga da página, é o único aviso
   de que a linha nova é aquela. */
@keyframes os-entrou{from{background:#e7f6ec}to{background:transparent}}
tr.os-novo td{animation:os-entrou 1.8s ease-out}

/* ══════════════════════════════════════════════════════════════════════
   ATALHOS DE LANÇAMENTO NA OS — kits e mais usados
   Ficam colados na linha de lançamento porque são a mesma decisão vista de
   outro ângulo: em vez de digitar o nome, apontar o que já se sabe.
   ══════════════════════════════════════════════════════════════════════ */
.atalhos{margin-top:14px;padding-top:13px;border-top:1px dashed var(--border);
  display:flex;flex-direction:column;gap:10px}
.atalhos .fila{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:start}
.atalhos .rot{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);padding-top:7px}
.atalhos .pil{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.atalhos .fila{grid-template-columns:1fr}.atalhos .rot{padding-top:0}}

.at{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--text);
  cursor:pointer;font-family:inherit;line-height:1.5}
.at:hover{border-color:#c9ced6;background:#fafbfc}
.at .v{color:var(--muted);font-weight:600;font-size:11.5px}
.at.kit{background:var(--red-soft);border-color:#f6c9cc;color:var(--red-600)}
.at.kit:hover{background:#fbd9db;border-color:#efb3b8}
.at.kit .v{color:#b4636a}
.at.mais{border-style:dashed;color:var(--muted)}
.at[disabled]{opacity:.45;cursor:default}
.at.zero{color:#9aa1ab}

/* ── prévia do kit ── */
.modal.wide{max-width:660px}
.kp-head{padding:20px 22px 14px;border-bottom:1px solid #eef0f3}
.kp-head h3{margin:0 0 4px;font-size:16px}
.kp-head .sub{font-size:12.5px;color:var(--muted)}
.kp-lista{max-height:min(48vh,400px);overflow:auto}
.kp-lista table{width:100%;border-collapse:collapse}
.kp-lista th{position:sticky;top:0;background:#fafbfc;z-index:1;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:8px 22px;border-bottom:1px solid #eef0f3;white-space:nowrap}
.kp-lista th.num,.kp-lista td.num{text-align:right}
.kp-lista td{padding:9px 22px;border-bottom:1px solid #f4f5f7;font-size:13px;vertical-align:top}
.kp-lista tr:last-child td{border-bottom:0}
.kp-lista .desc{font-weight:600}
.kp-lista .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px}
.kp-lista tr.opc td{background:#fffdf7}
.kp-lista tr.fora td{background:#fdf3f3;color:#8a5b60}
.kp-lista tr.fora .desc{text-decoration:line-through;text-decoration-color:#d9a6ab}
.kp-lista .avi{color:#a1121f;font-weight:600}
/* A tarja do que NÃO entra fica fora da lista rolável de propósito: o item
   excluído costuma ser o último, e escondê-lo atrás da rolagem é o mesmo que
   não avisar. */
.kp-fora{display:flex;gap:9px;padding:11px 22px;background:#fdf3f3;border-top:1px solid #f3d9dc;
  font-size:12.5px;color:#8a3038;line-height:1.5}
.kp-fora b{color:#a1121f}
.kp-opc{display:flex;align-items:center;gap:9px;padding:12px 22px;background:#fffdf7;
  border-top:1px solid #f2e6c9;font-size:13px;cursor:pointer}
.kp-opc input{width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.kp-tot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 22px;border-top:1px solid #eef0f3;background:#fafbfc}
.kp-tot .l{font-size:12.5px;color:var(--muted)}
.kp-tot .v{font-size:19px;font-weight:800;white-space:nowrap}
.kp-tot .v small{font-size:12px;font-weight:600;color:var(--muted);display:block;text-align:right}
.kp-nota{padding:11px 22px;font-size:12px;color:#6b7280;border-top:1px solid #eef0f3;line-height:1.5}

/* ── montagem do kit ── */
.kit-linhas .cab{display:grid;grid-template-columns:26px 1fr 96px 92px 34px;gap:10px;
  padding:0 0 7px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid #eef0f3}
.kit-linhas .cab .q{text-align:right}
.kit-linhas .lin{display:grid;grid-template-columns:26px 1fr 96px 92px 34px;gap:10px;
  align-items:start;padding:10px 0;border-bottom:1px dashed var(--border)}
.kit-linhas .lin:last-child{border-bottom:0}
.kit-linhas .lin>*{min-width:0}
.kit-linhas .lin input[type=text]{width:100%;max-width:none;text-align:right;padding:7px 10px;font-size:13px}
.kit-linhas .ord{padding-top:9px;font-size:12px;color:#9aa1ab;text-align:right;font-weight:700}
.kit-linhas .alvo b{display:block;font-size:13.5px}
.kit-linhas .alvo .sub{font-size:11.5px;color:var(--muted)}
.kit-linhas .lixo{background:none;border:0;color:#c9ced6;cursor:pointer;font-size:17px;padding-top:6px}
.kit-linhas .lixo:hover{color:var(--red)}
.kit-linhas .opc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding-top:10px}
.kit-linhas .opc input{width:15px;height:15px;accent-color:var(--red);cursor:pointer}
.kit-linhas .vazio{padding:22px 0;text-align:center;color:#9aa1ab;font-size:13px}
/* O orçamento padrão usa a mesma grade, menos a coluna de "opcional": ali não
   existe item opcional — quem decide o que fica de fora é o cliente, item a
   item, na aprovação da OS. */
.kit-linhas .lin.sem-opc,.kit-linhas .cab.sem-opc{grid-template-columns:26px 1fr 96px 34px}
@media(max-width:760px){.kit-linhas .cab{display:none}
  .kit-linhas .lin{grid-template-columns:1fr 34px}
  .kit-linhas .ord,.kit-linhas .opc{grid-column:1/-1;padding-top:0}}
/* Aberto, ocupa a linha inteira e empurra o conteúdo — em vez de flutuar. Um
   painel absoluto ancorado no chip saía da tela sempre que o chip caísse perto
   da borda, e não há CSS que adivinhe de que lado sobra espaço. */
.at-mais>summary{list-style:none;cursor:pointer}
.at-mais>summary::-webkit-details-marker{display:none}
.at-mais[open]{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.at-drop{width:100%;max-width:520px;max-height:280px;overflow:auto;background:#fff;
  border:1px solid var(--border);border-radius:11px;padding:5px}
.at-drop a{display:block;padding:8px 11px;border-radius:8px;font-size:13px}
.at-drop a:hover{background:var(--red-soft);color:var(--red-600)}
.at-drop a span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.at-drop a:hover span{color:#b4636a}

/* ══════════════════════════════════════════════════════════════════════
   A MESMA PEÇA, VÁRIOS FABRICANTES

   O selo diz de onde a peça vem. O número da classe é o valor do enum
   ClassificacaoPeca (1 genuína · 2 original · 3 remanufaturada · 4 paralela),
   e é ele que o JavaScript concatena — assim a cor não depende de traduzir
   texto no navegador.
   ══════════════════════════════════════════════════════════════════════ */
.cls{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap}
.cls-1{background:#f3e8ff;color:#6d28d9}   /* genuína */
.cls-2{background:var(--blue-soft);color:#1d4ed8}   /* original */
.cls-3{background:#fff4e5;color:#b4630c}   /* remanufaturada */
.cls-4{background:#eef0f3;color:#5b6472}   /* paralela */

.bq-gar{color:#5b6472}

/* ── a referência na busca ──
   Roxo, como o selo da genuína, porque as duas falam da montadora: a
   referência É o código dela. Selo próprio e não "peça": clicar aqui não
   lança nada, abre a escolha da marca. */
.bq-tipo-ref{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:5px;
  white-space:nowrap;background:#f3e8ff;color:#6d28d9}
.bq-pr.faixa{font-variant-numeric:tabular-nums}
.bq-pr.faixa small{color:var(--red-600);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   Escolha da marca — o segundo passo da busca

   Modal e não uma lista embutida: a decisão entre genuína e paralela merece a
   tela inteira por um instante. Embutida no dropdown, ela dividiria espaço com
   o resultado da busca justamente quando não se está mais buscando.
   ══════════════════════════════════════════════════════════════════════════ */
.bqm-fundo{position:fixed;inset:0;z-index:80;background:rgba(13,20,36,.34);
  display:flex;align-items:flex-start;justify-content:center;padding:7vh 20px 20px;
  overflow:auto}
.bqm{background:var(--surface);border-radius:14px;width:100%;max-width:720px;
  box-shadow:0 20px 48px rgba(13,20,36,.28);overflow:hidden}
.bqm-topo{padding:15px 18px;border-bottom:1px solid #eef0f3}
.bqm-topo h3{margin:0;font-size:15px}
.bqm-topo p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.bqm-corpo{max-height:52vh;overflow:auto}

.bqm-mk{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid #f2f4f7;cursor:pointer}
.bqm-mk:last-child{border-bottom:0}
.bqm-mk:hover{background:#fafbfc}
.bqm-mk.on{background:var(--red-soft);box-shadow:inset 3px 0 0 var(--red)}
/* Sem saldo fica APAGADA, não escondida nem bloqueada: às vezes se compra para
   a OS. O que não pode é a falta ser descoberta depois. */
.bqm-mk.off{opacity:.62}
.bqm-mk .rad{width:16px;height:16px;border:2px solid #c9ced6;border-radius:50%;flex:0 0 auto}
.bqm-mk.on .rad{border-color:var(--red);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px var(--red)}
.bqm-mk .info{flex:1;min-width:0}
.bqm-mk .info b{font-size:13.5px}
.bqm-mk .info .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.bqm-mk .dir{text-align:right;white-space:nowrap}
.bqm-mk .dir .pr{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.bqm-mk .dir .pr .zero{font-size:12px;color:var(--red-600)}
.bqm-mk .dir .sd{display:block;font-size:11px;color:var(--muted)}
.bqm-mk .dir .sd.zero{color:var(--red-600);font-weight:700}

.bqm-vazio{padding:18px;font-size:12.5px;color:var(--muted)}
.bqm-vazio.erro{color:var(--red-600)}
.bqm-pe{padding:13px 18px;background:#fafbfc;border-top:1px solid #eef0f3;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bqm-regra{font-size:12px;color:#6b7280;max-width:400px}
.bqm-bt{display:flex;gap:9px;margin-left:auto}
@media(max-width:640px){
  .bqm-fundo{padding:0}
  .bqm{max-width:none;border-radius:0;min-height:100%}
  .bqm-corpo{max-height:none}
  .bqm-regra{display:none}
  .bqm-bt{width:100%}
  .bqm-bt .btn{flex:1}
}

/* ══════════════════════════════════════════════════════════════════════════
   O cadastro encolhido da referência

   "so-caixa" é tudo o que pertence à CAIXA e não à referência: preço, fiscal,
   estoque, unidade, localização, EAN, fornecedor. "so-referencia" é o inverso —
   a aba das marcas, que só a referência tem.

   Somem em vez de ficarem cinza de propósito: campo apagado ensina o que aquele
   cadastro é; campo desabilitado só frustra quem tenta preenchê-lo.

   Isto é a tela. O servidor limpa os mesmos campos ao gravar — campo escondido
   continua indo no POST, e o navegador não decide o que o banco guarda.
   ══════════════════════════════════════════════════════════════════════════ */
.agrupa .so-caixa{display:none !important}
.so-referencia{display:none}
.agrupa .so-referencia{display:block}
.sub-nav.agrupa .so-referencia{display:inline-block}
.p-head .so-referencia{display:none}
.agrupa .p-head .so-referencia{display:inline}
/* margem de cima só quando há algo acima: com os campos de estoque escondidos,
   o campo restante encostaria no título com um vão sem motivo. */
.so-mt{margin-top:14px}
.agrupa .so-mt{margin-top:0}
/* O !important é raro aqui e é de propósito: vários destes elementos trazem um
   "display" no atributo style, e inline vence folha de estilo. Sem ele, um
   campo do estoque continuaria na tela de uma peça que não tem estoque — e a
   regra pareceria funcionar, porque só falha nos poucos que têm o inline. */

/* ══════════════════════════════════════════════════════════════════════════
   A árvore da lista de produtos

   A referência é a linha de cima e as marcas descem embaixo dela. O "L" é um
   elemento de verdade, do tamanho exato da caixinha de recolher — assim a
   marca nasce alinhada com o nome da referência, e não meio grau à esquerda.
   ══════════════════════════════════════════════════════════════════════════ */
.arv-mae>td{background:#fbfcfd;border-top:1px solid #e6e9ee}
.arv-nm{display:flex;align-items:center;gap:9px}
.arv-nm .txt{min-width:0}
.arv-cx{width:19px;height:19px;border:1px solid var(--border);border-radius:5px;background:#fff;
  font-size:12px;line-height:17px;text-align:center;color:#6b7280;cursor:pointer;flex:0 0 auto;
  padding:0;font-weight:700}
.arv-cx:hover{border-color:var(--red);color:var(--red)}
.arv-filho>td{background:#fff}
.arv-filho .tr{flex:0 0 19px;width:19px;height:11px;margin:-11px 0 0;
  border-left:1px solid #d8dde4;border-bottom:1px solid #d8dde4;border-radius:0 0 0 5px}
.arv-filho .marca{font-weight:700}
.arv-vazio{color:var(--muted)}
.arv-faixa{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Referência sem nenhuma marca não pode ser vendida — e descobrir isso no
   balcão, com o cliente esperando, é o pior momento. */
.arv-aviso>td{background:#fff8f8;color:var(--red-600);font-size:12.5px;
  border-bottom:1px solid #f4dcdf}

/* ── painel das outras marcas, depois do lançamento ── */
.alt{margin-top:12px;border:1px solid #d9e2f5;border-radius:11px;background:#f7f9ff;overflow:hidden}
.alt-cab{display:flex;align-items:baseline;gap:9px;padding:10px 14px;
  border-bottom:1px solid #e4ebf8;font-size:12.5px;flex-wrap:wrap}
.alt-cab b{font-size:13px}
.alt-cab .oem{font-family:ui-monospace,Menlo,monospace;color:var(--muted);font-size:11.5px}
.alt-cab .x{margin-left:auto;background:none;border:0;color:#9aa1ab;font-size:16px;cursor:pointer;
  line-height:1;padding:0 2px}
.alt-cab .x:hover{color:var(--red)}
.alt table{width:100%;border-collapse:collapse;background:#fff}
.alt th{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:7px 14px;border-bottom:1px solid #eef0f3;white-space:nowrap}
.alt th.num,.alt td.num{text-align:right}
.alt td{padding:9px 14px;border-bottom:1px solid #f4f5f7;font-size:13px}
.alt tr:last-child td{border-bottom:0}
.alt tr.atual td{background:#fffdf7}
.alt tr.sem td{color:#9aa1ab}
.alt .marca{font-weight:700}
.alt .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px}
.alt .pormes{font-size:11px;color:var(--muted);display:block}
.alt-pe{padding:9px 14px;font-size:11.5px;color:#5b6472;background:#f7f9ff;
  border-top:1px solid #e4ebf8;line-height:1.5}

/* ── ficha da peça-mãe ── */
.oem-chip{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:#f3f4f6;
  border:1px solid var(--border);border-radius:7px;padding:3px 9px;display:inline-block}
.filhos .cab,.filhos .lin{display:grid;grid-template-columns:minmax(0,1fr) 120px 170px 120px 152px;gap:12px}
.filhos .cab{padding-bottom:7px;border-bottom:1px solid #eef0f3;font-size:10.5px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.filhos .lin{align-items:center;padding:11px 0;border-bottom:1px solid #f4f5f7}
.filhos .lin:last-child{border-bottom:0}
.filhos .num{text-align:right}
.filhos .marca b{display:block;font-size:13.5px}
.filhos .marca .sub,.filhos .fin-sub{font-size:11.5px;color:var(--muted)}
.filhos .lin>.num:last-child{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:900px){.filhos .cab{display:none}
  .filhos .lin{grid-template-columns:minmax(0,1fr) 110px;row-gap:6px}
  .filhos .lin>.num:last-child{grid-column:1/-1;justify-content:flex-start}}

/* ── agrupar o que já está duplicado ── */
.dup .cab,.dup .lin{display:grid;grid-template-columns:26px 1fr 150px 110px 100px;gap:12px}
.dup .cab{padding-bottom:7px;border-bottom:1px solid #eef0f3;font-size:10.5px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.dup .lin{align-items:center;padding:10px 0;border-bottom:1px dashed var(--border)}
.dup .lin:last-child{border-bottom:0}
.dup .num{text-align:right}
.dup input[type=checkbox]{width:16px;height:16px;accent-color:var(--red)}
@media(max-width:820px){.dup .cab{display:none}.dup .lin{grid-template-columns:26px 1fr}}

/* ══════════════════════════════════════════════════════════════════════
   AUSÊNCIA DE TÉCNICO NO QUADRO DE PROGRAMAÇÃO

   A coluna do ausente continua no quadro. Sumir com ela faria o gestor
   procurar o técnico; deixá-la igual às outras faria ele soltar um cartão
   ali sem perceber. A hachura diz "aqui não" antes de qualquer tentativa.
   ══════════════════════════════════════════════════════════════════════ */
.prog-col.off{border-color:#f3d9dc}
.prog-col.off .prog-head{background:#fdf3f3;border-bottom-color:#f3d9dc}
.prog-col.off .prog-head .cap.off{color:#a1121f;font-weight:800;text-transform:uppercase;
  letter-spacing:.3px;font-size:10px}
.prog-col.off .prog-head .folga{color:#8a3038}
.prog-off{background-image:repeating-linear-gradient(45deg,#fdf3f3,#fdf3f3 7px,#f8e3e5 7px,#f8e3e5 14px);
  border:1px dashed #e8b4b9;border-radius:7px;padding:16px 6px;text-align:center;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;color:#a1121f;line-height:1.5}
.prog-off small{display:block;font-weight:600;letter-spacing:0;color:#8a3038;margin-top:3px;font-size:10px}
.prog-meio{background-image:repeating-linear-gradient(45deg,#fff8ec,#fff8ec 7px,#fbeed4 7px,#fbeed4 14px);
  border:1px dashed #f0d5a0;border-radius:7px;padding:8px 6px;text-align:center;
  font-size:10px;font-weight:800;letter-spacing:.4px;color:#8a5a12;line-height:1.4}
.prog-meio small{display:block;font-weight:600;letter-spacing:0;margin-top:2px}

/* ── painel de capacidade da semana ── */
.sem{display:grid;grid-template-columns:150px repeat(6,1fr);gap:6px;align-items:stretch}
.sem .hd{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);text-align:center;padding-bottom:4px}
.sem .nm{font-size:13px;font-weight:600;display:flex;align-items:center;min-width:0}
.sem .cel{border:1px solid var(--border);border-radius:8px;padding:7px 4px;text-align:center;
  font-size:12px;font-weight:700;background:#fff}
.sem .cel small{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:1px}
.sem .cel.off{background:#f3f4f6;color:#9aa1ab}
.sem .cel.aus{background:#fde8e9;border-color:#f3d9dc;color:#a1121f}
.sem .cel.meio{background:#fff8ec;border-color:#f5d6a8;color:#8a5a12}
.sem .cel.cheio{border-color:#f0b8bd}
@media(max-width:820px){.sem{grid-template-columns:110px repeat(6,1fr);font-size:11px}}

/* ── especialidades ──
   A lista de marcação no cadastro do técnico. Cartão em vez de linha de
   checkbox porque cada item carrega duas informações além do nome (se está
   inativa e quantos serviços a exigem), e a segunda é o que faz alguém decidir
   marcar. */
.esp-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:4px}
.esp-item{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--border);
  border-radius:9px;padding:10px 11px;cursor:pointer;background:#fff;font-weight:400;
  transition:border-color .12s,background .12s}
.esp-item:hover{border-color:#c9ced6}
.esp-item.on{border-color:#c7b3ea;background:#faf7ff}
.esp-item input{margin:2px 0 0}
.esp-item b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.esp-item small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.esp-item .badge{margin-top:3px}

/* Etiqueta da especialidade exigida, no cartão de sugestão do agendamento. */
.tag.esp{background:#f3e8ff;color:#6d28d9}

/* ── orçamentos padrão nos atalhos da OS ──
   Caixa de marcar em forma de chip. O consultor escolhe vários de uma vez e só
   então pede a prévia — é o consolidado que evita a peça que dois modelos
   pedem entrar duas vezes. */
.orc-pil{align-items:center}
label.at.orc{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}
label.at.orc input{width:15px;height:15px;accent-color:var(--red);cursor:pointer;flex:0 0 auto}
label.at.orc b{font-size:12.5px;font-weight:700;display:block;line-height:1.25}
label.at.orc.on{border-color:#c7b3ea;background:#faf7ff}
/* Já usado nesta OS: aplicar de novo repete os itens, e quem descobre é o
   cliente, no papel. Marcado, não escondido — reaplicar às vezes é o certo. */
label.at.orc.usado{border-style:dashed;opacity:.72}
.orc-lin{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;cursor:pointer}
.orc-lin:hover{background:var(--red-soft)}
.orc-lin input{width:15px;height:15px;accent-color:var(--red);cursor:pointer}
.orc-lin b{display:block;font-size:13px}
.orc-lin span span{display:block;font-size:11.5px;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════════
   RECEPÇÃO DO VEÍCULO: checklist, avarias e assinatura
   ══════════════════════════════════════════════════════════════════════ */
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:1180px){.rec-grid{grid-template-columns:1fr}}

/* Barra de progresso do checklist: some quando chega a 100%, porque aí ela
   não informa mais nada — o que informa é o botão de aprovar liberado. */
.rec-barra{height:4px;background:#eef0f3;overflow:hidden}
.rec-barra span{display:block;height:100%;background:var(--green);transition:width .25s}

.rec-grupo{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px;padding-bottom:5px;border-bottom:1px solid #eef0f3}
.rec-grupo:first-child{margin-top:0}

.rec-lin{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);gap:10px;
  align-items:center;padding:9px 0;border-bottom:1px dashed var(--border)}
.rec-lin:last-child{border-bottom:0}
/* Pendente fica marcado na LINHA, e não só no campo: numa lista de trinta, um
   contorno vermelho num input perdido no meio não é encontrado. */
.rec-lin.pend{background:#fffaf5;box-shadow:inset 3px 0 0 #e0952a}
.rec-lin .nome{font-size:13px;font-weight:600;padding-left:8px}
.rec-lin .nome small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}
.rec-lin .obs{width:100%;max-width:none;padding:6px 9px;font-size:12.5px}
.rec-lin .obs.falta{border-color:#e0952a;background:#fffaf5}

.rec-lin .ops{display:flex;gap:4px;flex-wrap:wrap}
.rec-lin .op{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;
  padding:5px 9px;border:1px solid var(--border);border-radius:20px;cursor:pointer;
  background:#fff;color:var(--muted);white-space:nowrap;transition:.12s}
.rec-lin .op input{position:absolute;opacity:0;width:0;height:0}
.rec-lin .op:hover{border-color:#c9ced6}
.rec-lin .op.s1.on{background:#e7f6ec;border-color:#a9dcbb;color:var(--green)}
.rec-lin .op.s2.on{background:#fdeceb;border-color:#f3c0bc;color:#a1121f}
.rec-lin .op.s3.on{background:#eef0f3;border-color:#d3d8e0;color:#5b6472}
.rec-lin .op.s4.on{background:#fff4e5;border-color:#f0d5a0;color:#8a5a12}
@media(max-width:760px){.rec-lin{grid-template-columns:1fr}}

/* ── avarias ── */
.av-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px}
.av-abas{display:flex;gap:5px;flex-wrap:wrap}
.av-abas .aba{font-size:11.5px;font-weight:700;padding:6px 11px;border:1px solid var(--border);
  border-radius:20px;background:#fff;color:var(--muted);cursor:pointer}
.av-abas .aba.on{background:var(--red-soft);border-color:#f0b8bd;color:var(--red-600)}

/* O palco é o REFERENCIAL das frações: o pino é posicionado em % dele. Por
   isso ele precisa envolver o SVG exatamente, sem padding — qualquer folga
   deslocaria toda marca já gravada. */
.av-canvas{position:relative;border:1px solid var(--border);border-radius:11px;
  background:#fbfcfd;padding:0;overflow:hidden}
.av-canvas [data-palco]{position:relative;display:block;line-height:0;cursor:crosshair;
  transform-origin:center}

.av-pino{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2.5px solid #fff;
  /* anel branco + fio escuro por fora: o pino salta sobre lataria clara OU
     escura, que é o que faltava ao trocar o desenho pela foto pintada. */
  box-shadow:0 0 0 1.6px rgba(13,20,36,.6), 0 1px 5px rgba(13,20,36,.5);
  cursor:grab;padding:0;font-size:11px;font-weight:900;color:#fff;line-height:1;
  touch-action:none;z-index:2}
.av-pino:hover{transform:scale(1.15)}
.av-pino.movendo{cursor:grabbing;transform:scale(1.3);z-index:3}
.av-pino.t1{background:#c0343f}   /* risco     */
.av-pino.t2{background:#7c3aed}   /* amassado  */
.av-pino.t3{background:#0369a1}   /* trinca    */
.av-pino.t4{background:#b45309}   /* ferrugem  */
.av-pino.t5{background:#15151a}   /* faltando  */
.av-pino.t9{background:#4b5563}   /* outro     */

.av-lista{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.av-vazio{padding:14px 2px;font-size:12.5px;color:#9aa1ab}
.av-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer}
.av-item:hover{background:#f6f7f9}
.av-item.aqui{background:var(--red-soft)}
.av-item .bola{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.av-item .bola.t1{background:#c0343f}.av-item .bola.t2{background:#7c3aed}
.av-item .bola.t3{background:#0369a1}.av-item .bola.t4{background:#b45309}
.av-item .bola.t5{background:#15151a}.av-item .bola.t9{background:#4b5563}
.av-item .txt{flex:1;min-width:0}
.av-item .txt b{display:block;font-size:12.5px}
.av-item .txt small{display:block;font-size:11px;color:var(--muted)}
.av-item .obs,.av-item .lixo{background:none;border:0;color:#c9ced6;cursor:pointer;
  font-size:15px;padding:2px 5px}
.av-item .obs:hover{color:var(--red-600)}
.av-item .lixo:hover{color:var(--red)}

/* ── assinatura ── */
.ass-quadro{position:relative;border:1px dashed var(--border);border-radius:11px;
  background:#fbfcfd;height:190px;margin-top:14px;overflow:hidden}
.ass-quadro canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.ass-quadro .dica{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:#c1c7d0;pointer-events:none}
/* A linha de assinatura fica embaixo e não some: ela diz onde assinar mesmo
   depois de o traço começar. */
.ass-quadro .linha{position:absolute;left:8%;right:8%;bottom:34px;border-bottom:1px solid #d8dde4;
  pointer-events:none}
[data-assinatura].assinado .ass-quadro{border-style:solid;border-color:#a9dcbb;background:#fff}

.ass-feita{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid #eef0f3}
.ass-feita .quem b{font-size:14.5px}
.ass-img{max-height:96px;max-width:320px;background:#fff;border:1px solid var(--border);
  border-radius:9px;padding:5px}

/* ── hora do agendamento ──
   No cartão da programação ela fica ao lado da placa e antes do TPR: de manhã,
   a pergunta do técnico é "qual eu pego primeiro?", e a resposta é a ordem de
   chegada — não a ordem em que o balanceamento empilhou os cartões. */
.prog-card .topo .hora{font-size:11px;font-weight:800;color:#0369a1;background:#e0f2fe;
  border-radius:5px;padding:1px 6px;white-space:nowrap}

/* A sugestão de horário no agendamento. Aparece só quando tem o que sugerir —
   um bloco permanente repetindo a hora já preenchida vira ruído. */
.sug-hora{margin-top:7px;padding:9px 11px;border:1px solid #cfe0f5;border-radius:9px;
  background:#f4f9ff}
.sug-hora.outro{border-color:#f0d5a0;background:#fffaf0}
.sug-hora .sug-btn{font-size:12px;font-weight:700;padding:5px 11px;border-radius:7px;
  border:1px solid #9dc4ea;background:#fff;color:#0b5c9c;cursor:pointer}
.sug-hora.outro .sug-btn{border-color:#e6c489;color:#8a5a12}
.sug-hora .sug-btn:hover{background:#eaf3fd}
.sug-hora small{display:block;margin-top:6px;font-size:11.5px;color:#5b6472;line-height:1.45}

/* Chip do orçamento padrão escolhido no agendamento. Roxo, e não vermelho como
   o chip de serviço: são coisas diferentes na mesma tela — um é o que será
   feito, o outro é o modelo que sugeriu. */
.ag-chip.orc{background:#f3e8ff;border-color:#d9c2f5;color:#5b21b6}
.ag-chip.orc .x{color:#7c3aed}


/* ── serviços do agendamento em leitura, na abertura da OS ──
   Dentro do aviso azul de "herdado". Sem bullets do navegador: cada linha
   ganha um tracinho próprio, alinhado, que aguenta descrição de duas linhas. */
.ag-servicos-leitura{list-style:none;margin:9px 0 0;padding:8px 0 0;
  border-top:1px solid rgba(29,78,216,.18)}
.ag-servicos-leitura li{position:relative;padding:2px 0 2px 16px;font-size:12.5px;font-weight:600}
.ag-servicos-leitura li::before{content:"–";position:absolute;left:2px;color:#1d4ed8;opacity:.55}


/* ── conferência de saída (entrada × saída) ── */
.saida-tbl .grp-row td{background:#fafbfc;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);padding:7px 18px}
.saida-tbl tr.piorou td{background:#fff8f8}
.chk-ent{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:5px;
  background:#eef0f3;color:#5b6472}
.chk-ent.s1{background:#e8f6ee;color:#15803d}
.chk-ent.s2{background:#fde8e9;color:#a1121f}
.chk-ent.s3{background:#eef0f3;color:#5b6472}
.chk-ent.s4{background:#fff4e5;color:#b4630c}
.chk-ent.s0{background:#fff;border:1px dashed #c9ced6;color:#9aa1ab}
.chk-saida{display:flex;gap:4px;flex-wrap:wrap}
.chk-saida input{position:absolute;opacity:0;pointer-events:none}
.chk-saida label{font-size:11px;font-weight:700;padding:5px 8px;border:1px solid var(--border);
  border-radius:7px;cursor:pointer;background:#fff;white-space:nowrap}
.chk-saida input:checked+label.s1{background:#e8f6ee;border-color:#15803d;color:#15803d}
.chk-saida input:checked+label.s2{background:#fde8e9;border-color:#a1121f;color:#a1121f}
.chk-saida input:checked+label.s3{background:#eef0f3;border-color:#5b6472;color:#3d4451}
.chk-saida input:checked+label.s4{background:#fff4e5;border-color:#b4630c;color:#b4630c}

/* ── painel de links públicos no detalhe da OS ── */
.lk-linha{display:flex;align-items:center;gap:8px;margin-top:8px}
.lk-linha input{flex:1;max-width:none;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  padding:8px 10px;background:#fafbfc}
.lk-tit{font-size:12.5px;font-weight:700;margin-top:12px}
.lk-tit:first-child{margin-top:0}
.lk-sub{font-size:11.5px;color:var(--muted)}

/* ── fila de contato da preventiva ── */
.prev-espera{opacity:.6}
.prev-espera td:first-child{border-left:3px solid #c9ced6}
.ctt-modal{position:fixed;inset:0;z-index:80;background:rgba(13,20,36,.34);
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 20px 20px}
.ctt-modal[hidden]{display:none}
.ctt-caixa{background:var(--surface);border-radius:14px;width:100%;max-width:440px;
  box-shadow:0 20px 48px rgba(13,20,36,.28);overflow:hidden}
.ctt-caixa .topo{padding:14px 18px;border-bottom:1px solid #eef0f3}
.ctt-caixa .topo h3{margin:0;font-size:15px}
.ctt-caixa .topo p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.ctt-caixa .corpo{padding:16px 18px}
.ctt-caixa .pe{padding:12px 18px;background:#fafbfc;border-top:1px solid #eef0f3;
  display:flex;justify-content:flex-end;gap:9px}

/* ── busca geral (paleta Ctrl+K) ──
   Véu por cima de qualquer tela; a caixa central segue o mockup aprovado.
   Chips de tipo com as mesmas cores da paleta do sistema. */
.bg-veu{position:fixed;inset:0;z-index:90;background:rgba(13,20,36,.45);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  display:flex;justify-content:center;align-items:flex-start;padding:60px 16px 16px}
.bg-veu[hidden]{display:none}
.bg-caixa{width:100%;max-width:600px;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(13,20,36,.35);display:flex;flex-direction:column;max-height:70vh}
.bg-campo{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid #eef0f3;flex:0 0 auto}
.bg-campo svg{width:18px;height:18px;stroke:#9aa1ab;fill:none;stroke-width:2;flex:0 0 auto}
.bg-campo input{border:0;outline:0;font:inherit;font-size:15px;flex:1;min-width:0;background:none}
.bg-campo kbd{color:#9aa1ab}
.bg-corpo{overflow-y:auto;flex:1;padding-bottom:6px}
.bg-grupo{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:#9aa1ab;padding:9px 16px 3px}
.bg-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13.5px;cursor:pointer}
.bg-item:hover{background:#fafbfc}
.bg-item.on{background:#fdf2f3;box-shadow:inset 3px 0 0 #a1121f}
.bg-tipo{font-size:10px;font-weight:800;text-transform:uppercase;padding:2px 7px;
  border-radius:5px;flex:0 0 68px;text-align:center}
.t-menu{background:#eef0f3;color:#5b6472}
.t-cli{background:#e0f2fe;color:#0369a1}
.t-vei{background:#e8f6ee;color:#15803d}
.t-os{background:#fdf2f3;color:#a1121f}
.t-prod{background:#f3e8ff;color:#6d28d9}
.t-forn{background:#fff4e5;color:#b4630c}
.bg-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-txt b{font-weight:700}
.bg-sub{color:#6b7280;font-size:12px}
.bg-inativo{margin-left:7px;font-size:10px;font-weight:800;text-transform:uppercase;
  color:#b4630c;background:#fff4e5;border-radius:5px;padding:1px 6px}
.bg-item mark{background:#fdf2b8;color:inherit;border-radius:2px;padding:0 1px}
.bg-vai{margin-left:auto;color:#9aa1ab;font-size:11.5px;flex:0 0 auto}
.bg-vazio{padding:22px 16px;font-size:13px;color:#6b7280;text-align:center}
.bg-pe{background:#fafbfc;border-top:1px solid #eef0f3;padding:8px 16px;font-size:11px;
  color:#6b7280;display:flex;gap:14px;flex:0 0 auto}
.bg-caixa kbd,.bg-abrir kbd{background:#fff;border:1px solid #d8dde4;border-bottom-width:2px;
  border-radius:4px;padding:0 5px;font-size:10.5px;font-weight:700;font-family:inherit}

/* o botão da barra superior que abre a paleta */
.bg-abrir{display:flex;align-items:center;gap:8px;border:1px solid var(--border);
  background:#f7f8fa;border-radius:9px;padding:6px 10px;font:inherit;font-size:12.5px;
  color:#6b7280;cursor:pointer}
.bg-abrir:hover{background:#eef0f3}
.bg-abrir svg{width:14px;height:14px;stroke:#9aa1ab;fill:none;stroke-width:2}
.bg-abrir kbd{color:#9aa1ab}
@media (max-width:700px){.bg-abrir span,.bg-abrir kbd{display:none}}

/* ── organização do menu (Administração) ──
   Editor à esquerda, prévia grudenta à direita. As marcas me-antes/me-apos
   são a linha de inserção do arrasto; me-alvo acende o grupo que vai
   receber o item solto no vão. */
.me-wrap{display:flex;gap:20px;align-items:flex-start}
.me-editor{flex:1;min-width:0}
.me-barra{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.me-dica{font-size:12px;color:var(--muted)}
.me-gcard{background:var(--surface);border:1px solid #e6e9ee;border-radius:12px;
  margin-bottom:12px;overflow:hidden}
.me-gcard.me-fixo{opacity:.65}
.me-gtopo{display:flex;align-items:center;gap:9px;padding:8px 12px;background:#fafbfc;
  border-bottom:1px solid #eef0f3}
.me-alca{color:#c1c7cf;font-size:15px;cursor:grab;user-select:none;letter-spacing:-1px}
.me-gnome{border:1px solid transparent;border-radius:7px;font:inherit;font-size:13px;
  font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#3d4451;
  padding:4px 8px;width:180px;background:transparent}
.me-gnome:hover:not([readonly]),.me-gnome:focus:not([readonly]){border-color:#d8dde4;
  background:#fff;outline:0}
.me-gqt{font-size:11.5px;color:#9aa1ab}
.me-seta{border:1px solid #e6e9ee;background:#fff;border-radius:7px;width:26px;height:26px;
  font-size:12px;color:#5b6472;cursor:pointer;line-height:1;flex:0 0 auto}
.me-seta[disabled]{opacity:.35;cursor:default}
.me-trava{font-size:10px;font-weight:800;text-transform:uppercase;color:#9aa1ab;
  background:#eef0f3;border-radius:5px;padding:2px 7px}
.me-item{display:flex;align-items:center;gap:9px;padding:7px 12px;
  border-bottom:1px solid #f4f5f7;font-size:13.5px;background:#fff}
.me-item:last-child{border-bottom:0}
.me-item b{font-weight:600}
.me-item.me-fixo{opacity:.65}

/* Olho de visibilidade + linha oculta */
.me-olho{border:1px solid #e6e9ee;background:#fff;border-radius:7px;width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#8b94a1;padding:0}
.me-olho svg{width:15px;height:15px}
.me-olho:hover{border-color:#c1c7cf;color:#3d4451}
.me-olho.off{color:#a1121f;border-color:#f0c4c8;background:#fdf2f3}
.me-item.me-oculto{background:#fbfbfc}
.me-item.me-oculto b{color:#9aa1ab;text-decoration:line-through;text-decoration-color:#cbd0d8}
.me-tag-oculto{font-size:10px;font-weight:800;text-transform:uppercase;color:#a1121f;
  background:#fdf2f3;border:1px solid #f0c4c8;border-radius:5px;padding:1px 6px}
.me-para{border:1px solid #e6e9ee;border-radius:7px;font:inherit;font-size:12px;
  color:#5b6472;padding:4px 6px;background:#fff;max-width:150px}
.me-oco{padding:12px;font-size:12px;color:#9aa1ab;text-align:center;font-style:italic}
.me-pego{opacity:.45}
.me-item.me-antes{box-shadow:inset 0 3px 0 #a1121f}
.me-item.me-apos{box-shadow:inset 0 -3px 0 #a1121f}
.me-gcard.me-antes{box-shadow:0 -3px 0 #a1121f}
.me-gcard.me-apos{box-shadow:0 3px 0 #a1121f}
.me-gcard.me-alvo{box-shadow:inset 0 0 0 2px #e79aa1}

.me-previa{flex:0 0 230px;position:sticky;top:20px}
.me-rot{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:#9aa1ab;margin:0 0 8px}
.me-mini{background:#171a21;border-radius:12px;padding:12px 0;color:#c3c8d0;
  font-size:12.5px;box-shadow:0 10px 26px rgba(13,20,36,.18)}
.me-mini .b{color:#fff;font-weight:800;padding:0 14px 8px;font-size:13.5px}
.me-mini .b span{color:var(--red)}
.me-mini .g{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:#6b6f78;
  font-weight:700;padding:9px 14px 3px}
.me-mini a{display:block;padding:4px 14px;color:#c3c8d0}
.me-mini .pulso{font-size:10px;color:#8b929c;padding:8px 14px 0;font-style:italic}

/* Prévia do nome do sistema (mostra o corte branco/vermelho como na marca real) */
.mk-previa{margin-top:14px;background:#171a21;border-radius:12px;padding:14px 18px;
  display:inline-flex;flex-direction:column;gap:2px;min-width:240px}
.mk-marca{font-size:20px;font-weight:800;color:#fff;line-height:1.1}
.mk-marca span{color:var(--red)}
.mk-sub{font-size:12px;color:#9aa1ab}
.mk-foot{font-size:11px;color:#6b6f78;margin-top:6px}
@media (max-width:980px){.me-previa{display:none}}

/* ── o sino da barra superior ── */
.sino{position:relative;margin-right:4px}
.sino-btn{position:relative;border:0;background:none;cursor:pointer;color:#5b6472;
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.sino-btn:hover{background:#eef0f3}
.sino-btn svg{width:19px;height:19px}
.sino-n{position:absolute;top:2px;right:1px;background:var(--red);color:#fff;font-size:10px;
  font-weight:800;border-radius:20px;padding:1px 5px;line-height:1.3;min-width:16px;text-align:center}
.sino-gaveta{position:absolute;right:0;top:44px;width:360px;background:#fff;border-radius:12px;
  border:1px solid var(--border);box-shadow:0 14px 40px rgba(13,20,36,.18);overflow:hidden;z-index:60}
.sino-gaveta[hidden]{display:none}
.sino-topo{padding:10px 14px;font-size:12.5px;font-weight:800;border-bottom:1px solid #eef0f3}
.sino-lista{max-height:380px;overflow-y:auto}
.sino-item{display:block;padding:9px 14px;border-bottom:1px solid #f4f5f7;text-decoration:none;color:inherit}
.sino-item:hover{background:#fafbfc}
.sino-item.nova{background:#fdf2f3}
.sino-item.nova:hover{background:#fbe9ea}
.sino-item .de{display:inline-block;font-size:12.5px;font-weight:700}
.sino-item .de.sist{color:#6d28d9}
.sino-item .txt{display:block;font-size:12.5px;color:#5b6472;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.sino-item .qdo{display:block;font-size:11px;color:#9aa1ab;margin-top:2px}
.sino-vazio{padding:18px 14px;font-size:12.5px;color:#9aa1ab;text-align:center;font-style:italic}
.sino-pe{display:block;padding:9px 14px;background:#fafbfc;border-top:1px solid #eef0f3;
  font-size:12.5px;font-weight:700;color:var(--red);text-decoration:none}

/* ── a tela de conversas ── */
.cv-wrap{display:flex;padding:0;overflow:hidden;min-height:480px}
.cv-lista{flex:0 0 250px;border-right:1px solid #eef0f3;overflow-y:auto;max-height:70vh}
.cv-item{display:block;padding:11px 14px;border-bottom:1px solid #f4f5f7;color:inherit;text-decoration:none}
.cv-item:hover{background:#fafbfc}
.cv-item.on{background:#fdf2f3;box-shadow:inset 3px 0 0 var(--red)}
.cv-nome{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700}
.cv-nome .badge-n{background:var(--red);color:#fff;font-size:10px;font-weight:800;
  border-radius:20px;padding:1px 7px}
.cv-trecho{display:block;font-size:12px;color:#9aa1ab;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cv-fio{flex:1;display:flex;flex-direction:column;min-width:0}
.cv-cab{padding:12px 18px;font-weight:800;font-size:14px;border-bottom:1px solid #eef0f3}
.cv-corpo{flex:1;overflow-y:auto;padding:16px 18px;background:#fafbfc;max-height:56vh}
.cv-vazio{color:#9aa1ab;font-size:13px;text-align:center;padding:30px 0;font-style:italic}
.cv-msg{max-width:70%;background:#fff;border:1px solid #e6e9ee;border-radius:12px 12px 12px 4px;
  padding:9px 13px;margin-bottom:10px}
.cv-msg.minha{margin-left:auto;background:#fdf2f3;border-color:#f0d4d7;
  border-radius:12px 12px 4px 12px}
.cv-msg.sist{background:#f6f1fd;border-color:#ddcdf4;max-width:85%}
.cv-msg.sist .cv-de{color:#6d28d9}
.cv-de{font-size:11.5px;font-weight:800;margin-bottom:2px}
.cv-txt{font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.cv-rodape{display:flex;gap:10px;justify-content:flex-end;font-size:10.5px;color:#9aa1ab;margin-top:4px}
.cv-rodape a{color:var(--red);font-weight:700;text-decoration:none}
.cv-envio{display:flex;gap:10px;padding:12px 18px;border-top:1px solid #eef0f3;align-items:flex-end}
.cv-envio textarea{flex:1;border:1px solid var(--border);border-radius:10px;padding:9px 12px;
  font:inherit;font-size:13.5px;resize:vertical;min-height:42px}
.cv-so-leitura{padding:12px 18px;border-top:1px solid #eef0f3;font-size:12.5px;
  color:#9aa1ab;font-style:italic}
@media (max-width:820px){.cv-lista{flex-basis:170px}.cv-trecho{display:none}}

/* ── validação de serviços (o veredito do chefe) ── */
.vd-verde{color:#15803d}
.vd-amarelo{color:#b4630c}
.vd-vermelho{color:#a1121f}
.vd-neutro{color:inherit}
.vd-volta{margin-left:7px;font-size:10px;font-weight:800;text-transform:uppercase;
  color:#a1121f;background:#fde8e9;border:1px solid #f0b8bd;border-radius:5px;padding:1px 6px}

/* ── chat flutuante (a bolha do canto) ──
   Formato aprovado: botão redondo recolhido; aberto, lista → fio.
   Some no celular estreito (a recepção no pátio não pode ter a tela tapada)
   e não existe nas páginas públicas nem na TV (Layout = null). */
#chatFlutuante{position:fixed;right:18px;bottom:18px;z-index:70}
@media (max-width:560px){#chatFlutuante{right:14px;bottom:14px}}
.cf-bolha{position:relative;width:52px;height:52px;border-radius:50%;border:0;background:var(--red);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 28px rgba(13,20,36,.35)}
.cf-bolha:hover{filter:brightness(1.08)}
.cf-bolha svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.cf-n{position:absolute;top:-4px;right:-4px;background:#171a21;color:#fff;font-size:10px;
  font-weight:800;border-radius:20px;padding:1px 6px;border:2px solid #f4f5f7}
/* No celular o painel encolhe para caber na viewport (largura e altura), sem
   estourar a tela nem sumir atrás do topo. No desktop fica 320x430 como antes. */
.cf-painel{width:min(320px, calc(100vw - 28px));height:min(430px, calc(100vh - 96px));
  background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid #e6e9ee;box-shadow:0 18px 50px rgba(13,20,36,.28);
  display:flex;flex-direction:column}
.cf-cab{background:#171a21;color:#fff;padding:10px 12px;display:flex;align-items:center;gap:9px;
  font-size:13px;flex:0 0 auto}
.cf-cab b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-cab-n{background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:20px;padding:1px 6px}
.cf-vao{flex:1}
.cf-ico{border:0;background:none;color:#8b929c;font-size:16px;cursor:pointer;line-height:1;
  padding:2px 6px;border-radius:6px}
.cf-ico:hover{background:#2a2e3a;color:#fff}
.cf-lista{flex:1;overflow-y:auto}
.cf-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid #f4f5f7;
  cursor:pointer}
.cf-item:hover{background:#fafbfc}
.cf-av{width:32px;height:32px;border-radius:50%;background:#eef0f3;color:#5b6472;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
.cf-av.todos{background:#fdf2f3;color:#a1121f}
.cf-tx{min-width:0;flex:1}
.cf-tx b{display:block;font-size:13px;font-weight:700}
.cf-tx small{display:block;font-size:11.5px;color:#9aa1ab;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cf-n-item{background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:20px;
  padding:1px 7px;flex:0 0 auto}
.cf-corpo{flex:1;overflow-y:auto;background:#fafbfc;padding:12px}
.cf-vazio{color:#9aa1ab;font-size:12.5px;text-align:center;padding:22px 10px;font-style:italic}
.cf-msg{position:relative;max-width:82%;background:#fff;border:1px solid #e6e9ee;
  border-radius:11px 11px 11px 4px;padding:7px 32px 7px 11px;margin-bottom:8px;font-size:12.5px;
  white-space:pre-wrap;word-break:break-word;width:fit-content}
.cf-msg.minha{margin-left:auto;background:#fdf2f3;border-color:#f0d4d7;
  border-radius:11px 11px 4px 11px}
.cf-msg .de{display:block;font-size:10.5px;font-weight:800;margin-bottom:1px}
.cf-msg .qdo{position:absolute;right:7px;bottom:4px;font-size:9px;color:#b6bcc4}
.cf-erro{padding:6px 12px;background:#fde8e9;color:#a1121f;font-size:11.5px;flex:0 0 auto}
.cf-envio{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid #eef0f3;
  flex:0 0 auto}
.cf-envio input{flex:1;min-width:0;border:1px solid var(--border);border-radius:9px;
  padding:8px 11px;font:inherit;font-size:12.5px}
.cf-mandar{background:var(--red);border:0;color:#fff;border-radius:9px;width:38px;cursor:pointer;
  font-size:14px}

/* ── o @ das mensagens (autocomplete de menção) ──
   Caixa flutuante acima do campo; os chips reaproveitam as cores dos tipos
   da busca geral (t-cli, t-vei, t-os, t-prod, t-forn, t-menu). */
.mc-caixa{position:fixed;z-index:95;background:#fff;border:1px solid #e6e9ee;border-radius:11px;
  box-shadow:0 14px 40px rgba(13,20,36,.2);overflow:hidden;max-width:380px}
.mc-caixa[hidden]{display:none}
.mc-item{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12.5px;cursor:pointer;
  border-bottom:1px solid #f4f5f7}
.mc-item:last-child{border-bottom:0}
.mc-item:hover{background:#fafbfc}
.mc-item.on{background:#fdf2f3;box-shadow:inset 3px 0 0 #a1121f}
.mc-item b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-item small{color:#9aa1ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-tipo{font-size:9.5px;font-weight:800;text-transform:uppercase;padding:2px 6px;
  border-radius:5px;flex:0 0 58px;text-align:center}

/* ── Console SQL (Administração) ── */
.sqlc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sqlc-sep{width:1px;height:24px;background:var(--border);margin:0 3px}
.sqlc-sel,.sqlc-nome{height:34px;border:1px solid var(--border);border-radius:8px;padding:0 9px;
  font:inherit;font-size:13px;background:#fff}
.sqlc-nome{min-width:180px}
.sqlc-layout{display:flex;gap:10px;align-items:stretch}
.sqlc-tree{width:240px;flex:0 0 240px;border:1px solid var(--border);border-radius:11px;background:var(--surface);
  display:flex;flex-direction:column;max-height:78vh;overflow:hidden}
.sqlc-tree .hd{padding:9px 11px;border-bottom:1px solid #eef0f3;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:700}
.sqlc-search{margin:8px;width:calc(100% - 16px);height:30px;border:1px solid var(--border);border-radius:7px;
  padding:0 9px;font-size:12.5px;background:#fff}
.sqlc-tree .list{overflow:auto;flex:1;padding:0 4px 8px}
.sqlc-tname{padding:4px 6px;cursor:pointer;border-radius:6px;display:flex;gap:6px;align-items:center;font-size:12.5px}
.sqlc-tname:hover{background:#fafbfc}
.sqlc-tname .sch{color:#b4b2a9}
.sqlc-tname .caret{color:#9aa1ab;font-size:10px;width:12px;flex:0 0 12px}
.sqlc-tcols{margin:0 0 4px 20px;display:none}
.sqlc-tcol{padding:2px 6px;font-size:12px;color:var(--muted);cursor:pointer;border-radius:5px;
  display:flex;justify-content:space-between;gap:8px}
.sqlc-tcol:hover{background:#fafbfc}
.sqlc-tcol .ty{color:#b4b2a9}
.sqlc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sqlc-main.ed-collapsed #sqlcEditor,.sqlc-main.ed-collapsed #sqlcEditorFallback{display:none!important}
#sqlcEditor{height:42vh;min-height:260px;border:1px solid var(--border);border-radius:11px;overflow:hidden}
#sqlcEditorFallback{width:100%;height:42vh;min-height:260px;border:1px solid var(--border);border-radius:11px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;padding:11px;display:none;background:#fff;
  color:var(--text);resize:vertical}
.sqlc-res{margin-top:10px;border:1px solid var(--border);border-radius:11px;background:var(--surface);
  display:flex;flex-direction:column;min-height:200px}
.sqlc-tabs{display:flex;gap:2px;border-bottom:1px solid #eef0f3;padding:6px 8px 0;flex-wrap:wrap}
.sqlc-tab{padding:6px 12px;font-size:12.5px;cursor:pointer;border:1px solid transparent;border-bottom:none;
  border-radius:8px 8px 0 0;color:var(--muted)}
.sqlc-tab.active{background:var(--bg,#faf9f5);border-color:var(--border);color:var(--red);font-weight:700}
.sqlc-tab.haserr{color:#a1121f}
.sqlc-panes{flex:1;overflow:auto;padding:8px;max-height:40vh}
.sqlc-pane{display:none}
.sqlc-pane.active{display:block}
.sqlc-hint{font-size:12.5px;color:var(--muted);padding:6px}
.sqlc-gridwrap{overflow:auto;max-height:38vh}
table.sqlc-grid{border-collapse:collapse;width:100%;font-size:12.5px}
table.sqlc-grid th,table.sqlc-grid td{border:1px solid #ececec;padding:4px 8px;text-align:left;white-space:nowrap}
table.sqlc-grid th{background:#f3f2ec;color:#5f5e5a;position:sticky;top:0}
table.sqlc-grid td.nullv,.sqlc-grid .nullv{color:#c9c7be;font-style:italic}
td.ed-cell.editing{background:#fff7e6;outline:1px solid #c79a3a;cursor:text}
td.ed-cell.editing:focus{outline:2px solid var(--red)}
.sqlc-msg{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;white-space:pre-wrap}
.sqlc-msg .err{color:#a1121f;font-weight:700}
.sqlc-status{font-size:11.5px;color:var(--muted);padding:5px 11px;border-top:1px solid #eef0f3}
.sqlc-trunc{color:#b4630c;font-size:11.5px;margin:4px 2px}
.sqlc-edbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 2px 8px}
.sqlc-edbar .info{font-size:11.5px;color:var(--muted);margin-left:6px}

/* ── variantes de perigo (limpeza de dados) ── */
.alert.danger{background:#fdecea;border-color:#f5c6cb;color:#a1121f}
.btn.danger{background:#a1121f;border-color:#a1121f;color:#fff}
.btn.danger:hover{background:#87101a}
.btn.danger:disabled{opacity:.5;cursor:not-allowed}

/* ── Veículo: paleta de cor e prévia das fotos pintadas ── */
.vv-paleta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:2px}
.vv-cor{width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(13,20,36,.22);box-shadow:inset 0 1px 2px rgba(255,255,255,.35)}
.vv-cor:hover{transform:scale(1.12)}
.vv-cor.on{outline:2px solid var(--accent,#2563eb);outline-offset:2px}
.vv-custom{position:relative;width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;border:1px dashed #9aa1ab;color:#6b7280;
  font-weight:800;line-height:1}
.vv-custom input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;
  border:0;padding:0;cursor:pointer}
.vv-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.vv-vista{background:#fbfcfd;border:1px solid var(--border);border-radius:11px;padding:8px;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.vv-vista canvas{width:100%;height:auto;max-height:130px;object-fit:contain}
.vv-vista span{font-size:11.5px;color:#6b7280}
.vv-semfoto{margin-top:12px;font-size:12.5px;color:#9aa1ab}
@media(max-width:720px){.vv-preview{grid-template-columns:repeat(2,1fr)}}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — celular e tablet

   O grosso das telas já colapsa por componente (grids g2/g3/g4, tabelas em
   cartão, layouts de duas colunas). O que faltava era a CASCA: no desktop a
   barra lateral é fixa e o conteúdo tem margem para ela; no celular isso comia
   metade da tela. Abaixo de 900px a barra vira GAVETA — sai da esquerda por
   cima do conteúdo, e o mesmo botão hambúrguer que recolhe no desktop passa a
   abri-la. Um véu escuro atrás fecha ao toque.
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-backdrop{position:fixed;inset:0;background:rgba(13,20,36,.44);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .18s ease}
html.sb-open .sb-backdrop{opacity:1;pointer-events:auto}
body.no-scroll{overflow:hidden}

@media(max-width:900px){
  /* Conteúdo ocupa tudo; a barra sai do fluxo e vira gaveta sobreposta. */
  .main{margin-left:0}
  .sidebar{width:264px;transform:translateX(-100%);z-index:50;
    box-shadow:2px 0 22px rgba(13,20,36,.30);
    transition:transform .2s ease}
  html.sb-open .sidebar{transform:translateX(0)}

  /* Na gaveta os rótulos SEMPRE aparecem — o trilho-só-ícone é coisa de
     desktop. Anula o estado "recolhido" herdado do localStorage. */
  html.sb-col .sidebar{width:264px}
  html.sb-col .sidebar .brand{justify-content:flex-start;padding:18px 20px;gap:11px}
  html.sb-col .sidebar .brand .txt{display:block}
  html.sb-col .nav{padding:12px}
  html.sb-col .nav .grp{font-size:10px;line-height:normal;padding:12px 10px 6px;margin:0;border-top:0}
  html.sb-col .nav .grp:first-child{margin-top:0}
  html.sb-col .nav a{justify-content:flex-start;padding:9px 11px;gap:10px}
  html.sb-col .nav a > span{display:inline}
  html.sb-col .nav a .badge-n{position:static;top:auto;right:auto;padding:1px 7px;font-size:10px;line-height:normal}

  .content{padding:16px}
  .topbar{padding:0 12px;gap:6px}
  .topbar .crumb{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Tabela larga rola dentro do próprio painel em vez de estourar a viewport. */
  .panel{overflow-x:auto}
  .row-ac{flex-wrap:wrap}
}

@media(max-width:560px){
  .content{padding:12px}
  /* Mantém avatar e "Sair"; esconde o nome por extenso, que é o que sobra. */
  .topbar .user > div:not(.avatar){display:none}
  .topbar{padding:0 10px}
  .page-head{margin-bottom:16px}
  .page-head h2{font-size:19px}
  .panel .p-body{padding:14px}
  .panel .p-head{padding:13px 14px}
  .btn{padding:9px 13px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO ESCURO

   O tema vira variáveis: quem já usa var(--surface/border/text/muted) escurece
   sozinho. O resto são superfícies claras cravadas no código (tabela, formulário,
   avisos, painéis flutuantes) reapontadas aqui. A barra lateral já era escura.

   Botão no topo alterna e guarda em localStorage; o <head> aplica antes de pintar.
   Observação honesta: faixas com cor cravada em style="" inline (uns rodapés de
   painel) seguem claras — v1 cobre o que é montado pelos componentes padrão.
   ═══════════════════════════════════════════════════════════════════════════ */
.tema-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);
  cursor:pointer;margin-right:4px}
.tema-toggle:hover{border-color:var(--red);color:var(--red)}
.tema-toggle svg{width:17px;height:17px}
.tema-toggle .ic-sol{display:none}
html.tema-escuro .tema-toggle .ic-lua{display:none}
html.tema-escuro .tema-toggle .ic-sol{display:block}

html.tema-escuro{
  --bg:#0e1014; --surface:#181b22; --border:#2b303b; --text:#e6e8ee; --muted:#98a1af;
  --red-soft:#361a1d; --blue-soft:#16233f; --blue:#5b8cf0;
}
html.tema-escuro body{background:var(--bg);color:var(--text)}

/* Superfícies */
html.tema-escuro .topbar,html.tema-escuro .panel,html.tema-escuro .kpi{background:var(--surface);border-color:var(--border)}
html.tema-escuro .panel .p-head{border-color:var(--border)}
html.tema-escuro .kpi .l{color:var(--muted)}

/* Tabelas */
html.tema-escuro thead th{background:#20242e;color:var(--muted);border-color:var(--border)}
html.tema-escuro tbody td{border-color:var(--border)}
html.tema-escuro tbody tr:hover{background:#20242e}

/* Formulários */
html.tema-escuro input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html.tema-escuro select,html.tema-escuro textarea{background:#10141b;border-color:var(--border);color:var(--text)}
html.tema-escuro option{background:#181b22;color:var(--text)}
html.tema-escuro ::placeholder{color:#6b7280}
html.tema-escuro .fg label{color:#c7ccd4}

/* Botões neutros */
html.tema-escuro .btn.ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
html.tema-escuro .btn.ghost:hover{background:#20242e}

/* Avisos */
html.tema-escuro .alert,html.tema-escuro .alert.ok{background:#12261a;border-color:#1f4a30;color:#9fe3b6}
html.tema-escuro .alert.err,html.tema-escuro .alert.alert-err,html.tema-escuro .alert-err,
html.tema-escuro .alert.danger{background:#2a1214;border-color:#5a1e22;color:#ff9ea3}
html.tema-escuro .alert.warn{background:#2a2110;border-color:#5a4520;color:#f0c98a}
html.tema-escuro .alert.info{background:#141c33;border-color:#28356a;color:#a9b6ff}

/* Etiquetas */
html.tema-escuro .b-gray{background:#262b35;color:#c7ccd4}
html.tema-escuro .b-green{background:#12361f;color:#7fe0a0}
html.tema-escuro .b-blue{background:#16233f;color:#9cc0ff}
html.tema-escuro .b-red{background:#361a1d;color:#ff9ea3}

/* Painéis flutuantes (busca, sino, chat, menções) */
html.tema-escuro .bg-caixa,html.tema-escuro .sino-gaveta,html.tema-escuro .cf-painel,
html.tema-escuro .mc-lista{background:#181b22;border-color:var(--border);color:var(--text)}
html.tema-escuro .bg-campo{border-color:var(--border)}
html.tema-escuro .bg-campo input{background:transparent}
html.tema-escuro .cf-corpo{background:#12151b}
html.tema-escuro .cf-envio{background:#181b22;border-color:var(--border)}
html.tema-escuro .cf-item{border-color:#242833}
html.tema-escuro .cf-item:hover{background:#20242e}
html.tema-escuro .cf-msg{background:#20242e;border-color:#2b303b;color:var(--text)}
html.tema-escuro .cf-msg.minha{background:#361a1d;border-color:#5a2a2e}
html.tema-escuro .sino-item,html.tema-escuro .mc-item{border-color:#242833}
html.tema-escuro .sino-item:hover,html.tema-escuro .mc-item.sel{background:#20242e}

/* Editor do menu */
html.tema-escuro .me-gcard{background:#181b22;border-color:var(--border)}
html.tema-escuro .me-item{background:#181b22;border-color:#242833}
html.tema-escuro .me-seta,html.tema-escuro .me-olho,html.tema-escuro .me-para{background:#10141b;border-color:var(--border);color:var(--text)}
html.tema-escuro .me-item.me-oculto{background:#14171d}

/* Hovers claros genéricos */
html.tema-escuro .av-item:hover,html.tema-escuro .cv-item:hover{background:#20242e}

/* Botão WhatsApp (um toque: abre o WhatsApp com a mensagem e o link prontos) */
.btn.wa{background:#25d366;color:#fff;border-color:#25d366}
.btn.wa:hover{background:#1eb85a;border-color:#1eb85a}
html.tema-escuro .btn.wa{background:#1f9d52;border-color:#1f9d52}

/* QR do acompanhamento na recepção — tile branco (fica escaneável no tema escuro) */
.qr-box{background:#fff;padding:8px;border-radius:10px;line-height:0;box-shadow:0 1px 3px rgba(13,20,36,.18)}
.qr-box svg{display:block;width:150px;height:150px}

/* ── Dashboard do dia ── */
.kpi.lk{display:block;text-decoration:none;transition:transform .1s ease,box-shadow .1s ease}
.kpi.lk:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,20,36,.12)}
.kpi.lk.alerta::before{background:#a1121f}
.kpi.lk.alerta .v{color:#a1121f}
.ds-status{display:flex;flex-wrap:wrap;gap:10px}
.ds-chip{flex:1 1 120px;min-width:120px;background:#fafbfc;border:1px solid var(--border);
  border-left:3px solid #9aa1ab;border-radius:10px;padding:12px 14px}
.ds-chip b{display:block;font-size:24px;font-weight:800;line-height:1}
.ds-chip span{font-size:12px;color:var(--muted)}
.ds-chip.s1{border-left-color:#6b7280}   /* aberta   */
.ds-chip.s2{border-left-color:#2563eb}   /* orçada   */
.ds-chip.s3{border-left-color:#7c3aed}   /* aprovada */
.ds-chip.s4{border-left-color:#f59e0b}   /* execução */
.ds-chip.s5{border-left-color:#15a34a}   /* concluída*/
.ds-chip.s6{border-left-color:#0e9488}   /* faturada */
.ds-mini{display:flex;flex-wrap:wrap;gap:18px}
.ds-mini a{color:var(--muted);font-size:14px}.ds-mini a b{color:var(--text);font-size:18px;font-weight:800}
html.tema-escuro .ds-chip{background:#20242e}

/* Botão de avisos push ligado */
.tema-toggle.on{color:var(--red);border-color:var(--red)}