/* ===== CSS UNIVERSAL LARAVEL - TAILWIND + SHADCN ===== */

/* Reset e Base */
* {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

/* ===== SISTEMA DE CORES — PALETA VERDE NEUTRA =====
   Proporcao: ~90% cinza, ~8% grafite, ~2% verde.
   Verde aparece SO onde significa dinheiro do lojista ou item ativo.
   Azul foi removido do produto: --primary, --secondary e --info eram azuis
   e disputavam significado com o verde da marca. */
:root {
    /* Texto sobre fundos de atencao/erro. No claro e a superficie; o bloco escuro
       reaponta para --sobre-ac. */
    --sobre-status: var(--card);

    /* ---- Claro: branco + cinza-azulado clarissimo (molde Versell) com o azul da
            Pagandu como acento. Verde, ambar e vermelho so carregam significado
            (entrou / pendente / erro). ---- */
    --background: 214 32% 96.5%;            /* #F3F6F9  fundo do app */
    --foreground: 222 47% 11%;              /* #0F172A  texto principal */
    --card: 0 0% 100%;                      /* #FFFFFF  superficie: cards, menu, topo */
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 206 88% 32%;                 /* #0A5B99  botao primario (branco por cima: 7,1:1) */
    --primary-foreground: 0 0% 100%;
    --secondary: 215 18% 38%;
    --secondary-foreground: 0 0% 100%;
    --muted: 214 30% 93.5%;                 /* #E9EEF3  superficie sutil */
    --muted-foreground: 215 18% 38%;        /* #4F5B6E  texto secundario e icones */
    --accent: 214 30% 93.5%;                /* hover: so muda o fundo */
    --accent-foreground: 222 47% 11%;
    --destructive: 4 66% 42%;               /* #B22D24 */
    --destructive-foreground: 0 0% 100%;
    --border: 214 24% 89%;                  /* #DDE3EA */
    --input: 214 24% 86%;
    --ring: 206 88% 36%;
    --success: 158 64% 26%;                 /* #186D4E  so significado: entrou / concluido */
    --warning: 38 85% 27%;                  /* #7F560A  pendente */
    --info: 215 18% 38%;

    /* ---- Extras ---- */
    --brand: 206 88% 32%;                   /* azul da marca do painel */
    --brand-accent: 206 88% 36%;            /* #0B67AD  acento: link, ativo, barra de progresso */
    --ac-tinta: 206 85% 95%;                /* #E8F3FD  faixa suave do item ativo e dos icones de atalho */
    --nav-active-bg: 206 85% 95%;           /* item ativo: faixa suave (molde Versell)... */
    --nav-active-fg: 206 88% 32%;           /* ...com texto e icone no azul */
    --nav-active-bar: 0 0% 100% / 0;
    --radius: 0.5rem;

    /* ---- Escalas do sistema (raio, elevacao). Um valor por papel, sem numero solto. ---- */
    --radius-sm: 8px;      /* botao, input, item de menu */
    --radius-md: 12px;     /* caixa de icone, aviso, selo de placa */
    --radius-lg: 16px;     /* card, modal, popover */
    --radius-xl: 22px;     /* arte do login, vitrine das placas */
    --shadow-1: 0 1px 2px hsl(220 40% 20% / .04), 0 2px 8px -2px hsl(220 40% 20% / .06);          /* card */
    --shadow-2: 0 10px 28px -14px hsl(220 40% 20% / .22);  /* card clicavel no hover */
    --shadow-3: 0 24px 48px -16px hsl(220 40% 20% / .30);  /* modal, popover, drawer */

    /* ---- Superficie de cor fixa: sempre preta, nos dois temas (arte do login, capa
            do perfil, vitrine das placas no escuro). O acento dela tambem e fixo. ---- */
    --fixo-bg: 222 72% 7%;      /* marinho (era preto puro) */
    --fixo-ac: 197 82% 60%;     /* ciano (era lima) */
    --fixo-txt: 0 0% 100%;

    /* ---- Cor das placas de conquista: a cor e da placa, nao do tema ---- */
    --placa-verde: 152 62% 50%;   /* esmeralda (era lima) */
    --placa-roxo: 268 85% 66%;
    --placa-ouro: 43 90% 55%;
    --placa-ciano: 187 80% 55%;
    --placa-prata: 36 20% 78%;     /* as placas da Cherryfy: 50 mil */
    --placa-bronze: 27 62% 52%;    /* 100 mil */
    --placa-vermelho: 355 60% 54%; /* 250 mil */

    /* ---- Medidas da casca ---- */
    --drawer-w: 256px;
    --topo-h: 64px;
}

.dark, [data-theme="dark"], [data-bs-theme="dark"] {
    /* ==== PALETA DO TEMA ESCURO ====
       Fonte da verdade sao os 11 tokens abaixo. Os nomes shadcn que o resto do
       arquivo ja usa viram apelidos deles, entao nenhuma regra existente quebra.
       O tema claro (bloco :root) nao e tocado por nada daqui. */
    /* Preto neutro, escurecido em 12/09 a pedido do Alex ("da pra deixar o
       preto mais escuro?"). Fundo vai a preto puro e os tres degraus acima
       descem junto, mantendo a escada: era #0A0A0B / #121214 / #1C1C1F /
       #292A2C. A saturacao minima fica so pra nao virar cinza chapado. */
    /* Azul-marinho profundo, no molde do painel da Pagandu: fundo quase-preto
       azulado, superficies em degraus de marinho, borda azulada discreta,
       texto branco e acento ciano (o "YOUR" da tela de login deles). */
    --bg:        226 70% 5.5%;         /* #040918  fundo do conteudo */
    --sup:       218 62% 10.5%;        /* #0A162B  menu, cards, barra do topo */
    --sup2:      217 46% 15.5%;        /* #15233A  hover, item ativo, superficie sutil */
    --borda:     217 38% 19%;          /* #1E2C43  bordas e divisorias */
    --txt:       210 40% 98%;          /* #F8FAFC  texto principal e numeros */
    --txt2:      215 22% 66%;          /* #95A3BA  texto secundario, rotulos e icones */
    --ac:        197 82% 58%;          /* #3CBAEC  acento ciano: botao primario, link, ativo */
    --ac-fraco:  205 60% 22%;          /* borda do card de saldo */
    --sobre-ac:  222 75% 8%;           /* #050B24  texto sobre o acento (12:1) */
    --atencao:   43 80% 60%;           /* #EBBF47  pendente */
    --erro:      4 86% 71%;            /* #F57C74  falha / cancelado */
    --ok:        152 58% 55%;          /* #4ACE90  entrou / concluido (so significado) */

    /* ---- apelidos: nomenclatura shadcn usada pelo resto do CSS ---- */
    --background: var(--bg);
    --foreground: var(--txt);
    --card: var(--sup);
    --card-foreground: var(--txt);
    --popover: var(--sup);
    --popover-foreground: var(--txt);
    --primary: var(--ac);                /* botao primario: fundo acento... */
    --primary-foreground: var(--sobre-ac);  /* ...com texto escuro por cima */
    --secondary: var(--txt2);
    --secondary-foreground: var(--sobre-ac);
    --muted: var(--sup2);                /* cabecalho de tabela, superficie sutil */
    --muted-foreground: var(--txt2);
    --accent: var(--sup2);               /* hover: so muda o fundo, sem cor */
    --accent-foreground: var(--txt);
    --destructive: var(--erro);
    --destructive-foreground: var(--sobre-ac);
    --border: var(--borda);
    --input: var(--borda);
    --ring: var(--ac);
    --success: var(--ok);                /* verde so pra significado; o acento agora e azul */
    --warning: var(--atencao);
    --info: var(--txt2);                 /* era azul; agora texto de apoio */

    --brand: var(--ac);
    --brand-accent: var(--ac);
    --nav-active-bg: var(--sup2);        /* item ativo: fundo sup2... */
    --nav-active-fg: var(--ac);          /* ...texto e icone no acento... */
    --nav-active-bar: 0 0% 100% / 0;     /* sem faixa lateral: a superficie ja marca */
    --ac-tinta: 205 60% 17%;             /* faixa suave: icones de atalho */
    --sobre-status: var(--sobre-ac);     /* texto sobre atencao/erro preenchidos */

    /* No escuro elevacao e degrau de superficie + borda; sombra so em modal/popover. */
    --shadow-1: 0 0 0 0 transparent;
    --shadow-2: 0 0 0 0 transparent;
    --shadow-3: 0 24px 48px -12px hsl(0 0% 0% / .8);
    --borda-elevada: 217 36% 24%;         /* borda de modal e popover: um degrau acima de --borda */
}

/* ---- Ajustes que valem SO no escuro (a regra base e compartilhada) ---- */

/* Card de saldo: no escuro a marcacao e a borda inteira em --ac-fraco,
   nao a faixa de topo usada no tema claro. */
[data-theme="dark"] .kpi-destaque, .dark .kpi-destaque {
    border: 1px solid hsl(var(--ac-fraco)) !important;
    border-top: 1px solid hsl(var(--ac-fraco)) !important;
}

/* Indicadores de risco comecam em --txt2 (no claro seguem em grafite). */
[data-theme="dark"] .stat-neutro, .dark .stat-neutro {
    color: hsl(var(--txt2)) !important;
}

/* Ponto de notificacao do topo em --ac. */
[data-theme="dark"] .badge-notificacao, .dark .badge-notificacao,
[data-theme="dark"] .navbar .badge.rounded-circle, .dark .navbar .badge.rounded-circle {
    background: hsl(var(--ac)) !important;
    color: hsl(var(--sobre-ac)) !important;
}

/* Barra do topo: superficie --sup com divisoria --borda. */
[data-theme="dark"] .top-app-bar, .dark .top-app-bar {
    background: hsl(var(--sup)) !important;
    border-bottom: 1px solid hsl(var(--borda)) !important;
}
[data-theme="dark"] .top-app-bar .icon-navbar, .dark .top-app-bar .icon-navbar,
[data-theme="dark"] .top-app-bar .ph, .dark .top-app-bar .ph {
    color: hsl(var(--txt2)) !important;
}
/* o hover dos icones do topo precisa vencer a regra acima, que pinta todo .ph do topo */
[data-theme="dark"] .top-app-bar .icone-acao:hover i,
.dark .top-app-bar .icone-acao:hover i {
    color: hsl(var(--txt)) !important;
}

/* ===== PHOSPHOR =====
   Os icones sao webfont (.ph .ph-nome) e herdam o font-size do pai. O tema base
   dimensionava os antigos por "i.material-icons" (styles.css do vendor, linhas 22089
   e 22097) -- como as classes mudaram, aquelas regras deixaram de alcancar e o tamanho
   precisa ser redefinido aqui. */
.drawer .drawer-menu .nav .nav-link .nav-link-icon i.ph {
    font-size: 1.25rem !important;
}
.drawer .drawer-menu .nav .nav-link .drawer-collapse-arrow i.ph {
    font-size: 1.125rem !important;
}
/* A seta de submenu era "expand_more" (aponta pra baixo) e girava 180deg quando aberto.
   O ph-caret-down tem a mesma orientacao, entao a animacao existente segue valendo. */

/* O Phosphor nao traz utilitarios de tamanho/animacao (o Font Awesome trazia).
   Como o FA agora so existe pelas 3 bandeiras de cartao, nao da pra depender do
   .fa-spin/.fa-2x dele -- estes sao os equivalentes proprios. */
.ph-2x { font-size: 2em !important; }
.ph-spin { animation: ph-girar 1.6s linear infinite; display: inline-block; }
@keyframes ph-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-spin { animation: none; } }

/* ===== BASE STYLES ===== */
body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
}

html {
    scroll-behavior: smooth;
}

/* ===== CARDS ===== */
.card, .adobe-glass-card, .shadow, .bg-white {
    background: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease-in-out !important;
}

.dark .card, [data-theme="dark"] .card, .dark .adobe-glass-card, [data-theme="dark"] .adobe-glass-card, .dark .shadow, [data-theme="dark"] .shadow, .dark .bg-white, [data-theme="dark"] .bg-white {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

.card:hover, .adobe-glass-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px) !important;
}

.dark .card:hover, [data-theme="dark"] .card:hover, .dark .adobe-glass-card:hover, [data-theme="dark"] .adobe-glass-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.card-body, .adobe-card-body {
    padding: 1.5rem !important;
}

.card-header {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 16px 16px 0 0 !important;
}

.card-footer {
    background: hsl(var(--muted)) !important;
    border-top: 1px solid hsl(var(--border)) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 16px 16px !important;
}

/* ===== STAT ICON (quadrado arredondado com fundo suave, atras do icone de KPI/lista) =====
   Referencia: paineis tipo AmploPay usam icone-em-caixa em vez de icone solto.
   Neutro por padrao (mesma logica de "cor com significado" do resto do painel);
   .stat-icon-brand e a excecao, reservada pro cartao que already ganha destaque (saldo). */
.stat-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.stat-icon-brand {
    background: hsl(var(--brand) / 0.12) !important;
    color: hsl(var(--brand)) !important;
}

[data-theme="dark"] .stat-icon-brand, .dark .stat-icon-brand {
    background: hsl(var(--brand-accent) / 0.16) !important;
    color: hsl(var(--brand-accent)) !important;
}

/* ===== ACENTOS DOS ATALHOS =====
   Cores decorativas, SO pros atalhos do topo (call-to-action). Nao entram na regra
   de "cor com significado" que rege indicadores e valores -- ali cor continua sendo
   dado (verde = dinheiro, ambar = atencao, tijolo = erro). A barra fixa do rodape
   no mobile ignora estas classes e segue em cor unica. */
.atalho-cor-1 { background: hsl(152 45% 45% / 0.14) !important; color: hsl(152 45% 32%) !important; }
.atalho-cor-2 { background: hsl(38 92% 50% / 0.16) !important;  color: hsl(38 80% 38%) !important; }
.atalho-cor-3 { background: hsl(217 80% 58% / 0.14) !important; color: hsl(217 70% 48%) !important; }
.atalho-cor-4 { background: hsl(262 60% 60% / 0.14) !important; color: hsl(262 52% 52%) !important; }

/* No escuro os mesmos matizes precisam subir de luminosidade pra manter contraste */
[data-theme="dark"] .atalho-cor-1, .dark .atalho-cor-1 { background: hsl(152 50% 50% / 0.18) !important; color: hsl(152 60% 62%) !important; }
[data-theme="dark"] .atalho-cor-2, .dark .atalho-cor-2 { background: hsl(38 85% 55% / 0.18) !important;  color: hsl(38 85% 65%) !important; }
[data-theme="dark"] .atalho-cor-3, .dark .atalho-cor-3 { background: hsl(217 75% 62% / 0.18) !important; color: hsl(217 80% 70%) !important; }
[data-theme="dark"] .atalho-cor-4, .dark .atalho-cor-4 { background: hsl(262 60% 65% / 0.18) !important; color: hsl(262 70% 74%) !important; }

/* Reservado pra metrica que precisa de atencao (saques pendentes, usuarios em analise) */
.stat-icon-warn {
    background: hsl(var(--warning) / 0.15) !important;
    color: hsl(var(--warning)) !important;
}

/* Estado negativo de fato (usuario banido, falha) -- distinto do "atencao" ambar */
.stat-icon-bad {
    background: hsl(var(--destructive) / 0.15) !important;
    color: hsl(var(--destructive)) !important;
}

/* Atalhos de acao rapida (ex: dashboard) — cartao inteiro clicavel, verde da marca
   (aqui e call-to-action, nao dado/metrica — nao entra na regra de "cor com significado"). */
.shortcut-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    text-decoration: none !important;
}

.shortcut-card:hover {
    text-decoration: none !important;
}

.shortcut-card:hover .adobe-glass-card {
    border-color: hsl(var(--brand) / 0.4) !important;
}

[data-theme="dark"] .shortcut-card:hover .adobe-glass-card, .dark .shortcut-card:hover .adobe-glass-card {
    border-color: hsl(var(--brand-accent) / 0.4) !important;
}

/* No mobile os 4 atalhos viram um grid de icone-em-cima + rotulo embaixo, sem
   caixa/borda — referencia que o Alex mandou (app de carteira, acoes rapidas
   compactas 4-a-4). Acima do breakpoint md volta pro cartao horizontal normal. */
@media (max-width: 767.98px) {
    .shortcut-card .adobe-glass-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .shortcut-card .adobe-card-body {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        gap: 0.4rem !important;
        padding: 0.25rem !important;
    }

    .shortcut-card .stat-icon {
        width: 2.75rem !important;
        height: 2.75rem !important;
        border-radius: 14px !important;
    }

    .shortcut-card .adobe-text.fw-bold {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
    }

    .shortcut-card .shortcut-subtitle {
        display: none !important;
    }

    /* Barra fixa de atalhos no rodape (segunda instancia, .atalhos-barra-fixa):
       nao rola com a pagina e o conteudo passa borrado por tras -- referencia do
       app de carteira que o Alex mandou. z-index abaixo do drawer (1038) pra que o
       menu lateral do mobile cubra a barra quando abrir. */
    .atalhos-barra-fixa {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1030 !important;
        margin: 0 !important;
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
        background: hsl(var(--card) / 0.85) !important;
        backdrop-filter: blur(16px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
        border-top: 1px solid hsl(var(--border)) !important;
    }

    /* Espaco no fim do conteudo pra ultima linha nao ficar escondida atras da barra */
    .main-content.app-content {
        padding-bottom: 6rem !important;
    }
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6, .adobe-title {
    color: hsl(var(--foreground)) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

/* Escala reduzida: os titulos de pagina estavam grandes demais (h1 em 2.25rem
   dominava a tela, ainda mais no celular). Referencias de painel de pagamento
   (AmploPay, Versell) ficam na casa de 1.75rem no desktop. */
h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1.125rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.9375rem !important; }

.adobe-subtitle, .text-muted, .small {
    color: hsl(var(--muted-foreground)) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.adobe-text {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
}

.adobe-text-muted {
    color: hsl(var(--muted-foreground)) !important;
    font-weight: 400 !important;
}

.fw-bold, .font-weight-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* ===== FORMS E INPUTS ===== */
.form-select, 
.form-control, 
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="tel"], 
input[type="url"], 
input[type="search"], 
input[type="date"], 
input[type="time"], 
input[type="datetime-local"], 
select, 
textarea {
    background: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease-in-out !important;
    color: hsl(var(--foreground)) !important;
    width: 100% !important;
}

.form-select:focus, 
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

.form-label, label {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.form-text {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* ===== BUTTONS ===== */
.btn {
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease-in-out !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 0.5rem !important;
}

.btn-primary {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.btn-primary:hover {
    background: hsl(var(--primary) / 0.9) !important;
    transform: translateY(-1px) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.btn-secondary {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

.btn-secondary:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--foreground)) !important;
}

.btn-success {
    background: hsl(var(--success)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.btn-success:hover {
    background: hsl(var(--success) / 0.9) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.btn-warning {
    background: hsl(var(--warning)) !important;
    color: hsl(var(--sobre-status)) !important;
}

.btn-warning:hover {
    background: hsl(var(--warning) / 0.9) !important;
    color: hsl(var(--sobre-status)) !important;
}

.btn-danger {
    background: transparent !important;
    color: hsl(var(--destructive)) !important;
    border: 1px solid hsl(var(--destructive)) !important;
}

.btn-danger:hover {
    background: hsl(var(--destructive) / 0.08) !important;
    color: hsl(var(--destructive)) !important;
}

.btn-outline-primary {
    background: transparent !important;
    color: hsl(var(--primary)) !important;
    border: 1px solid hsl(var(--primary)) !important;
}

.btn-outline-primary:hover {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.btn-outline-secondary, .btn-outline-dark {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

.btn-outline-secondary:hover, .btn-outline-dark:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}

.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
}

/* ===== TABLES ===== */
.table {
    background: hsl(var(--card)) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.dark .table, [data-theme="dark"] .table {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

.table th {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    font-weight: 600 !important;
    padding: 1rem !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    font-size: 0.875rem !important;
    text-align: left !important;
}

.table td {
    padding: 1rem !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    color: hsl(var(--card-foreground)) !important;
}

.table tbody tr:hover {
    background: hsl(var(--muted) / 0.5) !important;
}

.table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ===== BADGES ===== */
.badge {
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
}

.badge.bg-primary {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.badge.bg-secondary {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
}

.badge.bg-success {
    background: hsl(var(--success)) !important;
    color: hsl(var(--sobre-status)) !important;
}

.badge.bg-warning {
    background: hsl(var(--warning)) !important;
    color: hsl(var(--foreground)) !important;
}

.badge.bg-danger {
    background: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive-foreground)) !important;
}

.badge.bg-info {
    background: hsl(var(--info)) !important;
    color: hsl(var(--sobre-status)) !important;
}

/* ===== MODALS ===== */
.modal-content {
    background: hsl(var(--popover)) !important;
    color: hsl(var(--popover-foreground)) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.dark .modal-content, [data-theme="dark"] .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding: 1.5rem !important;
    background: hsl(var(--muted)) !important;
    border-radius: 12px 12px 0 0 !important;
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid hsl(var(--border)) !important;
    padding: 1.5rem !important;
    background: hsl(var(--muted)) !important;
    border-radius: 0 0 12px 12px !important;
}

.modal-title {
    color: hsl(var(--foreground)) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

.btn-close {
    /* Era `background:` (shorthand) e isso zerava o background-image do
       Bootstrap junto: o X sumia e sobrava um retangulo clicavel invisivel em
       TODOS os modais do painel. `background-color` preserva o icone. */
    background-color: hsl(var(--muted)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 6px !important;
    width: 2rem !important;
    height: 2rem !important;
    opacity: 1 !important;
}
/* O X do Bootstrap e um SVG preto embutido. `filter: invert()` resolveria a
   cor do icone, mas inverte o BOTAO inteiro -- o fundo escuro virava um
   quadrado branco. Aqui trocamos so a imagem por uma versao clara, que e o
   que o proprio Bootstrap faz no .btn-close-white. */
[data-theme="dark"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1f1f3'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

/* ===== SIDEBAR/DRAWER ===== */
.drawer, .sidebar {
    background: hsl(var(--card)) !important;
    border-right: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.dark .drawer, [data-theme="dark"] .drawer, .dark .sidebar, [data-theme="dark"] .sidebar {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.drawer-menu, .sidebar-menu {
    background: transparent !important;
    padding: 1rem 0 !important;
}

.drawer-menu-heading, .sidebar-heading {
    color: hsl(var(--muted-foreground)) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 1rem !important;
    margin: 1rem 0 0.5rem 0 !important;
    background: transparent !important;
    border: none !important;
}

.drawer-menu-divider, .sidebar-divider {
    height: 1px !important;
    background: hsl(var(--border)) !important;
    margin: 1rem 0 !important;
    border: none !important;
}

/* ===== NAVIGATION LINKS ===== */
.nav-link, .sidebar-link {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    margin: 0.125rem 0.5rem !important;
    color: hsl(var(--foreground)) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    border: none !important;
    background: transparent !important;
}

.nav-link:hover, .sidebar-link:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    text-decoration: none !important;
}

.nav-link.active, .sidebar-link.active {
    background: hsl(var(--nav-active-bg)) !important;
    color: hsl(var(--nav-active-fg)) !important;
    box-shadow: inset 3px 0 0 0 hsl(var(--nav-active-bar)) !important;
    text-decoration: none !important;
}

.nav-link-icon, .sidebar-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    margin-right: 0.75rem !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.nav-link:hover .nav-link-icon, .sidebar-link:hover .sidebar-icon {
    background: transparent !important;
    color: hsl(var(--accent-foreground)) !important;
}

.nav-link.active .nav-link-icon, .sidebar-link.active .sidebar-icon {
    background: transparent !important;
    color: inherit !important;
}

/* ===== PROGRESS BARS ===== */
.progress {
    background: hsl(var(--muted)) !important;
    border-radius: 50px !important;
    height: 8px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.progress-bar {
    background: hsl(var(--brand-accent)) !important;
    border-radius: 50px !important;
    transition: width 0.3s ease !important;
    height: 100% !important;
}

/* ===== ALERTS ===== */
.alert {
    padding: 1rem !important;
    border-radius: 8px !important;
    border: 1px solid !important;
    margin-bottom: 1rem !important;
}

.alert-primary {
    background: hsl(var(--primary) / 0.1) !important;
    color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary) / 0.2) !important;
}

.alert-success {
    background: hsl(var(--success) / 0.1) !important;
    color: hsl(var(--success)) !important;
    border-color: hsl(var(--success) / 0.2) !important;
}

.alert-warning {
    background: hsl(var(--warning) / 0.1) !important;
    color: hsl(var(--warning)) !important;
    border-color: hsl(var(--warning) / 0.2) !important;
}

.alert-danger {
    background: hsl(var(--destructive) / 0.1) !important;
    color: hsl(var(--destructive)) !important;
    border-color: hsl(var(--destructive) / 0.2) !important;
}

/* ===== UTILITIES ===== */
.icon-circle {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    transition: all 0.2s ease !important;
}

.icon-circle:hover {
    background: hsl(var(--accent)) !important;
    transform: scale(1.05) !important;
}

.theme-toggle {
    position: fixed !important;
    top: 6rem !important;
    right: 2rem !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    background: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}

.dark .theme-toggle, [data-theme="dark"] .theme-toggle {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.theme-toggle:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.05) !important;
}

.dark .theme-toggle:hover, [data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

.theme-icon {
    font-size: 1.125rem !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
    .card-body, .adobe-card-body {
        padding: 1rem !important;
    }
    
    .theme-toggle {
        top: 1rem !important;
        right: 1rem !important;
    }
    
    .drawer-menu, .sidebar-menu {
        padding: 0.5rem 0 !important;
    }
    
    .nav-link, .sidebar-link {
        margin: 0.125rem 0.25rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    
    .btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.8125rem !important;
    }
    
    .table th, .table td {
        padding: 0.75rem !important;
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 576px) {
    h1 { font-size: 1.375rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.125rem !important; }

    .modal-header, .modal-body, .modal-footer {
        padding: 1rem !important;
    }
}

/* ===== LISTA DE TRANSACOES (dashboard) =====
   Antes cada linha era um card com borda propria e um badge "CRÉDITO"/"DÉBITO"
   repetindo o que o sinal e a cor do valor ja diziam. Agora e uma lista de linhas
   separadas por 1px, com hierarquia em tres niveis: o que aconteceu, quem, quando. */
.transacao-linha {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}
.transacao-linha:last-child { border-bottom: none !important; }
.transacao-linha:first-child { padding-top: 0 !important; }

.transacao-icone {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
}
.transacao-icone.entrada { background: hsl(var(--success) / 0.14) !important; color: hsl(var(--success)) !important; }
.transacao-icone.saida   { background: hsl(var(--warning) / 0.16) !important; color: hsl(var(--warning)) !important; }

.transacao-texto { min-width: 0 !important; flex: 1 1 auto !important; }
.transacao-titulo {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}
/* nome do cliente/beneficiario: pode ser longo, entao corta com reticencias */
.transacao-pessoa {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.transacao-data {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.75rem !important;
    opacity: .85 !important;
    line-height: 1.3 !important;
}

.transacao-valor {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
.transacao-valor.entrada { color: hsl(var(--success)) !important; }
.transacao-valor.saida   { color: hsl(var(--warning)) !important; }

@media (max-width: 575.98px) {
    .transacao-icone { width: 2.25rem !important; height: 2.25rem !important; font-size: 0.9rem !important; }
    .transacao-titulo { font-size: 0.85rem !important; }
    .transacao-valor { font-size: 0.88rem !important; }
}

/* ===== DROPDOWNS DA BARRA DO TOPO (notificacoes, mensagens, perfil) =====
   O Bootstrap posiciona esses menus pelo Popper, ancorados no botao. No celular,
   um menu de ~20rem ancorado num botao encostado na direita vaza pela esquerda e
   fica cortado. Abaixo de 576px eles passam a se ancorar na viewport. */
.top-app-bar .dropdown-menu {
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.28) !important;
    background: hsl(var(--card)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-width: calc(100vw - 1.5rem) !important;
}

/* cabecalho: era pintado com o gateway_color (verde neon da landing) via style inline,
   destoando da paleta do painel. Fica na superficie sutil, com o texto normal. */
.top-app-bar .dropdown-menu .dropdown-header {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
}

.top-app-bar .dropdown-menu .dropdown-item {
    padding: 0.75rem 1rem !important;
    white-space: normal !important;
    color: hsl(var(--foreground)) !important;
}
.top-app-bar .dropdown-menu .dropdown-item:hover {
    background: hsl(var(--accent)) !important;
}
.top-app-bar .dropdown-menu .dropdown-item-content-subtext {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.8rem !important;
}
/* o texto vinha com max-width fixo em rem e cortava com reticencias no celular */
.top-app-bar .dropdown-menu .text-truncate {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
}

@media (max-width: 575.98px) {
    .top-app-bar .dropdown-menu.show {
        position: fixed !important;
        /* anula o transform do Popper, que e quem empurrava o menu pra fora */
        transform: none !important;
        inset: auto 0.75rem auto 0.75rem !important;
        top: 4.25rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ===== FILTRO DE PERIODO (referencia Simplify) =====
   Botao unico com o intervalo escrito + popover com atalhos e calendario de range,
   no lugar dos dois <select> soltos que ocupavam a largura toda da tela. */
.filtro-produto {
    width: auto !important;
    min-width: 190px;
    padding: 0.5rem 2rem 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
}

.periodo-botao {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    background: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 10px !important;
    /* o .btn do tema base forca uppercase; aqui o rotulo e uma data, tem que sair como escrito */
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.periodo-botao:hover, .periodo-botao.aberto {
    border-color: hsl(var(--brand-accent) / 0.5) !important;
}
.periodo-botao .ph:first-child { color: hsl(var(--muted-foreground)) !important; }
.periodo-seta { font-size: 0.8rem !important; color: hsl(var(--muted-foreground)) !important; transition: transform .2s ease; }
.periodo-botao.aberto .periodo-seta { transform: rotate(180deg); }

.periodo-popover {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    max-width: min(92vw, 330px);
    min-width: 300px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.25);
    padding: 0.75rem;
}
/* No mobile o popover nao pode se ancorar no botao: "right:0" alinha pela borda do
   BOTAO (que e estreito e fica na esquerda), entao o painel de ~300px vazava pra fora
   da tela. Aqui ele passa a se ancorar na viewport, com o topo posicionado por JS
   (a classe .ancorado-viewport e ligada no mesmo ponto). */
@media (max-width: 575.98px) {
    .periodo-popover {
        position: fixed;
        left: 0.75rem;
        right: auto;
        /* largura fixa, nao esticada de borda a borda: esticando ocupava quase a tela
           toda e o calendario parecia enorme (a referencia usa ~270px). */
        width: min(288px, calc(100vw - 1.5rem));
        min-width: 0;
        max-width: none;
        padding: 0.625rem;
    }
    .periodo-popover .flatpickr-day {
        height: 30px !important;
        line-height: 30px !important;
        max-width: none !important;
        font-size: 0.75rem !important;
    }
    .periodo-popover .flatpickr-days,
    .periodo-popover .dayContainer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .periodo-popover .flatpickr-rContainer,
    .periodo-popover .flatpickr-calendar { width: 100% !important; }
    .periodo-popover .flatpickr-current-month { font-size: 0.8rem !important; }
    .periodo-popover span.flatpickr-weekday { font-size: 0.68rem !important; }
    .periodo-popover .flatpickr-months { padding-bottom: 0 !important; }
    .periodo-atalho { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
    .periodo-atalhos { gap: 0.3rem; margin-bottom: 0.5rem; }
    .periodo-acoes { margin-top: 0.5rem; padding-top: 0.5rem; }
}

.periodo-atalhos { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.periodo-atalho {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.periodo-atalho:hover { border-color: hsl(var(--border)); }
.periodo-atalho.ativo {
    background: hsl(var(--brand-accent) / 0.14);
    color: hsl(var(--brand-accent));
    border-color: hsl(var(--brand-accent) / 0.35);
}

.periodo-acoes .btn { text-transform: none !important; letter-spacing: 0 !important; }

.periodo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid hsl(var(--border));
}

/* O flatpickr transforma o proprio #periodoCalendario num input readonly e injeta
   o calendario como IRMAO dele -- o container fica sobrando e precisa sumir. */
#periodoCalendario { display: none !important; }

/* O cabecalho do flatpickr usa <select> pro mes e <input type=number> pro ano.
   A regra generica de formulario la de cima (padding 0.75rem, width 100%, borda)
   pegava esses dois e estourava o cabecalho -- aqui eles voltam ao natural. */
.periodo-popover .flatpickr-monthDropdown-months,
.periodo-popover .numInputWrapper input.numInput {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-weight: 600 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.periodo-popover .flatpickr-monthDropdown-months:focus,
.periodo-popover .numInputWrapper input.numInput:focus {
    outline: none !important;
    box-shadow: none !important;
}
.periodo-popover .flatpickr-monthDropdown-months option {
    background: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
}
.periodo-popover .flatpickr-months { height: auto !important; padding-bottom: 0.25rem; }
.periodo-popover .flatpickr-current-month {
    position: static !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem;
    width: 100% !important;
}
.periodo-popover .flatpickr-months .flatpickr-month { height: auto !important; }
.periodo-popover .flatpickr-prev-month,
.periodo-popover .flatpickr-next-month { padding: 0 !important; height: auto !important; }

/* O flatpickr traz tema proprio (claro, azul). Estes overrides amarram ele
   nos tokens, senao a caixa fica branca no tema escuro. */
.periodo-popover .flatpickr-calendar {
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
}
.periodo-popover .flatpickr-months,
.periodo-popover .flatpickr-weekdays,
.periodo-calendario span.flatpickr-weekday {
    background: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    fill: hsl(var(--muted-foreground)) !important;
}
.periodo-popover .flatpickr-current-month,
.periodo-popover .flatpickr-monthDropdown-months,
.periodo-calendario .numInput {
    color: hsl(var(--foreground)) !important;
    font-size: 0.9rem !important;
}
.periodo-popover .flatpickr-prev-month svg,
.periodo-popover .flatpickr-next-month svg { fill: hsl(var(--muted-foreground)) !important; }
.periodo-popover .flatpickr-day {
    color: hsl(var(--foreground)) !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
}
.periodo-popover .flatpickr-day:hover { background: hsl(var(--accent)) !important; }
.periodo-popover .flatpickr-day.flatpickr-disabled,
.periodo-popover .flatpickr-day.prevMonthDay,
.periodo-popover .flatpickr-day.nextMonthDay {
    color: hsl(var(--muted-foreground) / 0.5) !important;
}
/* extremos do intervalo em verde solido; o miolo fica so tingido */
.periodo-popover .flatpickr-day.selected,
.periodo-popover .flatpickr-day.startRange,
.periodo-popover .flatpickr-day.endRange {
    background: hsl(var(--brand-accent)) !important;
    border-color: hsl(var(--brand-accent)) !important;
    color: hsl(var(--primary-foreground)) !important;
}
.periodo-popover .flatpickr-day.inRange {
    background: hsl(var(--brand-accent) / 0.12) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.periodo-popover .flatpickr-day.today:not(.selected) {
    border-color: hsl(var(--brand-accent) / 0.6) !important;
}
/* piscada de aviso quando clica em Aplicar com so uma ponta do intervalo */
.periodo-popover .flatpickr-calendar.faltando-data {
    outline: 2px solid hsl(var(--warning));
    outline-offset: 4px;
    border-radius: 10px;
}

/* Menu lateral fixo na versao web: o botao de recolher (#drawerToggle) so faz
   sentido no mobile (onde vira o menu deslizante) -- no desktop ele escondia o
   menu inteiro, comportamento indesejado. Some o botao a partir do mesmo
   breakpoint (1200px) que o styles.css usa pra fixar o drawer sempre visivel. */
@media (min-width: 1200px) {
    #drawerToggle {
        display: none !important;
    }
}

/* ===== ANIMAÇÕES ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ===== SCROLLBAR CUSTOMIZADA ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}

/* ===== OVERRIDE BOOTSTRAP/OUTROS FRAMEWORKS ===== */
.bg-primary { background: hsl(var(--primary)) !important; }
.bg-secondary { background: hsl(var(--secondary)) !important; }
.bg-success { background: hsl(var(--success)) !important; }
.bg-warning { background: hsl(var(--warning)) !important; }
.bg-danger { background: hsl(var(--destructive)) !important; }
.bg-info { background: hsl(var(--info)) !important; }
.bg-light { background: hsl(var(--background)) !important; }
.bg-dark { background: hsl(var(--foreground)) !important; }

.text-primary { color: hsl(var(--primary)) !important; }
.text-secondary { color: hsl(var(--secondary)) !important; }
.text-success { color: hsl(var(--success)) !important; }
.text-warning { color: hsl(var(--warning)) !important; }
.text-danger { color: hsl(var(--destructive)) !important; }
.text-info { color: hsl(var(--info)) !important; }
.text-light { color: hsl(var(--muted-foreground)) !important; }
.text-dark { color: hsl(var(--foreground)) !important; }

/* ===== FIM DO CSS UNIVERSAL ===== */
/* ===== UTILITARIOS DA PALETA =====
   Cor com significado: verde = dinheiro seu ou item ativo; mostarda e tijolo
   so aparecem quando uma metrica passa do limite. Numero neutro e cinza/grafite. */

/* Numeros em mono tabular: colunas de valor alinham entre linhas */
.num {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    letter-spacing: -0.01em !important;
}

/* Coluna de valor: numero encostado na direita */
.col-valor { text-align: right !important; }

/* Icone de apoio sem circulo colorido — cinza, do tamanho do texto */
.icon-plain {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Unico card que ganha cor: o saldo, que e o dado que o lojista abre o painel pra ver */
.kpi-destaque {
    border-top: 2px solid hsl(var(--brand-accent)) !important;
}
.kpi-destaque .kpi-valor {
    color: hsl(var(--brand)) !important;
}
[data-theme="dark"] .kpi-destaque .kpi-valor,
.dark .kpi-destaque .kpi-valor {
    color: hsl(var(--brand-accent)) !important;
}

/* Cor condicional por limite — colore o NUMERO, nunca o fundo da linha */
.stat-neutro { color: hsl(var(--foreground)) !important; }
.stat-ok     { color: hsl(var(--success)) !important; }
.stat-warn   { color: hsl(var(--warning)) !important; }
.stat-bad    { color: hsl(var(--destructive)) !important; }

/* Metricas de risco em lista: linha de 1px em vez de caixa com borda */
.stat-lista { display: flex !important; flex-direction: column !important; }
.stat-lista .stat-linha {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}
.stat-lista .stat-linha:last-child { border-bottom: none !important; }
.stat-lista .stat-linha:first-child { padding-top: 0 !important; }

/* Titulo de secao da sidebar: divisoria com rotulo, sem caixa alta gritada */
.drawer-menu-heading, .sidebar-heading {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 1.25rem !important;
}
.drawer-menu-heading::after, .sidebar-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: hsl(var(--border));
}

/* Tooltip do ApexCharts: vinha com o slate-900 padrao da lib (matiz azulada) */
.apexcharts-tooltip {
    background: hsl(var(--popover)) !important;
    color: hsl(var(--popover-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12) !important;
}
.apexcharts-tooltip-title {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}
.apexcharts-tooltip-text,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value {
    color: hsl(var(--foreground)) !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
    background: hsl(var(--popover)) !important;
    color: hsl(var(--popover-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

/* Logo: a versao verde some no tema escuro, entao cada tema mostra a sua variante.
   O bloco da logo do tema foi feito pra um wordmark horizontal e nao acomoda um icone
   quadrado — sem isto a imagem transborda por baixo do botao de menu. */
.top-app-bar .logo {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    margin-right: 1rem !important;
}
.top-app-bar .logo .margin-logo { display: none !important; }
.logo-img { max-height: 34px !important; width: auto !important; object-fit: contain; }
.logo-escura { display: none !important; }
[data-theme="dark"] .logo-clara, .dark .logo-clara { display: none !important; }
[data-theme="dark"] .logo-escura, .dark .logo-escura { display: inline-block !important; }

/* ==== PASSO 4 — azul/roxo herdado do template, neutralizado SO no tema escuro ====
   Os hex ficam nas views (o tema claro segue exatamente como estava); estas regras
   so entram sob [data-theme="dark"] e vencem ate style inline, por causa do !important. */

/* Titulo em gradiente roxo-azul com -webkit-text-fill-color: transparent */
[data-theme="dark"] .page-title-glassmorphism, .dark .page-title-glassmorphism {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: hsl(var(--txt)) !important;
    color: hsl(var(--txt)) !important;
}

/* Botao primario do template: gradiente roxo -> acento chapado */
[data-theme="dark"] .adobe-btn-primary, .dark .adobe-btn-primary {
    background: hsl(var(--ac)) !important;
    color: hsl(var(--sobre-ac)) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .adobe-btn-primary:hover, .dark .adobe-btn-primary:hover {
    background: hsl(var(--ac) / 0.9) !important;
    box-shadow: none !important;
}

/* Caixas de ajuda: fundo e texto ciano -> superficie neutra com texto de apoio */
[data-theme="dark"] .alert-info, .dark .alert-info {
    background: hsl(var(--sup2)) !important;
    border: 1px solid hsl(var(--borda)) !important;
    color: hsl(var(--txt2)) !important;
}
[data-theme="dark"] .alert-info *, .dark .alert-info * {
    color: hsl(var(--txt2)) !important;
}
[data-theme="dark"] .alert-info strong, .dark .alert-info strong {
    color: hsl(var(--txt)) !important;
}

/* Icones pintados por gradiente inline (o seletor de atributo alcanca o style="") */
[data-theme="dark"] i[style*="linear-gradient"], .dark i[style*="linear-gradient"] {
    background: none !important;
    -webkit-text-fill-color: hsl(var(--txt2)) !important;
    color: hsl(var(--txt2)) !important;
}

/* --secondary e --info valem como COR DE TEXTO (--txt2). Usados como FUNDO viram
   um bloco cinza-claro no escuro, entao ali passam a ser superficie. */
[data-theme="dark"] .bg-secondary, .dark .bg-secondary,
[data-theme="dark"] .bg-info, .dark .bg-info,
[data-theme="dark"] .badge.bg-secondary, .dark .badge.bg-secondary,
[data-theme="dark"] .badge.bg-info, .dark .badge.bg-info {
    background: hsl(var(--sup2)) !important;
    color: hsl(var(--txt2)) !important;
}
[data-theme="dark"] .icon-circle, .dark .icon-circle {
    background: hsl(var(--sup2)) !important;
    color: hsl(var(--txt2)) !important;
}

/* ── Selo de variacao vs periodo anterior (header do grafico) ─────────────
   Antes era um retangulo cinza com "+12.5%" fixo no HTML. Agora carrega
   sinal: verde subiu, vermelho caiu. Pilula tintada em vez de card, pra
   nao competir com o titulo ao lado. Os dois tons ja viram lima/tijolo
   sozinhos no tema escuro -- --success e --destructive sao remapeados no
   bloco [data-theme="dark"]. */
.selo-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.selo-delta i { font-size: 0.95rem; }
.selo-delta-alta  { background: hsl(var(--success) / 0.12);     color: hsl(var(--success)); }
.selo-delta-baixa { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }

/* ── Cabeçalho do gráfico: título + alternador + selo de variação ────────── */
.grafico-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* O selo de variação é o único que vai pra direita; o alternador fica colado
   no título, que é o que ele controla. */
.grafico-cabecalho .selo-delta { margin-left: auto; }

.grafico-tipos {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
}
.grafico-tipo {
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    /* .btn do tema força uppercase; aqui não é botão de ação, é rótulo. */
    text-transform: none;
    transition: background-color 0.15s, color 0.15s;
}
.grafico-tipo:hover { color: hsl(var(--foreground)); }
.grafico-tipo.ativo {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.08);
}
.grafico-tipo:focus-visible {
    outline: 2px solid hsl(var(--brand-accent));
    outline-offset: 1px;
}

/* Legenda própria: a do ApexCharts não lê os tokens do tema e ficava
   descolada no escuro. */
.grafico-legenda {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.25rem;
}
.grafico-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: hsl(var(--muted-foreground));
}
.grafico-legenda-cor {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.grafico-legenda-cor.entrada { background: hsl(var(--brand-accent)); }
.grafico-legenda-cor.saida   { background: hsl(var(--warning)); }

@media (max-width: 575.98px) {
    /* Em telas estreitas o selo desce pra linha de baixo em vez de espremer
       o título em duas linhas. */
    .grafico-cabecalho .selo-delta { margin-left: 0; }
    .grafico-tipo { padding: 0.25rem 0.7rem; }
}

/* ── Faixa de KPIs ───────────────────────────────────────────────────────
   Grid em vez de col-xl-3 do Bootstrap: com a Conversão o quinto card não
   cabia em 4 colunas fixas (o 5o descia sozinho e ficava com o dobro da
   largura dos outros). Com auto-fit são 5 numa linha em tela grande e a
   quebra vai se ajeitando sozinha, sempre com cards do mesmo tamanho. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}
/* ── Card de KPI ─────────────────────────────────────────────────────────
   Formato tomado do painel da Simplify: rotulo em cima, numero grande logo
   abaixo e o icone num quadrado a DIREITA. Antes o icone vinha antes do
   rotulo, na mesma linha, e comia a largura do numero -- que e o dado que o
   lojista abre o painel pra ver. */
.kpi-corpo { position: relative; }

/* O icone sai do fluxo em vez de dividir a linha com o texto. Numa coluna de
   232px do desktop, o quadrado de 44px mais o espacamento sobravam 124px pro
   numero e "R$ 69.295,39" quebrava em TRES linhas. Fora do fluxo, so o rotulo
   precisa desviar dele -- numero e rodape usam a largura inteira do card. */
.kpi-corpo > .stat-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

.kpi-rotulo {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding-right: 3.75rem;   /* o quadrado do icone mais uma folga */
    margin-bottom: .5rem;
    color: hsl(var(--muted-foreground));
    font-size: .875rem;
    line-height: 1.2;
}

.kpi-num {
    color: hsl(var(--foreground));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    /* rede de seguranca pra valor absurdo; com o icone fora do fluxo os
       numeros reais cabem numa linha so */
    word-break: break-word;
}

.kpi-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem .375rem;
    margin-top: .5rem;
    color: hsl(var(--muted-foreground));
    font-size: .75rem;
}
.kpi-rodape i { font-size: .875rem; }

/* Olho de ocultar o saldo -- botao sem cara de botao, so o icone */
.kpi-olho {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: hsl(var(--muted-foreground));
    font-size: 1rem;
    line-height: 1;
}
.kpi-olho:hover { color: hsl(var(--foreground)); }

@media (min-width: 576px) {
    /* Trilho e pagina existem so pro carrossel do mobile. Aqui somem da arvore
       de layout e os quatro cards voltam a ser itens diretos do grid. */
    .kpi-trilho, .kpi-pagina { display: contents; }

    /* Na coluna estreita de 5 cards "Quantidade de vendas" quebra em duas
       linhas -- so ele. Sem uma altura minima no rotulo, o numero desse card
       nasce abaixo dos vizinhos e a fileira fica torta. */
    .kpi-rotulo { min-height: 2.1rem; align-items: flex-start; }
}

/* ── KPIs no mobile: carrossel em vez de pilha ───────────────────────────
   Empilhados um embaixo do outro, os cinco cards ocupavam 1105px de altura --
   tres telas de rolagem so pra chegar no grafico. Agora o saldo vira heroi
   fixo no topo e as outras quatro metricas viram um trilho de duas paginas,
   duas metricas empilhadas em cada, com os pontinhos embaixo. */
@media (max-width: 575.98px) {
    .kpi-grid { display: block; margin-bottom: .875rem !important; }

    /* Heroi do saldo: sem borda, conteudo centralizado e o brilho da marca
       subindo do rodape. O icone sai -- no heroi ele so competia com o numero. */
    .kpi-heroi { margin-bottom: .75rem; }   /* mesmo respiro que separa os cards */
    /* O Bootstrap crava height:100% !important nesses cards (.h-100). Enquanto a
       faixa era grid/flex isso era inofensivo -- o item ja esticava pela linha.
       Virando bloco no mobile, a porcentagem passou a resolver contra a altura
       do <main> e o heroi esticava pra 3178px, jogando o resto da pagina pra
       fora da tela. */
    .kpi-heroi .adobe-glass-card { height: auto !important; }
    .kpi-heroi .adobe-glass-card {
        /* No claro o brilho vai a um terco do escuro. A linha "Pendente" cai
           bem em cima da parte forte do gradiente: com .20 o ambar sobre o
           menta dava 4,48:1, abaixo do minimo de 4,5:1. Com .14 sobe pra
           4,66:1 e o menta continua visivel. */
        --brilho: .14;
        border: 0 !important;
        background:
            radial-gradient(130% 105% at 50% 118%,
                hsl(var(--brand-accent) / var(--brilho)) 0%,
                hsl(var(--brand-accent) / calc(var(--brilho) * .33)) 45%,
                transparent 74%),
            hsl(var(--card)) !important;
    }
    [data-theme="dark"] .kpi-heroi .adobe-glass-card,
    .dark .kpi-heroi .adobe-glass-card { --brilho: .42; }
    .kpi-corpo > .stat-icon { top: 1rem; right: 1rem; }

    .kpi-heroi .kpi-corpo { text-align: center; }
    .kpi-heroi .kpi-info { width: 100%; }
    .kpi-heroi .kpi-rotulo {
        justify-content: center;
        padding-right: 0;      /* sem icone no heroi, o rotulo usa a largura toda */
        margin-bottom: .375rem;
    }
    .kpi-heroi .kpi-num { font-size: 2.5rem; }
    .kpi-heroi .kpi-rodape { justify-content: center; }
    .kpi-heroi .stat-icon { display: none !important; }

    .kpi-trilho {
        display: flex;
        gap: .75rem;
        overflow-x: auto;
        /* overflow-x:auto sozinho faz o eixo Y virar 'auto' junto (regra do
           proprio CSS: um eixo nao-visible obriga o outro). O trilho virava
           rolavel tambem na vertical -- no iPhone dava pra arrastar os cards
           pra cima e pra baixo dentro dele, escondendo metade da faixa. */
        overflow-y: hidden;
        /* Com touch-action solto, um arrasto vertical comecado em cima dos
           cards era capturado pelo trilho em vez de rolar a pagina. pan-x
           entrega a vertical pro documento; pinch-zoom fica de fora pra nao
           tirar o zoom por pinca de quem precisa. */
        touch-action: pan-x pinch-zoom;
        /* contain nos dois eixos: sem isso o arrasto que passa do fim do
           trilho continua na pagina (e no iOS vira o gesto de voltar). */
        overscroll-behavior: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .kpi-trilho::-webkit-scrollbar { display: none; }

    .kpi-pagina {
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        scroll-snap-align: start;
        /* sem o stop, um arrasto mais forte pula a pagina do meio */
        scroll-snap-stop: always;
    }
    /* Card com a altura do proprio conteudo. Esticar pra dividir a altura da
       pagina abria um vazio DENTRO do card (a pagina de rodape curto ficava
       com ~13px de nada embaixo do numero, e parecia card quebrado). A sobra
       vai pro fim da pagina, onde ninguem ve. */
    .kpi-pagina > .kpi-card { flex: 0 0 auto; min-width: 0; }
    .kpi-num { font-size: 1.625rem; }   /* o card ocupa a tela toda: cabe maior */

    /* Rodape decorativo ("Status: Aprovadas", "Media: Por venda") sai no
       mobile: nao diz nada que o numero ja nao diga, e o espaco vale mais.
       Fica so o que carrega dado -- pendente do saldo, em aberto do Pix. */
    .kpi-rodape:not(.kpi-rodape-dado) { display: none; }
}

/* Pontinhos do carrossel: so existem enquanto o trilho existe. O ativo vira
   pilula em vez de mudar so de cor -- num ponto de 6px a diferenca de cor
   sozinha e fraca demais pra ser lida de relance. */
.kpi-pontos { display: none; }

@media (max-width: 575.98px) {
    .kpi-pontos {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .375rem;
        margin-bottom: 1.5rem;
    }
    .kpi-ponto {
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: hsl(var(--muted-foreground) / .35);
        transition: width .18s ease, background-color .18s ease;
    }
    .kpi-ponto.ativo {
        width: 18px;
        background: hsl(var(--brand));
    }
    [data-theme="dark"] .kpi-ponto.ativo,
    .dark .kpi-ponto.ativo { background: hsl(var(--brand-accent)); }
}

/* ── Respiro do conteúdo ─────────────────────────────────────────────────
   A classe .body-container existe no <main> do layout desde sempre, mas
   nunca teve regra: o padding era 0 e o título de cada página encostava na
   barra do topo, sem um pixel de folga. Vale pro painel inteiro, não só
   pro dashboard. */
main.body-container {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
}
@media (max-width: 575.98px) {
    main.body-container { padding-top: 1.25rem; }
}

/* ── Carteira (aba Financeiro) ───────────────────────────────────────────
   Saldo e condições à esquerda, formulário de retirada à direita: decidir o
   valor e ver a taxa que incide sobre ele acontece na mesma tela. */
.carteira-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    align-items: start;
}
.carteira-valor {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: hsl(var(--brand-accent));
}
.carteira-olho {
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--muted-foreground));
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.carteira-olho:hover { color: hsl(var(--foreground)); border-color: hsl(var(--muted-foreground)); }

.carteira-condicoes {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}
.carteira-condicao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}
.carteira-condicao i { margin-right: 0.35rem; }
.fw-600 { font-weight: 600; }

.carteira-deposito {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

/* Divisória entre as duas metades — some quando empilha, onde uma borda
   vertical viraria sobra de layout. */
.carteira-retirada { padding-left: 2rem; border-left: 1px solid hsl(var(--border)); }

.carteira-aviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    background: hsl(var(--warning) / 0.12);
    color: hsl(var(--warning));
}

.carteira-filtros {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.75rem;
}
.carteira-busca { position: relative; }
.carteira-busca i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}
.carteira-busca input { padding-left: 2.25rem !important; }

.carteira-link {
    color: hsl(var(--brand-accent));
    text-decoration: none;
    font-weight: 600;
}
.carteira-link:hover { text-decoration: underline; }

.retirada-linha.escondida { display: none; }

@media (max-width: 991.98px) {
    .carteira-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .carteira-retirada {
        padding-left: 0;
        padding-top: 1.5rem;
        border-left: none;
        border-top: 1px solid hsl(var(--border));
    }
    .carteira-filtros { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .carteira-valor { font-size: 2rem; }
}

/* Aviso de valor líquido/taxa que aparece enquanto o valor do saque é digitado. */
.carteira-liquido {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    font-size: 0.8rem;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* ── Credenciais de API ──────────────────────────────────────────────────
   Client ID fica à vista (identifica a chamada, não é segredo); o Secret
   nunca é renderizado depois da criação — a caixa .cred-revelacao é a
   única vez que ele aparece na tela. */
.cred-item {
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.cred-item:last-child { margin-bottom: 0; }
.cred-item-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.cred-nome { font-weight: 600; color: hsl(var(--foreground)); }

.cred-etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}
.cred-etiqueta-ativa {
    background: hsl(var(--brand-accent) / .16);
    color: hsl(var(--brand-accent));
}

.cred-campo {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-top: .5rem;
    border-radius: 8px;
    background: hsl(var(--muted));
    min-width: 0;
}
.cred-campo-rotulo {
    font-size: .75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
    min-width: 68px;
}
/* O token é longo e não tem espaços: sem isto ele estoura o card no mobile. */
.cred-valor {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    color: hsl(var(--foreground));
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
}
.cred-olho,
.cred-copiar,
.cred-regenerar {
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color .15s, background-color .15s;
}
.cred-olho:hover,
.cred-copiar:hover { color: hsl(var(--foreground)); background: hsl(var(--border)); }
.cred-regenerar {
    font-size: .78rem;
    font-weight: 600;
    color: hsl(var(--brand-accent));
    white-space: nowrap;
}
.cred-regenerar:hover { background: hsl(var(--brand-accent) / .12); }

/* A revelação do Secret é o momento mais importante da tela: destaque forte,
   porque não há segunda chance de ler. */
.cred-revelacao {
    border: 1px solid hsl(var(--warning) / .45);
    background: hsl(var(--warning) / .10);
    border-radius: 12px;
    padding: 1.25rem;
}
.cred-revelacao > div:first-child { color: hsl(var(--warning)); }
.cred-revelacao .cred-campo { background: hsl(var(--card)); }

.cred-erro {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border: 1px solid hsl(var(--destructive) / .45);
    background: hsl(var(--destructive) / .10);
    color: hsl(var(--destructive));
    border-radius: 10px;
    padding: .9rem 1rem;
    font-size: .875rem;
}

@media (max-width: 575.98px) {
    .cred-campo { flex-wrap: wrap; }
    .cred-campo-rotulo { min-width: 100%; }
}


/* ── Webhooks ────────────────────────────────────────────────────────────
   Tabela de eventos configurados. A URL é uma só pra conta (o disparo lê
   users.webhook_url) — o rodapé da tabela diz isso, senão a lista sugere
   um endereço por linha. */
.wh-tabela-rolagem { overflow-x: auto; }
.wh-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.wh-tabela th {
    text-align: left;
    padding: .9rem 1.25rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
    white-space: nowrap;
}
.wh-tabela td {
    padding: .9rem 1.25rem;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    vertical-align: middle;
}
/* A URL não tem espaços e é longa: sem isto ela empurra a tabela toda. */
.wh-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
    max-width: 380px;
}

.wh-etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}
.wh-etiqueta-pago   { background: hsl(var(--brand-accent) / .12); color: hsl(var(--brand-accent)); }
.wh-etiqueta-gerado { background: hsl(var(--warning) / .12);      color: hsl(var(--warning)); }

.wh-estado {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: hsl(var(--brand-accent));
}
.wh-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.wh-acao {
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
    transition: color .15s, background-color .15s;
}
.wh-acao:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .12); }

.wh-rodape {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid hsl(var(--border));
    font-size: .8rem;
    color: hsl(var(--muted-foreground));
}

.wh-opcao {
    /* !important porque o tema base poe display:block em label, e sem isto o
       checkbox cai numa linha e o texto em outra. */
    display: flex !important;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem;
    margin-bottom: .5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s;
}
.wh-opcao:hover { border-color: hsl(var(--muted-foreground)); }
.wh-opcao input { accent-color: hsl(var(--brand-accent)); width: 16px; height: 16px; margin-top: 2px; }
.wh-opcao-titulo { display: block; font-weight: 600; font-size: .875rem; color: hsl(var(--foreground)); }
.wh-opcao-desc   { display: block; font-size: .78rem; color: hsl(var(--muted-foreground)); }

.wh-ajuda {
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 1.25rem;
    background: hsl(var(--card));
}
.wh-ajuda code {
    background: hsl(var(--muted));
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .82em;
    color: hsl(var(--brand-accent));
}

.wh-aviso {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .875rem;
}
.wh-aviso-ok   { border: 1px solid hsl(var(--brand-accent) / .4); background: hsl(var(--brand-accent) / .10); color: hsl(var(--foreground)); }
.wh-aviso-erro { border: 1px solid hsl(var(--destructive) / .4);  background: hsl(var(--destructive) / .10);  color: hsl(var(--destructive)); }

/* Modal de webhook não tem botão de fechar no canto: o cabeçalho não precisa
   reservar espaço pra ele nem empurrar o título. */
.wh-modal-cabecalho { justify-content: flex-start; }

/* ── Cabeçalho da página de Produtos ─────────────────────────────────────
   Título à esquerda, busca + botão à direita. O botão tem largura natural:
   com w-100 numa coluna estreita o rótulo em caixa alta quebrava em duas
   linhas e o botão ficava com o dobro da altura da busca. */
.produtos-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.produtos-acoes {
    display: flex;
    /* stretch e nao center: o input tem 5px a mais de altura que o botao, e
       centralizado a diferenca aparecia como desalinho. */
    align-items: stretch;
    gap: .75rem;
    flex-wrap: wrap;
}
.produtos-acoes .produtos-novo { display: inline-flex; align-items: center; }
.produtos-busca { position: relative; }
.produtos-busca i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}
.produtos-busca input {
    padding-left: 2.25rem !important;
    min-width: 220px;
}
.produtos-novo { white-space: nowrap; }

@media (max-width: 575.98px) {
    .produtos-acoes { width: 100%; }
    .produtos-busca { flex: 1; }
    .produtos-busca input { min-width: 0; width: 100%; }
}

/* ── Modal de detalhes da transação ──────────────────────────────────────
   Resumo em faixa no topo, depois os blocos de cliente e pagamento. Tudo
   por token: o modal era cor fixa e virava um retângulo branco no escuro. */
.tx-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
}
.tx-resumo-item {
    text-align: center;
    padding: .9rem .75rem;
    border-radius: 12px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
}
.tx-resumo-rotulo {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    /* --muted-foreground sobre --muted da 4,03:1 no tema claro, abaixo do minimo
       pra texto pequeno -- mesmo caso da aba Seguranca. Sobre a superficie do
       card o mesmo token passa, mas aqui o fundo e --muted. */
    color: hsl(var(--foreground) / .72);
    margin-bottom: .35rem;
}
.tx-resumo-valor {
    font-size: 1.15rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1.25;
}
/* A data é mais longa que os outros valores: menor pra não quebrar o card. */
.tx-resumo-valor-menor { font-size: .9rem; font-weight: 600; }

.tx-secao { margin-bottom: 1.5rem; }
.tx-secao:last-child { margin-bottom: 0; }
.tx-secao-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: .85rem;
}
.tx-secao-titulo i { color: hsl(var(--brand-accent)); font-size: 1.05rem; }

.tx-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .25rem 1.5rem;
}
.tx-linha {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .45rem 0;
    min-width: 0;
}
.tx-linha > i {
    color: hsl(var(--muted-foreground));
    font-size: 1rem;
    flex-shrink: 0;
    align-self: center;
}
.tx-rotulo {
    font-size: .85rem;
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
}
/* IDs e e-mails são longos e sem espaço: quebram no meio em vez de esticar
   o modal. */
.tx-valor {
    font-size: .875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    overflow-wrap: anywhere;
    min-width: 0;
}
.tx-valor-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

.tx-caixa {
    padding: 1rem;
    border-radius: 12px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
}
.tx-caixa .tx-linha:first-child { padding-top: 0; }
.tx-caixa .tx-linha:last-child { padding-bottom: 0; }

.tx-qr {
    max-width: 200px;
    max-height: 200px;
    border-radius: 10px;
    border: 1px solid hsl(var(--border));
    background: #fff;   /* QR precisa de fundo claro pra ser lido */
    padding: 6px;
}

@media (max-width: 575.98px) {
    .tx-resumo { grid-template-columns: 1fr 1fr; }
}
.tx-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    /* zera o recorte de gradiente que a regra .adobe-title da view aplica */
    -webkit-text-fill-color: currentColor;
    background: none;
    text-shadow: none;
}
.tx-titulo i { color: hsl(var(--brand-accent)); }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  SISTEMA v2 (30/09/2026)                                             ║
   ║  Um sistema so: escala de tipo, espaco, raio, elevacao e estados.    ║
   ║  Este bloco vem por ultimo de proposito: reescreve as regras globais ║
   ║  la de cima (botao, card, badge, tabela, modal, menu) sem precisar   ║
   ║  caca-las uma a uma. Tokens: bloco :root no topo do arquivo.         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root { --borda-elevada: 214 24% 89%; }

/* ── Tipo ────────────────────────────────────────────────────────────────
   display 40 · titulo 24 · numero 24 · secao 16 · corpo 14 · apoio 13 ·
   legenda 12 · rotulo 11 (unico uppercase do sistema). */
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .adobe-title { line-height: 1.25 !important; }
h1 { font-size: 24px !important; letter-spacing: -.02em !important; }
h5, h6 { font-weight: 600 !important; }
h5 { font-size: 16px !important; letter-spacing: -.005em !important; }
@media (max-width: 767.98px) { h1 { font-size: 20px !important; } }
.t-display { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.t-numero  { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)); }
.t-secao   { font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.005em !important; color: hsl(var(--foreground)); margin: 0 !important; }
.t-apoio   { font-size: 13px; line-height: 1.45; color: hsl(var(--muted-foreground)); margin: 0; }
.t-legenda { font-size: 12px; line-height: 1.35; font-weight: 500; color: hsl(var(--muted-foreground)); }
.t-rotulo  { font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.fw-600 { font-weight: 600; }
.apagado { color: hsl(var(--muted-foreground)) !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 12px; }
.mono, code, kbd, pre, .cred-valor, .codigo span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 767.98px) {
    .t-display { font-size: 36px; }
    .t-numero { font-size: 20px; }
}
/* Texto de apoio em cima de --muted usa o texto principal a 72% (passa AA nos dois temas). */
.sobre-muted { color: hsl(var(--foreground) / .72) !important; }

/* ── Card ────────────────────────────────────────────────────────────────
   Nivel 1 de elevacao. Card parado nao "levanta" no hover: so o clicavel
   reage, e pela borda. */
.card, .adobe-glass-card, .shadow, .bg-white { box-shadow: var(--shadow-1) !important; border-radius: var(--radius-lg) !important; transition: border-color .15s ease, background-color .15s ease !important; }
.dark .card, [data-theme="dark"] .card, .dark .adobe-glass-card, [data-theme="dark"] .adobe-glass-card,
.dark .shadow, [data-theme="dark"] .shadow, .dark .bg-white, [data-theme="dark"] .bg-white { box-shadow: none !important; }
.card:hover, .adobe-glass-card:hover,
.dark .card:hover, [data-theme="dark"] .card:hover, .dark .adobe-glass-card:hover, [data-theme="dark"] .adobe-glass-card:hover { transform: none !important; box-shadow: var(--shadow-1) !important; }
.card-body, .adobe-card-body { padding: 20px !important; }
.card-header, .card-footer { background: transparent !important; padding: 16px 20px !important; }
a.card-clicavel, .card-clicavel { display: block; text-decoration: none !important; color: inherit !important; }
.card-clicavel:hover, .shortcut-card:hover .adobe-glass-card { border-color: hsl(var(--brand-accent) / .45) !important; }
.card-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card-cabecalho > h5, .card-cabecalho > h2, .card-cabecalho > h6 { margin: 0 !important; }
@media (max-width: 767.98px) { .card-body, .adobe-card-body { padding: 16px !important; } }

/* ── Botao ───────────────────────────────────────────────────────────────
   Caixa mista (o uppercase do tema base sai), tres alturas: 36 / 44 / 52. */
.btn {
    min-height: 44px !important; padding: 0 18px !important; border-radius: var(--radius-sm) !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important;
    text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
    border: 1px solid transparent !important; box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
}
.btn i.ph { font-size: 18px; }
.btn-sm { min-height: 36px !important; padding: 0 12px !important; font-size: 13px !important; }
.btn-lg { min-height: 52px !important; padding: 0 22px !important; font-size: 15px !important; }
.btn-primary:hover, .btn-success:hover { transform: none !important; }
.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-light {
    background: transparent !important; color: hsl(var(--foreground)) !important; border-color: hsl(var(--border)) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-light:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.btn-danger, .btn-outline-danger { background: transparent !important; color: hsl(var(--destructive)) !important; border-color: hsl(var(--destructive) / .5) !important; }
.btn-danger:hover, .btn-outline-danger:hover { background: hsl(var(--destructive) / .08) !important; color: hsl(var(--destructive)) !important; }
.btn-outline-primary { border-color: hsl(var(--primary)) !important; }
.btn-ghost { background: transparent !important; color: hsl(var(--muted-foreground)) !important; padding: 0 10px !important; }
.btn-ghost:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.btn:disabled, .btn.disabled { cursor: not-allowed; opacity: .6; }
/* Primario desabilitado nao usa opacidade (branco sobre verde lavado dava 2,9:1): vira superficie neutra. */
.btn-primary:disabled, .btn-primary.disabled, .btn-success:disabled, .btn-success.disabled {
    opacity: 1 !important; background: hsl(var(--muted)) !important; color: hsl(var(--muted-foreground)) !important; border-color: hsl(var(--border)) !important;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)) !important; outline-offset: 2px !important; }
/* Botao so com icone (topo, menus de linha, copiar) */
.btn.btn-icon, .btn-icone {
    width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important;
    border-radius: 10px !important; border: 0 !important; background: transparent !important;
    color: hsl(var(--muted-foreground)) !important; display: inline-grid !important; place-items: center !important; font-size: 20px !important; position: relative;
}
.btn.btn-icon:hover, .btn-icone:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.btn.btn-icon::after { display: none !important; }
.btn-icone-sm { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 16px !important; }
@media (max-width: 768px) { .btn { padding: 0 16px !important; font-size: 14px !important; } .btn-sm { padding: 0 12px !important; font-size: 13px !important; } }

/* ── Campos ──────────────────────────────────────────────────────────── */
.form-select, .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea {
    background-color: hsl(var(--card)) !important; min-height: 44px; padding: 10px 12px !important; border-radius: var(--radius-sm) !important; font-size: 14px !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)) !important; opacity: 1; }
.form-select:focus, .form-control:focus, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px hsl(var(--ring) / .18) !important; }
.form-label, label { font-weight: 500 !important; font-size: 13px !important; margin-bottom: 6px !important; }
input[type="checkbox"], input[type="radio"] { accent-color: hsl(var(--brand-accent)); }
.campo-icone { position: relative; }
.campo-icone > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: hsl(var(--muted-foreground)); pointer-events: none; z-index: 1; }
.campo-icone > .form-control, .campo-icone > input { padding-left: 38px !important; }
.campo-prefixo { position: relative; }
.campo-prefixo > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); font-weight: 500; pointer-events: none; }
.campo-prefixo > .form-control, .campo-prefixo > input { padding-left: 40px !important; font-size: 18px !important; font-weight: 600; min-height: 52px; }
.otp { text-align: center; font-size: 22px !important; font-weight: 600; letter-spacing: .5em; padding-left: calc(12px + .5em) !important; min-height: 52px !important; font-variant-numeric: tabular-nums; }
.otp::placeholder { letter-spacing: .5em; font-weight: 500; }

/* ── Pilula de estado ────────────────────────────────────────────────────
   Caixa mista, fundo tintado, sempre com icone ou ponto (nunca so cor).
   O .badge do Bootstrap cai no mesmo desenho. */
.pilula, .badge {
    display: inline-flex !important; align-items: center !important; gap: 6px; min-height: 26px; padding: 0 10px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap; text-transform: none !important; letter-spacing: 0 !important;
    background: hsl(var(--muted)) !important; color: hsl(var(--foreground) / .72) !important; border: 0 !important;
}
.pilula i, .badge i { font-size: 14px; }
.pilula-sm { min-height: 20px; padding: 0 8px !important; font-size: 11px !important; gap: 4px; }
.pilula-sm i { font-size: 12px; }
.pilula-ok, .badge.bg-success, .badge.gateway-badge-success     { background: hsl(var(--success) / .12) !important; color: hsl(var(--success)) !important; }
.pilula-warn, .badge.bg-warning, .badge.gateway-badge-warning, .badge.bg-orange-custom { background: hsl(var(--warning) / .12) !important; color: hsl(var(--warning)) !important; }
.pilula-bad, .badge.bg-danger, .badge.gateway-badge-danger      { background: hsl(var(--destructive) / .12) !important; color: hsl(var(--destructive)) !important; }
.badge.bg-primary { background: hsl(var(--primary) / .10) !important; color: hsl(var(--primary)) !important; }
[data-theme="dark"] .pilula-ok, [data-theme="dark"] .badge.bg-success, [data-theme="dark"] .badge.gateway-badge-success { background: hsl(var(--success) / .14) !important; }
[data-theme="dark"] .pilula-warn, [data-theme="dark"] .badge.bg-warning, [data-theme="dark"] .badge.gateway-badge-warning, [data-theme="dark"] .badge.bg-orange-custom { background: hsl(var(--warning) / .16) !important; }
[data-theme="dark"] .pilula-bad, [data-theme="dark"] .badge.bg-danger, [data-theme="dark"] .badge.gateway-badge-danger { background: hsl(var(--destructive) / .16) !important; }
[data-theme="dark"] .badge.bg-primary { background: hsl(var(--primary) / .14) !important; }
[data-theme="dark"] .badge.bg-secondary, [data-theme="dark"] .badge.bg-info { color: hsl(var(--foreground) / .72) !important; }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }

/* ── Caixa de icone ──────────────────────────────────────────────────── */
.stat-icon { width: 40px !important; height: 40px !important; border-radius: var(--radius-md) !important; font-size: 20px !important; }
.stat-icon-sm { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 18px !important; }
.stat-icon-brand { background: hsl(var(--brand) / .10) !important; }
[data-theme="dark"] .stat-icon-brand, .dark .stat-icon-brand { background: hsl(var(--brand-accent) / .14) !important; }
.stat-icon-bad { background: hsl(var(--destructive) / .12) !important; color: hsl(var(--destructive)) !important; }

/* ── Aviso, codigo, link de acao, barra de progresso ─────────────────── */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: hsl(var(--muted)); color: hsl(var(--foreground) / .72); font-size: 13px; line-height: 1.45; }
.aviso > i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.aviso strong, .aviso b { color: hsl(var(--foreground)); font-weight: 600; }
.aviso-warn { background: hsl(var(--warning) / .12); color: hsl(var(--warning)); }
.aviso-warn strong, .aviso-warn b { color: inherit; }
.aviso-ok { background: hsl(var(--success) / .12); color: hsl(var(--success)); }
.aviso-bad { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.codigo { font-size: 13px; padding: 6px 6px 6px 12px; min-height: 44px; border-radius: var(--radius-sm); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: hsl(var(--foreground)); }
.codigo > span, .codigo > code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; background: transparent; padding: 0; color: inherit; }
code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.link-acao { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: hsl(var(--brand-accent)) !important; text-decoration: none !important; }
.link-acao:hover { text-decoration: underline !important; }
.barra { height: 6px; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 99px; background: hsl(var(--brand-accent)); transition: width .4s ease; }
.barra-grande { height: 8px; }
.barra-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.barra-topo b { color: hsl(var(--foreground)); font-weight: 600; }
.progress { box-shadow: none !important; }

/* ── Tabela ──────────────────────────────────────────────────────────────
   Cabecalho sem fundo, linha de 1px, valor a direita em algarismo tabular.
   Vale pra .table do Bootstrap e pra .tabela nova. */
.table { box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
.dark .table, [data-theme="dark"] .table { box-shadow: none !important; }
.table th, .tabela th {
    background: transparent !important; color: hsl(var(--muted-foreground)) !important; font-size: 12px !important; font-weight: 600 !important;
    padding: 0 12px 10px !important; border-bottom: 1px solid hsl(var(--border)) !important; white-space: nowrap; text-align: left;
}
.table td, .tabela td { padding: 12px !important; font-size: 13px !important; vertical-align: middle; border-bottom: 1px solid hsl(var(--border)) !important; }
.table tbody tr:last-child td, .tabela tbody tr:last-child td { border-bottom: 0 !important; }
.table > :not(caption) > * > * { background-color: transparent !important; box-shadow: none !important; color: hsl(var(--card-foreground)) !important; }
.table tbody tr:hover > * { background-color: hsl(var(--muted) / .55) !important; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th:first-child, .tabela td:first-child, .table th:first-child, .table td:first-child { padding-left: 0 !important; }
.tabela th:last-child, .tabela td:last-child, .table th:last-child, .table td:last-child { padding-right: 0 !important; }
.tabela td { white-space: nowrap; color: hsl(var(--foreground)); }
.tabela .dir, .table .dir { text-align: right !important; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tbody tr:hover td { background: hsl(var(--muted) / .55); }
.tabela .forte { font-weight: 600; }
.tabela .corta { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tabela-rolagem { overflow-x: auto; }
.cel-dupla .b { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 1px; }
.tabela-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: 2px; border-top: 1px solid hsl(var(--border)); }
.lista-cartoes { display: none; }
@media (max-width: 767.98px) {
    .tabela-rolagem.vira-cartao { display: none; }
    .lista-cartoes { display: block; }
    .tabela-rodape { flex-direction: column; align-items: stretch; text-align: center; border-top: 0; padding-top: 8px; }
}
/* Estado vazio: icone, titulo, uma frase e (quando faz sentido) uma acao */
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 16px 40px; gap: 4px; }
.vazio .stat-icon { width: 52px !important; height: 52px !important; border-radius: 16px !important; font-size: 24px !important; margin-bottom: 12px; }
.vazio .t-apoio { max-width: 360px; margin-bottom: 14px; }

/* ── Lista chave/valor e grade de resumo (modais, perfil) ────────────── */
.kv { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid hsl(var(--border)); }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kv > span:first-child i { font-size: 16px; }
.kv > span:last-child { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; color: hsl(var(--foreground)); }
.resumo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; }
.resumo-grade > div { background: hsl(var(--popover)); padding: 12px 14px; min-width: 0; }
.resumo-grade .v { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; color: hsl(var(--foreground)); }

/* ── Modal ───────────────────────────────────────────────────────────────
   Cabecalho e rodape sem faixa cinza; raio de card; no celular vira folha
   que sobe do rodape. */
.modal-content { border: 1px solid hsl(var(--borda-elevada)) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-3) !important; }
.dark .modal-content, [data-theme="dark"] .modal-content { box-shadow: var(--shadow-3) !important; }
.modal-header { background: transparent !important; border-bottom: 0 !important; padding: 20px 20px 0 !important; align-items: flex-start !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.modal-body { padding: 16px 20px 20px !important; }
.modal-footer { background: transparent !important; padding: 14px 20px !important; gap: 8px; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
.modal-footer > * { margin: 0 !important; }
.modal-title { font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.005em; line-height: 1.3 !important; margin: 0 !important; }
.modal-header .t-apoio { margin-top: 2px; }
.btn-close { background-color: transparent !important; border: 0 !important; border-radius: 10px !important; width: 40px !important; height: 40px !important; margin: -8px -10px 0 auto !important; padding: 0 !important; background-size: 12px !important; flex-shrink: 0; }
.btn-close:hover { background-color: hsl(var(--accent)) !important; }
.modal-backdrop { --bs-backdrop-bg: hsl(222 47% 11%); --bs-backdrop-opacity: .45; }
[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .72; }
.modal-secao { margin: 18px 0 6px; }
.valor-destaque { text-align: center; padding: 4px 0 16px; }
.valor-destaque .t-display { font-size: 34px; margin-top: 4px; color: hsl(var(--foreground)); }
/* QR e sempre preto no branco, nos dois temas: camera nao le invertido */
.qr { width: 196px; height: 196px; padding: 10px; border-radius: var(--radius-md); background: #fff; border: 1px solid hsl(var(--border)); flex-shrink: 0; display: grid; place-items: center; }
.qr img, .qr svg, .qr canvas { width: 100% !important; height: 100% !important; display: block; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
.passos i { height: 4px; border-radius: 99px; background: hsl(var(--muted)); }
.passos i.feito { background: hsl(var(--brand-accent)); }
@media (max-width: 575.98px) {
    .modal.fade .modal-dialog { transform: translateY(24px); }
    .modal.show .modal-dialog { transform: none; }
    .modal-dialog { margin: 0 !important; max-width: none !important; min-height: 100%; display: flex !important; align-items: flex-end !important; }
    .modal-content { border-radius: 20px 20px 0 0 !important; border-width: 1px 0 0 !important; max-height: 92vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .modal-content::before { content: ""; width: 36px; height: 4px; border-radius: 99px; background: hsl(var(--border)); margin: 8px auto -8px; flex-shrink: 0; }
    .modal-header, .modal-body, .modal-footer { padding-left: 20px !important; padding-right: 20px !important; }
    .modal-header { padding-top: 20px !important; }
    .modal-footer { flex-wrap: nowrap; }
    .modal-footer .btn { flex: 1; }
}

/* ╔═══════════════════ CASCA: barra do topo, menu lateral, barra fixa ═══╗ */
/* Medidas do tema base (279px / 4.5rem) trocadas pelos tokens da casca. */
.top-app-bar { height: var(--topo-h) !important; }
#layoutDrawer #layoutDrawer_nav { flex-basis: var(--drawer-w); transform: translateX(calc(-1 * var(--drawer-w))); }
#layoutDrawer #layoutDrawer_content { margin-left: calc(-1 * var(--drawer-w)); min-height: calc(100vh - var(--topo-h)); }
.drawer-toggled #layoutDrawer #layoutDrawer_nav { transform: translateX(0); }
.nav-fixed #layoutDrawer #layoutDrawer_nav { width: var(--drawer-w); }
.nav-fixed #layoutDrawer #layoutDrawer_nav .drawer { padding-top: var(--topo-h); }
.nav-fixed #layoutDrawer #layoutDrawer_content { padding-left: var(--drawer-w); top: var(--topo-h); }
@media (min-width: 1200px) {
    #layoutDrawer #layoutDrawer_nav { transform: translateX(0); }
    #layoutDrawer #layoutDrawer_content { margin-left: 0; }
    .drawer-toggled #layoutDrawer #layoutDrawer_nav { transform: translateX(calc(-1 * var(--drawer-w))); }
    .drawer-toggled #layoutDrawer #layoutDrawer_content { margin-left: calc(-1 * var(--drawer-w)); }
}

/* Barra do topo: cor da pagina com desfoque e uma linha embaixo. No desktop a logo
   mora num bloco da largura do menu, com a cor dele -- o menu parece subir ate o topo. */
.top-app-bar.navbar, [data-theme="dark"] .top-app-bar.navbar, .dark .top-app-bar.navbar,
[data-theme="dark"] .top-app-bar, .dark .top-app-bar {
    background: hsl(var(--background) / .88) !important;
    backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border-bottom: 1px solid hsl(var(--border)) !important; box-shadow: none !important; padding: 0 !important; transition: none !important;
}
.top-app-bar > .container-fluid { padding: 0 8px !important; height: 100%; flex-wrap: nowrap; gap: 4px; }
.top-app-bar .logo { display: flex !important; align-items: center !important; width: auto !important; height: 100%; margin: 0 0 0 4px !important; order: 1; }
.top-app-bar #drawerToggle { order: 0 !important; margin: 0 !important; }
.top-app-bar .logo-img { max-height: 24px !important; width: auto !important; }
.top-app-bar .titulo-topo { display: none; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: hsl(var(--foreground)); order: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-app-bar .acoes-topo { margin-left: auto; order: 3; gap: 4px !important; }
.top-app-bar .icone-acao i, .top-app-bar .icon-navbar i, .top-app-bar .ph { color: inherit !important; }
.conta-botao { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 4px; margin-left: 8px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
.conta-botao:hover, .conta-botao[aria-expanded="true"] { background: hsl(var(--accent)); }
.conta-botao::after { display: none !important; }
.conta-botao > i { font-size: 14px; color: hsl(var(--muted-foreground)) !important; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--brand) / .12); color: hsl(var(--brand)); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-theme="dark"] .avatar { background: hsl(var(--sup2)); color: hsl(var(--ac)); border: 1px solid hsl(var(--borda)); }
@media (min-width: 1200px) {
    .top-app-bar > .container-fluid { padding: 0 32px 0 0 !important; gap: 4px; }
    .top-app-bar .logo { width: var(--drawer-w) !important; height: calc(100% + 1px); align-self: flex-start; padding: 0 24px; margin: 0 32px 0 0 !important; background: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); flex-shrink: 0; }
    .top-app-bar .logo-img { max-height: 26px !important; }
    .top-app-bar .titulo-topo { display: block; }
    /* O titulo da pagina mora na barra: o h1 do conteudo so existe abaixo de 1200px. */
    .pagina-cabecalho > .pagina-titulo h1 { display: none; }
}

/* Popovers do topo (notificacoes e conta) */
.top-app-bar .dropdown-menu { border: 1px solid hsl(var(--borda-elevada)) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-3) !important; background: hsl(var(--popover)) !important; margin-top: 10px !important; }
.top-app-bar .dropdown-menu .dropdown-header { background: transparent !important; font-size: 16px !important; font-weight: 600 !important; padding: 14px 16px !important; border-bottom: 1px solid hsl(var(--border)); }
.top-app-bar .dropdown-notifications .dropdown-menu { width: 340px; }
.notif-item { display: flex !important; gap: 12px; padding: 14px 16px !important; align-items: flex-start !important; height: auto !important; }
.notif-item .t { font-weight: 600; font-size: 13px; color: hsl(var(--foreground)); }
.notif-item .s { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 2px; white-space: normal; }
.notif-rodape { padding: 10px 16px; border-top: 1px solid hsl(var(--border)); text-align: center; }
.menu-conta { width: 260px; padding: 0 0 4px !important; }
.menu-conta .usuario-chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 4px; min-width: 0; }
.usuario-chip .nome { font-size: 13px; font-weight: 600; line-height: 1.25; color: hsl(var(--foreground)); }
.usuario-chip .mail { font-size: 12px; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.top-app-bar .menu-conta .dropdown-item { display: flex !important; align-items: center !important; gap: 12px; height: 40px !important; width: calc(100% - 8px); padding: 0 12px !important; margin: 0 4px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; border: 0; background: transparent; text-align: left; }
.top-app-bar .menu-conta .dropdown-item i { font-size: 18px; color: hsl(var(--muted-foreground)) !important; margin: 0 !important; }
.top-app-bar .menu-conta .dropdown-item.perigo, .top-app-bar .menu-conta .dropdown-item.perigo i { color: hsl(var(--destructive)) !important; }
.top-app-bar .menu-conta .dropdown-divider { margin: 4px 0 !important; border-color: hsl(var(--border)) !important; opacity: 1; }
@media (max-width: 575.98px) {
    .top-app-bar .dropdown-menu.show { inset: auto 8px auto 8px !important; top: calc(var(--topo-h) + 6px) !important; }
    .top-app-bar .dropdown-notifications .dropdown-menu { width: auto; }
}

/* Menu lateral */
.drawer, .sidebar, .dark .drawer, [data-theme="dark"] .drawer { box-shadow: none !important; }
.drawer-menu, .sidebar-menu { padding: 12px 0 !important; }
.drawer .drawer-menu .nav .nav-link {
    min-height: 40px !important; padding: 0 12px !important; margin: 0 12px 2px !important; border-radius: var(--radius-sm) !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; color: hsl(var(--foreground)) !important; transition: background-color .15s ease !important;
}
.drawer .drawer-menu .nav .nav-link .nav-link-icon { width: 20px !important; height: 20px !important; margin-right: 12px !important; border-radius: 0 !important; }
.drawer .drawer-menu .nav .nav-link .nav-link-icon,
html body .drawer-light .drawer-menu .nav-link .nav-link-icon,
html body .drawer-light .drawer-menu .nav-link .drawer-collapse-arrow { color: hsl(var(--muted-foreground)) !important; }
.drawer .drawer-menu .nav .nav-link .drawer-collapse-arrow { margin-left: auto !important; }
.drawer .drawer-menu .nav .nav-link .drawer-collapse-arrow i.ph { font-size: 14px !important; }
html body nav .nav-link.active, html body a.nav-link.active {
    background-color: hsl(var(--nav-active-bg)) !important; color: hsl(var(--nav-active-fg)) !important;
    box-shadow: inset 3px 0 0 0 hsl(var(--nav-active-bar)) !important; font-weight: 600 !important;
}
html body nav .nav-link.active .nav-link-icon, html body a.nav-link.active .nav-link-icon,
html body .drawer-light .drawer-menu .nav-link.active .nav-link-icon,
html body .drawer-light .drawer-menu .nav-link.active .drawer-collapse-arrow { background: transparent !important; color: hsl(var(--nav-active-fg)) !important; }
/* Subitem (Entradas, Saidas...): recuado, menor; o ativo fica so em superficie sutil,
   pra nao disputar com o item de primeiro nivel. */
.drawer .drawer-menu .nav .drawer-menu-nested .nav-link { min-height: 32px !important; margin: 0 12px 2px 44px !important; padding: 0 10px !important; border-radius: 6px !important; font-size: 13px !important; color: hsl(var(--muted-foreground)) !important; }
.drawer .drawer-menu .nav .drawer-menu-nested .nav-link:hover { color: hsl(var(--foreground)) !important; }
html body .drawer .drawer-menu-nested a.nav-link.active { background-color: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; box-shadow: none !important; }
.drawer-menu-nested { padding-bottom: 4px; }
.drawer-menu-heading, .sidebar-heading { margin: 14px 0 6px !important; padding: 0 24px !important; }
.drawer-menu-divider, .sidebar-divider { margin: 10px 0 !important; }
.nav-link .novo { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: hsl(var(--brand-accent) / .14); color: hsl(var(--brand-accent)); }
@media (max-width: 1199.98px) { .nav-fixed #layoutDrawer #layoutDrawer_nav .drawer { box-shadow: var(--shadow-3) !important; } }

/* Conteudo: respiro lateral, sem teto de largura -- em monitor largo o teto
   de 1304px deixava metade da tela vazia. */
main.body-container { padding: 24px 0 32px !important; }
main.body-container .container-fluid { padding-left: 32px !important; padding-right: 32px !important; }
.pagina-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; min-height: 40px; }
.pagina-cabecalho h1 { margin: 0 !important; }
.pagina-cabecalho .pagina-titulo p { margin: 0; font-size: 13px; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.pagina-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; align-items: start; }
.pilha { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.so-mobile { display: none !important; }
@media (max-width: 1199.98px) {
    .pagina-cabecalho .pagina-titulo p { display: none; }
    .pagina-cabecalho { margin-bottom: 16px; min-height: 0; }
}
@media (max-width: 991.98px) { .grade-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
    :root { --topo-h: 56px; }
    main.body-container { padding: 20px 0 calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
    main.body-container .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
    .main-content.app-content { padding-bottom: 0 !important; }
    .grade-2, .pilha { gap: 12px; }
    .so-mobile { display: block !important; }
    .so-desktop { display: none !important; }
    .pagina-acoes .btn { min-height: 40px !important; padding: 0 14px !important; }
}

/* Barra fixa do celular: 5 destinos, em todas as telas do cliente. O ativo ganha a
   pilula na cor primaria. Fica abaixo do menu lateral (1038) e some com modal aberto
   (dois backdrop-filter empilhados bugam no Safari do iPhone). */
.barra-fixa { display: none; }
@media (max-width: 767.98px) {
    .barra-fixa {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        background: hsl(var(--card) / .88); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
        border-top: 1px solid hsl(var(--border));
    }
    body.modal-open .barra-fixa, body.drawer-toggled .barra-fixa { display: none; }
    .bb-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
    .bb-ico { width: 44px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; transition: background-color .15s, color .15s, transform .15s; }
    .bb-item:active .bb-ico { transform: scale(.94); }
    .bb-item.active { color: hsl(var(--foreground)) !important; font-weight: 600; }
    .bb-item.active .bb-ico { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
}
.drawer .drawer-menu .nav .nav-link.active { color: hsl(var(--nav-active-fg)) !important; }
/* O .bg-white do tema da raio e borda de card em tudo; o menu lateral e uma coluna reta. */
#layoutDrawer_nav .drawer { border: 0 !important; border-right: 1px solid hsl(var(--border)) !important; border-radius: 0 !important; }

/* ╔═══════════════════ TELAS ═══════════════════════════════════════════╗ */
/* ── Cartao de metrica (dashboard e relatorios) ──────────────────────── */
.kpi-cartao { padding: 18px 20px; position: relative; min-width: 0; }
.kpi-cartao > .stat-icon { position: absolute; top: 16px; right: 16px; }
.kpi-cartao .rotulo { font-size: 13px; color: hsl(var(--muted-foreground)); padding-right: 44px; margin-bottom: 8px; line-height: 1.3; }
.kpi-cartao .rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; min-height: 24px; }
.kpi-faixa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.selo-delta { height: 24px; padding: 0 8px !important; font-size: 12px !important; gap: 4px !important; }
.selo-delta i { font-size: 14px !important; }

/* ── Dashboard ───────────────────────────────────────────────────────── */
.dash-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-bottom: 16px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Heroi do saldo: o unico card com cor. Numero grande, faixa de detalhes e as duas acoes. */
.saldo-heroi {
    position: relative; overflow: hidden; padding: 24px; display: flex; flex-direction: column; --brilho: .12;
    background: radial-gradient(120% 90% at 0% 120%, hsl(var(--brand-accent) / var(--brilho)) 0%, transparent 62%), hsl(var(--card)) !important;
}
[data-theme="dark"] .saldo-heroi, .dark .saldo-heroi { --brilho: .26; border-color: hsl(var(--ac-fraco)) !important; }
.saldo-heroi .rotulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.saldo-heroi .kpi-olho { padding: 4px; margin: -4px 0; font-size: 18px; border-radius: 6px; }
.saldo-heroi .valor { margin: 8px 0 0; color: hsl(var(--brand)); overflow-wrap: anywhere; }
[data-theme="dark"] .saldo-heroi .valor, .dark .saldo-heroi .valor { color: hsl(var(--brand-accent)); }
.saldo-detalhes { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-top: 1px solid hsl(var(--border)); padding-top: 14px; }
.saldo-heroi .valor + .saldo-pendente + .saldo-detalhes { margin-top: 20px; }
.saldo-detalhes > div + div { border-left: 1px solid hsl(var(--border)); padding-left: 20px; }
.saldo-detalhes .t-legenda { display: flex; align-items: center; gap: 6px; }
.saldo-detalhes .t-legenda i { font-size: 14px; }
.saldo-detalhes .v { font-size: 15px; font-weight: 600; margin-top: 4px; color: hsl(var(--foreground)); }
.saldo-heroi .acoes { display: flex; gap: 8px; margin-top: 16px; }
.saldo-heroi .acoes .btn { flex: 1; }
.saldo-pendente { display: none; }
.atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.atalhos .shortcut-card { padding: 14px 16px; gap: 12px !important; }
.atalhos .shortcut-card .txt { min-width: 0; flex: 1; }
.atalhos .shortcut-card .titulo { font-weight: 600; font-size: 14px; line-height: 1.3; color: hsl(var(--foreground)); }
.atalhos .shortcut-card .seta { color: hsl(var(--muted-foreground)); font-size: 16px; }
.grafico-cabecalho { gap: 12px !important; margin-bottom: 8px; }
.grafico-tipo { height: 28px; padding: 0 12px !important; font-size: 12px !important; color: hsl(var(--foreground) / .72) !important; }
.grafico-tipo.ativo { color: hsl(var(--foreground)) !important; }
.grafico-resumo { display: flex; gap: 28px; margin: 4px 0 4px; }
.grafico-resumo .v { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.grafico-legenda-item { font-size: 12px !important; font-weight: 500; }
/* A legenda desenha o traco da serie: cheio pras entradas, tracejado cinza pras saidas
   (saida nao e alerta -- ambar fica so pra pendente). */
.grafico-legenda-cor { width: 14px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px solid; background: transparent !important; display: inline-block; }
.grafico-legenda-cor.entrada { border-color: hsl(var(--brand-accent)); }
.grafico-legenda-cor.saida { border-color: hsl(var(--foreground) / .5); border-top-style: dashed; }
#areaChart { min-height: 280px; }

/* ── Lista de movimentos (dashboard, carteira, relatorios no celular) ── */
.transacao-linha { gap: 12px !important; padding: 12px 0 !important; }
.transacao-linha:first-child { padding-top: 0 !important; }
.transacao-linha:last-child { padding-bottom: 0 !important; }
.transacao-icone { width: 36px !important; height: 36px !important; font-size: 16px !important; }
.transacao-icone.entrada { background: hsl(var(--success) / .12) !important; }
/* Saida e neutra: o status (pilula) carrega a cor, o valor nao. */
.transacao-icone.saida, .transacao-icone.neutro { background: hsl(var(--muted)) !important; color: hsl(var(--foreground) / .72) !important; }
.transacao-titulo { font-size: 14px !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.transacao-titulo > span.corta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transacao-pessoa { font-size: 13px !important; }
.transacao-valor { font-weight: 600 !important; font-size: 14px !important; text-align: right; color: hsl(var(--foreground)); }
.transacao-valor.saida { color: hsl(var(--foreground)) !important; }
.transacao-lado { text-align: right; flex-shrink: 0; }
.transacao-lado .t-legenda { margin-top: 2px; }
.transacao-lado .pilula { margin-top: 4px; }
a.transacao-linha, button.transacao-linha { width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; text-decoration: none !important; color: inherit; cursor: pointer; }
.stat-linha { gap: 12px; padding: 12px 0 !important; }
.stat-lista .stat-linha:first-child { padding-top: 0 !important; }
.stat-lista .stat-linha:last-child { padding-bottom: 0 !important; }

/* ── Placas de conquista ─────────────────────────────────────────────────
   Placa 4:7 desenhada em CSS (quando houver arte, o <img> cobre tudo). A placa
   e sempre escura; a cor dela vem de --t. Medidas em cqw: a mesma marcacao
   serve de 52px (miniatura) a 200px (anel). */
.cq-placa { position: relative; width: 100%; aspect-ratio: 4 / 7; container-type: inline-size; border-radius: 12px; overflow: hidden; background: #08080a; color: #fff; --t: var(--placa-verde); }
.cq-placa.verde, .cq-selo.verde { --t: var(--placa-verde); }
.cq-placa.roxo, .cq-selo.roxo   { --t: var(--placa-roxo); }
.cq-placa.ouro, .cq-selo.ouro   { --t: var(--placa-ouro); }
.cq-placa.ciano, .cq-selo.ciano { --t: var(--placa-ciano); }
.cq-placa.prata, .cq-selo.prata { --t: var(--placa-prata); }
.cq-placa.bronze, .cq-selo.bronze { --t: var(--placa-bronze); }
.cq-placa.vermelho, .cq-selo.vermelho { --t: var(--placa-vermelho); }
/* placa com arte pronta (a imagem ja traz a moldura): sem fundo, sem borda, imagem inteira centrada */
.cq-placa.com-arte { background: transparent; border-radius: 0; }
.cq-placa.com-arte > img { object-fit: contain; }
.cq-face .cq-placa.com-arte { box-shadow: none; filter: brightness(var(--luz, 1)) drop-shadow(0 18px 24px hsl(0 0% 0% / .45)); }
.cq-placa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.cq-placa-arte { position: absolute; inset: 0; border-radius: inherit;
    background:
        radial-gradient(62% 36% at 50% 40%, hsl(var(--t) / .42) 0%, transparent 72%),
        linear-gradient(135deg, transparent 49.4%, hsl(var(--t) / .22) 49.6%, hsl(var(--t) / .22) 50.4%, transparent 50.6%) 0 0 / 100% 50%,
        linear-gradient(45deg, transparent 49.4%, hsl(var(--t) / .22) 49.6%, hsl(var(--t) / .22) 50.4%, transparent 50.6%) 0 100% / 100% 50%,
        linear-gradient(165deg, #17171b 0%, #060607 72%);
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 3cqw #101012, inset 0 0 0 3.6cqw hsl(var(--t) / .35); }
.cq-placa-marca { position: absolute; top: 10%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 2.5cqw; font-size: 8cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cq-placa-marca i { width: 8cqw; height: 8cqw; background: hsl(var(--t)); -webkit-mask: var(--cereja) center / contain no-repeat; mask: var(--cereja) center / contain no-repeat; }
.cq-placa-simbolo { position: absolute; top: 23%; left: 22%; width: 56%; aspect-ratio: 1; filter: drop-shadow(0 0 7cqw hsl(var(--t) / .75)) drop-shadow(0 2cqw 3cqw #000); }
.cq-placa-simbolo i { display: block; width: 100%; height: 100%; -webkit-mask: var(--cereja) center / contain no-repeat; mask: var(--cereja) center / contain no-repeat; background: linear-gradient(155deg, #fff 0%, hsl(var(--t)) 32%, hsl(var(--t) / .55) 100%); }
.cq-placa-num { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font-size: 20cqw; font-weight: 900; line-height: 1; letter-spacing: -.03em; white-space: nowrap;
    background: linear-gradient(180deg, #fff 18%, #aeb4bb 58%, #6f757c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cq-placa-num.longo { font-size: 16.5cqw; }
.cq-placa.ouro .cq-placa-num { background-image: linear-gradient(180deg, #fff3c4 10%, #f0c24b 55%, #a9781a 100%); }
.cq-placa-leg { position: absolute; left: 0; right: 0; bottom: 9.5%; text-align: center; font-size: 5.2cqw; font-weight: 600; letter-spacing: .32em; color: rgba(255,255,255,.78); padding-left: .32em; line-height: 1; }
.cq-placa.bloqueada > img, .cq-placa.bloqueada .cq-placa-arte, .cq-placa.bloqueada .cq-placa-marca, .cq-placa.bloqueada .cq-placa-num, .cq-placa.bloqueada .cq-placa-leg { filter: grayscale(.9) brightness(.62); }
.cq-placa.bloqueada .cq-placa-simbolo { filter: grayscale(.9) brightness(.62) drop-shadow(0 2cqw 3cqw #000); }
.cq-lock { position: absolute; right: 6cqw; top: 6cqw; width: 15cqw; height: 15cqw; border-radius: 4cqw; display: grid; place-items: center; background: rgba(0,0,0,.66); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); font-size: 9cqw; z-index: 3; }
.placa-thumb { flex-shrink: 0; }
.placa-thumb .cq-placa { border-radius: 6px; }
/* Abaixo de 70px de largura a placa perde marca e legenda: sobram simbolo e numero, maiores. */
@container (max-width: 70px) {
    .cq-placa-marca, .cq-placa-leg { display: none; }
    .cq-placa-simbolo { top: 13%; left: 17%; width: 66%; }
    .cq-placa-num { bottom: 13%; font-size: 23cqw; }
    .cq-placa-num.longo { font-size: 19cqw; }
}
/* Selo: a versao da placa pra tamanho de icone (lista). So cor + cereja. */
.cq-selo { position: relative; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; isolation: isolate; --t: var(--placa-verde);
    background: radial-gradient(70% 70% at 50% 45%, hsl(var(--t) / .38) 0%, transparent 75%), #0a0a0c; box-shadow: inset 0 0 0 1.5px hsl(var(--t) / .6); }
.cq-selo > i { width: 24px; height: 24px; -webkit-mask: var(--cereja) center / contain no-repeat; mask: var(--cereja) center / contain no-repeat; background: linear-gradient(155deg, #fff 0%, hsl(var(--t)) 45%, hsl(var(--t) / .7) 100%); }
.cq-selo.bloqueada { --t: 0 0% 58%; }
.cq-selo .cadeado { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.cq-mini { display: flex; gap: 16px; align-items: center; }
.cq-mini .placa-thumb { width: 52px; }
.cq-mini .corpo { flex: 1; min-width: 0; }

@media (max-width: 991.98px) {
    .dash-topo { grid-template-columns: minmax(0, 1fr); }
    .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .dash-topo, .kpis, .kpi-faixa { gap: 12px; }
    .dash-topo, .kpi-faixa { margin-bottom: 12px; }
    .atalhos { display: none; }   /* no celular a barra fixa ja leva a esses destinos */
    .saldo-heroi { padding: 20px; text-align: center; align-items: center; --brilho: .14;
        background: radial-gradient(130% 105% at 50% 118%, hsl(var(--brand-accent) / var(--brilho)) 0%, transparent 74%), hsl(var(--card)) !important; }
    [data-theme="dark"] .saldo-heroi, .dark .saldo-heroi { --brilho: .38; }
    .saldo-heroi .valor { margin: 10px 0 12px; }
    .saldo-heroi .acoes { width: 100%; }
    .saldo-detalhes { display: none; }
    .saldo-pendente { display: block; }
    .kpi-cartao { padding: 14px; }
    .kpi-cartao > .stat-icon { display: none !important; }
    .kpi-cartao .rotulo { padding-right: 0; font-size: 12px; margin-bottom: 6px; }
    .kpi-cartao .rodape { min-height: 0; }
    #areaChart { min-height: 220px; }
    .grafico-resumo { gap: 20px; }
    .grafico-cabecalho .selo-delta { display: none; }   /* ja esta no cartao de vendas, logo acima */
}
.periodo-botao { min-height: 40px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid hsl(var(--border)) !important; border-radius: var(--radius-sm) !important; }
.periodo-botao .ph { font-size: 16px !important; }
.periodo-popover { border-radius: var(--radius-lg); box-shadow: var(--shadow-3); border-color: hsl(var(--borda-elevada)); }
.pagina-acoes .periodo-popover { left: auto; right: 0; }
.filtro-produto { min-height: 40px; padding: 0 32px 0 12px !important; font-size: 13px !important; }

/* ── Carteira ────────────────────────────────────────────────────────── */
.carteira-painel { overflow: hidden; }
.carteira-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.carteira-saldo { padding: 24px; display: flex; flex-direction: column; min-width: 0; }
.carteira-retirada { padding: 24px; border-left: 1px solid hsl(var(--border)); min-width: 0; }
.carteira-valor { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; color: hsl(var(--brand)); margin: 16px 0 6px; overflow-wrap: anywhere; }
[data-theme="dark"] .carteira-valor, .dark .carteira-valor { color: hsl(var(--brand-accent)); }
.carteira-olho { border: 1px solid hsl(var(--border)) !important; }
.carteira-condicoes { margin: 20px 0 16px; padding: 8px 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.carteira-condicao { padding: 9px 0; font-size: 13px; }
.carteira-condicao > span:first-child { color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 8px; }
.carteira-condicao i { font-size: 16px; margin-right: 0 !important; }
.carteira-deposito { margin-top: auto; padding-top: 0; border-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.carteira-liquido { padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.45; color: hsl(var(--foreground) / .72); }
.carteira-liquido strong { font-weight: 500; }
.carteira-filtros { grid-template-columns: minmax(0, 1fr) 160px 160px; gap: 8px; }
.carteira-filtros .form-control { min-height: 40px; font-size: 13px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { margin-bottom: 14px; }
.deposito-qr { flex-direction: column; align-items: center; gap: 14px !important; padding: 4px 20px 20px; text-align: center; }
@media (max-width: 991.98px) {
    .carteira-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .carteira-retirada { padding: 24px; border-left: 0; border-top: 1px solid hsl(var(--border)); }
}
@media (max-width: 767.98px) {
    .carteira-saldo, .carteira-retirada { padding: 16px; }
    .carteira-valor { font-size: 36px; }
    .carteira-filtros { grid-template-columns: 1fr 1fr; }
    .carteira-filtros .carteira-busca { grid-column: 1 / -1; }
    .duas-col { grid-template-columns: 1fr; gap: 0; }
}

/* ── Relatorios (Entradas / Saidas) ──────────────────────────────────── */
.relatorio-filtros { flex-wrap: nowrap; }
.relatorio-filtros .campo-icone { width: 300px; max-width: 100%; }
.relatorio-filtros .form-control, .relatorio-filtros .form-select { min-height: 40px; font-size: 13px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.relatorio-filtros .form-select { width: auto !important; min-width: 170px; font-weight: 600; }
/* Paginacao do DataTables no desenho do painel */
.dataTables_wrapper .tabela-rodape { display: flex; }
.dataTables_wrapper .dataTables_info { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)) !important; padding: 0 !important; float: none !important; }
.dataTables_wrapper .dataTables_paginate { float: none !important; padding: 0 !important; display: flex; gap: 4px; align-items: center; }
.dataTables_wrapper .dataTables_paginate > span { display: flex; gap: 4px; align-items: center; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    min-width: 36px; height: 36px; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
    border: 1px solid hsl(var(--border)) !important; border-radius: var(--radius-sm) !important; background: transparent !important;
    color: hsl(var(--foreground)) !important; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: none !important; cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { opacity: .5; cursor: not-allowed; color: hsl(var(--muted-foreground)) !important; }
.dataTables_wrapper .dataTables_paginate .ellipsis { color: hsl(var(--muted-foreground)); padding: 0 4px; }
table.dataTable { border-collapse: collapse !important; margin: 0 !important; }
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer { border-bottom-color: hsl(var(--border)) !important; }
.lista-cartoes .transacao-linha:last-of-type { border-bottom: 0 !important; }
@media (max-width: 767.98px) {
    .relatorio-filtros { flex-wrap: wrap; width: 100%; }
    .relatorio-filtros .campo-icone { width: auto; flex: 1 1 100%; order: 2; }
    .pagina-cabecalho:has(.relatorio-filtros) .pagina-titulo { flex: 1; }
    .relatorio-filtros { display: contents; }
    .relatorio-filtros .form-select { order: 1; }
    .dataTables_wrapper .tabela-rodape { display: none; }
}

/* ── Modal de detalhes da transacao ──────────────────────────────────────
   Mesmos ids e classes .tx-* de sempre; muda so o desenho (grade de resumo com
   linhas de 1px, secoes com rotulo, lista chave/valor). */
.tx-titulo { font-size: 16px !important; font-weight: 600 !important; gap: 0 !important; }
.tx-titulo i { display: none; }
.tx-resumo { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px !important; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px !important; padding: 0 !important; }
.tx-resumo-item { background: hsl(var(--popover)) !important; border: 0 !important; border-radius: 0 !important; padding: 12px 14px !important; min-width: 0; text-align: left !important; }
.tx-resumo-rotulo { font-size: 12px !important; font-weight: 500 !important; color: hsl(var(--muted-foreground)) !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 4px !important; }
.tx-resumo-valor { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.tx-resumo-valor.stat-ok { color: hsl(var(--success)) !important; }
.tx-resumo-valor-menor { font-size: 14px !important; font-weight: 600 !important; }
.tx-secao { margin-bottom: 18px !important; }
.tx-secao-titulo { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)) !important; margin-bottom: 6px !important; }
.tx-secao-titulo i { display: none; }
.tx-grade { display: block !important; }
.tx-linha { display: flex !important; align-items: center; gap: 8px !important; padding: 9px 0 !important; font-size: 13px; border-bottom: 1px solid hsl(var(--border)); border-radius: 0 !important; background: transparent !important; }
.tx-grade .tx-linha:last-child, .tx-caixa .tx-linha:last-child { border-bottom: 0; }
.tx-linha > i { font-size: 16px !important; color: hsl(var(--muted-foreground)) !important; }
.tx-rotulo { color: hsl(var(--muted-foreground)) !important; font-weight: 400 !important; white-space: nowrap; }
.tx-valor { margin-left: auto; text-align: right; font-weight: 500 !important; color: hsl(var(--foreground)) !important; }
.tx-caixa { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
.tx-qr { background: #fff; padding: 10px; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); }
.tx-modal { border-radius: var(--radius-lg) !important; }
html body .drawer .drawer-menu .nav .drawer-menu-nested a.nav-link.active { background-color: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; box-shadow: none !important; font-weight: 600 !important; }
/* O .btn do tema tem display com !important, entao o style="display:none" (e o
   .hide() do jQuery) nao escondia nada: Estornar/Cancelar apareciam sempre. */
.btn[style*="display: none"], .btn[style*="display:none"] { display: none !important; }
.tabela td.corta.mono { max-width: 132px; }
.tabela td.forte.corta { max-width: 210px; }
#detalhesModal .modal-dialog { max-width: 560px; }
.modal-content.adobe-glass-card { border-color: hsl(var(--borda-elevada)) !important; }
@media (max-width: 575.98px) { .modal-content.adobe-glass-card { border-width: 1px 0 0 !important; border-radius: 20px 20px 0 0 !important; } }
@media (max-width: 420px) { .kpi-faixa .t-numero, .kpis .t-numero { font-size: 18px; } }
.btn-warning { background: transparent !important; color: hsl(var(--warning)) !important; border-color: hsl(var(--warning) / .5) !important; }
.btn-warning:hover { background: hsl(var(--warning) / .1) !important; color: hsl(var(--warning)) !important; }
.t-secao.mb-1 { margin-bottom: 4px !important; } .t-secao.mb-3 { margin-bottom: 12px !important; }

/* ── Chave API, Webhooks, Produtos, Integracoes ──────────────────────── */
.cred-item { border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; }
.cred-campo { min-height: 44px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 6px 6px 6px 12px; gap: 8px; }
.cred-campo-rotulo { font-size: 12px; font-weight: 500; min-width: 64px; }
.cred-valor { font-size: 12.5px; }
.cred-etiqueta { min-height: 26px; padding: 0 10px; font-size: 12px; color: hsl(var(--foreground) / .72); }
.cred-etiqueta-ativa { background: hsl(var(--success) / .12); color: hsl(var(--success)); }
[data-theme="dark"] .cred-etiqueta-ativa { background: hsl(var(--success) / .14); }
.cred-olho, .cred-copiar { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 16px; }
.cred-olho:hover, .cred-copiar:hover { background: hsl(var(--card)); }
.cred-regenerar { min-height: 32px; border-radius: var(--radius-sm); font-size: 13px; }
.cred-revelacao { border-radius: var(--radius-md); }
.wh-tabela th { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; background: transparent; color: hsl(var(--muted-foreground)); padding: 16px 20px 10px; }
.wh-tabela td { padding: 12px 20px; font-size: 13px; vertical-align: middle; }
.wh-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: hsl(var(--muted-foreground)); }
.wh-acao { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
.wh-rodape { margin: 4px 20px 20px; padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: hsl(var(--muted)); color: hsl(var(--foreground) / .72); font-size: 13px; }
.wh-ajuda { margin: 0; padding: 20px; border: 0; background: transparent; }
.wh-ajuda p { font-size: 13px; line-height: 1.45; }
.wh-aviso { border-radius: var(--radius-md); font-size: 13px; }
.produto-img { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 16px; font-weight: 700; flex-shrink: 0; background: hsl(var(--muted)); color: hsl(var(--foreground) / .72); object-fit: cover; }
.integ-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.integ-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.integ-card .topo { display: flex; align-items: center; gap: 12px; }
.integ-logo { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.02em; background: hsl(var(--foreground)); color: hsl(var(--background)); flex-shrink: 0; }
.integ-vaga { border-style: dashed !important; box-shadow: none !important; background: transparent !important; align-items: center; justify-content: center; text-align: center; color: hsl(var(--muted-foreground)) !important; min-height: 172px; }
@media (max-width: 991.98px) { .integ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .integ-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .integ-vaga { min-height: 96px; }
    .wh-tabela th, .wh-tabela td { padding-left: 16px; padding-right: 16px; }
    .wh-rodape { margin: 4px 16px 16px; }
}
.dataTables_wrapper .tabela-rodape:has(> .dataTables_paginate:only-child) { justify-content: flex-end; }
.integ-card .topo .t-legenda { white-space: nowrap; }
.integ-card .topo .pilula { flex-shrink: 0; }
@media (min-width: 992px) and (max-width: 1399.98px) { .integ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Conquistas ──────────────────────────────────────────────────────── */
.cq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.cq-col-vitrine, .cq-col-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Vitrine das placas. No claro e um card com o brilho da marca subindo do rodape: as
   placas viram o unico objeto escuro da tela. No escuro e a superficie fixa preta. */
.cq-vitrine {
    position: relative; overflow: hidden; border-radius: var(--radius-xl); isolation: isolate;
    background: radial-gradient(75% 55% at 50% 112%, hsl(var(--brand-accent) / .22) 0%, transparent 70%), hsl(var(--card));
    border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-1);
    --vit-txt: hsl(var(--foreground) / .72); --vit-grade: hsl(var(--foreground) / .05); --vit-sombra: hsl(220 40% 20% / .35);
}
[data-theme="dark"] .cq-vitrine, .dark .cq-vitrine {
    background:
        radial-gradient(70% 50% at 50% 108%, hsl(var(--fixo-ac) / .30) 0%, transparent 70%),
        radial-gradient(50% 40% at 50% 46%, hsl(var(--fixo-ac) / .10) 0%, transparent 70%),
        hsl(var(--fixo-bg));
    border-color: hsl(0 0% 100% / .08); box-shadow: none;
    --vit-txt: hsl(var(--fixo-txt) / .62); --vit-grade: hsl(0 0% 100% / .05); --vit-sombra: transparent;
}
.cq-vitrine::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(var(--vit-grade) 1px, transparent 1px), linear-gradient(90deg, var(--vit-grade) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%); }
/* chao: sombra de contato embaixo do anel (so aparece na vitrine clara) */
.cq-vitrine::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 50px; height: 34px; z-index: -1; border-radius: 50%; background: var(--vit-sombra); filter: blur(22px); }
.cq-stage { perspective: 1500px; height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cq-stage.arrastando { cursor: grabbing; }
.cq-ring { position: relative; width: 160px; height: 280px; transform-style: preserve-3d; --raio: 186px; }
.cq-face { position: absolute; inset: 0; will-change: transform, opacity; }
.cq-face .cq-placa { filter: brightness(var(--luz, 1)); box-shadow: 0 0 0 1px hsl(0 0% 100% / .06); }
.cq-dica { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; font-weight: 500; color: var(--vit-txt); display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.cq-dica i { font-size: 16px; }
.cq-proxima { padding: 24px; display: flex; gap: 20px; align-items: center; }
.cq-proxima .placa-thumb { width: 96px; }
.cq-proxima .corpo { flex: 1; min-width: 0; }
.cq-titulo { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.2 !important; margin: 6px 0 0 !important; color: hsl(var(--foreground)); }
.cq-proxima .falta { margin: 14px 0 10px; }
.cq-total { display: grid; grid-template-columns: 1fr 1fr; }
.cq-total > div { padding: 18px 20px; min-width: 0; }
.cq-total > div + div { border-left: 1px solid hsl(var(--border)); }
.cq-total .t-numero { margin-top: 6px; }
.cq-de { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); letter-spacing: 0; }
.cq-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid hsl(var(--border)); }
.cq-item:first-child { padding-top: 0; }
.cq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cq-item .txt { flex: 1; min-width: 0; }
.cq-item .nm { font-weight: 600; font-size: 14px; color: hsl(var(--foreground)); }
.cq-item .acao { flex-shrink: 0; }
.cq-item form { margin: 0; }
@media (max-width: 991.98px) {
    .cq-grid { grid-template-columns: minmax(0, 1fr); }
    /* ordem no celular: proxima meta, anel, total, lista */
    .cq-col-info { display: contents; }
    .cq-proxima { order: 1; } .cq-col-vitrine { order: 2; } .cq-total { order: 3; } .cq-lista { order: 4; }
}
@media (max-width: 767.98px) {
    .cq-grid, .cq-col-vitrine { gap: 12px; }
    .cq-stage { height: 320px; perspective: 1050px; }
    .cq-ring { width: 112px; height: 196px; --raio: 130px; }
    .cq-proxima { padding: 16px; gap: 14px; }
    .cq-proxima .placa-thumb { width: 72px; }
    .cq-titulo { font-size: 20px !important; }
    .cq-total > div { padding: 14px 16px; }
    .cq-item .t-legenda { white-space: nowrap; }
}
@media (max-width: 575.98px) { .pagina-acoes .periodo-popover { left: auto; right: .75rem; } }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  VISUAL v3 (gw3) — molde Versell, paleta azul Pagandu + branco       ║
   ║  "Limpo": menos moldura e menos peso. Card sem borda no claro (so    ║
   ║  sombra suave), uma cor de acento, verde/ambar/vermelho so com       ║
   ║  significado. Este bloco vem por ultimo e reescreve o v2 acima.      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Superficies ─────────────────────────────────────────────────────── */
.card, .adobe-glass-card, .shadow, .bg-white { border-color: transparent !important; box-shadow: var(--shadow-1) !important; border-radius: 14px !important; }
[data-theme="dark"] .card, [data-theme="dark"] .adobe-glass-card, [data-theme="dark"] .shadow, [data-theme="dark"] .bg-white,
.dark .card, .dark .adobe-glass-card { border-color: hsl(var(--borda) / .7) !important; box-shadow: none !important; }
.card:hover, .adobe-glass-card:hover { box-shadow: var(--shadow-1) !important; }
[data-theme="dark"] .card:hover, [data-theme="dark"] .adobe-glass-card:hover { box-shadow: none !important; }
.card-clicavel:hover, .shortcut-card:hover .adobe-glass-card { border-color: transparent !important; box-shadow: var(--shadow-2) !important; }
[data-theme="dark"] .card-clicavel:hover { border-color: hsl(var(--ac) / .45) !important; box-shadow: none !important; }
.stat-icon-brand, [data-theme="dark"] .stat-icon-brand, .dark .stat-icon-brand { background: hsl(var(--ac-tinta)) !important; color: hsl(var(--brand-accent)) !important; }
.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-light { background: hsl(var(--card)) !important; }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-dark, [data-theme="dark"] .btn-light { background: transparent !important; }
.btn { border-radius: 10px !important; }
.form-select, .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="url"], input[type="search"], input[type="date"], select, textarea { border-radius: 10px !important; border-color: hsl(var(--input)) !important; }
.saudacao { font-size: 14px; color: hsl(var(--muted-foreground)); margin: 0; }
.saudacao b { color: hsl(var(--foreground)); font-weight: 600; }
.secao-titulo { font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.005em; color: hsl(var(--foreground)); margin: 24px 0 12px !important; }

/* ── Barra do topo: superficie do card. No celular: menu | logo no centro | tema + sino ── */
.top-app-bar.navbar, [data-theme="dark"] .top-app-bar.navbar, .dark .top-app-bar.navbar,
[data-theme="dark"] .top-app-bar, .dark .top-app-bar { background: hsl(var(--card)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid hsl(var(--border) / .8) !important; }
.ponto-novo { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--brand-accent)); border: 2px solid hsl(var(--card)); }
@media (max-width: 1199.98px) {
    .top-app-bar > .container-fluid { position: relative; }
    .top-app-bar .logo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0 !important; }
    .top-app-bar .logo-img { max-height: 26px !important; }
}
@media (min-width: 1200px) {
    .top-app-bar .logo { border-right-color: hsl(var(--border) / .8); }
}

/* ── Menu lateral: limpo, item ativo em faixa suave com o acento ─────── */
#layoutDrawer_nav .drawer { border-right: 1px solid hsl(var(--border) / .8) !important; }
.drawer .drawer-menu .nav { display: flex; flex-direction: column; min-height: 100%; }
.drawer .drawer-menu .nav .nav-link { min-height: 44px !important; border-radius: 10px !important; }
.drawer .drawer-menu .nav .nav-link:hover { background: hsl(var(--accent)) !important; }
html body nav .nav-link.active, html body a.nav-link.active { font-weight: 600 !important; }
.drawer .drawer-menu .nav .drawer-menu-nested .nav-link { min-height: 38px !important; margin: 0 12px 2px 24px !important; padding: 0 12px !important; border-radius: 10px !important; gap: 10px; }
.drawer .drawer-menu .nav .drawer-menu-nested .nav-link > i { font-size: 16px; color: inherit; }
html body .drawer .drawer-menu .nav .drawer-menu-nested a.nav-link.active { background-color: hsl(var(--nav-active-bg)) !important; color: hsl(var(--nav-active-fg)) !important; }
/* grupo aberto: o titulo do grupo fica no acento (sem fundo), como na Versell */
.drawer .drawer-menu .nav .nav-link[aria-expanded="true"] { color: hsl(var(--nav-active-fg)) !important; }
.drawer .drawer-menu .nav .nav-link[aria-expanded="true"] .nav-link-icon,
.drawer .drawer-menu .nav .nav-link[aria-expanded="true"] .drawer-collapse-arrow { color: hsl(var(--nav-active-fg)) !important; }
.drawer-rodape { margin-top: auto; padding-top: 8px; border-top: 1px solid hsl(var(--border) / .8); }
.drawer-rodape .nav-link { background: transparent !important; }
.drawer-menu-heading::after, .sidebar-heading::after { background: hsl(var(--border) / .8); }

/* ── Barra fixa do celular: 3 itens, icone + rotulo; o ativo so muda de cor ── */
@media (max-width: 767.98px) {
    .barra-fixa { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: hsl(var(--card)); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid hsl(var(--border) / .8); }
    .bb-item { gap: 2px; font-size: 12px; padding: 4px 0; }
    .bb-ico { width: auto; height: 28px; border-radius: 0; font-size: 24px; background: transparent !important; }
    .bb-item.active, .bb-item.active .bb-ico { color: hsl(var(--brand-accent)) !important; background: transparent !important; }
    main.body-container { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* o botao de tema voltou pro topo tambem no celular; o item da gaveta saiu */
.drawer-rodape .so-gaveta-mobile { display: none !important; }

/* ── Dashboard (molde Versell) ───────────────────────────────────────── */
.pagina-cabecalho .pagina-titulo p.saudacao { display: block !important; font-size: 14px; }
.saldo-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.saldo-card .rotulo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.saldo-card .kpi-olho { padding: 4px; font-size: 16px; border-radius: 6px; }
.saldo-card .valor { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)); margin-top: 4px; overflow-wrap: anywhere; }
.saldo-acoes { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.saldo-icone { width: 48px !important; height: 48px !important; border-radius: 50% !important; font-size: 22px !important; }
.mais-info { margin-top: 12px; overflow: hidden; }
.mais-info > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; cursor: pointer; font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); user-select: none; }
.mais-info > summary::-webkit-details-marker { display: none; }
.mais-info > summary > span { display: inline-flex; align-items: center; gap: 8px; }
.mais-info > summary .seta { color: hsl(var(--muted-foreground)); transition: transform .2s ease; }
.mais-info[open] > summary .seta { transform: rotate(180deg); }
.mais-info[open] > summary .ph-plus::before { content: "\e32a"; }   /* ph-minus */
.mais-info-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 24px; padding: 16px 24px 20px; border-top: 1px solid hsl(var(--border) / .8); }
.mais-info-grade .v { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; color: hsl(var(--foreground)); }
.mais-info-grade .v.stat-warn { color: hsl(var(--warning)); } .mais-info-grade .v.stat-ok { color: hsl(var(--success)); } .mais-info-grade .v.stat-bad { color: hsl(var(--destructive)); }
.mais-info-grade .v + .t-legenda { margin-top: 2px; }
.atalhos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 0; }
.atalhos .shortcut-card { display: flex !important; align-items: center; gap: 12px !important; padding: 14px 16px; }
.atalhos .shortcut-card .titulo { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atalhos .shortcut-card .stat-icon { border-radius: 10px !important; }
.dash-grade { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; align-items: start; margin-top: 24px; }
.dash-grade-2 { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }   /* so Metodos de pagamento: largura toda */
.grafico-legenda-cor.saida { border-color: hsl(var(--foreground) / .45); }
/* Linhas de movimento: cada uma num bloco suave, separadas por respiro (sem linha de 1px) */
.timeline .transacao-linha, .lista-cartoes .transacao-linha { background: hsl(var(--muted) / .55); border: 0 !important; border-radius: 12px; padding: 12px 14px !important; margin-bottom: 8px; }
.timeline .transacao-linha:last-child, .lista-cartoes .transacao-linha:last-of-type { margin-bottom: 0; }
[data-theme="dark"] .timeline .transacao-linha, [data-theme="dark"] .lista-cartoes .transacao-linha { background: hsl(var(--sup2) / .6); }
.transacao-icone.entrada { background: hsl(var(--success) / .14) !important; color: hsl(var(--success)) !important; }
.transacao-icone.saida, .transacao-icone.neutro { background: hsl(var(--card)) !important; }
[data-theme="dark"] .transacao-icone.saida, [data-theme="dark"] .transacao-icone.neutro { background: hsl(var(--sup)) !important; }
@media (max-width: 1199.98px) {
    .mais-info-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-grade, .dash-grade-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .pagina-cabecalho:has(.saudacao) { align-items: flex-start; }
    .saldo-card { padding: 16px 18px; }
    .saldo-card .valor { font-size: 26px; }
    .mais-info > summary { padding: 12px 18px; }
    .mais-info-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 18px 16px; gap: 14px 16px; }
    .atalhos { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atalhos .shortcut-card { padding: 12px; }
    .dash-grade { margin-top: 20px; gap: 12px; } .dash-grade-2 { margin-top: 12px; }
    .secao-titulo { margin: 20px 0 10px !important; }
}
.atalhos .shortcut-card .titulo { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
@media (min-width: 1200px) and (max-width: 1500px) { .atalhos .shortcut-card { padding: 14px 12px; gap: 10px !important; } .atalhos .shortcut-card .titulo { font-size: 13px; } }

/* ── Carteira (molde Versell): no celular a ordem e saldo, retirada, condicoes, deposito ── */
.carteira-valor { color: hsl(var(--foreground)) !important; font-size: 32px; margin: 14px 0 4px; }
[data-theme="dark"] .carteira-valor, .dark .carteira-valor { color: hsl(var(--foreground)) !important; }
.carteira-olho { border: 0 !important; }
.carteira-retirada { border-left-color: hsl(var(--border) / .8); scroll-margin-top: calc(var(--topo-h) + 16px); }
.carteira-condicoes { border-color: hsl(var(--border) / .8); }
@media (max-width: 991.98px) {
    .carteira-grid { display: flex; flex-direction: column; }
    .carteira-saldo { display: contents; }
    .carteira-saldo > * { padding-left: 18px; padding-right: 18px; }
    .carteira-saldo > :first-child { order: 1; padding-top: 18px; }
    .carteira-saldo > .carteira-valor { order: 2; margin: 12px 0 2px; }
    .carteira-saldo > .t-apoio { order: 3; padding-bottom: 18px; }
    .carteira-retirada { order: 4; padding: 18px; border-top: 1px solid hsl(var(--border) / .8); }
    .carteira-saldo > .carteira-condicoes { order: 5; margin: 0; padding-top: 10px; padding-bottom: 10px; border-bottom: 0; }
    .carteira-saldo > .carteira-deposito { order: 6; margin: 0; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid hsl(var(--border) / .8); }
    .carteira-deposito .btn { width: 100%; }
}
@media (max-width: 767.98px) { .carteira-valor { font-size: 28px; } }

/* ── Transacoes: seletor Entradas/Saidas e resumo do periodo num card so ── */
.seg-abas { display: inline-flex; padding: 3px; border-radius: 12px; background: hsl(var(--muted)); margin-bottom: 16px; }
.seg-aba { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: hsl(var(--foreground) / .72) !important; text-decoration: none !important; }
.seg-aba i { font-size: 16px; }
.seg-aba.ativa { background: hsl(var(--card)); color: hsl(var(--brand-accent)) !important; box-shadow: var(--shadow-1); }
[data-theme="dark"] .seg-aba.ativa { background: hsl(var(--sup)); box-shadow: none; }
.kpi-faixa { gap: 0; background: hsl(var(--card)); border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; }
[data-theme="dark"] .kpi-faixa { box-shadow: none; border: 1px solid hsl(var(--borda) / .7); }
.kpi-faixa > .kpi-cartao { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 16px 20px; }
.kpi-faixa > .kpi-cartao + .kpi-cartao { border-left: 1px solid hsl(var(--border) / .8) !important; }
.kpi-faixa > .kpi-cartao > .stat-icon { display: none !important; }
.kpi-faixa .rotulo { padding-right: 0; margin-bottom: 4px; font-size: 12px; }
.kpi-faixa .t-numero { font-size: 18px; }
.table th, .tabela th, .table td, .tabela td { border-bottom-color: hsl(var(--border) / .8) !important; }
.tabela-rodape { border-top-color: hsl(var(--border) / .8); }
@media (max-width: 991.98px) {
    .kpi-faixa > .kpi-cartao:nth-child(3) { border-left: 0 !important; }
    .kpi-faixa > .kpi-cartao:nth-child(n+3) { border-top: 1px solid hsl(var(--border) / .8) !important; }
}
@media (max-width: 767.98px) {
    .seg-abas { display: flex; margin-bottom: 12px; } .seg-aba { flex: 1; justify-content: center; }
    .kpi-faixa > .kpi-cartao { padding: 12px 16px; } .kpi-faixa .t-numero { font-size: 16px; }
    .lista-cartoes .transacao-linha { background: hsl(var(--muted) / .55); }
}
/* Rodape das telas de visitante: os links vinham na cor do gateway (verde do banco) */
body > footer a[style] { color: hsl(var(--brand-accent)) !important; }
body > footer { background: transparent !important; border-top-color: hsl(var(--border) / .8) !important; }
.atalhos .shortcut-card .titulo { overflow-wrap: normal; }

/* Acesso rapido: um pastel por atalho, como na Versell. So o quadradinho do
   icone leva cor; o card e o rotulo seguem neutros. */
.atalhos .stat-icon.atalho-tinta { background: hsl(var(--at) / .14) !important; color: hsl(var(--at-ic)) !important; }
.atalho-verde  { --at: 152 60% 40%; --at-ic: 152 64% 27%; }
.atalho-azul   { --at: 212 85% 52%; --at-ic: 212 80% 40%; }
.atalho-ambar  { --at: 40 92% 48%;  --at-ic: 36 88% 32%; }
.atalho-roxo   { --at: 268 70% 58%; --at-ic: 268 60% 46%; }
.atalho-teal   { --at: 178 68% 38%; --at-ic: 180 72% 26%; }
.atalho-indigo { --at: 238 70% 60%; --at-ic: 238 58% 48%; }
[data-theme="dark"] .atalhos .stat-icon.atalho-tinta, .dark .atalhos .stat-icon.atalho-tinta { background: hsl(var(--at) / .20) !important; }
[data-theme="dark"] .atalho-verde,  .dark .atalho-verde  { --at-ic: 152 60% 62%; }
[data-theme="dark"] .atalho-azul,   .dark .atalho-azul   { --at-ic: 212 90% 72%; }
[data-theme="dark"] .atalho-ambar,  .dark .atalho-ambar  { --at-ic: 42 90% 64%; }
[data-theme="dark"] .atalho-roxo,   .dark .atalho-roxo   { --at-ic: 268 85% 78%; }
[data-theme="dark"] .atalho-teal,   .dark .atalho-teal   { --at-ic: 176 60% 58%; }
[data-theme="dark"] .atalho-indigo, .dark .atalho-indigo { --at-ic: 236 90% 80%; }

/* ── Perfil no padrao Playnex: capa + avatar + nome, e a lista "Sua conta" com
      linhas que abrem no lugar (<details>) ou levam a outra tela. Sem abas.
      Prefixo .perfil-pagina: a tela ainda carrega um <style> proprio, mais antigo. ── */
.perfil-pagina .pf-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1120px; }
.perfil-pagina .pf-lado { position: sticky; top: calc(var(--topo-h) + 24px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.perfil-pagina .pf-conteudo { display: block; min-width: 0; }
.perfil-pagina .pf-hero { overflow: hidden; text-align: left; }
/* capa no azul da marca (superficie fixa: igual nos dois temas) */
.perfil-pagina .pf-cover { height: 96px; background:
    radial-gradient(80% 140% at 100% 0%, hsl(var(--fixo-ac) / .55) 0%, transparent 60%),
    linear-gradient(120deg, hsl(212 78% 22%) 0%, hsl(206 88% 36%) 55%, hsl(197 82% 52%) 100%); }
.perfil-pagina .pf-avatar { width: 84px; height: 84px; margin: -42px 0 0 20px; border: 4px solid hsl(var(--card)); background: hsl(var(--card)); border-radius: 50%; position: relative; }
.perfil-pagina .pf-avatar span { font-size: 26px; font-weight: 700; background: hsl(var(--ac-tinta)); color: hsl(var(--brand-accent)); }
[data-theme="dark"] .perfil-pagina .pf-avatar span { background: hsl(var(--sup2)); color: hsl(var(--ac)); }
.perfil-pagina .pf-hero .corpo { padding: 12px 20px 20px; }
.perfil-pagina .pf-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.perfil-pagina .pf-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.perfil-pagina .pf-verificado { font-size: 20px; color: hsl(var(--brand-accent)); flex-shrink: 0; }
.perfil-pagina .pf-handle { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 2px; overflow-wrap: anywhere; }
.perfil-pagina .pf-since { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 6px; }
.perfil-pagina .pf-saldo { margin-top: 14px; }
.perfil-pagina .pf-suporte { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none !important; color: inherit !important; }
.perfil-pagina .pf-sup-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: hsl(var(--success) / .14); color: hsl(var(--success)); }
.perfil-pagina .pf-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 4px 4px 10px; }
.perfil-pagina .pf-lista { display: flex; flex-direction: column; gap: 10px; }
.perfil-pagina .pf-linha { display: block; background: hsl(var(--card)); border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; border: 1px solid transparent; }
[data-theme="dark"] .perfil-pagina .pf-linha { box-shadow: none; border-color: hsl(var(--borda) / .7); }
.perfil-pagina .pf-linha > summary, .perfil-pagina a.pf-linha.pf-link { list-style: none; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; cursor: pointer; text-decoration: none !important; color: inherit !important; -webkit-tap-highlight-color: transparent; }
.perfil-pagina .pf-linha > summary::-webkit-details-marker { display: none; }
.perfil-pagina .pf-linha > summary:hover, .perfil-pagina a.pf-linha.pf-link:hover { background: hsl(var(--muted) / .5); }
.perfil-pagina .pf-linha > summary:focus-visible, .perfil-pagina a.pf-linha.pf-link:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; border-radius: 14px; }
.perfil-pagina .pf-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: hsl(var(--ac-tinta)); color: hsl(var(--brand-accent)); }
.perfil-pagina .pf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.perfil-pagina .pf-t { font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.3; }
.perfil-pagina .pf-s { font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.35; margin-top: 1px; }
.perfil-pagina .pf-chev { font-size: 16px; color: hsl(var(--muted-foreground)); flex-shrink: 0; transition: transform .18s ease; }
.perfil-pagina .pf-linha[open] > summary .pf-chev { transform: rotate(90deg); }
.perfil-pagina .pf-corpo { padding: 4px 16px 16px; border-top: 1px solid hsl(var(--border) / .8); }
/* o conteudo das antigas abas vivia em cards proprios: dentro da linha ele fica plano */
.perfil-pagina .pf-corpo .info-card, .perfil-pagina .pf-corpo .seg-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.perfil-pagina .pf-corpo > h5, .perfil-pagina .pf-corpo .info-card-topo h6 { display: none; }
.perfil-pagina .pf-corpo .info-card-topo { margin: 12px 0 4px; justify-content: flex-start; }
.perfil-pagina .pf-corpo .info-card-topo:empty, .perfil-pagina .pf-corpo .info-card-topo:not(:has(button, span)) { display: none; }
.perfil-pagina .pf-corpo .info-item { padding: 11px 0; border-bottom-color: hsl(var(--border) / .8); }
.perfil-pagina .pf-corpo .info-item > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }
.perfil-pagina .pf-corpo .info-item strong { margin: 0; }
.perfil-pagina .pf-corpo .info-item span { margin-left: 0 !important; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.perfil-pagina .pf-corpo .taxas-grupo { margin-top: 14px; }
.perfil-pagina .pf-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.perfil-pagina .pf-bloco { margin-top: 4px; padding-top: 16px; border-top: 1px solid hsl(var(--border) / .8); }
.perfil-pagina .pf-bloco #ips-list > .d-flex { padding: 8px 0; margin: 0 !important; }
/* Seguranca: uma trava por faixa (icone, titulo + estado na mesma linha, descricao, acao) */
.perfil-pagina .pf-corpo .seg-grid { display: block; }
.perfil-pagina .pf-corpo .seg-card { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid hsl(var(--border) / .8); }
.perfil-pagina .pf-corpo .seg-card:last-child { border-bottom: 0; }
.perfil-pagina .pf-corpo .seg-icone { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
/* titulo a esquerda (pode quebrar), estado encostado a direita na MESMA linha: a pilula
   nao cai mais sozinha pra linha de baixo */
.perfil-pagina .pf-corpo .seg-topo { flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.perfil-pagina .pf-corpo .seg-titulo { min-width: 0; }
.perfil-pagina .pf-corpo .seg-status { flex-shrink: 0; white-space: nowrap; }
.perfil-pagina .pf-corpo .seg-desc { margin-bottom: 10px; }
.perfil-pagina .pf-sair-form { margin: 18px 0 0; }
.perfil-pagina .pf-sair { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: hsl(var(--destructive)); font-size: 14px; font-weight: 600; border-radius: 10px; }
.perfil-pagina .pf-sair:hover { background: hsl(var(--destructive) / .08); }
.perfil-pagina .pf-sair i { font-size: 18px; }
@media (max-width: 991.98px) {
    .perfil-pagina .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; }
    .perfil-pagina .pf-lado { position: static; }
    .perfil-pagina .pf-rotulo { margin-top: 22px; }
}
@media (max-width: 767.98px) {
    .perfil-pagina .pagina-cabecalho { display: none; }   /* a capa ja abre a tela, como no app */
    .perfil-pagina .pf-avatar { margin-left: 16px; }
    .perfil-pagina .pf-hero .corpo { padding: 10px 16px 16px; }
}
/* a fonte das taxas ja esta no subtitulo da linha; o botao "Completar cadastro" continua aparecendo */
.perfil-pagina #taxas .info-card-topo { display: none; }
.perfil-pagina #credenciais .pf-corpo > .d-flex.justify-content-between { margin: 12px 0 0 !important; justify-content: flex-start !important; }
.perfil-pagina #credenciais .pf-corpo > .d-flex.justify-content-between > div:empty { display: none; }
.perfil-pagina .pf-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: hsl(var(--muted-foreground)); }

/* ── Menu lateral em VIDRO ESCURO (pedido do Alex, ref. cartao da Cakto): mesma
   tonalidade escura do tema, mas meio transparente -- o que esta atras aparece
   desfocado. Vale nos dois temas.
   - O vidro e o #layoutDrawer_nav (rgba + backdrop-filter); a .drawer fica sem fundo.
   - No celular a gaveta passa por cima da pagina, entao o que aparece atras e a
     propria pagina.
   - No computador o menu nao cobre conteudo: fica sobre uma faixa escura lisa
     (body::before), sem degrade. ── */
#layoutDrawer_nav {
    --foreground: 0 0% 100%;
    --muted-foreground: 213 40% 82%;
    --nav-active-fg: 0 0% 100%;
    background: hsl(224 64% 7% / .62) !important;
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border-right: 1px solid hsl(0 0% 100% / .09);
    box-shadow: inset 1px 0 0 hsl(0 0% 100% / .04), inset 0 1px 0 hsl(0 0% 100% / .06);
}
#layoutDrawer_nav .drawer { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff; }
#layoutDrawer_nav .drawer .nav-link,
#layoutDrawer_nav .drawer .nav-link .nav-link-icon,
#layoutDrawer_nav .drawer .nav-link i,
#layoutDrawer_nav .drawer .drawer-collapse-arrow { color: hsl(0 0% 100% / .88) !important; }
#layoutDrawer_nav .drawer .drawer-menu-heading,
#layoutDrawer_nav .drawer .sidebar-heading { color: hsl(213 40% 82% / .8) !important; }
#layoutDrawer_nav .drawer .nav-link:hover { background: hsl(0 0% 100% / .07) !important; }
html body #layoutDrawer_nav .drawer a.nav-link.active,
html body #layoutDrawer_nav .drawer .drawer-menu-nested a.nav-link.active { background-color: hsl(0 0% 100% / .12) !important; color: #fff !important; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .10); }
#layoutDrawer_nav .drawer a.nav-link.active i,
#layoutDrawer_nav .drawer a.nav-link.active .nav-link-icon { color: hsl(197 82% 66%) !important; }
#layoutDrawer_nav .drawer .nav-link[aria-expanded="true"],
#layoutDrawer_nav .drawer .nav-link[aria-expanded="true"] .nav-link-icon,
#layoutDrawer_nav .drawer .nav-link[aria-expanded="true"] .drawer-collapse-arrow { color: #fff !important; }
#layoutDrawer_nav .drawer .drawer-rodape,
#layoutDrawer_nav .drawer .drawer-menu-divider,
#layoutDrawer_nav .drawer .sidebar-divider { border-color: hsl(0 0% 100% / .10) !important; }
#layoutDrawer_nav .drawer .drawer-menu-heading::after,
#layoutDrawer_nav .drawer .sidebar-heading::after { background: hsl(0 0% 100% / .10) !important; }
@media (max-width: 1199.98px) {
    /* por cima da pagina: um pouco mais opaco pra leitura, e sem a sombra solida antiga */
    #layoutDrawer_nav { background: hsl(224 64% 7% / .72) !important; }
    /* sobre a pagina clara o vidro clareia demais: um pouco mais de tinta pra manter o tom escuro */
    html:not([data-theme="dark"]):not(.dark) #layoutDrawer_nav { background: hsl(224 66% 8% / .82) !important; }
}
@media (min-width: 1200px) {
    /* o "fundo" que o vidro deixa ver: faixa escura com manchas de luz, presa atras do menu */
    body.nav-fixed:not(.drawer-toggled)::before {
        content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: var(--drawer-w); z-index: 0; pointer-events: none;
        /* fundo liso: as manchas de luz (degrade) sairam, o Alex nao curtiu no computador */
        background: hsl(224 70% 8%);
    }
    /* a celula da logo fica em cima do menu: mesmo vidro, logo de texto branco nos dois temas */
    /* a barra do topo e opaca, entao aqui o fundo escuro e a mancha de luz vao junto */
    .top-app-bar .logo { background: linear-gradient(hsl(224 64% 7% / .62), hsl(224 64% 7% / .62)), hsl(224 70% 8%) !important; border-right: 1px solid hsl(0 0% 100% / .09) !important; border-bottom: 0 !important; }
    .top-app-bar .logo .logo-clara { display: none !important; }
    .top-app-bar .logo .logo-escura { display: inline-block !important; }
}

/* ── Menu lateral recolhivel no computador: vira um trilho so de icones.
   html.menu-recolhido troca a largura do menu (--drawer-w), e o resto da casca
   (conteudo, celula da logo, faixa atras do vidro) acompanha pelo mesmo token. ── */
.top-app-bar .menu-recolher { display: none !important; order: 1; margin: 0 8px 0 -16px !important; }
@media (min-width: 1200px) {
    .top-app-bar .menu-recolher { display: inline-flex !important; }
    .nav-fixed #layoutDrawer #layoutDrawer_nav,
    .top-app-bar .logo { transition: width .18s ease; }
    .nav-fixed #layoutDrawer #layoutDrawer_content { transition: padding-left .18s ease; }

    html.menu-recolhido { --drawer-w: 76px; }
    /* o rotulo e texto solto dentro do link: some zerando a fonte; o icone recupera o tamanho */
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-menu .nav > .nav-link,
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-rodape .nav-link {
        font-size: 0 !important; justify-content: center !important; padding: 0 !important; margin: 0 14px 4px !important; gap: 0 !important; width: auto !important;
    }
    html.menu-recolhido #layoutDrawer_nav .drawer .nav-link .nav-link-icon { margin: 0 !important; }
    html.menu-recolhido #layoutDrawer_nav .drawer .nav-link .nav-link-icon i { font-size: 22px !important; }
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-collapse-arrow,
    html.menu-recolhido #layoutDrawer_nav .drawer .nav-link .novo,
    html.menu-recolhido #layoutDrawer_nav .drawer .collapse,
    html.menu-recolhido #layoutDrawer_nav .drawer .collapsing { display: none !important; }
    /* titulo de secao vira so um divisor */
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-menu-heading,
    html.menu-recolhido #layoutDrawer_nav .drawer .sidebar-heading { font-size: 0 !important; padding: 0 !important; margin: 10px 18px !important; height: 1px; background: hsl(0 0% 100% / .10); }
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-menu-heading::after,
    html.menu-recolhido #layoutDrawer_nav .drawer .sidebar-heading::after { display: none !important; }
    /* celula da logo: so a cereja */
    html.menu-recolhido .top-app-bar .logo { padding: 0 !important; justify-content: center; margin-right: 32px !important; }
    html.menu-recolhido .top-app-bar .logo .logo-img { display: none !important; }
    html.menu-recolhido .top-app-bar .logo::before { content: ""; width: 28px; height: 28px; background: var(--cereja) center / contain no-repeat; }
}

/* ── Folhas que sobem da barra de atalhos (celular): o atalho abre as opcoes em
   vez de navegar direto, e a pagina fica desfocada atras (ideia do app da Simplify). ── */
.folha, .folha-fundo { display: none; }
@media (max-width: 767.98px) {
    button.bb-item { background: transparent; border: 0; font-family: inherit; cursor: pointer; }
    .folha-fundo { display: block; position: fixed; inset: 0; z-index: 1034; background: hsl(224 60% 6% / .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .24s ease; }
    .folha-fundo.aberta { opacity: 1; }
    .folha-fundo[hidden], .folha[hidden] { display: none; }
    .folha { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        background: hsl(var(--card)); border-radius: 22px 22px 0 0; border-top: 1px solid hsl(var(--border) / .8);
        box-shadow: 0 -18px 50px hsl(224 60% 6% / .28); transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); will-change: transform; }
    .folha.aberta { transform: translateY(0); }
    .folha-puxador { width: 40px; height: 4px; border-radius: 999px; background: hsl(var(--muted-foreground) / .35); margin: 4px auto 14px; }
    .folha-cabecalho { text-align: center; margin-bottom: 14px; }
    .folha-titulo { font-size: 16px; font-weight: 600; color: hsl(var(--foreground)); }
    .folha-apoio { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
    .folha-lista { display: grid; gap: 8px; }
    .folha-opcao { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border-radius: 14px; background: hsl(var(--muted) / .7); color: hsl(var(--foreground)) !important; text-decoration: none !important; }
    .folha-opcao:active { background: hsl(var(--muted)); transform: scale(.99); }
    .folha-opcao:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
    .folha-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: hsl(var(--ac-tinta)); color: hsl(var(--brand-accent)); }
    .folha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .folha-txt .t { font-size: 15px; font-weight: 600; line-height: 1.3; }
    .folha-txt .s { font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.35; }
    .folha-seta { font-size: 16px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
    body.folha-aberta { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) { .folha, .folha-fundo { transition: none; } }
}

/* ── Carteira em partes (gw3): saldo em cima, menu Saque | Deposito, cada um no seu painel ── */
.cw-saldo-corpo { padding: 22px 24px; }
.cw-saldo .carteira-valor { margin: 14px 0 4px; }
.cw-abas { margin-bottom: 16px; }
button.seg-aba { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.cw-aba[hidden] { display: none !important; }
.cw-painel { overflow: hidden; }
.cw-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.cw-form { padding: 24px; min-width: 0; scroll-margin-top: calc(var(--topo-h) + 16px); }
.cw-lado { padding: 24px; min-width: 0; border-left: 1px solid hsl(var(--border) / .8); background: hsl(var(--muted) / .35); }
.cw-lado-titulo { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: hsl(var(--muted-foreground)); margin: 0 0 6px; }
.cw-lado .carteira-condicoes { margin: 0; padding: 0; border: 0; }
.cw-lado .carteira-condicao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid hsl(var(--border) / .7); }
.cw-lado .carteira-condicao:last-child { border-bottom: 0; }
.cw-passos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.cw-passos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: hsl(var(--foreground) / .86); }
.cw-passos li > span { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: hsl(var(--ac-tinta)); color: hsl(var(--brand-accent)); }
.cw-form #depositForm .campo { margin-bottom: 16px; }
.cw-form .deposito-qr { padding: 8px 0 0; }
@media (max-width: 991.98px) {
    .cw-grid { grid-template-columns: minmax(0, 1fr); }
    .cw-lado { border-left: 0; border-top: 1px solid hsl(var(--border) / .8); }
}
@media (max-width: 767.98px) {
    .cw-saldo-corpo, .cw-form, .cw-lado { padding: 18px; }
    .cw-abas { display: flex; } .cw-abas .seg-aba { flex: 1; justify-content: center; min-height: 42px; }
}

/* ── Navegacao no ritmo do painel da Cakto (gw3): menu mais denso, cartao de
   progresso no topo do menu e barra do topo mais fina. E a ESTRUTURA/ritmo de la;
   a cor segue a nossa (marinho liso, texto branco). ── */
:root { --topo-h: 56px; }
.top-app-bar .titulo-topo { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.top-app-bar .icone-acao, .top-app-bar #themeToggleBtn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
.top-app-bar .icone-acao i { font-size: 19px !important; }
.top-app-bar .conta-botao { height: 40px; }
.top-app-bar .conta-botao .avatar { width: 32px; height: 32px; font-size: 12px; }
@media (min-width: 1200px) { .top-app-bar .logo .logo-img { max-height: 24px !important; } }

/* itens: 36px de altura, 13px, icone de 18px; grupos com subitens recuados */
#layoutDrawer_nav .drawer-menu { padding: 10px 0 !important; }
#layoutDrawer_nav .drawer .drawer-menu .nav .nav-link { min-height: 36px !important; padding: 0 10px !important; margin: 0 10px 2px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; }
#layoutDrawer_nav .drawer .drawer-menu .nav .nav-link .nav-link-icon { width: 18px !important; height: 18px !important; margin-right: 10px !important; }
#layoutDrawer_nav .drawer .drawer-menu .nav .nav-link .nav-link-icon i.ph { font-size: 18px !important; }
#layoutDrawer_nav .drawer .drawer-menu .nav .nav-link .drawer-collapse-arrow i.ph { font-size: 12px !important; }
#layoutDrawer_nav .drawer .drawer-menu .nav .drawer-menu-nested .nav-link { min-height: 32px !important; margin: 0 10px 2px 28px !important; padding: 0 10px !important; font-size: 12.5px !important; border-radius: 8px !important; gap: 8px; color: hsl(0 0% 100% / .74) !important; }
#layoutDrawer_nav .drawer .drawer-menu .nav .drawer-menu-nested .nav-link > i { font-size: 15px; color: inherit !important; }
#layoutDrawer_nav .drawer .drawer-menu-heading, #layoutDrawer_nav .drawer .sidebar-heading { margin: 12px 0 4px !important; padding: 0 20px !important; font-size: 11px !important; }
#layoutDrawer_nav .drawer .drawer-menu-divider { margin: 8px 0 !important; }
html body #layoutDrawer_nav .drawer a.nav-link.active { font-weight: 600 !important; }

/* cartao de progresso (Conquistas) */
.menu-progresso { display: flex; align-items: center; gap: 10px; margin: 2px 10px 12px; padding: 10px; border-radius: 10px; text-decoration: none !important;
    background: hsl(0 0% 100% / .06); border: 1px solid hsl(0 0% 100% / .10); color: #fff !important; transition: background-color .15s ease, border-color .15s ease; }
.menu-progresso:hover { background: hsl(0 0% 100% / .10); border-color: hsl(0 0% 100% / .18); }
.menu-progresso:focus-visible { outline: 2px solid hsl(197 82% 66%); outline-offset: 2px; }
.mp-anel { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; color: hsl(197 82% 70%); background: hsl(197 82% 60% / .16); }
.mp-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-rotulo { font-size: 10.5px; font-weight: 500; line-height: 1.2; color: hsl(213 40% 82%); }
.mp-valor { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meta { font-weight: 500; color: hsl(213 40% 82%); }
.mp-linha { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.mp-barra { flex: 1; height: 4px; border-radius: 99px; background: hsl(0 0% 100% / .14); overflow: hidden; }
.mp-barra > i { display: block; height: 100%; border-radius: 99px; background: hsl(197 82% 60%); }
.mp-pct { font-size: 10.5px; font-weight: 600; color: hsl(213 40% 86%); flex-shrink: 0; }
@media (min-width: 1200px) {
    /* menu recolhido: o cartao vira so o anel, com o progresso desenhado em volta */
    html.menu-recolhido .menu-progresso { margin: 2px 14px 10px; padding: 8px 0; justify-content: center; background: transparent; border-color: transparent; }
    html.menu-recolhido .menu-progresso:hover { background: hsl(0 0% 100% / .07); }
    html.menu-recolhido .menu-progresso .mp-corpo { display: none; }
    html.menu-recolhido .menu-progresso .mp-anel { width: 36px; height: 36px; background:
        radial-gradient(closest-side, hsl(224 70% 8%) 78%, transparent 80% 100%),
        conic-gradient(hsl(197 82% 60%) calc(var(--p) * 1%), hsl(0 0% 100% / .16) 0); }
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-menu .nav > .nav-link,
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-rodape .nav-link { min-height: 40px !important; margin: 0 14px 4px !important; }
    html.menu-recolhido #layoutDrawer_nav .drawer .nav-link .nav-link-icon i.ph { font-size: 20px !important; }
}
@media (max-width: 1199.98px) {
    /* gaveta do celular: alvo de toque maior que no computador */
    #layoutDrawer_nav .drawer .drawer-menu .nav .nav-link { min-height: 44px !important; font-size: 14px !important; }
    #layoutDrawer_nav .drawer .drawer-menu .nav .nav-link .nav-link-icon i.ph { font-size: 20px !important; }
    #layoutDrawer_nav .drawer .drawer-menu .nav .drawer-menu-nested .nav-link { min-height: 40px !important; font-size: 13.5px !important; }
    .menu-progresso { margin: 4px 10px 12px; padding: 12px; }
    .mp-valor { font-size: 13.5px; } .mp-rotulo, .mp-pct { font-size: 11.5px; }
}

/* ── Vitrine de afiliacao (gw3, molde Cakto): grade de cartoes de produto, painel de
   detalhes que entra pela direita (no celular, folha que sobe) e as listas de
   "Minhas afiliacoes" e "Meus produtos". ── */
.seg-conta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: hsl(var(--foreground) / .10); color: hsl(var(--foreground) / .8); }
.seg-conta-alerta { background: hsl(var(--warning) / .16); color: hsl(var(--warning)); }
.vt-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.vt-cartao { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid transparent; border-radius: 14px; overflow: hidden; cursor: pointer;
    background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-1); font-family: inherit; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
[data-theme="dark"] .vt-cartao { box-shadow: none; border-color: hsl(var(--borda) / .7); }
.vt-cartao:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
[data-theme="dark"] .vt-cartao:hover { border-color: hsl(var(--ac) / .45); box-shadow: none; }
.vt-cartao:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
/* capa: a imagem do produto; sem imagem, um fundo na cor do produto com a inicial */
.vt-capa, .vt-thumb { position: relative; display: grid; place-items: center; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, hsl(var(--h) 52% 30%) 0%, hsl(calc(var(--h) + 38) 58% 16%) 100%); }
.vt-capa { width: 100%; aspect-ratio: 1 / 1; }
.vt-capa img, .vt-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vt-capa-letra { font-size: 64px; font-weight: 800; line-height: 1; opacity: .9; letter-spacing: -.03em; }
.vt-selo-meu { position: absolute; z-index: 2; left: 10px; top: 10px; background: hsl(var(--card)) !important; box-shadow: 0 2px 8px hsl(220 40% 10% / .25); }
.vt-corpo { display: flex; flex-direction: column; padding: 12px 14px 14px; min-width: 0; flex: 1; }
.vt-selo-aprovacao { align-self: flex-start; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 6px; margin-bottom: 6px; background: hsl(var(--warning) / .14); color: hsl(var(--warning)); }
.vt-nome { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-desc { font-size: 12px; line-height: 1.4; color: hsl(var(--muted-foreground)); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(12px * 1.4 * 2); }
.vt-recebe-rotulo { font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-top: 10px; }
.vt-recebe { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: hsl(var(--success)); }
.vt-pct { font-size: 12px; font-weight: 500; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
.vt-rodape { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin-top: auto; padding-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* listas (minhas afiliacoes e meus produtos) */
.vt-lista { display: flex; flex-direction: column; gap: 12px; }
.vt-linha { padding: 18px 20px; }
.vt-linha-topo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vt-thumb { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; font-size: 20px; font-weight: 800; }
.vt-thumb-g { width: 72px; height: 72px; border-radius: 14px; font-size: 28px; }
.vt-linha-txt { flex: 1; min-width: 0; }
.vt-linha-nome { font-size: 15px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px 32px; margin: 16px 0; padding: 14px 0 0; border-top: 1px solid hsl(var(--border) / .8); }
.vt-numeros .v { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; color: hsl(var(--foreground)); }
.vt-numeros .v.stat-ok { color: hsl(var(--success)); }
.vt-linha > .aviso { margin-top: 14px; }
.vt-link { gap: 8px; }
.vt-link > span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; user-select: all; }
.vt-link .btn { flex-shrink: 0; min-height: 32px !important; }

/* formulario do produtor */
.vt-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 260px) auto; gap: 16px 24px; align-items: start; margin-top: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--border) / .8); }
.vt-chave { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 !important; cursor: pointer; }
.vt-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vt-chave-trilho { width: 40px; height: 24px; border-radius: 999px; flex-shrink: 0; position: relative; background: hsl(var(--foreground) / .22); transition: background-color .15s ease; margin-top: 1px; }
.vt-chave-trilho::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px hsl(220 40% 10% / .35); transition: transform .15s ease; }
.vt-chave input:checked + .vt-chave-trilho { background: hsl(var(--primary)); }
.vt-chave input:checked + .vt-chave-trilho::after { transform: translateX(16px); }
.vt-chave input:focus-visible + .vt-chave-trilho { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.vt-chave-txt { display: flex; flex-direction: column; min-width: 0; }
.vt-chave-txt .t { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.3; }
.vt-chave-txt .s { font-size: 12px; font-weight: 400; color: hsl(var(--muted-foreground)); line-height: 1.35; }
.vt-comissao .form-label { margin-bottom: 4px !important; }
.vt-comissao-campo { position: relative; }
.vt-comissao-campo input { padding-right: 34px !important; min-height: 40px; }
.vt-comissao-campo > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); font-weight: 600; pointer-events: none; }
.vt-previa { margin-top: 6px; }
.vt-salvar { align-self: start; margin-top: 23px; min-height: 40px !important; }
.vt-afiliados { margin-top: 18px; padding-top: 14px; border-top: 1px solid hsl(var(--border) / .8); }
.vt-afiliados-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.vt-afiliados-vazio { padding: 8px 0 0; }
.vt-afiliado { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid hsl(var(--border) / .8); font-size: 14px; }
.vt-afiliado:last-child { border-bottom: 0; padding-bottom: 0; }
.vt-afiliado-quem { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.vt-afiliado-acoes { display: flex; gap: 8px; }
.vt-afiliado-acoes form { margin: 0; }

/* painel de detalhes: entra pela direita no computador */
.vt-fundo { position: fixed; inset: 0; z-index: 1044; background: hsl(224 60% 6% / .45); opacity: 0; transition: opacity .22s ease; }
.vt-fundo.aberto { opacity: 1; }
.vt-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045; width: min(440px, 100vw); display: flex; flex-direction: column;
    background: hsl(var(--card)); border-left: 1px solid hsl(var(--borda-elevada)); box-shadow: var(--shadow-3);
    transform: translateX(105%); transition: transform .26s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.vt-painel.aberto { transform: none; }
.vt-painel[hidden], .vt-fundo[hidden] { display: none; }
.vt-puxador { display: none; }
.vt-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid hsl(var(--border) / .8); flex-shrink: 0; }
.vt-painel-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.vt-detalhe-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.vt-detalhe-nome { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: hsl(var(--foreground)); overflow-wrap: anywhere; }
.vt-detalhe-desc { margin-bottom: 16px; white-space: pre-line; }
.vt-ganho { padding: 14px 16px; border-radius: 12px; background: hsl(var(--success) / .10); }
[data-theme="dark"] .vt-ganho { background: hsl(var(--success) / .12); }
.vt-ganho-valor { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: hsl(var(--success)); margin: 2px 0 4px; }
.vt-ganho-valor span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
.vt-ganho .t-legenda { color: hsl(var(--foreground) / .72); }
.vt-detalhe-acao { margin-top: 20px; }
.vt-detalhe-acao form { margin: 0; }
body.vt-painel-aberto { overflow: hidden; }

@media (max-width: 1199.98px) {
    .vt-config { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vt-salvar { margin-top: 0; justify-self: start; }
}
@media (max-width: 767.98px) {
    .vitrine-pagina .seg-abas { overflow-x: auto; scrollbar-width: none; }
    .vitrine-pagina .seg-abas::-webkit-scrollbar { display: none; }
    .vitrine-pagina .seg-aba { flex: 0 0 auto; padding: 0 12px; white-space: nowrap; }
    .vt-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vt-corpo { padding: 10px 10px 12px; }
    .vt-nome { font-size: 13px; }
    .vt-desc { font-size: 11.5px; }
    .vt-recebe { font-size: 17px; }
    .vt-capa-letra { font-size: 48px; }
    .vt-selo-meu { left: 6px; top: 6px; }
    .vt-linha { padding: 14px; }
    .vt-linha-topo { flex-wrap: wrap; }
    .vt-linha-topo .pilula { margin-left: 62px; }
    .vt-linha-nome { white-space: normal; }
    .vt-numeros { grid-template-columns: 1fr 1fr; gap: 12px; }
    .vt-link { flex-wrap: wrap; padding: 10px 12px; }
    .vt-link > span { white-space: normal; overflow-wrap: anywhere; flex: 1 1 100%; }
    .vt-link .btn { width: 100%; min-height: 40px !important; }
    .vt-config { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .vt-salvar { width: 100%; }
    .vt-afiliado-acoes { width: 100%; }
    .vt-afiliado-acoes form, .vt-afiliado-acoes .btn { flex: 1; width: 100%; }
    /* o painel vira folha que sobe do rodape, como as da barra de atalhos */
    .vt-fundo { z-index: 1044; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .vt-painel { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid hsl(var(--border) / .8); border-radius: 22px 22px 0 0;
        box-shadow: 0 -18px 50px hsl(224 60% 6% / .28); transform: translateY(105%); }
    .vt-puxador { display: block; margin: 8px auto 0; }
    .vt-painel-topo { padding: 8px 8px 10px 20px; }
    body.vt-painel-aberto .barra-fixa { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vt-painel, .vt-fundo, .vt-cartao { transition: none; } }
@media (max-width: 767.98px) {
    /* nome ocupa a linha ao lado da miniatura; o status desce pra linha de baixo */
    .vt-linha-txt { flex: 1 1 calc(100% - 62px); }
    .vt-linha-topo .pilula { margin-left: 62px; margin-top: -4px; }
}

/* ── PIN de saque na Carteira: rotulo com "Esqueci meu PIN" e o aviso de cadastro ── */
.cw-pin-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cw-pin-rotulo .link-acao { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.cw-pin-cadastro { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 16px; border-radius: 14px; background: hsl(var(--ac-tinta)); border: 1px solid hsl(var(--brand-accent) / .25); }
.cw-pin-cadastro .txt { flex: 1; min-width: 0; }
.cw-pin-cadastro .t { font-weight: 600; font-size: 14px; color: hsl(var(--foreground)); }
.cw-pin-cadastro .s { font-size: 13px; line-height: 1.4; color: hsl(var(--foreground) / .74); }
@media (max-width: 575.98px) { .cw-pin-cadastro { flex-wrap: wrap; } .cw-pin-cadastro .btn { width: 100%; } }

/* ── Avisos (toast do SweetAlert) acompanhando o tema: o fundo vinha branco fixo e,
   no escuro, o texto claro sumia; e a regra global de <label> fazia aparecer a caixinha
   de selecao que o SweetAlert deixa escondida. ── */
.custom-swal-theme.swal2-popup { background: hsl(var(--card)) !important; color: hsl(var(--foreground)) !important; border: 1px solid hsl(var(--border) / .9); box-shadow: 0 14px 40px hsl(224 60% 6% / .28) !important; }
.custom-swal-theme .swal2-title, .custom-swal-theme .swal2-html-container { color: hsl(var(--foreground)) !important; }
.swal2-toast .swal2-checkbox, .swal2-toast .swal2-radio, .swal2-toast .swal2-input, .swal2-toast .swal2-file, .swal2-toast .swal2-range, .swal2-toast .swal2-select, .swal2-toast .swal2-textarea { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ÁREA DO ADMINISTRADOR E DA GERÊNCIA (rodada 7)
   As telas de admin passam a usar as mesmas pecas do cliente (cabecalho de
   pagina, faixa de numeros, .tabela com cartoes no celular, pilulas, modal).
   Aqui fica so o que o cliente ainda nao tinha.
   ══════════════════════════════════════════════════════════════════════════ */
/* Barra do topo: "Administração / Usuários" */
.top-app-bar .titulo-topo .area { font-weight: 500; color: hsl(var(--muted-foreground)); }
.top-app-bar .titulo-topo .area::after { content: "/"; margin: 0 8px; opacity: .55; }
/* Rotulo de grupo acima de uma faixa de numeros */
.adm-faixa-rotulo { margin: 0 0 8px 2px; }
.kpi-faixa + .adm-faixa-rotulo { margin-top: 4px; }
/* Faixa de numeros com linha de apoio ou link embaixo do valor */
.kpi-faixa .t-legenda { margin-top: 4px; font-weight: 400; }
.kpi-faixa .link-acao { margin-top: 6px; font-size: 12px; }
.kpi-faixa .link-acao i { font-size: 12px; }

/* ── Admin › listas (usuarios, saques, financeiro) ─────────────────────── */
/* Celula com avatar + nome + linha de apoio */
.cel-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cel-usuario .cel-dupla { min-width: 0; }
.adm .cel-dupla .corta, .adm .tabela .cel-dupla .corta { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .apagado { color: hsl(var(--muted-foreground)); }
/* Acoes da linha: botoes de icone + menu "mais" */
.acoes-linha { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.acoes-linha .btn-icone.acao-destaque { color: hsl(var(--brand-accent)) !important; background: hsl(var(--ac-tinta)) !important; }
.acoes-linha .btn-icone.acao-destaque:hover { background: hsl(var(--brand-accent) / .18) !important; }
.acoes-linha .dropdown { display: inline-flex; }
/* Menu suspenso fora da barra do topo (acoes de linha) */
.menu-acoes { border: 1px solid hsl(var(--borda-elevada)) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-3) !important;
    background: hsl(var(--popover)) !important; padding: 4px !important; min-width: 200px; margin: 4px 0 !important; z-index: 1060; }
.menu-acoes .dropdown-item { display: flex !important; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px !important; border: 0; border-radius: 8px;
    background: transparent; font-size: 13px; font-weight: 500; color: hsl(var(--foreground)) !important; text-align: left; width: 100%; }
.menu-acoes .dropdown-item i { font-size: 16px; color: hsl(var(--muted-foreground)); }
.menu-acoes .dropdown-item:hover, .menu-acoes .dropdown-item:focus-visible { background: hsl(var(--accent)) !important; }
.menu-acoes .dropdown-item.perigo, .menu-acoes .dropdown-item.perigo i { color: hsl(var(--destructive)) !important; }
.menu-acoes .dropdown-divider { margin: 4px 0 !important; border-color: hsl(var(--border)) !important; opacity: 1; }
/* Cartao de item no celular (versao em cartao das tabelas do admin) */
.adm-cartao { background: hsl(var(--muted) / .55); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
[data-theme="dark"] .adm-cartao { background: hsl(var(--sup2) / .6); }
.adm-cartao:last-of-type { margin-bottom: 0; }
.adm-cartao-topo { display: flex; align-items: center; gap: 10px; }
.adm-cartao-topo .txt { flex: 1; min-width: 0; }
.adm-cartao-topo .t { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-cartao-topo .t-legenda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-cartao-pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.adm-cartao .kv { padding: 7px 0; font-size: 12px; border-bottom-color: hsl(var(--border) / .7); }

/* ── Admin › modais ────────────────────────────────────────────────────── */
/* Formulario que abraca corpo e rodape do modal: nao vira uma caixa a mais no meio do flex */
.modal-content > form, .modal-footer > form { display: contents; }
/* Ficha: grade de rotulo + valor */
.dados-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.dados-grade.dados-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dados-grade > div { min-width: 0; }
.dados-grade .r { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
.dados-grade .v { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); overflow-wrap: anywhere; min-height: 20px; }
.dados-grade .v.mono, .form-control.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px !important; }
.t-rotulo.modal-secao { display: flex; align-items: center; gap: 6px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
.t-rotulo.modal-secao i { font-size: 14px; }
@media (max-width: 767.98px) { .dados-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } }
@media (max-width: 575.98px) { .dados-grade.dados-grade-2 { grid-template-columns: minmax(0, 1fr); } }
/* Miniaturas dos documentos */
.docs-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.doc-miniatura { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card));
    font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); text-align: center; cursor: pointer; min-width: 0; }
.doc-miniatura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: hsl(var(--muted)); display: block; }
button.doc-miniatura:hover { border-color: hsl(var(--brand-accent) / .5); color: hsl(var(--foreground)); }
button.doc-miniatura:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.doc-miniatura.vazia { cursor: default; justify-content: center; align-items: center; min-height: 96px; border-style: dashed; background: transparent; }
.doc-miniatura.vazia i { font-size: 22px; }
.modal-foto-doc .modal-body img { max-height: 72vh; border-radius: var(--radius-md); }
@media (max-width: 479.98px) { .docs-grade { gap: 8px; } .doc-miniatura { font-size: 11px; padding: 4px 4px 6px; } }
/* Campo com botao ao lado (gerar token, copiar) */
.campo-acao { display: flex; gap: 8px; align-items: stretch; }
.campo-acao > .form-control { flex: 1; min-width: 0; }
.campo-acao > .btn { flex-shrink: 0; padding: 0 12px !important; }
/* Interruptor com o rotulo ao lado (o tema base deixava o rotulo sem cor e sem alinhamento) */
.chave-linha { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; min-height: 44px; font-size: 14px !important; font-weight: 500 !important; color: hsl(var(--foreground)) !important; cursor: pointer; }
.chave-linha > span { min-width: 0; }
.form-check-input[role="switch"], .form-switch .form-check-input { width: 40px !important; height: 22px !important; margin: 0 !important; flex-shrink: 0; border-radius: 999px !important; cursor: pointer;
    background-color: hsl(var(--muted-foreground) / .35) !important; border: 0 !important; box-shadow: none !important; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out; min-height: 0 !important; padding: 0 !important; }
.form-check-input[role="switch"]:checked, .form-switch .form-check-input:checked { background-color: hsl(var(--brand-accent)) !important; background-position: right center !important; }
.form-check-input[role="switch"]:focus-visible, .form-switch .form-check-input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.form-check-input[role="switch"]:disabled, .form-switch .form-check-input:disabled { opacity: .5; cursor: not-allowed; }
.form-text { font-size: 12px !important; line-height: 1.4; color: hsl(var(--muted-foreground)) !important; margin-top: 4px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: hsl(var(--destructive)) !important; }
.modal .aviso ul { font-size: 12px; line-height: 1.5; }
/* duas pilulas na mesma celula (conta + cadastro): lado a lado se couber, empilhadas se nao */
.pilulas-pilha { display: flex; flex-wrap: wrap; gap: 4px; }
.adm .cel-usuario .cel-dupla .corta { max-width: 190px; }
@media (min-width: 768px) { .linha-meio-a-meio > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } }
/* Envio de imagem (componente x-image-upload) nas telas do admin: o componente traz cores
   proprias (faixa branca, X vermelho, borda cinza fixa) que nao acompanham o tema. */
.adm .dropzone-container { text-align: left; }
.adm .form-group > label { display: block; }
.adm .dropzone-area { border: 1.5px dashed hsl(var(--input)) !important; border-radius: var(--radius-md) !important; background: hsl(var(--muted) / .45); padding: 12px !important; overflow: hidden; }
.adm .dropzone-area:hover { background: hsl(var(--accent)) !important; border-color: hsl(var(--brand-accent) / .6) !important; }
.adm .dropzone-text { position: static !important; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500 !important; color: hsl(var(--muted-foreground)) !important; }
.adm .dropzone-text p { margin: 0; }
.adm .dropzone-text img { opacity: .55; }
[data-theme="dark"] .adm .dropzone-text img { filter: invert(1); }
.adm .image-preview { max-width: 100% !important; max-height: 100% !important; object-fit: contain; margin-top: 0 !important; border-radius: 8px !important; }
.adm .file-info { position: static !important; display: flex !important; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px !important; border-radius: var(--radius-sm) !important;
    background: hsl(var(--muted)) !important; box-shadow: none !important; font-size: 12px !important; color: hsl(var(--foreground)) !important; min-width: 0; }
.adm .file-info[style*="display: none"] { display: none !important; }
.adm .file-info .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.adm .delete-btn { position: static !important; width: 24px !important; height: 24px !important; flex-shrink: 0; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 6px !important;
    background: transparent; color: hsl(var(--destructive)) !important; font-size: 12px !important; line-height: 1; display: inline-grid; place-items: center; }
.adm .delete-btn:hover { background: hsl(var(--destructive) / .12); }
.adm .progress-bar-container { position: static !important; background: hsl(var(--muted)) !important; }
.adm .progress-bar { background: hsl(var(--brand-accent)) !important; }
/* miniaturas de documento em pagina inteira: nao esticam a largura toda */
.docs-grade-pagina { max-width: 720px; }
/* formularios de um botao so dentro das acoes do cabecalho */
.pagina-acoes > form { display: contents; }
.pagina-cabecalho .pagina-titulo p:has(.link-acao) { display: block !important; }
/* acoes de linha com texto (aprovar / rejeitar) */
.acoes-linha.acoes-texto { gap: 6px; }
.tabela .mono, .kv .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.tabela .cel-dupla .mono.corta { max-width: 200px; }
.adm-cartao-valor { font-size: 15px; font-weight: 700; color: hsl(var(--foreground)); white-space: nowrap; }
.adm-cartao-acoes { display: flex; gap: 8px; margin-top: 10px; }
.adm-cartao-acoes .btn { flex: 1; }
.tabela-rodape .paginas { display: flex; gap: 6px; }
@media (max-width: 767.98px) { .tabela-rodape .paginas { justify-content: center; } .tabela-rodape .paginas .btn { flex: 1; } }
.saque-resumo { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: 2px 14px; }
.saque-resumo .kv .forte { font-weight: 700; }
.modal-body > p:last-child { margin-bottom: 0; }
.saque-resumo { margin-top: 12px; }
/* ── Admin › formularios de configuracao ───────────────────────────────── */
.form-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
@media (max-width: 575.98px) { .form-acoes .btn { flex: 1; } }
.campo-erro { font-size: 12px; line-height: 1.4; color: hsl(var(--destructive)); margin-top: 4px; }

/* ── Admin › tabelas de relatorio (financeiro) ─────────────────────────── */
/* Faixa de numeros com 2 ou 3 itens */
.kpi-faixa.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-faixa.kpi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tabela com muitas colunas: menos respiro lateral */
.tabela-densa th, .tabela-densa td { padding-left: 8px !important; padding-right: 8px !important; }
.tabela-densa th:first-child, .tabela-densa td:first-child { padding-left: 0 !important; }
.tabela-densa th:last-child, .tabela-densa td:last-child { padding-right: 0 !important; }
.adm .tabela td .form-select-sm, .adm .tabela td .form-select { min-height: 36px; padding: 6px 28px 6px 10px !important; font-size: 13px !important; min-width: 128px; }
.tabela .quebra { white-space: normal; min-width: 160px; max-width: 260px; font-size: 12px; line-height: 1.4; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.adm .tabela td > i.ph { font-size: 18px; color: hsl(var(--muted-foreground)); }
/* Caixa de busca do DataTables (listas sem busca no servidor) */
.dataTables_wrapper .dataTables_filter { float: none !important; text-align: right; margin: 0 0 12px; }
.dataTables_wrapper .dataTables_filter label { font-size: 0 !important; margin: 0 !important; display: inline-block !important; }
.dataTables_wrapper .dataTables_filter input { width: 260px; max-width: 100%; margin: 0 !important; min-height: 40px; font-size: 13px !important;
    padding-left: 36px !important; border: 1px solid hsl(var(--input)) !important; color: hsl(var(--foreground)) !important;
    background: hsl(var(--card)) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3e%3cpath fill='%237a8699' d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72a72.08 72.08 0 0 1-72-72Z'/%3e%3c/svg%3e") no-repeat 12px center !important; }
/* Tabela que vira pilha de cartoes no celular SEM duplicar as linhas no HTML: a mesma <tr>
   muda de desenho (cada celula vira "rotulo ........ valor", o rotulo vem de data-rotulo).
   Serve pras listas grandes do financeiro, onde o JS da tela mexe na propria linha. */
@media (max-width: 767.98px) {
    .tabela-rolagem:has(> .dataTables_wrapper .tabela-empilha), .tabela-rolagem:has(> .tabela-empilha) { overflow: visible; }
    table.tabela-empilha, table.tabela-empilha tbody { display: block; width: 100% !important; }
    table.tabela-empilha thead { display: none; }
    table.tabela-empilha tbody tr { display: block; background: hsl(var(--muted) / .55); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
    [data-theme="dark"] table.tabela-empilha tbody tr { background: hsl(var(--sup2) / .6); }
    table.tabela-empilha tbody tr:hover td { background: transparent !important; }
    table.tabela-empilha tbody td { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 !important; border: 0 !important;
        border-bottom: 1px solid hsl(var(--border) / .7) !important; white-space: normal !important; text-align: right !important; font-size: 13px !important; min-height: 34px; max-width: none !important; }
    table.tabela-empilha tbody td:last-child { border-bottom: 0 !important; }
    table.tabela-empilha tbody td::before { content: attr(data-rotulo); flex-shrink: 0; text-align: left; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; }
    table.tabela-empilha tbody td.cel-topo { font-size: 14px !important; font-weight: 600; justify-content: flex-start; text-align: left !important; }
    table.tabela-empilha tbody td.cel-topo::before { content: none; }
    table.tabela-empilha tbody td .corta, table.tabela-empilha tbody td.corta { max-width: 190px !important; }
    table.tabela-empilha tbody td .cel-dupla { text-align: right; }
    table.tabela-empilha tbody td.cel-topo .cel-dupla { text-align: left; }
    table.tabela-empilha .quebra { max-width: 62%; text-align: right; }
    table.tabela-empilha tbody td .form-select { width: auto; max-width: 60%; }
    table.tabela-empilha tbody td.dataTables_empty { justify-content: center; text-align: center !important; }
    table.tabela-empilha tbody td.dataTables_empty::before { content: none; }
    .dataTables_wrapper:has(.tabela-empilha) .tabela-rodape { display: flex !important; flex-direction: column; align-items: center; border-top: 0; }
    .dataTables_wrapper:has(.tabela-empilha) .dataTables_paginate { flex-wrap: wrap; justify-content: center; }
    .dataTables_wrapper .dataTables_filter { text-align: left; }
    .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .kpi-faixa.kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-faixa.kpi-3 > .kpi-cartao:nth-child(3) { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid hsl(var(--border) / .8) !important; }
}
/* lista numerada curta (top 3) */
.lista-ranque { display: grid; gap: 0; }
.lista-ranque .item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.lista-ranque .item:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-ranque .pos { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; font-weight: 700; background: hsl(var(--ac-tinta)); color: hsl(var(--brand-accent)); font-variant-numeric: tabular-nums; }
.lista-ranque .nome { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--foreground)); }
.lista-ranque .valor { font-size: 14px; font-weight: 600; white-space: nowrap; color: hsl(var(--foreground)); }
/* modal de detalhes da transacao (admin): etiqueta do meio de pagamento e bloco do pagamento */
.tx-meio-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; padding: 0 8px; margin-right: 10px; border-radius: 6px; background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.tx-meio-chip i { font-size: 14px; }
.tx-pagamento { font-size: 13px; color: hsl(var(--foreground)); }
.tx-pagamento .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tx-valor.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.tx-linha > .badge { flex-shrink: 0; }
@media (max-width: 767.98px) {
    table.tabela-empilha tbody tr { display: flex; flex-direction: column; }
    table.tabela-empilha tbody td.cel-topo { order: -1; }
    table.tabela-empilha tbody td.corta { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (max-width: 767.98px) {
    table.tabela-empilha tbody td::before { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
    table.tabela-empilha tbody td.corta { max-width: none !important; }
    table.tabela-empilha tbody td.mono { word-break: break-all; }
}
/* em tela de toque a dica (tooltip) fica presa depois do toque: nao mostra */
@media (hover: none) { .tooltip { display: none !important; } }
.adm .tabela td.corta { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.tabela-densa td.mono.corta { max-width: 150px; }
/* lista curta de instrucoes */
.lista-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-passos li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: hsl(var(--foreground)); }
.lista-passos li i { font-size: 18px; margin-top: 1px; color: hsl(var(--brand-accent)); flex-shrink: 0; }
.aviso-bad strong, .aviso-ok strong { color: inherit; }
.aviso ul { font-size: 12px; line-height: 1.55; }
/* titulo de grupo dentro de um formulario longo */
.form-grupo-titulo { display: flex; align-items: center; gap: 6px; margin: 22px 0 12px; }
.form-grupo-titulo:first-of-type, .form-grupo-titulo.mt-0 { margin-top: 0; }
.form-grupo-titulo i { font-size: 14px; }
/* lista de interruptores (um por linha, com divisoria) */
.chaves-lista { display: grid; }
.chaves-lista .chave-linha { justify-content: space-between; flex-direction: row-reverse; padding: 4px 0; border-bottom: 1px solid hsl(var(--border)); }
.chaves-lista .chave-linha:last-child { border-bottom: 0; }
input[type="color"].form-control-color { width: 72px !important; min-height: 44px; padding: 4px !important; cursor: pointer; }

/* ── Admin › adquirentes ───────────────────────────────────────────────── */
.adm .card-header { border-bottom: 0 !important; padding: 20px 20px 0 !important; }
.adm .card-header .card-title { font-size: 16px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; color: hsl(var(--foreground)); margin: 0; }
.adm .card-header + .card-body { padding-top: 14px !important; }
/* campos lado a lado com a mesma altura de rotulo */
.form-row-aligned { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.form-row-aligned .form-group { min-width: 0; }
.form-grupo-titulo .apoio { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; }
.adq-lista { display: grid; }
.adq-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.adq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.adq-item-txt { flex: 1; min-width: 0; }
.adq-item-txt .t { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }
.adq-item-txt .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.adq-item-pilulas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adq-item .btn { min-width: 112px; }
@media (max-width: 575.98px) { .adq-item { flex-wrap: wrap; } .adq-item-txt { flex: 1 1 50%; } .adq-item form { flex: 1 1 100%; display: block !important; } .adq-item .btn { width: 100%; } }
/* grupo "D+ [numero]" */
.input-group { display: flex; align-items: stretch; flex-wrap: nowrap; }
.input-group > .input-group-text { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid hsl(var(--input)); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 600; }
.input-group > .input-group-text + .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; flex: 1; min-width: 0; }
/* campo que acabou de ser preenchido pelo script */
.campo-piscou { border-color: hsl(var(--success)) !important; box-shadow: 0 0 0 3px hsl(var(--success) / .18) !important; transition: border-color .3s ease, box-shadow .3s ease; }
.adm .form-control[readonly] { background-color: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; }
.acoes-linha .btn-icone.acao-perigo { color: hsl(var(--destructive)) !important; }
.acoes-linha .btn-icone.acao-perigo:hover { background: hsl(var(--destructive) / .1) !important; }

/* ── Admin › material de apoio, landing, conquistas ────────────────────── */
/* par de botoes lado a lado ocupando a largura (no lugar do .btn-group colado) */
.botoes-par { display: flex !important; gap: 8px; }
.botoes-par > .btn { flex: 1; border-radius: var(--radius-sm) !important; }
/* cartao "adicionar" (tracejado) */
.cartao-adicionar { width: 100%; height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed hsl(var(--input)); border-radius: var(--radius-lg);
    background: transparent; color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 600; cursor: pointer; }
.cartao-adicionar i { font-size: 28px; }
.cartao-adicionar:hover { border-color: hsl(var(--brand-accent) / .6); color: hsl(var(--brand-accent)); background: hsl(var(--ac-tinta) / .5); }
.cartao-adicionar:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
/* area de soltar imagem do Dropzone (cartao novo de material) */
.adm .dropzone.dz-wrapper { min-height: 130px; border: 1.5px dashed hsl(var(--input)) !important; border-radius: var(--radius-md); padding: 10px; background: hsl(var(--muted) / .45) !important; color: hsl(var(--muted-foreground)); }
.adm .dropzone .dz-message { margin: 2.2em 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.adm textarea.form-control { min-height: 84px; }
/* admin › conquistas: miniatura da placa ao lado dos campos */
.cq-admin { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; }
.cq-admin-placa { display: grid; gap: 8px; justify-items: center; }
@media (max-width: 419.98px) { .cq-admin { grid-template-columns: minmax(0, 1fr); } .cq-admin-placa { max-width: 120px; } }
.paginacao-servidor { margin-top: 12px; }
.paginacao-servidor nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: hsl(var(--muted-foreground)); }
/* titulos de secao dos componentes x-section-title / x-subsection-title nas telas do admin */
.adm .card-body > .col-12 > h5.border-bottom { font-size: 16px !important; font-weight: 600 !important; border-bottom: 0 !important; padding-bottom: 0 !important; margin: 0 0 8px !important; color: hsl(var(--foreground)); }
.adm .card-body > .col-12:first-child { margin-top: 0 !important; }
.adm .card-body > .col-12 > h6.text-muted { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)) !important; margin: 18px 0 4px !important; padding-top: 14px; border-top: 1px solid hsl(var(--border)); }

/* ── Gerencia › material: blocos recolhiveis (accordion) no desenho do sistema ── */
.material-lista { display: grid; gap: 8px; }
.adm .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: hsl(var(--foreground)); }
.adm .accordion-item { background: hsl(var(--card)) !important; border: 0 !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-1); overflow: hidden; }
[data-theme="dark"] .adm .accordion-item { box-shadow: none; border: 1px solid hsl(var(--borda) / .7) !important; }
.adm .accordion-button { background: transparent !important; color: hsl(var(--foreground)) !important; font-size: 14px; font-weight: 600; padding: 16px 20px; box-shadow: none !important; }
.adm .accordion-button::after { filter: none; opacity: .6; width: 14px; height: 14px; background-size: 14px; }
[data-theme="dark"] .adm .accordion-button::after { filter: invert(1); }
.adm .accordion-button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.adm .accordion-body { padding: 0 20px 20px; color: hsl(var(--foreground)); }
.material-img { max-width: 100%; max-height: 140px; width: auto; height: auto; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
.adm textarea.text-area { width: 100%; min-height: 120px; resize: vertical; }
.codigo .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.adm .accordion-header { margin: 0 !important; }
/* bloco de codigo/link com botao: no celular o botao desce pra linha de baixo */
@media (max-width: 575.98px) {
    .codigo.codigo-acao { flex-wrap: wrap; padding: 10px 12px; }
    .codigo.codigo-acao > span { white-space: normal; overflow-wrap: anywhere; flex: 1 1 100%; }
    .codigo.codigo-acao > .btn { width: 100%; }
}
/* botao "Escolher arquivo" do campo de arquivo: acompanha o tema (no escuro vinha branco) */
input[type="file"].form-control { padding: 0 12px 0 0 !important; line-height: 42px; overflow: hidden; }
input[type="file"].form-control::file-selector-button { height: 42px; margin: 0 12px 0 0; padding: 0 14px; border: 0; border-right: 1px solid hsl(var(--input)); background: hsl(var(--muted)); color: hsl(var(--foreground)); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
input[type="file"].form-control:hover::file-selector-button { background: hsl(var(--accent)); }
/* rodape de formulario no celular: botoes empilhados, o principal em cima */
@media (max-width: 575.98px) { .form-acoes { flex-direction: column-reverse; } .form-acoes .btn { flex: none; width: 100%; } }
/* Menu recolhido (trilho): o icone do grupo acende quando a tela aberta e um subitem dele
   (vale pro cliente e pro admin; antes nada ficava marcado no trilho nessas telas) */
@media (min-width: 1200px) {
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-menu .nav > .nav-link[data-bs-toggle="collapse"]:has(+ .collapse a.nav-link.active) { background-color: hsl(0 0% 100% / .12) !important; color: #fff !important; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .10); }
    html.menu-recolhido #layoutDrawer_nav .drawer .drawer-menu .nav > .nav-link[data-bs-toggle="collapse"]:has(+ .collapse a.nav-link.active) .nav-link-icon { color: hsl(197 82% 66%) !important; }
}

/* ── Admin › Saidas: 12 colunas arrumadas em duas alturas no computador ──
   O HTML continua com as 12 celulas na mesma ordem (o script da tela mexe na 5a celula e o
   DataTables tem largura pra 12 colunas). So o desenho muda: a linha vira uma grade. */
@media (min-width: 768px) {
    table.tabela-saidas, table.tabela-saidas thead, table.tabela-saidas tbody { display: block; width: 100% !important; }
    table.tabela-saidas tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, .8fr) 104px minmax(0, 1.2fr) 84px minmax(0, .85fr) 132px; column-gap: 14px; align-items: center; border-bottom: 1px solid hsl(var(--border)); }
    table.tabela-saidas tbody tr:last-child { border-bottom: 0; }
    table.tabela-saidas th, table.tabela-saidas td { width: auto !important; min-width: 0; border: 0 !important; padding: 0 !important; grid-row: 1 / span 2; overflow: hidden; text-overflow: ellipsis; }
    table.tabela-saidas thead tr { padding: 0 0 10px; align-items: end; }
    table.tabela-saidas tbody tr { padding: 10px 0; row-gap: 1px; }
    table.tabela-saidas tbody tr:hover { background: hsl(var(--muted) / .55); }
    table.tabela-saidas tbody tr:hover td { background: transparent !important; }
    /* coluna 1: User ID em cima, Nome embaixo */
    table.tabela-saidas tr > :nth-child(1) { grid-column: 1; grid-row: 1; }
    table.tabela-saidas tr > :nth-child(6) { grid-column: 1; grid-row: 2; }
    /* coluna 2: Transacao ID em cima, Documento embaixo */
    table.tabela-saidas tr > :nth-child(2) { grid-column: 2; grid-row: 1; max-width: none !important; }
    table.tabela-saidas tr > :nth-child(8) { grid-column: 2; grid-row: 2; }
    /* coluna 3: Valor em cima, Valor liquido embaixo */
    table.tabela-saidas tr > :nth-child(3) { grid-column: 3; grid-row: 1; }
    table.tabela-saidas tr > :nth-child(4) { grid-column: 3; grid-row: 2; }
    table.tabela-saidas tr > :nth-child(10) { grid-column: 4; }   /* Taxa */
    table.tabela-saidas tr > :nth-child(5)  { grid-column: 5; }   /* Status */
    table.tabela-saidas tr > :nth-child(7)  { grid-column: 6; }   /* Chave PIX */
    table.tabela-saidas tr > :nth-child(9)  { grid-column: 7; white-space: normal; line-height: 1.3; }   /* Data (quebra em data / hora) */
    table.tabela-saidas tr > :nth-child(11) { grid-column: 8; max-width: none; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }   /* Resposta */
    table.tabela-saidas tr > :nth-child(12) { grid-column: 9; overflow: visible; }   /* Acoes */
    /* a linha de baixo de cada par fica menor e apagada */
    table.tabela-saidas tbody td:nth-child(6), table.tabela-saidas tbody td:nth-child(8), table.tabela-saidas tbody td:nth-child(4) { font-size: 12px !important; color: hsl(var(--muted-foreground)) !important; font-weight: 400; max-width: none !important; }
    table.tabela-saidas thead th:nth-child(6), table.tabela-saidas thead th:nth-child(8), table.tabela-saidas thead th:nth-child(4) { font-weight: 500 !important; opacity: .8; }
    table.tabela-saidas thead th:nth-child(11) { white-space: normal; line-height: 1.25; }
    table.tabela-saidas tbody td .cel-dupla .mono.corta { max-width: 100%; display: block; }
    table.tabela-saidas tbody td .form-select { min-width: 0 !important; width: 100%; }
    table.tabela-saidas td.dataTables_empty { grid-column: 1 / -1; text-align: center; padding: 24px 0 !important; }
}

/* ═════════ Abas por tema (Configurações gerais e taxas do usuário) ═════════
   Botões .seg-aba numa trilha que rola de lado no celular; um painel por tema, um
   "Salvar" só pra todos. Ponto na aba = alteração não salva (acento) ou erro (vermelho). */
.abas-tema { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: hsl(var(--muted)); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.abas-tema::-webkit-scrollbar { display: none; }
.abas-tema .seg-aba { flex: 0 0 auto; white-space: nowrap; justify-content: center; }
.abas-tema .seg-aba:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.abas-tema .ponto { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--brand-accent)); display: none; flex-shrink: 0; }
.abas-tema .seg-aba.alterada .ponto { display: inline-block; }
.abas-tema .seg-aba.com-erro .ponto { display: inline-block; background: hsl(var(--destructive)); }
.aba-painel[hidden] { display: none !important; }
.aba-painel { animation: aba-entra .18s ease-out; }
@keyframes aba-entra { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aba-painel { animation: none; } }

/* campos em grade enxuta: rótulo curto (o tema já está na aba) */
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 16px; }
.grade-campos .form-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.grade-campos .campo-erro { margin-top: 4px; }
.tag-mudo { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.5; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); cursor: help; }
[data-theme="dark"] .tag-mudo { background: hsl(var(--sup, var(--muted))); }
.regra-linha { font-size: 13px; line-height: 1.45; color: hsl(var(--muted-foreground)); margin: 0 0 14px; }
.regra-linha b { color: hsl(var(--foreground)); font-weight: 600; }

/* simulador de uma linha no lugar dos quadros "Como funciona" */
.calc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; padding: 10px 14px; border-radius: var(--radius-md); background: hsl(var(--muted) / .65); font-size: 13px; color: hsl(var(--foreground) / .8); }
.calc-linha > .ph { font-size: 16px; color: hsl(var(--brand-accent)); }
.calc-linha label.calc-valor { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: hsl(var(--foreground) / .8) !important; }
.calc-linha .calc-valor input { width: 96px !important; height: 32px; min-height: 0; padding: 4px 8px !important; font-size: 13px !important; }
.calc-linha b { color: hsl(var(--foreground)); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-linha .sep { color: hsl(var(--muted-foreground)); }

/* sub-bloco (taxa flexível) com o interruptor no título */
.bloco-sub { margin-top: 18px; padding: 14px 16px 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); }
.bloco-sub-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bloco-sub-topo .t { font-weight: 600; font-size: 14px; }
.bloco-sub-topo .chave-linha { min-height: 0; }
.bloco-sub.desligado .grade-campos { opacity: .5; }

/* relatórios: interruptores em duas colunas */
.chaves-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.chaves-duas .t-rotulo { margin: 0 0 6px; }
.chaves-duas .chave-linha { min-height: 38px; }
@media (max-width: 575.98px) {
    .chaves-duas { grid-template-columns: minmax(0, 1fr); }
    .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* dois por linha no celular */
    .calc-linha { gap: 4px 8px; padding: 10px 12px; }
}

/* marca: três imagens lado a lado, mais baixas */
.grade-imagens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
@media (max-width: 767.98px) { .grade-imagens { grid-template-columns: minmax(0, 1fr); } }

/* Salvar sempre à vista: gruda no pé da tela enquanto o card está visível */
.card.cfg-card { overflow: visible; }
.barra-salvar { position: sticky; bottom: calc(var(--barra-fixa-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); border-radius: 0 0 14px 14px; }
.barra-salvar .estado { font-size: 13px; color: hsl(var(--muted-foreground)); min-width: 0; }
.barra-salvar .estado.sujo { color: hsl(var(--warning)); font-weight: 600; }
@media (max-width: 767.98px) {
    :root { --barra-fixa-h: 66px; }
    .barra-salvar { padding: 10px 14px; }
    .barra-salvar .btn { flex-shrink: 0; }
}

/* modal de taxas: cabeçalho com nome + documento, abas grudadas no topo do corpo */
.taxas-cab .t-apoio { margin-top: 2px; }
.modal-body .abas-tema.gruda { position: sticky; top: -16px; z-index: 3; margin-top: -4px; box-shadow: 0 6px 12px -10px hsl(var(--foreground) / .35); }