:root {
  --bg:#f4f7fb; --panel:#fff; --nav:#17212b; --nav2:#243447;
  /* --muted era #6b7a89: 4.1:1 sobre o fundo claro, abaixo do minimo de
     4.5 pra texto pequeno. E a cor do texto secundario do sistema inteiro
     (descricoes, rotulos de campo, cabecalho de tabela), entao meio tom
     mais escuro melhora a leitura em toda tela sem mudar o visual. */
  --text:#24313d; --muted:#5c6b7a; --accent:#c9372f; --border:#dfe6ee;
  /* --success e --warning sao FUNDO de botao com texto branco por cima.
     Nos tons antigos (#16a34a / #d97706) o branco dava 3.3:1 e 3.2:1,
     abaixo do minimo de 4.5 — um tom mais fechado passa pra 5.0:1 sem
     mudar a leitura da cor (continua verde de 'ok' e ambar de 'atencao'). */
  --success:#15803d; --success-bg:#dcfce7; --success-text:#166534;
  --warning:#b45309; --warning-bg:#fef3c7; --warning-text:#92400e;
  --danger:#dc2626; --danger-bg:#fee2e2; --danger-text:#991b1b;
  --info:#2f73c9; --info-bg:#eef3f8; --info-text:#154f83;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
}
html[data-theme="dark"] {
  --bg:#0f1620; --panel:#1a232f; --nav:#0c1219; --nav2:#1c2733;
  --text:#e2e8f0; --muted:#94a3b8; --border:#2c3a4a;
  --success-bg:#0f2e1c; --success-text:#4ade80;
  --warning-bg:#3a2a0a; --warning-text:#fbbf24;
  --danger-bg:#3a1414; --danger-text:#f87171;
  --info-bg:#132a3f; --info-text:#7dd3fc;
}
html[data-theme="dark"] .panel, html[data-theme="dark"] .metric,
html[data-theme="dark"] table, html[data-theme="dark"] input,
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background:var(--panel); color:var(--text);
}
html[data-theme="dark"] .urgent-banner{background:linear-gradient(135deg,#2a1414,var(--panel))}
html[data-theme="dark"] .urgent-card{background:var(--panel)}
/* A cor da empresa (--accent) e escolhida por ela e pode ser escura.
   Como FUNDO de botao ela funciona (texto branco por cima), mas como
   COR DE TEXTO sobre o painel escuro fica sem contraste — entao no modo
   noturno o texto usa a mesma cor clareada, preservando a identidade. */
html[data-theme="dark"] .novo-cadastro-panel summary,
html[data-theme="dark"] .login-brand span{
  color:color-mix(in srgb, var(--accent) 55%, white);
}
/* mesma ideia pro laranja do documento de aprovacao, que e cor fixa */
html[data-theme="dark"] .approval-kicker,
html[data-theme="dark"] .public-approval-card{border-top-color:#fb923c}
html[data-theme="dark"] .approval-kicker{color:#fb923c}
* { box-sizing:border-box; }
body { margin:0; font-family:Segoe UI,Arial,sans-serif; background:var(--bg); color:var(--text); }
.sidebar { position:fixed; inset:0 auto 0 0; width:270px; background:var(--nav); padding:24px 16px; color:white; overflow:auto; }
.brand { font-size:25px; font-weight:800; letter-spacing:.5px; }
.brand span { color:#ff6b64; }
.subtitle { font-size:12px; color:#9fb3c8; margin:4px 0 24px; }
nav { display:grid; gap:6px; }
nav a { color:#e8eef5; text-decoration:none; padding:10px 12px; border-radius:9px; font-size:14px; line-height:1.35; display:block; }
nav a:hover { background:var(--nav2); color:#fff; }
nav a.active { background:var(--accent); color:#fff; font-weight:700; }
.nav-group { border-radius:9px; margin-top:6px; }
.nav-group summary { list-style:none; cursor:pointer; padding:10px 12px; border-radius:9px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9fb3c8; display:flex; align-items:center; gap:8px; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary::after { content:'▸'; font-size:11px; margin-left:auto; transition:transform .15s; }
.nav-group[open] summary::after { transform:rotate(90deg); }
.nav-group summary:hover { background:var(--nav2); color:#fff; }
.nav-group { display:flex; flex-direction:column; gap:3px; }
.nav-group > a { margin:0 0 0 10px; padding:9px 10px 9px 16px; font-size:13.5px; line-height:1.3; border-left:2px solid #ffffff1f; border-radius:0 8px 8px 0; }
.nav-group > a:hover, .nav-group > a.active { border-left-color:var(--accent); }
.nav-group[open] { padding-bottom:6px; margin-bottom:2px; }
.content { margin-left:270px; padding:0 28px 40px; min-height:100vh; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); margin-bottom:24px; }
.topbar strong { display:block; font-size:16px; }
.topbar small { color:var(--muted); }
h1 { margin:0; font-size:28px; }
h2 { margin:0 0 16px; font-size:18px; }
.muted { color:var(--muted); margin-top:5px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(160px,1fr)); gap:16px; margin:24px 0; }
.metric { background:var(--panel); border:1px solid var(--border); border-left:5px solid; border-radius:12px; padding:18px; min-height:105px; }
.metric span { display:block; color:var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; }
.metric strong { display:block; margin-top:14px; font-size:25px; }
.metric.green{border-left-color:var(--success)}.metric.red{border-left-color:#d94c4c}
.metric.blue{border-left-color:var(--info)}.metric.orange{border-left-color:#e58a2b}
.metric.purple{border-left-color:#7b61c9}.metric.teal{border-left-color:#268b86}
.panel { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; margin-top:20px; }
.novo-cadastro-panel summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;color:var(--accent);user-select:none}
.novo-cadastro-panel summary::-webkit-details-marker{display:none}
.novo-cadastro-panel summary::after{content:'';display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-left:8px;transition:transform .15s}
.novo-cadastro-panel[open] summary::after{transform:rotate(45deg)}
.novo-cadastro-panel[open] summary{margin-bottom:18px;display:block;border-bottom:1px solid var(--border);padding-bottom:14px}
.panel.narrow { max-width:650px; }
.panel-head,.page-title { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.page-title-actions { display:flex; align-items:center; gap:10px; }
.button,button { border:0; border-radius:9px; padding:10px 16px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; text-decoration:none; }
button:hover,.button:hover { filter:brightness(.95); }
button.danger { background:var(--danger); padding:7px 10px; }
/* Regras como ".panel label{display:block}" mais abaixo neste arquivo
   têm prioridade sobre o "[hidden]{display:none}" nativo do navegador
   (CSS de autor sempre vence o CSS de user-agent) — um elemento que o
   JS marca como hidden=true dentro de um .panel continuava aparecendo.
   Essa regra garante que o atributo hidden sempre esconda de verdade. */
[hidden] { display:none !important; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(190px,1fr)); gap:15px; }
label span { display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--muted); }
input,select,textarea { width:100%; border:1px solid #cfd9e3; border-radius:8px; padding:10px; font:inherit; background:#fff; }
textarea { resize:vertical; }
.form-actions { grid-column:1/-1; }
.search { display:flex; gap:8px; }
.search input { width:250px; }
.table-wrap { overflow:auto; }
.table-scroll-top { overflow-x:auto; overflow-y:hidden; height:16px; }
.table-scroll-top>div { height:1px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
/* O fundo é token (muda no modo escuro), então a cor do texto também
   precisa ser — com #506070 fixo o cabeçalho de TODA tabela do sistema
   virava cinza-escuro sobre azul-escuro no modo noturno. */
th { text-align:left; padding:10px; background:var(--info-bg); color:var(--muted); white-space:nowrap; }
td { padding:10px; border-bottom:1px solid #edf1f5; white-space:nowrap; }
tr:hover td { background:#fafcfe; }
/* Contas a receber/pagar (Financeiro): linhas mais baixas pra caber mais
   contas na tela sem rolar — só essas duas tabelas, não mexe no resto. */
.tabela-compacta th { padding:6px 10px; }
.tabela-compacta td { padding:4px 10px; }
.tabela-compacta .status { padding:2px 7px; font-size:12px; }
/* Coluna Ações (Boleto/PIX + valor + botão Pagar): elementos menores pra
   caber numa linha só, sem quebrar e engordar a altura da linha. */
.tabela-compacta .acao-celula { gap:4px; flex-wrap:nowrap; }
.tabela-compacta .acao-celula button { padding:5px 9px; font-size:12px; }
.tabela-compacta .acao-celula input,
.tabela-compacta .acao-celula select { padding:4px 6px; font-size:12px; }
.tabela-compacta .payment-inline-form input[type="text"] { width:60px; }
.status { padding:4px 8px; border-radius:20px; background:var(--info-bg); }
.empty { text-align:center; color:var(--muted); padding:30px; }
.flash { padding:12px 15px; border-radius:9px; margin-bottom:15px; background:var(--success-bg); color:var(--success-text); }
.flash.warning { background:#fff3cd; color:#7a5b00; }
@media (max-width:1000px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
}

.metric small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.muted.compact { margin:3px 0 0; font-size:12px; }

.userbox{font-size:13px;color:var(--muted)}.content.full{margin-left:0}.login-wrap{min-height:90vh;display:grid;place-items:center}.login-card{width:min(420px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:30px}.login-card form{display:grid;gap:16px}.login-brand{color:var(--text)}
.login-brand span{color:var(--accent)}.login-help{font-size:12px;color:var(--muted);margin-top:18px}
.login-resend{margin-top:6px}
.login-resend button{width:100%;background:#64756d}
.checkbox-field{display:flex!important;align-items:center;gap:9px;flex-direction:row}
.checkbox-field input{width:auto}
.route-list{list-style:decimal;padding-left:22px;display:grid;gap:14px}
.route-list li{background:var(--panel);border-radius:10px;padding:12px 14px;box-shadow:0 2px 8px #17352610}
.route-list li strong{display:block;margin-bottom:4px}
.route-list li span{display:block;color:var(--muted);font-size:.9rem}
.route-distance{font-weight:700;color:#147f45!important}
.route-list li .small-button{margin-top:8px;display:inline-block}
.chat-list{display:grid;gap:2px}
.chat-list-item{display:block;padding:12px 10px;border-bottom:1px solid var(--info-bg);text-decoration:none;color:inherit}
.chat-list-item:last-child{border-bottom:none}
.chat-list-title{font-weight:700;display:flex;align-items:center;gap:8px}
.chat-list-preview{display:block;color:var(--muted);font-size:.88rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-people-grid{display:flex;flex-wrap:wrap;gap:8px}
.chat-people-grid form{margin:0}
.chat-mensagens{display:flex;flex-direction:column;gap:10px;max-height:55vh;overflow-y:auto;padding:6px;margin-bottom:14px}
.chat-bolha{background:color-mix(in srgb, var(--text) 9%, var(--panel));border-radius:12px;padding:8px 12px;max-width:75%;align-self:flex-start}
.chat-bolha.minha{background:#147f45;color:#fff;align-self:flex-end}
.chat-bolha strong{display:block;font-size:.78rem;margin-bottom:2px;color:#147f45}
.chat-bolha.minha strong{color:#d9f2e3}
.chat-bolha p{margin:0;white-space:pre-wrap;word-break:break-word}
.chat-bolha span{display:block;font-size:.7rem;opacity:.7;margin-top:4px}
.chat-enviar-form{display:flex;gap:10px;align-items:flex-end}
.chat-enviar-form textarea{flex:1;resize:vertical}.actions{display:flex;gap:6px;align-items:center}.actions form{margin:0}.small-button{background:var(--accent);color:#fff;text-decoration:none;border-radius:10px;padding:7px 10px;font-weight:700;font-size:12.5px}
.small-button.blue{background:var(--accent)}
.button.secondary{background:color-mix(in srgb, var(--accent) 55%, #1a1a1a 45%);margin-left:8px}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:20px}.panel label{display:block;margin-bottom:14px}.panel.narrow form{display:grid;gap:14px}@media(max-width:900px){.sidebar{position:static;width:100%}.content{margin-left:0}.metrics{grid-template-columns:repeat(2,1fr)}}
.top-search{display:flex;gap:7px;flex:1;max-width:480px;margin:0 25px}.top-search input{min-width:0}.quick-links{display:flex;gap:8px;margin:14px 0}.metrics.four{grid-template-columns:repeat(4,1fr)}.global-search-form{display:flex;gap:10px}.global-search-form input{font-size:17px}.result-list{display:grid;gap:10px}.result-item{display:grid;grid-template-columns:110px 1fr 2fr auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:10px}.result-item a{font-weight:700;color:var(--info)}.result-type{font-size:12px;background:var(--info-bg);padding:5px 8px;border-radius:20px;text-align:center}.result-item small{color:var(--muted)}.inline-form{display:flex;gap:6px;align-items:center}.inline-form input{width:145px}.status-recebido{background:#d4edda;color:#1b5e20}.status-vencido{background:#f8d7da;color:#b71c1c}.status-previsto{background:#fff3cd;color:#7a5b00}.green-button{background:var(--success)}.alert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.alert-grid .panel{margin-top:0}.alert-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:11px 0;border-bottom:1px solid var(--border)}
.alert-row>div:first-child{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.alert-row span{color:var(--muted)}
.alert-row form{flex-shrink:0;margin:0}.ok-text{color:var(--success-text);font-weight:700}
.reajuste-estimativa{color:var(--success-text)!important;background:var(--success-bg);padding:4px 8px;border-radius:6px;display:inline-block;margin-top:3px;font-size:13px}
.prazo-contadores{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 14px}
.prazo-contador{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;border:1.5px solid transparent;color:var(--text);background:color-mix(in srgb, var(--text) 9%, var(--panel))}
.prazo-contador.prazo-aberto{background:color-mix(in srgb, var(--text) 9%, var(--panel));color:var(--text)}
.prazo-contador.prazo-concluido{background:var(--success-bg);color:var(--success-text)}
.prazo-contador.ativo{border-color:currentColor}
.urgent-banner{position:relative;background:linear-gradient(-45deg,#fef2f2,#fff,#fee2e2,#fff);background-size:300% 300%;border:1.5px solid var(--danger-bg);border-left:5px solid var(--danger);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:22px;overflow:hidden;animation:urgent-pulse-ring 2s ease-in-out infinite,urgent-gradient-shift 6s ease-in-out infinite,urgent-shake 4s ease-in-out infinite}
.urgent-banner h2{margin:0 0 14px;font-size:17px;color:var(--danger-text);display:flex;align-items:center;gap:8px}
.urgent-banner h2::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none;animation:urgent-pulse-dot 1.1s ease-in-out infinite}
.urgent-siren{display:inline-block;animation:urgent-siren-swing 1.4s ease-in-out infinite}
.urgent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.urgent-card{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--danger-bg);border-radius:var(--radius-md);padding:12px 14px;text-decoration:none;transition:transform .12s;animation:urgent-card-pop .4s ease-out backwards}
.urgent-card:nth-child(1){animation-delay:.03s}.urgent-card:nth-child(2){animation-delay:.09s}.urgent-card:nth-child(3){animation-delay:.15s}.urgent-card:nth-child(4){animation-delay:.21s}.urgent-card:nth-child(5){animation-delay:.27s}.urgent-card:nth-child(6){animation-delay:.33s}.urgent-card:nth-child(n+7){animation-delay:.36s}
.urgent-card:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 20px rgba(220,38,38,.22)}
.urgent-card strong{font-size:22px;color:var(--danger-text)}
.urgent-card span{font-size:12.5px;color:var(--muted);font-weight:600}
@keyframes urgent-pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.32)}50%{box-shadow:0 0 0 11px rgba(220,38,38,0)}}
@keyframes urgent-pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.4}}
@keyframes urgent-gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes urgent-shake{0%,92%,100%{transform:translateX(0)}93%{transform:translateX(-3px)}94%{transform:translateX(3px)}95%{transform:translateX(-3px)}96%{transform:translateX(3px)}97%{transform:translateX(-2px)}98%{transform:translateX(2px)}99%{transform:translateX(0)}}
@keyframes urgent-siren-swing{0%,100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(-18deg) scale(1.1)}75%{transform:rotate(18deg) scale(1.1)}}
@keyframes urgent-card-pop{0%{opacity:0;transform:translateY(6px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion: reduce){.urgent-banner,.urgent-banner h2::before,.urgent-siren,.urgent-card{animation:none}}
#botao-tema{display:block;width:100%;text-align:left;background:none;border:none;color:#e8eef5;padding:10px 12px;border-radius:9px;font-size:14px;cursor:pointer;font-family:inherit}
#botao-tema:hover{background:var(--nav2);color:#fff}
.botao-menu-mobile{display:none;background:none;border:1px solid var(--border);border-radius:8px;font-size:20px;line-height:1;padding:6px 12px;cursor:pointer;margin-right:12px;color:var(--text)}
@media(max-width:900px){
  .botao-menu-mobile{display:inline-block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:50;transform:translateX(-100%);transition:transform .2s ease;box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .sidebar.aberta{transform:translateX(0)}
  .content{margin-left:0!important}
  .topbar{gap:10px}
  .topbar>div:first-child{display:none}
}
.inline-edit-details{display:inline-block}
.inline-edit-details summary{cursor:pointer;list-style:none}
.inline-edit-details summary::-webkit-details-marker{display:none}
.inline-edit-form{margin-top:8px;background:color-mix(in srgb, var(--text) 4%, var(--panel));border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;width:220px;text-align:left}
.inline-edit-form label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:600;color:var(--muted)}
.inline-edit-form input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13.5px}
@media(max-width:900px){.top-search{display:none}.alert-grid{grid-template-columns:1fr}.metrics.four{grid-template-columns:repeat(2,1fr)}.result-item{grid-template-columns:1fr}.inline-form{flex-direction:column;align-items:stretch}}

.inline-action{padding:3px 8px;font-size:11px;margin-left:7px}
.charts-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin-top:20px}
.chart-panel{min-height:290px}
.bar-chart{height:220px;display:flex;align-items:flex-end;gap:14px;padding:15px 5px 0;border-bottom:1px solid var(--border)}
.bar-group{flex:1;text-align:center;min-width:45px}
.bar-values{height:185px;display:flex;align-items:flex-end;justify-content:center;gap:5px}
.bar{width:18px;min-height:2px;border-radius:5px 5px 0 0}
.bar.revenue,.legend.revenue{background:var(--success)}
.bar.expense,.legend.expense{background:#d94c4c}
.bar-group span{font-size:11px;color:var(--muted)}
.chart-legend{text-align:center;margin-top:12px;font-size:12px;color:var(--muted)}
.legend{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 4px 0 12px}
.horizontal-chart{display:grid;gap:15px;margin-top:20px}
.h-row{display:grid;grid-template-columns:110px 1fr 30px;gap:9px;align-items:center;font-size:12px}
.h-track{height:13px;background:color-mix(in srgb, var(--text) 9%, var(--panel));border-radius:10px;overflow:hidden}
.h-fill{height:100%;background:var(--info);border-radius:10px}
.h-fill.preventive{background:#d94c4c}
.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.calendar-toolbar h2{margin:0}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-header div{background:#17212b;color:#fff;padding:10px;text-align:center;font-weight:700}
.calendar-day{min-height:125px;border:1px solid var(--border);padding:7px;background:var(--panel);overflow:hidden}
.calendar-day.other-month{background:color-mix(in srgb, var(--text) 4%, var(--panel));color:var(--muted)}
.calendar-day.today{outline:3px solid var(--accent);outline-offset:-3px}
.day-number{font-weight:800;margin-bottom:5px}
.calendar-event{display:block;text-decoration:none;background:#e7f0fb;color:#254968;border-left:4px solid var(--info);border-radius:5px;padding:5px;margin:4px 0;font-size:11px}
.calendar-event small{display:block;color:#617789;margin-top:2px}
.calendar-event.prioridade-urgente,.calendar-event.prioridade-alta{background:#fde8e8;border-left-color:#d94c4c;color:#812929}
.logo-preview{max-width:320px;max-height:120px;object-fit:contain;border:1px solid var(--border);padding:10px;border-radius:10px;background:#fff;margin-bottom:12px}
@media(max-width:1100px){.charts-grid{grid-template-columns:1fr}.calendar-day{min-height:100px}}

.action-row{display:flex;gap:9px;flex-wrap:wrap}
.how-to-list{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.how-to-list li{line-height:1.5}
.how-to-list code{background:color-mix(in srgb, var(--text) 4%, var(--panel));padding:2px 6px;border-radius:5px;font-size:.92em}
.badge-atencao{display:inline-block;background:var(--warning-bg);color:var(--warning-text);padding:2px 8px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.crm-timeline{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--border);margin-left:8px;padding-left:20px}
.crm-evento{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 0;position:relative}
.crm-evento::before{content:'';position:absolute;left:-26px;top:18px;width:10px;height:10px;border-radius:50%;background:#94a3b8}
.crm-evento-interacao::before{background:var(--info)}
.crm-evento-aprovacao::before{background:var(--success)}
.crm-evento-os::before{background:var(--warning)}
.crm-evento-ocorrencia::before{background:var(--danger)}
.crm-evento-data{color:var(--muted);font-size:13px;font-weight:600}
.crm-evento-tipo{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:2px}
.crm-evento-corpo p{margin:4px 0}
.filter-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.chart-card{background:var(--panel);border-radius:14px;padding:20px 22px;box-shadow:0 1px 3px #0001}
.chart-card h2{margin:0 0 14px;font-size:16px}
.chart-card canvas{max-height:280px}
.chart-card-wide{grid-column:1/-1}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.action-row{display:none!important}.content{margin:0!important}.charts-grid{grid-template-columns:1fr}.chart-card{break-inside:avoid;box-shadow:none;border:1px solid var(--border)}}
.stock-metrics{grid-template-columns:repeat(4,minmax(160px,1fr))}
.stock-critical-row td{background:#fff3f3}
.actions-cell{display:flex;gap:5px;flex-wrap:wrap;min-width:300px}
.barcode-panel{max-width:1050px}
.barcode-label span{font-size:15px}
.barcode-input{font-size:25px;font-weight:800;letter-spacing:2px;padding:17px;border:3px solid var(--info);background:color-mix(in srgb, var(--text) 4%, var(--panel))}
.piece-result{margin:18px 0;padding:18px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb, var(--text) 4%, var(--panel));display:flex;justify-content:space-between;align-items:center;gap:20px}
.piece-result.hidden{display:none}
.piece-kicker{font-size:11px;text-transform:uppercase;font-weight:800;color:var(--success)}
.piece-result h2{margin:5px 0}
.piece-result p{margin:0;color:var(--muted)}
.stock-balance{text-align:center;min-width:160px}
.stock-balance span,.stock-balance small{display:block;color:var(--muted)}
.stock-balance strong{display:block;font-size:36px;color:var(--info-text);margin:4px}
.movement-form{margin-top:12px}
.wide-field{grid-column:1/-1}
.form-section-title{grid-column:1/-1;margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--border);font-size:15px;color:var(--text)}
.equip-unidade-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:10px 0;border-bottom:1px dashed #e2e8f0}
.equip-unidade-row label{flex:1;min-width:120px}
.equip-unidade-label{font-weight:700;color:var(--text);min-width:90px}
.equip-remove-btn{padding:6px 10px;line-height:1;margin-bottom:2px}
.equip-fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.equip-foto-item{border:1px solid #e2e8f0;border-radius:10px;padding:8px;text-align:center;background:color-mix(in srgb, var(--text) 4%, var(--panel))}
.equip-foto-item img{width:100%;height:120px;object-fit:cover;border-radius:6px;margin-bottom:6px}
.equip-foto-categoria{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px}
.report-list{display:grid;gap:2px}
.report-item{display:flex;align-items:center;justify-content:space-between;padding:10px 6px;border-bottom:1px solid var(--info-bg)}
.report-item:last-child{border-bottom:none}
.report-name{flex:1}
/* #94a3b8 e o cinza do tema escuro; fixo aqui, ficava lavado no claro (2.6:1) */
.report-unavailable{color:var(--muted);font-size:.85rem;font-style:italic;cursor:help}
.totals-row td{border-top:2px solid var(--muted);background:color-mix(in srgb, var(--text) 4%, var(--panel))}
.loading-piece,.not-found-piece{width:100%;text-align:center;padding:15px;font-weight:700}
.not-found-piece{color:#b93b3b;background:#fdeaea;border-radius:9px}
.movement-badge{display:inline-block;padding:4px 9px;border-radius:20px;font-weight:800;font-size:11px}
.movement-badge.in{background:#dff3e7;color:#216b43}
.movement-badge.out{background:#fde4e4;color:#9a3030}
@media(max-width:900px){
  .stock-metrics{grid-template-columns:repeat(2,1fr)}
  .piece-result{align-items:flex-start;flex-direction:column}
}

.inline-stock-form{display:grid;grid-template-columns:1fr 160px auto;gap:12px;align-items:end;margin-bottom:18px}.finish-panel{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--success)}.finish-button{background:var(--success);font-size:16px;padding:14px 22px}.completed-badge{padding:12px 18px;background:#dff3e7;color:#216b43;border-radius:9px;font-weight:900}

.os-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.compact-panel{margin:0;min-height:95px}.compact-panel span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:800}.compact-panel strong{display:block;font-size:20px;margin-top:12px}
.service-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.service-sections article{border:1px solid var(--border);background:color-mix(in srgb, var(--text) 4%, var(--panel));border-radius:10px;padding:15px}.service-sections h3{margin:0 0 8px;font-size:14px}.service-sections p{white-space:pre-wrap;margin:0;color:var(--muted)}
.two-column-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.photo-card,.signature-card{border:1px solid var(--border);border-radius:9px;padding:8px;background:var(--panel)}.photo-card img{width:100%;height:125px;object-fit:cover;border-radius:6px}.photo-card b,.photo-card small,.signature-card b,.signature-card small{display:block;margin-top:5px}.file-placeholder{height:125px;display:flex;align-items:center;justify-content:center;background:var(--info-bg);color:var(--danger-text);font-size:25px;font-weight:900;border-radius:6px}
#signatureCanvas{width:100%;height:220px;border:2px dashed #9eacb9;border-radius:10px;background:#fff;touch-action:none;margin:12px 0;cursor:crosshair}.signature-actions{display:flex;gap:9px}.saved-signatures{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.signature-card img{width:100%;height:95px;object-fit:contain;background:#fff}.mini-button{padding:6px 9px;font-size:12px;margin-top:7px}
@media(max-width:1050px){.os-summary-grid{grid-template-columns:repeat(2,1fr)}.two-column-grid,.service-sections{grid-template-columns:1fr}}
@media(max-width:700px){.inline-stock-form{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,1fr)}}

.stock-thumb{width:56px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--border);background:#fff}.empty-thumb{display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted)}.piece-photo-preview{max-width:420px;max-height:260px;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:#fff;padding:8px;margin-bottom:14px}.inventory-current{padding:18px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb, var(--text) 4%, var(--panel));text-align:center;margin-bottom:18px}.inventory-current span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:800}.inventory-current strong{display:block;font-size:42px;color:var(--info-text)}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}@media(max-width:1050px){.report-grid{grid-template-columns:1fr}}

.photo-upload-field{grid-column:1/-1;max-width:420px;padding:14px;border:1px dashed #9eacb9;border-radius:10px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}
.photo-upload-field small{display:block;margin-top:6px;color:var(--muted)}

.finish-workflow{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;align-items:end;width:100%}.finish-workflow .finish-button{grid-column:1/-1}.button.danger{background:var(--danger)}@media(max-width:900px){.finish-workflow{grid-template-columns:1fr}}

/* Safelift ERP v2.1 — Status Coloridos */
.status-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.15;white-space:nowrap;border:1px solid transparent;box-shadow:0 1px 2px rgba(15,23,42,.06)}
/* O ponto do selo era um emoji (⚪ 🟠 ✅...), e emoji e desenhado de um
   jeito em cada aparelho — Windows, Android e iPhone mostram cada um o
   seu, sem acompanhar a cor do status. Aqui ele vira um ponto desenhado
   por CSS que herda a cor do proprio selo: mesma aparencia em qualquer
   tela. O emoji continua no HTML (nao muda nada pra quem le a pagina por
   leitor de tela), so deixa de ser exibido. */
/* Seletor com as duas classes de proposito: telas de detalhe tem regras
   como '.compact-panel span' que, por serem mais especificas que
   '.status-dot' sozinho, sobrescreviam tamanho e cor do ponto — era por
   isso que ali o ponto nao acompanhava a cor do status. */
.status-badge .status-dot{width:7px;height:7px;border-radius:50%;color:inherit;background:currentColor;font-size:0;line-height:0;flex-shrink:0;display:inline-block;margin:0;text-transform:none}
.status-green{background:#DCFCE7!important;color:#166534!important;border-color:#86EFAC!important}
.status-yellow{background:#FEF3C7!important;color:#92400E!important;border-color:#FCD34D!important}
.status-red{background:#FEE2E2!important;color:#991B1B!important;border-color:#FCA5A5!important}
.status-blue{background:#DBEAFE!important;color:#1E40AF!important;border-color:#93C5FD!important}
.status-purple{background:#F3E8FF!important;color:#6B21A8!important;border-color:#D8B4FE!important}
.status-indigo{background:#E0E7FF!important;color:#3730A3!important;border-color:#A5B4FC!important}
.status-teal{background:#CCFBF1!important;color:#115E59!important;border-color:#5EEAD4!important}
.status-orange{background:#FFEDD5!important;color:#9A3412!important;border-color:#FDBA74!important}
.status-neutral{background:#F1F5F9!important;color:#475569!important;border-color:#CBD5E1!important}
.status-dark{background:#E2E8F0!important;color:#1E293B!important;border-color:#94A3B8!important}
.priority-low{background:#DCFCE7!important;color:#166534!important;border-color:#86EFAC!important}
.priority-medium{background:#FEF3C7!important;color:#92400E!important;border-color:#FCD34D!important}
.priority-high{background:#FFEDD5!important;color:#9A3412!important;border-color:#FDBA74!important}
.priority-urgent{background:#FEE2E2!important;color:#991B1B!important;border-color:#FCA5A5!important;animation:statusPulse 1.8s ease-in-out infinite}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.10)}50%{box-shadow:0 0 0 5px rgba(220,38,38,.08)}}
.h-fill.status-green{background:#22C55E!important}.h-fill.status-yellow{background:#EAB308!important}.h-fill.status-red{background:#EF4444!important}.h-fill.status-blue{background:#3B82F6!important}.h-fill.status-purple{background:#A855F7!important}.h-fill.status-orange{background:#F97316!important}.h-fill.status-neutral{background:#94A3B8!important}
.compact-panel .status-badge{font-size:12px;padding:7px 12px}
td .status-badge{vertical-align:middle}
@media(max-width:700px){.status-badge{white-space:normal;text-align:left}}

.dashboard-shortcuts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 22px}
.dashboard-shortcut,.shortcut-preview{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 16px;border-radius:9px;font-weight:800;text-decoration:none;color:#fff;box-shadow:0 2px 6px rgba(15,23,42,.12)}
.dashboard-shortcut:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(15,23,42,.18)}
.shortcut-vermelho{background:var(--danger)}.shortcut-laranja{background:#c05621}
.shortcut-amarelo{background:var(--warning);color:#30250a}.shortcut-verde{background:var(--success)}
.shortcut-azul{background:var(--info)}.shortcut-roxo{background:#7753b7}
.shortcut-escuro{background:#263442}.shortcut-cinza{background:#687684}
.shortcut-form-grid{display:grid;grid-template-columns:2fr 2fr 1fr 110px 130px auto;gap:12px;align-items:end}
.panel-heading-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.shortcut-config-list{display:grid;gap:12px}.shortcut-config-wrapper{border:1px solid var(--border);border-radius:11px;padding:12px;background:var(--panel)}
.shortcut-config-card{display:grid;grid-template-columns:170px 1.4fr 1.5fr 120px 90px 105px auto;gap:10px;align-items:end}
.shortcut-preview{min-width:145px}.shortcut-delete-form{display:flex;justify-content:flex-end;margin-top:8px}
@media(max-width:1200px){.shortcut-form-grid,.shortcut-config-card{grid-template-columns:repeat(2,1fr)}.shortcut-preview{grid-column:1/-1}}
.dashboard-card-config-row{display:grid;grid-template-columns:1.4fr 100px 130px 105px;gap:10px;align-items:end}
.dashboard-card-config-preview{min-height:auto;padding:10px 14px}
.dashboard-card-config-preview span{font-size:12px}
@media(max-width:700px){.dashboard-card-config-row{grid-template-columns:1fr}}
.finance-cards-secao{display:grid;gap:12px;margin-bottom:22px}
.finance-cards-secao-titulo{margin:18px 0 2px;font-size:14px;color:var(--muted)}
@media(max-width:700px){.shortcut-form-grid,.shortcut-config-card{grid-template-columns:1fr}.panel-heading-row{align-items:flex-start;flex-direction:column}}

.readonly-field{background:var(--info-bg)!important;color:var(--text)!important;font-weight:700;cursor:not-allowed}
label small{display:block;margin-top:5px;color:var(--muted);font-size:11px}

.goals-summary{margin-bottom:18px}.goal-form-grid{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 1fr 1fr;gap:12px;align-items:end}.goal-manual-field{grid-column:span 2}.goal-observation{grid-column:span 4}.goals-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.goals-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.goal-card{border:1px solid var(--border);border-left:6px solid #64748b;border-radius:12px;padding:16px;background:var(--panel);box-shadow:0 3px 10px rgba(15,23,42,.06)}.goal-card.goal-atingida{border-left-color:var(--success)}.goal-card.goal-proxima{border-left-color:var(--info)}.goal-card.goal-andamento{border-left-color:var(--warning)}.goal-card.goal-inicio{border-left-color:var(--danger)}.goal-card-head,.dashboard-goal-title,.dashboard-goal-values{display:flex;justify-content:space-between;gap:12px}.goal-card-head{align-items:flex-start;margin-bottom:14px}.goal-card h3{margin:0 0 3px;font-size:17px}.goal-card small{color:var(--muted)}.goal-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.goal-numbers div{padding:10px;border-radius:8px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}.goal-numbers span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800}.goal-numbers strong{display:block;margin-top:4px;font-size:16px}.goal-progress{height:12px;border-radius:999px;background:color-mix(in srgb, var(--text) 9%, var(--panel));overflow:hidden}.goal-progress.compact{height:9px;margin:9px 0}.goal-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--info),var(--success))}.goal-note{margin:12px 0 0;padding:10px;border-radius:8px;background:var(--warning-bg)}.goal-edit{margin-top:12px}.goal-edit summary{cursor:pointer;font-weight:800;color:var(--info)}.goal-edit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}.dashboard-goals-panel{margin:18px 0}.dashboard-goals-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dashboard-goal{border:1px solid var(--border);border-top:5px solid #64748b;border-radius:10px;padding:13px;background:var(--panel)}.dashboard-goal.goal-atingida{border-top-color:var(--success)}.dashboard-goal.goal-proxima{border-top-color:var(--info)}.dashboard-goal.goal-andamento{border-top-color:var(--warning)}.dashboard-goal.goal-inicio{border-top-color:var(--danger)}.dashboard-goal-title strong{font-size:14px}.dashboard-goal-title span{font-weight:900}.dashboard-goal-values{font-size:12px;color:var(--muted)}.empty-goals{grid-column:1/-1;text-align:center;padding:18px}.goal-comparar-check{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;white-space:nowrap}.comparar-metas-modos{display:flex;gap:8px}.comparar-metas-modo-btn.is-active{background:var(--info);color:#fff;border-color:var(--info)}.comparar-metas-lista{display:flex;flex-direction:column;gap:10px;margin-top:14px}.comparar-metas-item{display:grid;grid-template-columns:14px 1fr 2fr auto;align-items:center;gap:10px}.comparar-metas-item .goal-progress{margin:0}.comparar-metas-nome{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comparar-metas-cor{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}.comparar-metas-pizza{display:flex;align-items:center;gap:24px;margin-top:14px;flex-wrap:wrap}.comparar-metas-legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.comparar-metas-legenda li{display:flex;align-items:center;gap:8px;font-size:14px}@media(max-width:800px){.comparar-metas-item{grid-template-columns:14px 1fr;grid-template-areas:'cor nome' 'barra barra' 'pct pct'}}
@media(max-width:1200px){.goal-form-grid{grid-template-columns:repeat(3,1fr)}.goal-observation{grid-column:span 2}.dashboard-goals-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.goal-form-grid,.goals-grid,.goal-edit-grid,.dashboard-goals-grid{grid-template-columns:1fr}.goal-manual-field,.goal-observation{grid-column:auto}.goal-numbers{grid-template-columns:1fr}}

.installment-summary{margin-bottom:18px}.installment-form-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;align-items:end}.installment-description{grid-column:span 2}.installment-observation{grid-column:span 3}.installment-help{margin-top:14px;padding:10px;border-radius:8px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}.installment-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form{display:inline}.button.small,button.small{padding:6px 9px;font-size:12px}.installment-details{margin-top:18px}.installment-action{margin:4px 0}.installment-action summary{cursor:pointer;font-weight:800;color:var(--info)}.installment-action form{min-width:260px;display:grid;gap:8px;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.date-control{display:flex;width:100%;min-width:0;border:1px solid var(--border);border-radius:9px;padding:8px 10px;background:var(--panel)}.date-control input{display:block;width:100%;min-width:0;border:0;background:transparent;padding:0}@media(max-width:1100px){.installment-form-grid{grid-template-columns:repeat(2,1fr)}.installment-description,.installment-observation{grid-column:auto}}@media(max-width:700px){.installment-form-grid{grid-template-columns:1fr}.installment-filter{align-items:stretch;flex-direction:column}}

.contract-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}.contract-wide{grid-column:span 2}@media(max-width:900px){.contract-form-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.contract-form-grid{grid-template-columns:1fr}.contract-wide{grid-column:auto}}

/* Safelift ERP Professional v3.0.0 */
.professional-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.professional-card{display:grid;grid-template-columns:150px 1fr;border:1px solid var(--border);border-left:6px solid #64748b;border-radius:14px;background:var(--panel);overflow:hidden}
.professional-card.status-parado{border-left-color:#d64545}.professional-card.status-pendente{border-left-color:#e6a623}.professional-card.status-operando{border-left-color:var(--success)}.professional-card.status-manutencao{border-left-color:var(--info)}
.professional-photo,.profile-photo{background:var(--info-bg);min-height:140px}.professional-photo img,.profile-photo img{width:100%;height:100%;object-fit:cover}.photo-placeholder{height:100%;min-height:140px;display:grid;place-items:center;font-size:54px}
.professional-info{padding:16px}.professional-head,.technical-result-head,.technical-profile-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.professional-head h3,.technical-result h3{margin:0 0 4px}.technical-note{padding:9px;border-radius:8px;background:var(--warning-bg)}.card-actions,.report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.technical-search-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}.technical-result{border:1px solid var(--border);border-left:5px solid var(--info);border-radius:12px;padding:16px;margin:12px 0;background:var(--panel)}.technical-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.days-stopped{display:block;margin-top:5px;font-weight:800;color:#d64545}
.technical-profile-top{align-items:stretch}.profile-photo{width:230px;border-radius:12px;overflow:hidden}.profile-summary{flex:1;padding:15px}.profile-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.profile-wide{grid-column:span 2}.document-form{display:grid;grid-template-columns:1fr 2fr 2fr auto;gap:10px;align-items:end}.document-list{display:grid;gap:8px;margin-top:14px}.document-list a{padding:10px;border:1px solid var(--border);border-radius:8px}
@media(max-width:1100px){.professional-grid{grid-template-columns:1fr}.technical-search-grid,.profile-form-grid{grid-template-columns:repeat(2,1fr)}.document-form{grid-template-columns:1fr 1fr}.profile-wide{grid-column:auto}}
@media(max-width:700px){.professional-card{grid-template-columns:1fr}.technical-columns,.technical-search-grid,.profile-form-grid,.document-form{grid-template-columns:1fr}.technical-profile-top{flex-direction:column}.profile-photo{width:100%}}
@media print{.sidebar,.topbar,.report-actions,button,.button{display:none!important}.content{margin:0!important;padding:0!important}.panel{box-shadow:none!important;border:0!important}}

/* Fase 2 — padrões globais de consistência e acessibilidade */
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
a,button,input,select,textarea{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f1b933}
/* Link solto dentro do conteudo (sem classe de botao/aba/menu) nao tinha
   cor definida: caia no azul padrao do navegador (#0000EE), que destoa da
   identidade no tema claro e fica ilegivel sobre o painel escuro (1.9:1).
   Restrito a .content e a :not([class]) pra nao afetar botoes nem o menu. */
.content a:not([class]){color:var(--info-text);font-weight:600}
.content a:not([class]):hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.panel,.table-wrap{max-width:100%}
.table-wrap{overflow-x:auto}
@media(max-width:700px){.content{overflow-x:hidden}.topbar{align-items:stretch}.top-search{width:100%}.top-search input{min-width:0;width:100%}}
.preventive-status{display:inline-block;padding:.32rem .58rem;border-radius:999px;font-weight:700;white-space:nowrap}
.preventive-status.aberto{background:#e5e7eb;color:#374151}
.preventive-status.concluido{background:var(--success-bg);color:var(--success-text)}
.preventive-status.neutro{background:#e5e7eb;color:#374151}
.preventivas-agrupadas td{vertical-align:top}
.preventiva-cliente-row td{padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.preventiva-equip-list{display:flex;flex-direction:column;gap:8px}
.preventiva-equip-item{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--border)}
.preventiva-equip-item:last-child{border-bottom:none}
.preventiva-equip-actions{display:flex;gap:6px;flex-wrap:wrap}

/* v3.13.1 — Financeiro unificado */
.finance-tabs{display:flex;grid-template-columns:none;gap:8px;flex-wrap:wrap;margin:18px 0 6px;padding:8px;background:color-mix(in srgb, var(--text) 9%, var(--panel));border:1px solid var(--border);border-radius:12px}
.finance-tabs a{color:var(--text);background:var(--panel);border:1px solid var(--border);padding:9px 13px;border-radius:8px;font-weight:800;text-decoration:none}
.finance-tabs a:hover,.finance-tabs a.active{color:#fff;background:var(--info);border-color:var(--info)}
.finance-competence label{min-width:190px}.finance-overview p{max-width:920px;line-height:1.55}
.payable-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.payable-wide{grid-column:span 2}.payable-filter{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.payable-filter input,.payable-filter select{min-width:150px}
.table-note{display:block;margin-top:4px;color:var(--muted)}button.warning{background:#d68a1f}
.link-button{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
@media(max-width:1050px){.payable-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.finance-tabs{display:grid;grid-template-columns:1fr 1fr}.finance-tabs a{text-align:center}.payable-form-grid{grid-template-columns:1fr}.payable-wide{grid-column:auto}.payable-filter{align-items:stretch;flex-direction:column}.payable-filter input,.payable-filter select{width:100%}.finance-competence{width:100%}}

/* v3.14.0 — homologação, estabilidade e segurança */
.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.health-item{position:relative;border:1px solid var(--border);border-left:6px solid #64748b;border-radius:10px;padding:14px;background:var(--panel)}.health-item>span{position:absolute;right:12px;top:12px;font-size:11px;font-weight:900}.health-item p{margin:9px 0 4px}.health-item small{display:block;color:var(--muted);overflow-wrap:anywhere}.health-ok{border-left-color:var(--success)}.health-ok>span{color:var(--success-text)}.health-aviso{border-left-color:var(--warning)}.health-aviso>span{color:var(--warning-text)}.health-erro{border-left-color:var(--danger)}.health-erro>span{color:var(--danger-text)}.system-summary{font-size:12px;color:var(--muted)}.restore-form{display:grid;grid-template-columns:minmax(150px,1fr) auto;gap:7px}.error-panel{margin:40px auto}.error-panel p{line-height:1.6;margin:18px 0}@media(max-width:800px){.health-grid{grid-template-columns:1fr}.restore-form{grid-template-columns:1fr}}

/* v3.8 — usuários e auditoria */
.access-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.access-form-grid .form-actions{grid-column:1/-1;display:flex;gap:10px}.block-muted,.block-warning{display:block;margin-top:5px;font-size:11px}.block-muted{color:var(--muted)}.block-warning{color:var(--warning-text);font-weight:800}.audit-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.audit-filter label{min-width:190px}.audit-details{max-width:430px;white-space:normal;overflow-wrap:anywhere;font-size:12px}.button.secondary{background:color-mix(in srgb, var(--accent) 55%, #1a1a1a 45%)}@media(max-width:700px){.access-form-grid{grid-template-columns:1fr}.access-form-grid .form-actions{grid-column:auto}.audit-filter{align-items:stretch;flex-direction:column}.audit-filter label{width:100%}}

/* v3.15.0 — documentos comerciais e aprovação por e-mail */
.document-page-title{align-items:flex-start}.document-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.document-type-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}.document-type-guide article{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--panel)}.document-type-guide article>strong{display:grid;place-items:center;min-width:52px;height:42px;border-radius:9px;background:var(--info);color:#fff}.document-type-guide article div b,.document-type-guide article div span{display:block}.document-type-guide article div span{margin-top:3px;color:var(--muted);font-size:12px}.document-alert{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:6px solid var(--warning)}.document-alert p{margin:5px 0 0}.document-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.document-filter-head{align-items:flex-end}.document-toolbar,.document-filter{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}.document-filter label{min-width:170px}.document-filter label span{display:block;margin-bottom:4px;font-size:11px;font-weight:800;color:var(--muted)}
.document-editor{display:grid;gap:0}.document-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.document-wide{grid-column:span 2}.elevator-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.elevator-choice{display:flex!important;gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb, var(--text) 4%, var(--panel));cursor:pointer}.elevator-choice:has(input:checked){border-color:var(--info);background:var(--info-bg);box-shadow:0 0 0 1px var(--info)}.elevator-choice input{width:auto;margin-top:3px}.elevator-choice span b,.elevator-choice span small{display:block}.elevator-choice span small{margin-top:3px;color:var(--muted)}.repair-items{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.repair-items h3{margin:0}.repair-item-row{display:grid;grid-template-columns:minmax(280px,3fr) 110px 150px 150px 42px;gap:9px;align-items:end;padding:10px;margin-top:9px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}.repair-item-row .item-description textarea{min-height:66px}.repair-item-row .remove-item{height:42px;padding:0;font-size:22px}.document-save-bar{position:sticky;bottom:0;z-index:4;display:flex;justify-content:flex-end;gap:10px;margin:0 0 20px;padding:13px 16px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 -5px 18px rgba(15,23,42,.08);backdrop-filter:blur(8px)}
.desconto-destaque{grid-column:1/-1;background:var(--success-bg);border:2px solid var(--success);border-radius:10px;padding:12px 16px;font-size:15px;color:var(--success-text)}
.document-status-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:18px;overflow:hidden;border:1px solid var(--border);border-left:7px solid #64748b;border-radius:12px;background:var(--border)}.document-status-hero>div{padding:15px;background:var(--panel)}.document-status-hero span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.document-status-hero strong{display:block;margin-top:7px;font-size:16px}.document-status-hero.status-aprovado,.document-status-hero.status-concluído{border-left-color:var(--success)}.document-status-hero.status-aguardando-aprovação{border-left-color:#dc7b22}.document-status-hero.status-autorizado{border-left-color:#d4a017}.document-status-hero.status-recusado,.document-status-hero.status-falha-no-envio{border-left-color:var(--danger)}.document-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.document-definition-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--border);border:1px solid var(--border);border-radius:9px;overflow:hidden}.document-definition-list div{padding:10px;background:var(--panel)}.document-definition-list dt{font-size:10px;text-transform:uppercase;font-weight:800;color:var(--muted)}.document-definition-list dd{margin:4px 0 0;font-weight:700;overflow-wrap:anywhere}.pre-line{white-space:pre-line}.document-chip-list{display:flex;flex-wrap:wrap;gap:7px}.document-chip-list span{padding:7px 10px;border-radius:999px;background:var(--info-bg);color:var(--info-text);font-weight:800;font-size:12px}.approval-panel{border-top:5px solid var(--info-text)}.approval-send-form{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end;margin-top:14px}.inline-warning{margin:10px 0;padding:10px;border-radius:8px;background:var(--warning-bg);color:var(--warning-text);font-weight:700}.approval-received{padding:14px;border-radius:9px;background:var(--success-bg);color:var(--success-text)}.approval-received p{margin:6px 0 0}.whatsapp-button{display:inline-flex;margin-top:12px;background:var(--success)!important;color:#fff!important}
.manual-approval-box{margin-top:16px;border:1px dashed var(--border);border-radius:9px;padding:12px 14px}
.manual-approval-box summary{cursor:pointer;font-weight:700;color:var(--info-text)}
.manual-approval-box .approval-send-form{grid-template-columns:1fr 1fr}
.manual-approval-actions{display:flex;gap:10px;grid-column:1/-1}
.email-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.email-status-grid article{padding:13px;border:1px solid var(--border);border-left:6px solid #64748b;border-radius:10px;background:var(--panel)}.email-status-grid article span,.email-status-grid article strong{display:block}.email-status-grid article span{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:800}.email-status-grid article strong{margin-top:6px}.email-status-grid article.ready{border-left-color:var(--success)}.email-status-grid article.pending{border-left-color:var(--warning)}.email-status-grid article.optional{border-left-color:var(--info)}.secret-help pre{overflow-x:auto;padding:12px;border-radius:8px;background:#17212b;color:#edf4f8}.email-settings-form .document-save-bar{margin-top:14px}
.public-approval-shell{max-width:720px;margin:22px auto 48px}.public-approval-brand{text-align:center;margin-bottom:16px;color:var(--info-text)}.public-approval-brand strong,.public-approval-brand span{display:block}.public-approval-brand strong{font-size:29px;letter-spacing:2px}.public-approval-brand span{font-size:12px}.public-approval-card{padding:28px;border:1px solid var(--border);border-top:7px solid #c2451f;border-radius:15px;background:var(--panel);box-shadow:0 12px 36px rgba(15,23,42,.12)}.public-approval-card h1{margin:5px 0;font-size:32px;color:var(--info-text)}.approval-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#c2451f}.approval-subtitle{margin-top:4px;color:var(--muted)}.approval-value{display:flex;align-items:center;justify-content:space-between;margin:20px 0;padding:14px;border-radius:10px;background:color-mix(in srgb, var(--text) 9%, var(--panel))}.approval-value span{font-weight:800;color:var(--muted)}.approval-value strong{font-size:23px;color:var(--info-text)}.public-approval-form{display:grid;gap:13px;margin-top:18px}.approval-confirm{display:flex!important;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}.approval-confirm input{width:auto;margin-top:3px}.approval-decision-buttons{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}.approve-button{background:var(--success)}.reject-button{background:var(--danger)}.approval-expiry{display:block;margin-top:12px;color:var(--muted)}.approval-result{margin:16px 0;padding:15px;border-radius:10px}.approval-result p{margin:7px 0 0}.approval-result.success{background:#e8f7ee;color:#216b43}.approval-result.danger{background:#fdeaea;color:#9a3030}.approval-result.warning{background:var(--warning-bg);color:var(--warning-text)}.public-approval-footer{text-align:center;color:var(--muted);font-size:12px;margin-top:15px}
.survey-stars{display:flex;gap:10px;justify-content:center;margin:10px 0}
.survey-star{cursor:pointer}
.survey-star input{position:absolute;opacity:0;width:0;height:0}
.survey-star span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:2px solid #d5dde5;font-weight:800;color:#5c6b7a;transition:.15s}
.survey-star input:checked+span{background:#db5a35;border-color:#db5a35;color:#fff}
.survey-star.survey-choice span{width:auto;height:auto;padding:10px 18px;border-radius:20px;white-space:nowrap}
.survey-form textarea{width:100%}
.survey-form>label>span{font-weight:800;color:var(--info-text)}
@media(max-width:1100px){.document-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.document-wide{grid-column:auto}.elevator-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.repair-item-row{grid-template-columns:2fr 100px 130px 130px 42px}.document-detail-grid{grid-template-columns:1fr}.approval-send-form{grid-template-columns:1fr 1fr}.approval-send-form button{grid-column:1/-1}.email-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.document-actions,.document-filter,.document-toolbar{width:100%}.document-actions>*{flex:1;text-align:center}.document-type-guide,.document-metrics,.document-status-hero,.email-status-grid{grid-template-columns:1fr 1fr}.document-form-grid,.elevator-choice-grid,.repair-item-row,.approval-send-form{grid-template-columns:1fr}.repair-item-row .remove-item{justify-self:end;width:44px}.document-definition-list{grid-template-columns:1fr}.document-save-bar{position:static}.approval-decision-buttons{grid-template-columns:1fr}.public-approval-card{padding:20px}}
@media(max-width:500px){.document-type-guide,.document-metrics,.document-status-hero,.email-status-grid{grid-template-columns:1fr}.public-approval-card h1{font-size:26px}}

/* v3.15.1 — avisos de vencimento */
.billing-alert-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:14px 0 18px;padding:14px 16px;border:1px solid #f0c36a;border-left:7px solid #dc7b22;border-radius:11px;background:var(--warning-bg);color:var(--warning-text);text-decoration:none;box-shadow:0 3px 10px rgba(15,23,42,.06)}
.billing-alert-banner>span{font-size:25px}.billing-alert-banner strong{font-size:15px}.billing-alert-banner small{color:var(--warning-text);font-weight:700}.reminder-safety-note{margin:14px 0 18px}.reminder-list{display:grid;gap:14px}.reminder-card{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;padding:16px;border:1px solid var(--border);border-left:7px solid var(--warning);border-radius:12px;background:var(--panel)}.reminder-card.reminder-today{border-left-color:#c05621;background:color-mix(in srgb, var(--warning) 7%, var(--panel))}.reminder-card.reminder-overdue{border-left-color:var(--danger);background:color-mix(in srgb, var(--danger) 6%, var(--panel))}.reminder-card.reminder-notified{opacity:.86}.reminder-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.reminder-stage{display:inline-block;padding:5px 9px;border-radius:999px;background:var(--warning-bg);color:var(--warning-text);font-size:12px;font-weight:900}.reminder-overdue .reminder-stage{background:var(--danger-bg);color:var(--danger-text)}.reminder-today .reminder-stage{background:#ffedd5;color:#9a3412}.reminder-card h3{margin:10px 0 4px}.reminder-card p{margin:4px 0;color:var(--muted)}.reminder-details{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.reminder-details span{padding:7px 9px;border-radius:7px;background:color-mix(in srgb, var(--text) 6%, var(--panel));font-size:12px}.reminder-record-actions{display:flex;gap:8px;margin-top:10px}.reminder-actions{display:grid;grid-template-columns:1fr;gap:10px}.reminder-channel{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:11px;border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}.reminder-channel>.button,.reminder-channel>form button{width:100%;margin:0;text-align:center}.reminder-channel small{font-size:11px;color:var(--warning-text)}.reminder-metrics{margin-bottom:18px}
@media(max-width:1100px){.reminder-card{grid-template-columns:1fr}}
@media(max-width:700px){.billing-alert-banner{grid-template-columns:auto 1fr}.billing-alert-banner small{grid-column:1/-1}.reminder-actions{grid-template-columns:1fr}.reminder-title-row{align-items:flex-start;flex-direction:column}}

/* v3.16.0 — avisos automáticos de vencimento */
.automation-overview{display:flex;align-items:center;justify-content:space-between;gap:20px;border-left:5px solid #64748b}
.automation-overview.automation-active{border-left-color:var(--success);background:#f4fff7}
.automation-overview.automation-inactive{background:color-mix(in srgb, var(--text) 4%, var(--panel))}
.automation-overview h2{margin:2px 0 4px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--muted)}
.automation-status-grid{margin-bottom:18px}.automation-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-card{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;border:1px solid #dce3eb;border-radius:9px;padding:13px;background:color-mix(in srgb, var(--text) 4%, var(--panel))}
.check-card input{width:auto!important;margin-top:4px}.check-card span{display:flex;flex-direction:column;gap:3px}.check-card small{color:var(--muted);line-height:1.35}
.check-card.compact{align-self:end}.automation-action-row{display:flex;gap:12px;flex-wrap:wrap}.automation-action-row form{margin:0}
.cron-command{white-space:pre-wrap;overflow-wrap:anywhere;background:#172033;color:#e2e8f0;padding:14px;border-radius:8px}
.template-variable-list{columns:2;max-width:720px}.template-variable-list li{margin-bottom:7px}.compact-button{padding:6px 9px;font-size:12px}.error-note{color:#b42318}.secret-help code{overflow-wrap:anywhere}
@media(max-width:800px){.automation-check-grid{grid-template-columns:1fr}.automation-overview{align-items:flex-start;flex-direction:column}.template-variable-list{columns:1}}

/* v3.16.19 — Ficha Técnica de elevadores: botão salvar fixo */
.sticky-save-form{padding-bottom:80px}
.sticky-save-bar{position:sticky;bottom:0;left:0;right:0;padding:14px 18px;background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -4px 14px rgba(15,23,42,.08);z-index:20;margin:0 -18px}
.sticky-save-bar button{margin:0;padding:12px 26px;font-size:15px}
@media(max-width:700px){.sticky-save-bar{margin:0 -12px;padding:12px}}

/* v3.16.32 — balão de notificação no menu, estilo celular */
.nav-item-badge{position:relative;display:flex;align-items:center}
.nav-item-badge .notification-badge{margin-left:auto}
.notification-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;border-radius:999px;line-height:1;margin-left:8px}

/* v3.22.17 — gráfico de faturamento acumulado (barras verticais coloridas) */
.revenue-chart{display:flex;align-items:flex-end;gap:10px;height:260px;padding-top:30px;overflow-x:auto}
.revenue-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1 0 46px;height:100%;min-width:46px}
.revenue-bar{width:100%;max-width:42px;border-radius:4px 4px 0 0;min-height:2px;transition:height .2s}
.revenue-bar-value{font-size:10px;font-weight:700;color:var(--text);margin-bottom:4px;white-space:nowrap;writing-mode:vertical-rl;text-orientation:mixed}
.revenue-bar-label{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}
@media(min-width:700px){.revenue-bar-value{writing-mode:horizontal-tb}}
.mini-bar{height:16px;border-radius:5px;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;min-width:2px;white-space:nowrap}
.mini-bar-green{background:var(--success)}
.mini-bar-red{background:var(--danger)}
.mini-bar-orange{background:var(--warning)}
.mini-bar-blue{background:var(--info)}
.positivo{color:var(--success-text);font-weight:700}
.negativo{color:var(--danger-text);font-weight:700}

/* ==========================================================================
   v3.23.0 — Refresh visual "SaaS 2025": tipografia, sombras suaves,
   sidebar e cards modernizados. Só aparência — nenhuma estrutura de
   layout, rota ou dado muda aqui.
   ========================================================================== */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 14px rgba(16,24,40,.08);
  --shadow-lg:0 16px 40px rgba(16,24,40,.12);
  --radius-xl:18px;
  --accent-050:color-mix(in srgb, var(--accent) 10%, white 90%);
  --nav-border:#ffffff14;
}
html[data-theme="dark"]{
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 18px 44px rgba(0,0,0,.55);
  --accent-050:color-mix(in srgb, var(--accent) 16%, black 84%);
}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1,h2,h3{font-family:var(--font-sans);letter-spacing:-.01em}
h1{font-weight:800;font-size:26px}
h2{font-weight:700;font-size:17px}

/* Sidebar — compacto: uma linha por item, texto truncado com "..."
   quando não cabe (título completo aparece no tooltip do navegador). */
.sidebar{background:linear-gradient(180deg,var(--nav) 0%,color-mix(in srgb, var(--nav) 88%, black 12%) 100%);padding:16px 12px;display:flex;flex-direction:column;gap:1px}
.brand{font-size:19px;font-weight:800;letter-spacing:-.01em;padding:0 6px}
.subtitle{padding:0 6px;font-size:11px;color:#8fa2b8;margin-bottom:6px}
nav{gap:1px}
nav a{display:flex;align-items:center;gap:9px;min-width:0;padding:6.5px 10px;border-radius:8px;font-size:12.8px;font-weight:500;color:#c7d2e0;transition:background .12s,color .12s;line-height:1.3}
.nav-icon{vertical-align:-3px}
nav a .nav-icon{flex-shrink:0;opacity:.85}
.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
nav a:hover{background:#ffffff0f;color:#fff}
nav a:hover .nav-icon{opacity:1}
nav a.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
nav a.active .nav-icon{opacity:1}
.nav-group summary{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 10px;border-radius:8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:#7d90a6}
.nav-group summary .nav-icon{opacity:.75;flex-shrink:0}
.nav-group summary:hover{background:#ffffff0f;color:#e8eef5}
.nav-group[open]{padding-bottom:2px;margin-bottom:0}
.nav-group>a{margin:0 0 0 11px;padding:5.5px 8px 5.5px 12px;font-size:12.2px;border-left:1.5px solid var(--nav-border);border-radius:0 7px 7px 0}
.nav-group>a:hover,.nav-group>a.active{border-left-color:var(--accent)}
#botao-tema{display:flex;align-items:center;gap:9px;min-width:0;padding:6.5px 10px;border-radius:8px;font-size:12.8px;font-weight:500;color:#c7d2e0}
#botao-tema:hover{background:#ffffff0f;color:#fff}

/* Topbar */
.topbar{border-bottom:1px solid var(--border);height:76px}
.top-search input{border-radius:10px}

/* Panels & cards */
.panel{border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border-color:var(--border)}
.metric{position:relative;border:1px solid var(--border);border-left-width:1px;border-radius:16px;box-shadow:var(--shadow-sm);padding:20px 20px 18px;overflow:hidden;transition:box-shadow .15s,transform .15s}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--metric-color,#94a3b8);border-radius:16px 16px 0 0}
.metric:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.metric span{font-weight:600;letter-spacing:.03em}
.metric strong{font-size:26px;font-weight:800;letter-spacing:-.01em}
.metric.green{--metric-color:var(--success)}
.metric.red{--metric-color:#d94c4c}
.metric.blue{--metric-color:var(--info)}
.metric.orange{--metric-color:#e58a2b}
.metric.purple{--metric-color:#7b61c9}
.metric.teal{--metric-color:#268b86}
.goal-card,.professional-card,.health-item,.document-status-hero,.email-status-grid article,.reminder-card,.dashboard-goal,.technical-result,.route-list li,.urgent-card{box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}
.goal-card:hover,.professional-card:hover,.health-item:hover,.technical-result:hover{box-shadow:var(--shadow-md)}

/* Buttons & inputs */
.button,button{border-radius:10px;font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.06);transition:filter .12s,box-shadow .12s,transform .12s}
.button:hover,button:hover{transform:translateY(-1px);box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 30%, transparent)}
.button:active,button:active{transform:translateY(0)}
input,select,textarea{border-radius:9px;border-color:var(--border);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-050)}

/* Tables */
.table-wrap{border-radius:14px;border:1px solid var(--border)}
.table-wrap table{border-radius:14px}
th{background:transparent;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
td{border-bottom:1px solid var(--border)}
/* Faixa clara alternada: aplicada por JS (ver base.html), não por
   nth-child puro — uma tabela com linha de detalhe escondida (.linha-detalhe)
   depois de cada linha de dado quebraria a contagem par/ímpar do CSS. */
tbody tr.linha-par td{background:color-mix(in srgb, var(--text) 3.5%, transparent)}
tr:hover td{background:color-mix(in srgb, var(--accent) 4%, transparent)}

/* Login */
.login-wrap{background:radial-gradient(circle at 20% 20%,var(--accent-050),transparent 45%),var(--bg)}
.login-card{border-radius:22px;box-shadow:var(--shadow-lg);border-color:var(--border)}

/* Flash messages */
.flash{border-radius:10px;font-weight:600;box-shadow:var(--shadow-xs)}

@media(max-width:900px){.sidebar{padding:18px 12px}
/* No celular o menu abre por cima e e tocado com o dedo: os itens tinham
   27-31px de altura, abaixo do minimo confortavel (~44px). So aqui —
   no computador o ponteiro e preciso e o menu tem muitos itens, entao
   engordar a lista faria perder a visao do conjunto. */
 .nav-group>a,.sidebar a,#botao-tema{min-height:44px;display:flex;align-items:center;padding-top:8px;padding-bottom:8px}
 .nav-group summary{min-height:44px;padding-top:9px;padding-bottom:9px}
 /* botoes de acao das listas (Editar/Abrir/Desativar) e o '+' que abre
    o formulario: 20-28px de altura eram alvos apertados pro dedo. */
 .button.small,button.small,.small-button,.mini-button,.compact-button,.prazo-contador,.inline-action,button.danger{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
 .novo-cadastro-panel summary{min-height:38px;display:flex;align-items:center}
 /* links da tela de login ficam sozinhos na linha: viram area de toque */
 .login-help a{display:inline-block;padding:9px 2px}
}

/* ==========================================================================
   v3.23.1 — Refresh visual, parte 2: cards secundários (metas, técnicos,
   saúde do sistema, avisos, calendário) seguem a mesma linguagem visual
   (borda de destaque mais fina, sombra suave, cantos arredondados) e
   passam a respeitar o modo escuro (fundos fixos em branco corrigidos
   para var(--panel)). Só aparência.
   ========================================================================== */
.goal-card,.professional-card,.health-item,.document-status-hero,
.email-status-grid article,.reminder-card{
  background:var(--panel);
  border-radius:14px;
  border-left-width:3px;
}
.dashboard-goal{background:var(--panel);border-radius:12px;border-top-width:3px}
.document-status-hero>div{background:var(--panel)}
.goal-card{border-radius:16px}
.automation-overview,.billing-alert-banner,.urgent-banner{box-shadow:var(--shadow-sm);border-radius:16px}
.automation-overview.automation-inactive{background:var(--panel)}
.reminder-channel{background:color-mix(in srgb, var(--panel) 92%, var(--bg) 8%)}

/* Calendário — usa as variáveis de tema em vez de cores fixas, pra
   funcionar com o modo escuro e com a cor secundária configurável. */
.calendar-header div{background:var(--nav);color:#fff;border-radius:0}
.calendar-grid{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.calendar-day{background:var(--panel)}
.calendar-day.today{outline-color:var(--accent)}
.calendar-event{border-radius:7px}

/* Técnicos / Ficha técnica — fotos e placeholders acompanham o tema */
.professional-photo,.profile-photo{background:var(--accent-050)}
.technical-result{background:var(--panel);border-radius:14px}

@media print{.calendar-header div{background:#17212b!important;color:#fff!important}}


.linha-detalhavel{cursor:pointer}
.linha-detalhavel:hover{background:var(--hover,rgba(0,0,0,.035))}
.linha-detalhe>td{background:color-mix(in srgb, var(--text) 7%, var(--panel));padding:14px 16px}
.detalhe-lancamento{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 20px}
.detalhe-lancamento>div{display:flex;flex-direction:column;gap:2px}
.detalhe-lancamento span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.detalhe-lancamento strong{font-size:13px;font-weight:600;word-break:break-word}
.detalhe-lancamento .detalhe-largo{grid-column:1/-1}
.detalhe-pix{font-family:ui-monospace,Consolas,monospace;font-size:11px;font-weight:400}

.alertas-confirmar-aviso{border:2px solid var(--warning,#d97706);background:color-mix(in srgb, var(--warning,#d97706) 8%, transparent)}
.alertas-confirmar-aviso h1{margin-top:0;font-size:20px}
.alertas-confirmar-acao{position:sticky;bottom:0;display:flex;justify-content:center;padding:16px 0;margin-top:8px;background:linear-gradient(to top, var(--bg,#fff) 60%, transparent)}
.alertas-confirmar-acao button{font-size:16px;font-weight:700;padding:14px 32px;border-radius:12px}

/* Balão de ajuda: ícone "?" ao lado do rótulo do campo. Passar o mouse
   (desktop) ou tocar (celular, via .aberto alternado por JS) mostra a
   explicação — usado em campos cujo nome sozinho não deixa claro o que
   preencher ali. */
.campo-ajuda{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;border-radius:50%;background:var(--muted);color:var(--panel,#fff);font-size:10px;font-weight:700;line-height:1;cursor:help;user-select:none;vertical-align:middle}
.campo-ajuda .campo-ajuda-balao{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:240px;background:var(--text);color:var(--panel,#fff);font-size:12px;font-weight:400;line-height:1.4;padding:8px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:40;text-align:left}
.campo-ajuda .campo-ajuda-balao::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--text)}
.campo-ajuda:hover .campo-ajuda-balao,.campo-ajuda:focus .campo-ajuda-balao,.campo-ajuda.aberto .campo-ajuda-balao{opacity:1;visibility:visible}

/* Menu "Mais ações" (⋮) — agrupa os botões secundários de uma linha de
   tabela (recibo, editar, excluir etc.) num único botão redondo, em vez
   de espalhar 4-5 botões separados na mesma célula. Vira o padrão pra
   esse tipo de lista de ações — sempre bem arredondado nas pontas, nunca
   quadrado. Posição "fixed" (calculada por JS em base.html) porque a
   tabela fica dentro de um .table-wrap com overflow, que cortaria um
   menu "absolute" que caísse perto da borda. */
.acao-celula{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acoes-menu{position:relative;display:inline-block}
.acoes-menu summary{list-style:none;cursor:pointer;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-weight:900;font-size:17px;line-height:1;user-select:none}
.acoes-menu summary::-webkit-details-marker{display:none}
.acoes-menu summary:hover,.acoes-menu[open] summary{background:color-mix(in srgb, var(--accent) 12%, var(--panel));border-color:var(--accent)}
.acoes-menu-lista{position:fixed;z-index:60;min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 10px 28px rgba(15,23,42,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.acoes-menu-lista a,.acoes-menu-lista button{display:block;width:100%;box-sizing:border-box;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);background:transparent;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;border:0;cursor:pointer}
.acoes-menu-lista form{margin:0}
.acoes-menu-lista a:hover,.acoes-menu-lista button:hover{background:color-mix(in srgb, var(--text) 7%, var(--panel))}
.acoes-menu-lista .acoes-menu-perigo{color:var(--danger-text);background:var(--danger-bg)}
.acoes-menu-lista .acoes-menu-perigo:hover{filter:brightness(0.96)}
.dias-atraso-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:3px 8px;border-radius:999px;background:var(--danger-bg);color:var(--danger-text);font-weight:800;font-size:12px}
/* Cobrança em aberto de competência anterior listada no mês da tela (Contas a receber). */
.mes-anterior-tag{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;background:var(--warning-bg);color:var(--warning-text);font-size:11px;font-weight:700;white-space:nowrap}
.encargos-atraso{display:inline-block;margin-top:2px;color:var(--danger-text);font-weight:600;font-size:11.5px;white-space:nowrap}

/* Financeiro — colunas espremidas a pedido: "Dias de atraso" e "Ações"
   (contas a pagar), "Dias de atraso" e "Valor" (contas a receber) e
   "Elevadores" (contratos ativos) tinham mais espaço reservado do que
   o conteúdo precisa. width:1% faz a coluna encolher ao mínimo que o
   conteúdo (com nowrap) permite, sobrando espaço pras outras colunas
   da mesma tabela — não mexe em nenhuma outra coluna/tabela. */
.col-dias-atraso,.col-valor-compacto,.col-elevadores,.col-acoes-compacta{width:1%}
.payment-inline-form input[type="text"]{width:76px}
.payment-inline-form select{width:auto;min-width:0;padding:6px 8px;font-size:12.5px}

/* v4.8.2 — busca de peça do estoque nos itens da Ordem de reparo */
.item-busca-peca{position:relative}
.item-busca-sugestoes{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;max-height:260px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 10px 28px rgba(15,23,42,.18);padding:6px}
.item-busca-opcao{display:block;width:100%;box-sizing:border-box;text-align:left;padding:8px 10px;border-radius:var(--radius-sm);background:transparent;color:var(--text);border:0;cursor:pointer;font-family:inherit}
.item-busca-opcao:hover{background:color-mix(in srgb, var(--text) 7%, var(--panel))}
.item-busca-opcao b{display:block}
.item-busca-opcao small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.item-busca-vazio{padding:9px 10px;color:var(--muted);font-size:12.5px}
.item-busca-status{display:block;margin-top:4px;font-size:11.5px;font-weight:700}
.item-busca-status.pendente{color:var(--warning-text)}
.item-busca-status.ok{color:var(--success-text)}

/* ==========================================================================
   Unificação dos números financeiros — cards e tabelas
   ========================================================================== */
/* Valor do card encolhe no celular pra caber "R$ 123.456,78" sem estourar. */
.metric strong{font-size:clamp(18px,5vw,26px);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* Negativo: "-R$ 1,00" em vermelho (card e tabela). */
.valor-negativo,.metric strong.valor-negativo{color:var(--danger-text)}
/* Selo do período do card: "Set/26", "até hoje", "próx. 7 dias", "todos os meses". */
.metric .metric-chip{display:inline-block;margin-top:9px;padding:2px 9px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.6;white-space:nowrap;color:var(--text);background:color-mix(in srgb, var(--metric-color,#94a3b8) 13%, var(--panel));border:1px solid color-mix(in srgb, var(--metric-color,#94a3b8) 28%, transparent)}
.metric .metric-chip + small{margin-top:7px}
/* Cores usadas no Fluxo de caixa (saldo positivo/negativo, total). */
.metric.positive{--metric-color:var(--success)}
.metric.negative{--metric-color:var(--danger)}
.metric.dark{--metric-color:#334155}
html[data-theme="dark"] .metric.dark{--metric-color:#94a3b8}

/* Dashboard em faixas: Receber / Pagar / Resultado / Operação. */
.metrics-faixa{margin:22px 0 0}
.metrics-faixa + .metrics-faixa{margin-top:18px}
.metrics-faixa-titulo{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.metrics-faixa-titulo::before{content:'';width:8px;height:8px;border-radius:999px;background:var(--faixa-cor,#94a3b8)}
.metrics-faixa-titulo::after{content:'';flex:1;height:1px;background:var(--border)}
.metrics-faixa.faixa-receber{--faixa-cor:var(--success)}
.metrics-faixa.faixa-pagar{--faixa-cor:#d94c4c}
.metrics-faixa.faixa-resultado{--faixa-cor:var(--info)}
.metrics-faixa.faixa-operacao{--faixa-cor:#7b61c9}
.metrics-faixa .metrics{margin:0}

/* Tabelas: colunas de dinheiro alinhadas à direita, dígitos da mesma largura. */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot .totals-row td{font-weight:800;border-top:2px solid var(--border);border-bottom:0;background:color-mix(in srgb, var(--text) 4%, var(--panel))}
tfoot .totals-row td small{display:block;font-weight:600;color:var(--muted);font-size:11px}

/* ==========================================================================
   Visual moderno global (referencia: Nubank / Conta Azul).
   Camada final do arquivo: so aparencia — nenhuma classe, texto ou
   estrutura muda. Folhas de uma tela especifica (ex.: dashboard_moderno.css,
   financeiro_moderno.css, via {% block head_extra %} no base.html) carregam
   depois desta e podem ajustar o que precisarem.
   ========================================================================== */
:root{
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#f5f7fa;
  --border:#e3e8ef;
  --border-strong:#cfd8e3;
  --surface-sunken:#f8fafc;
  --focus:#2563eb;
  --radius-control:12px;
  --radius-card:16px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.05);
  --shadow-md:0 6px 18px rgba(16,24,40,.08);
  --shadow-lg:0 18px 44px rgba(16,24,40,.16);
}
html[data-theme="dark"]{
  --border-strong:#3a4a5c;
  --surface-sunken:#151d27;
  --focus:#60a5fa;
}

/* 1. Tipografia — pilha do sistema (Inter se instalada), pesos 600/700,
   numeros tabulares (digitos da mesma largura) em valores e tabelas. */
body{font-family:var(--font-sans);font-size:15px;line-height:1.5;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-sans)}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2{font-weight:600;letter-spacing:-.01em}
h3{font-weight:600}
.brand{font-weight:700}
.metric strong,.compact-panel strong,.inventory-current strong,.stock-balance strong,
.urgent-card strong,.approval-value strong,.goal-numbers strong,.document-status-hero strong,
.dashboard-goal-title span,.piece-result h2{font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.metric span,.compact-panel span,.inventory-current span,.goal-numbers span,
.document-status-hero span,.email-status-grid article span,.piece-kicker{font-weight:600}
.day-number,.completed-badge,.movement-badge,.status-badge,.dias-atraso-badge{font-weight:700}
td,th,.num,.valor,.totals-row td{font-variant-numeric:tabular-nums}
.muted{line-height:1.5}

/* 2. Botoes — padrao UNICO do sistema inteiro, o mesmo dos botoes
   "+ Nova ..." do cabecalho do Financeiro: 40px de altura, raio 10px,
   fonte 14px/600, icone + texto alinhados (gap 6px). Variacoes:
   primario (cor da empresa, so a acao principal), .secondary (contornado
   neutro), .small/.small-button (32px), .danger (vermelho), .green-button
   (verde), .warning (ambar). Filtrar/Buscar/Pesquisar (formularios GET de
   filtro e busca) usam o secundario. A altura sai de padding + borda
   (nao de height fixa), entao botoes especiais que ja definem o proprio
   tamanho (menu ⋮, fechar do aviso, ☰, links-botao) continuam iguais. */
.button,button,.small-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:600;line-height:20px;letter-spacing:0;text-decoration:none;vertical-align:middle;cursor:pointer;box-shadow:var(--shadow-xs);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,filter .15s ease,transform .15s ease}
.button svg,button svg,.small-button svg{flex:none}
/* botoes de menu/lista que alinham o texto a esquerda */
#botao-tema,.acoes-menu-lista button,.item-busca-opcao,.link-button{justify-content:flex-start}
.button:hover,button:hover,.small-button:hover{transform:none;filter:brightness(.94);box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 22%, transparent)}
.button:active,button:active,.small-button:active{transform:translateY(1px);filter:brightness(.9)}
/* pequeno: 32px */
.button.small,button.small,.small-button,.mini-button,.compact-button{padding:5px 12px;font-size:13px;line-height:20px;border-radius:8px}
/* perigo / verde / ambar — mesma altura do padrao (danger era menor) */
button.danger,.button.danger{background:var(--danger);color:#fff;padding:9px 16px}
:is(button,.button).danger:is(.small,.mini-button,.compact-button){padding:5px 12px}
.green-button{background:var(--success);color:#fff}
button.warning,.button.warning{background:var(--warning);color:#fff}
/* secundario: contornado neutro */
:is(.button,button,.small-button).secondary,
:where(form[method="get" i]:not(.global-search-form)) button:where(:not(.danger,.green-button,.warning,.primary,.toast-fechar)),
:where(.top-search,.search) button{
  background:var(--panel);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--shadow-xs)
}
:is(.button,button,.small-button).secondary:hover,
:where(form[method="get" i]:not(.global-search-form)) button:where(:not(.danger,.green-button,.warning,.primary,.toast-fechar)):hover,
:where(.top-search,.search) button:hover{
  background:color-mix(in srgb, var(--text) 5%, var(--panel));border-color:color-mix(in srgb, var(--text) 30%, var(--panel));box-shadow:var(--shadow-sm);filter:none
}
/* Botoes "+ Novo ..." do cabecalho (Financeiro e demais telas): o
   primeiro e solido; os seguintes, contornados. Aberto = anel interno. */
.botao-novo,.fin-novo-botao{white-space:nowrap}
:is(.fin-novo-botao,.botao-novo)+:is(.fin-novo-botao,.botao-novo){background:var(--panel);color:var(--text);border-color:var(--border-strong)}
:is(.fin-novo-botao,.botao-novo)+:is(.fin-novo-botao,.botao-novo):hover{background:color-mix(in srgb, var(--text) 5%, var(--panel));filter:none}
:is(.fin-novo-botao,.botao-novo).is-aberto{box-shadow:inset 0 0 0 2px color-mix(in srgb, #000 22%, transparent)}
:is(.fin-novo-botao,.botao-novo)+:is(.fin-novo-botao,.botao-novo).is-aberto{border-color:var(--accent);box-shadow:none}

/* Cabecalho padrao das telas: titulo a esquerda, acoes compactas a direita
   (templates/_cabecalho_pagina.html). Com JS, o cartao de cadastro fechado
   some e so o botao "+ Novo ..." do topo abre; sem JS continua visivel. */
.page-title{flex-wrap:wrap;gap:12px 20px}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
.page-actions>*,.page-actions .button.secondary,.document-actions .button.secondary,.page-title .action-row .button.secondary{margin:0}
.page-actions .button,.page-actions button,.document-actions .button,.page-title .action-row .button{white-space:nowrap}
.cadastro-js .novo-cadastro-alvo:not([open]){display:none}
.novo-cadastro-alvo{scroll-margin-top:16px}
@media(max-width:700px){
  .page-title{flex-direction:column;align-items:stretch}
  .page-actions{justify-content:flex-start;margin-left:0}
  .page-actions>.button,.page-actions>button{flex:1 1 auto}
}

/* Anel de foco visivel e consistente (teclado) — azul com respiro. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sidebar a:focus-visible,.sidebar button:focus-visible,.sidebar summary:focus-visible{outline-color:#93c5fd}

/* 7. Campos de formulario */
input,select,textarea{border:1px solid var(--border-strong);border-radius:10px;padding:9px 12px;line-height:20px;background:var(--panel);color:var(--text);transition:border-color .15s ease,box-shadow .15s ease}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb, var(--text) 28%, var(--panel))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--muted) 80%, var(--panel))}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
label span{font-weight:600}
/* 16px no celular evita o zoom automatico do iPhone ao tocar no campo */
@media(max-width:900px){input,select,textarea{font-size:16px}}

/* 7. Superficies: fundo da pagina, cards e paineis com raio 16px */
.panel{border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.metric{border-radius:var(--radius-card)}
.metric::before{border-radius:var(--radius-card) var(--radius-card) 0 0}
.login-card{border-radius:20px}
.topbar{margin-bottom:var(--space-5)}
.topbar strong{font-weight:600}
.top-search input{border-radius:var(--radius-control)}

/* 4. Tabelas — cabecalho fixo ao rolar dentro do .table-wrap (a caixa
   ganha altura maxima = tela e rola por dentro), zebra e hover suaves,
   linhas mais confortaveis. .tabela-compacta mantem as linhas baixas. */
table{font-size:13.5px}
th{padding:10px 12px;font-size:11.5px;font-weight:600;letter-spacing:.04em}
td{padding:11px 12px}
.table-wrap{border-radius:var(--radius-control);background:var(--panel);max-height:calc(100vh - 140px);overflow:auto;overscroll-behavior:contain}
.table-wrap thead th,
.table-wrap table>tbody:first-child>tr:first-child>th{position:sticky;top:0;z-index:2;background:var(--panel);border-bottom:0;box-shadow:inset 0 -1px 0 var(--border)}
.table-wrap tfoot td{position:sticky;bottom:0;z-index:1;box-shadow:inset 0 1px 0 var(--border)}
tbody tr.linha-par td{background:color-mix(in srgb, var(--text) 2.5%, transparent)}
tbody tr:hover>td{background:color-mix(in srgb, var(--accent) 5%, var(--panel))}
.tabela-compacta th{padding:8px 10px}
@media(max-width:900px){.table-wrap{max-height:none;overscroll-behavior:auto}}
@media print{.table-wrap{max-height:none;overflow:visible}.table-wrap thead th,.table-wrap tfoot td{position:static}}

/* 5. Menu lateral — item ativo em "pilula", rotulos de grupo mais limpos,
   hover suave. O item ativo e marcado pelo JS do base.html (classe .active). */
nav a,#botao-tema{border-radius:10px;transition:background-color .18s ease,color .18s ease}
nav a.active{background:var(--accent);color:#fff;font-weight:600;border-radius:999px;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent)}
.nav-group>a{border-radius:0 999px 999px 0}
.nav-group>a.active{border-left-color:transparent;border-radius:999px}
.nav-group summary{font-size:10.5px;font-weight:600;letter-spacing:.09em;color:color-mix(in srgb, #fff 52%, var(--nav));transition:background-color .18s ease,color .18s ease}
.nav-group summary:hover{background:#ffffff0d;color:#fff}
.nav-group[open]>summary{color:color-mix(in srgb, #fff 78%, var(--nav))}

/* 3. Notificacoes (toast) — avisos do sistema no canto superior direito
   (embaixo no celular), somem sozinhos; erro/aviso ficam mais tempo. */
.toast-stack{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:10px;width:min(400px,calc(100vw - 32px));pointer-events:none}
.toast-stack .flash{--toast-cor:var(--success);position:relative;display:flex;align-items:flex-start;gap:12px;margin:0;padding:13px 12px 15px 14px;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);font-weight:500;font-size:14px;line-height:1.45;box-shadow:var(--shadow-lg);overflow:hidden;pointer-events:auto;animation:toast-entrar .28s cubic-bezier(.2,.8,.2,1)}
.toast-stack .flash.warning{--toast-cor:var(--warning)}
.toast-stack .flash.danger,.toast-stack .flash.error{--toast-cor:var(--danger)}
.toast-stack .flash.info,.toast-stack .flash.message{--toast-cor:var(--info)}
.toast-icone{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--toast-cor);color:#fff;font-size:13px;font-weight:700;line-height:1}
.toast-texto{flex:1;min-width:0;padding-top:2px;overflow-wrap:anywhere}
.toast-stack .toast-fechar{flex:none;width:28px;height:28px;margin:-3px -2px 0 0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:18px;line-height:1;box-shadow:none;cursor:pointer}
.toast-stack .toast-fechar:hover{background:color-mix(in srgb, var(--text) 8%, var(--panel));color:var(--text);filter:none;box-shadow:none}
.toast-progresso{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--toast-cor);opacity:.55;transform-origin:left;animation:toast-tempo var(--toast-ms,5000ms) linear forwards}
.toast.pausado .toast-progresso,.toast:hover .toast-progresso{animation-play-state:paused}
.toast-stack .toast.saindo{animation:toast-sair .2s ease-in forwards}
@keyframes toast-entrar{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-subir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-sair{to{opacity:0;transform:translateX(24px)}}
@keyframes toast-tempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:900px){
  .toast-stack{top:auto;bottom:16px;left:16px;right:16px;width:auto}
  .toast-stack .flash{animation-name:toast-subir}
}
@media print{.toast-stack{display:none}}

/* 6. Estado vazio das listas (templates/_empty_state.html) */
td.empty{white-space:normal}
tr.linha-vazia>td.empty{padding:0}
tbody tr.linha-vazia:hover>td{background:transparent}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 16px 40px;text-align:center;color:var(--muted)}
.empty-state-icone{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:6px;border-radius:999px;background:color-mix(in srgb, var(--accent) 9%, var(--panel));font-size:26px;line-height:1}
.empty-state-titulo{font-size:15px;font-weight:600;color:var(--text)}
.empty-state-texto{margin:0;max-width:420px;font-size:13.5px;line-height:1.5}
.empty-state-botao{margin:10px 0 0!important}
/* Tabela larga (muitas colunas): o aviso fica centralizado na parte
   visivel da caixa, e nao no meio da tabela inteira (fora da tela). */
.table-wrap:has(>table>tbody>tr.linha-vazia){container-type:inline-size}
tr.linha-vazia .empty-state{position:sticky;left:0;width:100cqw;max-width:100%}

@media (prefers-reduced-motion: reduce){
  .toast-stack .flash,.toast-stack .toast.saindo{animation:none}
  .toast-progresso{display:none}
  .button,button,nav a,#botao-tema,.nav-group summary,input,select,textarea,.metric{transition:none}
}

/* Grade de painéis: a coluna não cresce além da tela por causa de uma
   tabela larga (celular) — a tabela rola dentro do próprio painel. */
.dashboard-grid{grid-template-columns:minmax(0,1fr)}
.dashboard-grid>*{min-width:0}

/* ===== Botões em tom CLARO (pedido do dono: "todos iguais, cores bem
   claras, mais suave") =====
   Todo botão colorido vira tonal: fundo bem claro da cor, texto e borda na
   própria cor — sem cor chapada. A cor vem de --btn-cor (padrão: cor da
   empresa); .danger / .green-button / .warning / .whatsapp-button só trocam
   a cor. Botões contornados (.secondary e filtros/buscas) continuam
   brancos. Ficam de fora os botões com desenho próprio (menu ⋮, fechar
   aviso, tema, encolher menu, ☰, itens de menu, link-botão). */
:is(.button,button,.small-button,.dashboard-shortcut,.shortcut-preview):not(
  .secondary,.link-button,.toast-fechar,.botao-menu-mobile,.acoes-menu-perigo,
  .acoes-menu-lista button,#botao-tema,#botao-encolher-sidebar,
  form[method="get" i]:not(.global-search-form) button,.top-search button,.search button
){
  --btn-base:var(--btn-cor,var(--accent));
  background:color-mix(in srgb, var(--btn-base) 13%, var(--panel))!important;
  color:color-mix(in srgb, var(--btn-base) 78%, var(--text))!important;
  border:1px solid color-mix(in srgb, var(--btn-base) 30%, var(--panel))!important;
  box-shadow:none!important;filter:none
}
:is(.button,button,.small-button,.dashboard-shortcut):not(
  .secondary,.link-button,.toast-fechar,.botao-menu-mobile,.acoes-menu-perigo,
  .acoes-menu-lista button,#botao-tema,#botao-encolher-sidebar,
  form[method="get" i]:not(.global-search-form) button,.top-search button,.search button
):hover{
  background:color-mix(in srgb, var(--btn-base) 21%, var(--panel))!important;
  border-color:color-mix(in srgb, var(--btn-base) 45%, var(--panel))!important
}
:is(.button,button,.small-button).danger,.danger.mini-button,.reject-button{--btn-cor:var(--danger)}
.green-button,.approve-button,.finish-button,.finish{--btn-cor:var(--success)}
:is(.button,button).warning{--btn-cor:var(--warning)}
.whatsapp-button{--btn-cor:#1faa59}
.small-button.blue{--btn-cor:var(--info)}

/* Atalhos do Dashboard: mesmo botão (40px, raio 10px, 14px/600), cada um
   no tom claro da cor escolhida em Configurações > Atalhos. */
.dashboard-shortcuts{gap:8px}
.dashboard-shortcut,.shortcut-preview{gap:8px;min-height:0;padding:9px 16px;border-radius:10px;font-size:14px;font-weight:600;line-height:20px}
.dashboard-shortcut:hover{transform:none}
.shortcut-vermelho{--btn-cor:var(--danger)}.shortcut-laranja{--btn-cor:#c05621}.shortcut-amarelo{--btn-cor:#b7791f}
.shortcut-verde{--btn-cor:var(--success)}.shortcut-azul{--btn-cor:var(--info)}.shortcut-roxo{--btn-cor:#7753b7}
.shortcut-escuro{--btn-cor:#475569}.shortcut-cinza{--btn-cor:#687684}
.shortcut-preview{justify-content:flex-start}

/* ===== Período de teste (empresa "trial") =====
   Faixa clara no topo do sistema da empresa em teste ("faltam N dias") e
   selos no painel da plataforma. Tons suaves (fundo claro + texto na cor),
   mesmo padrão dos botões — nos últimos dias vira o tom claro de aviso. */
.faixa-periodo-teste{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb, var(--info) 28%, var(--panel));background:var(--info-bg);color:var(--info-text);font-size:14px;line-height:1.35}
.faixa-periodo-teste strong{font-weight:700}
.faixa-periodo-teste-icone{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-weight:800;font-size:13px;background:color-mix(in srgb, currentColor 14%, transparent)}
.faixa-periodo-teste-aviso{border-color:color-mix(in srgb, var(--warning) 32%, var(--panel));background:var(--warning-bg);color:var(--warning-text)}
.selo-teste{margin-left:6px}
td .selo-teste{margin:6px 0 0;display:inline-flex}
.teste-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.teste-acoes form{margin:0}
.teste-acoes .teste-dias-form{display:flex;gap:8px;align-items:flex-end}
.teste-acoes .teste-dias-form label{margin:0}
.teste-acoes .teste-dias-form input{width:110px}
.teste-encerrado-contatos{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}

/* Item ativo do menu lateral no mesmo tom claro dos botões (sem vermelho
   chapado): fundo translúcido claro sobre o menu escuro + filete na cor
   da empresa. */
.sidebar nav a.active{background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--accent)!important;font-weight:600}
.sidebar nav a.active:hover{background:rgba(255,255,255,.16)!important}

/* Foto do cupom / odometro (leitura por OCR no aparelho) */
.foto-ocr-grupo{display:grid;gap:10px}
.foto-ocr{display:grid;gap:6px}
.foto-ocr-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:10px;background:var(--accent,#0d4b34);color:#fff;font-weight:700;cursor:pointer;min-height:44px;text-align:center}
.foto-ocr-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.foto-ocr-status{font-size:.85rem;color:#52645c}
.foto-ocr-status.ok{color:#0a6b3d}
.foto-ocr-status.aviso{color:#8a5a00;background:#fff4d6;padding:6px 8px;border-radius:8px}
.foto-ocr.lendo .foto-ocr-botao{opacity:.6;pointer-events:none}
input.ocr-lido,select.ocr-lido,textarea.ocr-lido{background:#fff8d6!important;border-color:#d8b04c!important;box-shadow:0 0 0 2px #d8b04c55}

/* Novidades da versão / avisos da plataforma (v4.16.5) */
.faixa-novidade{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb, var(--accent,#c0392b) 30%, var(--panel));background:color-mix(in srgb, var(--accent,#c0392b) 8%, var(--panel));font-size:14px;line-height:1.35}
.faixa-novidade-aviso{border-color:#e69500;background:#fff4e5;color:#6b4300}
.faixa-novidade-texto{flex:1}
.faixa-novidade form{margin:0}
.faixa-novidade-fechar{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer;color:inherit;padding:0 6px}
.novidade-card{margin-bottom:16px}
.novidade-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.novidade-topo h2{margin:0}
.novidade-texto ul{margin:8px 0 0 18px;padding:0}
.novidade-texto li{margin:6px 0}
.novidade-aviso{border-left:4px solid #e69500}