/* =====================================================================
   IYPS Store Manager - Design System 2.1
   ===================================================================== */

:root {
    --azul: #0ea5e9;
    --ciano: #00d4ff;
    --verde: #00c97b;
    --verde-claro: #dcfce7;
    --verde-escuro: #166534;
    --vermelho: #ef4444;
    --vermelho-claro: #fee2e2;
    --vermelho-escuro: #991b1b;
    --amarelo: #f59e0b;
    --amarelo-claro: #fef3c7;
    --amarelo-escuro: #92400e;
    --roxo: #7c3aed;

    --escuro: #07111f;
    --texto: #101828;
    --texto-suave: #667085;
    --borda: #e8ecf3;
    --borda-forte: #d7dee9;
    --fundo: #f2f5f9;
    --superficie: #ffffff;
    --superficie-2: #f6f8fb;
    --superficie-3: #eef2f7;
    --branco: #ffffff;

    --menu-fundo: linear-gradient(185deg, #07111f 0%, #0b1a2e 100%);
    --menu-texto: #b6c4d6;
    --menu-titulo: #5c6b82;
    --menu-ativo: rgba(0, 212, 255, .14);

    /* Três níveis de elevação: a folha, o que está por cima dela e o que
       flutua. Antes tudo usava a mesma sombra e nada tinha hierarquia. */
    --sombra-0: 0 1px 2px rgba(16, 24, 40, .04);
    --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -6px rgba(16, 24, 40, .08);
    --sombra-2: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px -12px rgba(16, 24, 40, .16);
    --sombra-forte: 0 18px 45px rgba(7, 17, 31, .18);

    --raio: 16px;
    --raio-sm: 11px;
    --raio-lg: 22px;
    --sidebar: 262px;
    --transicao: .18s ease;

    /* Escala de texto: um passo entre cada tamanho, em vez de valores soltos */
    --t-micro: 11px;
    --t-mini: 12px;
    --t-base: 13.5px;
    --t-medio: 15px;
    --t-titulo: 17px;
    --t-grande: 26px;
}

/* Tema escuro ------------------------------------------------------- */
[data-tema="escuro"] {
    --texto: #e6edf7;
    --texto-suave: #94a3b8;
    --borda: #1e293b;
    --borda-forte: #2b3a51;
    --fundo: #0a1018;
    --superficie: #111c2e;
    --superficie-2: #16233a;
    --superficie-3: #1b2b45;
    --branco: #111c2e;

    --sombra-0: 0 1px 2px rgba(0, 0, 0, .25);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -12px rgba(0, 0, 0, .5);

    --verde-claro: rgba(0, 201, 123, .16);
    --verde-escuro: #6ee7b7;
    --vermelho-claro: rgba(239, 68, 68, .16);
    --vermelho-escuro: #fca5a5;
    --amarelo-claro: rgba(245, 158, 11, .16);
    --amarelo-escuro: #fcd34d;

    --menu-fundo: linear-gradient(185deg, #060d18 0%, #0a1524 100%);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --sombra-forte: 0 18px 45px rgba(0, 0, 0, .5);
}

/* Tema papel -------------------------------------------------------------
   O mesmo visual da página inicial dentro do sistema: fundo de papel, tinta
   quase preta, traço grosso e sombra deslocada. Quem gosta do site encontra
   a mesma cara aqui; quem prefere o painel claro continua no de sempre. */
[data-tema="papel"] {
    --texto: #16120d;
    --texto-suave: #5b5248;
    --borda: #16120d;
    --borda-forte: #16120d;
    --fundo: #f4ece0;
    --superficie: #fbf7f0;
    --superficie-2: #f4ece0;
    --superficie-3: #ede2d2;
    --branco: #fbf7f0;

    --ciano: #0f7b4f;
    --verde: #0f7b4f;
    --verde-claro: #d7f0e2;
    --verde-escuro: #0a5738;
    --vermelho: #d95315;
    --vermelho-claro: #ffe4d3;
    --vermelho-escuro: #9c3a0e;
    --amarelo: #ffcd4d;
    --amarelo-claro: #fff3d1;
    --amarelo-escuro: #7a5a05;
    --azul: #1b4ea8;
    --escuro: #16120d;

    --menu-fundo: #16120d;
    --menu-texto: #e8e0d4;
    --menu-titulo: #9c9080;
    --menu-ativo: rgba(255, 205, 77, .18);

    /* A marca registrada do visual: sombra dura, deslocada, sem desfoque */
    --sombra-0: 2px 2px 0 var(--borda);
    --sombra: 3px 3px 0 var(--borda);
    --sombra-2: 5px 5px 0 var(--borda);
    --sombra-forte: 8px 8px 0 var(--borda);

    --raio: 16px;
    --raio-sm: 12px;
}

[data-tema="papel"] .panel,
[data-tema="papel"] .stat,
[data-tema="papel"] .tabela-wrap,
[data-tema="papel"] .atalho,
[data-tema="papel"] .barra-dia,
[data-tema="papel"] .modal-box { border: 2px solid var(--borda); }

[data-tema="papel"] .btn { border: 2px solid var(--borda); box-shadow: 2px 2px 0 var(--borda); }
[data-tema="papel"] .btn:active { transform: translate(2px, 2px); box-shadow: none; }
[data-tema="papel"] .btn-primary { background: var(--verde); color: #fff; }
[data-tema="papel"] .btn-light { background: var(--papel, #fbf7f0); color: var(--texto); }
[data-tema="papel"] .btn-dark { background: var(--texto); color: #fbf7f0; }

[data-tema="papel"] input,
[data-tema="papel"] select,
[data-tema="papel"] textarea {
    border: 2px solid var(--borda); background: var(--superficie);
}

[data-tema="papel"] .topbar { border-bottom: 2px solid var(--borda); }
[data-tema="papel"] table.tabela th { border-bottom: 2px solid var(--borda); }
[data-tema="papel"] .badge { border: 1.5px solid var(--borda); }
[data-tema="papel"] .stat::before { height: 0; }

/* A serifada dos títulos é o que dá o ar de material impresso */
[data-tema="papel"] .topbar h2,
[data-tema="papel"] .panel-head h3,
[data-tema="papel"] .stat .valor {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.01em;
}

/* =====================================================================
 * Primeiros passos (painel) e Monte o seu sistema
 * =================================================================== */
.roteiro { border-left: 4px solid var(--verde); }

.roteiro-topo {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}

.roteiro-topo h3 { font-size: var(--t-lg); margin-bottom: 3px; }
.roteiro-topo p { font-size: var(--t-sm); color: var(--texto-suave); }
.roteiro-medida { display: flex; align-items: center; gap: 12px; }
.roteiro-medida > strong { font-size: 26px; font-weight: 900; color: var(--verde); }
.roteiro-medida form { display: inline; }

.roteiro-barra {
    height: 9px; border-radius: 999px; background: var(--superficie-3);
    overflow: hidden; margin-bottom: 16px;
}

.roteiro-barra span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--amarelo), var(--verde));
    transition: width .4s;
}

.roteiro-passos { display: grid; gap: 9px; }

.roteiro-passo {
    display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
    padding: 13px 15px; border-radius: var(--raio-sm);
    border: 1px solid var(--borda); background: var(--superficie-2);
}

.roteiro-passo > div { flex: 1; min-width: 180px; }
.roteiro-passo strong { display: block; font-size: var(--t-base); }
.roteiro-passo small { display: block; font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; margin-top: 2px; }

.roteiro-passo strong em {
    font-style: normal; font-size: var(--t-micro); font-weight: 700;
    color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em;
    margin-left: 6px;
}

.passo-marca {
    width: 38px; height: 38px; flex: none; border-radius: 11px;
    display: grid; place-items: center; font-size: 18px;
    background: var(--superficie-3);
}

.roteiro-passo.feito { border-color: var(--verde); background: var(--verde-claro); }
.roteiro-passo.feito .passo-marca { background: var(--verde); color: #fff; font-weight: 900; }
.roteiro-passo.feito strong { color: var(--verde-escuro); }
.roteiro-passo.feito small { color: var(--verde-escuro); opacity: .8; }

/* ---- Tipos de negócio */
.grade-negocios { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 11px; }

.cartao-negocio {
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    padding: 16px; border-radius: var(--raio-sm); cursor: pointer; text-align: left;
    border: 2px solid var(--borda); background: var(--superficie);
    color: var(--texto); font-family: inherit;
    transition: border-color var(--transicao), background var(--transicao);
}

.cartao-negocio:hover { border-color: var(--verde); background: var(--superficie-2); }
.cartao-negocio .capa { font-size: 26px; line-height: 1; }
.cartao-negocio strong { font-size: var(--t-base); font-weight: 700; }
.cartao-negocio small { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; }
.cartao-negocio.escolhido { border-color: var(--verde); background: var(--verde-claro); }

.marca-escolhido {
    font-size: var(--t-micro); font-weight: 800; color: var(--verde-escuro);
    text-transform: uppercase; letter-spacing: .05em; margin-top: 4px;
}

/* ---- Funções ligáveis */
.grade-personalizar { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 10px; }

.item-funcao {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 13px 15px; border-radius: var(--raio-sm); cursor: pointer;
    border: 1px solid var(--borda); background: var(--superficie);
}

.item-funcao:hover { border-color: var(--verde); }
.item-funcao input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: none; cursor: pointer; }
.item-funcao strong { display: block; font-size: var(--t-base); }
.item-funcao small { display: block; font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; margin-top: 2px; }

.item-funcao strong em {
    font-style: normal; font-size: var(--t-micro); font-weight: 700;
    color: var(--verde-escuro); text-transform: uppercase; letter-spacing: .05em;
    margin-left: 6px;
}

.item-funcao.fixa { opacity: .72; cursor: default; }
.item-funcao.fixa:hover { border-color: var(--borda); }
.item-funcao.travada { cursor: default; background: var(--superficie-3); border-style: dashed; }
.item-funcao.travada:hover { border-color: var(--borda); }
.cadeado-funcao { font-size: 18px; flex: none; margin-top: 1px; }

/* ---- Escolha do tema na personalização */
.grade-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }

.cartao-tema {
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    padding: 15px; border-radius: var(--raio-sm); cursor: pointer; text-align: left;
    border: 2px solid var(--borda); background: var(--superficie);
    color: var(--texto); font-family: inherit;
}

.cartao-tema:hover { border-color: var(--verde); }
.cartao-tema .capa { font-size: 24px; line-height: 1; }
.cartao-tema strong { font-size: var(--t-base); font-weight: 700; }
.cartao-tema small { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; }
.cartao-tema.ativo { border-color: var(--verde); background: var(--verde-claro); }

.barra-salvar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    position: sticky; bottom: 0; z-index: 5;
    padding: 14px 0; margin-top: 4px;
    background: linear-gradient(180deg, transparent, var(--fundo) 30%);
}

.btn.btn-lg { min-height: 52px; padding: 14px 26px; font-size: var(--t-lg); font-weight: 800; }

.destaque-boas-vindas { border-left: 4px solid var(--verde); }
.destaque-boas-vindas h3 { font-size: var(--t-lg); margin-bottom: 8px; }
.destaque-boas-vindas p { font-size: var(--t-base); line-height: 1.7; color: var(--texto-suave); max-width: 76ch; }

/* =====================================================================
 * TEMA FÁCIL
 *
 * Para quem enxerga pouco, tem dificuldade com o mouse ou está aprendendo
 * a mexer no computador. Segue a lógica dos sistemas de venda antigos:
 * letra grande, botão grande, cor forte e nada de enfeite.
 *
 * Três decisões que valem explicar:
 *   - cinza claro sobre branco desaparece para quem tem catarata, então
 *     aqui NÃO existe texto cinza: o "suave" é quase tão escuro quanto o
 *     texto normal;
 *   - todo alvo de clique tem no mínimo 56px de altura, o que o dedo
 *     acerta sem mirar;
 *   - a cor nunca é a única pista — botão perigoso também é o mais
 *     grosso e o mais escuro, para quem não distingue verde de vermelho.
 * =================================================================== */
[data-tema="facil"] {
    --texto: #000000;
    --texto-suave: #2b3440;
    --borda: #1f2937;
    --borda-forte: #000000;
    --fundo: #f7f4ec;
    --superficie: #ffffff;
    --superficie-2: #fbf9f3;
    --superficie-3: #f0ece1;
    --branco: #ffffff;

    /* Cores fechadas o bastante para texto branco por cima passar no contraste */
    --verde: #0a6b3d;
    --verde-claro: #cdeddb;
    --verde-escuro: #054a29;
    --vermelho: #a4141b;
    --vermelho-claro: #f8d7d8;
    --vermelho-escuro: #6d0a0f;
    --amarelo: #8a5a00;
    --amarelo-claro: #ffeec2;
    --amarelo-escuro: #5c3c00;
    --azul: #14448f;
    --ciano: #14448f;
    --roxo: #4a2a8f;
    --escuro: #0b1220;

    --menu-fundo: #0b1220;
    --menu-texto: #ffffff;
    --menu-titulo: #c7d2e0;
    --menu-ativo: rgba(255, 255, 255, .2);

    /* Sem desfoque: borda grossa é mais legível que sombra suave */
    --sombra-0: 0 0 0 1px var(--borda);
    --sombra: 0 3px 0 var(--borda);
    --sombra-2: 0 4px 0 var(--borda);
    --sombra-forte: 0 6px 0 var(--borda);

    --raio: 14px;
    --raio-sm: 10px;
}

/* ---- Tudo cresce junto */
[data-tema="facil"] body { font-size: 17px; }

[data-tema="facil"] .topbar h2 { font-size: 26px; font-weight: 800; }
[data-tema="facil"] .topbar p { font-size: 16px; color: var(--texto-suave); }
[data-tema="facil"] .panel-head h3 { font-size: 21px; font-weight: 800; }
[data-tema="facil"] .stat .valor { font-size: 34px; font-weight: 900; }
[data-tema="facil"] .stat .rotulo { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
[data-tema="facil"] label { font-size: 16px; font-weight: 700; color: var(--texto); }

/* ---- Botões do tamanho de tecla de máquina registradora */
[data-tema="facil"] .btn {
    min-height: 56px; padding: 14px 22px;
    font-size: 18px; font-weight: 800;
    border: 3px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--borda);
}

[data-tema="facil"] .btn:active { transform: translateY(3px); box-shadow: none; }
[data-tema="facil"] .btn-sm { min-height: 48px; padding: 11px 18px; font-size: 16px; }
[data-tema="facil"] .btn-primary { background: var(--verde); color: #fff; border-color: var(--verde-escuro); }
[data-tema="facil"] .btn-danger { background: var(--vermelho); color: #fff; border-color: var(--vermelho-escuro); }
[data-tema="facil"] .btn-light { background: #fff; color: var(--texto); }

/* Foco visível de longe — quem usa teclado precisa achar onde está */
[data-tema="facil"] a:focus-visible,
[data-tema="facil"] .btn:focus-visible,
[data-tema="facil"] input:focus-visible,
[data-tema="facil"] select:focus-visible,
[data-tema="facil"] textarea:focus-visible {
    outline: 4px solid #14448f;
    outline-offset: 2px;
}

/* ---- Campos onde o dedo acerta */
[data-tema="facil"] input,
[data-tema="facil"] select,
[data-tema="facil"] textarea {
    min-height: 54px;
    font-size: 18px;
    border: 3px solid var(--borda);
    background: #fff;
    color: #000;
}

[data-tema="facil"] textarea { min-height: 110px; }
[data-tema="facil"] input::placeholder,
[data-tema="facil"] textarea::placeholder { color: #5b6674; }

/* ---- Tabelas: linha alta e listrada, que o olho não perde */
[data-tema="facil"] table.tabela th {
    font-size: 15px; text-transform: none; letter-spacing: 0;
    color: #fff; background: var(--escuro);
    padding: 14px 12px;
}

[data-tema="facil"] table.tabela td { padding: 16px 12px; font-size: 17px; }
[data-tema="facil"] table.tabela tbody tr:nth-child(even) td { background: var(--superficie-3); }
[data-tema="facil"] table.tabela tbody tr:hover td { background: var(--amarelo-claro); }

/* ---- Menu maior */
[data-tema="facil"] .sidebar .menu a { font-size: 17px; padding: 14px 12px; min-height: 52px; }
[data-tema="facil"] .sidebar .menu-titulo { font-size: 13px; letter-spacing: .04em; }
[data-tema="facil"] .menu-destaque { min-height: 58px; font-size: 18px; font-weight: 800; }

/* ---- Blocos com contorno em vez de sombra suave */
[data-tema="facil"] .panel,
[data-tema="facil"] .stat,
[data-tema="facil"] .tabela-wrap,
[data-tema="facil"] .atalho,
[data-tema="facil"] .modal-box { border: 3px solid var(--borda); }

[data-tema="facil"] .badge {
    font-size: 14px; font-weight: 800; padding: 6px 12px;
    border: 2px solid var(--borda);
}

[data-tema="facil"] .alert { font-size: 17px; border-width: 3px; padding: 16px 18px; }

/* ---- Nada pisca, gira ou desliza: movimento atrapalha quem já tem
        dificuldade de acompanhar a tela */
[data-tema="facil"] * {
    animation: none !important;
    transition: none !important;
}

[data-tema="facil"] .stat::before { height: 0; }

/* =====================================================================
 * TEMA GESTÃO
 *
 * Para tela grande, monitor de balcão ou tablet operado no dedo: os
 * atalhos do painel deixam de ser um quadrinho no meio da página e viram
 * blocos enormes que tomam a tela inteira.
 *
 * O raciocínio: nessas telas ninguém fica lendo relatório — quem está ali
 * quer TOCAR na coisa que vai fazer. Então a ordem se inverte. Os blocos
 * sobem para o topo, os números descem, e o menu encolhe para dar espaço.
 * Nada some: rolando a página, o painel inteiro continua lá embaixo.
 * =================================================================== */
[data-tema="gestao"] {
    --texto: #0b1220;
    --texto-suave: #3d4a5c;
    --borda: #cbd5e1;
    --borda-forte: #94a3b8;
    --fundo: #0b1220;
    --superficie: #ffffff;
    --superficie-2: #f1f5f9;
    --superficie-3: #e2e8f0;
    --branco: #ffffff;

    --verde: #0d9488;
    --verde-claro: #ccfbf1;
    --verde-escuro: #0f766e;
    --azul: #2563eb;
    --ciano: #0ea5e9;

    --menu-fundo: #060b14;
    --menu-texto: #cbd5e1;
    --menu-titulo: #64748b;
    --menu-ativo: rgba(13, 148, 136, .28);

    --raio: 20px;
    --raio-sm: 16px;

    /* Menu estreito: nesta tela a navegação é pelos blocos, não pela lista */
    --sidebar: 78px;
}

/* O fundo escuro faz o bloco branco saltar; sem isso tudo vira uma massa */
[data-tema="gestao"] .main { background: var(--fundo); }
[data-tema="gestao"] .topbar { background: #101a2b; border-bottom: 1px solid rgba(255,255,255,.08); }
[data-tema="gestao"] .topbar h2 { color: #fff; font-size: 24px; font-weight: 800; }
[data-tema="gestao"] .topbar p { color: #94a3b8; }

/* O que some na coluna estreita está listado junto com o menu recolhido,
   lá em cima: a lista é a mesma e não vale a pena ter duas. */
[data-tema="gestao"] .sidebar { padding: 12px 8px 20px; align-items: center; }
[data-tema="gestao"] .sidebar .menu a { justify-content: center; padding: 14px 6px; min-height: 54px; }
[data-tema="gestao"] .sidebar .menu a svg.icone { width: 25px; height: 25px; }

[data-tema="gestao"] .menu-destaque {
    justify-content: center; min-height: 58px; width: 100%;
    padding: 0; gap: 0;
}

[data-tema="gestao"] .menu-destaque svg.icone { width: 26px; height: 26px; }

/* O grupo do menu perde o título mas mantém o fio, para não virar
   uma coluna corrida de trinta ícones iguais */
[data-tema="gestao"] .sidebar .menu-titulo { justify-content: center; padding: 8px 0; }
[data-tema="gestao"] .sidebar .menu-titulo .chevron { display: none; }

/* ---- Os blocos, que são o motivo do tema existir
   Neles a ordem da página se inverte: quem abre esta tela quer TOCAR na
   coisa que vai fazer, não ler número. Os blocos sobem para o topo e o
   resto do painel continua logo abaixo, sem nada sumir. */
[data-tema="gestao"] .content { display: flex; flex-direction: column; }
[data-tema="gestao"] .content > * { order: 2; }
[data-tema="gestao"] .content > .acoes-grandes { order: 1; }

/* O aviso de alguma coisa errada continua vindo antes de tudo:
   bloco bonito não pode esconder "o caixa está aberto desde ontem". */
[data-tema="gestao"] .content > .alert { order: 0; }

[data-tema="gestao"] .acoes-grandes {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 26px;
}

[data-tema="gestao"] .acoes-cabeca { margin-bottom: 14px; }
[data-tema="gestao"] .acoes-cabeca h3 { color: #fff; font-size: 20px; }
[data-tema="gestao"] .acoes-cabeca p { color: #94a3b8; }

[data-tema="gestao"] .acoes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

[data-tema="gestao"] .acao {
    min-height: 190px;
    padding: 26px 20px;
    border: 0;
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    gap: 14px;
}

[data-tema="gestao"] .acao:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

[data-tema="gestao"] .acao:active { transform: translateY(0); }

[data-tema="gestao"] .acao-icone {
    width: 84px; height: 84px; font-size: 46px;
    border-radius: 26px; border: 0;
    background: var(--superficie-2);
}

[data-tema="gestao"] .acao strong { font-size: 21px; font-weight: 800; }
[data-tema="gestao"] .acao-nota { font-size: 14px; line-height: 1.45; }

/* O bloco principal (vender) ocupa o dobro e não se confunde com o resto */
[data-tema="gestao"] .acao.destaque {
    grid-column: span 2;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    min-height: 210px;
}

[data-tema="gestao"] .acao.destaque strong { color: #fff; font-size: 27px; }
[data-tema="gestao"] .acao.destaque .acao-nota { color: rgba(255, 255, 255, .82); font-size: 15px; }

[data-tema="gestao"] .acao.destaque .acao-icone {
    background: rgba(255, 255, 255, .18);
    width: 96px; height: 96px; font-size: 52px;
}

/* Numa tela estreita o destaque volta a ocupar uma coluna só, senão ele
   sozinho preencheria a largura inteira e empurraria todo o resto */
@media (max-width: 720px) {
    [data-tema="gestao"] .acao.destaque { grid-column: span 1; }
    [data-tema="gestao"] .acao { min-height: 160px; }
    [data-tema="gestao"] .acao-icone { width: 68px; height: 68px; font-size: 36px; }
}

/* ---- O resto do painel continua ali, só que discreto */
[data-tema="gestao"] .panel,
[data-tema="gestao"] .stat,
[data-tema="gestao"] .tabela-wrap,
[data-tema="gestao"] .barra-dia {
    border: 0;
    border-radius: var(--raio);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

[data-tema="gestao"] .stat .valor { font-size: 30px; font-weight: 800; }
[data-tema="gestao"] .btn { min-height: 48px; padding: 12px 20px; font-size: 15px; font-weight: 700; }
[data-tema="gestao"] .btn-primary { background: var(--verde); border-color: var(--verde-escuro); }
[data-tema="gestao"] input, [data-tema="gestao"] select, [data-tema="gestao"] textarea { min-height: 48px; font-size: 16px; }

/* O quadro de atalhos não pode ser escondido neste tema: escondê-lo
   deixaria a tela sem a única coisa que ela existe para mostrar. */
[data-tema="gestao"] #botaoAcoes { display: none; }
[data-tema="gestao"] .acoes-grandes.recolhido .acoes-grade { display: grid; }

/* =====================================================================
 * TEMA NOITE — menu numa barra embaixo
 *
 * Para quem trabalha de madrugada e para telas OLED, onde preto de
 * verdade não acende pixel nenhum. O "escuro" comum ainda é azulado e
 * cheio de bordas claras; aqui tudo é preto e cinza-escuro, sem brilho.
 *
 * O menu sai da lateral e vira uma BARRA NO PÉ DA TELA, como num
 * aplicativo de celular: no escuro a mão já está perto da base, e o
 * conteúdo ganha a largura inteira do monitor.
 * =================================================================== */
[data-tema="noite"] {
    --texto: #e7e9ee;
    --texto-suave: #97a0ae;
    --borda: #23262d;
    --borda-forte: #333844;
    --fundo: #000000;
    --superficie: #0c0e12;
    --superficie-2: #14171d;
    --superficie-3: #1b1f27;
    --branco: #0c0e12;

    /* Cores dessaturadas: no escuro, cor saturada "vibra" e cansa a vista */
    --verde: #3f9d78;
    --verde-claro: #12251d;
    --verde-escuro: #7fd3af;
    --vermelho: #b4585e;
    --vermelho-claro: #2a1416;
    --vermelho-escuro: #e79aa0;
    --amarelo: #b39152;
    --amarelo-claro: #241d0f;
    --amarelo-escuro: #e2c281;
    --azul: #5b7fb5;
    --ciano: #4f93a8;
    --roxo: #8471b5;
    --escuro: #000000;

    --menu-fundo: #08090c;
    --menu-texto: #97a0ae;
    --menu-titulo: #5a616e;
    --menu-ativo: rgba(79, 147, 168, .16);

    /* Sombra quase não existe no preto: quem separa é a borda */
    --sombra-0: none;
    --sombra: none;
    --sombra-2: 0 0 0 1px var(--borda);
    --sombra-forte: 0 0 0 1px var(--borda-forte);

    --sidebar: 0px;   /* a coluna lateral deixa de existir */
}

[data-tema="noite"] body { background: #000; }

/* ---- A barra do menu, no pé */
[data-tema="noite"] .sidebar {
    inset: auto 0 0 0;
    width: 100%;
    height: 62px;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-top: 1px solid var(--borda);
    background: var(--menu-fundo);
    z-index: 45;
}

[data-tema="noite"] .brand,
[data-tema="noite"] .menu-busca,
[data-tema="noite"] .btn-recolher,
[data-tema="noite"] .sidebar-footer,
[data-tema="noite"] .menu-titulo,
[data-tema="noite"] .menu a .rotulo,
[data-tema="noite"] .menu a .tag,
[data-tema="noite"] .atalho-tecla,
[data-tema="noite"] .menu-destaque span { display: none; }

[data-tema="noite"] #menuLista { display: flex; gap: 2px; }
[data-tema="noite"] .menu-grupo { display: flex; }
[data-tema="noite"] .menu { display: flex; gap: 2px; }

[data-tema="noite"] .menu a {
    width: 48px; min-height: 48px; padding: 0;
    justify-content: center; border-radius: 12px; margin: 0;
}

[data-tema="noite"] .menu-destaque {
    width: 52px; min-height: 48px; padding: 0; margin: 0 4px 0 0;
    justify-content: center; flex: none;
}

/* Grupo fechado não faz sentido numa barra horizontal */
[data-tema="noite"] .menu-grupo.fechado .menu { display: flex; }

/* O conteúdo ganha a tela inteira e reserva o espaço da barra */
[data-tema="noite"] .main { margin-left: 0; width: 100%; }
[data-tema="noite"] .content { padding-bottom: 82px; }

/* ---- Superfícies: borda no lugar de sombra */
[data-tema="noite"] .panel,
[data-tema="noite"] .stat,
[data-tema="noite"] .tabela-wrap,
[data-tema="noite"] .atalho,
[data-tema="noite"] .acao,
[data-tema="noite"] .modal-box { border: 1px solid var(--borda); box-shadow: none; }

[data-tema="noite"] .topbar { background: var(--superficie); border-bottom: 1px solid var(--borda); }
[data-tema="noite"] table.tabela th { background: var(--superficie-2); }
[data-tema="noite"] table.tabela tbody tr:hover td { background: var(--superficie-2); }
[data-tema="noite"] input, [data-tema="noite"] select, [data-tema="noite"] textarea { background: var(--superficie-2); }
[data-tema="noite"] .btn-light { background: var(--superficie-2); color: var(--texto); }
[data-tema="noite"] .stat::before { opacity: .45; }

/* Em tela estreita a barra continua embaixo — é onde ela nasceu para estar */
@media (max-width: 860px) {
    [data-tema="noite"] .sidebar { transform: none; }
    [data-tema="noite"] .sidebar-overlay { display: none !important; }
    [data-tema="noite"] .mobile-menu-btn { display: none; }
}

/* =====================================================================
 * TEMA COMPACTO — menu numa faixa no topo
 *
 * Para quem passa o dia em tabela: relatório, lista de produtos, histórico
 * de vendas. Tudo encolhe alguns pixels e o menu vira uma faixa horizontal
 * no topo, devolvendo a largura da coluna lateral para a tabela.
 *
 * Não é o tema "bonito" — é o tema de quem quer ver mais linha por tela.
 * =================================================================== */
[data-tema="compacto"] {
    --texto: #10182a;
    --texto-suave: #5a6577;
    --borda: #dfe4ec;
    --borda-forte: #c6cedb;
    --fundo: #eef1f6;
    --superficie: #ffffff;
    --superficie-2: #f6f8fb;
    --superficie-3: #eaeff5;

    --menu-fundo: #10182a;
    --menu-texto: #c3ccda;
    --menu-titulo: #6b7688;
    --menu-ativo: rgba(0, 212, 255, .18);

    --raio: 10px;
    --raio-sm: 8px;
    --sidebar: 0px;
}

/* ---- A faixa do menu, no topo */
[data-tema="compacto"] .sidebar {
    inset: 0 0 auto 0;
    width: 100%;
    height: 46px;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    z-index: 45;
}

[data-tema="compacto"] .brand-texto,
[data-tema="compacto"] .menu-busca,
[data-tema="compacto"] .btn-recolher,
[data-tema="compacto"] .sidebar-footer,
[data-tema="compacto"] .menu-titulo,
[data-tema="compacto"] .menu a .tag,
[data-tema="compacto"] .atalho-tecla { display: none; }

[data-tema="compacto"] .brand { padding: 0 10px 0 0; margin: 0; flex: none; }
[data-tema="compacto"] .brand-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }

[data-tema="compacto"] #menuLista { display: flex; gap: 1px; }
[data-tema="compacto"] .menu-grupo { display: flex; }
[data-tema="compacto"] .menu-grupo.fechado .menu { display: flex; }
[data-tema="compacto"] .menu { display: flex; gap: 1px; }

/* Aqui o NOME fica: numa faixa horizontal, só ícone vira adivinhação */
[data-tema="compacto"] .menu a {
    min-height: 34px; padding: 0 10px; border-radius: 8px;
    font-size: 12.5px; white-space: nowrap; margin: 0;
}

[data-tema="compacto"] .menu a svg.icone { width: 15px; height: 15px; }
[data-tema="compacto"] .menu-destaque { min-height: 34px; padding: 0 11px; font-size: 12.5px; margin: 0 4px 0 0; flex: none; }

[data-tema="compacto"] .main { margin-left: 0; width: 100%; padding-top: 46px; }

/* ---- Tudo encolhe, para caber mais linha */
[data-tema="compacto"] body { font-size: 13px; }
[data-tema="compacto"] .content { padding: 12px 14px 30px; }
[data-tema="compacto"] .topbar { padding: 8px 14px; }
[data-tema="compacto"] .topbar h2 { font-size: 15px; }
[data-tema="compacto"] .topbar p { display: none; }
[data-tema="compacto"] .panel { padding: 12px 14px; margin-bottom: 10px; }
[data-tema="compacto"] .panel-head { margin-bottom: 9px; }
[data-tema="compacto"] .panel-head h3 { font-size: 14px; }
[data-tema="compacto"] .stat { padding: 11px 13px; }
[data-tema="compacto"] .stat .valor { font-size: 19px; }
[data-tema="compacto"] .stat .rotulo { font-size: 10.5px; }
[data-tema="compacto"] .btn { min-height: 32px; padding: 6px 11px; font-size: 12.5px; }
[data-tema="compacto"] .btn-sm { min-height: 28px; padding: 4px 9px; font-size: 11.5px; }
[data-tema="compacto"] input, [data-tema="compacto"] select, [data-tema="compacto"] textarea { min-height: 34px; padding: 6px 9px; font-size: 13px; }

/* A tabela é o motivo do tema existir */
[data-tema="compacto"] table.tabela th { padding: 6px 9px; font-size: 10.5px; }
[data-tema="compacto"] table.tabela td { padding: 6px 9px; font-size: 12.5px; }
[data-tema="compacto"] .badge { padding: 2px 7px; font-size: 10.5px; }

/* =====================================================================
 * TEMA CELULAR — cara de aplicativo
 *
 * Os outros temas mudam a aparência; este muda a NAVEGAÇÃO.
 *
 * Três decisões que vêm de como se segura um telefone:
 *   - a barra fica EMBAIXO, onde o polegar alcança sem trocar a mão de
 *     posição. Menu no topo obriga a esticar o dedo ou usar as duas mãos;
 *   - só cabem 5 atalhos na barra. O resto vai para "Mais", numa folha
 *     que sobe — tentar espremer 40 itens ali deixaria todos pequenos
 *     demais para acertar;
 *   - TABELA VIRA CARTÃO. Tabela de 12 colunas em tela de 6cm rola de
 *     lado e ninguém acha nada; empilhada com o nome da coluna ao lado
 *     do valor, dá para ler.
 *
 * Vale em qualquer tamanho de tela: quem usa tablet ou prefere assim no
 * computador escolhe do mesmo jeito.
 * =================================================================== */
[data-tema="celular"] {
    --texto: #0f172a;
    --texto-suave: #64748b;
    --borda: #e2e8f0;
    --borda-forte: #cbd5e1;
    --fundo: #f1f5f9;
    --superficie: #ffffff;
    --superficie-2: #f8fafc;
    --superficie-3: #eef2f7;

    --menu-fundo: #ffffff;
    --menu-texto: #64748b;
    --menu-ativo: rgba(0, 201, 123, .12);

    --raio: 18px;
    --raio-sm: 14px;
    --sidebar: 0px;

    /* Altura da barra de baixo — usada para reservar espaço no conteúdo */
    --barra-baixo: 64px;
}

/* ---- A barra de abas, no pé */
[data-tema="celular"] .sidebar {
    inset: auto 0 0 0;
    width: 100%;
    height: var(--barra-baixo);
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: visible;
    border-right: 0;
    border-top: 1px solid var(--borda);
    background: var(--menu-fundo);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .08);
    z-index: 45;
    /* No celular a barra do sistema come o rodapé: este respiro evita
       que o último item fique embaixo da barra de gestos do aparelho. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: none;
}

[data-tema="celular"] .brand,
[data-tema="celular"] .menu-busca,
[data-tema="celular"] .btn-recolher,
[data-tema="celular"] .sidebar-footer,
[data-tema="celular"] .menu-titulo,
[data-tema="celular"] .menu a .tag,
[data-tema="celular"] .menu a .cadeado,
[data-tema="celular"] .atalho-tecla,
/* "Nova venda" e "Modo Caixa" são botões grandes pensados para a coluna
   lateral. Espremidos na barra de abas, o texto quebrava por cima dos
   ícones. O PDV continua alcançável: ele é uma das abas. */
[data-tema="celular"] .menu-destaque { display: none; }

/* Só os primeiros itens ficam na barra; o resto vai para "Mais".
   O #menuLista precisa ser flex:1, e não width:100%: com 100% ele tomava
   a barra inteira e o botão "Mais" nascia com largura zero, fora da tela. */
[data-tema="celular"] #menuLista { display: flex; flex: 1; min-width: 0; }
[data-tema="celular"] .menu-grupo { display: contents; }
[data-tema="celular"] .menu-grupo.fechado .menu { display: contents; }
[data-tema="celular"] .menu { display: contents; }
[data-tema="celular"] #menuLista .menu a { display: none; }

[data-tema="celular"] #menuLista .menu a.aba-celular {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
    min-height: var(--barra-baixo);
    padding: 8px 2px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--menu-texto);
    font-size: 10.5px;
    font-weight: 600;
}

[data-tema="celular"] #menuLista .menu a.aba-celular .rotulo {
    display: block;
    font-size: 10.5px;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-tema="celular"] #menuLista .menu a.aba-celular svg.icone { width: 22px; height: 22px; }

[data-tema="celular"] #menuLista .menu a.aba-celular.active {
    color: var(--verde);
    background: transparent;
}

/* A marca do item ativo é um traço em cima, como em app de verdade */
[data-tema="celular"] #menuLista .menu a.aba-celular.active::before {
    content: "";
    position: absolute; top: 0; left: 22%; right: 22%;
    height: 3px; border-radius: 0 0 3px 3px;
    background: var(--verde);
}

/* ---- O botão "Mais" e a folha que sobe */
[data-tema="celular"] .abrir-mais-celular {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; flex: 1; min-width: 0; min-height: var(--barra-baixo);
    border: 0; background: transparent; cursor: pointer;
    color: var(--menu-texto); font-family: inherit; font-size: 10.5px; font-weight: 600;
}

[data-tema="celular"] .abrir-mais-celular span:first-child { font-size: 20px; line-height: 1; }

/* Todas as abas com a mesma fatia: quatro atalhos e o "Mais" */
[data-tema="celular"] .abrir-mais-celular { flex: 0 0 20%; }
[data-tema="celular"] #menuLista .menu a.aba-celular { flex: 1 1 0; }

.folha-celular {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 23, 42, .45);
    display: none;
    align-items: flex-end;
}

.folha-celular.aberta { display: flex; }

.folha-celular-caixa {
    width: 100%;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--superficie, #fff);
    border-radius: 22px 22px 0 0;
    padding: 8px 14px calc(20px + env(safe-area-inset-bottom, 0));
    animation: folha-sobe .22s ease;
}

@keyframes folha-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* A alça é a pista visual de que dá para arrastar/fechar */
.folha-celular-alca {
    width: 42px; height: 5px; border-radius: 999px;
    background: var(--borda-forte, #cbd5e1);
    margin: 8px auto 14px;
}

.folha-celular-titulo {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--texto-suave, #64748b);
    padding: 12px 6px 6px;
}

.folha-celular-itens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.folha-celular-itens a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 4px; border-radius: 14px; text-align: center;
    color: var(--texto, #0f172a); font-size: 11px; font-weight: 600; line-height: 1.2;
}

.folha-celular-itens a:active { background: var(--superficie-3, #eef2f7); }
.folha-celular-itens a svg { width: 22px; height: 22px; }
.folha-celular-itens a.bloqueado { opacity: .45; }

/* ---- Conteúdo: reserva o espaço da barra */
[data-tema="celular"] .main { margin-left: 0; width: 100%; }
[data-tema="celular"] .content { padding: 14px 12px calc(var(--barra-baixo) + 24px); }

/* A barra de cima precisa QUEBRAR LINHA. Sem isso, os botões de ação da
   tela (que em algumas passam de 300px somados) esticavam a barra além da
   largura do telefone e a página inteira rolava de lado. */
[data-tema="celular"] .topbar {
    padding: 12px 14px;
    position: sticky; top: 0; z-index: 20;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
    min-height: 0;
}

[data-tema="celular"] .topbar h2 { font-size: 18px; font-weight: 800; }
[data-tema="celular"] .topbar p { display: none; }
[data-tema="celular"] .mobile-menu-btn { display: none; }
[data-tema="celular"] .sidebar-overlay { display: none !important; }

/* Nada pode ser mais largo que a tela: no telefone, rolagem lateral é
   como se perde metade do conteúdo sem perceber. */
[data-tema="celular"] .main,
[data-tema="celular"] .content,
[data-tema="celular"] .topbar { max-width: 100vw; overflow-x: hidden; }

[data-tema="celular"] .topbar > * { min-width: 0; }
[data-tema="celular"] .topbar .flex-centro { flex-wrap: wrap; }

/* No telefone a barra de cima tem espaço para o título e pouco mais.
   A busca global some (o Ctrl+K não existe sem teclado), o estado do
   caixa vira só o pontinho e as ações da tela quebram para a linha de
   baixo. O resto continua no menu do usuário, a um toque. */
[data-tema="celular"] .busca-global,
[data-tema="celular"] .topbar .atalho-tecla,
[data-tema="celular"] .chip-caixa span:not(.ponto),
[data-tema="celular"] .icone-btn.ajuda { display: none; }

[data-tema="celular"] .topbar .acoes-topo,
[data-tema="celular"] .topbar > div:last-child { flex-wrap: wrap; }

[data-tema="celular"] .user-info { display: none; }
[data-tema="celular"] .dropdown-menu { max-width: calc(100vw - 24px); }

/* ---- Blocos com cara de app */
[data-tema="celular"] .panel {
    border: 0;
    border-radius: var(--raio);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    padding: 16px;
    margin-bottom: 12px;
}

[data-tema="celular"] .stat {
    border: 0; border-radius: var(--raio-sm);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

[data-tema="celular"] .btn { min-height: 46px; border-radius: 12px; font-size: 15px; }
[data-tema="celular"] .btn-full, [data-tema="celular"] .barra-salvar .btn { width: 100%; justify-content: center; }
[data-tema="celular"] input, [data-tema="celular"] select, [data-tema="celular"] textarea {
    min-height: 48px;
    /* 16px é o mínimo que impede o iPhone de dar zoom ao focar o campo */
    font-size: 16px;
    border-radius: 12px;
}

/* ---- Tabela vira cartão
   O rótulo de cada célula é colocado pelo app.js, lendo o <th> da coluna:
   assim vale para as tabelas que já existem, sem mexer em nenhuma tela. */
[data-tema="celular"] .tabela-wrap,
[data-tema="celular"] .table-responsive { overflow: visible; }

[data-tema="celular"] table.tabela,
[data-tema="celular"] .table-responsive > table { display: block; }

[data-tema="celular"] table.tabela thead,
[data-tema="celular"] .table-responsive > table thead { display: none; }

[data-tema="celular"] table.tabela tbody,
[data-tema="celular"] .table-responsive > table tbody { display: block; }

[data-tema="celular"] table.tabela tbody tr,
[data-tema="celular"] .table-responsive > table tbody tr {
    display: block;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 6px 4px;
    margin-bottom: 10px;
}

[data-tema="celular"] table.tabela tbody tr:hover,
[data-tema="celular"] .table-responsive > table tbody tr:hover { background: var(--superficie); }

[data-tema="celular"] table.tabela td,
[data-tema="celular"] .table-responsive > table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 10px;
    border: 0;
    text-align: right;
    font-size: 14px;
}

[data-tema="celular"] table.tabela td::before,
[data-tema="celular"] .table-responsive > table td::before {
    content: attr(data-rotulo);
    flex: none;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}

/* Célula sem rótulo (a das ações) ocupa a linha inteira */
[data-tema="celular"] table.tabela td[data-rotulo=""],
[data-tema="celular"] .table-responsive > table td[data-rotulo=""] { justify-content: flex-end; }

[data-tema="celular"] table.tabela td[data-rotulo=""]::before,
[data-tema="celular"] .table-responsive > table td[data-rotulo=""]::before { display: none; }

[data-tema="celular"] table.tabela tfoot,
[data-tema="celular"] .table-responsive > table tfoot { display: block; }

[data-tema="celular"] table.tabela tfoot td,
[data-tema="celular"] .table-responsive > table tfoot td { font-weight: 800; }

/* A primeira célula é o título do cartão */
[data-tema="celular"] table.tabela tbody td:first-child,
[data-tema="celular"] .table-responsive > table tbody td:first-child {
    border-bottom: 1px solid var(--borda);
    padding-bottom: 10px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: left;
    display: block;
}

[data-tema="celular"] table.tabela tbody td:first-child::before,
[data-tema="celular"] .table-responsive > table tbody td:first-child::before { display: none; }

/* ---- Grades viram uma coluna só */
[data-tema="celular"] .grid,
[data-tema="celular"] .grid-2,
[data-tema="celular"] .grid-3,
[data-tema="celular"] .grid-4,
[data-tema="celular"] .cards { grid-template-columns: 1fr !important; }

[data-tema="celular"] .acoes-grade { grid-template-columns: repeat(2, 1fr); }
[data-tema="celular"] .acao { min-height: 108px; }
[data-tema="celular"] .filtros { display: grid; grid-template-columns: 1fr; gap: 10px; }
[data-tema="celular"] .btn-group { display: grid; gap: 8px; }

/* Em tela estreita a faixa não cabe: volta a ser a gaveta lateral de sempre */
@media (max-width: 860px) {
    [data-tema="compacto"] .sidebar {
        inset: 0 auto 0 0; width: 270px; height: 100%;
        flex-direction: column; padding: 16px 12px 24px;
        transform: translateX(-100%);
        border-bottom: 0;
    }

    [data-tema="compacto"] .sidebar.ativo { transform: translateX(0); }
    [data-tema="compacto"] #menuLista { display: block; }
    [data-tema="compacto"] .menu-grupo { display: block; }
    [data-tema="compacto"] .menu { display: block; }
    [data-tema="compacto"] .menu-titulo { display: flex; }
    [data-tema="compacto"] .brand-texto, [data-tema="compacto"] .sidebar-footer { display: block; }
    [data-tema="compacto"] .main { padding-top: 0; }
}

[data-tema="escuro"] .badge-info { background: rgba(59, 130, 246, .18); color: #93c5fd; }
[data-tema="escuro"] .badge-neutro { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
[data-tema="escuro"] .badge-roxo { background: rgba(124, 58, 237, .2); color: #c4b5fd; }
[data-tema="escuro"] .btn-light { background: #1e293b; color: #e2e8f0; }
[data-tema="escuro"] .btn-info { background: rgba(59, 130, 246, .18); color: #93c5fd; }
[data-tema="escuro"] table.tabela tbody tr:hover { background: rgba(148, 163, 184, .07); }
[data-tema="escuro"] .vazio { background: var(--superficie-2); border-color: #334155; }
[data-tema="escuro"] input, [data-tema="escuro"] select, [data-tema="escuro"] textarea {
    background: var(--superficie-2); border-color: #26364f; color: var(--texto);
}
[data-tema="escuro"] input[readonly], [data-tema="escuro"] input:disabled { background: #0f1a2b; }
[data-tema="escuro"] .check { background: var(--superficie-2); border-color: #26364f; }
[data-tema="escuro"] .paginacao a, [data-tema="escuro"] .paginacao span { background: var(--superficie); }

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

html, body { height: 100%; }

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transicao), color var(--transicao);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }
svg.icone { flex: none; }

/* ================================================================ Layout */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar);
    background: var(--menu-fundo);
    color: #e2e8f0;
    padding: 16px 12px 24px;
    position: fixed;
    inset: 0 auto 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
    scrollbar-width: thin;
    transition: width var(--transicao), transform var(--transicao);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }

/* Sem isto o menu inteiro pula um pouco quando a barra de rolagem aparece */
.sidebar { scrollbar-gutter: stable; }

/* ---- marca ---- */
.brand {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 16px; position: relative;
    margin-bottom: 2px;
}

.brand-icon {
    width: 44px; height: 44px; border-radius: 14px; flex: none;
    background: linear-gradient(135deg, var(--ciano), var(--verde));
    color: #07111f;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 15px; letter-spacing: -.5px; overflow: hidden;
    box-shadow: 0 4px 14px -4px rgba(0, 212, 255, .5);
    transition: transform var(--transicao);
}

.brand:hover .brand-icon { transform: scale(1.04); }

.brand-icon img { width: 100%; height: 100%; object-fit: cover; }

.brand-texto { min-width: 0; }
.brand-texto h1 { font-size: 14.5px; letter-spacing: .3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-texto span { display: block; color: #7c8ca5; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; }

.btn-recolher {
    position: absolute; right: 4px; top: 12px;
    width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
    color: #94a3b8; display: flex; align-items: center; justify-content: center;
}

.btn-recolher:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---- busca do menu ---- */
.menu-busca { position: relative; margin: 0 4px 10px; }

/* A regra geral de formulário (input[type=text]) tem a MESMA especificidade
   que ".menu-busca input" e vem depois na folha — ela vencia o empate e
   deixava este campo com fundo branco e o texto atrás da lupa. O seletor
   com .sidebar resolve sem precisar de !important. */
.sidebar .menu-busca input[type="text"] {
    width: 100%; height: 40px; border-radius: 12px; padding: 0 12px 0 40px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
    color: #fff; font-size: 13px; outline: none;
    transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}

.sidebar .menu-busca input[type="text"]::placeholder { color: #7c8ca5; }

/* Botão de limpar a busca: só aparece quando há o que limpar */
.sidebar .menu-busca .limpa-busca {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; display: none; place-items: center;
    border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .08); color: #cbd5e1;
    font-size: 12px; line-height: 1; font-family: inherit;
}

.sidebar .menu-busca .limpa-busca:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.sidebar .menu-busca input[type="text"]:not(:placeholder-shown) ~ .limpa-busca { display: grid; }
.sidebar .menu-busca input[type="text"]:not(:placeholder-shown) { padding-right: 38px; }

/* No menu recolhido a busca some junto com os rótulos */
body.menu-recolhido .sidebar .menu-busca .limpa-busca { display: none; }

.sidebar .menu-busca input[type="text"]:focus {
    border-color: rgba(0, 212, 255, .45); background: rgba(255, 255, 255, .11);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .12);
}

/* A lupa é decoração: fica fora do caminho do texto, com folga de sobra */
.menu-busca .lupa {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: #64748b; pointer-events: none; display: flex;
}

/* ---- grupos ---- */
.menu-grupo { margin-bottom: 2px; }

.menu-titulo {
    width: 100%; background: none; border: none; cursor: pointer;
    color: var(--menu-titulo); font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.2px;
    padding: 16px 12px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: inherit; position: relative;
    transition: color var(--transicao);
}

/* Fio fino acima do título: separa os grupos sem pesar a barra */
.menu-grupo + .menu-grupo .menu-titulo::before {
    content: ""; position: absolute; left: 12px; right: 12px; top: 6px;
    height: 1px; background: rgba(255, 255, 255, .07);
}

.menu-titulo:hover { color: #b6c4d6; }
.menu-titulo .chevron { transition: transform var(--transicao); opacity: .7; }
.menu-grupo.fechado .chevron { transform: rotate(-90deg); }
.menu-grupo.fechado .menu { display: none; }

.menu { display: grid; gap: 2px; }

/* Alvo maior e ícone maior: o menu é usado no balcão, muitas vezes com
   pressa, às vezes em tela sensível ao toque. */
.menu a {
    padding: 11px 12px; border-radius: 12px;
    color: var(--menu-texto); font-size: var(--t-base); font-weight: 500;
    display: flex; align-items: center; gap: 12px;
    transition: background var(--transicao), color var(--transicao);
    border: 1px solid transparent; position: relative;
    min-height: 44px;
}

.menu a svg.icone { width: 21px; height: 21px; opacity: .9; }
.menu a span.rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu a:hover svg.icone { opacity: 1; }

.menu a.active {
    background: linear-gradient(90deg, var(--menu-ativo), rgba(0, 212, 255, .04));
    border-color: rgba(0, 212, 255, .3);
    color: #fff; font-weight: 700;
}

.menu a.active svg.icone { opacity: 1; color: var(--ciano); }

/* Marca de página aberta, colada na borda da barra */
.menu a.active::before {
    content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 24px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ciano), var(--verde));
    box-shadow: 0 0 10px rgba(0, 212, 255, .5);
}

/* Fora do plano: continua visível, mas apagado e com cadeado. O lojista vê
   o que o sistema tem a mais em vez de nunca saber que existe. */
/* Riscar o texto deixava a linha ilegível e a barra suja quando vários itens
   caíam fora do plano. Apagado + cadeado diz a mesma coisa e continua legível. */
.menu a.bloqueado { opacity: .5; }
.menu a.bloqueado:hover { opacity: .85; background: rgba(255, 205, 77, .07); }
.menu a.bloqueado svg.icone { opacity: .6; }

.menu a .cadeado {
    margin-left: auto; font-size: 10px; line-height: 1; flex: none;
    opacity: .75; filter: grayscale(.4);
}

.menu a.bloqueado:hover .cadeado { opacity: 1; filter: none; }

.menu a .tag {
    margin-left: auto; font-size: 10px; font-weight: 800; line-height: 1;
    background: rgba(255, 255, 255, .12); padding: 4px 7px; border-radius: 999px;
}

.menu a .tag.alerta { background: rgba(239, 68, 68, .28); color: #fecaca; }
.menu a .tag.novo { background: rgba(0, 201, 123, .25); color: #86efac; }

/* ---- destaque PDV ---- */
.menu-destaque {
    margin: 4px 4px 10px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 13px; border-radius: 13px;
    background: linear-gradient(135deg, var(--ciano), var(--verde));
    color: #06111d; font-weight: 800; font-size: 13.5px;
    box-shadow: 0 8px 20px rgba(0, 201, 123, .22);
}

.menu-destaque:hover { filter: brightness(1.05); }
.menu-destaque .atalho-tecla { margin-left: auto; font-size: 10px; opacity: .7; }

/* ---- rodapé do menu ---- */
.sidebar-footer {
    margin-top: auto; padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex; align-items: center; gap: 10px;
}

.sidebar-footer .avatar-mini {
    width: 36px; height: 36px; border-radius: 11px; flex: none;
    background: linear-gradient(135deg, var(--ciano), var(--verde));
    color: #07111f; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 13px; overflow: hidden;
}

.sidebar-footer .avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-footer small { display: block; color: #7c8ca5; font-size: 10.5px; }
.sidebar-footer strong { font-size: 12.5px; color: #fff; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .sair { margin-left: auto; color: #94a3b8; display: flex; }
.sidebar-footer .sair:hover { color: #fca5a5; }

/* ---- modo recolhido ---- */
body.menu-recolhido { --sidebar: 74px; }

/* O que some quando a coluna fica estreita.
   Vale para o menu recolhido pelo botão E para o tema Gestão, que nasce
   estreito — a lista é a mesma, então mora num lugar só. */
body.menu-recolhido .brand-texto,
body.menu-recolhido .menu-busca,
body.menu-recolhido .menu-titulo span,
body.menu-recolhido .menu a .rotulo,
body.menu-recolhido .menu a .tag,
body.menu-recolhido .menu a .cadeado,
body.menu-recolhido .menu-destaque span,
body.menu-recolhido .sidebar-footer div,
body.menu-recolhido .btn-recolher,
[data-tema="gestao"] .brand-texto,
[data-tema="gestao"] .menu-busca,
[data-tema="gestao"] .menu-titulo span,
[data-tema="gestao"] .menu a .rotulo,
[data-tema="gestao"] .menu a .tag,
[data-tema="gestao"] .menu a .cadeado,
[data-tema="gestao"] .menu-destaque span,
[data-tema="gestao"] .sidebar-footer div,
[data-tema="gestao"] .btn-recolher { display: none; }

/* Recolhido, o cadeado sairia do lado do ícone e desalinharia a coluna.
   Ele vira um ponto no canto — e o nome, com o aviso, aparece ao passar. */
body.menu-recolhido .menu a.bloqueado::before {
    content: ""; position: absolute; top: 7px; right: 7px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--amarelo); opacity: .8;
}

/* O fio separador entre grupos não cabe na barra estreita */
body.menu-recolhido .menu-grupo + .menu-grupo .menu-titulo::before { display: none; }

body.menu-recolhido .sidebar { padding: 16px 10px 20px; align-items: center; }
body.menu-recolhido .brand { justify-content: center; padding: 8px 0 14px; }
body.menu-recolhido .menu a { justify-content: center; padding: 11px; }
body.menu-recolhido .menu-titulo { justify-content: center; padding: 10px 0 6px; }
body.menu-recolhido .menu-titulo .chevron { display: none; }
body.menu-recolhido .menu-destaque { justify-content: center; padding: 12px; }
body.menu-recolhido .sidebar-footer { justify-content: center; padding: 10px; }
body.menu-recolhido .menu-grupo.fechado .menu { display: grid; }

body.menu-recolhido .menu a::after {
    content: attr(data-titulo);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: #0f172a; color: #fff; padding: 7px 11px; border-radius: 9px;
    font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none;
    box-shadow: var(--sombra-forte); z-index: 60; transition: opacity var(--transicao);
}

body.menu-recolhido .menu a:hover::after { opacity: 1; }

/* ================================================================ Topbar */
.main {
    margin-left: var(--sidebar); width: calc(100% - var(--sidebar));
    min-height: 100vh; display: flex; flex-direction: column;
    transition: margin var(--transicao), width var(--transicao);
}

.topbar {
    min-height: 72px; background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 24px; position: sticky; top: 0; z-index: 30;
    backdrop-filter: saturate(140%) blur(6px);
}

.topbar h2 { font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.topbar p { color: var(--texto-suave); font-size: var(--t-mini); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 9px; }

.busca-global {
    display: flex; align-items: center; gap: 9px;
    height: 40px; min-width: 260px; padding: 0 12px;
    border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2);
    color: var(--texto-suave); font-size: 13px; cursor: pointer;
}

.busca-global:hover { border-color: var(--verde); color: var(--texto); }
.busca-global kbd {
    margin-left: auto; font-size: 10.5px; font-weight: 700; font-family: inherit;
    background: var(--borda); color: var(--texto-suave); padding: 3px 7px; border-radius: 6px;
}

.icone-btn {
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-suave);
    display: flex; align-items: center; justify-content: center; position: relative;
}

.icone-btn:hover { color: var(--texto); border-color: var(--verde); }

.icone-btn .contador {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
    border-radius: 999px; background: var(--vermelho); color: #fff;
    font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    padding: 0 5px; border: 2px solid var(--superficie);
}

.chip-caixa {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    border: 1px solid transparent; white-space: nowrap;
}

.chip-caixa.aberto { background: var(--verde-claro); color: var(--verde-escuro); border-color: rgba(0, 201, 123, .3); }
.chip-caixa.fechado { background: var(--vermelho-claro); color: var(--vermelho-escuro); border-color: rgba(239, 68, 68, .3); }
.chip-caixa .ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- dropdown ---- */
.dropdown { position: relative; }

.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 250px; background: var(--superficie);
    border: 1px solid var(--borda); border-radius: 15px;
    box-shadow: var(--sombra-forte); padding: 7px; z-index: 70; display: none;
}

.dropdown.aberto .dropdown-menu { display: block; }

.dropdown-menu a, .dropdown-menu button {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px;
    color: var(--texto); font-size: 13.5px; font-family: inherit;
}

.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--superficie-2); }
.dropdown-menu .separador { height: 1px; background: var(--borda); margin: 6px 0; }
.dropdown-menu .cabecalho { padding: 10px 11px 8px; }
.dropdown-menu .cabecalho strong { display: block; font-size: 13.5px; }
.dropdown-menu .cabecalho small { color: var(--texto-suave); font-size: 11.5px; }

.user-box {
    display: flex; align-items: center; gap: 9px; padding: 6px 11px 6px 7px;
    border-radius: 13px; background: var(--superficie-2); border: 1px solid var(--borda);
    cursor: pointer;
}

.user-box:hover { border-color: var(--verde); }

.avatar {
    width: 34px; height: 34px; border-radius: 11px; overflow: hidden;
    background: linear-gradient(135deg, var(--ciano), var(--verde));
    color: #07111f; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info strong { display: block; font-size: 12.5px; line-height: 1.2; }
.user-info span { color: var(--texto-suave); font-size: 11px; text-transform: capitalize; }

/* ---- notificações ---- */
.notificacao {
    display: flex; gap: 10px; padding: 10px 11px; border-radius: 11px; align-items: flex-start;
}

.notificacao:hover { background: var(--superficie-2); }
.notificacao .ponto-cor { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.notificacao strong { display: block; font-size: 13px; }
.notificacao small { color: var(--texto-suave); font-size: 11.5px; }

.content { padding: 24px; flex: 1; max-width: 1560px; width: 100%; }
.content-narrow { max-width: 1000px; }

.mobile-menu-btn {
    display: none; border: none; background: var(--escuro); color: #fff;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
}

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(7, 17, 31, .55); z-index: 35; }
.sidebar-overlay.ativo { display: block; }

/* ================================================= Paleta de busca (Ctrl+K) */
.paleta {
    position: fixed; inset: 0; background: rgba(7, 17, 31, .55); backdrop-filter: blur(3px);
    display: none; align-items: flex-start; justify-content: center; z-index: 120; padding: 90px 18px 18px;
}

.paleta.aberto { display: flex; }

.paleta-box {
    width: 100%; max-width: 620px; background: var(--superficie);
    border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra-forte);
    overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
}

.paleta-campo { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.paleta-campo input { border: none; background: none; height: auto; padding: 0; font-size: 16px; color: var(--texto); }
.paleta-campo input:focus { box-shadow: none; }
.paleta-lista { overflow-y: auto; padding: 8px; }

.paleta-item {
    display: flex; align-items: center; gap: 11px; padding: 11px 12px;
    border-radius: 11px; cursor: pointer; color: var(--texto);
}

.paleta-item:hover, .paleta-item.selecionado { background: var(--superficie-2); }
.paleta-item strong { font-size: 13.5px; display: block; }
.paleta-item small { color: var(--texto-suave); font-size: 11.5px; }
.paleta-item .tipo { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--texto-suave); }
.paleta-grupo { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); padding: 12px 12px 6px; }
.paleta-rodape { border-top: 1px solid var(--borda); padding: 10px 16px; font-size: 11.5px; color: var(--texto-suave); display: flex; gap: 14px; flex-wrap: wrap; }

/* ================================================================ Cards */
.panel {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra);
    transition: box-shadow var(--transicao), border-color var(--transicao);
}

.panel + .panel { margin-top: 16px; }

/* Dentro de uma grade quem cuida do espaçamento é o gap: sem isto o segundo
   painel de cada linha descia 16px e os cartões ficavam desalinhados. */
.grid > .panel + .panel { margin-top: 0; }

.panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    margin-bottom: 18px; padding-bottom: 14px; flex-wrap: wrap;
    border-bottom: 1px solid var(--borda);
}

/* Cabeçalho sem linha quando o painel é uma lista curta e a divisória
   só somaria ruído — basta acrescentar .limpo. */
.panel-head.limpo { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }

.panel-head h3 { font-size: var(--t-titulo); font-weight: 750; letter-spacing: -.015em; }
.panel-head p { color: var(--texto-suave); font-size: var(--t-mini); margin-top: 3px; line-height: 1.5; }

.grid { display: grid; gap: 16px; align-items: stretch; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---- Cartão de número -------------------------------------------------
   Cada um ganha uma faixa de cor no topo: dá para ler a saúde da loja de
   longe, sem precisar processar os valores um por um. */
.stat {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 20px 20px 18px; box-shadow: var(--sombra); position: relative; overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--borda-forte);
}

.stat.verde::before { background: linear-gradient(90deg, var(--ciano), var(--verde)); }
.stat.azul::before { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.stat.vermelho::before { background: linear-gradient(90deg, #fb7185, var(--vermelho)); }
.stat.amarelo::before { background: linear-gradient(90deg, #fbbf24, var(--amarelo)); }

.stat:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }

.stat .rotulo {
    color: var(--texto-suave); font-size: var(--t-micro); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}

.stat .valor {
    font-size: var(--t-grande); font-weight: 800; letter-spacing: -.03em; margin: 8px 0 4px;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* O ".content .obs" do legado.css é uma tarja amarela de aviso das telas antigas.
   Sem esta regra mais específica, ele pintava a linha de apoio de TODO cartão. */
.stat .obs,
.content .stat .obs {
    font-size: var(--t-mini);
    color: var(--texto-suave);
    background: none;
    padding: 0;
    border-radius: 0;
    display: block;
    line-height: 1.5;
}

.stat .icone {
    position: absolute; top: 17px; right: 17px; width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--superficie-2); color: var(--texto-suave);
    border: 1px solid var(--borda);
}

.stat.verde .valor { color: var(--verde-escuro); }
.stat.vermelho .valor { color: var(--vermelho-escuro); }
.stat.azul .valor { color: #0369a1; }
[data-tema="escuro"] .stat.azul .valor { color: #7dd3fc; }

/* ================================================================ Botões */
.btn {
    border: 1px solid transparent; padding: 10px 16px; border-radius: var(--raio-sm);
    font-weight: 700; font-size: var(--t-base); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: transform .12s, filter .12s, box-shadow .12s, background .12s;
    white-space: nowrap; line-height: 1.2;
}

.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Foco visível de verdade: quem navega pelo teclado precisa saber onde está */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--ciano), var(--verde));
    color: #06111d; box-shadow: 0 4px 14px -4px rgba(0, 201, 123, .5);
}

.btn-primary:hover { box-shadow: 0 6px 20px -4px rgba(0, 201, 123, .55); filter: brightness(1.03); }
.btn-dark { background: var(--escuro); color: #fff; }
.btn-light { background: var(--superficie-3); color: #0f172a; border-color: var(--borda); }
.btn-light:hover { background: var(--borda); filter: none; }
.btn-outline { background: transparent; border: 1px solid var(--borda-forte); color: var(--texto); }
.btn-outline:hover { background: var(--superficie-2); filter: none; }
.btn-danger { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.btn-success { background: var(--verde-claro); color: var(--verde-escuro); }
.btn-warning { background: var(--amarelo-claro); color: var(--amarelo-escuro); }
.btn-info { background: #dbeafe; color: #1e40af; }
.btn-sm { padding: 8px 11px; font-size: 12px; border-radius: 10px; }
.btn-lg { padding: 15px 22px; font-size: 15px; border-radius: 14px; }
.btn-full { width: 100%; }
.btn-icon { padding: 9px 11px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================================================================ Forms */
.form-group { margin-bottom: 14px; }

label { display: block; font-weight: 700; font-size: 12.5px; color: var(--texto); margin-bottom: 6px; }
label .obrigatorio { color: var(--vermelho); }

input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=datetime-local], input[type=tel], input[type=search],
select, textarea {
    width: 100%; height: 44px; border: 1px solid #dbe3ee; border-radius: var(--raio-sm);
    padding: 0 13px; outline: none; background: var(--superficie-2); color: var(--texto);
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

textarea { height: auto; min-height: 90px; padding: 12px 13px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: var(--azul); background: var(--superficie);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

input:disabled, select:disabled, textarea:disabled { background: #eef2f7; color: var(--texto-suave); }
input[readonly] { background: #eef2f7; }

.form-hint { font-size: 11.5px; color: var(--texto-suave); margin-top: 5px; }

.check {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2);
    cursor: pointer; font-size: 13px; font-weight: 600;
}

.check input { width: 18px; height: 18px; accent-color: var(--verde); flex: none; }
.check:hover { border-color: var(--azul); }
.check small { display: block; font-weight: 400; color: var(--texto-suave); font-size: 11.5px; }

.switch-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px dashed var(--borda);
}

.switch-linha:last-child { border-bottom: none; }
.switch-linha strong { display: block; font-size: 13.5px; }
.switch-linha small { color: var(--texto-suave); font-size: 12px; }

/* ================================================================ Tabelas
   Lista longa se lê melhor com o cabeçalho parado no topo e um pouco mais
   de ar entre as linhas — antes era preciso rolar de volta para saber de
   que coluna era cada número. */
.tabela-wrap {
    overflow-x: auto; overflow-y: visible;
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--superficie);

    /* Sombra que aparece na borda em que ainda há conteúdo escondido: é o
       aviso de "dá para arrastar", sem precisar de script nem de legenda. */
    background-image:
        linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(16, 24, 40, .10), rgba(16, 24, 40, 0)),
        linear-gradient(to left, rgba(16, 24, 40, .10), rgba(16, 24, 40, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Barra de rolagem discreta, para a tabela não ganhar uma faixa cinza grossa */
.tabela-wrap::-webkit-scrollbar { height: 8px; }
.tabela-wrap::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; }
.tabela-wrap::-webkit-scrollbar-track { background: transparent; }

table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); }

table.tabela th {
    text-align: left; padding: 12px; background: var(--superficie-2);
    color: var(--texto-suave); font-size: var(--t-micro); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 750; border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    /* Já teve sticky aqui: dentro de painel ele saía do fluxo e passava por
       cima da primeira linha. A tabela é curta o bastante para não precisar. */
}

table.tabela td {
    padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle;
}

table.tabela tbody tr { transition: background .12s; }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover { background: var(--superficie-2); }
table.tabela tfoot td { font-weight: 800; background: var(--superficie-2); }

/* Números alinhados casa com casa, para comparar de bater o olho */
.td-direita, .th-direita { text-align: right; font-variant-numeric: tabular-nums; }
.td-centro, .th-centro { text-align: center; }
.td-acoes { white-space: nowrap; display: flex; gap: 6px; }

/* ================================================================ Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge-ok { background: var(--verde-claro); color: var(--verde-escuro); }
.badge-danger { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.badge-warn { background: var(--amarelo-claro); color: var(--amarelo-escuro); }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-neutro { background: #eef2f7; color: #475569; }
.badge-roxo { background: #ede9fe; color: #5b21b6; }

/* ================================================================ Alertas */
.alert { padding: 13px 15px; border-radius: var(--raio-sm); margin-bottom: 15px; font-size: 13.5px; border: 1px solid transparent; }
.alert strong { font-weight: 800; }
.alert-danger { background: var(--vermelho-claro); color: var(--vermelho-escuro); border-color: rgba(239, 68, 68, .28); }
.alert-success { background: var(--verde-claro); color: var(--verde-escuro); border-color: rgba(0, 201, 123, .28); }
.alert-warning { background: var(--amarelo-claro); color: var(--amarelo-escuro); border-color: rgba(245, 158, 11, .3); }
.alert-info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
[data-tema="escuro"] .alert-info { background: rgba(59, 130, 246, .16); color: #93c5fd; border-color: rgba(59, 130, 246, .3); }

.vazio {
    padding: 44px 24px; text-align: center; color: var(--texto-suave);
    border: 1px dashed var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie-2); font-size: var(--t-base); line-height: 1.6;
}

.vazio .emoji { font-size: 34px; display: block; margin-bottom: 12px; opacity: .85; }

/* ================================================================ Abas */
.abas { display: flex; gap: 6px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; overflow-x: auto; }

.abas a, .abas button {
    padding: 12px 16px; font-size: var(--t-base); font-weight: 700; color: var(--texto-suave);
    border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;
    white-space: nowrap; font-family: inherit; transition: color var(--transicao), border-color var(--transicao);
}

.abas a.active, .abas button.active { color: var(--texto); border-bottom-color: var(--verde); }

/* ================================================================ Modal */
.modal {
    position: fixed; inset: 0; background: rgba(7, 17, 31, .6); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; z-index: 90; padding: 20px;
}

.modal.aberto { display: flex; }

.modal-box {
    background: var(--superficie); border-radius: 20px; width: 100%; max-width: 560px;
    max-height: 92vh; overflow-y: auto; box-shadow: var(--sombra-forte);
}

.modal-box.grande { max-width: 860px; }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h3 { font-size: 17px; font-weight: 800; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 15px 22px; border-top: 1px solid var(--borda); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-fechar { border: none; background: var(--superficie-2); width: 34px; height: 34px; border-radius: 11px; cursor: pointer; font-size: 16px; color: var(--texto); }

/* ========================================================== Painel
   Barra do dia: estado do caixa e as ações mais repetidas, antes de
   qualquer número e sem precisar rolar a tela. */
.barra-dia {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--sombra);
    position: relative; overflow: hidden;
}

/* Faixa lateral no lugar da borda grossa: mesmo recado, acabamento melhor */
.barra-dia::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--borda-forte);
}

.barra-dia.aberto::before { background: linear-gradient(180deg, var(--ciano), var(--verde)); }

.barra-dia-estado { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.barra-dia-estado strong { display: block; font-size: var(--t-medio); font-weight: 750; letter-spacing: -.01em; }
.barra-dia-estado span { font-size: var(--t-mini); color: var(--texto-suave); }

.barra-dia .bolinha {
    width: 11px; height: 11px; border-radius: 50%; flex: none;
    background: #cbd5e1;
}

.barra-dia.aberto .bolinha {
    background: var(--verde);
    box-shadow: 0 0 0 4px rgba(0, 201, 123, .18);
}

.barra-dia-numeros { display: flex; gap: 24px; padding-left: 20px; border-left: 1px solid var(--borda); }
.barra-dia-numeros span { display: block; font-size: var(--t-micro); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.barra-dia-numeros strong { font-size: var(--t-titulo); font-weight: 750; font-variant-numeric: tabular-nums; }

.barra-dia-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 760px) {
    .barra-dia-numeros { padding-left: 0; border-left: none; }
    .barra-dia-acoes { margin-left: 0; width: 100%; }
    .barra-dia-acoes .btn { flex: 1; justify-content: center; }
}

/* Variação em relação a ontem / ao mês passado */
.stat .variacao { font-weight: 800; margin-right: 6px; }
.stat .variacao.sobe { color: var(--verde-escuro); }
.stat .variacao.desce { color: var(--vermelho-escuro); }

/* Gráfico da semana */
.grafico-semana { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding-top: 8px; }
.grafico-semana .coluna { flex: 1; display: flex; flex-direction: column; height: 100%; text-align: center; }

.grafico-semana .valor {
    font-size: var(--t-micro); font-weight: 700; color: var(--texto-suave); height: 17px;
    font-variant-numeric: tabular-nums;
}

/* O trilho é só uma pista de fundo — sem borda ele não compete com a
   barra, que é o que a pessoa realmente precisa comparar. */
.grafico-semana .trilho {
    flex: 1; display: flex; align-items: flex-end; justify-content: center;
    background: var(--superficie-2); border-radius: 8px;
}

.grafico-semana .barra {
    width: 58%; max-width: 46px; border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #22d3ee, #00c97b);
    transition: height .35s cubic-bezier(.4, 0, .2, 1), filter var(--transicao);
}

.grafico-semana .coluna:hover .barra { filter: brightness(1.08) saturate(1.1); }
.grafico-semana .dia { font-size: var(--t-micro); color: var(--texto-suave); margin-top: 9px; }

/* O dia de hoje ganha destaque: é a coluna que interessa agora */
.grafico-semana .coluna.hoje .dia { font-weight: 800; color: var(--texto); }
.grafico-semana .coluna.hoje .trilho { background: var(--verde-claro); }
.grafico-semana .coluna.hoje .barra { background: linear-gradient(180deg, #00c97b, #059669); }

/* Primeiros passos da loja nova */
.passos { display: grid; gap: 10px; }

.passo {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
    transition: border-color var(--transicao), background var(--transicao);
}

.passo:not(.pronto):hover { border-color: var(--verde); background: var(--superficie-2); }

.passo.pronto { background: var(--superficie-2); border-style: dashed; }

.passo-numero {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--superficie-2); font-weight: 800; font-size: 13px;
}

.passo.pronto .passo-numero { background: var(--verde-claro); color: var(--verde-escuro); }
.passo-texto { flex: 1; min-width: 0; }
.passo-texto strong { display: block; font-size: 14px; font-weight: 700; }
.passo-texto span { font-size: 12.5px; color: var(--texto-suave); }
.passo.pronto .passo-texto strong { text-decoration: line-through; opacity: .65; }

/* Atalhos em grade, em vez de uma pilha de botões iguais */
.atalhos-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }

.atalho {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 14px 8px; border: 1px solid var(--borda); border-radius: 13px;
    font-size: 12px; font-weight: 700; text-align: center; color: var(--texto);
    transition: background .15s, border-color .15s, transform .15s;
}

.atalho:hover { background: var(--superficie-2); border-color: var(--ciano); transform: translateY(-2px); }
.atalho-icone { font-size: 20px; line-height: 1; }

/* ====================================================== Manuais em PDF */
.manual-cartao {
    display: flex; flex-direction: column; gap: 10px;
    padding: 26px; position: relative; overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.manual-cartao::after {
    /* Marca d'água discreta, para o cartão não ser só texto num retângulo */
    content: ""; position: absolute; right: -40px; top: -40px;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 201, 123, .10), transparent 70%);
    pointer-events: none;
}

.manual-cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--verde); }

.manual-icone {
    width: 50px; height: 50px; border-radius: 15px; flex: none;
    display: grid; place-items: center; font-size: 25px;
    background: var(--superficie-2); border: 1px solid var(--borda);
}

.manual-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.manual-cartao h3 { font-size: var(--t-titulo); font-weight: 750; letter-spacing: -.015em; }

.manual-onde {
    font-size: var(--t-mini); color: var(--texto-suave);
    padding-top: 8px; border-top: 1px dashed var(--borda); display: block;
}
.manual-cartao p { color: var(--texto-suave); font-size: var(--t-base); line-height: 1.6; flex: 1; }
.manual-cartao .btn-group { margin-top: 6px; }

/* Pergunta e aviso do sistema (no lugar do confirm/alert do navegador) */
.modal-box.pergunta { max-width: 460px; }
.modal-box.pergunta .modal-head h3 { display: flex; align-items: center; gap: 9px; }
.pergunta-icone { font-size: 19px; line-height: 1; }
.pergunta-texto { font-size: 15px; line-height: 1.6; color: var(--texto); }

.pergunta-detalhe {
    margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--texto-suave);
    background: var(--superficie-2); border-radius: 12px; padding: 11px 13px;
}

/* ================================================================ Toast */
.toast-area { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 130; }

.toast {
    background: var(--escuro); color: #fff; padding: 13px 17px; border-radius: 13px;
    box-shadow: var(--sombra-forte); font-size: 13.5px; font-weight: 600;
    animation: toast-in .22s ease-out; max-width: 340px;
}

.toast.ok { background: #05966a; }
.toast.erro { background: #b91c1c; }
.toast.aviso { background: #b45309; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ================================================================ Utilidades */
.flex { display: flex; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-centro { display: flex; align-items: center; gap: 10px; }
.flex-fim { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.flex-wrap { flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mt-10 { margin-top: 10px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.texto-suave { color: var(--texto-suave); }
.texto-verde { color: var(--verde-escuro); }
.texto-vermelho { color: var(--vermelho-escuro); }
.texto-pequeno { font-size: 12px; }
.texto-direita { text-align: right; }
.texto-centro { text-align: center; }
.negrito { font-weight: 800; }
.nowrap { white-space: nowrap; }

.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; margin-bottom: 16px; }

.paginacao { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

.paginacao a, .paginacao span {
    padding: 9px 13px; border-radius: 10px; font-size: 13px; font-weight: 700;
    background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-suave);
}

.paginacao .atual { background: var(--escuro); color: #fff; border-color: var(--escuro); }

/* Aviso de queda de conexão */
.aviso-offline {
    position: fixed; left: 0; right: 0; top: 0; z-index: 140;
    background: var(--vermelho); color: #fff;
    padding: 10px 16px; font-size: 13.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 4px 14px rgba(239, 68, 68, .35);
}

/* Dica flutuante de atalhos */
.dica-rodape {
    position: fixed; left: calc(var(--sidebar) + 18px); bottom: 16px; z-index: 25;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px;
    padding: 8px 14px; font-size: 12px; color: var(--texto-suave); box-shadow: var(--sombra);
    display: flex; align-items: center; gap: 8px;
}

.dica-rodape kbd { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 5px; padding: 2px 6px; font-family: inherit; font-size: 11px; }
.dica-rodape button { border: none; background: none; cursor: pointer; color: var(--texto-suave); font-size: 14px; }

/* ================================================================ Responsivo */
@media (max-width: 1200px) {
    .busca-global { min-width: 44px; }
    .busca-global span, .busca-global kbd { display: none; }
}

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); width: 270px; }
    .sidebar.ativo { transform: translateX(0); }
    body.menu-recolhido .sidebar { width: 270px; }
    body.menu-recolhido .brand-texto, body.menu-recolhido .menu a .rotulo,
    body.menu-recolhido .menu-busca, body.menu-recolhido .sidebar-footer div { display: block; }
    .main { margin-left: 0; width: 100%; }
    .mobile-menu-btn { display: flex; }
    .topbar { padding: 12px 14px; }
    .topbar h2 { font-size: 16px; }
    .user-info, .topbar p, .chip-caixa span:not(.ponto) { display: none; }
    .content { padding: 14px 12px 40px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .panel { padding: 15px; border-radius: 16px; }
    .dica-rodape { display: none; }
}

@media print {
    .sidebar, .topbar, .no-print, .toast-area, .dica-rodape, .paleta { display: none !important; }
    .main { margin: 0; width: 100%; }
    .content { padding: 0; }
    .panel { box-shadow: none; border: none; }
    body { background: #fff; }
}

/* ---------------------------------------------------------------------
   WhatsApp: botões e o convite que aparece no PDV depois da venda
   ------------------------------------------------------------------- */
.btn-whats, .btn-zap {
    background: #1faa54;
    color: #fff;
    border-color: #1faa54;
}

.btn-whats:hover, .btn-zap:hover { background: #179246; color: #fff; }

.aviso-zap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0f1c2e;
    color: #e8eefc;
    border: 1px solid rgba(31,170,84,.55);
    border-left: 5px solid #1faa54;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    animation: zap-entra .35s cubic-bezier(.2,.9,.3,1);
    max-width: min(380px, calc(100vw - 36px));
}

.aviso-zap strong { display: block; font-size: 14.5px; }
.aviso-zap span { display: block; font-size: 12.5px; color: #93a4bd; margin-top: 2px; }

.aviso-zap a {
    background: #1faa54;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
}

.aviso-zap a:hover { background: #17924e; }

.aviso-zap button {
    background: none;
    border: none;
    color: #7d8ca3;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.aviso-zap button:hover { color: #fff; }

@keyframes zap-entra {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-zap { animation: none; }
}

/* ---------------------------------------------------------------------
   Paginação das listagens
   ------------------------------------------------------------------- */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--borda, rgba(120,140,170,.25));
    font-size: 13px;
}

.paginacao-resumo { color: var(--texto-suave, #64748b); }
.paginacao-resumo strong { color: var(--texto, inherit); }

.paginacao-botoes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.paginacao-botoes a,
.paginacao-botoes .atual {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--borda, rgba(120,140,170,.28));
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    transition: background .12s, border-color .12s;
}

.paginacao-botoes a:hover { background: rgba(120,140,170,.14); }

.paginacao-botoes .atual {
    background: var(--primaria, #2563eb);
    border-color: var(--primaria, #2563eb);
    color: #fff;
}

.paginacao-botoes .reticencias { padding: 0 4px; color: var(--texto-suave, #94a3b8); }

.paginacao-tamanho { display: flex; align-items: center; gap: 5px; color: var(--texto-suave, #64748b); }

.paginacao-tamanho a {
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.paginacao-tamanho a:hover { background: rgba(120,140,170,.14); }

.paginacao-tamanho a.atual {
    border-color: var(--primaria, #2563eb);
    color: var(--primaria, #2563eb);
}

@media (max-width: 720px) {
    .paginacao { justify-content: center; text-align: center; }
    .paginacao-tamanho { display: none; }
}

@media print { .paginacao { display: none; } }

/* ---------------------------------------------------------------------
   Modo suporte e recados do dono do sistema
   ------------------------------------------------------------------- */
.faixa-suporte {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 24px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 13.5px;
    position: sticky;
    top: 0;
    z-index: 45;
}

.faixa-suporte-olho { font-size: 20px; }
.faixa-suporte strong { display: block; font-size: 14px; }
.faixa-suporte span { font-size: 12.5px; opacity: .9; }
.faixa-suporte form { margin-left: auto; }

.faixa-suporte button {
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.16);
    color: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.faixa-suporte button:hover { background: rgba(255,255,255,.28); }

.aviso-sistema {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid var(--borda, rgba(120,140,170,.28));
    border-left: 4px solid #2563eb;
    background: var(--superficie, #fff);
    margin-bottom: 14px;
}

.aviso-sistema.novidade { border-left-color: #7c3aed; }
.aviso-sistema.aviso { border-left-color: #eab308; background: rgba(234,179,8,.06); }
.aviso-sistema.urgente { border-left-color: #ef4444; background: rgba(239,68,68,.07); }
.aviso-icone { font-size: 21px; line-height: 1.2; }
.aviso-corpo { flex: 1; min-width: 0; }
.aviso-corpo strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.aviso-corpo p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .85; }
.aviso-link { display: inline-block; margin-top: 9px; font-size: 13px; font-weight: 700; text-decoration: underline; }

.aviso-fechar {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: .45;
    font-size: 15px;
    padding: 4px 6px;
    line-height: 1;
}

.aviso-fechar:hover { opacity: 1; }

@media print { .faixa-suporte, .aviso-sistema { display: none; } }

/* ==================================================== Painel: telas grandes
   A grade de ícones que resolve o sistema para quem nunca mexeu num: em vez
   de procurar no menu, a pessoa vê o nome do que quer fazer. */
.acoes-grandes {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 20px 22px; margin-bottom: 16px;
    box-shadow: var(--sombra);
}

.acoes-cabeca {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}

.acoes-cabeca h2 { font-size: var(--t-titulo); font-weight: 750; letter-spacing: -.015em; }
.acoes-cabeca p { font-size: var(--t-mini); color: var(--texto-suave); margin-top: 3px; }

.acoes-grade {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.acao {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 7px; padding: 18px 12px 16px;
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--superficie); color: var(--texto);
    transition: transform var(--transicao), box-shadow var(--transicao),
                border-color var(--transicao), background var(--transicao);
    min-height: 128px; justify-content: center;
}

.acao:hover {
    transform: translateY(-3px); box-shadow: var(--sombra-2);
    border-color: var(--verde); background: var(--superficie-2);
}

.acao:active { transform: translateY(-1px); }

.acao-icone {
    font-size: 32px; line-height: 1;
    width: 58px; height: 58px; border-radius: 18px;
    display: grid; place-items: center;
    background: var(--superficie-2); border: 1px solid var(--borda);
}

.acao strong { font-size: var(--t-base); font-weight: 700; letter-spacing: -.01em; }
.acao-nota { font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.4; }

/* A ação principal da loja fica marcada — é a que se usa o dia inteiro */
/* ---- Ações dentro de uma linha de tabela
   Elas reusam a classe ".acao", que é a do bloco GIGANTE do painel
   (128px de altura, coluna, ícone enorme). Sem uma regra própria, cada
   botãozinho de editar/duplicar/inativar virava uma caixa alta e a linha
   da tabela crescia junto — em todos os temas. */
.acoes-linha { display: flex; gap: 5px; align-items: center; justify-content: flex-end; }

.acoes-linha .acao {
    min-height: 0; width: 32px; height: 32px; padding: 0;
    flex-direction: row; gap: 0; font-size: 14px; line-height: 1;
    border-radius: 9px; flex: none;
}

.acoes-linha .acao:hover { background: var(--superficie-2); border-color: var(--borda-forte); transform: none; box-shadow: none; }
.acoes-linha .acao.perigo:hover { background: var(--vermelho-claro); border-color: var(--vermelho); }

.acao.destaque { border-color: var(--verde); background: var(--verde-claro); }
.acao.destaque .acao-icone { background: var(--superficie); border-color: var(--verde); }
.acao.destaque strong { color: var(--verde-escuro); }

.acoes-grandes.recolhido .acoes-grade { display: none; }
.acoes-grandes.recolhido { padding-bottom: 18px; }
.acoes-grandes.recolhido .acoes-cabeca { margin-bottom: 0; }

/* ------------------------------------------------- Ranking com barra */
.ranking { display: grid; gap: 14px; }
.ranking-item { display: flex; gap: 12px; align-items: flex-start; }

.ranking-lugar {
    width: 24px; height: 24px; flex: none; border-radius: 8px;
    display: grid; place-items: center; font-size: var(--t-micro); font-weight: 800;
    background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borda);
}

.ranking-item:first-child .ranking-lugar {
    background: var(--verde-claro); color: var(--verde-escuro); border-color: var(--verde);
}

.ranking-corpo { flex: 1; min-width: 0; }
.ranking-topo { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ranking-topo strong { font-size: var(--t-base); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-topo span { font-size: var(--t-base); font-weight: 750; font-variant-numeric: tabular-nums; flex: none; }
.ranking-trilho { height: 7px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }

.ranking-barra {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #00c97b);
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.ranking-nota { font-size: var(--t-micro); color: var(--texto-suave); margin-top: 4px; display: block; }

/* ---------------------------------------------------------- Rosca */
.rosca-area { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.rosca {
    width: 132px; height: 132px; border-radius: 50%; flex: none;
    display: grid; place-items: center; position: relative;
}

.rosca-centro {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--superficie); display: grid; place-items: center;
    text-align: center; line-height: 1.15;
}

.rosca-centro strong { font-size: 21px; font-weight: 800; }
.rosca-centro span { font-size: var(--t-micro); color: var(--texto-suave); }

.rosca-legenda { flex: 1; min-width: 190px; display: grid; gap: 9px; }
.rosca-linha { display: flex; align-items: center; gap: 9px; font-size: var(--t-base); }
.rosca-cor { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.rosca-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rosca-valor small { color: var(--texto-suave); font-weight: 600; margin-left: 5px; }

@media (max-width: 600px) {
    .acoes-grade { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
    .acao { min-height: 116px; padding: 15px 10px 13px; }
    .acao-icone { width: 50px; height: 50px; font-size: 27px; }
}

/* ================================================== Escolha do tema
   Com cinco temas, os botõezinhos lado a lado ficaram apertados e nome
   nenhum explicava o que a opção faz. Virou uma janela com descrição e
   uma prévia em miniatura das cores de cada tema — escolher só pelo nome
   é adivinhação. */
.tema-atual-selo {
    margin-left: auto;
    font-size: var(--t-micro); font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
    background: var(--superficie-3); color: var(--texto-suave);
}

.modal-box.modal-tema { max-width: 780px; }
.modal-box.modal-tema .modal-head p { font-size: var(--t-sm); color: var(--texto-suave); margin-top: 3px; }

.grade-temas-modal {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 13px; padding: 20px 22px;
}

.cartao-tema-modal {
    display: flex; flex-direction: column; gap: 9px;
    padding: 13px; border-radius: var(--raio-sm); cursor: pointer; text-align: left;
    border: 2px solid var(--borda); background: var(--superficie);
    color: var(--texto); font-family: inherit;
    transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}

.cartao-tema-modal:hover { border-color: var(--verde); transform: translateY(-2px); }
.cartao-tema-modal.ativo { border-color: var(--verde); background: var(--verde-claro); }

.cartao-tema-modal .tema-nome { display: flex; align-items: center; gap: 8px; }
.cartao-tema-modal .tema-emoji { font-size: 17px; line-height: 1; }
.cartao-tema-modal strong { font-size: var(--t-base); font-weight: 700; }
.cartao-tema-modal small { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; }

/* A marca "em uso" só aparece no tema ativo */
.cartao-tema-modal .tema-marca {
    margin-left: auto; font-size: var(--t-micro); font-weight: 800;
    color: var(--verde-escuro); display: none;
}

.cartao-tema-modal.ativo .tema-marca { display: inline; }

/* ---- Prévia em miniatura: menu à esquerda, barra e blocos à direita.
        As cores são as reais de cada tema, escritas à mão aqui porque a
        prévia precisa mostrar o tema OUTRO, não o que está ativo. */
.previa-tema {
    display: flex; gap: 3px; height: 62px; border-radius: 9px; overflow: hidden;
    border: 1px solid var(--borda); padding: 4px; background: #f2f5f9;
}

.previa-menu { width: 26%; border-radius: 5px; background: #07111f; flex: none; }
.previa-corpo { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.previa-barra { height: 26%; border-radius: 4px; background: #fff; }
.previa-bloco { flex: 1; border-radius: 4px; background: #fff; }

.previa-claro { background: #f2f5f9; }
.previa-claro .previa-menu { background: linear-gradient(185deg, #07111f, #0b1a2e); }
.previa-claro .previa-barra, .previa-claro .previa-bloco { background: #fff; }

.previa-escuro { background: #0b1220; border-color: #1e293b; }
.previa-escuro .previa-menu { background: #060b14; }
.previa-escuro .previa-barra, .previa-escuro .previa-bloco { background: #16233a; }

.previa-papel { background: #f4ece0; border-color: #16120d; }
.previa-papel .previa-menu { background: #16120d; }
.previa-papel .previa-barra, .previa-papel .previa-bloco { background: #fbf7f0; border: 1px solid #16120d; }

.previa-facil { background: #f7f4ec; border-color: #1f2937; }
.previa-facil .previa-menu { background: #0b1220; }
.previa-facil .previa-barra { background: #fff; border: 2px solid #1f2937; }
.previa-facil .previa-bloco { background: #fff; border: 2px solid #1f2937; }

/* No tema Gestão o miolo é escuro e os blocos saltam grandes.
   O bloco em destaque é o SEGUNDO filho: o primeiro é a barra do topo.
   Com :first-of-type a regra caía na barra, porque todos são <span>. */
.previa-gestao { background: #0b1220; border-color: #0d9488; }
.previa-gestao .previa-menu { width: 13%; background: #060b14; }
.previa-gestao .previa-barra { height: 20%; background: #101a2b; }
.previa-gestao .previa-bloco { background: #fff; }
.previa-gestao .previa-corpo > span:nth-child(2) { background: linear-gradient(135deg, #0d9488, #0f766e); }

/* Noite e Compacto mudam o LUGAR do menu, e a prévia precisa mostrar isso:
   a coluna da esquerda vira uma faixa embaixo (Noite) ou no topo (Compacto).
   Sem isso as duas pareceriam só "mais um claro" e "mais um escuro". */
.previa-noite { background: #000; border-color: #23262d; flex-direction: column; }
.previa-noite .previa-menu { width: 100%; height: 22%; background: #08090c; order: 2; }
.previa-noite .previa-corpo { order: 1; }
.previa-noite .previa-barra { background: #0c0e12; }
.previa-noite .previa-bloco { background: #0c0e12; border: 1px solid #23262d; }

.previa-compacto { background: #eef1f6; border-color: #c6cedb; flex-direction: column; gap: 2px; }
.previa-compacto .previa-menu { width: 100%; height: 16%; background: #10182a; }
.previa-compacto .previa-corpo { gap: 2px; }
.previa-compacto .previa-barra { height: 18%; background: #fff; }
.previa-compacto .previa-bloco { background: #fff; }

/* O Celular mostra a barra de abas embaixo, que é o que ele muda de fato */
.previa-celular { background: #f1f5f9; border-color: #cbd5e1; flex-direction: column; gap: 3px; }
.previa-celular .previa-corpo { order: 1; gap: 3px; }
.previa-celular .previa-barra { height: 20%; background: #fff; }
.previa-celular .previa-bloco { background: #fff; border-radius: 5px; }

.previa-celular .previa-menu {
    order: 2; width: 100%; height: 26%;
    background: #fff; border-top: 1px solid #cbd5e1;
    display: flex; align-items: center; justify-content: space-around;
}

/* Os pontinhos são as abas — é o que faz a prévia parecer um aplicativo */
.previa-celular .previa-menu::before {
    content: "• • • •";
    font-size: 9px; letter-spacing: 2px; color: #00c97b;
    line-height: 1;
}

@media (max-width: 560px) {
    .grade-temas-modal { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
    .previa-tema { height: 52px; }
}

.tema-escolha { padding: 10px 12px 12px; }

.tema-titulo {
    display: block; font-size: var(--t-micro); font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto-suave); margin-bottom: 8px;
}

.tema-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

.tema-dica {
    margin-top: 9px; font-size: var(--t-micro); line-height: 1.55;
    color: var(--texto-suave);
}

.tema-opcoes button {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--borda); background: var(--superficie-2);
    color: var(--texto); font-size: var(--t-micro); font-weight: 700;
    font-family: inherit; transition: border-color var(--transicao), background var(--transicao);
}

.tema-opcoes button span { font-size: 16px; line-height: 1; }
.tema-opcoes button:hover { border-color: var(--verde); }

.tema-opcoes button.ativo {
    border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro);
}

/* No tema papel os gráficos usam a paleta do site, não o ciano do painel */
[data-tema="papel"] .grafico-semana .barra { background: linear-gradient(180deg, #2ea36c, #0f7b4f); }
[data-tema="papel"] .grafico-semana .coluna.hoje .barra { background: linear-gradient(180deg, #0f7b4f, #0a5738); }
[data-tema="papel"] .grafico-semana .trilho { background: var(--superficie-2); border: 1.5px solid var(--borda); }
[data-tema="papel"] .ranking-barra { background: linear-gradient(90deg, #2ea36c, #0f7b4f); }
[data-tema="papel"] .ranking-trilho { border: 1.5px solid var(--borda); }
[data-tema="papel"] .rosca-centro { border: 2px solid var(--borda); }
[data-tema="papel"] .acao-icone { border: 2px solid var(--borda); }
[data-tema="papel"] .acao { box-shadow: 3px 3px 0 var(--borda); }
[data-tema="papel"] .acao:hover { box-shadow: 5px 5px 0 var(--borda); }
[data-tema="papel"] .acoes-grandes { border: 2px solid var(--borda); }
[data-tema="papel"] .passo, [data-tema="papel"] .manual-icone { border: 2px solid var(--borda); }

/* O documento que sai com senha se anuncia como tal */
.manual-cartao.protegido { border-color: var(--amarelo); }
.manual-cartao.protegido::after { background: radial-gradient(circle, rgba(245,158,11,.14), transparent 70%); }

.manual-senha {
    padding: 11px 13px; border-radius: var(--raio-sm);
    background: var(--amarelo-claro); border: 1px solid var(--amarelo);
    font-size: var(--t-mini); color: var(--amarelo-escuro); line-height: 1.6;
}

.manual-senha code {
    font-family: ui-monospace, Consolas, monospace; font-weight: 700;
    background: var(--superficie); padding: 1px 6px; border-radius: 6px;
    border: 1px solid var(--amarelo);
}

/* No tema papel o menu segue a paleta do site: o realce é o amarelo dele,
   não o ciano do painel. */
[data-tema="papel"] .menu a.active {
    background: linear-gradient(90deg, rgba(255,205,77,.18), rgba(255,205,77,.04));
    border-color: rgba(255,205,77,.35);
}

[data-tema="papel"] .menu a.active svg.icone { color: var(--amarelo); }

[data-tema="papel"] .menu a.active::before {
    background: linear-gradient(180deg, var(--amarelo), #e0a800);
    box-shadow: 0 0 10px rgba(255,205,77,.45);
}

[data-tema="papel"] .brand-icon { box-shadow: 0 4px 14px -4px rgba(255,205,77,.4); }
[data-tema="papel"] .menu-destaque { background: var(--verde); color: #fff; box-shadow: none; }
[data-tema="papel"] .sidebar .menu-busca input[type="text"]:focus {
    border-color: rgba(255,205,77,.5); box-shadow: 0 0 0 3px rgba(255,205,77,.14);
}