*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#eff5fb;--panel:#fff;--panel-2:#f7fbff;--border:#dce6f0;--text:#16314b;--muted:#6b839c;
  --primary:#163455;--primary-2:#0e2842;--accent:#1fb4d3;--accent-2:#22d3ee;
  --green:#22c55e;--yellow:#f0b90b;--red:#ef4444;--gray:#94a3b8;--orange:#f97316;--purple:#7c3aed;--teal:#0f9fa8;
  --shadow:0 12px 28px rgba(20,52,85,.08);--shadow-sm:0 4px 12px rgba(20,52,85,.08);--radius:18px;

  /* §59 — os cinco significados de estado do sistema.
   *
   * A cor não é decoração: ela diz o que está acontecendo. Antes cada tela
   * escolhia o seu tom de vermelho, e "vencido" ficava com uma cara no estoque
   * e outra no financeiro — o usuário aprendia duas linguagens para a mesma
   * informação. Aqui ficam os cinco significados, com fundo e texto que já
   * passam em contraste; as telas consomem daqui em vez de inventar. */
  --st-sucesso:#157240;--st-sucesso-bg:#d1f2e1;
  --st-atencao:#c2410c;--st-atencao-bg:#ffedd5;
  --st-critico:#b91c1c;--st-critico-bg:#fee2e2;
  --st-info:#1d4ed8;--st-info-bg:#e0edfb;
  --st-neutro:#6b839c;--st-neutro-bg:#e8eef5;

  /* §5 — os estados de interação, iguais em todo botão do sistema. */
  --btn-foco:0 0 0 3px rgba(31,180,211,.35);
  --btn-selecionado:#163455;
}

/* §5 — estados padronizados de botão.
 *
 * O problema real era não dar para saber qual opção está selecionada: o item
 * ativo diferia do inativo por um tom de cinza. Agora a seleção tem fundo
 * sólido, contraste de texto e uma marca — três sinais, não um. */
.btn:focus-visible,.seg-item:focus-visible,.sub-tab:focus-visible,.cv-tab:focus-visible{
  outline:none;box-shadow:var(--btn-foco)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn.carregando{position:relative;color:transparent!important;pointer-events:none}
.btn.carregando::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:girando .6s linear infinite;
  color:var(--primary)}
@keyframes girando{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.carregando::after{animation:none}}
body{font-family:'Segoe UI',Arial,sans-serif;background:linear-gradient(180deg,#f5f9fd,#edf4fb);color:var(--text);min-height:100vh}
.hidden{display:none!important}img{max-width:100%}button,input,select,textarea{font:inherit}

.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#22d3ee33,transparent 28%),linear-gradient(135deg,#0f2741,#15375d 55%,#1b4a78)}
.login-card{width:min(520px,100%);background:#fffffffa;border:1px solid #ffffff40;border-radius:28px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.25);backdrop-filter:blur(8px)}
.login-logo{display:block;height:82px;object-fit:contain;margin:0 auto 18px}.login-card h1{text-align:center;color:var(--primary);font-size:30px;margin-bottom:8px}.login-card p{text-align:center;color:var(--muted);margin-bottom:18px}
.login-form{display:grid;gap:10px}.login-form label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.login-form select,.login-form input{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:#fff}code{background:#e7f0f8;padding:2px 6px;border-radius:7px}
/* Entrada enxuta: marca, o que é o sistema, e os campos. Credencial de
   demonstração não fica em tela de produção — é meio caminho da invasão. */
.login-sub{text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:.3px;margin-bottom:18px}
.login-foot{text-align:center;color:var(--muted);font-size:11px;margin-top:18px;opacity:.85}
.link-btn{background:none;border:none;color:var(--primary);font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;padding:6px;text-decoration:underline;justify-self:center}
.link-btn:hover{color:var(--accent)}
.login-form .seg{justify-content:center}


.brand{display:flex;gap:14px;align-items:center;min-width:340px}.brand-logo{height:50px;max-width:230px;object-fit:contain}.brand h1{font-size:20px}.brand h1 span{font-weight:300}.brand p{font-size:12px;opacity:.82}
.tabs{display:flex;gap:8px;flex:1;flex-wrap:wrap}.tab{border:none;background:#ffffff14;color:#fff;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;transition:.18s}.tab.active{background:#fff;color:var(--primary)}.tab:hover{background:#ffffff20}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.status-dot{width:12px;height:12px;border-radius:999px;box-shadow:0 0 0 4px rgba(255,255,255,.16)}.status-dot.online{background:#22c55e}.status-dot.offline{background:#ef4444}

.hero{margin:18px 22px 0;background:linear-gradient(135deg,#fff,#f2fbfe);border:1px solid var(--border);border-radius:24px;padding:18px 20px;display:flex;gap:20px;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm)}.hero h2{font-size:24px;margin-bottom:6px}.hero p{max-width:920px;color:var(--muted)}.hero-tags{display:flex;gap:10px;flex-wrap:wrap}.hero-tags span{padding:8px 12px;border-radius:999px;background:#e8f8fb;border:1px solid #c5edf4;color:#15728a;font-weight:800;font-size:12px}
.tech-card{background:linear-gradient(135deg,#13304f,#1d4c77);color:#fff;border-radius:22px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:18px;box-shadow:var(--shadow)}.tech-card small{opacity:.75;letter-spacing:.8px}.tech-card h3{font-size:22px;margin:4px 0}.tech-card p{opacity:.82;max-width:720px}.tech-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-width:360px}.tech-kpis div{background:#ffffff14;border:1px solid #ffffff14;border-radius:18px;padding:12px 14px}.tech-kpis span{display:block;font-size:11px;opacity:.76}.tech-kpis strong{font-size:24px}

.btn{border:none;border-radius:14px;padding:11px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.18s}.btn:hover{transform:translateY(-1px)}.btn-full{width:100%}.btn-primary{background:#fff;color:var(--primary)}.btn-primary:hover{background:#dceefa}.btn-soft{background:#eef5fb;color:var(--primary);border:1px solid var(--border)}.btn-soft:hover{background:#e1edf7}.btn-ghost{background:#ffffff14;color:#fff}.btn-ghost:hover{background:#ffffff22}.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:#d93434}.btn-mini{padding:7px 11px;font-size:12px}

.view{display:none;padding:20px 22px}.view.active{display:block}.mt-10{margin-top:10px}.mt-20{margin-top:20px}
.kpis{display:grid;gap:12px}.kpis-8{grid-template-columns:repeat(8,1fr)}
.kpi{background:#fff;border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}.kpi span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.kpi strong{font-size:30px}.accent-blue{border-left-color:#2563eb}.accent-teal{border-left-color:var(--teal)}.accent-orange{border-left-color:var(--orange)}.accent-red{border-left-color:var(--red)}.accent-green{border-left-color:var(--green)}.accent-yellow{border-left-color:var(--yellow)}.accent-purple{border-left-color:var(--purple)}
.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
.card-panel,.toolbar-card,.planner-panel{background:#fff;border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:var(--shadow-sm)}.card-panel h3,.planner-panel h3{font-size:16px;margin-bottom:12px}
.chart{display:flex;flex-direction:column;gap:10px}.bar-row{display:flex;gap:8px;align-items:center}.bar-row .label{width:150px;font-size:12px;color:var(--muted)}.bar-track{flex:1;height:22px;border-radius:999px;background:#eef4fa;overflow:hidden}.bar-fill{height:100%;display:flex;align-items:center;justify-content:flex-end;color:#fff;font-size:12px;font-weight:800;padding-right:8px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;vertical-align:top}.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:#f8fbfe}.tbl tr:hover{background:#f8fbfe}

.toolbar-card{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.toolbar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1}.toolbar-stats div{background:#f7fbfe;border:1px solid var(--border);border-radius:16px;padding:14px}.toolbar-stats span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.toolbar-stats strong{font-size:26px}.toolbar-filters{display:grid;grid-template-columns:1fr 160px;gap:10px;min-width:340px}.planner-actions{grid-template-columns:1fr 140px auto;align-items:center}
.planner-panel{overflow:auto}.planner-table{border-collapse:collapse;min-width:1480px;width:100%}.planner-table th,.planner-table td{border-right:1px solid #edf3f8;border-bottom:1px solid var(--border);padding:8px;font-size:12px;text-align:center}.planner-table th{position:sticky;top:0;background:#f8fbfe;z-index:2}.planner-table .sticky-a{position:sticky;left:0;background:#fff;z-index:3;text-align:left;min-width:260px}.planner-table .sticky-b{position:sticky;left:260px;background:#fff;z-index:3;text-align:left;min-width:130px}.week-cell{min-width:26px;height:32px}.week-cell.active{color:#fff;font-weight:800}.week-cell.verde{background:var(--green)}.week-cell.amarelo{background:var(--yellow)}.week-cell.vermelho{background:var(--red)}.week-cell.cinza{background:var(--gray)}.week-cell.current{outline:2px solid var(--primary-2);outline-offset:-2px}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:14px;box-shadow:var(--shadow-sm)}.filters input,.filters select,.toolbar-filters input,.toolbar-filters select,.field input,.field select,.field textarea{border:1px solid var(--border);border-radius:14px;padding:11px 12px;background:#fff;color:var(--text)}.filters input{flex:1;min-width:240px}
.board{display:flex;gap:14px;overflow:auto;min-height:calc(100vh - 330px);padding-bottom:10px}.column{min-width:330px;max-width:340px;background:#f7fbfe;border:1px solid var(--border);border-top:5px solid var(--primary);border-radius:20px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}.column-head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.column-head h3{font-size:13px;letter-spacing:.7px;text-transform:uppercase}.counter{background:var(--primary);color:#fff;min-width:28px;text-align:center;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}.column-body{padding:12px;display:flex;flex-direction:column;gap:12px;min-height:120px;flex:1}.column-body.drag-over{background:#e7f7fb}
.order-card{position:relative;background:#fff;border:1px solid var(--border);border-left:5px solid var(--gray);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);cursor:grab}.order-card.verde{border-left-color:var(--green)}.order-card.amarelo{border-left-color:var(--yellow)}.order-card.vermelho{border-left-color:var(--red)}.order-card.cinza{border-left-color:var(--gray)}.order-card:hover{transform:translateY(-2px)}.order-card.dragging{opacity:.55}.order-card h4{font-size:15px;margin-bottom:8px}.order-meta{display:grid;gap:4px;font-size:11.5px;color:var(--muted)}.order-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.client-mini{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-weight:800}.client-mini img{width:28px;height:28px;border-radius:9px;object-fit:cover;background:#eef4fa;border:1px solid var(--border)}.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.tag{padding:4px 9px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;background:#eef4fa;color:var(--muted)}.tag.tipo{background:#e8faf6;color:#0c8059}.tag.area{background:#eaf4ff;color:#135185}.tag.verde{background:#dcfce7;color:var(--st-sucesso)}.tag.amarelo{background:#fff3c8;color:#a05b00}.tag.vermelho{background:var(--st-critico-bg);color:var(--st-critico)}.tag.cinza{background:#eef2f7;color:#566577}.tag.late{background:var(--red);color:#fff}.tag.week{background:#ebf8fd;color:#167289}.order-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:var(--muted)}.badge{background:#f3f7fb;padding:4px 7px;border-radius:8px;font-weight:800}.order-actions{display:flex;gap:8px;margin-top:12px}.order-actions .btn{flex:1;padding:8px 10px;font-size:12px}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}.form-grid-3{grid-template-columns:repeat(3,1fr)}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.45px}.field-span-2{grid-column:span 2}.actions-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.list-cards{list-style:none;display:grid;gap:10px;margin-top:16px}.list-cards li{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--border);background:#f8fbfe;border-radius:16px;padding:10px 12px}.list-left{display:flex;gap:10px;align-items:center}.list-left img{width:42px;height:42px;border-radius:12px;object-fit:cover;background:#fff;border:1px solid var(--border)}.list-text small{display:block;color:var(--muted)}.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.infra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.infra-grid div{border:1px solid var(--border);border-radius:18px;background:#f8fbfe;padding:14px}.infra-grid strong{display:block;margin-bottom:4px}.infra-grid span{color:var(--muted);font-size:13px}

.modal-backdrop{display:flex;position:fixed;inset:0;background:rgba(10,25,40,.58);z-index:200;align-items:center;justify-content:center;padding:16px}.modal-backdrop.hidden{display:none}.modal{width:100%;max-height:92vh;background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.25);display:flex;flex-direction:column}.modal-xl{max-width:1120px}.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px}.modal-head h2{font-size:22px}.modal-head p{color:var(--muted);font-size:13px;margin-top:4px}.close-btn{border:none;background:none;font-size:24px;color:var(--muted);cursor:pointer}.modal-body{padding:20px 22px;overflow:auto}.modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:#f8fbfe;border-radius:0 0 24px 24px}
.dynamic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.checklist{display:grid;gap:8px}.check-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);background:#f7fbfe;border-radius:14px}.check-item.done span{text-decoration:line-through;color:var(--muted)}.check-item span{flex:1}.check-item button{border:none;background:none;color:var(--red);cursor:pointer}.inline-add{display:flex;gap:10px;margin-top:10px}.inline-add input{flex:1;border:1px solid var(--border);border-radius:14px;padding:11px 12px}.attachments{display:flex;flex-wrap:wrap;gap:8px}.attachment{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);background:#f8fbfe;border-radius:14px;font-size:12px}.attachment img{width:34px;height:34px;border-radius:10px;object-fit:cover}.attachment a{color:var(--primary);text-decoration:none}.attachment button{border:none;background:none;color:var(--red);cursor:pointer}
.signature-card{border:1px solid var(--border);background:#f8fbfe;border-radius:18px;padding:14px}.signature-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.signature-card h4{font-size:14px}.signature-card canvas{width:100%;height:160px;background:#fff;border:1px dashed #bfd3e4;border-radius:14px;touch-action:none}.signature-preview{margin-top:8px;min-height:24px}.signature-preview img{max-height:80px;border:1px solid var(--border);border-radius:10px;background:#fff}

#printArea{display:none}
/* Impressão — enquadramento A4.
   A tela é feita para monitor; o papel tem 21 cm. Sem reduzir a escala, a
   tabela estourava a margem e o documento saía cortado ou em duas páginas.
   Uma base de 9.5pt encolhe TUDO proporcionalmente, porque o resto da folha
   usa em/%, e a margem fica com o Nginx da folha: @page. */
@page{size:A4 portrait;margin:12mm 10mm}
@media print{body *{visibility:hidden}#printArea,#printArea *{visibility:visible}#printArea{display:block;position:absolute;left:0;top:0;width:100%;padding:0;font-size:9.5pt;line-height:1.35;color:#1a2b3c}#printArea h2{font-size:1.5em;margin:0 0 2px}#printArea h3{font-size:1.05em}#printArea p,#printArea td,#printArea th,#printArea li{font-size:1em}#printArea small{font-size:.85em}.p-head{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:2px solid var(--primary);padding-bottom:8px;margin-bottom:12px}.p-head img{height:34px;object-fit:contain}.p-sec{margin-bottom:12px}.p-sec h3{font-size:1.05em;text-transform:uppercase;color:var(--primary);border-bottom:1px solid #cad6e3;padding-bottom:5px;margin-bottom:8px}.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}.p-box{border:1px solid #d8e2ec;border-radius:8px;padding:6px 8px}.p-sign{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:34px;text-align:center}.p-sign div{border-top:1px solid #333;padding-top:7px}.p-signatures{display:grid;grid-template-columns:1fr 1fr;gap:20px}.p-signatures img{max-height:80px;object-fit:contain}
/* Folha de ponto: uma por colaborador, com totais no rodapé da tabela. */
.p-tbl{width:100%;border-collapse:collapse;font-size:.92em;margin-top:8px}
.p-tbl th,.p-tbl td{border:1px solid #b9c6d4;padding:3px 5px;text-align:left}
.p-tbl thead th,.p-tbl tfoot th{background:#eef4fa;font-weight:800}
.p-tbl .num{text-align:right;white-space:nowrap}
.p-note{font-size:.88em;color:#333;margin-top:8px}
.p-bar{display:inline-block;height:9px;border-radius:5px;background:linear-gradient(90deg,#163455,#1fb4d3);min-width:2px}
.p-notas{margin:0 0 8px 16px;font-size:.88em;color:#333;display:grid;gap:4px}
.p-rodape{margin-top:14px;padding-top:6px;border-top:1px solid #cad6e3;text-align:center;font-size:.8em;color:#4a5c6e}
#printArea h4{font-size:.98em;margin:10px 0 4px;color:#163455}}

@media (max-width:1280px){.kpis-8{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:920px){.topbar{flex-wrap:wrap;padding:14px}.brand{min-width:100%;justify-content:space-between}.tabs{width:100%;overflow:auto;flex-wrap:nowrap}.top-actions{width:100%;justify-content:space-between}.hero{margin:14px;flex-direction:column;align-items:flex-start}.view,.tech-panel{padding:16px 14px}.toolbar-card,.toolbar-stats,.grid-3,.grid-2,.form-grid,.form-grid-3,.dynamic-grid,.infra-grid,.tech-kpis{grid-template-columns:1fr!important;display:grid}.toolbar-card{display:grid}.toolbar-filters,.planner-actions{grid-template-columns:1fr!important}.filters{padding:12px}.board{min-height:auto}.column{min-width:88vw;max-width:88vw}.field-span-2{grid-column:span 1}.kpis-8{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kpis-8{grid-template-columns:1fr}.hero h2{font-size:19px}.brand-logo{height:40px;max-width:170px}.column{min-width:95vw;max-width:95vw}.modal-head,.modal-body,.modal-foot{padding:14px}.inline-add{flex-direction:column}.tech-card{padding:16px;display:grid}}

/* ===== Fluxo de OS (kanban PCM) ===== */
.flow-bar{background:linear-gradient(135deg,#13304f,#1d4c77);color:#fff;border-radius:22px;padding:16px 20px;margin-bottom:14px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.flow-title small{opacity:.7;font-size:11px;font-weight:800;letter-spacing:.9px}
.flow-title h3{font-size:13px;font-weight:600;opacity:.92;margin-top:6px;max-width:760px;line-height:1.5}
.flow-kpis{display:grid;grid-template-columns:repeat(6,minmax(96px,1fr));gap:10px}
.flow-kpis div{background:#ffffff14;border:1px solid #ffffff1f;border-radius:16px;padding:10px 12px}
.flow-kpis span{display:block;font-size:10.5px;opacity:.78;margin-bottom:2px}
.flow-kpis strong{font-size:21px}
.flow-kpis .crit{background:#ef444426;border-color:#ef444455}
.flow-kpis .late{background:#f9731626;border-color:#f9731655}
.flow-kpis .rca{background:#facc1526;border-color:#facc1555}
.filter-check{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted);background:#f5f9fd;border:1px solid var(--border);border-radius:14px;padding:0 12px;cursor:pointer}

.column-title{display:flex;align-items:center;gap:8px}
.step-num{width:20px;height:20px;border-radius:999px;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:none}
.column-head{cursor:pointer;user-select:none}
.column-sub{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px;border-bottom:1px solid var(--border)}
.chip{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;background:#eaf1f8;color:var(--muted)}
.chip.late{background:var(--st-critico-bg);color:var(--st-critico)}
.chip.hint{font-weight:600;text-transform:none;background:transparent;color:#8ba0b6;padding-left:0}
.column-empty{border:1px dashed var(--border);border-radius:14px;padding:16px;text-align:center;color:#9db0c4;font-size:12px}
.column.collapsed{min-width:66px;max-width:66px}
.column.collapsed .column-sub,.column.collapsed .column-body{display:none}
.column.collapsed .column-head{flex-direction:column;gap:12px;padding:14px 8px;border-bottom:none;height:100%;align-items:center}
.column.collapsed .column-title{flex-direction:column;gap:12px}
/* Coluna recolhida: nome na vertical para identificar a etapa do fluxo */
.column.collapsed .column-title h3{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-size:12px;letter-spacing:1.1px;color:var(--primary)}

.os-code{font-size:10.5px;font-weight:800;color:var(--primary);background:#eaf2fa;padding:3px 7px;border-radius:8px}
.order-card.p1{border-left-color:var(--red)}.order-card.p2{border-left-color:var(--orange)}
.order-card.p3{border-left-color:var(--yellow)}.order-card.p4{border-left-color:var(--green)}
.order-meta code{background:#eef4fa;padding:1px 5px;border-radius:6px;font-size:10.5px}
.tag.prio.p1{background:var(--st-critico-bg);color:var(--st-critico)}.tag.prio.p2{background:var(--st-atencao-bg);color:var(--st-atencao)}
.tag.prio.p3{background:#fff3c8;color:#a05b00}.tag.prio.p4{background:#dcfce7;color:var(--st-sucesso)}
.tag.rca{background:#fef3c7;color:#92400e}.tag.stop{background:#1e293b;color:#fff}
.progress{height:6px;border-radius:999px;background:#eef4fa;overflow:hidden;margin-top:10px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}
.week-cell.p1{background:var(--red)}.week-cell.p2{background:var(--orange)}
.week-cell.p3{background:var(--yellow)}.week-cell.p4{background:var(--green)}

/* ===== Modal de OS em etapas ===== */
.modal-tabs{display:flex;gap:6px;padding:12px 22px 0;flex-wrap:wrap;border-bottom:1px solid var(--border);background:#f8fbfe}
.modal-tab{border:1px solid transparent;background:#eef5fb;color:var(--muted);padding:9px 14px;border-radius:14px 14px 0 0;font-weight:800;font-size:12.5px;cursor:pointer}
.modal-tab.active{background:#fff;color:var(--primary);border-color:var(--border);border-bottom-color:#fff;margin-bottom:-1px}
.os-tab{display:none}.os-tab.active{display:block}
.field-span-3{grid-column:span 3}
.gate-banner{border-radius:16px;padding:12px 14px;margin-bottom:16px;font-size:13px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412}
.gate-banner.ok{background:#ecfdf5;border-color:#86efac;color:#166534}
.gate-banner span{display:inline-block;background:#ffffffcc;border-radius:8px;padding:2px 7px;margin:2px 3px 0 0;font-weight:700}
.rca-note{background:#f8fbfe;border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--muted)}
.rca-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.material-add{display:grid;grid-template-columns:120px 1fr 80px auto;gap:8px}
.check-item.empty span{color:var(--muted)}

@media (max-width:1280px){.flow-kpis{grid-template-columns:repeat(3,1fr)}.rca-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:920px){.flow-bar{flex-direction:column;align-items:flex-start}.flow-kpis{width:100%;grid-template-columns:repeat(2,1fr)}.rca-grid,.material-add{grid-template-columns:1fr}.field-span-3{grid-column:span 1}.modal-tabs{padding:10px 14px 0}}

/* ===== Layout com painel lateral ===== */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;align-items:start}
.app-main{min-width:0}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:20px 16px;
  background:linear-gradient(180deg,#0d2137,#123353 55%,#17456f);color:#fff;box-shadow:4px 0 24px rgba(13,33,55,.18)}
/* Marca em versão negativa: aplicada direto sobre o azul, sem caixa.
   A moldura branca existia só porque o lettering original é azul-escuro. */
.side-brand{display:flex;align-items:center;justify-content:center;padding:8px 6px 16px;
  border-bottom:1px solid #ffffff1f;margin-bottom:2px}
.side-logo{display:block;width:100%;max-width:172px;height:auto;object-fit:contain}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow:auto}
.side-label{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#ffffff59;padding:14px 10px 6px}
.side-nav .tab{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;color:#ffffffcc;
  border:none;border-radius:12px;padding:11px 12px;font-weight:700;font-size:13.5px;cursor:pointer;transition:.16s}
.side-nav .tab i{font-style:normal;font-size:15px;opacity:.7;width:18px;text-align:center}
.side-nav .tab:hover{background:#ffffff14;color:#fff}
.side-nav .tab.active{background:#fff;color:var(--primary);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.side-nav .tab.active i{opacity:1;color:var(--accent)}
.side-foot{border-top:1px solid #ffffff1f;padding-top:14px;display:grid;gap:10px}
.side-user{background:#ffffff12;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.side-user strong{font-size:13.5px}
.side-user small{font-size:11px;opacity:.7;text-transform:capitalize}
.side-status{display:flex;align-items:center;gap:8px;font-size:11.5px;opacity:.8;padding:0 4px}

/* Barra do topo: marca e usuário saíram (já estão no menu lateral), sobrou
   onde o usuário está e o que é do sistema inteiro. Mais baixa de propósito —
   a altura devolvida vai para a tela. */
.topbar{background:#fff;color:var(--text);padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(20,52,85,.06)}
.topbar-brand{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.topbar-meta small{color:var(--muted);font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;font-weight:800}
.topbar-meta strong{font-size:15px;letter-spacing:-.2px;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.page-head h1{font-size:21px;letter-spacing:-.2px}
.page-head p{font-size:12.5px;color:var(--muted);margin-top:2px}
.topbar .btn-ghost{background:#eef5fb;color:var(--primary);border:1px solid var(--border)}
.topbar .btn-soft{background:#f5f9ff;color:var(--primary);border:1px solid var(--border)}
.topbar .btn-ghost:hover,.topbar .btn-soft:hover{background:#e1edf7}
.topbar .btn-primary{background:var(--primary);color:#fff}
.topbar .btn-primary:hover{background:var(--primary-2)}
.tech-panel{padding:18px 22px 0}

/* ===== Plano 52 semanas ===== */
.week-cell{position:relative;cursor:default}
.week-cell.active{cursor:pointer;border-radius:4px}
.week-cell.active:hover{outline:2px solid var(--primary-2);outline-offset:-2px}
.week-count{position:absolute;top:1px;right:2px;font-size:8.5px;font-weight:800;line-height:1;
  background:#0d2137;color:#fff;border-radius:999px;padding:2px 3.5px;min-width:12px}
.planner-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:11.5px;color:var(--muted)}
.planner-legend span{display:flex;align-items:center;gap:6px;font-weight:700}
.planner-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.week-list{display:grid;gap:10px}
.week-item{border:1px solid var(--border);border-left:4px solid var(--gray);border-radius:14px;padding:12px 14px;cursor:pointer;background:#fff}
.week-item:hover{background:#f7fbfe}
.week-item.p1{border-left-color:var(--red)}.week-item.p2{border-left-color:var(--orange)}
.week-item.p3{border-left-color:var(--yellow)}.week-item.p4{border-left-color:var(--green)}
.week-item h4{font-size:14px;margin-bottom:5px}
.week-item .week-meta{font-size:11.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.modal-md{max-width:620px}

@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;flex-direction:row;align-items:center;gap:14px;padding:12px 14px;overflow:auto}
  .side-brand{flex:none;width:auto;padding:0 12px 0 0;border-bottom:none;border-right:1px solid #ffffff1f;margin:0}
  .side-logo{max-width:132px}
  .side-nav{flex-direction:row;flex:1;gap:6px;align-items:center}
  .side-label{display:none}
  .side-nav .tab{white-space:nowrap;padding:9px 12px}
  .side-foot{border:none;padding:0;display:flex;align-items:center;gap:8px}
  .side-status{display:none}
  .topbar{position:sticky;top:0;z-index:90}
}

/* ===== Numeração da OS e equipe executante ===== */
.inline-check{display:flex!important;align-items:center;gap:6px;margin-top:6px;font-size:11px;font-weight:700;
  color:var(--muted);text-transform:none!important;letter-spacing:0!important;cursor:pointer}
.field input.locked{background:#f1f6fb;color:var(--primary);font-weight:800;letter-spacing:.5px}
.people-list{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;align-items:center;
  border:1px solid var(--border);border-radius:14px;padding:8px 10px;background:#f8fbfe}
.person{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:12px;padding:6px 10px;font-size:12px}
.person strong{font-size:12.5px}
.person small{color:var(--muted);font-size:10.5px}
.person button{border:none;background:none;color:var(--red);cursor:pointer;font-size:12px}
.person.parceiro{border-left-color:#7c3aed}.person.terceiro{border-left-color:var(--orange)}
.person.fornecedor{border-left-color:var(--yellow)}
.person.empty{border:none;background:none;color:var(--muted);font-style:italic}
.people-add{display:grid;grid-template-columns:150px 1fr 1fr auto;gap:8px}
@media (max-width:920px){.people-add{grid-template-columns:1fr}}

/* ===== Indicadores profissionais ===== */
.kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.tile span{display:block;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px;margin-bottom:6px;
  text-transform:uppercase;line-height:1.3}
.tile strong{font-size:26px;line-height:1;letter-spacing:-.5px;display:block}
.tile small{display:block;margin-top:6px;font-size:10.5px;color:#8ba0b6;line-height:1.35}
.tile.red::before{background:var(--red)}.tile.orange::before{background:var(--orange)}
.tile.yellow::before{background:var(--yellow)}.tile.green::before{background:var(--green)}
.tile.blue::before{background:#2563eb}.tile.teal::before{background:var(--teal)}
.tile.purple::before{background:var(--purple)}
.tile.red strong{color:var(--st-critico)}.tile.green strong{color:var(--st-sucesso)}.tile.orange strong{color:var(--st-atencao)}



/* Segmentação de dados: o recorte fica à vista, sem abrir lista. */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:#eef4fa;border:1px solid var(--border)}
.seg-item{font:inherit;font-size:12px;font-weight:700;padding:5px 11px;border:none;border-radius:9px;
  background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg-item:hover{background:#e1edf7;color:var(--primary)}
/* Três sinais de seleção — fundo, contraste e sombra. Um só (o tom de cinza)
   era o que fazia o usuário não saber em que modo estava. */
.seg-item.active{background:var(--btn-selecionado);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-weight:800}
/* Painel compacto: nove gráficos na tela pedem barra mais baixa e rótulo menor. */
#view-dashboard .chart{gap:6px}
#view-dashboard .bar-row .label{width:118px;font-size:11px}
#view-dashboard .bar-track{height:16px}
#view-dashboard .bar-fill{font-size:11px;padding-right:6px}
#view-dashboard .card-panel h3{font-size:13px}



/* §3 — dois gráficos por linha no desktop. Três numa linha só cabiam
   espremendo o eixo a ponto de o rótulo virar reticências. A largura mínima
   de 420px é o ponto em que a legenda ainda se lê; abaixo disso vira uma
   coluna sozinha. */
#view-dashboard .grid-3,
#view-tickets .grid-3{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
@media (min-width:1600px){
  #view-dashboard .grid-3,
  #view-tickets .grid-3{grid-template-columns:repeat(2,1fr)}
}

/* §2.1 — a análise gerencial recolhida ocupa uma linha. */
.analise-box{padding:0;overflow:hidden}
.analise-barra{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border:none;
  background:none;cursor:pointer;text-align:left;font:inherit}
.analise-barra:hover{background:#f7fbfe}
.analise-barra strong{font-size:13.5px}
.analise-selo{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--st-neutro-bg);color:var(--muted)}
.analise-selo.critico{background:var(--st-critico-bg);color:var(--st-critico)}
.analise-selo.atencao{background:var(--st-atencao-bg);color:var(--st-atencao)}
.analise-selo.ok{background:var(--st-sucesso-bg);color:var(--st-sucesso)}
.analise-dica{flex:1;font-size:11.5px;color:var(--muted)}
.analise-seta{transition:transform .18s;color:var(--muted)}
.analise-box .analise-lista{padding:0 16px 16px}
.analise-box.recolhida .analise-lista{display:none}
.analise-box.recolhida .analise-seta{transform:rotate(-90deg)}
@media (max-width:760px){.analise-dica{display:none}}

/* §4 — grupos de indicadores recolhíveis. Fechado sobra título, o KPI
   principal e a seta: é o suficiente para decidir se vale abrir. */
.ind-title{cursor:pointer;user-select:none}
.ind-title .ind-resumo{font-size:12px;font-weight:800;color:var(--primary);text-transform:none;letter-spacing:0}
.ind-title .ind-seta{transition:transform .18s}
.ind-group.recolhido .ind-seta{transform:rotate(-90deg)}
.ind-group.recolhido > *:not(.ind-title){display:none}

/* §3 — gráfico ampliado no duplo clique. */
.grafico-zoom{width:min(1100px,94vw)}
.zoom-foot{justify-content:flex-start;align-items:center;gap:8px}
.zoom-espaco{flex:1}
.zoom-posicao{font-size:11.5px;color:var(--muted);font-weight:700;min-width:56px;text-align:center}
.grafico-zoom .modal-body{min-height:420px}
#zoomGrafico{min-height:380px}

.ind-group{margin-bottom:18px}
.ind-title{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;padding-left:2px;display:flex;align-items:center;gap:10px}
.ind-title::after{content:"";flex:1;height:1px;background:var(--border)}

/* Coluna recolhida: nº da etapa, nome na vertical e quantidade de OS */
.column.collapsed .column-head{justify-content:flex-start;height:auto;padding:14px 8px 16px}
.column.collapsed .counter{margin-top:2px}

@media (max-width:1400px){.kpi-strip,.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.kpi-strip,.kpi-grid{grid-template-columns:repeat(2,1fr)}.tile strong{font-size:22px}}

/* ===== Painel de filtros ===== */
/* Importação: passos numerados, colunas da ficha e a prévia antes de gravar. */
.import-passos{margin:0 0 14px 18px;display:grid;gap:10px;font-size:13px;color:var(--text)}
.import-passos li{padding-left:4px}
.import-passos input[type=file]{display:block;margin-top:6px}
.import-colunas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:12px;border-radius:14px;
  background:#f6fafd;border:1px solid var(--border)}
.import-colunas strong{width:100%;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.import-previa{margin-top:14px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--border)}
.import-numeros{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.import-erros{margin:8px 0 0 18px;font-size:12.5px;color:var(--st-critico);display:grid;gap:4px}
/* Ferramentas de tabela: contagem do que está na tela, exportar e ordenar. */
.tbl-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 6px}
.tbl-tools-hint{font-size:11.5px;color:var(--muted);margin-right:auto}
th.ordenavel{cursor:pointer;user-select:none;position:relative;padding-right:16px}
th.ordenavel:hover{color:var(--primary)}
th.ordenavel::after{content:'⇅';position:absolute;right:5px;opacity:.35;font-size:10px}
th.ordem-asc::after{content:'↑';opacity:1;color:var(--accent)}
th.ordem-desc::after{content:'↓';opacity:1;color:var(--accent)}
.filter-hint{font-size:12.5px;color:var(--muted);padding-bottom:9px}
.filter-hint strong{color:var(--primary);font-size:15px}
.filter-panel{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
/* Grade que se preenche sozinha: sem coluna fixa não sobra buraco quando o
   número de filtros muda nem quando a janela muda de largura. */
.filter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px 12px;align-items:end}
.filter-row.bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.filter-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.filter-field.grow{grid-column:span 2}
.filter-field.wide{grid-column:span 2}
.filter-field label{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.filter-field input,.filter-field select{width:100%;border:1px solid var(--border);border-radius:12px;padding:9px 11px;background:#fff;color:var(--text);font-size:13px;height:38px}
.filter-field .btn{height:38px;width:100%}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:#f7fbfe;
  border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:.15s}
.chip-toggle:hover{background:#eef5fb}
.chip-toggle input{accent-color:var(--primary);margin:0}
.chip-toggle:has(input:checked){background:#e6f6fb;border-color:var(--accent);color:var(--primary)}
.filter-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-count{font-size:12px;color:var(--muted);font-weight:700}
.filter-count.on{color:var(--primary)}

/* ===== Gerenciador de etapas ===== */
.modal-lg{max-width:1000px}
.stage-add{display:grid;grid-template-columns:1fr 54px 240px auto;gap:10px;margin-bottom:16px;
  background:#f7fbfe;border:1px solid var(--border);border-radius:14px;padding:12px}
.stage-add input,.stage-add select{border:1px solid var(--border);border-radius:12px;padding:10px 11px;background:#fff;height:40px}
.stage-add input[type=color]{padding:4px}
.stage-list{display:grid;gap:8px}
.stage-row{display:grid;grid-template-columns:34px 46px 1.4fr 2fr 200px 64px auto;gap:10px;align-items:center;
  border:1px solid var(--border);border-radius:14px;padding:9px 12px;background:#fff}
.stage-row input,.stage-row select{border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px;min-width:0;height:36px}
.stage-row input[type=color]{padding:3px}
.stage-pos{width:26px;height:26px;border-radius:999px;background:var(--primary);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.stage-count{font-size:11px;font-weight:800;color:var(--muted);text-align:center}
.stage-actions{display:flex;gap:5px}
.stage-actions .btn:disabled{opacity:.4;cursor:not-allowed}

/* ===== Planos de manutenção ===== */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.plan-card{background:#fff;border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:18px;
  padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.16s}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.plan-card.gerador{border-top-color:#f97316}.plan-card.pmoc{border-top-color:#1fb4d3}
.plan-card.eletrica{border-top-color:#f0b90b}.plan-card.subestacao{border-top-color:#7c3aed}
.plan-card.instalacao{border-top-color:#2563eb}.plan-card.hidraulica{border-top-color:#0f9fa8}
.plan-card.incendio{border-top-color:#ef4444}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.plan-cat{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.plan-status{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;background:#eef4fa;color:var(--muted)}
.plan-status.ativo{background:#dcfce7;color:var(--st-sucesso)}.plan-status.revisao{background:#fff3c8;color:#a05b00}
.plan-card h4{font-size:15px;margin-bottom:10px;line-height:1.35}
.plan-meta{display:grid;gap:4px;font-size:11.5px;color:var(--muted)}
.plan-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.empty-box{grid-column:1/-1;border:1px dashed var(--border);border-radius:16px;padding:28px;text-align:center;color:var(--muted)}
.empty-box.small{padding:16px;font-size:12px}
.field-hint{font-size:11px;color:var(--muted);margin-top:6px;display:block}

.task-list{display:grid;gap:6px;max-height:340px;overflow:auto;padding-right:4px}
.task-item{display:grid;grid-template-columns:28px 1fr 110px 140px 28px;gap:10px;align-items:center;
  border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#f8fbfe;font-size:12.5px}
.task-item.empty{grid-template-columns:1fr;color:var(--muted);font-style:italic}
.task-seq{width:22px;height:22px;border-radius:6px;background:var(--primary);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.task-freq{font-size:10.5px;font-weight:800;text-transform:uppercase;color:#135185;background:#eaf4ff;border-radius:999px;padding:3px 8px;text-align:center}
.task-owner{font-size:11.5px;color:var(--muted)}
.task-item button{border:none;background:none;color:var(--red);cursor:pointer}
.task-add{display:grid;grid-template-columns:1fr 150px 180px auto;gap:8px}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.photo-item{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.photo-item img{width:100%;height:130px;object-fit:cover;background:#eef4fa}
.photo-item input{border:none;border-top:1px solid var(--border);padding:8px 10px;font-size:12px;width:100%}
.photo-item button{border:none;border-top:1px solid var(--border);background:#fff5f5;color:var(--red);
  padding:7px;font-size:11px;font-weight:800;cursor:pointer}

@media print{.p-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .p-photos img{width:100%;height:150px;object-fit:cover;border:1px solid #d8e2ec;border-radius:8px}
  .p-photos figcaption{font-size:11px;color:#444;margin-top:4px}}

@media (max-width:1400px){
  .stage-row{grid-template-columns:30px 46px 1fr 1fr;grid-auto-rows:auto}
  .stage-row select,.stage-count,.stage-actions{grid-column:span 2}}
@media (max-width:920px){.filter-field.grow,.filter-field.wide{grid-column:span 1}.stage-add{grid-template-columns:1fr}
  .task-item{grid-template-columns:24px 1fr 28px}.task-freq,.task-owner{grid-column:2}.task-add{grid-template-columns:1fr}}

/* ===== Plano → 52 semanas → OS ===== */
.doc-actions{display:flex;gap:6px}
.doc-actions .btn{flex:1}
.gen-panel{border:1px solid var(--border);border-radius:16px;background:#f7fbfe;padding:16px}
.gen-head h4{font-size:14px;margin-bottom:4px}
.gen-head p{font-size:12px;color:var(--muted);margin-bottom:12px}
.gen-form{display:grid;grid-template-columns:120px 140px 1fr auto;gap:10px;align-items:end}
.gen-form .field input,.gen-form .field select{border:1px solid var(--border);border-radius:12px;padding:9px 11px;background:#fff;height:38px}
.gen-form .btn{height:38px}
.gen-preview{margin-top:14px;font-size:12.5px;color:var(--muted)}
.gen-total{font-weight:800;color:var(--primary);font-size:13px;margin-bottom:8px}
.gen-rows{display:grid;gap:6px}
.gen-row{display:grid;grid-template-columns:110px 110px 110px 1fr;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:7px 10px;font-size:12px}
.gen-weeks{color:#8ba0b6;font-size:11px}
.tag.plan{background:#ede9fe;color:#5b21b6}
.tag.latedays{background:#7f1d1d;color:#fff}

@media print{
  .p-freq{margin-bottom:16px;page-break-inside:avoid}
  .p-freq h4{font-size:1em;background:#eef4fa;border-left:3px solid #163455;padding:6px 8px;margin-bottom:6px}
  .p-weeks{font-size:.85em;color:#555;margin-top:5px}
  .p-cal{width:100%;border-collapse:collapse;font-size:.68em}
  .p-cal th,.p-cal td{border:1px solid #cbd5e1;text-align:center;padding:2px}
  .p-cal .p-cal-label{text-align:left;font-weight:700;font-size:9px;padding:3px 5px;white-space:nowrap}
  .p-cal td.on{background:#163455;color:#fff;font-weight:700}
}
@media (max-width:920px){.gen-form{grid-template-columns:1fr}.gen-row{grid-template-columns:1fr 1fr}}

/* ===== Etapa 1 — Chamados, Portal, Programação e Notificações ===== */
.side-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;font-size:10px;
  font-weight:800;padding:1px 6px;min-width:18px;text-align:center}
.side-nav .tab.active .side-badge{background:var(--red)}
.portal-tab{display:none}

.bell{position:relative;padding:11px 13px}
.bell-count{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;border-radius:999px;
  font-size:9.5px;font-weight:800;padding:1px 5px;min-width:16px;text-align:center}
.notif-panel{position:absolute;top:64px;right:22px;width:min(400px,92vw);background:#fff;border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);z-index:150;overflow:hidden}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--border);background:#f8fbfe}
.notif-list{max-height:420px;overflow:auto}
.notif-item{display:grid;gap:2px;padding:11px 14px;border-bottom:1px solid var(--line-2,#eef3f7);cursor:pointer}
.notif-item:hover{background:#f7fbfe}
.notif-item.unread{border-left:3px solid var(--accent);background:#f4fbfd}
.notif-item strong{font-size:13px}
.notif-item span{font-size:12px;color:var(--muted)}
.notif-item small{font-size:10.5px;color:#9db0c4}
.notif-empty{padding:20px;text-align:center;color:var(--muted);font-size:12.5px}

.ticket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.ticket-card{background:#fff;border:1px solid var(--border);border-left:5px solid var(--gray);border-radius:16px;
  padding:14px 16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.16s}
.ticket-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ticket-card.p1{border-left-color:var(--red)}.ticket-card.p2{border-left-color:var(--orange)}
.ticket-card.p3{border-left-color:var(--yellow)}.ticket-card.p4{border-left-color:var(--green)}
.ticket-card.late{background:#fffaf7}
.ticket-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.ticket-card h4{font-size:14.5px;margin-bottom:10px;line-height:1.35}
.tk-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;
  border-radius:999px;background:#eef4fa;color:var(--muted)}
.tk-status.novo{background:var(--st-critico-bg);color:var(--st-critico)}
.tk-status.triagem{background:#fff3c8;color:#a05b00}
.tk-status.validado{background:#dcfce7;color:var(--st-sucesso)}
.tk-status.convertido{background:#e6f6fb;color:#0e7f95}
.tk-status.recusado,.tk-status.cancelado{background:#eef2f7;color:#566577}
.tk-status.concluido{background:#e8faf6;color:#0c8059}

.ticket-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:18px;font-size:11px}
.ticket-flow i{color:var(--muted);font-style:normal}
.flow-step{padding:5px 10px;border-radius:999px;background:#eef4fa;color:var(--muted);font-weight:700}
.flow-step.done{background:#dcfce7;color:var(--st-sucesso)}
.flow-step.current{background:var(--primary);color:#fff}
.flow-step.rejected{background:var(--st-critico-bg);color:var(--st-critico)}
.triage-box{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:16px;padding:14px 16px;background:#f8fbfe}
.triage-box h4{font-size:13px;margin-bottom:12px;color:var(--primary)}
.linked-order{margin-top:12px;padding:10px 12px;background:#e8faf6;border:1px solid #b7ead9;border-radius:12px;font-size:12.5px;color:#0c8059}

.portal-hero{background:linear-gradient(135deg,#13304f,#1d4c77);color:#fff;border-radius:20px;padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.portal-hero small{opacity:.72;font-size:10.5px;font-weight:800;letter-spacing:1.2px}
.portal-hero h3{font-size:22px;margin:5px 0}
.portal-hero p{opacity:.85;font-size:13px;max-width:640px}

.sch-summary{font-size:12.5px;color:var(--muted);padding:9px 0}
.sch-summary strong{color:var(--primary)}
.sch-summary .over{color:var(--red);font-weight:800}
.sch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.sch-day{background:#fff;border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:16px;
  padding:12px;box-shadow:var(--shadow-sm);min-height:150px}
.sch-day.over{border-top-color:var(--red)}
.sch-date{font-weight:800;font-size:13px;display:flex;justify-content:space-between;align-items:baseline}
.sch-date span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.sch-load{position:relative;height:16px;border-radius:999px;background:#eef4fa;overflow:hidden;margin:8px 0 10px}
.sch-load-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}
.sch-day.over .sch-load-fill{background:linear-gradient(90deg,var(--st-critico),#ef4444)}
.sch-load span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--primary)}
.sch-items{display:grid;gap:6px}
.sch-item{border:1px solid var(--border);border-left:3px solid var(--gray);border-radius:10px;padding:7px 9px;
  display:grid;gap:1px;cursor:pointer;background:#f8fbfe}
.sch-item:hover{background:#eef5fb}
.sch-item.p1{border-left-color:var(--red)}.sch-item.p2{border-left-color:var(--orange)}
.sch-item.p3{border-left-color:var(--yellow)}.sch-item.p4{border-left-color:var(--green)}
.sch-item strong{font-size:11px}
.sch-item span{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch-item small{font-size:10px;color:var(--muted)}
.sch-empty{font-size:11.5px;color:#9db0c4;text-align:center;padding:14px 0}

.origin-box{margin-bottom:6px}
.origin-card{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:14px;padding:12px 14px;background:#f8fbfe}
.origin-card span{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.origin-card strong{display:block;font-size:14px;margin:3px 0 5px}
.origin-card p{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.times-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.time-card{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:#fff}
.time-card span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.time-card strong{display:block;font-size:22px;margin-top:4px}
.time-card small{display:block;font-size:10.5px;color:#9db0c4;margin-top:2px}
.history-list{display:grid;gap:6px;max-height:320px;overflow:auto}
.history-item{display:grid;gap:2px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#f8fbfe;font-size:12px}
.history-item.forced{border-left:3px solid var(--orange);background:#fffaf3}
.hist-when{font-size:10.5px;color:var(--muted)}
.hist-move strong{color:var(--primary)}
.hist-who{font-size:11px;color:var(--muted)}
.hist-note{font-size:11.5px;color:var(--ink,#16314b);font-style:italic}

@media (max-width:920px){
  .times-grid{grid-template-columns:repeat(2,1fr)}
  .notif-panel{right:10px;top:58px}
  .portal-hero{flex-direction:column;align-items:flex-start}
}

/* ===== Visão compacta do quadro de OS ===== */
/* Objetivo: caber o máximo de OS na tela. Só número, tipo e cliente. */
.board.compact .column{min-width:230px;max-width:240px}
.board.compact .order-card{padding:9px 11px;cursor:pointer}
.board.compact .order-card > h4{font-size:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board.compact .order-card .order-meta,
.board.compact .order-card .order-actions,
.board.compact .order-card .order-foot,
.board.compact .order-card .progress,
.board.compact .order-card .tags .tag:not(.tipo):not(.prio){display:none}
.board.compact .order-card .order-top{margin-bottom:4px}
.board.compact .order-card .client-mini img{width:18px;height:18px;border-radius:5px}
.board.compact .order-card .client-mini span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board.compact .order-card .tags{margin-top:6px;gap:4px}
.board.compact .order-card .tag{padding:2px 6px;font-size:9px}
/* Cartão expandido volta ao formato completo, sem sair do lugar */
.board.compact .order-card.expanded{padding:14px;box-shadow:var(--shadow);border-color:var(--accent)}
.board.compact .order-card.expanded > h4{white-space:normal;font-size:15px;margin-bottom:8px}
.board.compact .order-card.expanded .order-meta,
.board.compact .order-card.expanded .order-actions,
.board.compact .order-card.expanded .order-foot,
.board.compact .order-card.expanded .progress,
.board.compact .order-card.expanded .tags .tag{display:''}
.board.compact .order-card.expanded .order-meta{display:grid}
.board.compact .order-card.expanded .order-actions,
.board.compact .order-card.expanded .order-foot{display:flex}
.board.compact .order-card.expanded .progress{display:block}
.board.compact .order-card.expanded .tag{padding:4px 9px;font-size:10px}
.board.compact .order-card.expanded .client-mini img{width:28px;height:28px;border-radius:9px}

/* ===== Etapa 2 — Estoque, Compras e Automações ===== */
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.row-alert{background:#fff7f5}
.tbl .below{color:var(--red)}
.crit-A{background:var(--st-critico-bg);color:var(--st-critico);padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800}
.crit-B{background:var(--st-atencao-bg);color:var(--st-atencao);padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800}
.crit-C{background:#eef2f7;color:#566577;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800}
.tk-status.aprovacao,.tk-status.cotacao{background:#fff3c8;color:#a05b00}
.tk-status.pedido,.tk-status.recebimento{background:#e6f6fb;color:#0e7f95}
.tk-status.estoque,.tk-status.finalizado{background:#dcfce7;color:var(--st-sucesso)}
.tk-status.solicitacao{background:var(--st-critico-bg);color:var(--st-critico)}

.automation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.auto-card{background:#fff;border:1px solid var(--border);border-left:5px solid var(--gray);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.auto-card.on{border-left-color:var(--green)}
.auto-card.off{border-left-color:var(--gray);opacity:.72}
.auto-card.err{border-left-color:var(--red)}
.auto-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.auto-module{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);
  background:#eef4fa;padding:3px 8px;border-radius:999px}
.auto-card h4{font-size:14.5px;margin-bottom:10px}
.auto-meta{display:grid;gap:4px;font-size:11.5px;color:var(--muted);margin-bottom:12px}
.auto-meta b{color:var(--primary);font-weight:700;margin-right:4px}
.auto-err{color:var(--red);font-weight:700}
.chip-toggle.mini{padding:3px 9px;font-size:10px}

.task-add-v2{display:grid;grid-template-columns:1fr 150px 140px 90px 160px auto;gap:8px}
.task-item.v2{grid-template-columns:28px 1fr 130px 170px 90px 28px}
.task-item.off{opacity:.55}
.task-item.v2 .task-txt small{display:block;font-size:10px;color:var(--muted)}
@media (max-width:1100px){.task-add-v2{grid-template-columns:1fr 1fr}.task-item.v2{grid-template-columns:24px 1fr 28px}}

/* ================= Etapa 3 — pessoas, ponto, financeiro e BI ================= */
.modal-head small{display:block;font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.modal-head h3{font-size:20px;margin-top:2px}
.hint-line{font-size:12px;color:var(--muted);margin:2px 0 10px;line-height:1.45}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.panel-head h3{margin:0}
.empty-state{padding:18px;border:1px dashed var(--border);border-radius:16px;background:#f8fbfe;color:var(--muted);font-size:13px;text-align:center}
.mt-10{margin-top:10px}

/* Ponto — cartão de batida, pensado para o celular do técnico */
.punch-wrap{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:14px;margin-bottom:14px}
.punch-card{background:linear-gradient(160deg,#163455,#0e2842 60%,#12496f);color:#fff;border-radius:22px;padding:22px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.punch-card small{font-size:10.5px;letter-spacing:1.4px;color:#a8c8e4;font-weight:800}
.punch-card h3{font-size:18px}
.punch-state{font-size:13px;font-weight:800;padding:7px 16px;border-radius:999px;background:#ffffff1f;border:1px solid #ffffff33}
.punch-state.trabalhando{background:#22c55e2e;border-color:#22c55e80;color:#c7f9d9}
.punch-state.intervalo{background:#f0b90b2e;border-color:#f0b90b80;color:#ffe8a3}
.punch-state.encerrada{background:#94a3b82e;border-color:#94a3b880;color:#dbe6f2}
.btn-punch{width:100%;padding:20px;border-radius:20px;border:none;cursor:pointer;font-size:17px;font-weight:900;letter-spacing:1.2px;
  background:linear-gradient(135deg,#1fb4d3,#22d3ee);color:#06263a;box-shadow:0 12px 26px rgba(31,180,211,.35)}
.btn-punch:disabled{background:#ffffff26;color:#a8c8e4;box-shadow:none;cursor:not-allowed}
.punch-next{font-size:12px;color:#bcd9ef}
.punch-marks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;margin-top:4px}
.punch-marks div{background:#ffffff14;border:1px solid #ffffff26;border-radius:14px;padding:9px}
.punch-marks span{display:block;font-size:10px;color:#a8c8e4;font-weight:700}
.punch-marks strong{font-size:16px;font-variant-numeric:tabular-nums}
.punch-geo{color:#cfe4f5;font-size:11.5px}
.punch-note{font-size:10.5px;color:#8fb3d0;line-height:1.4}
.punch-kpis{grid-template-columns:repeat(4,1fr)}
.cost-kpis{grid-template-columns:repeat(6,1fr)}

/* Sub-abas — o mesmo controle segmentado em todas as telas do sistema. */
.sub-tabs{display:inline-flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;padding:4px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.sub-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;
  color:var(--muted);padding:9px 16px;border-radius:10px;font-weight:800;font-size:12.5px;letter-spacing:.2px;
  cursor:pointer;transition:background .16s,color .16s,box-shadow .16s;white-space:nowrap}
.sub-tab:hover{background:#fff;color:var(--text)}
.sub-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sub-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}
.sub-tab .side-badge{margin-left:0;background:var(--red);color:#fff}
.sub-tab.active .side-badge{background:#ffffff2e;color:#fff}
.sub-tab:not(.active) .side-badge{background:#e4ecf4;color:var(--muted)}
.sub-tab.alerta:not(.active) .side-badge{background:var(--red);color:#fff}
.fin-panel{display:none}
.fin-panel.active{display:block}

/* Situações financeiras e de ponto */
.st-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.st-aberto{background:var(--st-info-bg);color:var(--st-info)}
.st-pago,.st-recebido{background:#dcfce7;color:var(--st-sucesso)}
.st-atrasado,.st-vencido{background:var(--st-critico-bg);color:var(--st-critico)}
.st-programado,.st-faturado{background:#fef3c7;color:#92400e}
.st-cancelado{background:var(--st-neutro-bg);color:#64748b}
.st-div{background:var(--st-atencao-bg);color:var(--st-atencao)}
.labor-add{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr auto;gap:8px}
.tbl .money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .neg{color:var(--red)}
.tbl .pos{color:var(--st-sucesso)}

@media (max-width:1100px){.punch-wrap{grid-template-columns:1fr}.cost-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.punch-kpis{grid-template-columns:repeat(2,1fr)}.cost-kpis{grid-template-columns:repeat(2,1fr)}
  .labor-add{grid-template-columns:1fr}.sub-tabs{overflow:auto;flex-wrap:nowrap}}

/* ============ AUGEX ONE — componente único de gráfico ============ */
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.c-grid{stroke:#e6eef7;stroke-width:1}
.c-axisline{stroke:#cfdce9;stroke-width:1}
.c-axis{fill:#7e93a8;font-size:10px;font-weight:700}
.c-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-dot{stroke:#fff;stroke-width:1.5}
.c-bar{transition:opacity .15s}
.c-click{cursor:pointer}
.c-bar.c-click:hover,.c-dot.c-click:hover,.c-arc.c-click:hover{opacity:.75}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11px;color:var(--muted);font-weight:700}
.chart-legend.column{flex-direction:column;gap:7px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* Filtro do ranking: corte por quantidade, no canto do próprio gráfico. */
/* Espelho do quadro no portal: leitura, não operação. */
.portal-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.portal-col{min-width:220px;max-width:260px;flex:1;background:#f6fafd;border:1px solid var(--border);border-radius:14px;padding:10px}
.portal-col header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:7px;
  margin-bottom:8px;border-bottom:3px solid var(--border);font-size:12px;color:var(--primary)}
.portal-col header span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:800}
.portal-col-body{display:grid;gap:8px}
.portal-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:9px 10px}
.portal-card.atrasada{border-left:3px solid var(--red)}
.portal-card strong{font-size:12.5px;color:var(--primary)}
.portal-card p{font-size:12px;margin:2px 0}
.portal-card small{font-size:11px;color:var(--muted);display:block}
.portal-card footer{margin-top:5px;font-size:10.5px;color:var(--muted);font-weight:700}
/* Submenu da ficha do cliente: mesma linguagem das abas do sistema, rolando
   na horizontal quando não couber — nunca quebra em duas linhas desalinhadas. */
/* Barra superior de seções: fica acima do filtro porque a seção escolhida
   define O QUE se está olhando, e o filtro define o recorte disso. Escolher
   primeiro e filtrar depois é a ordem em que se pensa.
   Cola no topo ao rolar — em ficha longa, perder a navegação obriga a subir. */
.cv-nav{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;margin:0 0 10px;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:5}
.cv-tab{flex:0 0 auto;border:1px solid var(--border);background:#f7fbfe;color:var(--muted);
  border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.cv-tab:hover{border-color:var(--primary);color:var(--primary)}
.cv-tab.ativa{background:var(--primary);border-color:var(--primary);color:#fff}
.chip-legenda{align-self:center;font-size:11.5px;font-weight:600;color:var(--muted);margin-right:2px}
.cv-graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:10px 0}
.cv-grafico{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff}
.cv-grafico h4{margin:0 0 4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.p-sub{margin:10px 0 4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.cv-painel{display:grid;gap:12px}
.cv-painel .p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.cv-painel .p-box{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#f8fbfe;font-size:12.5px}
.mb-10{margin-bottom:10px}
/* Reconciliação de plano órfão: um cartão por grupo, com amostra. */
.rec-grupos{display:grid;gap:12px}
.rec-grupo{border:1px solid var(--border);border-left:4px solid var(--orange,#f97316);border-radius:14px;padding:12px 14px;background:#fffdf8}
.rec-grupo h4{font-size:14px;color:var(--primary)}
.rec-grupo header p{font-size:12px;color:var(--muted);margin-top:2px}
.rec-amostra{margin-top:8px;font-size:12px}
.rec-amostra strong{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.rec-amostra ul{margin:4px 0 0 16px;display:grid;gap:2px}
.rec-acoes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.rec-acoes select{border:1px solid var(--border);border-radius:12px;padding:7px 10px;font:inherit;font-size:12.5px;min-width:220px}
/* Justificativa de retorno: o caminho da OS fica à vista antes de confirmar. */
.just-fluxo{display:flex;align-items:center;gap:10px;justify-content:center;font-size:14px;font-weight:800;
  color:var(--primary);background:#f4f9fd;border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:10px}
.just-fluxo b{color:var(--red)}
/* Liberações do portal: um cartão por decisão, com o que está sendo autorizado. */
.liberacao-lista{display:grid;gap:12px}
.liberacao-card{border:1px solid var(--border);border-radius:16px;padding:14px 16px;background:#fff}
.liberacao-card.atrasada{border-left:4px solid var(--red)}
.liberacao-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.liberacao-card header small{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.liberacao-card h4{font-size:14.5px;margin:2px 0}
.liberacao-card header p{font-size:12px;color:var(--muted)}
.liberacao-pergunta{margin-top:8px;font-size:13px;font-weight:700;color:var(--primary)}
.liberacao-materiais{margin-top:8px;padding:8px 10px;border-radius:12px;background:#f6fafd;border:1px solid var(--border);font-size:12px}
.liberacao-materiais strong{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.liberacao-materiais ul{margin:4px 0 0 16px;display:grid;gap:2px}
.liberacao-acoes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.liberacao-acoes input{flex:1;min-width:180px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;font:inherit;font-size:12.5px}
/* Classe ABC do estoque: A é onde está o dinheiro. */
.abc{display:inline-block;min-width:20px;text-align:center;padding:1px 6px;border-radius:6px;font-size:11px;font-weight:800}
.abc-A{background:var(--st-critico-bg);color:var(--st-critico)}
.abc-B{background:#fef3c7;color:#92400e}
.abc-C{background:var(--st-neutro-bg);color:#64748b}
.chart-filtro{display:flex;justify-content:flex-end;gap:2px;margin-bottom:6px}
.chart-filtro .seg-item{font-size:10.5px;padding:3px 8px;border-radius:8px;background:#f2f7fb;color:var(--muted)}
.chart-filtro .seg-item:hover{background:#e1edf7;color:var(--primary)}
.chart-filtro .seg-item.active{background:var(--primary);color:#fff}
.leg-item{cursor:pointer;padding:2px 7px;border-radius:999px;border:1px solid transparent;transition:background .15s}
.leg-item:hover{background:#eef4fa;border-color:var(--border)}
.leg-item.apagada{opacity:.42;text-decoration:line-through}
.leg-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chart-empty{padding:26px;text-align:center;color:var(--muted);font-size:12.5px;
  border:1px dashed var(--border);border-radius:16px;background:#f8fbfe}
/* Sem movimento: a moldura fica, a série é que não aparece. */
.chart-vazio .c-grid{stroke:#eef4fa}
.c-vazio-nota{fill:#a9bccd;font-size:11.5px;font-weight:700;letter-spacing:.3px}
/* Painel de gráfico recolhível: o título é o botão. */
.painel-titulo{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.painel-titulo:hover{color:var(--accent)}
.painel-seta{font-size:11px;opacity:.6;transition:transform .18s}
.card-panel.recolhido .painel-seta{transform:rotate(-90deg)}
.card-panel.recolhido > *:not(.painel-cabecalho){display:none}
.card-panel.recolhido{padding-top:12px;padding-bottom:12px}
.chart-box{min-height:60px}
.chart-donut{width:148px;height:148px;flex:none}
.donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.c-donut-total{font-size:17px;font-weight:800;fill:var(--text)}
.c-donut-cap{font-size:10px;font-weight:700;fill:var(--muted)}

/* Ranking horizontal — agora com escala e valor alinhado */
.hbars{display:grid;gap:9px}
.hbar-row{display:grid;grid-template-columns:150px 1fr 76px;gap:10px;align-items:center}
.hbar-row:hover .hbar-fill{opacity:.82}
.hbar-label{font-size:12px;color:var(--muted);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{height:20px;border-radius:999px;background:#eef4fa;overflow:hidden}
.hbar-fill{height:100%;border-radius:999px;transition:width .3s}
.hbar-value{font-size:12.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* Barra de controles dos gráficos de evolução */
.chart-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.chart-bar select{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff}
.chart-hint{font-size:11.5px;color:var(--muted)}

@media (max-width:760px){.hbar-row{grid-template-columns:110px 1fr 64px}.donut-wrap{justify-content:center}}
.mb-10{margin-bottom:10px}
.team-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kpi-strip.kpis-7{grid-template-columns:repeat(7,1fr)}
@media (max-width:1400px){.kpi-strip.kpis-7{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.kpi-strip.kpis-7{grid-template-columns:repeat(2,1fr)}}
.tile-click{cursor:pointer;transition:transform .12s,box-shadow .12s}
.tile-click:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tile-click::after{content:"ver lista →";position:absolute;right:12px;top:12px;font-size:9.5px;font-weight:800;
  color:var(--muted);opacity:0;transition:opacity .12s}
.tile-click:hover::after{opacity:.85}
.chip-saved{display:inline-flex;align-items:center;gap:7px;background:#eef5fb;border:1px solid var(--border);
  color:var(--primary);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer}
.chip-saved:hover{background:#e2eefa}
.chip-saved button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0}
.saved-row{border-top:1px dashed var(--border);padding-top:10px;margin-top:2px;display:block}
.import-result{margin-top:12px;font-size:12.5px}
.import-result .ok{color:var(--st-sucesso);font-weight:800}
.import-result .err{color:var(--red);font-weight:800}
.import-result ul{margin:8px 0 0 16px;color:var(--muted);line-height:1.6}
.inner-filters{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.card-panel h3 .filter-count{margin-left:8px;font-size:11px;font-weight:700}

/* ===== Alarme visual de gestão (backlog, HxH) ===== */
.alarm-bar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:18px;margin-bottom:14px;
  border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm)}
.alarm-bar:empty{display:none}
.alarm-icon{font-size:24px;line-height:1;flex:none}
.alarm-text{flex:1;min-width:0}
.alarm-text strong{display:block;font-size:15px;margin-bottom:3px}
.alarm-text span{font-size:12.5px;color:var(--muted);line-height:1.45}
.alarm-side{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);font-weight:700;text-align:center}
.alarm-side b{display:block;font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.alarm-bar.verde{border-left:6px solid var(--green);background:#f2fdf6}
.alarm-bar.azul{border-left:6px solid #2563eb;background:#f2f7fe}
.alarm-bar.amarelo{border-left:6px solid var(--yellow);background:#fffcf1}
.alarm-bar.laranja{border-left:6px solid var(--orange);background:#fff8f2}
.alarm-bar.vermelho{border-left:6px solid var(--red);background:#fff5f5}
.alarm-bar.vermelho .alarm-text strong{color:var(--st-critico)}
@media (max-width:920px){.alarm-bar{flex-wrap:wrap}.alarm-side{width:100%;justify-content:space-between}}
.plan-card.alerta{border-color:#f5c8b4}
.plan-warn{color:var(--st-atencao);font-weight:700;font-size:11.5px;margin-top:4px}
.plan-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.plan-card h4{cursor:pointer}
.plan-card h4:hover{color:var(--accent)}

/* §6 — indicador que abre a lista que o formou. */
.tile.clicavel{cursor:pointer;transition:transform .12s,box-shadow .12s}
.tile.clicavel:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(20,52,85,.12)}
.tile.clicavel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile.clicavel::after{content:'↗';position:absolute;top:8px;right:10px;font-size:10px;opacity:.35}
/* Indicador em uso: a tela inteira está mostrando o recorte dele, e isso
   precisa ficar óbvio — senão o usuário estranha a lista "faltando registro". */
/* §67 — a variação em relação ao período anterior. Verde e vermelho seguem o
   que é bom para o indicador, não a direção da seta: falha caindo é verde. */
.kpi-var{font-weight:800}
.kpi-var.bom{color:var(--green)}
.kpi-var.ruim{color:var(--red)}
.tile[title]{cursor:help}
.tile.clicavel[title]{cursor:pointer}

.tile.ativo{border-color:var(--primary);box-shadow:0 0 0 2px rgba(22,52,85,.18)}
.tile.ativo::after{content:'✕';opacity:.8;color:var(--primary)}
.tk-faixa{margin-bottom:10px}
/* Convite para instalar. Aparece uma vez, some ao ser recusado — insistir com
   quem já disse não é o que faz a pessoa desinstalar. */
.convite-instalar{position:fixed;left:12px;right:12px;bottom:12px;z-index:290;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);font-size:12.5px}
.convite-instalar span{flex:1;min-width:200px}

/* Campo sem sinal. A barra fica fixa no rodapé porque o técnico precisa saber
   o tempo todo — e não só quando tenta salvar — que está offline. */
.barra-offline{position:fixed;left:0;right:0;bottom:0;z-index:300;padding:9px 16px;text-align:center;
  font-size:12.5px;font-weight:700;background:var(--st-critico);color:#fff;
  box-shadow:0 -4px 14px rgba(0,0,0,.15)}
.barra-offline.pendente{background:var(--st-atencao-bg);color:var(--st-atencao)}

/* §34 — pendência no sino. O item leva direto à tela onde se resolve: contar
   sem dar caminho é o que faz o usuário fechar o painel e esquecer. */
.notif-sub{font-size:11px;color:var(--muted)}
.pend-item{display:flex;gap:10px;align-items:center;width:100%;text-align:left;font:inherit;
  border:none;border-bottom:1px solid var(--st-neutro-bg);background:none;padding:9px 14px;cursor:pointer}
.pend-item:hover{background:#f7fbfe}
.pend-qtd{flex:0 0 30px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;background:var(--st-atencao-bg);color:var(--st-atencao)}
.pend-item.critico .pend-qtd{background:var(--st-critico-bg);color:var(--st-critico)}
.pend-texto{display:flex;flex-direction:column;line-height:1.3}
.pend-texto strong{font-size:12.5px}
.pend-texto small{font-size:11px;color:var(--muted)}
.bell-count.pendencia{background:var(--st-critico);color:#fff}

/* §19 — o fluxo recomendado de cadastro. O passo já cumprido fica verde e com
   ✓; nenhum bloqueia o outro, porque a ordem é orientação e não regra. */
.fluxo-cadastro{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.fluxo-passo{display:flex;gap:10px;align-items:flex-start}
.fluxo-num{flex:0 0 24px;height:24px;border-radius:50%;background:var(--st-neutro-bg);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:8px}
.fluxo-passo.feito .fluxo-num{background:var(--st-sucesso-bg);color:var(--st-sucesso)}
.fluxo-abrir{flex:1;text-align:left;border:1px solid var(--border);border-radius:12px;padding:8px 10px;
  background:#f8fbfe;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.fluxo-abrir:hover{border-color:var(--accent)}
.fluxo-abrir strong{font-size:12.5px}
.fluxo-abrir small{font-size:11px;color:var(--muted);line-height:1.35}
.fluxo-conta{font-size:10.5px;font-weight:800;color:var(--primary);margin-top:2px}
.fluxo-passo.feito .fluxo-conta{color:var(--st-sucesso)}

/* §15 — calendário da programação. A cor da célula é o volume; o detalhe abre
   no clique, para o mês continuar legível justamente quando está cheio. */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal-nav strong{font-size:15px;text-transform:capitalize}
.cal-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-semana span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);text-align:center}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dia{min-height:82px;border:1px solid var(--border);border-radius:12px;background:#fff;
  padding:7px 8px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  font:inherit;cursor:pointer;text-align:left}
.cal-dia:hover{border-color:var(--accent)}
.cal-dia.vazio{background:transparent;border:none;cursor:default;pointer-events:none}
.cal-dia[data-vazio]{cursor:default;color:var(--muted)}
.cal-dia.hoje{outline:2px solid var(--accent);outline-offset:-2px}
.cal-num{font-size:12.5px;font-weight:800;color:var(--primary)}
.cal-qtd{font-size:11.5px;font-weight:700}
.cal-horas{font-size:10.5px;color:var(--muted)}
.cal-atraso{font-size:10.5px;font-weight:800;color:var(--st-critico)}
.cal-dia.ok{background:var(--st-sucesso-bg)}
.cal-dia.cheio{background:var(--st-atencao-bg)}
.cal-dia.estouro{background:var(--st-critico-bg)}
.cal-dia.atraso{background:var(--st-critico-bg);border-color:var(--st-critico)}
.cal-legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.cal-bolinha{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;
  border:1px solid var(--border);vertical-align:middle}
.cal-bolinha.ok{background:var(--st-sucesso-bg)}
.cal-bolinha.cheio{background:var(--st-atencao-bg)}
.cal-bolinha.estouro{background:var(--st-critico-bg)}
.cal-bolinha.atraso{background:var(--st-critico-bg);border-color:var(--st-critico)}
@media (max-width:760px){.cal-dia{min-height:62px}.cal-horas,.cal-atraso{display:none}}

/* §36 — a célula da matriz de competência. Vermelho é lacuna: exigido e não
   atendido. É a única cor que pede ação. */
.mtz{text-align:center;font-weight:800;font-size:13px;color:var(--muted)}
.mtz.ok{background:#eafaf1;color:var(--st-sucesso)}
.mtz.aviso{background:#fff7e6;color:var(--st-atencao)}
.mtz.lacuna{background:var(--st-critico-bg);color:var(--st-critico)}

/* §33 — situação do elemento filtrante. As cores acompanham a urgência, e
   "aceito" não vira verde: continua vencido, só saiu da fila de ação. */
.st-pill.ok{background:var(--st-sucesso-bg);color:var(--st-sucesso)}
.st-pill.proximo{background:#fef3c7;color:#92400e}
.st-pill.vencendo{background:var(--st-atencao-bg);color:var(--st-atencao)}
.st-pill.vencido{background:var(--st-critico-bg);color:var(--st-critico)}
.st-pill.critico{background:var(--st-critico);color:#fff}
.st-pill\.sem-previsao,.st-pill[class~="sem-previsao"]{background:var(--st-neutro-bg);color:var(--muted)}

/* Documento comercial — o padrão fiscal que a AUGEX já emite.
   Marca à esquerda, dados da empresa à direita, tabela com cabeçalho em
   destaque. Vive só na impressão, então não disputa espaço com a tela. */
.doc{font-size:11px;color:#1a1a1a;line-height:1.45}
.doc-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}
.doc-marca{max-height:56px;max-width:200px;object-fit:contain}
.doc-empresa{text-align:right;display:flex;flex-direction:column;gap:1px;font-size:10px}
.doc-empresa strong{font-size:13px;margin-bottom:3px}
.doc-empresa .doc-espaco{margin-top:8px}
.doc-titulo{font-size:19px;font-weight:800;margin:0 0 2px}
.doc-secao{font-size:14px;font-weight:800;margin:18px 0 8px}
.doc-secao small{font-weight:400;font-size:12px}
.doc-cliente-nome{font-size:12px;margin-bottom:8px}
.doc-cliente{display:flex;gap:36px;font-size:10px;margin-bottom:4px}
.doc-cliente div{display:flex;flex-direction:column;gap:2px}
.doc-cliente .doc-forte{font-weight:700}
.doc-tbl{width:100%;border-collapse:collapse;font-size:10px}
.doc-tbl th{background:#4bc4c9;color:#fff;padding:4px 7px;text-align:left;font-weight:700}
.doc-tbl th.num,.doc-tbl td.num{text-align:right}
.doc-tbl td{padding:4px 7px;border-bottom:1px solid #e8eef2}
.doc-tbl .doc-total td{background:#eef8f9;font-weight:700;border-bottom:none}
.doc-parcelas{border-collapse:collapse;font-size:10px}
.doc-parcelas th{background:#eef8f9;padding:4px 10px;text-align:right;font-weight:700;white-space:nowrap}
.doc-parcelas td{padding:4px 12px;text-align:right;border-bottom:1px solid #e8eef2}
.doc-obs p{font-size:10px;margin-bottom:2px}
.doc-rodape{margin-top:44px;text-align:center;color:#8a97a5;font-size:9px}
.doc-rodape p{margin:1px 0}

/* §16 — kanban do faturamento. A coluna mostra o valor represado nela: em
   cobrança, R$ 80 mil parados dizem mais que "3 faturas". */
.ff-col .column-head h3{font-size:12px}
.ff-valor{font-size:11.5px;color:var(--muted);font-weight:700}
.ff-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  cursor:grab;box-shadow:var(--shadow-sm)}
.ff-card.arrastando{opacity:.5;cursor:grabbing}
.ff-card.parada{border-left:4px solid var(--orange)}
.ff-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.ff-top span{font-weight:800;color:var(--primary)}
.ff-cliente{font-size:11.5px;color:var(--muted);margin-top:3px}
.ff-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--muted)}
.ff-decisao{margin-top:6px;font-size:11px;background:#eef4fa;border-radius:8px;padding:4px 7px;color:var(--primary)}
.ff-vazio{text-align:center;color:var(--muted);font-size:12px;padding:12px 0}

/* §14 — arrastar etapa para reordenar. O alvo mostra onde a etapa vai cair;
   sem isso a pessoa solta no escuro e descobre o resultado depois. */
.stage-row[draggable="true"]{cursor:grab}
.stage-row.arrastando{opacity:.45;cursor:grabbing}
.stage-row.alvo{outline:2px dashed var(--accent);outline-offset:2px;background:#f2fbfe}
.stage-pos{cursor:grab;user-select:none}

/* Identidade visual: a prévia mostra a marca sobre o fundo em que ela vai
   aparecer, para quem troca ver o resultado antes de salvar. */
.cv-marca{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.cv-marca .identidade-previa{flex:0 0 240px;margin-bottom:0}
.identidade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.identidade-card{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:#f8fbfe}
.identidade-card h4{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:8px}
.identidade-card select{width:100%;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12.5px}
.identidade-previa{background:#fff;border:1px dashed var(--border);border-radius:12px;padding:14px;
  display:flex;align-items:center;justify-content:center;min-height:96px;margin-bottom:10px}
.identidade-previa img{max-height:70px;max-width:100%;object-fit:contain}
.identidade-previa img.sem-marca{opacity:.35}
.identidade-acoes{display:flex;gap:8px;flex-wrap:wrap}

/* Roteiro do dia. A numeração à esquerda é o fio da sequência: o técnico lê de
   cima para baixo e sabe onde para em seguida, sem contar cartão. */
.roteiro{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rt-parada{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--border);
  border-left:5px solid var(--gray);border-radius:16px;padding:12px 14px}
.rt-parada.prio-p1{border-left-color:var(--red)}
.rt-parada.prio-p2{border-left-color:var(--orange)}
.rt-parada.agora{background:#f4fbff;border-color:var(--accent)}
.rt-num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.rt-corpo{flex:1;min-width:0}
.rt-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.rt-topo strong{font-size:13.5px}
.rt-hora{background:#eef4fa;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:800;color:var(--primary)}
.rt-hora.livre{background:transparent;color:var(--muted);font-weight:600;padding:0}
.rt-agora{background:var(--st-sucesso-bg);color:var(--st-sucesso);border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:800;text-transform:uppercase}
.rt-linha{font-size:12px;color:var(--muted);margin-top:2px}
.rt-os{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.rt-os li{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
  padding:6px 8px;background:#f8fbfe;border-radius:10px}
.rt-os small{color:var(--muted);font-size:11.5px}
.rt-os .btn{margin-left:auto}
.rt-data{border:1px solid var(--border);border-radius:12px;padding:8px 10px;font-size:12.5px}
.rt-excede{color:var(--red);font-weight:700}
@media (max-width:600px){.rt-os li{align-items:flex-start}.rt-os .btn{margin-left:0}}

/* Cobertura do contrato: uma linha por unidade, com o CNPJ visível — é por ele
   que se confere se a loja certa está sendo coberta. */
.cobertura-lista{display:grid;gap:4px;max-height:340px;overflow-y:auto}
.cobertura-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
  border-radius:10px;background:#f8fbfe;font-size:12.5px;cursor:pointer}
.cobertura-item:hover{border-color:var(--primary)}
.cobertura-nome{flex:1;display:flex;flex-direction:column;line-height:1.3}
.cobertura-nome small{color:var(--muted);font-size:11px}
.cobertura-sla{width:78px;padding:4px 6px;border:1px solid var(--border);border-radius:8px;font-size:11.5px}

/* §47 — a cadeia da compra. O elo que ainda não aconteceu fica apagado, não
   escondido: sumir com ele esconderia justamente o que falta fazer. */
.cadeia{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cadeia-elo{display:flex;gap:10px;align-items:flex-start;padding:8px 2px;border-left:2px solid var(--border);
  margin-left:10px;padding-left:14px;position:relative}
.cadeia-elo:last-child{border-left-color:transparent}
.cadeia-marca{position:absolute;left:-9px;top:8px;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;background:var(--st-neutro-bg);color:var(--muted)}
.cadeia-elo.feito{border-left-color:var(--green)}
.cadeia-elo.feito .cadeia-marca{background:var(--green);color:#fff}
.cadeia-elo.pendente{opacity:.55}
.cadeia-elo strong{font-size:12.5px}
.cadeia-elo small{color:var(--muted);font-size:11px;margin-left:6px}
.cadeia-id{background:#eef4fa;border:1px solid var(--border);border-radius:999px;
  padding:1px 8px;font-size:11px;margin-left:6px;color:var(--primary)}
.cadeia-detalhe{font-size:11.5px;color:var(--muted);margin-top:2px}

/* §43 — automação minimizada: sobra o essencial e o cartão vira uma linha. */
.auto-top-acoes{display:flex;align-items:center;gap:6px}
.auto-resumo{display:none;font-size:11.5px;color:var(--muted);margin-top:2px}
.auto-card.minimizada .auto-meta,
.auto-card.minimizada .order-actions{display:none}
.auto-card.minimizada .auto-resumo{display:block}
.auto-card.minimizada{padding-bottom:10px}

/* Seções da Gestão de Pessoas: uma por vez, como na ficha do cliente. */
.pe-painel{display:none}
.pe-painel.ativo{display:block}
.tile{position:relative}
/* §9 — multisseleção: o que está escolhido fica à vista, sem Ctrl+clique. */
.multi{position:relative;width:100%}
.multi-botao{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;
  border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff;font:inherit;
  font-size:12.5px;color:var(--text);cursor:pointer;text-align:left}
.multi-botao:hover{border-color:var(--accent)}
.multi.ativo .multi-botao{border-color:var(--primary);background:#f2f8fd;font-weight:700;color:var(--primary)}
.multi-resumo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi-lista{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow:auto;
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 28px rgba(20,52,85,.16);padding:6px}
.multi-acoes{display:flex;gap:6px;padding:2px 4px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.multi-acoes button{flex:1;border:1px solid var(--border);background:#f6fafd;border-radius:8px;padding:4px;
  font:inherit;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer}
.multi-acoes button:hover{background:#e1edf7;color:var(--primary)}
.multi-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;font-size:12.5px;cursor:pointer}
.multi-item:hover{background:#f2f8fd}
.multi-vazio{padding:10px;font-size:12px;color:var(--muted);text-align:center}
/* §11 — a faixa que diz quais filtros estão valendo. */
.filtros-aplicados{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--border);font-size:11.5px;color:var(--muted)}
.filtros-aplicados strong{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px}
.filtro-chip{background:#eef4fa;border:1px solid var(--border);border-radius:999px;padding:2px 9px;color:var(--primary)}
.filtro-chip b{font-weight:800}
/* §21 — cabeçalho enxuto: sem título repetido, a fileira de ações fica na
   mesma linha da dica e devolve altura para os indicadores. */
.page-head.compacta{padding-top:6px;padding-bottom:6px;align-items:center}
.page-head-hint{font-size:12px;color:var(--muted)}
/* Painel de Controle compacto: indicador ocupa menos altura e sobra espaço
   para o gráfico, que é onde a análise realmente acontece. */
.kpi-grid.compact{grid-template-columns:repeat(6,1fr);gap:10px}
.kpi-grid.compact .tile{padding:10px 12px;border-radius:14px}
.kpi-grid.compact .tile span{font-size:10px;margin-bottom:3px;line-height:1.25}
.kpi-grid.compact .tile strong{font-size:19px;letter-spacing:-.3px}
.kpi-grid.compact .tile small{font-size:9.5px;margin-top:3px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi-grid.compact .tile::before{width:3px}
@media (max-width:1400px){.kpi-grid.compact{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.kpi-grid.compact{grid-template-columns:repeat(2,1fr)}}

/* ===== Filtros recolhidos: área útil de volta para o trabalho ===== */
.filter-toggle-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.btn-filter{display:inline-flex;align-items:center;gap:8px;font-weight:800;border-radius:14px}
.btn-filter .ico{font-size:14px}
.btn-filter.on{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-filter.aberto{box-shadow:inset 0 0 0 2px var(--accent)}
.filter-badge{background:var(--red);color:#fff;border-radius:999px;font-size:10px;font-weight:800;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.filter-summary{font-size:12px;color:var(--muted);font-weight:700}
.filter-panel.collapsed{display:none}
.filter-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
@media (max-width:920px){.filter-foot{flex-wrap:wrap}.filter-foot .btn{flex:1}}

/* ===== Fluxo: backlog, follow-up, árvore e campo ===== */
.btn-link{background:none;border:none;color:var(--accent);font-weight:800;cursor:pointer;padding:0;font-size:13px}
.btn-link:hover{text-decoration:underline}
.inline-select{border:1px solid var(--border);border-radius:12px;padding:7px 10px;background:#fff;font-size:12.5px}
.dias-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800}
.dias-pill.verde{background:#dcfce7;color:var(--st-sucesso)}
.dias-pill.azul{background:var(--st-info-bg);color:var(--st-info)}
.dias-pill.amarelo{background:#fef3c7;color:#92400e}
.dias-pill.laranja{background:var(--st-atencao-bg);color:var(--st-atencao)}
.dias-pill.vermelho{background:var(--st-critico-bg);color:var(--st-critico)}

.tree-wrap{border-left:2px dashed var(--border);padding-left:6px;margin-top:10px}
.tree-node{padding:4px 0}
.tree-node.atual > .tree-line{background:#eef7fd;border-radius:10px}
.tree-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;font-size:13px}
.tree-line.sub{font-size:12px;color:var(--muted)}
.tree-line.origem{background:#f7fbfe;border:1px solid var(--border);border-radius:12px;margin-bottom:6px}
.tree-title{color:var(--muted);flex:1;min-width:120px}
.tree-tag{font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:3px 7px;border-radius:6px;color:#fff}
.tree-tag.os{background:var(--primary)}.tree-tag.bl{background:var(--red)}
.tree-tag.fu{background:var(--orange)}.tree-tag.plano{background:var(--purple)}.tree-tag.prog{background:var(--teal)}
.hist-item{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:#f8fbfe}
.hist-item strong{font-size:12px}.hist-item span{font-size:12px;color:var(--muted)}
.hist-item small{font-size:10.5px;color:#8ba0b6}

/* Campo do técnico — pensado para o celular */
.field-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(160deg,#163455,#0e2842);color:#fff;border-radius:22px;padding:20px;margin-bottom:14px}
.field-hero small{font-size:10.5px;letter-spacing:1.4px;color:#a8c8e4;font-weight:800}
.field-hero h3{font-size:20px;margin:4px 0}
.field-hero p{font-size:13px;color:#cfe4f5}
.field-quick{display:flex;gap:8px;flex-wrap:wrap}
.field-quick .btn-punch{width:auto;padding:12px 18px;font-size:13px;border-radius:14px}
.field-tabs{overflow:auto;flex-wrap:nowrap}
.field-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.field-card{background:#fff;border:1px solid var(--border);border-left:5px solid var(--accent);
  border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}
.field-card.atrasada{border-left-color:var(--red)}
.field-card.critica{border-left-color:var(--orange)}
.field-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.field-card h4{font-size:15px;margin-bottom:8px}
.field-meta{display:grid;gap:4px;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.field-actions{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.field-actions .btn{flex:1;min-width:110px}
@media (max-width:760px){.field-list{grid-template-columns:1fr}.field-hero{flex-direction:column;align-items:flex-start}
  .field-quick{width:100%}.field-quick .btn{flex:1}}

/* ===== Portal do cliente e painel do técnico ===== */
.portal-panel{display:block}
.portal-panel.hidden{display:none!important}
.pcf-user{align-items:flex-start}
.pcf-user > div{width:100%}
.pcf-role{width:100%;margin:8px 0;border:1px solid var(--border);border-radius:12px;padding:8px 10px;font-size:12.5px}
.pcf-units{display:flex;flex-wrap:wrap;gap:6px}
.pcf-units .chip-toggle{font-size:11.5px;padding:6px 10px}
.field-kpis{grid-template-columns:repeat(6,1fr)}
@media (max-width:1400px){.field-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.field-kpis{grid-template-columns:repeat(2,1fr)}}
.col-del{border:none;background:#ffffff26;color:#fff;border-radius:8px;padding:2px 7px;cursor:pointer;font-size:12px;margin-left:6px}
.col-del:hover{background:var(--red)}
.finish-box{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:16px;padding:16px;background:#f8fbfe}
.finish-box h4{font-size:14px;margin-bottom:4px}
.finish-box p{font-size:12.5px;color:var(--muted);line-height:1.45;max-width:520px}
.finish-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== Aba Cadastro — central de dados mestres ===== */
.cad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cad-cat{background:#fff;border:1px solid var(--border);border-radius:20px;padding:16px;box-shadow:var(--shadow-sm)}
.cad-cat h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px}
.cad-ico{font-size:16px}
.cad-items{display:grid;gap:6px}
.cad-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#f8fbfe;
  border:1px solid var(--border);border-radius:14px;padding:10px 12px;cursor:pointer;font-size:13px;font-weight:700}
.cad-item:hover{background:#eef5fb;border-color:var(--accent)}
.cad-nome{flex:1}
.cad-total{background:var(--primary);color:#fff;border-radius:999px;padding:2px 10px;font-size:11.5px}
.cad-total small{opacity:.7;font-weight:600}
.cad-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cad-bar h3{font-size:17px}
.cad-bar-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.cad-bar-actions input[type="text"]{border:1px solid var(--border);border-radius:12px;padding:8px 12px;min-width:200px}
.cad-split{grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
.cad-ficha{position:sticky;top:16px;max-height:calc(100vh - 40px);overflow:auto}
/* A marca do cliente ou do fornecedor abre a ficha: identifica antes de ler. */
.ficha-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ficha-logo{height:46px;max-width:150px;object-fit:contain;border:1px solid var(--border);
  border-radius:10px;background:#fff;padding:4px;flex:none}
.ficha-head small{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.ficha-head h3{font-size:18px;margin:2px 0}
.ficha-head p{font-size:12px;color:var(--muted)}
.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ficha-grid div{background:#f8fbfe;border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.ficha-grid span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.4px}
.ficha-grid strong{font-size:12.5px;word-break:break-word}
.ficha-links{display:flex;flex-wrap:wrap;gap:6px}
.ficha-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.tbl tr.row-off{opacity:.55}
@media (max-width:1200px){.cad-split{grid-template-columns:1fr}.cad-ficha{position:static;max-height:none}}
@media (max-width:760px){.ficha-grid{grid-template-columns:1fr}.cad-bar-actions{width:100%;margin-left:0}}

/* ===== Seletor TOP N e análise gerencial ===== */
/* Mesmo desenho da segmentação de dados dos filtros: dois controles com a
   mesma função não podem ter aparências diferentes. */
.top-switch{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:#eef4fa;border:1px solid var(--border)}
.top-opt{border:none;background:transparent;color:var(--muted);padding:5px 11px;font-size:12px;font-weight:700;border-radius:9px;cursor:pointer;white-space:nowrap}
.top-opt:hover{background:#e1edf7;color:var(--primary)}
.top-opt.active{background:var(--primary);color:#fff}

/* Achados lado a lado em tela larga. Um achado ocupando 1900px deixava três
   frases curtas perdidas na horizontal — muito espaço, pouca informação. Em
   coluna de ~420px o texto tem largura de leitura e cabem dois ou três por
   linha, que é o que o gestor quer comparar de relance. */
.analise-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:10px;align-items:start}
.analise-item{border:1px solid var(--border);border-left:5px solid var(--gray);border-radius:16px;padding:14px;background:#fff}
.analise-item.critico{border-left-color:var(--red);background:#fffafa}
.analise-item.atencao{border-left-color:var(--orange);background:#fffdf7}
.analise-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.analise-top strong{font-size:14px;flex:1;min-width:140px}
.analise-valor{font-size:11.5px;color:var(--primary);font-weight:800;background:#eef4fa;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sev-pill{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.sev-pill.critico{background:var(--st-critico-bg);color:var(--st-critico)}
.sev-pill.atencao{background:var(--st-atencao-bg);color:var(--st-atencao)}
.sev-pill.informativo{background:var(--st-info-bg);color:var(--st-info)}
/* Dentro do cartão o texto empilha: problema, impacto e a ação. A ação fica
   destacada porque é a única linha que pede providência — as outras duas
   explicam por que ela é necessária. */
.analise-corpo{display:grid;gap:8px}
.analise-corpo .acao{background:#f4f9fd;border:1px dashed var(--border);border-radius:10px;padding:8px 10px}
.analise-corpo span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:3px}
.analise-corpo p{font-size:12.5px;line-height:1.45}
.analise-item .btn{margin-top:10px}
@media (max-width:900px){.analise-lista{grid-template-columns:1fr}}

/* ===== Formulário de cadastro e matriz de autorizações ===== */
.cf-ajuda{display:block;font-size:10.5px;color:var(--muted);margin-top:4px}
.perm-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.perm-user{display:grid;grid-template-columns:repeat(4,auto);gap:18px}
.perm-user span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.4px}
.perm-user strong{font-size:13px}
.perm-user .pos{color:var(--st-sucesso)}.perm-user .neg{color:var(--red)}
.perm-acoes{display:flex;gap:6px;flex-wrap:wrap}
.perm-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.perm-grupo{border:1px solid var(--border);border-radius:16px;padding:14px;background:#f8fbfe}
.perm-grupo h4{font-size:13px;margin-bottom:10px;color:var(--primary)}
.perm-itens{display:grid;gap:6px}
.perm-item{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:8px 10px;cursor:pointer}
.perm-item:hover{border-color:var(--accent)}
.perm-item.excecao{border-color:var(--orange);background:#fffdf7}
.perm-item.sensivel span{font-weight:700}
.perm-item input{margin-top:2px}
.perm-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 6px;
  border-radius:6px;background:var(--st-neutro-bg);color:var(--muted);margin-left:6px}
.perm-tag.exc{background:var(--st-atencao-bg);color:var(--st-atencao)}
@media (max-width:760px){.perm-user{grid-template-columns:1fr 1fr}.perm-grupos{grid-template-columns:1fr}}
.bi-panel.hidden{display:none}
.c-corte{stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4;opacity:.7}
.c-corte-txt{fill:var(--red);font-size:10px;font-weight:800}
.pareto-vitais{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-left:4px solid var(--red);
  border-radius:12px;background:#fffafa;font-size:12.5px;line-height:1.5}
.cf-imagem{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cf-preview{height:44px;max-width:160px;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:#fff;padding:4px}
.cf-preview.vazio{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-size:11px;color:var(--muted)}

/* ===== Lixeira e seleção em lote ===== */
.lixeira-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(160deg,#163455,#0e2842);color:#fff;border-radius:22px;padding:20px;margin-bottom:14px}
.lixeira-hero small{font-size:10.5px;letter-spacing:1.4px;color:#a8c8e4;font-weight:800}
.lixeira-hero h3{font-size:20px;margin:4px 0}
.lixeira-hero p{font-size:12.5px;color:#cfe4f5;max-width:640px;line-height:1.5}
.lixeira-resumo{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lx-card{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:10px 14px;cursor:pointer;font-size:12.5px;font-weight:700}
.lx-card:hover{border-color:var(--accent)}
.lx-card.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.lx-card strong{background:#eef5fb;color:var(--primary);border-radius:999px;padding:2px 9px;font-size:12px}
.lx-card.on strong{background:#ffffff26;color:#fff}
.lx-ico{font-size:15px}

.selecao-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff7f5;border:1px solid #f4c7bd;border-left:5px solid var(--red);border-radius:16px;
  padding:12px 16px;margin-bottom:12px;font-size:13px;font-weight:700;color:#8a2c1a}
.selecao-acoes{display:flex;gap:8px;flex-wrap:wrap}
.column.em-selecao{outline:2px dashed var(--red);outline-offset:3px}
.order-card.selecionavel{cursor:pointer}
.order-card.selecionavel::before{content:"☐";position:absolute;top:10px;right:10px;font-size:16px;color:var(--muted)}
.order-card.selecionada{background:#fff1ee;border-color:var(--red)}
.order-card.selecionada::before{content:"☑";color:var(--red)}

/* Service desk do chamado — semáforo, conversa, linha do tempo e mapa de calor. */
.sla-bar{display:flex;flex-wrap:wrap;gap:6px 20px;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:13px;border:1px solid var(--border);background:var(--panel-2)}
.sla-bar.ok{background:#effaf3;border-color:#b8e6c8}
.sla-bar.warn{background:#fff8e6;border-color:#f3d98b}
.sla-bar.bad{background:#fff1ee;border-color:#f5b8ae}
.sla-bar .muted-note{flex-basis:100%}
.muted-note{color:var(--muted);font-size:12px}
.tk-comments{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.tk-comment{border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--panel)}
.tk-comment.interna{background:#fffaf0;border-color:#f3d98b}
.tk-comment p{margin:4px 0 0;font-size:13px;white-space:pre-wrap}
.tk-comment-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.tk-comment-head strong{color:var(--text);font-size:13px}
.tk-timeline{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto}
.tk-tl-item{display:flex;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--border)}
.tk-tl-when{color:var(--muted);white-space:nowrap;min-width:120px}
.tk-status-time{font-size:12px;color:var(--muted)}
.heat-table{width:100%;border-collapse:collapse;font-size:12px}
.heat-table th{padding:5px 6px;color:var(--muted);font-weight:600;text-align:center;font-size:11px}
.heat-table th:first-child{text-align:left;white-space:nowrap}
.heat-table td{padding:8px 4px;text-align:center;min-width:34px;font-variant-numeric:tabular-nums;font-weight:700;border:2px solid #fff;border-radius:7px;color:#0f2b40}
.tk-panel{display:none}
.tk-panel.active{display:block}
.tag.sem-verde{background:#dcfce7;color:var(--st-sucesso)}
.tag.sem-amarelo{background:#fff3c8;color:#a05b00}
.tag.sem-vermelho{background:var(--red);color:#fff}
.pcm-panel{display:none}
.pcm-panel.active{display:block}

/* Cabeçalho de tela: o que é a tela, e o que se faz nela. Os botões de ação
   ficam aqui — o painel de filtros abaixo tem só filtro. */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.page-head-text h3{font-size:19px;letter-spacing:-.2px;color:var(--text)}
.page-head-text p{margin-top:3px;font-size:12.5px;color:var(--muted);max-width:70ch}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-actions .btn{white-space:nowrap}
@media (max-width:920px){.page-head{align-items:flex-start}.page-actions{width:100%}.page-actions .btn{flex:1}}
.bl-panel{display:none}
.bl-panel.active{display:block}

/* ============================================================
   Padrão de tela — o mesmo comportamento em todos os módulos.
   ============================================================ */

/* Avisos: faixa flutuante no canto, sem travar a tela. */
.avisos{position:fixed;right:18px;bottom:18px;z-index:1200;display:flex;flex-direction:column;gap:10px;
  max-width:min(420px,calc(100vw - 36px))}
.aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--panel);
  border:1px solid var(--border);box-shadow:0 10px 30px #0f294612;font-size:13px;color:var(--text);
  animation:avisoEntra .18s ease-out}
.aviso-icone{font-size:15px;line-height:1.3}
.aviso-texto{flex:1;line-height:1.45}
.aviso-fechar{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px;
  border-radius:6px;min-width:24px;min-height:24px}
.aviso-fechar:hover{color:var(--text);background:#0f294610}
.aviso-ok{border-left:4px solid var(--green)}
.aviso-alerta{border-left:4px solid var(--yellow)}
.aviso-erro{border-left:4px solid var(--red)}
.aviso.saindo{opacity:0;transform:translateY(6px);transition:.2s}
@keyframes avisoEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:920px){.avisos{left:12px;right:12px;bottom:12px;max-width:none}}

/* Espera: barra fina no topo enquanto o servidor responde. */
body.carregando::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:1300;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));background-size:200% 100%;
  animation:carregaBarra 1s linear infinite}
@keyframes carregaBarra{from{background-position:0 0}to{background-position:200% 0}}

/* Estado vazio: um só componente para todo o sistema. */
.empty-state,.empty-box{grid-column:1/-1;padding:24px;border:1px dashed var(--border);border-radius:16px;
  background:var(--panel-2);color:var(--muted);font-size:13px;text-align:center;line-height:1.55}
.empty-state.small,.empty-box.small{padding:14px;font-size:12px}
.empty-acao{display:block;margin-top:6px;font-size:12px;color:var(--muted);opacity:.85}

/* Alvo de toque: o técnico usa isto de luva, no celular, em pé. */
.btn{min-height:38px}
.btn-mini{min-height:34px}
@media (max-width:920px){
  .btn,.sub-tab,.tab{min-height:44px}
  .btn-mini{min-height:40px;font-size:13px}
  .field-list .btn{flex:1}
  input,select,textarea{font-size:16px} /* evita o zoom automático do iOS */
}

/* Tabela larga rola dentro do próprio cartão, sem empurrar a página. O
   recorte vale só para o painel que tem tabela — cartão com gráfico ou menu
   suspenso continua sem corte. */
.card-panel:has(> .tbl),.card-panel:has(> table),.table-wrap{overflow-x:auto}
.card-panel > .tbl,.table-wrap > .tbl{min-width:520px}

/* Foco visível em tudo que recebe teclado — navegação sem mouse. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Botão de segurança — escolher o que limpar.
   Cada grupo ocupa uma linha inteira porque o texto que explica o que ele
   arrasta é o que evita o clique errado; espremer em colunas o esconderia. */
.seg-grupos{display:grid;gap:8px;margin:10px 0}
.seg-grupo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#f8fbfe;cursor:pointer}
.seg-grupo:hover{background:#eef5fb}
.seg-grupo input{margin-top:3px}
.seg-grupo strong{display:block;font-size:13px}
.seg-grupo small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.seg-grupo .seg-peso{margin-left:auto;font-weight:800;color:var(--primary);white-space:nowrap}
.seg-grupos.desligado{opacity:.45;pointer-events:none}
/* Passo do fluxo que aponta para configuração desta mesma tela, e não para uma
   lista a preencher — a cor diferente evita esperar uma contagem que não vem. */
.fluxo-passo.fluxo-config .fluxo-num{background:#eef5fb;color:var(--primary)}
/* Quadro de adicionais: o percentual editável precisa caber na coluna sem
   empurrar a base legal, que é o texto que dá sentido ao número. */
.ad-num{width:82px;text-align:right}
.ad-hora{width:96px}
.cf-marca{display:inline-flex}

/* Navegação do kanban sem depender da barra de rolagem.
   A barra do quadro fica no rodapé de uma área alta: para usá-la é preciso
   rolar a página até o fim, mirar num alvo de 8px e arrastar. Com sete
   colunas e um notebook, isso é o gesto mais repetido da tela. Os botões
   ficam fixos sobre o quadro, sempre no mesmo lugar. */
.board-wrap{position:relative}
.board-nav{position:absolute;z-index:6;display:flex;flex-direction:column;gap:6px;
  top:50%;transform:translateY(-50%);pointer-events:none}
.board-nav.esquerda{left:-6px}
.board-nav.direita{right:-6px}
.board-nav button,.board-vert button{pointer-events:auto;width:38px;height:38px;border:1px solid var(--border);
  border-radius:999px;background:#fff;color:var(--primary);font-size:16px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 18px rgba(10,25,40,.18);display:flex;align-items:center;justify-content:center;transition:.15s}
.board-nav button:hover,.board-vert button:hover{background:var(--primary);color:#fff;transform:scale(1.06)}
.board-nav button:disabled,.board-vert button:disabled{opacity:.28;cursor:default;transform:none;background:#fff;color:var(--primary)}
/* As setas verticais acompanham a janela: rolar a página não pode escondê-las. */
.board-vert{position:fixed;right:18px;bottom:24px;z-index:7;display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){.board-nav.esquerda{left:0}.board-nav.direita{right:0}.board-vert{right:10px;bottom:12px}}
@media print{.board-nav,.board-vert{display:none}}

/* Cabeçalho de documento — o padrão de ficha técnica.
   Três blocos com moldura: a marca de quem executa, o título e a
   identificação, e a marca de quem contrata. É o formato que o cliente já
   recebe de laudo e PMOC, e é o que faz o documento parecer emitido por uma
   empresa e não exportado de uma tela. As marcas ganham espaço de verdade
   (até 68px de altura), porque marca espremida em 34px parece rodapé. */
.doc-head{display:grid;grid-template-columns:150px 1fr 150px;border:1.5px solid var(--primary);
  border-radius:6px;overflow:hidden;margin-bottom:14px;background:#fff}
.doc-marca{display:flex;align-items:center;justify-content:center;padding:10px;background:#f7fbfe}
.doc-marca:first-child{border-right:1.5px solid var(--primary)}
.doc-marca:last-child{border-left:1.5px solid var(--primary)}
.doc-marca img{max-height:68px;max-width:100%;object-fit:contain}
.doc-marca .doc-sem{font-size:9px;color:var(--muted);text-align:center;line-height:1.3}
.doc-centro{padding:10px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px}
.doc-centro h2{font-size:1.35em;margin:0;letter-spacing:.4px;text-transform:uppercase;color:var(--primary)}
.doc-centro .doc-sub{font-size:.92em;font-weight:700;color:#1a2b3c}
.doc-centro .doc-linhas{font-size:.82em;color:#42556b;line-height:1.45}
.doc-faixa{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #cad6e3;border-radius:6px;
  overflow:hidden;margin-bottom:12px;font-size:.85em}
.doc-faixa div{padding:6px 10px;border-right:1px solid #cad6e3}
.doc-faixa div:last-child{border-right:none}
.doc-faixa strong{display:block;font-size:.82em;text-transform:uppercase;letter-spacing:.5px;color:#6b7f95}
@media (max-width:620px){.doc-head{grid-template-columns:1fr}
  .doc-marca:first-child,.doc-marca:last-child{border:none;border-bottom:1px solid var(--primary)}
  .doc-faixa{grid-template-columns:1fr}}

/* Risco de segurança na OS — o bloco tem que gritar sem ser ilegível.
   Fundo âmbar claro com barra vermelha: a mesma linguagem do alarme do
   sistema, para quem abre a aba entender em um segundo do que se trata. */
.risco-box{border:1px solid #f4c9a1;border-left:5px solid var(--red);background:#fff8f1;
  border-radius:14px;padding:14px 16px;margin-bottom:16px}
.risco-box .panel-head{margin-bottom:4px}
.risco-box h3{color:#9a3412}
.risco-box.ativo{background:#fdecec;border-color:#f0b4b4}
.risco-box.tratado{background:#eefaf1;border-left-color:var(--green);border-color:#bfe6cb}
.risco-box.tratado h3{color:#166534}

/* Mapa de calor dos chamados.
   Cinco degraus em vez de um gradiente contínuo: olho humano não distingue
   opacidade contínua, mas distingue degrau. A cor mais escura leva texto
   claro para continuar legível, e o pico ganha contorno próprio — é a única
   célula que muda decisão de escala. */
.heat-wrap{overflow-x:auto}
.heat-table{table-layout:fixed}
.heat-table tfoot th{color:var(--primary);font-weight:800;border-top:2px solid var(--border);padding-top:8px}
.heat-table .heat-total{color:var(--primary);font-weight:800;background:#f4f8fc}
.heat-dia-curto{display:none}
.heat-n0{background:#f2f6fa}
.heat-n1{background:#d6eef6}
.heat-n2{background:#95d8e9}
.heat-n3{background:#3fb5d3}
.heat-n4{background:#116e8c;color:#fff}
.heat-pico{outline:2px solid var(--red);outline-offset:-2px}
.heat-legenda{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--muted)}
.heat-legenda i{width:22px;height:14px;border-radius:4px;display:inline-block}
.heat-legenda-pico{margin-left:auto;display:flex;align-items:center;gap:5px}
.heat-legenda-pico i{background:#d6eef6}
@media (max-width:760px){.heat-dia-longo{display:none}.heat-dia-curto{display:inline}.heat-table{font-size:11px}}

/* Gráfico no documento impresso.
   `#printArea` fica oculto na tela, e elemento oculto tem largura zero — um
   gráfico desenhado ali sairia achatado numa linha. A classe abaixo o coloca
   fora da janela com largura real só enquanto os gráficos são desenhados; a
   impressão acontece logo depois e a classe sai. */
#printArea.preparando{display:block;position:absolute;left:-12000px;top:0;width:1000px}
.p-graficos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p-grafico{border:1px solid #d8e2ec;border-radius:8px;padding:8px}
.p-grafico h4{margin:0 0 6px;font-size:.95em;color:#163455}
@media print{.p-graficos{page-break-inside:avoid}}
/* Origem do material na OS: o que não é nosso vem marcado, porque é o que não
   pode entrar no custo nem baixar do saldo. */
.mat-fonte{display:block;font-size:10.5px;color:var(--muted);font-weight:700}
.mat-fonte.externo{color:#9a3412}

/* Recorte salvo: o nome é o botão, e o × fica encostado nele para não virar
   um alvo grande demais ao lado de algo que se clica o tempo todo. */
.filtro-salvo{display:inline-flex;align-items:center;border:1px solid var(--border);
  border-radius:999px;overflow:hidden;background:#fff}
.filtro-salvo button{border:none;background:none;cursor:pointer;font-size:12px;font-weight:700;
  color:var(--primary);padding:6px 10px}
.filtro-salvo button:hover{background:#eef5fb}
.filtro-salvo [data-filtro-apagar]{padding:6px 8px;color:var(--muted);border-left:1px solid var(--border)}
.filtro-salvo [data-filtro-apagar]:hover{background:var(--red);color:#fff}

/* Ver a senha digitada.
   Senha em campo escondido é a origem de metade dos "não consigo entrar": a
   pessoa digita errado, não vê, e o sistema só diz que está errada. O olho
   fica dentro do campo, à direita, e não empurra o layout. */
.campo-senha{position:relative;display:block}
.campo-senha > input{width:100%;padding-right:44px}
.btn-ver-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:8px;
  display:grid;place-items:center;font-size:15px;line-height:1;color:var(--muted);padding:0}
.btn-ver-senha:hover{background:rgba(0,0,0,.06);color:var(--primary)}
.btn-ver-senha:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Na tela de login o fundo é escuro: o ícone precisa de outro contraste. */
.login-form .btn-ver-senha{color:#8fb3d0}
.login-form .btn-ver-senha:hover{background:#ffffff1f;color:#fff}
/* O Edge/Chrome desenham um olho próprio; dois olhos lado a lado confundem. */
.campo-senha > input::-ms-reveal,.campo-senha > input::-ms-clear{display:none}