/* ================================================================
   assets/css/theme.css — Tokens de tema (claro/escuro) + componentes
   compartilhados do PowerHC.

   PADRÃO PARA PÁGINAS NOVAS: toda página do sistema deve dar <link> neste
   arquivo (+ assets/js/theme.js) e usar estas classes em vez de recriar
   botão/tabela/modal/formulário do zero. Cores de marca (--blue, --blue2,
   --pale, --light) continuam vindo do PHP por página (dependem do
   credor/tema global — ver config.php: getConfigGlobal()/primeiroPreenchido()),
   e ficam num <style> pequeno inline logo abaixo deste <link>. Este arquivo
   só define o que é igual em toda página: neutros, superfícies e os
   componentes de UI reaproveitáveis.
   ================================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Cores de marca — DEFAULT de segurança. Cada página ainda pode
     sobrescrever no seu <style> inline a partir do credor/tema global
     (mesma especificidade, ordem de cascata vence). Um valor inválido
     ou vazio na página é descartado e estes defaults permanecem — evita
     header "branco" quando $_SESSION['cor1'] vem vazio. */
  --blue:#1A3A5C;--blue2:#1565C0;--pale:#E3F2FD;--light:#E3F2FD;

  /* neutros — modo claro (padrão) */
  --bg:#F4F7FB;--bg3:#F0F4FA;
  --surface:#FFFFFF;--surface2:#F7F9FC;
  --border:#D0DCF0;--border2:#B0C4E8;
  --text:#0D1B2A;--text2:#3D5A80;--text3:#7B93B8;
  --overlay:rgba(13,27,42,.55);

  /* semânticas — mesmas em claro/escuro (ajustadas via bg/borda) */
  --green:#1B7A3E;--gbg:#E8F5E9;--gbdr:#A5D6A7;
  --red:#C0392B;--rbg:#FFEBEE;--rbdr:#EF9A9A;
  --amber:#E65100;--abg:#FFF3E0;--abdr:#FFCC80;

  --sh:0 1px 4px rgba(26,58,92,.08),0 2px 12px rgba(26,58,92,.06);
  --sh2:0 4px 16px rgba(26,58,92,.14);

  /* Véu do fundo "marca d'água" (body.bg-report) — quase opaco, na cor
     de --bg, pra deixar só uma textura leve da foto atrás dos cards. */
  --bg-veil:rgba(244,247,251,.93);

  /* Paleta categórica p/ ícones de KPI/card (--k1..--k7 + variante escura
     --k1d..--k7d p/ gradiente) — de propósito NÃO é a cor de marca (--blue)
     repetida: dá o ar "moderno"/colorido pedido pelo usuário (mockups
     PAINEL_INICIAL_NOVO.png/visuais.png, 2026-09-17). Fixa em claro/escuro
     (chip colorido com ícone branco lê bem nos dois temas — só o fundo do
     card ao redor muda por --surface). Compartilhada por qualquer página
     que use .kpi-card (ver seção "SIDEBAR + COMPONENTES REAPROVEITÁVEIS"
     no fim deste arquivo). */
  --k1:#2563EB;--k1d:#1D4ED8;  /* azul   */
  --k2:#16A34A;--k2d:#15803D;  /* verde  */
  --k3:#9333EA;--k3d:#7C3AED;  /* roxo   */
  --k4:#0D9488;--k4d:#0F766E;  /* teal   */
  --k5:#EA580C;--k5d:#C2410C;  /* laranja*/
  --k6:#DB2777;--k6d:#BE185D;  /* rosa   */
  --k7:#4F46E5;--k7d:#4338CA;  /* índigo */
}

/* Modo escuro: aplicado via atributo data-theme na <html> (definido por
   assets/js/theme.js antes do primeiro paint). Especificidade de
   :root[data-theme="dark"] é maior que a de :root simples, então isso
   sobrescreve corretamente até as 4 variáveis de marca que cada página
   define no próprio <style> inline (--pale/--light viram um destaque neutro
   em vez do tom pálido do credor, que ficaria "brilhando" sobre fundo escuro). */
:root[data-theme="dark"]{
  --bg:#0B1420;--bg3:#101B2B;
  --surface:#132135;--surface2:#0F1A29;
  --border:#223755;--border2:#2E4A70;
  --text:#E7EEF7;--text2:#A9BCD6;--text3:#748AAC;
  --overlay:rgba(3,8,15,.72);

  --green:#4CAF6D;--gbg:#123322;--gbdr:#1F5C3B;
  --red:#F0776A;--rbg:#3A1712;--rbdr:#7A2E23;
  --amber:#FFB74D;--abg:#3A2812;--abdr:#7A5423;

  --sh:0 1px 4px rgba(0,0,0,.35),0 2px 12px rgba(0,0,0,.25);
  --sh2:0 4px 20px rgba(0,0,0,.45);

  /* Destaque neutro no lugar do "pálido" da marca — evita um retângulo
     claro do cor3 do credor brilhando sobre fundo escuro */
  --pale:rgba(255,255,255,.07);--light:rgba(255,255,255,.07);
  /* Versão clareada da cor de marca p/ texto/ícone sobre fundo escuro
     (cor de marca crua costuma ser escura demais pra ler sobre --surface) */
  --accent:color-mix(in srgb, var(--blue) 55%, white 45%);
  --bg-veil:rgba(11,20,32,.945);
}
:root:not([data-theme="dark"]){
  --accent:var(--blue);
}

/* Sem JS (raro, mas por segurança): segue preferência do SO */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#0B1420;--bg3:#101B2B;--surface:#132135;--surface2:#0F1A29;
    --border:#223755;--border2:#2E4A70;--text:#E7EEF7;--text2:#A9BCD6;--text3:#748AAC;
    --overlay:rgba(3,8,15,.72);
    --green:#4CAF6D;--gbg:#123322;--gbdr:#1F5C3B;
    --red:#F0776A;--rbg:#3A1712;--rbdr:#7A2E23;
    --amber:#FFB74D;--abg:#3A2812;--abdr:#7A5423;
    --sh:0 1px 4px rgba(0,0,0,.35),0 2px 12px rgba(0,0,0,.25);
    --sh2:0 4px 20px rgba(0,0,0,.45);
    --pale:rgba(255,255,255,.07);--light:rgba(255,255,255,.07);
    --accent:color-mix(in srgb, var(--blue) 55%, white 45%);
    --bg-veil:rgba(11,20,32,.945);
  }
}

/* ── Botões de header ── */
/* Pílula do TopBar (links de página). Fica SEMPRE sobre o header .hdr
   (background:var(--blue), sempre escuro) — por isso usa branco translúcido
   + texto branco, que lê bem no claro E no escuro. Antes era
   background:var(--surface)/color:var(--blue): no modo escuro virava navy
   escuro sobre navy escuro (invisível). */
.btn-sm{background:rgba(255,255,255,.12);border:none;color:#fff;padding:7px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;}
.btn-sm:hover{background:rgba(255,255,255,.22)}
/* Página atual do TopBar — ÚNICO padrão de "ativo" do sistema: pill com
   fundo translúcido branco + contorno sutil. Nunca usar texto colorido/
   negrito sem fundo pra indicar item ativo — ver CLAUDE.md "TopBar". */
.btn-sm.active{background:rgba(255,255,255,.22);color:#fff;cursor:default;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
.btn-sm.active:hover{background:rgba(255,255,255,.22);}
.btn-gear.active{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);}
.btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;padding:6px 13px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
/* Botões-ícone quadrados (Gerenciar Usuários / Setup / Sair) — sempre
   34×34, mesma hit-area, mesmo alinhamento vertical entre si (garantido
   pelo align-items:center do container .hdr-actions). */
.btn-gear{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:7px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;color:#fff;flex-shrink:0;text-decoration:none;}
.btn-gear:hover{background:rgba(255,255,255,.25);transform:rotate(45deg);}
.btn-gear svg{width:17px;height:17px;}
/* Sair reaproveita o .btn-gear (mesma hit-area 34×34 dos outros ícones de
   ação) mas não é uma engrenagem — não gira no hover, e o hover é vermelho
   (semântica de saída/perigo leve) em vez do cinza translúcido padrão. */
.btn-gear.btn-logout:hover{background:rgba(211,47,47,.35);transform:none;}

/* ================================================================
   TopBar / Header padrão (partials/header.php) — ÚNICO componente de
   navegação superior do sistema, usado por TODA página logada (raiz e
   sub-apps). Três zonas fixas dentro de .hdr, sempre nesta ordem:
     .hdr-brand    → logo + título/subtítulo (encolhe com reticências,
                     nunca quebra linha — mantém a altura de 58px estável)
     .hdr-nav-wrap → só páginas globais (paginas.ativo) + o dropdown
                     Indicadores — cresce pra preencher o espaço central;
                     o <nav class="hdr-nav"> de dentro rola horizontalmente
                     se não couber, em vez de estourar/empurrar o resto do
                     header. NUNCA colocar nav específica de um módulo
                     aqui — ver nota grande no topo de partials/header.php
                     e ".mod-nav" mais abaixo pro lugar certo.
     .hdr-actions  → identidade do usuário + ícones de ação, nunca encolhe
   Página nova = nunca recriar isto na mão, só setar $HDR_TITULO/
   $HDR_SUBTITULO e dar require em partials/header.php.
   ================================================================ */
.hdr{background:var(--blue);height:58px;padding:0 20px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:200;box-shadow:0 2px 14px rgba(26,58,92,.4);}

/* Largura FIXA (não "0 1 auto"): sem isto a zona se ajustava ao texto de
   $HDR_TITULO/$HDR_SUBTITULO de cada página ("Início" vs. "Boa tarde,
   Fulano!" vs. "Performance de Canais"...), então a largura do .hdr-brand
   — e com ela o ponto onde o .hdr-nav começa — mudava a cada tela. O
   título/subtítulo já cortam com reticências dentro dessa caixa. */
.hdr-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 clamp(200px,20vw,280px);}
.hdr-logo{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none;}
.hdr-logo img{width:100%;height:100%;object-fit:cover;filter:brightness(0) invert(1);}
/* Bloco de título/saudação — largura flexível com reticências em vez de
   quebrar linha (a causa do desalinhamento "estranho" da saudação em
   telas estreitas ou com muitas páginas liberadas no menu central). */
.hdr-titles{min-width:0;}
.hdr-title{font-size:14px;font-weight:600;line-height:18px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr-subtitle{font-size:11px;line-height:14px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}

/* .hdr-nav-wrap é o item flexível de verdade (ocupa o espaço central); o
   <nav> de dentro só cuida da rolagem. Precisa dos dois porque o fade das
   bordas (.hdr-nav-fade) é posicionado em relação ao wrap, não ao próprio
   elemento que rola — senão o fade "rolaria junto" com o conteúdo. */
.hdr-nav-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex;}
.hdr-nav{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.hdr-nav::-webkit-scrollbar{display:none;}
/* Indicador de rolagem (só aparece quando dá pra rolar naquela direção —
   ver hdrNavUpdateFade() em assets/js/theme.js). Gradiente na cor do
   header (--blue, já é a cor de marca do credor/tema, não um cinza fixo)
   pra "sumir" o conteúdo suavemente em vez de cortar puro/seco — a pista
   visual pedida no lugar de só esconder a scrollbar. */
.hdr-nav-fade{position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:5;}
.hdr-nav-fade-l{left:0;background:linear-gradient(to right, var(--blue), transparent);}
.hdr-nav-fade-r{right:0;background:linear-gradient(to left, var(--blue), transparent);}
.hdr-nav-wrap.can-scroll-l .hdr-nav-fade-l{opacity:1;}
.hdr-nav-wrap.can-scroll-r .hdr-nav-fade-r{opacity:1;}

/* ── Dropdown de páginas agrupadas no TopBar (ex.: "Indicadores" =
   Parcial + Mapa de Carteiras) — partials/header.php. O botão reaproveita
   .btn-sm/.btn-sm.active (mesma tipografia/cor/hover/destaque dos demais
   itens do menu). O menu (.hdr-dd-menu) usa position:fixed com
   top/left calculados em JS (assets/js/theme.js → hdrDdToggle), NUNCA
   position:absolute: ele vive dentro de .hdr-nav, que tem
   overflow-x:auto/overflow-y:hidden pra rolar quando há muitas páginas
   liberadas — um menu absolute seria cortado por esse overflow. */
.hdr-dd{position:relative;flex-shrink:0;}
.hdr-dd-toggle{gap:6px;}
.hdr-dd-toggle.active{cursor:pointer;} /* precisa continuar clicável (abre o menu), diferente do .btn-sm.active comum */
.hdr-dd-caret{width:11px;height:11px;flex-shrink:0;transition:transform .15s;}
.hdr-dd.open .hdr-dd-caret{transform:rotate(180deg);}
.hdr-dd-menu{position:fixed;display:none;flex-direction:column;gap:2px;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh2);padding:6px;z-index:300;}
.hdr-dd.open .hdr-dd-menu{display:flex;}
.hdr-dd-item{display:block;padding:9px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--text2);text-decoration:none;white-space:nowrap;transition:all .15s;}
.hdr-dd-item:hover{background:var(--pale);color:var(--accent);}
.hdr-dd-item.active{background:var(--pale);color:var(--accent);cursor:default;}

.hdr-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.hbadge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:4px 12px;font-size:11px;color:rgba(255,255,255,.9);white-space:nowrap;flex-shrink:0;}
.hbadge b{color:#fff}
.badge-tipo{border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;white-space:nowrap;flex-shrink:0;}

@media(max-width:760px){
  /* Telas estreitas: o header vira DUAS linhas. Em cima, marca + ícones de
     ação; embaixo, a barra de navegação (páginas liberadas) numa linha
     própria de largura total que rola na horizontal. Antes o .hdr-nav era
     espremido a ~0px entre .hdr-brand e .hdr-actions e os botões que levam
     às outras telas ficavam invisíveis. */
  .hdr{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px 10px;}
  .hdr-brand{flex:1 1 auto;min-width:0;}
  .hbadge{display:none;}   /* nome do usuário some — sobra espaço; aparece dentro do sistema */
  .hdr-nav-wrap{order:5;flex-basis:100%;width:100%;}
  .hdr-nav{gap:6px;}
}

/* ── Seções / tabs de formulário (modal Gerenciador + Setup) ── */
.m-sec{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin:18px 0 10px;display:flex;align-items:center;gap:8px;}
.m-sec::after{content:'';flex:1;height:1px;background:var(--border);}
.m-sec:first-child{margin-top:0;}
.m-tabs{display:flex;border-bottom:2px solid var(--border);background:var(--surface);flex-shrink:0;padding:0 20px;overflow-x:auto;}
.m-tab{padding:11px 16px;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.m-tab svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
.m-tab:hover{color:var(--text2);}
.m-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.m-body{flex:1;overflow-y:auto;padding:20px 24px;}
.m-body::-webkit-scrollbar{width:5px}.m-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.m-panel{display:none;}.m-panel.active{display:block;}
.m-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 24px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;}

.mform{display:grid;gap:11px;}
.mform-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.mform-row.w1{grid-template-columns:1fr;}
.mform-row.w3{grid-template-columns:1fr 1fr 1fr;}
.mfield label{display:block;font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;}
.mfield input,.mfield select{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:'DM Sans',sans-serif;color:var(--text);outline:none;background:var(--surface);transition:border-color .15s;}
.mfield input:focus,.mfield select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,58,92,.08);}
.mfield input::placeholder{color:var(--text3)}
.mfield .hint{font-size:10px;color:var(--text3);margin-top:3px;}
.mfield.chk{display:flex;align-items:center;gap:8px;flex-direction:row;padding-top:20px;}
.mfield.chk input{width:auto;}
.mfield.chk label{margin:0;text-transform:none;font-size:12px;font-weight:500;color:var(--text);letter-spacing:0;}

.mbtn{padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
.mbtn-primary{background:var(--blue);color:#fff;}.mbtn-primary:hover{background:var(--blue2);}
.mbtn-secondary{background:var(--bg3);color:var(--text2);border:1px solid var(--border);}.mbtn-secondary:hover{background:var(--border);}
.mbtn-danger{background:var(--rbg);color:var(--red);border:1px solid var(--rbdr);}.mbtn-danger:hover{background:var(--red);color:#fff;}
.mbtn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Tabelas de listagem ── */
.u-table{width:100%;border-collapse:collapse;}
.u-table th{padding:8px 10px;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;text-align:left;border-bottom:2px solid var(--border);background:var(--bg3);white-space:nowrap;}
.u-table td{padding:9px 10px;font-size:12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.u-table tr:last-child td{border-bottom:none;}
.u-table tr:hover td{background:var(--pale);}
.u-act{display:flex;gap:5px;flex-wrap:wrap;}
.u-btn{padding:3px 9px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;}
.u-btn.edit{background:var(--pale);color:var(--accent);border:1px solid var(--border2);}.u-btn.edit:hover{background:var(--light);}
.u-btn.del{background:var(--rbg);color:var(--red);border:1px solid var(--rbdr);}.u-btn.del:hover{background:var(--red);color:#fff;}
.u-btn.trash{background:var(--red);color:#fff;border:1px solid var(--red);}.u-btn.trash:hover{background:#8E2A1F;border-color:#8E2A1F;}
.u-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;}
.u-status .dot{width:6px;height:6px;border-radius:50%;}
.u-pill{display:inline-flex;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;background:rgba(26,58,92,.1);color:var(--accent);}
.u-pill.administrador{background:rgba(26,58,92,.1);color:#1A3A5C;}
.u-pill.supervisor{background:rgba(21,101,192,.1);color:#1565C0;}
.u-pill.lider{background:rgba(46,125,50,.12);color:#2E7D32;}
.u-pill.credor{background:rgba(230,81,0,.1);color:#E65100;}
.icon-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);}
.icon-tag svg{width:13px;height:13px;stroke:var(--text2);fill:none;stroke-width:2;}

/* ── Alertas ── */
.m-alert{border-radius:8px;padding:9px 13px;font-size:12px;margin-bottom:12px;display:none;align-items:center;gap:8px;}
.m-alert.show{display:flex;}
.m-alert.ok{background:var(--gbg);border:1px solid var(--gbdr);color:var(--green);}
.m-alert.err{background:var(--rbg);border:1px solid var(--rbdr);color:var(--red);}

.empty-state{text-align:center;padding:30px 20px;color:var(--text3);}
.empty-state svg{width:32px;height:32px;stroke:var(--border2);margin:0 auto 10px;display:block;}
.empty-state p{font-size:12px;}

/* ── Grade de toggles (credores visíveis / permissões de página) ── */
.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.cred-toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border:1.5px solid var(--border);border-radius:9px;background:var(--surface);transition:all .18s;}
.cred-toggle.on{border-color:var(--blue);background:var(--pale);}
.ct-info{display:flex;align-items:center;gap:9px;min-width:0;}
.ct-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.ct-nome{font-size:12px;font-weight:600;color:var(--text);}
.ct-cod{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sw{position:relative;width:36px;height:20px;flex-shrink:0;}
.sw input{opacity:0;width:0;height:0;position:absolute;}
.sw-slider{position:absolute;inset:0;background:var(--border2);border-radius:20px;cursor:pointer;transition:all .2s;}
.sw-slider::before{content:'';position:absolute;width:14px;height:14px;top:3px;left:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.sw input:checked+.sw-slider{background:var(--blue);}
.sw input:checked+.sw-slider::before{transform:translateX(16px);}
.sw input:disabled+.sw-slider{opacity:.5;cursor:not-allowed;}

/* ── Campo "adicionar manualmente" (fallback do Dual Listbox de
   Carteiras/Operadores, pra quando o valor não aparece na busca ao vivo) ── */
.tag-add-row{display:flex;gap:8px;}
.tag-add-row input{flex:1;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;background:var(--surface);color:var(--text);font-family:inherit;outline:none;}
.tag-add-row input:focus{border-color:var(--accent);}

/* ── Dual Listbox / Transfer List (credores/carteiras/operadores
   visíveis no Gerenciador de Usuários) ── */
.dual-list{display:flex;align-items:stretch;gap:10px;}
.dual-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.dual-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center;}
.dual-label small{font-weight:400;text-transform:none;letter-spacing:0;font-family:'DM Mono',monospace;color:var(--text3);}
.dual-filter{padding:7px 10px;border:1.5px solid var(--border);border-radius:7px;font-size:11px;background:var(--surface);color:var(--text);font-family:inherit;outline:none;}
.dual-filter:focus{border-color:var(--accent);}
.dual-select{flex:1;min-height:220px;padding:4px;border:1.5px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:12px;outline:none;}
.dual-select:focus{border-color:var(--accent);}
.dual-select option{padding:6px 8px;border-radius:5px;}
.dual-select option:checked{background:var(--pale) linear-gradient(0deg,var(--pale) 0%,var(--pale) 100%);color:var(--accent);}
.dual-btns{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 2px;}
.dual-btns button{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.dual-btns button:hover{background:var(--pale);color:var(--accent);border-color:var(--blue);}
.dual-hint{font-size:10px;color:var(--text3);margin-top:2px;}
@media(max-width:640px){.dual-list{flex-direction:column;}.dual-btns{flex-direction:row;justify-content:center;}}

/* ── Loading / spinner ── */
.spin-sm{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;}
.spin-sm.dark{border-color:var(--border);border-top-color:var(--accent);}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Loader de dados: pílula pequena no canto inferior direito, com o
   símbolo da HC girando "de lado" (rotateY). Markup
   <div id="hcLoad" class="hc-load"> logo após <body> nos dashboards.
   Visível por padrão (aparece já no 1º paint) e some ao ganhar .is-done —
   via window.hcLoad.hide()/hcRun() em assets/js/theme.js, ou pelo baseline
   no evento 'load' quando nenhuma busca reivindicou o loader. Fundo --blue
   (cor de marca), símbolo (PNG preto) fica branco por filtro. Era um
   overlay de tela cheia — virou canto a pedido, menos intrusivo. */
.hc-load{
  position:fixed;right:18px;bottom:18px;z-index:1200;
  display:flex;align-items:center;gap:10px;
  padding:9px 15px 9px 11px;
  background:var(--blue);border-radius:999px;
  box-shadow:0 8px 24px rgba(13,27,42,.32),inset 0 0 0 1px rgba(255,255,255,.09);
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
  /* Failsafe SÓ-CSS: se o JS falhar (theme.js não carregar) e ninguém
     puser .is-done, some sozinho aos 25s — nunca fica preso na tela. */
  animation:hc-load-failsafe 0s linear 25s forwards;
}
.hc-load.is-done{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;}
@keyframes hc-load-failsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
.hc-load__mark{
  width:22px;height:22px;flex-shrink:0;
  background:center/contain no-repeat url("../img/logo_icon.png");
  filter:brightness(0) invert(1);
  animation:hc-flip 1.5s cubic-bezier(.5,.08,.4,.92) infinite;
  will-change:transform;
}
.hc-load__txt{
  color:rgba(255,255,255,.9);font-size:10.5px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;
}
.hc-load__txt::after{content:"";animation:hc-dots 1.4s steps(4,end) infinite;}
@keyframes hc-flip{
  0%   {transform:perspective(180px) rotateY(0deg);}
  100% {transform:perspective(180px) rotateY(360deg);}
}
@keyframes hc-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){
  .hc-load__mark{animation-duration:3.6s;animation-timing-function:linear;}
  .hc-load__txt::after{animation:none;}
  .hc-load{transition:opacity .2s ease;}
}
@media(max-width:520px){
  .hc-load{right:12px;bottom:12px;padding:8px;}
  .hc-load__txt{display:none;}  /* só o ícone girando em telas estreitas */
}

/* ── Modal genérico (overlay + card) ── */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:900;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:16px;box-shadow:0 20px 80px rgba(13,27,42,.25),0 0 0 1px rgba(13,27,42,.06);width:100%;max-width:900px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:mSlide .25s ease;}
@keyframes mSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.m-hdr{background:var(--blue);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.m-hdr h2{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;}
.m-hdr h2 svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;flex-shrink:0;}
.m-close{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;line-height:1;transition:all .15s;}
.m-close:hover{background:rgba(255,255,255,.28);}

/* ── Cards de KPI / grids de quadros (dash.php, base.php) ── */
.g-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:var(--sh);transition:all .15s;}
.g-card:hover{box-shadow:var(--sh2);transform:translateY(-1px);}
.g-card h3{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.g-card h3 em{font-style:normal;font-size:10px;color:var(--text3);font-weight:400;text-transform:none;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

/* ── KPI simples (número grande + rótulo) ── */
.kpi-val{font-size:22px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace;line-height:1.2;}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:4px;}

/* ── Toggle de tema (sol/lua) ── */
.theme-toggle{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:7px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;flex-shrink:0;}
.theme-toggle:hover{background:rgba(255,255,255,.25);}
.theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.theme-toggle .ico-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:block;}

/* ================================================================
   SHELL DE PÁGINA — `.main-scroll`/`.top-bar`/`.btn-primary` etc. são
   compartilhados por dash.php/base.php e por TODAS as telas dos sub-apps
   (controle-acordos, parcial, mapa, linktree). Antes cada página trazia
   isto num <style> inline com hex fixo (não seguia --blue nem o modo
   escuro). Agora vem daqui.
   `.page-wrap`, porém, é usado só por dash.php/base.php/
   performance_canais.php/pausas.php — um shell de altura FIXA
   (calc(100vh - 58px), overflow:hidden) onde só o `.main-scroll` de
   dentro rola; os sub-apps NÃO usam `.page-wrap`, a página inteira rola
   normal (`.top-bar` + `.main-scroll` soltos, direto depois do header).
   É por isso que `.top-bar` tem uma regra extra abaixo,
   `.page-wrap > .top-bar{position:static}` — o sticky abaixo só faz
   sentido pra quem rola a página inteira.
   ================================================================ */
.page-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 58px);}
.main-scroll{flex:1;overflow-y:auto;padding:20px 24px 48px;background:var(--bg);}
.main-scroll::-webkit-scrollbar{width:6px}
.main-scroll::-webkit-scrollbar-track{background:transparent}
.main-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.main-scroll > .mx{max-width:1500px;margin:0 auto;}

/* ── Fundo "marca d'água" (opt-in: <body class="bg-report">) ──────────
   Usado pelos dashboards: dash.php / base.php / performance_canais.php /
   pausas.php / inicial.php. Foto fixa no viewport (assets/img/imagem1.jpeg)
   coberta por um véu quase opaco da cor de fundo do tema (--bg-veil) —
   sobra só uma textura discreta atrás e entre os cards, sem atrapalhar a
   leitura. Acompanha o tema (véu claro no claro, escuro no escuro).
   Precisa que body/.main-scroll fiquem transparentes; o seletor composto
   vence as cópias inline de cada página por especificidade. */
body.bg-report::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--bg-veil),var(--bg-veil)),
    url("../img/imagem1.jpeg") center center/cover no-repeat;
}
body.bg-report{background:transparent;}
body.bg-report .main-scroll{background:transparent;}

/* ── Barra de filtros / ações secundária (abaixo do header compartilhado) ──
   position:sticky;top:58px é pro layout de PÁGINA INTEIRA rolando (body
   scroll) — controle-acordos/parcial/mapa/linktree, que NÃO usam
   .page-wrap: lá .top-bar e .main-scroll rolam juntos no documento, e o
   sticky é o que prende a barra de filtros logo abaixo do .hdr conforme
   desce a página. */
.top-bar{background:var(--surface);border-bottom:2px solid var(--border2);padding:10px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(26,58,92,.06);position:sticky;top:58px;z-index:180;}
/* dash.php/base.php/performance_canais.php/pausas.php usam o shell
   .page-wrap (altura fixa calc(100vh - 58px) + overflow:hidden, só o
   .main-scroll de dentro rola) — aqui o .top-bar já fica sempre visível
   por estar FORA da área que rola, o sticky não tem função nenhuma. Pior:
   como .top-bar é item de um flex column dentro de um pai overflow:hidden
   sem rolagem real, o sticky (que só deveria "grudar" durante o scroll)
   estava sendo pintado com o offset de top:58px reservado de qualquer
   jeito — sobrava uma faixa em branco do tamanho do header entre o .hdr
   e o .top-bar, parecendo uma segunda topbar/divisão. Corrigido tirando
   o sticky nesse contexto (maior especificidade que a regra acima).
   Página nova com o shell .page-wrap NUNCA deve depender do .top-bar
   ficar sticky — ele já está sempre visível por design. */
/* z-index:auto explícito (não só position:static): a regra base .top-bar
   carrega z-index:180 pro caso sticky dos sub-apps. Mesmo com
   position:static o z-index já devia ficar inerte por spec, mas na
   prática ele ainda concorria com o z-index:140 do .app-topbar (sidebar,
   2026-09-17) e vencia — .top-bar (180) pintando por cima do dropdown do
   usuário (.hdr-dd-menu, dentro do .app-topbar). Zerar aqui de vez. */
.page-wrap > .top-bar{position:static;top:auto;z-index:auto;}
/* Mobile: o header vira 2 linhas (altura variável), então o sticky top:58px
   da barra de filtros não alinha mais — nos sub-apps ela deixa de "grudar"
   e rola junto com a página. Regra depois da base .top-bar pra vencer por
   ordem de fonte (mesma especificidade). */
@media(max-width:760px){
  .top-bar{position:static;top:auto;padding:10px 14px;}
}
.top-bar label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;}
.top-bar .sep{width:1px;height:22px;background:var(--border2);flex-shrink:0;margin:0 2px;}
.top-bar .grow{flex:1;min-width:12px;}
/* grupo visual de um filtro (label + controle colados) */
.top-bar .fgrp{display:inline-flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:5px 10px;}
.top-bar .fgrp label{margin:0;}
.top-bar .fgrp .dsel{border:none;background:transparent;padding:3px 2px;}
.top-bar .fgrp .dsel:focus{box-shadow:none;}

/* inputs/selects da barra de filtros */
.dsel{background:var(--surface);border:1.5px solid var(--border);border-radius:7px;padding:6px 10px;color:var(--text);font-size:12px;outline:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .15s;}
.dsel:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,58,92,.08);}
.dsel:disabled{background:var(--bg3);color:var(--text3);cursor:not-allowed;border-color:var(--border);}
.dsel::-webkit-calendar-picker-indicator{filter:var(--cal-invert,none);}
:root[data-theme="dark"]{--cal-invert:invert(1);}

/* ── Botões de conteúdo (fora do header) ── */
.btn-primary{background:var(--blue);border:none;color:#fff;padding:7px 15px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.btn-primary:hover{background:var(--blue2);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-outline{background:var(--surface);border:1.5px solid var(--border2);color:var(--accent);padding:7px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.btn-outline:hover{background:var(--pale);}

/* ── Navegação de sub-páginas de um módulo, dentro do toolbar LOCAL da
   página (.top-bar de controle-acordos, .period-bar de parcial — nunca
   dentro do .hdr-nav compartilhado, ver CLAUDE.md "TopBar"). Mesmo par
   visual link/atual que o resto do sistema usa (pill preenchida = página
   atual, nunca só texto colorido) — só que com .btn-outline como base em
   vez de .btn-sm, porque aqui o fundo é claro (.top-bar/.period-bar são
   var(--surface)), não o azul do header. */
.mod-nav{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mod-nav .btn-outline.active{background:var(--blue);color:#fff;border-color:var(--blue);cursor:default;}
.mod-nav .btn-outline.active:hover{background:var(--blue);}

/* ── Título de seção dentro do conteúdo ── */
.sec-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.2px;margin:22px 0 12px;display:flex;align-items:center;gap:9px;}
.sec-title:first-child{margin-top:0;}
.sec-title .count{background:var(--pale);color:var(--accent);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}

/* ── Barra de progresso genérica (trilho + preenchimento) ── */
.trk{background:var(--pale);border-radius:10px;height:7px;overflow:hidden;}
.trk > span{display:block;height:100%;border-radius:10px;background:var(--blue);}

/* ── Estado vazio grande (centralizado na página) ── */
.empty-big{text-align:center;padding:70px 20px;color:var(--text3);}
.empty-big h2{font-size:18px;margin-bottom:8px;color:var(--text2);font-weight:700;}
.empty-big a{color:var(--accent);font-weight:700;text-decoration:none;}

/* ── Pílula de situação (Excelente/Bom/Atenção/Crítico) por tom semântico ── */
.sit{font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;display:inline-block;letter-spacing:.2px;}
.sit.exc{background:var(--gbg);color:var(--green);}
.sit.bom{background:var(--pale);color:var(--accent);}
.sit.ate{background:var(--abg);color:var(--amber);}
.sit.cri{background:var(--rbg);color:var(--red);}

/* ================================================================
   SIDEBAR + COMPONENTES REAPROVEITÁVEIS (2026-09-17) — identidade visual
   moderna (mockups PAINEL_INICIAL_NOVO.png/visuais.png), piloto em
   dash.php. Ver partials/header.php ($HDR_LAYOUT='sidebar') pra como
   ativar. Página que NÃO seta $HDR_LAYOUT continua 100% no `.hdr`
   antigo (seção "TopBar / Header padrão" acima) — nada abaixo se aplica
   a ela.

   `.kpi-card`/`.card-head` são genéricos de propósito (não dependem de
   sidebar) — qualquer página, com ou sem sidebar, pode usá-los pra não
   reinventar CSS de KPI/cabeçalho de gráfico do zero.
   ================================================================ */

/* ── KPI card (ícone em chip colorido + valor + rótulo) ──
   Paleta --k1..--k7 vem do :root no topo deste arquivo. */
.kpi-card{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh);
  transition:transform .12s,box-shadow .12s;min-width:0;}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--sh2);}
/* Sem .k-N, o ícone cai na cor de marca (--blue/--blue2, igual .card-head
   .c-ico sem k-N) — é o que faz um .kpi-card "puro" combinar com o card
   "Acionamentos" (chart-card, também sem k-N) quando a página quer todos
   os KPIs na mesma cor em vez da paleta categórica variada. */
.kpi-card .k-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));}
.kpi-card .k-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;}
.kpi-card.k-1 .k-ico{background:linear-gradient(135deg,var(--k1),var(--k1d));box-shadow:0 3px 10px color-mix(in srgb,var(--k1) 40%,transparent);}
.kpi-card.k-2 .k-ico{background:linear-gradient(135deg,var(--k2),var(--k2d));box-shadow:0 3px 10px color-mix(in srgb,var(--k2) 40%,transparent);}
.kpi-card.k-3 .k-ico{background:linear-gradient(135deg,var(--k3),var(--k3d));box-shadow:0 3px 10px color-mix(in srgb,var(--k3) 40%,transparent);}
.kpi-card.k-4 .k-ico{background:linear-gradient(135deg,var(--k4),var(--k4d));box-shadow:0 3px 10px color-mix(in srgb,var(--k4) 40%,transparent);}
.kpi-card.k-5 .k-ico{background:linear-gradient(135deg,var(--k5),var(--k5d));box-shadow:0 3px 10px color-mix(in srgb,var(--k5) 40%,transparent);}
.kpi-card.k-6 .k-ico{background:linear-gradient(135deg,var(--k6),var(--k6d));box-shadow:0 3px 10px color-mix(in srgb,var(--k6) 40%,transparent);}
.kpi-card.k-7 .k-ico{background:linear-gradient(135deg,var(--k7),var(--k7d));box-shadow:0 3px 10px color-mix(in srgb,var(--k7) 40%,transparent);}
.kpi-card .k-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}
.kpi-card .k-label{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi-card .k-val{font-size:19px;font-weight:700;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi-card .k-sub{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Cabeçalho padrão de card de gráfico (ícone em chip + título + legenda).
   Sem classe .k-N = gradiente na cor de marca (--blue/--blue2, como um
   .g-card comum); com .k-N, usa a paleta categórica igual ao KPI card. */
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.card-head .c-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));}
.card-head.k-1 .c-ico{background:linear-gradient(135deg,var(--k1),var(--k1d));}
.card-head.k-2 .c-ico{background:linear-gradient(135deg,var(--k2),var(--k2d));}
.card-head.k-3 .c-ico{background:linear-gradient(135deg,var(--k3),var(--k3d));}
.card-head.k-4 .c-ico{background:linear-gradient(135deg,var(--k4),var(--k4d));}
.card-head.k-5 .c-ico{background:linear-gradient(135deg,var(--k5),var(--k5d));}
.card-head.k-6 .c-ico{background:linear-gradient(135deg,var(--k6),var(--k6d));}
.card-head.k-7 .c-ico{background:linear-gradient(135deg,var(--k7),var(--k7d));}
.card-head .c-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;}
.card-head .c-txt{min-width:0;flex:1;}
/* Sobrescreve .g-card h3 (uppercase/flex/margem, seção "componentes"
   acima) — precisa neutralizar cada propriedade que não queremos herdar,
   não só as que este componente define, senão um <h3> dentro de
   .card-head fica com "ACIONAMENTOS" maiúsculo e virado flex row à toa. */
.card-head .c-txt h3{font-size:13.5px;font-weight:700;color:var(--text);margin:0;
  text-transform:none;letter-spacing:normal;display:block;}
.card-head .c-txt p{font-size:10.5px;color:var(--text3);margin:1px 0 0;}
/* Header de card antigo (h3 texto simples) pode conviver com controles
   embutidos (botões/date-pickers) — quando .card-head substitui esse h3,
   os mesmos controles entram como filho extra depois de .c-txt, com
   margin-left:auto pra ficar à direita (ver dash.php). */
.card-head .c-extra{margin-left:auto;flex-shrink:0;}

/* ── Shell com sidebar (opt-in via $HDR_LAYOUT='sidebar' em
   partials/header.php) — substitui o .hdr de topo único por uma coluna
   fixa à esquerda + topbar clara à direita. .app-shell é flex-row;
   .app-sidebar tem largura fixa e não encolhe; .app-main ocupa o resto
   e contém a topbar nova + o conteúdo da página (.page-wrap/.main-scroll
   etc. da própria página, inalterados). */
.app-shell{display:flex;min-height:100vh;}
/* overflow NÃO fica aqui (só em .app-sidebar-nav, que já rola sozinha) —
   .app-sidebar precisa ficar "visible" pro .app-sidebar-collapse-btn
   (position:absolute, pendurado pra fora da borda direita) não ser
   cortado; overflow-y:auto aqui força overflow-x:auto (regra do CSS: só
   um eixo "não visible" já implica o outro auto) e clipava o botão. */
.app-sidebar{width:224px;flex-shrink:0;background:var(--blue);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:150;transition:width .15s;}
.app-sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 16px;flex-shrink:0;}
.app-sidebar-brand .txt{color:#fff;min-width:0;}
.app-sidebar-brand .txt b{display:block;font-size:14px;font-weight:700;line-height:1.2;}
.app-sidebar-brand .txt small{display:block;font-size:9.5px;color:rgba(255,255,255,.55);letter-spacing:.3px;}
.app-sidebar-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:6px 12px;overflow-y:auto;overflow-x:hidden;}
.app-sidebar-nav::-webkit-scrollbar{width:5px;}
.app-sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
.app-sidebar-nav a,.app-sidebar-nav .cur{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  color:rgba(255,255,255,.72);text-decoration:none;font-size:12.5px;font-weight:600;transition:all .15s;}
.app-sidebar-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.app-sidebar-nav .cur{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:default;}
.app-sidebar-nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.app-sidebar-foot{padding:14px 16px 18px;font-size:10.5px;color:rgba(255,255,255,.45);line-height:1.5;
  border-top:1px solid rgba(255,255,255,.1);flex-shrink:0;}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.app-topbar{height:58px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 22px;position:sticky;top:0;z-index:140;}
.app-topbar-titles{min-width:0;flex:1 1 auto;}
.app-topbar-titles .t{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-topbar-titles .s{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0;}
.app-clock{font-size:11px;color:var(--text3);text-align:right;white-space:nowrap;}
.app-user-btn{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--border);
  border-radius:30px;padding:5px 12px 5px 5px;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--text);transition:all .15s;}
.app-user-btn:hover{background:var(--pale);}
.app-user-avatar{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.app-user-btn .u-txt{text-align:left;line-height:1.25;}
.app-user-btn .u-name{font-size:11.5px;font-weight:700;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.app-user-btn .caret{width:10px;height:10px;stroke:var(--text3);fill:none;stroke-width:2;flex-shrink:0;}
/* Menu do usuário — ANCORADO POR CSS PURO (position:absolute relativo a
   .app-user-dd), não pelo mecanismo de .hdr-dd/hdrDdToggle() (calcula
   top/left em JS via getBoundingClientRect(), pensado pro dropdown
   "Indicadores" no meio do .hdr-nav). Testado em produção 2026-09-18: pro
   botão do usuário, colado na borda direita da topbar, o cálculo em JS
   abria a caixa longe do botão (gap grande, alinhamento errado). Âncora
   CSS simples é mais robusta aqui — sempre "colada" no botão, sem
   depender de nenhum cálculo de viewport. Toggle: appUserMenuToggle()
   em assets/js/theme.js (independente de hdrDdToggle()). */
.app-user-dd{position:relative;flex-shrink:0;}
.app-user-menu-pop{position:absolute;top:calc(100% + 8px);right:0;display:none;flex-direction:column;gap:2px;
  min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--sh2);padding:6px;z-index:300;}
.app-user-dd.open .app-user-menu-pop{display:flex;}
.app-user-menu-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:7px;
  font-size:12px;font-weight:600;color:var(--text2);text-decoration:none;white-space:nowrap;transition:all .15s;}
.app-user-menu-item:hover{background:var(--pale);color:var(--accent);}
.app-user-menu-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.app-hamburger{display:none;background:var(--bg3);border:1px solid var(--border);border-radius:8px;width:36px;height:36px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--text);flex-shrink:0;}
.app-hamburger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.app-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(3,8,15,.55);z-index:145;}

/* ── Sidebar recolhível (desktop) — botão flutuante na borda direita da
   sidebar, ícone gira 180° quando recolhida. Estado persiste via
   localStorage (assets/js/theme.js → sidebarCollapseToggle()); o flash
   é evitado pelo <script> inline logo no início de .app-shell (ver
   partials/header.php). Recolhida = só ícones (58px), rótulos (.lbl)
   escondidos — cada item ganhou um atributo title="" como alternativa
   de acessibilidade/tooltip nativo pra quando o texto some. */
.app-sidebar-collapse-btn{position:absolute;right:-12px;top:66px;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh);color:var(--text2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:160;transition:transform .15s,color .15s;}
.app-sidebar-collapse-btn:hover{color:var(--accent);}
.app-sidebar-collapse-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;}
.app-shell.collapsed .app-sidebar-collapse-btn svg{transform:rotate(180deg);}
.app-shell.collapsed .app-sidebar{width:64px;}
.app-shell.collapsed .app-sidebar-brand{padding:18px 0;justify-content:center;}
.app-shell.collapsed .app-sidebar-brand .txt{display:none;}
.app-shell.collapsed .app-sidebar-nav{padding:6px 10px;}
.app-shell.collapsed .app-sidebar-nav a,.app-shell.collapsed .app-sidebar-nav .cur{justify-content:center;padding:10px;}
.app-shell.collapsed .app-sidebar-nav .lbl{display:none;}
.app-shell.collapsed .app-sidebar-foot{padding:12px 6px;text-align:center;}
.app-shell.collapsed .app-sidebar-foot .lbl{display:none;}
.app-shell.collapsed .app-sidebar-foot::before{content:'♥';opacity:.4;}

@media(max-width:900px){
  .app-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sh2);}
  .app-shell.sidebar-open .app-sidebar{transform:translateX(0);}
  .app-shell.sidebar-open .app-sidebar-backdrop{display:block;}
  .app-hamburger{display:flex;}
  .app-topbar{padding:0 14px;gap:10px;}
  .app-clock{display:none;}
  .app-user-btn .u-txt{display:none;}
  .app-user-btn{padding:5px;}
  /* Mobile é gaveta off-canvas (hambúrguer), não faz sentido "recolher"
     pra ícone — o botão de recolher só existe no layout de desktop. */
  .app-sidebar-collapse-btn{display:none;}
  .app-shell.collapsed .app-sidebar{width:224px;}
  .app-shell.collapsed .app-sidebar-brand{padding:18px 16px;justify-content:flex-start;}
  .app-shell.collapsed .app-sidebar-brand .txt,
  .app-shell.collapsed .app-sidebar-nav .lbl,
  .app-shell.collapsed .app-sidebar-foot .lbl{display:initial;}
  .app-shell.collapsed .app-sidebar-foot::before{content:'';}
}