/* =============================================================================
   Renovadora Pneus Sergipe — Estilos (copiados integralmente do prototipo)
   Fonte: renovadora-pneus-prototipo_7.html  (bloco <style>)
   NAO ALTERAR a identidade visual. So adicionar regras NOVAS no final.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

:root{
  --blue-900:#1e3a8a; --blue-800:#1e40af; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-50:#eff6ff;
  --slate-900:#0f172a; --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8;
  --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --green:#059669; --amber:#f59e0b; --red:#dc2626;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:'Archivo',system-ui,sans-serif; background:var(--slate-100); color:var(--slate-700); -webkit-font-smoothing:antialiased; }
.num{ font-family:'Barlow Semi Condensed',system-ui,sans-serif; }
.disp{ font-family:'Archivo',sans-serif; letter-spacing:-0.01em; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select{ font-family:inherit; }
.grade{ background-image:radial-gradient(circle at 1px 1px, rgba(15,23,42,.05) 1px, transparent 0); background-size:22px 22px; }

/* Layout */
.app{ display:flex; min-height:100vh; }
.sidebar{ width:240px; flex-shrink:0; background:var(--blue-900); color:#dbeafe; min-height:100vh; display:flex; flex-direction:column; }
.brand{ padding:20px; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:10px; }
.brand .logo{ width:36px; height:36px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; }
.brand .t1{ color:#fff; font-weight:800; font-size:15px; line-height:1; }
.brand .t2{ color:#93c5fd; font-size:10px; letter-spacing:.18em; font-weight:600; margin-top:2px; }
nav{ padding:12px; flex:1; }
.nav-btn{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:500; color:#bfdbfe; text-align:left; margin-bottom:4px; transition:.15s; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.nav-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-btn.active{ background:var(--blue-700); color:#fff; }
.nav-btn svg{ width:18px; height:18px; }
.side-foot{ padding:12px; border-top:1px solid rgba(255,255,255,.12); }
.recep-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:var(--blue-800); font-weight:600; font-size:14px; border-radius:9px; padding:10px; }
.recep-btn:hover{ background:var(--blue-50); }
.side-note{ font-size:10px; color:#60a5fa; margin-top:12px; line-height:1.5; }
.main{ flex:1; min-width:0; }

.topo{ background:#fff; border-bottom:1px solid var(--slate-200); padding:16px 28px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.topo h1{ font-size:20px; font-weight:700; color:var(--slate-900); }
.topo .sub{ font-size:14px; color:var(--slate-500); margin-top:2px; }
.content{ padding:24px; }

/* Kanban */
.kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.col-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#fff; border:1px solid var(--slate-200); border-bottom:none; border-radius:9px 9px 0 0; }
.col-head .lbl{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--slate-700); }
.col-head .cnt{ font-weight:700; color:var(--slate-400); }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.col-body{ border:1px solid var(--slate-200); border-radius:0 0 9px 9px; padding:12px; min-height:220px; display:flex; flex-direction:column; gap:12px; }
/* Coluna vazia do kanban: num dia limpo o marcador aparece em TODAS as colunas,
   entao fica discreto de proposito (traco apagado, sem chamar atencao). */
.empty{ font-size:18px; line-height:1; color:var(--slate-300); text-align:center; padding-top:26px; user-select:none; }
.card{ background:#fff; border:1px solid var(--slate-200); border-radius:9px; box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden; }
.card .bar{ height:4px; }
.card .body{ padding:12px; }
.card .os{ font-weight:700; color:var(--blue-700); }
.card .cli{ font-size:14px; font-weight:600; color:var(--slate-900); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .med{ font-size:13px; color:var(--slate-500); margin-top:2px; }
.card .ser{ font-size:12px; color:var(--slate-400); margin-top:2px; }
.card .meta{ font-size:11px; color:var(--slate-400); margin-top:8px; display:flex; align-items:center; gap:4px; }
.badge{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; }
/* Variantes de cor do badge — dedup das cores inline repetidas em N views. Cada classe
   reproduz EXATAMENTE um conjunto de cores ja em uso (visual identico). Badges com cor
   DINAMICA (via mapas STATUS_COR/urgencia etc.) e tons unicos (roxo superadmin, verde
   #166534 "ativo", ambers #92400e/#fffbeb) seguem inline de proposito — ver leva 24/07. */
.badge-ok{ color:#047857; background:#ecfdf5; border:1px solid #a7f3d0; }
.badge-warn{ color:#b45309; background:#fef3c7; border:1px solid #fde68a; }
.badge-danger{ color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; }
.badge-neutral{ color:var(--slate-500); background:var(--slate-100); border:1px solid var(--slate-200); }
.badge-info{ color:#1d4ed8; background:#eff6ff; border:1px solid #bfdbfe; }
.btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; color:#fff; font-size:12px; font-weight:600; border-radius:7px; padding:7px; margin-top:12px; transition:.15s; }
.btn-blue{ background:var(--blue-600); } .btn-blue:hover{ background:var(--blue-700); }
.btn-green{ background:var(--green); } .btn-green:hover{ background:#047857; }
.legenda{ display:flex; align-items:center; gap:12px; }
.legenda span{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--slate-500); }
.legenda .pill{ width:12px; height:6px; border-radius:3px; }
.prazo-row{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--slate-500); margin-top:6px; font-weight:500; }
.prazo-row svg{ width:13px; height:13px; }
.prazo-row.late{ color:#dc2626; font-weight:700; }
.late-tag{ background:#dc2626; color:#fff; font-size:9px; font-weight:800; padding:2px 6px; border-radius:5px; letter-spacing:.04em; }
.card-late{ border-color:#fca5a5; }
.btn-just{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:600; color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; border-radius:7px; padding:7px; margin-top:8px; }
.btn-just svg{ width:14px; height:14px; }
.btn-just:hover{ background:#fecaca; }
.just-box{ display:flex; flex-direction:column; gap:2px; background:#fff7ed; border:1px solid #fed7aa; border-radius:7px; padding:8px; margin-top:8px; }
.just-motivo{ font-size:12px; font-weight:700; color:#9a3412; }
.just-quem{ font-size:11px; color:#b45309; }
.just-obs{ font-size:11px; color:#78716c; font-style:italic; }

/* Tabela clientes */
.panel{ background:#fff; border:1px solid var(--slate-200); border-radius:12px; overflow:hidden; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead{ background:var(--slate-50); }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); font-weight:600; padding:12px 20px; }
td{ padding:14px 20px; border-top:1px solid var(--slate-100); }
tr.row{ cursor:pointer; transition:.12s; }
tr.row:hover{ background:#eff6ff80; }
.search{ position:relative; }
.search input{ padding:8px 12px 8px 34px; font-size:14px; border:1px solid var(--slate-200); border-radius:9px; width:280px; }
.search input:focus{ outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px #bfdbfe; }
.search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--slate-400); }

/* Detalhe */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--slate-200); margin-bottom:20px; }
.tab{ padding:10px 16px; font-size:14px; font-weight:500; color:var(--slate-500); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active{ color:var(--blue-700); border-color:var(--blue-600); }
.ghost{ display:flex; align-items:center; gap:6px; font-size:14px; color:var(--slate-500); border:1px solid var(--slate-200); border-radius:9px; padding:8px 12px; }
.ghost:hover{ color:var(--slate-900); }
.field{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.field .ico{ width:32px; height:32px; border-radius:7px; background:var(--slate-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.field .ico svg{ width:16px; height:16px; color:var(--slate-400); }
.field .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); font-weight:600; }
.field .val{ font-size:14px; color:var(--slate-900); font-weight:500; }
.doc{ background:#fff; border:1px solid #a7f3d0; border-radius:12px; padding:16px; margin-bottom:8px; }
.doc .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--slate-100); font-size:12px; }
.doc .g-lbl{ color:var(--slate-400); display:block; }
.doc .g-val{ color:var(--slate-700); font-weight:500; }
.anexo{ background:#fff; border:1px solid var(--slate-200); border-radius:9px; padding:12px; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.anexo .ico{ width:36px; height:36px; border-radius:7px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; }
.anexo .ico svg{ width:16px; height:16px; color:var(--blue-600); }

/* Form */
.form-card{ background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:24px; max-width:640px; }
.lbl-up{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); font-weight:600; display:block; margin-bottom:6px; }
.inp{ width:100%; padding:10px 12px; font-size:14px; border:1px solid var(--slate-200); border-radius:9px; background:#fff; }
.inp:focus{ outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px #bfdbfe; }
/* Campo de senha com botao de olho (modal claro) — ver toggleSenha() em helpers.js */
.senha-wrap{ position:relative; }
.senha-wrap .inp{ padding-right:40px; }
.btn-olho{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--slate-400); display:inline-flex; padding:4px; }
.btn-olho svg{ width:18px; height:18px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mb{ margin-bottom:20px; }
.urg-btns{ display:flex; gap:8px; }
.urg-btn{ flex:1; font-size:14px; font-weight:600; border-radius:9px; padding:10px; border:1px solid var(--slate-200); color:var(--slate-500); background:#fff; }
.urg-btn.active{ box-shadow:0 0 0 2px #93c5fd; }
.form-foot{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--slate-100); margin-top:4px; }
.btn-lg{ display:flex; align-items:center; gap:8px; padding:10px 24px; border-radius:9px; font-size:14px; font-weight:600; color:#fff; background:var(--blue-600); }
.btn-lg:hover{ background:var(--blue-700); }
.btn-lg:disabled{ background:var(--slate-300); cursor:not-allowed; }
/* Icone do botao de acao: dimensiona o SVG (sem width/height proprio) p/ ficar
   proporcional ao texto (14px). Sem isso herdava o tamanho-padrao do navegador
   (grande demais). So o icone muda; tamanho/padding/cor/fonte do botao seguem iguais. */
.btn-lg svg{ width:16px; height:16px; flex-shrink:0; }
.link-add{ display:flex; align-items:center; gap:6px; font-size:14px; color:var(--blue-600); font-weight:500; margin-top:12px; }

/* Modal */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; padding:16px; }
/* Trava o scroll da pagina enquanto ha modal aberto (classe posta/tirada por renderOverlay).
   overflow:hidden no body propaga ao viewport e preserva a posicao do scroll ao fechar. */
body.modal-open{ overflow:hidden; }
/* coluna flex + altura limitada a viewport: cabecalho fixo, corpo (.pad) rola
   quando o formulario passa da tela (ex.: "Adicionar pneu novo"). */
.modal{ background:#fff; border-radius:16px; width:100%; max-width:520px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3); display:flex; flex-direction:column; max-height:calc(100vh - 32px); }
.modal .head{ background:var(--blue-900); color:#fff; padding:16px 24px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
.modal .head svg{ width:22px; height:22px; flex-shrink:0; }   /* icones do .head sem dimensao propria; sem isto o SVG renderiza gigante */
.modal .head .t{ font-weight:700; }
.modal .head .s{ color:#93c5fd; font-size:12px; }
.modal .pad{ padding:24px; overflow-y:auto; flex:1 1 auto; min-height:0; }
/* Corta o scroll chaining em TODO container que rola dentro do modal (.pad, listas
   aninhadas — motivos da recusa, OS avulsas, carcacas candidatas, historico de
   interacoes — e o cliPicker): no fim do scroll interno o gesto nao encadeia pro
   ancestral nem pro body. Inerte em elementos que nao rolam. */
.modal *{ overscroll-behavior:contain; }
/* Seletor de cliente com busca (cliPicker) — campo + lista filtrada server-side. */
.cli-pick{ position:relative; }
.cli-pick-res{ margin-top:4px; max-height:240px; overflow-y:auto; background:#fff; border:1px solid #e2e8f0; border-radius:9px; box-shadow:0 8px 22px rgba(15,23,42,.12); }
.cli-pick-row{ display:flex; gap:8px; align-items:baseline; padding:9px 12px; cursor:pointer; font-size:14px; border-bottom:1px solid #f1f5f9; }
.cli-pick-row:last-child{ border-bottom:none; }
.cli-pick-row:hover{ background:#eff6ff; }
.cli-pick-nome{ font-weight:500; color:#1e293b; }
.cli-pick-doc{ color:#94a3b8; font-size:12px; }
.cli-pick-empty{ padding:10px 12px; color:#94a3b8; font-size:13px; }
.resumo{ background:var(--slate-50); border-radius:9px; padding:16px; font-size:14px; margin-bottom:16px; }
.check{ display:flex; gap:12px; align-items:flex-start; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:9px; padding:12px; cursor:pointer; margin-bottom:16px; }
.check input{ width:16px; height:16px; margin-top:2px; accent-color:var(--green); }
.aviso{ display:flex; gap:8px; align-items:center; font-size:12px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:7px; padding:8px 12px; margin-bottom:16px; }
.aviso svg{ width:16px; height:16px; flex-shrink:0; }

/* FIDS Modo Recepção */
.fids{ position:fixed; inset:0; z-index:60; background:#080b13; overflow:auto; padding-bottom:70px; }
.fids-top{ display:flex; align-items:center; justify-content:space-between; padding:24px 48px; background:#05070d; border-bottom:1px solid #1b2436; }
.fids-top .logo{ width:56px; height:56px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; }
.fids-top .t1{ font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:800; color:#fff; line-height:1; }
.fids-top .t2{ font-size:clamp(.9rem,1.3vw,1.15rem); font-weight:600; letter-spacing:.22em; color:#f5b301; margin-top:6px; }
.fids-clock{ font-size:clamp(2.4rem,5vw,3.8rem); font-weight:700; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.fids-date{ color:#94a3b8; font-size:clamp(.9rem,1.2vw,1.05rem); text-transform:capitalize; margin-top:4px; }
.fids-sair{ display:flex; align-items:center; gap:6px; color:#94a3b8; font-size:14px; border:1px solid #2a3550; border-radius:9px; padding:8px 12px; }
.fids-sair:hover{ color:#fff; }
.fids-cols, .fids-row{ display:grid; grid-template-columns:.55fr 1.7fr .8fr 1.1fr 1fr .8fr 1.05fr; gap:20px; align-items:center; }
.fids-cols{ padding:24px 48px 8px; }
.fids-cols span{ color:#f5b301; letter-spacing:.16em; font-weight:700; text-transform:uppercase; font-size:clamp(.75rem,1vw,.95rem); }
.fids-divider{ margin:0 48px; border-bottom:2px solid rgba(245,179,1,.2); }
.fids-body{ padding:0 48px; }
.fids-row{ padding:18px 0 18px 20px; border-bottom:1px solid #161e30; animation:fidsRow .45s ease both; }
.fids-os{ font-weight:700; font-variant-numeric:tabular-nums; color:#7dd3fc; font-size:clamp(1.6rem,2.8vw,2.4rem); }
.fids-cli{ font-weight:700; color:#fff; font-size:clamp(1.5rem,2.6vw,2.3rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:12px; }
.fids-med{ font-weight:600; color:#cbd5e1; font-size:clamp(1.2rem,2vw,1.8rem); }
.fids-ser{ text-transform:uppercase; letter-spacing:.03em; color:#64748b; font-size:clamp(1rem,1.5vw,1.4rem); }
.fids-pz{ display:flex; flex-direction:column; gap:2px; }
.fids-pz .pzd{ font-weight:600; color:#cbd5e1; font-size:clamp(1.1rem,1.7vw,1.55rem); }
.fids-pz .pzd.late{ color:#f87171; }
.fids-pz .pztag{ align-self:flex-start; background:#dc2626; color:#fff; font-weight:800; letter-spacing:.04em; padding:1px 8px; border-radius:5px; font-size:clamp(.7rem,.95vw,.9rem); }
.fids-pz .pzsub{ color:#94a3b8; font-size:clamp(.75rem,1vw,.92rem); }
.fids-urg{ font-weight:700; text-transform:uppercase; padding:4px 12px; border-radius:6px; font-size:clamp(.9rem,1.3vw,1.25rem); display:inline-block; }
.fids-st{ display:flex; align-items:center; gap:12px; }
.fids-st .d{ width:16px; height:16px; border-radius:50%; }
.fids-st .x{ font-weight:700; text-transform:uppercase; font-size:clamp(1.3rem,2.2vw,1.9rem); }
.fids-foot{ position:fixed; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:14px 48px; background:#05070d; border-top:1px solid #1b2436; }
.fids-leg{ display:flex; gap:24px; }
.fids-leg span{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:clamp(.85rem,1.1vw,1rem); }
.fids-leg .d{ width:12px; height:12px; border-radius:50%; }
.fids-count{ color:#64748b; font-size:clamp(.85rem,1.1vw,1rem); }
.fids-empty{ color:#475569; font-size:1.6rem; text-align:center; padding:64px 0; }
@keyframes fidsRow{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes fidsPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.pulse{ animation:fidsPulse 1.4s ease-in-out infinite; }
.hide{ display:none; }
.side-sec{ font-size:10px; letter-spacing:.16em; color:#60a5fa; font-weight:700; padding:14px 12px 4px; }
/* Barra de filtros/controles no topo das listas — dedup do bloco inline que se
   repetia identico em 8 views (clientes/carcacas/financeiro/operacao/producao). */
.toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.kpi{ background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:16px 18px; }
.kpi .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); font-weight:600; }
.kpi .val{ font-size:24px; font-weight:700; color:var(--slate-900); margin-top:4px; }
.kpi .val.blue{ color:#1d4ed8; } .kpi .val.green{ color:#047857; } .kpi .val.amber{ color:#b45309; }
/* KPI zerado (R$ 0 / 0): tom apagado p/ nao competir visualmente com valor real.
   Classe DOBRADA (.zero.zero) eleva a especificidade (0,4,0 > 0,3,0) p/ vencer
   blue/green/amber por PESO, nao por ordem no arquivo (era fragil a reordenacao). */
.kpi .val.zero.zero{ color:var(--slate-300); }
.callout-info{ display:flex; gap:8px; align-items:center; background:#eff6ff; border:1px solid #bfdbfe; border-radius:9px; padding:12px 14px; font-size:13px; color:#1e40af; margin-bottom:16px; }
.callout-info svg{ width:16px; height:16px; flex-shrink:0; color:#1d4ed8; }
.callout-info b{ color:#1e3a8a; }
.thumb{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #bfdbfe; border-radius:12px; padding:28px; color:#1d4ed8; background:#f8fafc; margin-bottom:16px; font-size:13px; font-weight:600; }
.thumb svg{ width:28px; height:28px; }
.opt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; border:1px solid var(--slate-200); border-radius:12px; padding:16px; background:#fff; }
.opt:hover{ border-color:#60a5fa; background:#f8fafc; }
.opt .oi{ width:36px; height:36px; border-radius:9px; background:#eff6ff; display:flex; align-items:center; justify-content:center; color:#1d4ed8; }
.opt .oi svg{ width:18px; height:18px; }
.opt .ot{ font-weight:700; color:var(--slate-900); font-size:14px; }
.opt .od{ font-size:12px; color:var(--slate-500); }
.card{ cursor:pointer; }
.card-foot{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--slate-200); font-size:11px; color:#94a3b8; display:flex; align-items:center; gap:5px; }
.card-foot svg{ width:12px; height:12px; }
.resolv-box{ display:flex; flex-direction:column; gap:2px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:7px; padding:8px; margin-top:8px; }
.resolv-box .rt{ font-size:12px; font-weight:700; color:#047857; }
.resolv-box .rq{ font-size:11px; color:#059669; }
.btn-resolv{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:600; color:#047857; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:7px; padding:7px; margin-top:8px; }
.btn-resolv svg{ width:14px; height:14px; }
.btn-resolv:hover{ background:#d1fae5; }
.tl{ display:flex; flex-direction:column; gap:2px; }
.tl-item{ display:flex; gap:12px; padding:7px 0; }
.tl-dot{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.tl-dot svg{ width:13px; height:13px; }
.tl-body .t{ font-weight:600; color:var(--slate-900); font-size:13px; }
.tl-body .m{ font-size:11px; color:var(--slate-400); margin-top:1px; }
.dnav{ display:inline-flex; align-items:center; gap:2px; border-radius:10px; padding:3px; border:1px solid var(--slate-200); background:#fff; }
.dnav .ar{ font-size:18px; font-weight:700; padding:2px 10px; border-radius:7px; color:var(--slate-500); line-height:1; }
.dnav .ar:hover{ background:var(--slate-100); color:var(--slate-800); }
.dnav .dlbl{ font-weight:700; padding:0 8px; min-width:150px; text-align:center; font-size:13px; color:var(--slate-700); }
.dnav .dtodos{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:7px; color:var(--slate-500); margin-left:2px; }
.dnav .dtodos:hover{ background:var(--slate-100); }
.dnav .dtodos.on{ background:var(--blue-600); color:#fff; }
.dnav .dtodos.on:hover{ background:var(--blue-700); }
.dnav.dark{ background:#0d1322; border-color:#2a3550; }
.dnav.dark .dlbl{ color:#e2e8f0; }
.dnav.dark .ar{ color:#94a3b8; } .dnav.dark .ar:hover{ background:#1e293b; color:#fff; }
.dnav.dark .dtodos{ color:#94a3b8; } .dnav.dark .dtodos:hover{ background:#1e293b; }
.dnav.dark .dtodos.on{ background:#1d4ed8; color:#fff; }

/* =============================================================================
   ADICOES da fundacao v1 (NAO existem no prototipo) — area pequena e isolada.
   Grids auxiliares (grid2/grid4) que algumas views usam; tela de login (AUTH);
   estado de "carregando" e badge de modo MOCK. Mantem a mesma paleta.
   ============================================================================= */
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* =============================================================================
   HERO DE LOGIN (peca 6 / Leva R) — so aparece quando Supabase Auth esta ligado.
   TUDO namespacado `.lh-*` e as CSS vars ficam SCOPED em `.login-hero` (NUNCA em
   :root) para nao vazar cor/fonte pras telas internas. Nomes .brand/.logo/.tag/.dot
   do prototipo colidiam com a sidebar -> aqui viram .lh-brand/.lh-dot/.lh-tag.
   Keyframes prefixados lh- por higiene (rise/fade/pulse sao nomes genericos).
   ============================================================================= */
.login-hero{
  --lh-bg:#05070f;
  --lh-blue:#3b82f6; --lh-blue-hi:#7bb5ff;
  --lh-tx:#f0f4fb; --lh-tx2:#94a6c6; --lh-tx3:#56648a;
  --lh-fd:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --lh-fb:'Inter',system-ui,-apple-system,sans-serif;
  position:fixed; inset:0; z-index:1; overflow:hidden;
  background:var(--lh-bg); color:var(--lh-tx);
  font-family:var(--lh-fb); -webkit-font-smoothing:antialiased;
}
.login-hero *{ box-sizing:border-box; }
.lh-lights{ position:absolute; inset:0; z-index:1; display:block; }
.lh-tint{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(8,16,40,.2),transparent 70%),
             linear-gradient(180deg,rgba(5,7,15,.4),transparent 30%,transparent 70%,rgba(5,7,15,.55)); }
.lh-vignette{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%,transparent 46%,rgba(2,3,8,.82) 100%); }
.lh-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.lh-topbar{ position:absolute; top:0; left:0; right:0; z-index:8; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(22px,3vw,34px) clamp(26px,4.5vw,60px); opacity:0; animation:lh-fade 1s ease .3s forwards; }
.lh-brand{ display:flex; align-items:center; gap:11px; font-family:var(--lh-fd); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
.lh-brand .lh-thin{ color:var(--lh-tx2); font-weight:500; }
.lh-dot{ width:7px; height:7px; border-radius:50%; background:var(--lh-blue-hi); box-shadow:0 0 12px var(--lh-blue-hi); animation:lh-pulse 2.8s ease-in-out infinite; }
.lh-tag{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--lh-tx2); }

.lh-hero{ position:relative; z-index:4; height:100vh; height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; gap:clamp(16px,2.6vh,26px); }
.lh-eyebrow{ font-family:var(--lh-fd); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--lh-blue-hi);
  opacity:0; transform:translateY(16px); animation:lh-rise .9s cubic-bezier(.16,.8,.24,1) 1.1s forwards; }
.lh-wordmark{ font-family:var(--lh-fd); font-weight:700; letter-spacing:-.025em; line-height:.92;
  font-size:clamp(2.6rem,9vw,6rem); color:var(--lh-tx); text-shadow:0 0 50px rgba(123,181,255,.35),0 2px 40px rgba(0,0,0,.6);
  text-transform:uppercase;
  opacity:0; transform:translateY(20px); animation:lh-rise 1s cubic-bezier(.16,.8,.24,1) 1.25s forwards; }
.lh-wordmark span{ display:block; font-weight:500; font-size:clamp(.85rem,2.4vw,1.1rem); letter-spacing:.5em; text-transform:uppercase; color:var(--lh-tx2); margin-top:18px; text-shadow:none; padding-left:.5em; }

.lh-cta-row{ margin-top:6px; opacity:0; transform:translateY(16px); animation:lh-rise .9s cubic-bezier(.16,.8,.24,1) 1.5s forwards; }
.lh-cta{ display:inline-flex; align-items:center; gap:10px; font-family:var(--lh-fb); font-weight:600; font-size:15px; color:#04122e;
  background:linear-gradient(135deg,var(--lh-blue-hi),var(--lh-blue)); border:none; border-radius:999px; padding:15px 36px; cursor:pointer; text-decoration:none;
  box-shadow:0 12px 40px -12px rgba(59,130,246,.8); transition:transform .25s,box-shadow .35s,filter .25s; }
.lh-cta:hover,.lh-cta:focus-visible{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 0 36px -4px rgba(123,181,255,.6),0 18px 48px -16px rgba(59,130,246,.9); outline:none; }
.lh-arrow{ transition:transform .25s; } .lh-cta:hover .lh-arrow{ transform:translateX(3px); }

/* Form revelado inline (UX "revelar campos"): escondido ate revelarLoginForm() -> .on */
.lh-form{ display:none; flex-direction:column; align-items:stretch; gap:12px; width:100%; max-width:340px; margin-top:6px;
  opacity:0; transform:translateY(12px); }
.lh-form.on{ display:flex; animation:lh-rise .5s cubic-bezier(.16,.8,.24,1) forwards; }
.lh-inp{ width:100%; font-family:var(--lh-fb); font-size:15px; color:var(--lh-tx);
  background:rgba(255,255,255,.06); border:1px solid rgba(148,166,198,.28); border-radius:12px; padding:13px 16px;
  transition:border-color .2s, background .2s, box-shadow .2s; }
.lh-inp::placeholder{ color:var(--lh-tx3); }
.lh-inp:focus{ outline:none; border-color:var(--lh-blue-hi); background:rgba(255,255,255,.09); box-shadow:0 0 0 3px rgba(123,181,255,.18); }
/* Campo de senha com botao de olho (hero escuro) — icone claro (var --lh-tx2) */
.lh-senha-wrap{ position:relative; }
.lh-senha-wrap .lh-inp{ padding-right:46px; }
.lh-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--lh-tx2); display:inline-flex; padding:4px; }
.lh-eye:hover{ color:var(--lh-tx); }
.lh-eye svg{ width:19px; height:19px; }
.lh-cta-submit{ justify-content:center; width:100%; margin-top:2px; }
.lh-err{ font-size:13px; color:#fecaca; background:rgba(185,28,28,.22); border:1px solid rgba(248,113,113,.45); border-radius:10px; padding:9px 13px; text-align:left; }

@keyframes lh-rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes lh-fade{ to{ opacity:1; } }
@keyframes lh-pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.3); opacity:.55 } }
@media (prefers-reduced-motion:reduce){
  .login-hero *{ animation-duration:.001ms !important; animation-delay:0s !important; }
  .lh-dot{ animation:none; }
  .lh-eyebrow,.lh-wordmark,.lh-cta-row,.lh-topbar{ opacity:1; transform:none; }
  .lh-form.on{ opacity:1; transform:none; }
}

/* Estado de carregamento global */
.boot{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--slate-500); }
.boot .logo{ width:48px; height:48px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.spin{ width:26px; height:26px; border:3px solid var(--slate-200); border-top-color:var(--blue-600); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Badge discreto do modo de dados (MOCK x Supabase) no rodape da sidebar */
.mode-badge{ display:inline-flex; align-items:center; gap:6px; font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:3px 7px; border-radius:999px; margin-top:8px; text-transform:uppercase; }
.mode-badge.mock{ background:rgba(245,179,1,.15); color:#fcd34d; }
.mode-badge.live{ background:rgba(16,185,129,.15); color:#6ee7b7; }

/* =============================================================================
   AVISOS IN-APP (Peca 8a) — helpers aviso()/toast()/confirmar() em js/helpers.js.
   Substituem gradualmente os alert()/confirm() nativos (a troca em massa e a 8b/8c;
   AQUI so a ferramenta). REUSAM a identidade dos modais (.overlay/.modal/.head/.pad)
   e a trava de scroll (body.modal-open). So o TOAST tem visual proprio (nao existia).
   ============================================================================= */
/* Trava de scroll PROPRIA do helper (classe ortogonal a body.modal-open do harness —
   ver comentario em _avLockScroll/_avUnlockScroll). Mesmo efeito da trava do harness. */
body.av-lock{ overflow:hidden; }
/* Faixa colorida do topo do modal de aviso/confirmacao por tipo (sobrescreve o azul
   padrao de .modal .head so a cor de fundo; estrutura/tamanho seguem .modal .head). */
.head-erro{ background:var(--red) !important; }
.head-sucesso{ background:var(--green) !important; }
.head-info{ background:var(--blue-900) !important; }   /* = padrao dos modais do sistema */
/* Rodape de botoes dos modais de aviso/confirmacao (mesma linguagem do rodape do mUsuario). */
.aviso-acoes{ display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:20px; }
.aviso-msg{ font-size:14px; color:var(--slate-700); line-height:1.5; white-space:pre-wrap; }

/* Toast — notificacao nao-bloqueante, canto superior direito, empilha e some sozinho. */
.toast-host{ position:fixed; top:18px; right:18px; z-index:70; display:flex; flex-direction:column; gap:10px;
  max-width:min(360px,calc(100vw - 36px)); pointer-events:none; }
.toast{ display:flex; align-items:flex-start; gap:10px; background:#fff; color:var(--slate-700);
  border:1px solid var(--slate-200); border-left-width:4px; border-radius:10px; padding:12px 14px;
  box-shadow:0 12px 30px rgba(15,23,42,.16); font-size:14px; line-height:1.4; pointer-events:auto;
  animation:toast-in .22s ease-out; }
.toast.out{ animation:toast-out .22s ease-in forwards; }
.toast svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.toast-sucesso{ border-left-color:var(--green); } .toast-sucesso svg{ color:var(--green); }
.toast-erro{ border-left-color:var(--red); } .toast-erro svg{ color:var(--red); }
.toast-info{ border-left-color:var(--blue-600); } .toast-info svg{ color:var(--blue-600); }
@keyframes toast-in{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:translateX(0); } }
@keyframes toast-out{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(24px); } }
@media (prefers-reduced-motion: reduce){ .toast,.toast.out{ animation:none; } }

/* =============================================================================
   AVISOS / LEMBRETES — Peca 4d (sino, cartoes, bloco da home). Identidade: azul/slate,
   reusa .badge/.panel. So regras NOVAS. ============================================================================= */
/* Etiqueta "AVISOS" da sidebar com o sino a direita. */
.av-sec-head{ display:flex; align-items:center; justify-content:space-between; }
/* Sino no topo da sidebar (fundo azul-900). */
.av-sino{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; color:#bfdbfe; transition:.15s; }
.av-sino:hover{ background:rgba(255,255,255,.10); color:#fff; }
.av-sino svg{ width:17px; height:17px; }
.av-sino.tem{ color:#fff; }
.av-sino-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--red); color:#fff; font-size:10px; font-weight:800; line-height:16px;
  text-align:center; box-shadow:0 0 0 2px var(--blue-900); font-family:'Barlow Semi Condensed',sans-serif; }

/* Titulo de secao dentro do .content (Para voce / Criados por voce). */
.section-lbl{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--slate-700); text-transform:uppercase; margin-bottom:12px; }
.section-lbl svg{ width:16px; height:16px; color:var(--blue-700); }
.av-cnt-inline{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:999px; background:var(--slate-100); color:var(--slate-600); font-size:12px;
  font-weight:700; font-family:'Barlow Semi Condensed',sans-serif; }

/* Cartoes dos avisos endereçados a mim. */
.av-cards{ display:flex; flex-direction:column; gap:12px; }
.av-card{ background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:14px 16px; }
.av-card.nao-lido{ border-left:4px solid var(--blue-600); background:linear-gradient(90deg,#f5f9ff, #fff 40%); }
.av-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.av-card-tags{ display:flex; align-items:center; gap:8px; }
.av-card-de{ font-size:12px; color:var(--slate-400); }
.av-card-texto{ font-size:14px; color:var(--slate-900); line-height:1.5; white-space:pre-wrap; }
.av-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.av-card-quando{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--slate-500); }
.av-card-quando svg{ width:14px; height:14px; }
.av-card-acoes{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.av-dot{ width:8px; height:8px; border-radius:999px; background:var(--blue-600); display:inline-block; }
.av-tag-imp{ color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; }
.av-tag-hoje{ color:#1d4ed8; background:#eff6ff; border:1px solid #bfdbfe; }
.av-tag-auto{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  color:#5b21b6; background:#f5f3ff; border:1px solid #ddd6fe; }
.av-tag-auto svg{ width:12px; height:12px; }

/* Botoes dos cartoes. */
.av-btn-ghost{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--slate-600); padding:6px 10px; border-radius:8px; border:1px solid var(--slate-200); background:#fff; }
.av-btn-ghost:hover{ background:var(--slate-50); color:var(--slate-900); }
.av-btn-ghost svg{ width:15px; height:15px; }
.av-btn-feito{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#fff;
  padding:6px 12px; border-radius:8px; background:var(--green); }
.av-btn-feito:hover{ filter:brightness(.95); }
.av-btn-feito svg{ width:15px; height:15px; }
.av-btn-feito.sm{ font-size:12px; padding:5px 10px; }

/* Bloco "Seus avisos" na home (injetado pelo harness). */
.av-home-wrap{ margin-bottom:16px; }
.av-home-bloco{ background:#fff; border:1px solid var(--slate-200); border-left:4px solid var(--blue-600);
  border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.av-home-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--slate-700);
  text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; }
.av-home-head svg{ width:16px; height:16px; color:var(--blue-700); }
.av-home-lista{ display:flex; flex-direction:column; gap:8px; }
.av-home-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px;
  border-radius:8px; background:var(--slate-50); }
.av-home-item.nao-lido{ background:#eff6ff; }
.av-home-txt{ font-size:13px; color:var(--slate-800); line-height:1.4; }
.av-home-mais{ font-size:12px; color:var(--slate-500); padding:4px 2px; }
.av-home-mais a, .av-home-vazio a{ color:var(--blue-700); font-weight:600; text-decoration:none; }
.av-home-vazio{ font-size:13px; color:var(--slate-600); }

/* =============================================================================
   MOBILE (leva 23/07) — responsividade das 10 telas internas. TUDO dentro de
   @media: NADA aqui altera o desktop (>860px fica EXATAMENTE como o prototipo).
   Breakpoint unico do app = 860px (drawer + grids colapsam). Sub-breakpoint 480px
   so p/ apertos de modal (padding/borda). FORA DO ESCOPO: FIDS (.fids*, modo TV) e
   login-hero (.lh-*, ja responsivo por clamp) — nao recebem regra aqui.
   O botao hambúrguer e o backdrop do drawer sao injetados por render() (js/app.js);
   ficam SEMPRE no DOM mas so aparecem <=860px (display:none no desktop, abaixo).
   ============================================================================= */

/* Hambúrguer + backdrop: escondidos no desktop; o media query os revela. */
.nav-toggle{ display:none; }
.nav-backdrop{ display:none; }

@media (max-width:860px){
  /* ── Sidebar → drawer off-canvas ──────────────────────────────────────────
     Vira fixed fora da tela; body.nav-open a traz. O .main volta a ocupar 100%
     da largura (o flex-shrink:0 da sidebar deixava o main espremido). */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:45;
    width:min(84vw,300px); min-height:100vh; max-height:100vh; overflow-y:auto;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  body.nav-open .sidebar{ transform:translateX(0); }
  .main{ width:100%; }

  /* Backdrop escuro clicavel (fecha o drawer). So existe quando aberto. */
  .nav-backdrop{ display:block; position:fixed; inset:0; z-index:44;
    background:rgba(15,23,42,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; }
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

  /* Botao hambúrguer FIXO no canto (alvo >=44px). Fica acima do backdrop p/ poder
     fechar tambem; some quando o drawer abre (o backdrop e o X visual). */
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center;
    position:fixed; top:10px; left:10px; z-index:46;
    width:44px; height:44px; border-radius:10px;
    background:var(--blue-900); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); }
  .nav-toggle svg{ width:22px; height:22px; }
  body.nav-open .nav-toggle{ opacity:0; pointer-events:none; }

  /* O topo sticky precisa abrir espaco pro hambúrguer (senao ele cobre o titulo). */
  .topo{ padding:14px 16px 14px 60px; flex-wrap:wrap; gap:10px; }
  .topo > div{ min-width:0; }
  .content{ padding:16px; }

  /* ── Kanban: 1 coluna empilhada ─────────────────────────────────────────── */
  .kanban{ grid-template-columns:1fr; gap:14px; }

  /* ── Tabelas: scroll horizontal CONTIDO no painel (pagina nunca rola lateral) ─
     A .panel rola no eixo X; a table ganha min-width p/ nao esmagar as colunas.
     Vale p/ toda tabela dentro de .panel (clientes, carcacas, financeiro...). */
  .panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .panel > table{ min-width:640px; }
  th{ padding:10px 12px; }
  td{ padding:12px; }

  /* ── Busca ocupa a linha toda ─────────────────────────────────────────────
     .search vira flex:1 (com min-width:0 p/ poder encolher) e o input 100%. */
  .search{ flex:1 1 100%; min-width:0; }
  .search input{ width:100%; }

  /* ── Grids fixos → colapsam ───────────────────────────────────────────────
     row2/grid2 -> 1 coluna; grid4/kpis -> 2 colunas; doc .grid3 -> 2 colunas. */
  .row2, .grid2{ grid-template-columns:1fr; }
  .grid4, .kpis{ grid-template-columns:repeat(2,1fr); }
  .doc .grid3{ grid-template-columns:repeat(2,1fr); }

  /* ── iOS: sem zoom-ao-focar (inputs >=16px) ───────────────────────────────
     Abaixo de 16px o Safari faz zoom automatico ao focar o campo. */
  .inp, .search input, select.inp, .modal input, .modal select, .modal textarea{ font-size:16px; }

  /* ── Alvos de toque >=44px (sem mudar o visual desktop, que fica fora do media) ─ */
  .nav-btn{ padding:12px; min-height:44px; }
  .btn{ padding:11px; min-height:44px; }
  .tab{ padding:12px 14px; min-height:44px; }
  .av-btn-ghost, .av-btn-feito{ min-height:40px; }   /* botoes dos cartoes de aviso */
  .btn-olho, .senha-wrap .btn-olho{ min-width:40px; min-height:40px; }
  /* Rodape de botoes dos modais (padrao "Cancelar / Salvar" em .pad). */
  .form-foot .btn-lg, .modal .pad .btn-lg{ min-height:44px; }
}

/* Apertos finos so em telas bem pequenas (celular retrato). */
@media (max-width:480px){
  .overlay{ padding:8px; }
  .modal{ max-width:100%; }
  .modal .head{ padding:14px 16px; }
  .modal .pad{ padding:16px; }
  .content{ padding:12px; }
}

/* =============================================================================
   POLIMENTO VISUAL (leva 23/07, Fase 4) — só regras NOVAS, sem tocar identidade.
   Estado vazio PADRAO de tabela: uma <td colspan> centralizada. Antes cada view
   repetia o mesmo inline-style (com pequenas divergencias de padding/tamanho/cor).
   `.empty-row td` centraliza isso: slate-500 (um degrau acima do slate-400 solto,
   p/ a mensagem "nenhum X" ser legivel — é informacao, nao decoracao). Aplicar
   pondo class="empty-row" no <tr> e removendo o style inline do <td colspan>.
   ============================================================================= */
.empty-row td{ text-align:center; color:var(--slate-500); padding:24px 20px; font-size:14px; }

/* =============================================================================
   IMPRESSAO DA FICHA DA OS (I27: papel em caso de pane/energia/sistema/internet).
   `imprimirFichaOS()` injeta o HTML da ficha em #print-area e poe body.printing;
   na impressao mostra SO a ficha (o resto do app fica oculto). Na tela #print-area
   fica escondido. Conteudo da ficha usa estilos inline proprios (self-contained).
   ============================================================================= */
#print-area{ display:none; }
@media print{
  body.printing > *:not(#print-area){ display:none !important; }
  body.printing #print-area{ display:block; }
  @page{ margin:14mm; }
}