/* =====================================================================
   tema.css — paleta clara e limpa compartilhada pelos módulos
   Carregado ANTES do <style> de cada página: o CSS do módulo sempre vence.
   Os seletores genéricos usam :where() (especificidade zero).
   ===================================================================== */
:root{
  /* ===== tokens do tema (prefixo --t-) — azul-petróleo refinado (29/out) =====
     Contraste conferido (WCAG AA ≥ 4.5:1) para todo texto sobre fundo/superfície, nos dois temas. */
  --t-bg:#E6EBF0;                 /* fundo da página: mais escuro que o cartão, p/ o cartão se destacar em monitor fraco */
  --t-surface:#FFFFFF;
  --t-surface-2:#EDF1F5;
  --t-surface-3:#DDE4EB;
  --t-line:#C3CDD7;                /* divisória normal (era #E1E7ED, sumia em monitor com pouco contraste) */
  --t-line-strong:#8497A8;         /* borda de campo e divisão forte: ≥3:1 sobre branco */
  --t-text:#132231;
  --t-text-soft:#34444F;
  --t-muted:#4A5A69;
  --t-primary:#17647E;
  --t-primary-dark:#0F4C61;
  --t-primary-strong:#17647E;      /* fundo de botão principal (texto branco) */
  --t-primary-soft:#D6E8EF;
  --t-primary-line:#9CC3D3;
  --t-dark:#0E2233;                /* barra lateral / marinho */
  --t-gold:#A8811F;
  --t-gold-soft:#F3E4B8;
  --t-success:#0F6B40;
  --t-success-soft:#D3EEDF;
  --t-danger:#B42318;
  --t-danger-soft:#F8D6D1;
  --t-warning:#7A4E0A;
  --t-warning-soft:#F6E0B8;
  --t-info:#164EB0;
  --t-info-soft:#D5E2FA;
  --t-placeholder:#66798B;
  --t-field:#E4F0F6; --t-field-line:#5F7C90; --t-field-ro:#D9E0E7;
  --t-hover:rgba(19,34,49,.07);
  --t-zebra:#F4F7FA;               /* linha alternada de tabela */
  --t-radius:12px;
  --t-radius-sm:8px;
  --t-radius-lg:16px;
  --t-shadow-sm:0 1px 2px rgba(14,34,51,.10), 0 2px 6px -1px rgba(14,34,51,.08);
  --t-shadow:0 1px 2px rgba(14,34,51,.08), 0 6px 16px -2px rgba(14,34,51,.12);
  --t-shadow-lg:0 24px 48px -12px rgba(14,34,51,.24), 0 2px 6px rgba(14,34,51,.06);
  --t-ring:0 0 0 3px rgba(23,100,126,.24);
  --t-ease:cubic-bezier(.2,.8,.2,1);
  --t-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* nomes usados pelos módulos (valores padrão; o :root do módulo pode redefinir) */
  --bg:var(--t-bg); --surface:var(--t-surface); --surface-2:var(--t-surface-2);
  --ink:var(--t-text); --ink-soft:var(--t-text-soft); --ink-faint:var(--t-muted); --muted:var(--t-muted);
  --line:var(--t-line); --line-strong:var(--t-line-strong);
  --accent:var(--t-primary); --accent-ink:var(--t-primary-dark); --accent-soft:var(--t-primary-soft);
  --ok:var(--t-success); --ok-soft:var(--t-success-soft);
  --danger:var(--t-danger); --danger-soft:var(--t-danger-soft);
  --wait:var(--t-warning); --wait-soft:var(--t-warning-soft);
  --info:var(--t-info);
  --font:var(--t-font);
}
/* Tema escuro (tema.js grava data-theme no <html>). */
html[data-theme=dark]{
  --t-bg:#08121B;
  --t-surface:#122130;
  --t-surface-2:#1A2B3A;
  --t-surface-3:#243747;
  --t-line:#2F4559;
  --t-line-strong:#5A7690;
  --t-zebra:#152635;
  --t-text:#E3EBF2;
  --t-text-soft:#B7C5D1;
  --t-muted:#A3B4C2;
  --t-primary:#62B0CB;
  --t-primary-dark:#8FCBDF;
  --t-primary-strong:#1F6E89;
  --t-primary-soft:rgba(98,176,203,.20);
  --t-primary-line:rgba(98,176,203,.50);
  --t-dark:#08111A;
  --t-gold:#D8B65A;
  --t-gold-soft:rgba(216,182,90,.14);
  --t-success:#4CC38A;
  --t-success-soft:rgba(76,195,138,.14);
  --t-danger:#F2857A;
  --t-danger-soft:rgba(242,133,122,.14);
  --t-warning:#E3AE55;
  --t-warning-soft:rgba(227,174,85,.14);
  --t-info:#86AEF7;
  --t-info-soft:rgba(134,174,247,.14);
  --t-placeholder:#6E8293;
  --t-field:#0A141D; --t-field-line:#5E7A8D; --t-field-ro:#1C2C3A;
  --t-hover:rgba(227,235,242,.06);
  --t-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --t-shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -4px rgba(0,0,0,.4);
  --t-shadow-lg:0 28px 56px -12px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
  --t-ring:0 0 0 3px rgba(98,176,203,.35);
  color-scheme:dark;
}
/* Telas internas do app (html com data-ds): o sistema visual MANDA nas cores, mesmo que o módulo
   tenha o próprio :root (html[data-ds]:root tem especificidade maior que :root). */
html[data-ds]:root{
  --bg:var(--t-bg); --surface:var(--t-surface); --surface-2:var(--t-surface-2);
  --ink:var(--t-text); --ink-soft:var(--t-text-soft); --ink-faint:var(--t-muted); --muted:var(--t-muted);
  --line:var(--t-line); --line-strong:var(--t-line-strong);
  --accent:var(--t-primary); --accent-ink:var(--t-primary-dark); --accent-soft:var(--t-primary-soft);
  --ok:var(--t-success); --ok-soft:var(--t-success-soft);
  --danger:var(--t-danger); --danger-soft:var(--t-danger-soft);
  --wait:var(--t-warning); --wait-soft:var(--t-warning-soft);
  --info:var(--t-info);
  --gold:var(--t-primary); --gold-ink:var(--t-primary-dark); --gold-soft:var(--t-primary-soft);   /* nos módulos, --gold é apelido antigo do azul */
  --page:var(--t-bg); --primary:var(--t-primary); --primary-soft:var(--t-primary-soft); --primary-hover:var(--t-primary-dark);
  --font:var(--t-font);
}

/* ---------- base ---------- */
:where(html){ -webkit-text-size-adjust:100%; }
:where(body){
  margin:0; background:var(--t-bg); color:var(--t-text);
  font-family:var(--t-font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:where(button, input, select, textarea){ font-family:inherit; }
:where(a){ color:var(--t-primary); }
:where(a:hover){ color:var(--t-primary-dark); }
::selection{ background:var(--t-primary-soft); }

/* ---------- formulários ---------- */
:where(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea){
  border:1px solid var(--t-line); border-radius:var(--t-radius-sm); background:var(--t-surface); color:var(--t-text);
}
:where(input, select, textarea):focus-visible{
  outline:none; border-color:var(--t-primary); box-shadow:var(--t-ring);
}
:where(input[type=checkbox], input[type=radio]){ accent-color:var(--t-primary); }
:where(input::placeholder, textarea::placeholder){ color:#93A1AE; }

/* ---------- botões ---------- */
:where(.btn){ border-radius:var(--t-radius-sm); font-weight:600; cursor:pointer; transition:background-color .12s, border-color .12s, box-shadow .12s; }
:where(.btn-primary, .btn-accent){ background:var(--t-primary); color:#fff; border-color:var(--t-primary); }
:where(.btn-primary, .btn-accent):hover{ background:var(--t-primary-dark); border-color:var(--t-primary-dark); }
:where(.btn-ghost, .btn-secondary){ background:var(--t-surface); color:var(--t-text-soft); border:1px solid var(--t-line); }
:where(.btn-ghost, .btn-secondary):hover{ background:var(--t-surface-2); }
:where(.btn-danger){ background:var(--t-danger); color:#fff; }
:where(.btn-ok, .btn-success){ background:var(--t-success); color:#fff; }
:where(button, .btn):focus-visible{ outline:none; box-shadow:var(--t-ring); }
:where(button:disabled, .btn:disabled){ opacity:.55; cursor:not-allowed; }

/* ---------- cartões / painéis ---------- */
:where(.card, .panel){
  background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--t-radius); box-shadow:var(--t-shadow-sm);
}

/* ---------- tabelas ---------- */
:where(table){ border-collapse:collapse; }
:where(thead th){ color:var(--t-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; background:var(--t-surface); }
:where(tbody tr:hover > td){ background:#F8FAFC; }

/* ---------- modais ---------- */
:where(.modal){ border-radius:var(--t-radius); box-shadow:var(--t-shadow-lg); }
:where(.modal-overlay, .modal-bg, .overlay){ backdrop-filter:blur(2px); }

/* ---------- badges / pills ---------- */
:where(.badge, .pill, .chip){ border-radius:999px; font-weight:600; }

/* ---------- abas ---------- */
:where(.tabs, .abas){ border-color:var(--t-line); }

/* ---------- toasts ---------- */
:where(.toast){ border-radius:10px; box-shadow:var(--t-shadow-lg); }

/* ---------- cabeçalho de página ---------- */
:where(.page-title){ color:var(--t-text); letter-spacing:-.01em; }
:where(.page-sub){ color:var(--t-muted); }

/* ---------- chip da loja ativa ----------
   A cor da loja aparece SÓ na bolinha deste chip (var --loja-cor, definida pelo JS). */
#lojaFaixa{
  width:fit-content; max-width:calc(100% - 32px);
  margin:12px 16px 0 auto; padding:4px 12px 4px 10px;
  background:var(--t-surface); color:var(--t-text-soft);
  border:1px solid var(--t-line); border-radius:999px; box-shadow:var(--t-shadow-sm);
  font:600 12px/1.6 var(--t-font); text-shadow:none; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#lojaFaixa::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:7px; vertical-align:1px;
  background:var(--loja-cor, var(--t-primary)); box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px var(--t-line);
}

/* ---------- scrollbar discreta ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#CBD3DC; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#AEB9C5; background-clip:padding-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* =====================================================================
   CELULAR (≤ 760px) — conforto de toque em todos os módulos.
   • :where() = especificidade zero (o CSS do módulo continua mandando);
   • :not(#\#) = truque que dá peso de #id sem !important, usado só onde o
     ajuste PRECISA vencer o módulo (folhas de modal, colunas de formulário,
     margens da página);
   • !important só no font-size dos campos: abaixo de 16px o iPhone dá zoom
     sozinho ao tocar no campo.
   ===================================================================== */
@media (max-width:760px){
  :where(html){ overflow-x:hidden; -webkit-tap-highlight-color:rgba(31,111,139,.10); }
  :where(img, video, canvas, iframe){ max-width:100%; }
  :where(pre, code){ white-space:pre-wrap; word-break:break-word; }

  /* campos: 16px (sem zoom no iOS) e 44px de altura de toque */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]),
  select, textarea{ font-size:16px !important; }
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]), select){ min-height:44px; }
  :where(textarea){ min-height:88px; }
  :where(input[type=checkbox], input[type=radio]){ width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
  :where(input[type=file]){ max-width:100%; font-size:14px; }

  /* botões: alvo de toque confortável */
  :where(.btn, button[class*="btn-"], a[class*="btn-"], input[type=submit], input[type=button]){ min-height:42px; touch-action:manipulation; }
  :where(button){ touch-action:manipulation; }

  /* margens laterais da página: 12px */
  :is(main, .wrap, .shell, .tab-content):not(#\#){ padding-left:12px; padding-right:12px; }

  /* cabeçalho de página: título em cima, ações embaixo (quebrando linha) */
  :where(.page-head){ flex-direction:column; align-items:stretch; gap:10px; }
  :where(.page-title){ font-size:20px; }
  :where(.page-head) > :where(:not(:first-child)){ display:flex; flex-wrap:wrap; gap:8px; }
  :where(.toolbar, .actions, .acoes, .filtros, .filters, .btn-row, .modal-actions, .page-actions){ flex-wrap:wrap; gap:8px; }

  /* formulários em coluna única */
  :is(.grid-2, .grid-3, .grid2, .form-grid, .form-row, .par):not(#\#){ grid-template-columns:minmax(0,1fr); }
  :where(.field, .form-group) :where(input:not([type=checkbox]):not([type=radio]), select, textarea){ width:100%; max-width:100%; }

  /* tabelas: rolam de lado dentro do próprio cartão, sem empurrar a página */
  :where(.table-wrap, .tbl-wrap, .table-scroll, .tabela-wrap){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  :where(.card, .panel):has(> table){ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* modais viram "folha" que sobe de baixo, largura total */
  :is(.modal-overlay, .modal-bg):not(#\#){ padding:0; }
  :is(.modal-overlay, .modal-bg) > :is(.modal, .modal-box):not(#\#){
    width:100%; max-width:100%; margin:auto 0 0; border-radius:20px 20px 0 0;
    max-height:calc(100dvh - 12px); overflow-y:auto; overscroll-behavior:contain;
    padding-left:16px; padding-right:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
    animation:temaSheetUp .26s cubic-bezier(.32,.72,0,1);
  }
  :is(.modal, .modal-box) :where(.modal-actions){
    position:sticky; bottom:calc(-16px - env(safe-area-inset-bottom)); z-index:2; margin-bottom:calc(-16px - env(safe-area-inset-bottom));
    padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:var(--surface, var(--t-surface));
    box-shadow:-16px 0 0 var(--surface, var(--t-surface)), 16px 0 0 var(--surface, var(--t-surface)), 0 -1px 0 var(--t-line);
  }
  :is(.modal, .modal-box) :where(.modal-actions) > :where(.btn, button){ flex:1 1 auto; justify-content:center; }

  /* chip da loja ativa mais discreto */
  #lojaFaixa{ margin:10px 12px 0 auto; font-size:11.5px; padding:3px 10px 3px 9px; }
}
@keyframes temaSheetUp{ from{ transform:translateY(48px); opacity:.5; } to{ transform:none; opacity:1; } }

/* Dentro do app (shell), o cabeçalho já mostra a loja: a faixa repetida some. */
html.embedded #lojaFaixa{ display:none !important; }

/* =====================================================================
   PADRÃO DE ABAS — um visual só em todo o app (igual ao das abas do topo):
   texto só com a 1ª letra maiúscula, sem emoji; aba ativa com fundo azul
   claro, texto azul em negrito e barra grossa embaixo.
   Use class="abas-std" (ou as classes antigas .mini-tabs / .abas / .ag-abas / .filtros-abas).
   ===================================================================== */
.abas-std, .mini-tabs, .abas, .ag-abas, .filtros-abas{
  display:flex; flex-wrap:nowrap; gap:2px; align-items:flex-end;
  background:none; border:0; border-bottom:1px solid var(--t-line); border-radius:0; padding:0; margin:0 0 16px;
  overflow-x:auto; scrollbar-width:none;
}
.abas-std::-webkit-scrollbar, .mini-tabs::-webkit-scrollbar, .abas::-webkit-scrollbar, .ag-abas::-webkit-scrollbar, .filtros-abas::-webkit-scrollbar{ display:none; }
.abas-std button, .mini-tabs button, .abas button, .ag-abas button, .filtros-abas button{
  position:relative; flex:0 0 auto; background:transparent; border:0; border-radius:8px 8px 0 0; box-shadow:none;
  color:var(--t-muted); padding:12px 13px 11px; margin:0 0 -1px; font-size:13.5px; font-weight:600; line-height:1.2;
  cursor:pointer; white-space:nowrap; transition:background-color .15s, color .15s;
}
.abas-std button::after, .mini-tabs button::after, .abas button::after, .ag-abas button::after, .filtros-abas button::after{
  content:""; position:absolute; left:8px; right:8px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:transparent;
}
.abas-std button:hover, .mini-tabs button:hover, .abas button:hover, .ag-abas button:hover, .filtros-abas button:hover{ color:var(--t-text); background:rgba(15,42,61,.05); }
.abas-std button.active, .mini-tabs button.active, .abas button.active, .ag-abas button.active, .filtros-abas button.active,
.abas-std button.on, .mini-tabs button.on, .abas button.on, .ag-abas button.on, .filtros-abas button.on{
  color:var(--t-primary); font-weight:750; background:var(--t-primary-soft); box-shadow:none;
}
.abas-std button.active::after, .mini-tabs button.active::after, .abas button.active::after, .ag-abas button.active::after, .filtros-abas button.active::after,
.abas-std button.on::after, .mini-tabs button.on::after, .abas button.on::after, .ag-abas button.on::after, .filtros-abas button.on::after{ background:var(--t-primary); }
.abas-std button:focus-visible, .mini-tabs button:focus-visible, .abas button:focus-visible, .ag-abas button:focus-visible, .filtros-abas button:focus-visible{ outline:2px solid var(--t-primary); outline-offset:-2px; }
.abas-std button .n, .filtros-abas button .n{ display:inline-block; min-width:18px; margin-left:6px; padding:1px 6px; border-radius:999px; background:var(--t-danger); color:#fff; font-size:11px; font-weight:800; line-height:16px; text-align:center; }
.abas-std button .n:empty, .filtros-abas button .n:empty{ display:none; }

/* =====================================================================
   SISTEMA VISUAL 2 (29/out) — vale para as telas internas (<html data-ds>).
   Só APARÊNCIA (cor, borda, raio, sombra, peso, estados); tamanho e layout
   continuam com cada tela. Especificidade html[data-ds] .x vence o .x do módulo.
   ===================================================================== */
html[data-ds]{ background:var(--t-bg); }
html[data-ds] body{ background:var(--t-bg); color:var(--t-text); font-family:var(--t-font); font-feature-settings:"cv11","ss01"; text-rendering:optimizeLegibility; }
html[data-ds] ::selection{ background:var(--t-primary-line); color:var(--t-text); }
html[data-ds] a{ color:var(--t-primary); text-underline-offset:3px; }
html[data-ds] a:hover{ color:var(--t-primary-dark); }
/* números alinhados em tabelas, valores e totais */
html[data-ds] :is(table, .num, .valor, .total, .kpi, .money, .preco, td.r, .tot){ font-variant-numeric:tabular-nums; }

/* ---------- botões ---------- */
html[data-ds] .btn{
  border:1px solid var(--t-line); background:var(--t-surface); color:var(--t-text);
  border-radius:var(--t-radius-sm); font-weight:600; box-shadow:var(--t-shadow-sm); text-shadow:none;
  transition:background-color .16s var(--t-ease), border-color .16s var(--t-ease), box-shadow .16s var(--t-ease), color .16s var(--t-ease), transform .08s;
}
html[data-ds] .btn:hover{ background:var(--t-surface-2); border-color:var(--t-line-strong); }
html[data-ds] .btn:active{ transform:translateY(1px); }
html[data-ds] :is(.btn-accent, .btn-primary, .btn-new, .btn-confirm, .btn-enviar){
  background:var(--t-primary-strong); border-color:var(--t-primary-strong); color:#fff;
  box-shadow:0 1px 2px rgba(14,34,51,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-ds] :is(.btn-accent, .btn-primary, .btn-new, .btn-confirm, .btn-enviar):hover{ background:var(--t-primary-dark); border-color:var(--t-primary-dark); color:#fff; }
html[data-theme=dark][data-ds] :is(.btn-accent, .btn-primary, .btn-new, .btn-confirm, .btn-enviar):hover{ background:#2A86A5; border-color:#2A86A5; }
html[data-ds] :is(.btn-ghost, .btn-secondary, .btn-cancel, .btn-ref){ background:var(--t-surface); color:var(--t-text-soft); border-color:var(--t-line); }
html[data-ds] :is(.btn-ghost, .btn-secondary, .btn-cancel, .btn-ref):hover{ background:var(--t-surface-2); color:var(--t-text); }
html[data-ds] :is(.btn-danger){ background:var(--t-danger); border-color:var(--t-danger); color:#fff; }
html[data-theme=dark][data-ds] .btn-danger{ background:#C2382C; border-color:#C2382C; }
html[data-ds] :is(.btn-ok, .btn-success){ background:var(--t-success); border-color:var(--t-success); color:#fff; }
html[data-theme=dark][data-ds] :is(.btn-ok, .btn-success){ background:#1E8E5A; border-color:#1E8E5A; }
html[data-ds] .btn-wa{ background:#128C4A; border-color:#128C4A; color:#fff; }
html[data-ds] .btn:focus-visible, html[data-ds] button:focus-visible{ outline:none; box-shadow:var(--t-ring); }
html[data-ds] :is(.btn, button):disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- campos ---------- */
html[data-ds] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]), select, textarea){
  background-color:var(--t-surface); color:var(--t-text); border:1px solid var(--t-line-strong); border-radius:var(--t-radius-sm);
  transition:border-color .16s var(--t-ease), box-shadow .16s var(--t-ease);
}
html[data-ds] :is(input, select, textarea):hover:not(:disabled):not(:focus){ border-color:var(--t-muted); }
html[data-ds] :is(input, select, textarea):focus{ outline:none; border-color:var(--t-primary); box-shadow:var(--t-ring); }
html[data-ds] :is(input, select, textarea):disabled{ background-color:var(--t-surface-2); color:var(--t-muted); }
html[data-ds] :is(input, textarea)::placeholder{ color:var(--t-placeholder); opacity:1; }
html[data-ds] :is(input[type=checkbox], input[type=radio]){ accent-color:var(--t-primary-strong); }
html[data-ds] :is(.field, .form-group) > label, html[data-ds] .lb{ color:var(--t-text-soft); }
html[data-theme=dark][data-ds] select{ background-color:var(--t-surface); }
html[data-theme=dark][data-ds] input[type=date], html[data-theme=dark][data-ds] input[type=time], html[data-theme=dark][data-ds] input[type=month]{ color-scheme:dark; }

/* ---------- cartões, painéis, cabeçalhos ---------- */
html[data-ds] :is(.card, .panel){ background:var(--t-surface); border-color:var(--t-line); box-shadow:var(--t-shadow-sm); }
html[data-ds] .page-title{ color:var(--t-text); letter-spacing:-.015em; }
html[data-ds] :is(.page-sub, .muted, .hint){ color:var(--t-muted); }
html[data-ds] .section-label{ color:var(--t-text-soft); }

/* ---------- tabelas ---------- */
html[data-ds] th{ color:var(--t-muted); background:transparent; border-bottom-color:var(--t-line); }
html[data-ds] td{ border-bottom-color:var(--t-line); }
html[data-ds] tbody tr:hover > td{ background:var(--t-hover); }

/* ---------- selos / pílulas ---------- */
html[data-ds] :is(.badge, .pill, .chip){ border-radius:999px; }

/* ---------- popups ---------- */
html[data-ds] :is(.modal-overlay, .modal-bg){ background:rgba(8,20,30,.48); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
html[data-ds] :is(.modal, .modal-box){ background:var(--t-surface); color:var(--t-text); border:1px solid var(--t-line); border-radius:var(--t-radius-lg); box-shadow:var(--t-shadow-lg); }
@media (prefers-reduced-motion:no-preference){
  html[data-ds] :is(.modal-overlay.show, .modal-bg.show) > :is(.modal, .modal-box){ animation:temaPopIn .2s var(--t-ease); }
}
@keyframes temaPopIn{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }

/* ---------- toasts ---------- */
html[data-ds] :is(.toast, #toast){ background:#132231; color:#fff; border-radius:10px; box-shadow:var(--t-shadow-lg); }
html[data-theme=dark][data-ds] :is(.toast, #toast){ background:#E3EBF2; color:#0B1620; }

/* ---------- avisos ---------- */
html[data-ds] :is(.alert, .alerta, .aviso){ border-radius:10px; }

/* ---------- abas no tema escuro ---------- */
html[data-theme=dark] :is(.abas-std, .mini-tabs, .abas, .ag-abas, .filtros-abas) button:hover{ background:var(--t-hover); }

/* ---------- rolagem e foco ---------- */
html[data-ds] *{ scrollbar-color:var(--t-line-strong) transparent; }
html[data-ds] *::-webkit-scrollbar-thumb{ background:var(--t-line-strong); background-clip:padding-box; }
html[data-ds] *::-webkit-scrollbar-thumb:hover{ background:var(--t-muted); background-clip:padding-box; }

/* =====================================================================
   TEMA ESCURO — telas antigas têm cores escritas direto no código
   (#fff, #F6F8FA…). Estas regras trazem as mais comuns para o tema.
   ===================================================================== */
html[data-theme=dark][data-ds] :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background:white"], [style*="background:#ffffff"], [style*="background:#FFFFFF"], [style*="background-color:#fff"]){ background:var(--t-surface) !important; }
html[data-theme=dark][data-ds] :is([style*="background:#F6F8FA"], [style*="background:#f6f8fa"], [style*="background:#F0F3F6"], [style*="background:#f8fafc"], [style*="background:#F8FAFC"], [style*="background:#fafafa"], [style*="background:#f5f5f5"]){ background:var(--t-surface-2) !important; }
html[data-theme=dark][data-ds] :is([style*="color:#1B2733"], [style*="color:#111"], [style*="color:#333"], [style*="color:#000"], [style*="color:#222"]){ color:var(--t-text) !important; }
html[data-theme=dark][data-ds] :is([style*="color:#555"], [style*="color:#666"], [style*="color:#777"], [style*="color:#888"]){ color:var(--t-muted) !important; }
html[data-theme=dark][data-ds] :is([style*="border:1px solid #eee"], [style*="border:1px solid #ddd"], [style*="border:1px solid #E3E8EE"]){ border-color:var(--t-line) !important; }
html[data-theme=dark][data-ds] img:not([src$=".svg"]){ filter:none; }

/* Balão "×" que cancela o preenchimento de Venda, Pedido e Orçamento (botão flutuante no canto da tela). */
.balao-x{position:fixed; top:84px; right:20px; z-index:45; width:46px; height:46px; border-radius:50%; border:none; background:var(--t-danger, #B42318); color:#fff; font-size:28px; line-height:1; font-weight:400; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--t-shadow-lg, 0 8px 24px rgba(0,0,0,.25)); transition:transform .15s;}
.balao-x:hover{transform:scale(1.08);} .balao-x:focus-visible{outline:3px solid color-mix(in srgb, var(--t-danger, #B42318) 40%, transparent); outline-offset:2px;}
@media (max-width:760px){ .balao-x{top:auto; bottom:84px; right:14px; width:50px; height:50px;} }


/* =====================================================================
   SEPARAÇÕES E CONTRASTE (31/out) — pedido do dono: monitores com pouca resolução/contraste
   não mostravam as divisões nem as cores de estado. Regras só de APARÊNCIA (borda, fundo, peso);
   tamanho e layout continuam com cada tela. Especificidade baixa (:where) onde possível,
   html[data-ds] onde precisa vencer o CSS antigo do módulo.
   Hierarquia: página (cinza azulado) > cartão (branco, borda + sombra) > faixa de título do cartão
   (cinza claro, divisória) > grupo interno (cinza claro, borda) > linhas de tabela (divisória + zebra).
   ===================================================================== */

/* espaço entre cartões seguidos (zero de especificidade: se o módulo já define margem, a dele vale) */
:where(.card, .panel) + :where(.card, .panel){ margin-top:16px; }

/* ---------- cartão: borda visível + sombra, e faixa de título separada do conteúdo ---------- */
html[data-ds] :is(.card, .panel){ border:1px solid var(--t-line); box-shadow:var(--t-shadow); overflow:visible; }
html[data-ds] :is(.card, .panel) > :is(h2, h3):first-child,
html[data-ds] :is(.card, .panel) > .card-cab,
html[data-ds] :is(.card, .panel) > :is(.card-head, .card-header, .panel-head, .panel-title){
  border-bottom:1px solid var(--t-line); padding-bottom:10px; margin-bottom:14px;
}
html[data-ds] :is(.card, .panel) > .card-cab :is(h2, h3){ margin:0; }
html[data-ds] .card-cab .card-sub, html[data-ds] .card > .card-sub{ color:var(--t-muted); }

/* grupo dentro de cartão (cartão dentro de cartão, caixas de campos): fundo e borda próprios */
html[data-ds] :is(.card, .panel) :is(.card, .panel, .grupo, .bloco, .box, .sub-card, .subcard){
  background:var(--t-surface-2); border:1px solid var(--t-line); box-shadow:none;
}
html[data-ds] :is(.card, .panel) :is(.card, .panel) :is(h2, h3):first-child{ background:none; border:0; margin:0 0 8px; padding:0; }

/* título de seção dentro do cartão: linha por baixo, com pedaço azul no começo */
html[data-ds] .section-label{
  display:block; margin:18px 0 10px; padding:0 0 6px; color:var(--t-primary-dark);
  font-weight:700; letter-spacing:.04em; border-bottom:1px solid var(--t-line);
  background:linear-gradient(var(--t-primary), var(--t-primary)) left bottom / 36px 2px no-repeat;
}
html[data-ds] .section-label:first-child{ margin-top:0; }

/* divisória entre blocos de formulário / grade de campos em cartão */
html[data-ds] :is(.card, .panel) :is(hr, .divisor, .sep){ border:0; border-top:1px solid var(--t-line); margin:14px 0; }
html[data-ds] .rodape{ border-top:1px solid var(--t-line); margin-top:14px; padding-top:12px; }

/* ---------- abas: faixa de abas com divisória forte; aba inativa legível; ativa em destaque ---------- */
.abas-std, .mini-tabs, .abas, .ag-abas, .filtros-abas{ border-bottom:2px solid var(--t-line-strong); }
.abas-std button, .mini-tabs button, .abas button, .ag-abas button, .filtros-abas button{ color:var(--t-text-soft); }
.abas-std button:hover, .mini-tabs button:hover, .abas button:hover, .ag-abas button:hover, .filtros-abas button:hover{ background:var(--t-hover); }
.abas-std button.active, .mini-tabs button.active, .abas button.active, .ag-abas button.active, .filtros-abas button.active,
.abas-std button.on, .mini-tabs button.on, .abas button.on, .ag-abas button.on, .filtros-abas button.on{
  color:var(--t-primary-dark); background:var(--t-surface); box-shadow:inset 0 0 0 1px var(--t-line-strong), 0 -1px 0 var(--t-surface);
  border-radius:8px 8px 0 0;
}
.abas-std button::after, .mini-tabs button::after, .abas button::after, .ag-abas button::after, .filtros-abas button::after{ height:4px; bottom:-2px; }
html[data-theme=dark] :is(.abas-std, .mini-tabs, .abas, .ag-abas, .filtros-abas) button.active,
html[data-theme=dark] :is(.abas-std, .mini-tabs, .abas, .ag-abas, .filtros-abas) button.on{ color:var(--t-primary); background:var(--t-surface-2); }

/* ---------- tabelas: cabeçalho em faixa, linhas divididas, zebra e total destacado ---------- */
html[data-ds] thead th{
  background:var(--t-surface-3); color:var(--t-text-soft); font-size:12px;
  border-bottom:2px solid var(--t-line-strong);
}
html[data-ds] td, html[data-ds] th{ border-bottom:1px solid var(--t-line); }
html[data-ds] tbody tr:nth-child(even) > td{ background:var(--t-zebra); }
html[data-ds] tbody tr:hover > td{ background:var(--t-primary-soft); }
html[data-ds] :is(tr.tot, tr.total, tfoot tr) > :is(td, th){
  background:var(--t-surface-3); border-top:2px solid var(--t-line-strong); font-weight:700; color:var(--t-text);
}
html[data-ds] .scroll, html[data-ds] .table-wrap, html[data-ds] .cad-rolagem{ border:1px solid var(--t-line); border-radius:var(--t-radius-sm); }

/* ---------- selos, etiquetas e estados: fundo + borda + texto escuro da mesma cor ---------- */
html[data-ds] :is(.selo, .badge, .pill, .chip, .tag){ border:1px solid color-mix(in srgb, currentColor 35%, transparent); font-weight:700; }
html[data-ds] .selo.ok, html[data-ds] .badge-ok{ background:var(--t-success-soft); color:var(--t-success); }
html[data-ds] .selo.pend, html[data-ds] .badge-wait{ background:var(--t-warning-soft); color:var(--t-warning); }
html[data-ds] .selo.erro, html[data-ds] .selo.err, html[data-ds] .badge-erro{ background:var(--t-danger-soft); color:var(--t-danger); }
html[data-ds] .selo.info{ background:var(--t-info-soft); color:var(--t-info); }
html[data-ds] :is(.alerta, .alert, .aviso).erro, html[data-ds] .alerta.perigo{ background:var(--t-danger-soft); border:1px solid var(--t-danger); color:var(--t-danger); }
html[data-ds] :is(.alerta, .alert, .aviso).ok{ background:var(--t-success-soft); border:1px solid var(--t-success); color:var(--t-success); }
html[data-ds] :is(.alerta, .alert).aviso, html[data-ds] :is(.alerta, .alert, .aviso).warn{ background:var(--t-warning-soft); border:1px solid var(--t-warning); color:var(--t-warning); }

/* ---------- popups: título e rodapé de ações separados do corpo ---------- */
html[data-ds] :is(.modal, .modal-box) > :is(h2, h3):first-child{ border-bottom:1px solid var(--t-line); padding-bottom:10px; margin-bottom:14px; }
html[data-ds] :is(.modal, .modal-box) .modal-actions{ border-top:1px solid var(--t-line); margin-top:16px; padding-top:14px; }

/* ---------- barras de ferramentas / filtros: faixa própria ---------- */
html[data-ds] :is(.toolbar, .filtros, .filters){ background:var(--t-surface-2); border:1px solid var(--t-line); border-radius:var(--t-radius-sm); padding:10px 12px; }
html[data-ds] .linha-sep{ border-top:1px solid var(--t-line); }


/* ---------- CAMPOS x SEÇÃO (31/out) ----------
   Campos têm fundo próprio (azul-claro no tema claro, mais escuro que o cartão no escuro),
   borda marcada e leve sombra interna: nunca da mesma cor do card/grupo. */
html[data-ds] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=hidden]), select, textarea){
  background-color:var(--t-field); border:1.5px solid var(--t-field-line);
  box-shadow:inset 0 1px 2px rgba(15,35,50,.10);
}
/* dentro de grupos cinza: campo branco (contrasta com o cinza) */
html:not([data-theme=dark])[data-ds] :is(.card .card, .card .grupo, .card .bloco, .card .box) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=hidden]), select, textarea){
  background-color:#FFFFFF;
}
html[data-ds] :is(input, select, textarea):hover:not(:disabled):not(:focus):not([readonly]){ border-color:var(--t-primary); }
html[data-ds] :is(input, select, textarea):focus{ background-color:var(--t-surface); border-color:var(--t-primary); box-shadow:var(--t-ring); }
html[data-ds] :is(input, textarea)[readonly], html[data-ds] :is(input, select, textarea):disabled, html[data-ds] :is(input, textarea).calc{
  background-color:var(--t-field-ro); border:1.5px dashed var(--t-line-strong); box-shadow:none; color:var(--t-text-soft);
}
html[data-ds] select{ cursor:pointer; }

/* ações de linha de tabela: 3 colunas fixas, ícones sempre alinhados */
html[data-ds] td.acoes .acoes-linha{ display:inline-flex; gap:4px; justify-content:flex-start; align-items:center; border:0; background:transparent; }
html[data-ds] td.acoes .btn-icone{ border:0; }
html[data-ds] td.acoes :is(.btn-icone, button){ background-color:transparent; box-shadow:none; }
html[data-ds] td.acoes :is(.btn-icone, button):hover{ background-color:var(--t-surface-3); }

/* Listas em tabela: cabem no card, ações com 3 vagas fixas (ícones alinhados mesmo com 2 ícones) */
html[data-ds] .card-tabela{ padding:0 !important; overflow-x:auto; }
html[data-ds] .tabela-cartoes{ width:100%; border-collapse:collapse; }
html[data-ds] .tabela-cartoes :is(th,td){ padding-left:10px; padding-right:10px; }
html[data-ds] .tabela-cartoes td.acoes, html[data-ds] .tabela-cartoes th.acoes{ width:1%; white-space:nowrap; text-align:left; }
html[data-ds] td.acoes .acoes-linha{ min-width:110px; }
html[data-ds] .tabela-cartoes .selos-linha .badge{ white-space:normal; max-width:230px; }