/* ==========================================================================
   EAS Varejo — PDV/ERP Multigerencial
   Design system administrativo. Identidade visual: DUARTE mix (Branding/).
   Padrao de tokens herdado do frontend administrativo de referencia (easdrvet).
   ========================================================================== */

/*
 * `hidden` tem que esconder. Sempre.
 *
 * O navegador aplica `display: none` a `[hidden]` pela folha de estilo do
 * USUARIO-AGENTE, que perde para qualquer regra nossa de classe. Entao um
 * componente com `display: flex` no CSS continua VISIVEL mesmo com o atributo
 * `hidden` posto pelo JavaScript.
 *
 * Nao e teoria: a `.ajuda-pop` tem `display: flex` e `position: fixed; inset: 0`.
 * O painel nascia com `hidden`, o CSS o exibia assim mesmo, e o fundo dele —
 * 1265x720, transparente — cobria a tela inteira. Nenhum clique chegava a
 * pagina. A tela parecia congelada, e o motivo nao aparecia em lugar nenhum.
 *
 * `!important` aqui e o uso legitimo da palavra: `hidden` e uma afirmacao do
 * HTML sobre o elemento, e nenhuma regra de aparencia deveria poder contradize-la.
 */
[hidden] { display: none !important; }

:root {
    /* --- marca --------------------------------------------------------- */
    /* Azul institucional DUARTE mix. Toda a escala sai deste tom: o escuro
       para a sidebar, o médio para o que interage (link, botão, aba ativa) e
       o claro para estado de foco. */
    --marca-azul:          #062E62;
    /* Azul exato do LogoAzul.PNG — amostrado do arquivo, não estimado. */
    --marca-azul-logo:     #042A5C;
    --marca-azul-escuro:   #04203f;
    --marca-azul-medio:    #0a4a99;
    --marca-azul-claro:    #2f78d4;
    --marca-amarelo:       #efd04a;
    --marca-amarelo-forte: #d9b62f;

    --primary:      var(--marca-azul);
    --primary-rgb:  6, 46, 98;
    --primary-5:    rgba(6, 46, 98, .05);
    --primary-10:   rgba(6, 46, 98, .10);
    --primary-20:   rgba(6, 46, 98, .20);

    /* --- superficies --------------------------------------------------- */
    --page-bg:      #f1f4f9;
    --surface:      #ffffff;
    --surface-2:    #f7f9fc;
    --surface-3:    #eef2f8;
    --border:       #dde4ee;
    --border-forte: #c7d2e3;

    --sidebar-bg:      var(--marca-azul);
    --sidebar-bg-2:    var(--marca-azul-escuro);
    --sidebar-text:    rgba(255, 255, 255, .82);
    --sidebar-text-on: #ffffff;

    /* --- texto --------------------------------------------------------- */
    --text-base:      #10203a;
    --text-secondary: #44566f;
    --text-muted:     #7c8ca3;

    /* --- semantica ----------------------------------------------------- */
    --sucesso:      #0f9d58;
    --sucesso-soft: rgba(15, 157, 88, .12);
    --perigo:       #dc3545;
    --perigo-soft:  rgba(220, 53, 69, .12);
    --aviso:        #e08c00;
    --aviso-soft:   rgba(224, 140, 0, .14);
    --info:         #1668c9;
    --info-soft:    rgba(22, 104, 201, .12);
    --neutro:       #64748b;
    --neutro-soft:  rgba(100, 116, 139, .12);

    /* --- forma --------------------------------------------------------- */
    /* Linha divisória interna: mais clara que a borda do container, para
       separar seções sem competir com a moldura da página. */
    --border-suave: #eef1f4;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;

    --shadow-xs: 0 1px 2px rgba(13, 43, 94, .06), 0 1px 3px rgba(13, 43, 94, .05);
    --shadow-sm: 0 4px 12px rgba(13, 43, 94, .08);
    --shadow-md: 0 10px 28px rgba(13, 43, 94, .12);
    --shadow-lg: 0 20px 48px rgba(13, 43, 94, .18);

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'DM Mono', monospace;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* --- sidebar (mesmo padrão do guugproject) ------------------------- */
    --sidebar-w:         262px;
    --sidebar-compact-w: 76px;
    --header-h:          62px;
    --transition:        .28s cubic-bezier(.4, 0, .2, 1);

    /* papéis de cor da sidebar, mapeados na identidade DUARTE mix */
    /* O azul do ARQUIVO da marca. Diferente de --marca-azul (#062E62), que é
       o azul de interface: botão, link, aba ativa. Misturar os dois é o que
       criava a diferença de tom em volta do logo. */
    --sb-bg:      var(--marca-azul-logo);
    --sb-bg-2:    var(--marca-azul-escuro);
    --sb-border:  rgba(255, 255, 255, .08);
    --sb-txt:     rgba(255, 255, 255, .62);
    --sb-txt-dim: rgba(255, 255, 255, .34);
    --sb-hover:   rgba(255, 255, 255, .07);

    --accent:        var(--marca-amarelo);
    --accent-dim:    rgba(239, 208, 74, .13);
    --accent-border: rgba(239, 208, 74, .35);
    --red:           #e5484d;
    --red-dim:       rgba(229, 72, 77, .12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--page-bg);
    color: var(--text-base);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -.2px; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* ==========================================================================
   Shell: sidebar + topbar + conteúdo

   Sidebar segue o mesmo padrão do guugproject: três estados controlados por
   classe, e é o `padding-left` do body que reserva o espaço — não margem no
   conteúdo. Isso faz a transição de abrir/fechar acontecer em um lugar só.

     .sidebar.locked   fixa e aberta (padrão ao entrar)
     .sidebar.hoverable liberada: recolhe ao tirar o mouse, expande ao voltar
     .sidebar.close    recolhida (só ícones)
     .sidebar.mobile-open  gaveta aberta sobre o conteúdo, no celular
   ========================================================================== */

/*
 * O recuo da barra lateral vale so para as telas que TEM barra lateral.
 *
 * Esta regra era `body { ... }` solta. Mas o app.css e carregado tambem pelo
 * PDV e pelo login, que nao tem barra: as duas telas ganhavam 262px de vazio
 * na esquerda, e o vazio nao tem borda nem cor propria — a tela so parecia
 * estreita, sem dizer por que.
 *
 * Quem tem barra e o layout administrativo, e agora ele diz isso no proprio
 * <body>.
 */
body.tem-sidebar {
    padding-left: var(--sidebar-w);
    transition: padding-left var(--transition);
}

body.tem-sidebar.sidebar-compact { padding-left: var(--sidebar-compact-w); }

.flex-linha { display: flex; align-items: center; }

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-w);
    /* Cor chapada, e exatamente a do arquivo da marca (#042A5C).
       Com gradiente o logo só casava numa altura da barra — em qualquer outra
       aparecia a emenda que se via na captura. */
    background: var(--sb-bg);
    padding: 16px 12px;
    border-right: 1px solid var(--sb-border);
    transition: all .4s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.sidebar.close { width: var(--sidebar-compact-w); }

/* --- topo da sidebar: marca + trava ---------------------------------- */

.logo_items {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    justify-content: space-between;
    flex-shrink: 0;
}

/*
 * Sem o rótulo "Varejo" ao lado, o logo ganha a barra inteira — que era o
 * objetivo de tirá-lo. O lockup passa a ocupar toda a largura em vez de
 * dividir espaço com um texto.
 */
.brand_lockup {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}
.brand_lockup:hover { text-decoration: none; }

/*
 * .nav_image é usada em DOIS lugares: o logo, no topo, e o avatar do perfil,
 * no rodapé. Dar width: 100% na classe solta esticou o avatar junto e empurrou
 * o nome do usuário para fora da barra.
 *
 * A largura cheia é do logo, e só dele — por isso a regra é escopada ao
 * lockup da marca.
 */
.nav_image { display: flex; min-width: 52px; justify-content: center; }
.brand_lockup .nav_image { width: 100%; }

/*
 * Duas artes da mesma marca. Aberta entra o logotipo (4.8:1); recolhida entra
 * a versão compacta (3.4:1), que sem o texto lateral aproveita muito melhor os
 * 52px úteis da barra.
 *
 * Ambas dimensionam pela LARGURA: é a largura que a barra restringe, não a
 * altura.
 */
.brand-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.brand-logo-completo { max-width: 200px; }
.brand-logo-compacto { display: none; max-width: 52px; }

.logo_name strong { color: var(--accent); font-weight: 800; }

#lock-icon {
    background: none;
    border: 0;
    padding: 9px;
    color: var(--accent);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, opacity .3s ease;
}
#lock-icon:hover { background: var(--sb-hover); }
#lock-icon i { font-size: 15px; }

.sidebar-mobile-close,
.sidebar-backdrop { display: none; }

.sidebar.close #lock-icon {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

/* Recolhida (76px de barra, 52 úteis): troca o logotipo pela marca compacta. */
.sidebar.close .brand-logo-completo,
.sidebar.hoverable:not(:hover) .brand-logo-completo { display: none; }

.sidebar.close .brand-logo-compacto,
.sidebar.hoverable:not(:hover) .brand-logo-compacto { display: block; }

/* --- menu ------------------------------------------------------------ */

.menu_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 18px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.menu_items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}
.menu_items::-webkit-scrollbar { display: none; }
.menu_items { scrollbar-width: none; }

.menu_item { list-style: none; margin: 0; padding: 0; }

.menu_title {
    position: relative;
    height: 44px;
    width: 52px;
    display: flex;
    align-items: center;
}

.menu_title .title {
    margin-left: 14px;
    color: var(--sb-txt-dim);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .3s ease;
}

.menu_title .line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 18px;
    border-radius: 25px;
    background: var(--sb-txt-dim);
    opacity: 0;
    transition: opacity .3s ease;
}

.sidebar.close .menu_title .title { opacity: 0; }
.sidebar.close .menu_title .line { opacity: 1; }

.item { list-style: none; }

.link {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    margin-bottom: 6px;
    color: var(--sb-txt);
    min-height: 46px;
    font-size: .9rem;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
}

/*
 * Amarelo no hover e no item aberto.
 *
 * O realce era branco translúcido no hover e azul no ativo — duas cores para
 * dizer a mesma coisa ("é aqui"), e nenhuma delas a da marca. O amarelo já é o
 * destaque do sistema: está no avatar da loja, na barra do item ativo e no
 * total do PDV. Usar outra coisa no menu obrigava o olho a aprender um segundo
 * código.
 *
 * O hover é o tom fraco; o item aberto é o amarelo cheio, com texto escuro —
 * amarelo sobre amarelo não se lê.
 */
.link:hover {
    color: var(--marca-amarelo);
    background: var(--accent-dim);
    text-decoration: none;
}
.link:hover .link-icon { color: var(--marca-amarelo); }

.link.active {
    color: var(--marca-azul-escuro);
    background: var(--accent);
    font-weight: 700;
}

.link .link-icon {
    height: 46px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.link .link-icon i { font-size: 16px; }

.nav-badge {
    margin-left: auto;
    margin-right: 12px;
    background: var(--red);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    border-radius: 99px;
    min-width: 20px;
    padding: 1px 6px;
    text-align: center;
    line-height: 1.6;
    flex-shrink: 0;
}
.link.active .nav-badge { background: #fff; color: var(--red); }

/* Ponto de aviso que aparece no modo compacto, quando o texto some */
.link-dot {
    position: absolute;
    top: 9px;
    right: 11px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid var(--sb-bg);
    opacity: 0;
    transition: opacity .2s ease;
}
.sidebar.close .link-dot { opacity: 1; }
.sidebar.close .nav-badge { opacity: 0; width: 0; padding: 0; margin: 0; overflow: hidden; }

.link span:not(.link-icon) { transition: opacity .2s ease; }

.sidebar.close .link span:not(.link-icon),
.sidebar.close .data_text {
    opacity: 0;
    pointer-events: none;
}

/* --- rodapé da sidebar: sair + perfil -------------------------------- */

.sidebar_footer {
    padding-top: 10px;
    margin-top: 12px;
    border-top: 1px solid var(--sb-border);
    overflow: hidden;
    flex-shrink: 0;
}

.logout_form { width: 100%; }

.logout_link {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    cursor: pointer;
    font-family: inherit;
}
.logout_link:hover { background: var(--red-dim); color: #f87171; }

/*
 * O bloco do usuario virou link para /meu-perfil.
 *
 * Como <a> ele herda o sublinhado e a cor de link do resto do sistema, que
 * dentro da barra escura ficaria berrante — o realce aqui e o fundo, do mesmo
 * jeito que os itens do menu acima dele se comportam.
 */
.sidebar_profile {
    display: flex; align-items: center; gap: 0;
    overflow: hidden; min-width: 0;
    padding: 6px; margin: -6px;
    border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: background .18s var(--ease);
}
.sidebar_profile:hover,
.sidebar_profile:focus-visible {
    background: rgba(255, 255, 255, .09);
    text-decoration: none; color: inherit;
}
.sidebar_profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sidebar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 1.5px solid var(--accent-border);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.sidebar_profile .data_text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity .2s ease;
}

.sidebar_profile .name {
    font-size: .88rem;
    color: #fff;
    font-weight: 600;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar_profile .role { font-size: .72rem; color: var(--sb-txt); white-space: nowrap; }

/* ==========================================================================
   Estrutura principal
   ========================================================================== */

.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-6);
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: var(--shadow-xs);
}

.topbar-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-secondary);
    padding: 6px;
}

.seletor-unidade { position: relative; }
.seletor-unidade select {
    appearance: none;
    background: var(--surface-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2344566f' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 30px 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    max-width: 280px;
}
.seletor-unidade select:focus { outline: 2px solid var(--primary-20); border-color: var(--primary); }

.topbar-espaco { flex: 1; }

.topbar-usuario { display: flex; align-items: center; gap: var(--sp-3); }
.usuario-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--marca-azul); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.usuario-info { line-height: 1.2; }
.usuario-nome { font-size: 13px; font-weight: 600; }
.usuario-perfil { font-size: 11px; color: var(--text-muted); }

.app-conteudo { padding: var(--sp-6); flex: 1; }

/* ==========================================================================
   Cabecalho de pagina
   ========================================================================== */

/*
 * O cabeçalho de página deixou de ser um card próprio: hoje é a primeira
 * faixa dentro de .page-container — ver .page-header, mais abaixo.
 *
 * As classes .pagina-* foram removidas em vez de neutralizadas. Deixá-las com
 * `display:none` faria markup antigo copiado sumir da tela sem erro nenhum;
 * sem regra, ele aparece sem estilo — feio, mas visível, que é o que leva
 * alguém a corrigir.
 */

/* ==========================================================================
   Cards / paineis
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.card-cabecalho {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    background: var(--surface-2);
    flex-wrap: wrap;
}
.card-titulo { font-size: 14px; font-weight: 700; margin: 0; }
.card-corpo { padding: var(--sp-5); }
.card-corpo.sem-padding { padding: 0; }

.grade { display: grid; gap: var(--sp-4); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- indicadores (KPI) ------------------------------------------------ */





/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-wrap { overflow-x: auto; }

table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.tabela th {
    text-align: left;   /* padrão; .num e .texto-centro sobrescrevem abaixo */
    padding: 10px var(--sp-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-secondary);
    white-space: nowrap;
}
table.tabela td {
    padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--surface-3);
    vertical-align: middle;
}

/*
 * Alinhamento de coluna, com peso suficiente para valer.
 *
 * `.num` sozinho tem especificidade (0,1,0) e perdia para
 * `table.tabela th` (0,1,2): a célula obedecia e o cabeçalho não, e a coluna
 * ficava com o título à esquerda e o número à direita. É o desalinho que
 * aparecia na tela mesmo com o HTML correto — por isso conferir só o markup
 * não bastava.
 */
table.tabela th.num,
table.tabela td.num,
table.tabela th.texto-direita,
table.tabela td.texto-direita { text-align: right; }

table.tabela th.texto-centro,
table.tabela td.texto-centro { text-align: center; }
table.tabela tbody tr:hover { background: var(--primary-5); }
table.tabela tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 12px; }

.vazio {
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    color: var(--text-muted);
}
.vazio .vazio-ico { font-size: 30px; opacity: .35; display: block; margin-bottom: var(--sp-3); }

/* ==========================================================================
   Badges e chips
   ========================================================================== */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.badge-sucesso { background: var(--sucesso-soft); color: var(--sucesso); }
.badge-perigo  { background: var(--perigo-soft);  color: var(--perigo); }
.badge-aviso   { background: var(--aviso-soft);   color: var(--aviso); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-neutro  { background: var(--neutro-soft);  color: var(--neutro); }
.badge-marca   { background: rgba(239, 208, 74, .22); color: #8a6d00; }

.chip-tipo {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.chip-matriz { background: var(--marca-azul); color: #fff; }
.chip-cdi    { background: var(--marca-amarelo); color: #4a3c00; }
.chip-filial { background: var(--info-soft); color: var(--info); }

/* ==========================================================================
   Botoes
   ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s var(--ease);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.desabilitado { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primario   { background: var(--primary); color: #fff; }
.btn-primario:hover { background: #12407f; color: #fff; }
.btn-marca      { background: var(--marca-amarelo); color: #4a3c00; }
.btn-marca:hover { background: var(--marca-amarelo-forte); color: #3b2f00; }
.btn-secundario { background: var(--surface); color: var(--text-secondary); border-color: var(--border-forte); }
.btn-secundario:hover { background: var(--surface-2); color: var(--text-base); }
.btn-perigo     { background: var(--perigo); color: #fff; }
.btn-perigo:hover { background: #b52d3a; color: #fff; }
.btn-sucesso    { background: var(--sucesso); color: #fff; }
.btn-sucesso:hover { background: #0b7f46; color: #fff; }
.btn-pequeno    { padding: 5px 11px; font-size: 12px; }
.btn-bloco      { width: 100%; }

.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-grade { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 12; }
.c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; }
.c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-8 { grid-column: span 8; }
.c-9 { grid-column: span 9; } .c-12 { grid-column: span 12; }

.campo label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.campo label .obrig { color: var(--perigo); }

.campo input:not([type]), .campo input[type="text"], .campo input[type="password"], .campo input[type="number"],
.campo input[type="email"], .campo input[type="date"], .campo input[type="datetime-local"],
.campo input[type="tel"], .campo input[type="search"], .campo input[type="url"],
.campo input[type="time"], .campo input[type="month"], .campo input[type="week"],
.campo input[type="file"], .campo select, .campo textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border-forte);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-base);
    background: var(--surface);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-10);
}
.campo input:disabled, .campo select:disabled { background: var(--surface-3); color: var(--text-muted); }
.campo .ajuda { font-size: 11.5px; color: var(--text-muted); }
.campo .erro-campo { font-size: 11.5px; color: var(--perigo); font-weight: 600; }
.campo.tem-erro input, .campo.tem-erro select, .campo.tem-erro textarea { border-color: var(--perigo); }

.form-acoes {
    display: flex; gap: var(--sp-3); justify-content: flex-end;
    padding-top: var(--sp-4); margin-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.check-linha { display: flex; align-items: center; gap: 8px; }
.campo > .check-linha { min-height: 40px; }
.check-linha input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.check-linha label { font-size: 13px; font-weight: 500; color: var(--text-base); cursor: pointer; }

/*
 * Padrão único dos formulários de página.
 *
 * As views administrativas usam combinações diferentes de campos, mas não
 * devem inventar altura, raio, fonte e botão em cada tela. O contêiner define
 * a linguagem; a grade continua escolhendo apenas a largura necessária.
 */
.page-container form:not(.filtros) .campo > label {
    font-size: 11.5px;
    font-weight: 700;
}

.page-container form:not(.filtros) .btn {
    min-height: 36px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
}

.page-container form:not(.filtros) .form-acoes {
    gap: 10px;
}

.filtros {
    display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.filtros .campo { flex: 1 1 170px; grid-column: auto; min-width: 150px; }

/* ==========================================================================
   Alertas / flash
   ========================================================================== */

.alerta {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: 11px var(--sp-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
    font-size: 13px;
    font-weight: 500;
    border-left: 4px solid;
}
.alerta-sucesso { background: var(--sucesso-soft); color: #0a6b3c; border-color: var(--sucesso); }
.alerta-erro    { background: var(--perigo-soft);  color: #9b2530; border-color: var(--perigo); }
.alerta-aviso   { background: var(--aviso-soft);   color: #8a5600; border-color: var(--aviso); }
.alerta-info    { background: var(--info-soft);    color: #10508f; border-color: var(--info); }

/* ==========================================================================
   Paginacao
   ========================================================================== */

.paginacao {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.paginacao-links { display: flex; gap: 4px; }
.paginacao-links a, .paginacao-links span {
    padding: 5px 10px;
    border: 1px solid var(--border-forte);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
}
.paginacao-links a:hover { background: var(--primary-5); border-color: var(--primary); text-decoration: none; }
.paginacao-links .atual { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-fundo {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(8, 29, 67, .55);
    display: none; align-items: center; justify-content: center;
    padding: var(--sp-5);
    backdrop-filter: blur(2px);
}
.modal-fundo.aberto { display: flex; }
.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 620px;
    max-height: 90vh; display: flex; flex-direction: column;
    animation: modalEntra .2s var(--ease);
}
.modal-grande { max-width: 900px; }
@keyframes modalEntra { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-cabecalho {
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-corpo { padding: var(--sp-5); overflow-y: auto; }
.modal-rodape { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; gap: var(--sp-3); justify-content: flex-end; }
.modal-fechar { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); }

/* ==========================================================================
   Utilitarios
   ========================================================================== */

.texto-mudo { color: var(--text-muted); }
.texto-perigo { color: var(--perigo); }
.texto-sucesso { color: var(--sucesso); }
.texto-forte { font-weight: 700; }
.texto-pequeno { font-size: 12px; }
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.oculto { display: none !important; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.flex { display: flex; } .flex-entre { justify-content: space-between; } .flex-centro { align-items: center; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.largura-total { width: 100%; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* Abaixo de 800px a sidebar vira gaveta sobre o conteudo, com backdrop —
   mesmo comportamento do guugproject. */
@media (max-width: 800px) {
    body,
    body.sidebar-compact,
    body.tem-sidebar,
    body.tem-sidebar.sidebar-compact { padding-left: 0; }

    body.sidebar-mobile-open { overflow: hidden; }

    .sidebar,
    .sidebar.close {
        left: 0;
        width: min(88vw, 330px);
        padding: 16px 12px;
        transform: translateX(-105%);
        box-shadow: 18px 0 42px rgba(8, 29, 67, .32);
        transition: transform var(--transition);
    }

    .sidebar.mobile-open,
    .sidebar.close.mobile-open { transform: translateX(0); }

    .logo_items { width: 100%; justify-content: space-between; }
    .brand_lockup { width: auto; justify-content: flex-start; }
    .nav_image { width: auto; min-width: 52px; justify-content: center; }


    /* na gaveta o texto sempre aparece, mesmo se estava recolhida no desktop */
    .logo_name,
    .menu_title .title,
    .link span:not(.link-icon),
    .data_text,
    .sidebar.close .menu_title .title,
    .sidebar.close .link span:not(.link-icon),
    .sidebar.close .data_text { opacity: 1; pointer-events: auto; width: auto; overflow: visible; }

    .sidebar.close .menu_title .line { opacity: 0; }
    .sidebar.close .link-dot { opacity: 0; }
    .sidebar.close .nav-badge { opacity: 1; width: auto; padding: 1px 6px; margin-left: auto; margin-right: 12px; }

    #lock-icon { display: none; }

    .sidebar-mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 0;
        border-radius: 9px;
        background: var(--sb-hover);
        color: #fff;
        cursor: pointer;
        font-size: 16px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        padding: 0;
        background: rgba(8, 29, 67, .55);
        z-index: 999;
        cursor: pointer;
    }
    .sidebar-backdrop[hidden] { display: none; }

    .topbar-toggle { display: block; }
    .app-conteudo { padding: var(--sp-4); }
}

@media (max-width: 640px) {
    .form-grade > .campo { grid-column: span 12 !important; }
    .usuario-info { display: none; }
}

@media print {
    .sidebar, .topbar, .pagina-acoes, .form-acoes, .paginacao,
    .sidebar-backdrop { display: none !important; }

    body, body.sidebar-compact { padding-left: 0; }
    .card { box-shadow: none; border-color: #ccc; }
    body { background: #fff; }
}

/* ---------------------------------------------------------------------------
   Imagem do produto
   A previa tem tamanho fixo: sem isso a tela pula quando a foto carrega, e o
   usuario perde o lugar onde estava clicando.
--------------------------------------------------------------------------- */
.produto-imagem-linha { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.produto-imagem-previa {
    width: 148px; height: 148px; flex: 0 0 148px;
    border: 1px dashed var(--border); border-radius: 10px;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.produto-imagem-previa img { width: 100%; height: 100%; object-fit: contain; }
.produto-imagem-vazia { font-size: 34px; color: var(--text-muted); opacity: .5; }

.produto-imagem-controles { flex: 1 1 280px; min-width: 260px; }
.produto-imagem-controles input[type="file"] {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--text-base);
}

/* miniatura na listagem */
.produto-miniatura {
    width: 38px; height: 38px; border-radius: 6px; object-fit: cover;
    background: var(--surface-3); border: 1px solid var(--border);
}
.produto-miniatura-vazia {
    width: 38px; height: 38px; border-radius: 6px;
    background: var(--surface-3); border: 1px dashed var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); opacity: .45; font-size: 13px;
}

/* miniatura de foto na central de crachás */
.cracha-foto-mini {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--border); background: var(--surface-3);
}
.cracha-foto-mini.vazia {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); opacity: .45; font-size: 13px;
    border-style: dashed;
}

/* ---------------------------------------------------------------------------
   Escolha do modelo de crachá
   A miniatura mostra a PROPORÇÃO do cartão: "vertical/horizontal" em texto
   obriga o leitor a imaginar o formato; o desenho responde na hora.
--------------------------------------------------------------------------- */
.cracha-opcao {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.cracha-opcao:hover { border-color: var(--primary); }
.cracha-opcao.escolhida { border-color: var(--marca-azul); background: var(--primary-10); }
.cracha-opcao input { margin-top: 3px; flex: none; }
.cracha-opcao > span:last-child { display: flex; flex-direction: column; gap: 3px; }

.cracha-opcao-arte { display: flex; gap: 3px; flex: none; align-items: center; }
.cracha-opcao-arte .peca {
    display: block; border: 1px solid var(--border); border-radius: 3px;
    background: var(--surface-3);
}
.cracha-opcao-arte.vertical .peca { width: 17px; height: 27px; }
.cracha-opcao-arte.horizontal .peca { width: 27px; height: 17px; }
.cracha-opcao.escolhida .cracha-opcao-arte .peca {
    border-color: var(--marca-azul); background: var(--marca-azul);
}

/* ===========================================================================
   ABAS — o padrão de navegação dentro da página

   Substituem a pilha de cards que obrigava a rolar a tela inteira para achar
   uma seção. A aba responde "onde estou" sem rolagem, e o conteúdo que não
   interessa agora simplesmente não ocupa espaço.
   =========================================================================== */
.abas { margin-top: 18px; }

.abas-nav {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
.abas-nav::-webkit-scrollbar { display: none; }

.aba-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.aba-botao:hover { color: var(--text-base); }
.aba-botao.ativa { color: var(--marca-azul); border-bottom-color: var(--marca-azul); }

.aba-contador {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--surface-3);
    font-size: 11px; font-weight: 800;
}
.aba-botao.ativa .aba-contador { background: var(--primary-10); color: var(--marca-azul); }

.aba-painel[hidden] { display: none; }

.aba-painel-cabecalho { margin-bottom: 18px; }
.aba-painel-cabecalho h2 { font-size: 17px; margin-bottom: 3px; }
.aba-painel-cabecalho p { font-size: 13px; color: var(--text-secondary); }

/* ===========================================================================
   Seletor de loja, agora dentro da sidebar
   =========================================================================== */
/* ===========================================================================
   Seletor de loja

   Era um <select> nativo: funcionava, mas espremia "Loja 02 - Zona Sul" numa
   linha só, sem separar o que é o nome da loja do que é o bairro, e sem dizer
   quais unidades estão ativas.
=========================================================================== */
.loja-seletor { position: relative; padding: 0 14px 12px; }

.loja-seletor__rotulo {
    display: block; margin-bottom: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--sb-txt-dim, #93a3b8);
}

/* --- o gatilho */

.loja-seletor__gatilho {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #fff; font-family: inherit; text-align: left;
    cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.loja-seletor__gatilho:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
}
.loja-seletor__gatilho:focus-visible {
    outline: 2px solid var(--marca-amarelo);
    outline-offset: 2px;
}

/*
 * `min-width: 0` no texto é o que permite o `text-overflow` funcionar.
 *
 * Sem ele o filho flex usa a largura do conteúdo como mínimo, o nome longo
 * empurra os ícones para fora do botão e nada é cortado — o oposto do que a
 * reticência deveria fazer.
 */
.loja-seletor__texto {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; line-height: 1.25;
}
.loja-seletor__titulo {
    font-size: 13.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loja-seletor__sub {
    font-size: 11px; color: var(--sb-txt-dim, #93a3b8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.loja-seletor__icones {
    flex: none; display: flex; align-items: center; gap: 7px;
    color: var(--sb-txt-dim, #93a3b8); font-size: 11px;
}
.loja-seletor__chevron { transition: transform .2s var(--ease); }
.loja-seletor[aria-expanded="true"] .loja-seletor__chevron,
.loja-seletor.is-aberto .loja-seletor__chevron { transform: rotate(180deg); }

/* o ícone de troca gira enquanto o formulário envia */
.loja-seletor.is-trocando .loja-seletor__sync {
    animation: lojaGirando .8s linear infinite;
}
@keyframes lojaGirando { to { transform: rotate(360deg); } }

/* --- o avatar */

.loja-avatar {
    flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marca-amarelo, #f59e0b);
    color: #3b2f00;
    font-size: 12px; font-weight: 800; letter-spacing: -.3px;
}
.loja-avatar--todas { background: rgba(255, 255, 255, .16); color: #fff; }
.loja-avatar--cdi   { background: #64748b; color: #fff; }

/* --- o menu flutuante */

.loja-menu {
    position: absolute;
    top: calc(100% - 6px); left: 14px; right: 14px;
    z-index: 60;
    padding: 6px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(4, 16, 40, .28);

    display: flex; flex-direction: column; gap: 2px;
    max-height: 320px; overflow-y: auto;
}
.loja-menu[hidden] { display: none; }

.loja-menu__item {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 9px;
    background: transparent; border: 0; border-radius: 9px;
    color: var(--text-base); font-family: inherit; text-align: left;
    cursor: pointer;
    transition: background .15s var(--ease);
}
.loja-menu__item:hover { background: var(--surface-3, #f1f5f9); }
.loja-menu__item:focus-visible { outline: 2px solid var(--marca-azul); outline-offset: -2px; }

/* o item em uso: fundo âmbar suave, como o avatar */
.loja-menu__item.is-ativa { background: #fef3c7; }
.loja-menu__item.is-ativa:hover { background: #fde68a; }

.loja-menu__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.loja-menu__titulo {
    font-size: 13px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loja-menu__sub {
    font-size: 11px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.loja-badge {
    flex: none;
    padding: 2px 7px; border-radius: 999px;
    font-size: 9px; font-weight: 800; letter-spacing: .5px;
}
.loja-badge--ativa   { background: #dcfce7; color: #166534; }
.loja-badge--inativa { background: var(--surface-3, #e2e8f0); color: var(--text-muted); }
.loja-badge--grupo   { background: #dbeafe; color: #1e40af; }

/* Na barra recolhida o seletor nao cabe — e um seletor cortado e pior que
   nenhum: some junto com os rotulos. */
.sidebar.close .loja-seletor,
.sidebar.hoverable:not(:hover) .loja-seletor { display: none; }

@media (prefers-reduced-motion: reduce) {
    .loja-seletor__chevron,
    .loja-seletor__gatilho,
    .loja-menu__item { transition: none; }
    .loja-seletor.is-trocando .loja-seletor__sync { animation: none; }
}


/* ===========================================================================
   Navegação inferior — celular

   O polegar alcança a base da tela; o canto superior esquerdo, não. Some no
   desktop, onde a sidebar já resolve.
   =========================================================================== */
.mobile-app-nav { display: none; }

@media (max-width: 800px) {
    .mobile-app-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: flex; justify-content: space-around; align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 14px rgba(0,0,0,.08);
    }

    .mobile-app-nav-item {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px;
        border: 0; background: none;
        color: var(--text-secondary);
        font-family: inherit; font-size: 10px; font-weight: 700;
        text-decoration: none; cursor: pointer;
    }
    .mobile-app-nav-item i { font-size: 17px; }
    .mobile-app-nav-item.active { color: var(--marca-azul); }

    .mobile-app-nav-create .mobile-app-nav-plus {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; margin-top: -14px;
        border-radius: 50%;
        background: var(--marca-azul); color: #fff;
        box-shadow: 0 3px 10px rgba(6, 46, 98, .35);
    }
    .mobile-app-nav-create .mobile-app-nav-plus i { font-size: 17px; }

    /* espaço para a barra não cobrir o fim do conteúdo */
    .app-conteudo { padding-bottom: 74px; }
}

/* ==========================================================================
   CONTAINER ÚNICO DA PÁGINA

   Antes cada bloco da tela — cabeçalho, filtros, tabela, formulário — era um
   card branco com borda e sombra própria. O resultado era um empilhamento de
   retângulos flutuando sobre o fundo: seis bordas para ler uma tela, e nenhuma
   delas dizendo nada sobre hierarquia.

   Agora a página é UMA superfície. As divisórias internas são linhas, não
   caixas — separam sem recortar. Card continua existindo, mas só para o que é
   mesmo um componente independente: KPI, indicador, widget.

       .page-container          a superfície branca da página
         .page-header           título, descrição e ações
         .page-tabs             abas
         .page-toolbar          filtros e busca
         .page-body             conteúdo
           .page-section        blocos internos, separados por linha
   ========================================================================== */

.page-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: var(--sp-5);
}

/* --------------------------------------------------------------- cabeçalho */

.page-header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border-suave, var(--border));
}

.page-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.page-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

.page-title { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.3px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; max-width: 70ch; }

.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------------- abas */

.page-tabs {
    padding: 0 var(--sp-6);
    border-bottom: 1px solid var(--border-suave, var(--border));
    background: var(--surface-2);
}

/* A barra de abas já desenha a própria linha; dentro do container ela seria
   uma segunda linha em cima da primeira. */
.page-tabs .abas-nav { border-bottom: 0; margin-bottom: 0; }
.page-tabs .abas { margin-top: 0; }

/* ------------------------------------------------------ filtros e barra de ação */

.page-toolbar {
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border-suave, var(--border));
    background: var(--surface-2);
}

.page-toolbar .filtros { margin: 0; }

/* ---------------------------------------------------------------- conteúdo */

.page-body { padding: var(--sp-5) var(--sp-6); }

/* Tabela encosta na borda: dentro do container, o respiro lateral da página
   já é o respiro da tabela. Padding duplo só empurraria as colunas. */
.page-body.sem-padding { padding: 0; }
.page-body > .tabela-wrap:only-child { margin: 0 calc(var(--sp-6) * -1) calc(var(--sp-5) * -1); }

/* ------------------------------------------------------- seções internas */

.page-section { }

.page-section + .page-section {
    border-top: 1px solid var(--border-suave, var(--border));
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
}

/*
 * Bloco que nao pertence ao formulario acima.
 *
 * Usado por acoes com POST proprio — redefinir senha, por exemplo — que ficavam
 * coladas no rodape do formulario principal e pareciam fazer parte dele. O
 * afastamento maior e a borda dizem que ali comeca outra coisa.
 */
.page-section-apartada {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 2px solid var(--border);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.section-header h2,
.section-title { font-size: 14px; font-weight: 700; margin: 0; }
.section-header .texto-pequeno { margin: 0; }

/* ------------------------------------------------------------------ rodapé */

.page-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-suave, var(--border));
    background: var(--surface-2);
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ==========================================================================
   O que CONTINUA sendo card

   Componente que existe por si: KPI, indicador, widget, resumo isolado. Eles
   ficam lado a lado dentro do container e precisam da própria moldura para
   serem lidos como unidades separadas.
   ========================================================================== */

.page-body > .grade,
.page-section > .grade { margin-bottom: var(--sp-5); }
.page-section > .grade:last-child { margin-bottom: 0; }

/* ============================================================ responsivo */

@media (max-width: 900px) {
    .page-header  { padding: var(--sp-4) var(--sp-4); }
    .page-tabs    { padding: 0 var(--sp-4); }
    .page-toolbar { padding: var(--sp-3) var(--sp-4); }
    .page-body    { padding: var(--sp-4); }
    .page-footer  { padding: var(--sp-3) var(--sp-4); }

    .page-body > .tabela-wrap:only-child {
        margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    }

    /* ações vão para a linha de baixo, ocupando a largura */
    .page-header-content { flex-direction: column; align-items: stretch; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; justify-content: center; }

    .page-title { font-size: 18px; }
}

@media (max-width: 600px) {
    .page-container { border-radius: 12px; }
    .form-grade { grid-template-columns: 1fr; }
    .form-grade > [class*="c-"] { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Card solto dentro do container perde a moldura.

   Regra por posição, não por classe: `.card` filho direto de `.page-body` é um
   bloco da página — vira seção. `.card` dentro de `.grade` é componente (KPI,
   painel lado a lado) e mantém a moldura, porque ali a borda é o que separa
   uma unidade da outra.

   Expressar isso em CSS, e não reescrevendo cada view, faz a regra valer
   também para as telas que ainda vierem.
-------------------------------------------------------------------------- */
.page-body > .card,
.page-section > .card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: visible;
}

.page-body > .card + .card,
.page-body > .card + .page-section,
.page-body > .page-section + .card {
    border-top: 1px solid var(--border-suave);
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
}

/* cabeçalho de card solto vira cabeçalho de seção: sem fundo, sem linha */
.page-body > .card > .card-cabecalho,
.page-body > .page-section > .section-header {
    background: none;
    border-bottom: 0;
    padding: 0 0 var(--sp-3);
}

/* corpo de card solto não precisa de padding próprio */
.page-body > .card > .card-corpo,
.page-body > .page-section > .secao-conteudo { padding: 0; }

/* tabela encosta na borda do container */
.page-body > .card > .card-corpo.sem-padding,
.page-body > .page-section > .secao-conteudo { padding: 0; }

.page-body .tabela-wrap {
    margin-left: calc(var(--sp-6) * -1);
    margin-right: calc(var(--sp-6) * -1);
}
.page-body .tabela-wrap table.tabela th:first-child,
.page-body .tabela-wrap table.tabela td:first-child { padding-left: var(--sp-6); }
.page-body .tabela-wrap table.tabela th:last-child,
.page-body .tabela-wrap table.tabela td:last-child { padding-right: var(--sp-6); }

@media (max-width: 900px) {
    .page-body .tabela-wrap {
        margin-left: calc(var(--sp-4) * -1);
        margin-right: calc(var(--sp-4) * -1);
    }
    .page-body .tabela-wrap table.tabela th:first-child,
    .page-body .tabela-wrap table.tabela td:first-child { padding-left: var(--sp-4); }
    .page-body .tabela-wrap table.tabela th:last-child,
    .page-body .tabela-wrap table.tabela td:last-child { padding-right: var(--sp-4); }
}

/* seções internas herdam o mesmo tratamento */
.page-section > .secao-conteudo,
.page-section > .card-corpo { padding: 0; }
.page-section > .section-header {
    background: none;
    border-bottom: 0;
    padding: 0 0 var(--sp-3);
}

/* ==========================================================================
   LINGUAGEM DE CARD E GRÁFICO

   Padrão trazido do ricco-trade-v2, sobre a paleta DUARTE mix.

   A diferença que mais muda a tela: card é PLANO. Borda define o limite,
   sombra não. Sombra em card empilhado cria profundidade falsa — dois cards
   lado a lado parecem estar em planos diferentes sem que nada os diferencie
   de fato. Borda de 1px diz "isto acaba aqui" e não sugere hierarquia que
   não existe.

   O cabeçalho tem três níveis, nesta ordem:
       eyebrow   o que é (categoria, em caixa alta, na cor de destaque)
       título    o nome
       subtítulo o detalhe que responde "e daí?"
   ========================================================================== */

.page-container,
.card,
.kpi,
.chart-card {
    box-shadow: none;
}

.card,
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    overflow: hidden;
    min-width: 0;
}

/* card com cabeçalho e corpo próprios não leva padding duplo */
.card:has(> .card-cabecalho),
.card:has(> .section-header) { padding: 0; }

.card-eyebrow,
.chart-card-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary);
}

.card-nome,
.chart-card-title {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.card-sub,
.chart-card-sub {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* --------------------------------------------------------------- gráficos */

.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: var(--sp-5);
}

.chart-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

/*
 * Altura fixa no invólucro, não no gráfico.
 *
 * Gráfico que se dimensiona pelo conteúdo faz a página pular enquanto carrega
 * — e no painel, com quatro deles, o pulo é a primeira coisa que se vê.
 */
.chart-wrap { position: relative; height: 260px; }
.chart-wrap-baixo { height: 180px; }

.chart-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--border-forte);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* barras desenhadas em CSS — sem biblioteca, funciona sem internet */
.chart-barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}
/*
 * A coluna que reserva o espaço de cada hora no eixo.
 *
 * É ELA que divide a largura por igual — daí o flex: 1.
 */
.chart-coluna {
    flex: 1;
    min-width: 0;

    /*
     * Teto de largura: sem ele, poucos dados viram lajes.
     *
     * `flex: 1` divide a largura por igual — o que e certo para 24 horas ou 30
     * dias. Com DOIS dias num relatorio de periodo curto, cada coluna ficava
     * com 778px e o "grafico" virava um retangulo azul ocupando o cartao
     * inteiro. Ninguem reconhece aquilo como grafico; parece a tela quebrada.
     *
     * Com o teto, duas barras sao duas barras, e a serie continua crescendo da
     * esquerda para a direita como uma linha do tempo deve crescer.
     */
    max-width: 72px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

/*
 * A barra em si.
 *
 * flex: none é o que faz o gráfico existir. Com flex: 1 aqui — que foi o erro
 * original — a barra cresce até preencher a coluna inteira e a altura em
 * porcentagem, que carrega o dado, é simplesmente ignorada: todas as horas
 * saem do mesmo tamanho e o gráfico vira um retângulo.
 */
.chart-barra {
    flex: none;
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--primary);
    transition: opacity .2s;
}

/*
 * Variante com degrade — o desenho que o grafico de dias ja tinha antes de
 * passar a usar estas classes. Fica como modificador para nao mudar o visual
 * de quem so precisava do conserto de largura.
 */
.chart-barra-degrade {
    background: linear-gradient(180deg, var(--primary), var(--marca-azul));
    border-radius: 5px 5px 0 0;
}

.chart-rotulo {
    font-size: 9px;
    text-align: center;
    color: var(--text-muted);
    margin-top: 4px;
}
.chart-barra:hover { opacity: .75; }

.chart-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-muted);
}
.chart-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legenda-cor { width: 10px; height: 10px; border-radius: 3px; }

/* ------------------------------------------------------- item ativo do menu */

/*
 * O item ativo ganha barra à esquerda e um gradiente que morre para a direita.
 * Fundo chapado inteiro competia com o conteúdo da página; a barra ancora o
 * olho na margem, que é onde ele passa ao varrer o menu.
 */
.sidebar .link.ativo,
.sidebar .link.active {
    position: relative;
    background: var(--marca-amarelo);
    color: var(--marca-azul-escuro);
    font-weight: 700;
}

/*
 * O ícone e o contador acompanham o texto escuro.
 *
 * Sem isto o ícone continuaria claro — pensado para fundo escuro — e sumiria
 * dentro do amarelo, deixando só o rótulo visível no item que deveria ser o
 * mais legível do menu.
 */
.sidebar .link.ativo .link-icon,
.sidebar .link.active .link-icon { color: var(--marca-azul-escuro); }

.sidebar .link.ativo:hover,
.sidebar .link.active:hover {
    background: var(--marca-amarelo);
    color: var(--marca-azul-escuro);
}
.sidebar .link.ativo:hover .link-icon,
.sidebar .link.active:hover .link-icon { color: var(--marca-azul-escuro); }
/*
 * A barra à esquerda era amarela sobre fundo azulado. Com o item inteiro
 * amarelo ela desapareceria — passa a ser azul escura, mantendo a âncora na
 * margem que o olho procura ao varrer o menu.
 */
.sidebar .link.ativo::before,
.sidebar .link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--marca-azul-escuro);
}

@media (max-width: 900px) {
    .charts-row { grid-template-columns: 1fr; }
    .chart-wrap { height: 220px; }
}

/* ==========================================================================
   INDICADOR (KPI)

   Anatomia da esquerda para a direita:

       [ícone]   VALOR              ›
                 Rótulo
                 legenda

   O valor vem ANTES do rótulo de propósito. Quem varre um painel procura o
   número, não a etiqueta — colocar "Investidores" acima de "14" obriga a ler
   duas linhas para achar a informação que já estava ali.

   O ícone mora numa caixa tintada: é o que dá cor ao painel sem pintar o card
   inteiro, e a cor vira código visual (verde = dinheiro, azul = gente).

   O chevron indica que o card leva a algum lugar. Só aparece quando o KPI é
   mesmo um link — sinal de clique em bloco que não clica é promessa falsa.
   ========================================================================== */

.kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s, background .18s;
}

/*
 * Card clicável sobe um pouco no hover — não sublinha.
 *
 * Sublinhado é sinal de link em TEXTO. Num bloco inteiro ele risca o conteúdo
 * e não diz nada sobre o card estar ativo. A elevação diz: o cartão saiu do
 * plano, então dá para pegá-lo.
 *
 * 2px e uma sombra curta bastam. Mais que isso vira salto, e num painel com
 * quatro cards lado a lado o movimento passa a competir com a leitura.
 */
a.kpi,
a.card {
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

a.kpi:hover,
a.kpi:focus-visible,
a.card:hover,
a.card:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(6, 46, 98, .10);
    border-color: var(--border-forte);
}

/* No toque não existe hover: o dedo pressiona e solta. O afundar dá o retorno
   que o hover daria no mouse. */
a.kpi:active,
a.card:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(6, 46, 98, .10);
}

/* Quem prefere menos movimento continua tendo o retorno — só sem o salto. */
@media (prefers-reduced-motion: reduce) {
    a.kpi, a.card { transition: border-color .16s ease, box-shadow .16s ease; }
    a.kpi:hover, a.card:hover { transform: none; }
}

.kpi-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: var(--primary-10);
    color: var(--primary);
    font-size: 17px;
}

.kpi-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.kpi-valor {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-rotulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 3px;
}
.kpi-nota {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.kpi-seta { color: var(--border-forte); font-size: 13px; flex: none; }

/* cores da caixa do ícone — a cor classifica, não decora */
.kpi-sucesso .kpi-icone { background: var(--sucesso-soft); color: var(--sucesso); }
.kpi-aviso   .kpi-icone { background: var(--aviso-soft);   color: var(--aviso); }
.kpi-perigo  .kpi-icone { background: var(--perigo-soft);  color: var(--perigo); }
.kpi-marca   .kpi-icone { background: #f3e8ff;             color: #a855f7; }
.kpi-neutro  .kpi-icone { background: var(--surface-3);    color: var(--text-secondary); }

/* KPI sem ícone continua legível: o texto só ocupa a linha inteira */
.kpi:not(:has(.kpi-icone)) { gap: 0; }

@media (max-width: 600px) {
    .kpi { padding: 14px; gap: 12px; }
    .kpi-icone { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; font-size: 15px; }
    .kpi-valor { font-size: 18px; }
}

/* ==========================================================================
   ABAS EM PÍLULA

   A aba ativa é um bloco preenchido, não um sublinhado. Sublinhado some no
   meio de uma tabela densa; o bloco continua legível de longe, que é como o
   gerente olha a tela.
   ========================================================================== */

.abas-nav {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 0;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.abas-nav::-webkit-scrollbar { display: none; }

.aba-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.aba-botao i { font-size: 14px; opacity: .85; }
.aba-botao:hover { background: var(--surface-3); color: var(--text-base); }

.aba-botao.ativa {
    background: var(--primary-10);
    color: var(--marca-azul);
    font-weight: 700;
}
.aba-botao.ativa i { opacity: 1; }

.aba-contador {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--surface-3);
    font-size: 11px; font-weight: 800;
}
.aba-botao.ativa .aba-contador { background: #fff; color: var(--marca-azul); }

/* A faixa de abas fica no topo do container, com a própria linha embaixo. */
.page-tabs { padding: 0 8px; background: var(--surface); }

/* ===========================================================================
   Tela dividida com a marca

   Usada nas duas portas de entrada do sistema: o login e a abertura de caixa.
   São as únicas telas em que o usuário não está trabalhando — está chegando —
   e por isso são as únicas onde a marca ocupa espaço de verdade.

   O formulário fica preso a uma largura de leitura confortável e TODO o resto
   vai para a marca. Um formulário esticado em 1920px não fica melhor, fica só
   mais difícil de ler: os olhos percorrem uma linha longa para achar o campo
   seguinte. O espaço que sobra tem uso melhor.
=========================================================================== */
.tela-marca {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
}

.tela-marca__conteudo {
    display: grid; place-items: center;
    padding: clamp(20px, 3vw, 48px);
    overflow-y: auto;
    background: var(--surface);
}

.tela-marca__forma { width: 100%; max-width: 460px; }

/* --- o painel da marca */

.tela-marca__painel {
    position: relative;
    display: grid; place-items: center;
    padding: clamp(24px, 4vw, 80px);
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 78% -12%, rgba(47, 111, 208, .40), transparent 62%),
        linear-gradient(158deg, var(--marca-azul) 0%, var(--marca-azul-escuro) 100%);
}

/*
 * Um facho claro atravessando o painel.
 *
 * Um degradê sozinho, num painel deste tamanho, lê como fundo chapado. A faixa
 * diagonal dá profundidade sem competir com o logo — fica atrás dele, bem
 * abaixo no contraste.
 */
.tela-marca__painel::before {
    content: '';
    position: absolute; inset: -30% -10% auto -40%;
    height: 150%;
    background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .055) 50%, transparent 58%);
    pointer-events: none;
}

.tela-marca__marca {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(18px, 2.4vw, 40px);
    width: 100%;
    text-align: center;
}

/*
 * O logo ocupa o painel inteiro até o limite do desenho.
 *
 * `width: 100%` com um teto em vw: cresce com a tela e para antes de o
 * traço ficar granulado. A altura acompanha sozinha — a proporção é do arquivo,
 * e forçá-la aqui distorceria a marca.
 */
.tela-marca__marca img {
    width: min(100%, 74vh * 4.8);
    max-width: 100%;
    height: auto;
    display: block;
}

.tela-marca__fallback {
    color: #fff; font-weight: 800; letter-spacing: -1.5px;
    font-size: clamp(38px, 6vw, 92px); line-height: 1;
}
.tela-marca__fallback em { color: var(--marca-amarelo); font-style: normal; }

.tela-marca__assinatura {
    color: rgba(255, 255, 255, .62);
    font-size: clamp(11px, .85vw, 15px);
    letter-spacing: clamp(2px, .3vw, 5px);
    text-transform: uppercase; font-weight: 600;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Telas estreitas

   O painel vira uma faixa no topo. A marca continua presente — é a primeira
   coisa que identifica o sistema para quem está entrando — mas deixa de disputar
   altura com o formulário, que é o que a pessoa veio fazer.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .tela-marca {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    /* a faixa da marca vai para cima pela ordem visual */
    .tela-marca__painel { order: -1; padding: clamp(18px, 5vw, 34px); }
    .tela-marca__painel::before { display: none; }
    .tela-marca__marca { gap: 10px; }
    .tela-marca__marca img { width: min(72%, 340px); }
    .tela-marca__conteudo { padding: clamp(18px, 5vw, 32px); }
}

/*
 * Tela deitada e baixa (tablet virado, notebook antigo): sobra largura e falta
 * altura. Aqui a divisão em duas colunas continua sendo a melhor — o que
 * encolhe é o respiro, não a estrutura.
 */
@media (max-height: 620px) and (min-width: 901px) {
    .tela-marca__painel { padding: 20px; }
    .tela-marca__marca { gap: 14px; }
    .tela-marca__conteudo { padding: 20px; }
}

/* ===========================================================================
   Identidade em "Meu perfil"

   Avatar, nome e login juntos, no topo da própria conta. Responde de imediato
   "sou eu mesmo?" — a pergunta que traz a maioria das pessoas a esta tela sem
   querer mudar nada.
=========================================================================== */
.perfil-identidade {
    display: flex; align-items: center; gap: 14px;
}

.perfil-avatar {
    width: 56px; height: 56px; flex: none;
    border-radius: 50%;
    background: var(--primary-10);
    border: 2px solid rgba(var(--primary-rgb), .25);
    color: var(--marca-azul);
    display: grid; place-items: center;
    font-size: 22px; font-weight: 700;
}

.perfil-identidade-dados { display: flex; flex-direction: column; min-width: 0; }
.perfil-nome { font-size: 17px; font-weight: 700; color: var(--text-base); }
.perfil-login {
    font-size: 13px; color: var(--text-muted);
    font-family: var(--font-mono);
}


/* ===========================================================================
   Instalador do terminal em modo totem

   Texto explicativo à esquerda, botão à direita. O botão não acompanha a
   altura do texto: numa coluna com quatro linhas de explicação, um botão
   esticado vira uma barra azul que compete com o próprio conteúdo.
=========================================================================== */
.totem-instalador {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-5); flex-wrap: wrap;
}

.totem-instalador-texto { flex: 1 1 420px; min-width: 0; }
.totem-instalador-texto p { margin: 0 0 var(--sp-3); }
.totem-instalador-texto p:last-child { margin-bottom: 0; }

.totem-instalador-lista {
    margin: 0 0 var(--sp-3); padding-left: 18px;
    font-size: 13px; color: var(--text-secondary);
}
.totem-instalador-lista li { margin-bottom: 4px; }

.totem-instalador kbd {
    background: var(--surface-3); color: var(--text-base);
    padding: 1px 6px; border-radius: 4px;
    font-family: var(--font-mono); font-size: 11.5px;
}

/* o botão fica do tamanho do próprio rótulo, alinhado ao topo do bloco */
.totem-instalador > .btn { flex: none; align-self: flex-start; }

/* ===========================================================================
   Senha gerada pelo sistema

   Aparece uma vez, para ser anotada ou copiada. É o único momento em que uma
   senha existe em claro na tela, e o desenho trata disso: fundo destacado,
   fonte monoespaçada — em que `l`, `1` e `I` não se confundem — e o valor
   selecionável de uma vez.
=========================================================================== */
.senha-gerada {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sucesso);
    border-radius: 8px;
}

.senha-gerada-rotulo {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}
.senha-gerada-rotulo i { color: var(--sucesso); }

.senha-gerada-linha {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}

/*
 * `user-select: all` seleciona a senha inteira num clique. Arrastar para
 * selecionar corre o risco de deixar um caractere para trás — e uma senha
 * copiada pela metade só dá erro no login de outra pessoa, longe daqui.
 */
.senha-gerada code {
    user-select: all;
    font-family: var(--font-mono);
    font-size: 18px; font-weight: 700; letter-spacing: 1px;
    color: var(--text-base);
    background: var(--surface);
    padding: 8px 14px; border-radius: 6px;
    border: 1px dashed var(--border-forte);
    word-break: break-all;
}

.senha-gerada-aviso {
    margin-top: var(--sp-2);
    font-size: 12px; color: var(--perigo); font-weight: 600;
}

.senha-gerar-bloco { margin-top: var(--sp-4); }
.senha-gerar-bloco .ajuda { display: block; margin-top: 6px; }

/* ===========================================================================
   Resultado da precificação

   O preço sugerido é o motivo da tela existir, e o desenho diz isso: ele ocupa
   o bloco inteiro, em corpo grande, com markup e margem logo abaixo — os dois
   números que costumam ser confundidos um com o outro.
=========================================================================== */
.preco-resultado {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(135deg, var(--marca-azul) 0%, var(--marca-azul-escuro) 100%);
    color: #fff;
}

.preco-resultado-rotulo {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: rgba(255, 255, 255, .72);
}

.preco-resultado-valor {
    font-size: clamp(34px, 4vw, 52px); font-weight: 800;
    letter-spacing: -1.5px; line-height: 1.1;
    color: var(--marca-amarelo);
    font-variant-numeric: tabular-nums;
    margin: 4px 0;
}

.preco-resultado-nota { font-size: 13px; color: rgba(255, 255, 255, .82); }
.preco-resultado-nota strong { color: #fff; font-variant-numeric: tabular-nums; }

/* valores alinhados à direita em coluna: é assim que se lê dinheiro */
.entrada-valor { text-align: right; font-variant-numeric: tabular-nums; }

/* Campo cuja "entrada" é um botão: alinha pela base, com o resto da linha. */
.campo-com-botao { display: flex; flex-direction: column; justify-content: flex-end; }

/* ===========================================================================
   Backup do banco

   A data do último backup e o botão dividem a linha: é a pergunta e a ação,
   lado a lado. Quem abre esta seção quer saber "está atualizado?" e, se não
   estiver, resolver ali mesmo.
=========================================================================== */
.backup-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5); flex-wrap: wrap;
}
.backup-ultimo { flex: 1 1 280px; min-width: 0; }
.backup-ultimo-data {
    font-size: 20px; font-weight: 700; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.backup-topo form { flex: none; }

/* Menu já enviando: bloqueia o clique sem desabilitar o botão — o `disabled`
   tiraria o name/value do submitter da serialização, e o POST chegaria sem
   dizer qual loja foi escolhida. */
.loja-menu.is-enviando { pointer-events: none; opacity: .6; }

/* ===========================================================================
   Piloto visual — edição de usuário

   Mantém a anatomia nativa do EAS: um único container com cabeçalho, abas,
   conteúdo e rodapé. A referência externa entra apenas no acabamento de
   tipografia, campos, botões e tabela; não cria painéis soltos na página.
=========================================================================== */
.usuario-editor-piloto,
.usuario-editor-piloto > .page-header,
.usuario-editor-piloto > .page-tabs,
.usuario-editor-piloto > .page-body,
.usuario-editor-piloto .usuario-card,
.usuario-editor-piloto .page-footer {
    position: static;
    transform: none;
    box-shadow: none;
}

/* Multicanal: segue a estrutura container/header/abas/seções do sistema. */
.multicanal-page > .page-tabs { padding: 0 8px; }
.multicanal-page .aba-botao { text-decoration: none; }
.multicanal-page .multicanal-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
}
.multicanal-page .multicanal-resumo dl { margin: 0; padding: var(--sp-4); }
.multicanal-page .multicanal-resumo dl + dl { border-left: 1px solid var(--border); }
.multicanal-page .multicanal-resumo dt { color: var(--text-secondary); font-size: 12px; margin-bottom: 5px; }
.multicanal-page .multicanal-resumo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.multicanal-page .multicanal-acoes { flex-wrap: wrap; }
.multicanal-page .acoes-linha.mt-4,
.multicanal-page .ajuda.mt-4 { margin-top: var(--sp-4); }
.multicanal-page .multicanal-qr { margin-top: var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-5); }
.multicanal-page .multicanal-qr img { display: block; width: min(280px, 100%); margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); }
.multicanal-page .multicanal-pareamento { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.multicanal-page .multicanal-pareamento[hidden] { display: none; }
.multicanal-page .multicanal-pareamento code { font-size: 18px; letter-spacing: .08em; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; }
.multicanal-page .multicanal-kpis { margin-bottom: var(--sp-5); }

/* Templates: editor do sistema com prévia fiel às cores do WhatsApp. */
.multicanal-templates-page,
.multicanal-config-page {
    --whatsapp-green: #128c7e;
    --whatsapp-green-dark: #075e54;
    --whatsapp-bubble: #005c4b;
    --whatsapp-chat: #0b141a;
    --whatsapp-text: #e9edef;
}

.multicanal-templates-page .multicanal-conexao-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.multicanal-templates-page .multicanal-conexao-aviso > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.multicanal-template-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    scrollbar-width: none;
}

.multicanal-scroll-arrastavel {
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.multicanal-scroll-arrastavel::-webkit-scrollbar { display: none; }
.multicanal-scroll-arrastavel.is-arrastando {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.multicanal-page > .page-tabs { overflow: hidden; }
.multicanal-page > .page-tabs .abas-nav {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.multicanal-template-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.multicanal-template-tab:hover {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-base);
}

.multicanal-template-tab.ativa {
    border-color: rgba(18, 140, 126, .24);
    background: rgba(18, 140, 126, .09);
    color: var(--whatsapp-green-dark);
}

.multicanal-template-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .85fr);
    gap: 18px;
    align-items: start;
}

.multicanal-template-panel {
    position: static;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

.multicanal-template-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.multicanal-template-panel-header h2 {
    margin: 0;
    color: var(--text-base);
    font-size: 14px;
    font-weight: 800;
}

.multicanal-template-panel-header p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.multicanal-template-panel-header.compacto { padding: 14px 16px; }

.multicanal-template-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-2);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.multicanal-template-status.ativo {
    border-color: rgba(18, 140, 126, .25);
    color: var(--whatsapp-green-dark);
    background: rgba(18, 140, 126, .08);
}

.multicanal-template-editor > form { padding: 18px; }

.multicanal-template-agenda {
    display: grid;
    grid-template-columns: 110px 110px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.multicanal-template-agenda legend {
    padding: 0 5px;
    font-size: 12px;
    font-weight: 800;
}

.multicanal-template-agenda .campo { grid-column: auto; margin: 0; }
.multicanal-template-agenda > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-secondary);
    font-size: 11.5px;
}

.multicanal-templates-page .multicanal-dias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 13px;
    min-height: 36px;
}

.multicanal-templates-page .multicanal-dias label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
}

.multicanal-template-mensagem { margin: 0; }
.multicanal-template-mensagem textarea {
    min-height: 340px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.multicanal-template-opcoes {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.multicanal-template-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.multicanal-template-toggle input { margin-top: 3px; }
.multicanal-template-toggle span { display: grid; gap: 2px; }
.multicanal-template-toggle strong { font-size: 12.5px; }
.multicanal-template-toggle small { color: var(--text-secondary); font-size: 11.5px; font-weight: 400; }

.multicanal-template-destino {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.5;
}

.multicanal-template-destino i { margin-top: 2px; color: var(--whatsapp-green-dark); }

.multicanal-template-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.multicanal-btn-whatsapp {
    border-color: var(--whatsapp-green);
    background: var(--whatsapp-green);
    color: #fff;
}

.multicanal-btn-whatsapp:hover {
    border-color: var(--whatsapp-green-dark);
    background: var(--whatsapp-green-dark);
    color: #fff;
}

.multicanal-template-lateral { display: grid; gap: 18px; }

.multicanal-chat {
    display: flex;
    justify-content: flex-end;
    min-height: 210px;
    padding: 16px;
    background: var(--whatsapp-chat);
}

.multicanal-chat-bubble {
    align-self: flex-start;
    max-width: 100%;
    padding: 11px 13px 7px;
    border-radius: 12px 2px 12px 12px;
    background: var(--whatsapp-bubble);
    color: var(--whatsapp-text);
    font-size: 12.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.multicanal-chat-meta {
    display: block;
    margin-top: 4px;
    color: rgba(233, 237, 239, .68);
    font-size: 10px;
    line-height: 1;
    text-align: right;
}

.multicanal-chat-meta i { color: #53bdeb; font-size: 10px; }

.multicanal-template-variaveis {
    display: grid;
    margin: 0;
    padding: 6px 16px;
}

.multicanal-template-variaveis > div {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 10px 0;
}

.multicanal-template-variaveis > div + div { border-top: 1px solid var(--border); }
.multicanal-template-variaveis dt {
    color: var(--whatsapp-green-dark);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
    font-weight: 700;
}
.multicanal-template-variaveis dd { margin: 0; color: var(--text-secondary); font-size: 11.5px; }

/* Conexão: mesma linguagem limpa do editor de templates. */
.multicanal-config-health {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.multicanal-config-health-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 180px;
}

.multicanal-health-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-muted);
}

.multicanal-config-health-item.ok .multicanal-health-dot {
    background: var(--whatsapp-green);
    box-shadow: 0 0 0 4px rgba(18, 140, 126, .10);
}

.multicanal-config-health-item > div { display: grid; gap: 1px; }
.multicanal-config-health-item strong { color: var(--text-base); font-size: 12px; }
.multicanal-config-health-item small { color: var(--text-secondary); font-size: 11px; }

.multicanal-config-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: start;
}

.multicanal-config-panel {
    position: static;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

.multicanal-config-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.multicanal-config-panel-header.compacto { padding: 14px 16px; }
.multicanal-config-panel-header h2 {
    margin: 0;
    color: var(--text-base);
    font-size: 14px;
    font-weight: 800;
}
.multicanal-config-panel-header p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.multicanal-config-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.multicanal-config-status.ativo {
    border-color: rgba(18, 140, 126, .25);
    background: rgba(18, 140, 126, .08);
    color: var(--whatsapp-green-dark);
}

.multicanal-config-status.pendente {
    border-color: rgba(202, 138, 4, .25);
    background: rgba(202, 138, 4, .08);
    color: #8a6500;
}

.multicanal-config-editor > form { padding: 18px; }
.multicanal-config-group + .multicanal-config-group {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.multicanal-config-group-title { margin-bottom: 14px; }
.multicanal-config-group-title h3 {
    margin: 0;
    color: var(--text-base);
    font-size: 12.5px;
    font-weight: 800;
}
.multicanal-config-group-title p {
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.5;
}

.multicanal-config-page .campo input {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border-forte);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-base);
    font-family: inherit;
    font-size: 13px;
}

.multicanal-config-page .campo input:focus {
    outline: none;
    border-color: var(--whatsapp-green);
    box-shadow: 0 0 0 3px rgba(18, 140, 126, .10);
}

.multicanal-config-page .campo input[readonly] {
    background: var(--surface-2);
    color: var(--text-secondary);
}

.multicanal-config-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
}
.multicanal-config-option input { margin-top: 3px; }
.multicanal-config-option span { display: grid; gap: 2px; }
.multicanal-config-option strong { font-size: 12.5px; }
.multicanal-config-option small { color: var(--text-secondary); font-size: 11.5px; font-weight: 400; line-height: 1.5; }

.multicanal-config-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 18px;
}

.multicanal-config-side { display: grid; gap: 18px; }
.multicanal-config-connection { padding: 16px; }

.multicanal-config-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 14px 10px 20px;
    color: var(--text-secondary);
    text-align: center;
}
.multicanal-config-empty i { color: var(--whatsapp-green); font-size: 30px; }
.multicanal-config-empty strong { color: var(--text-base); font-size: 13px; }
.multicanal-config-empty p { max-width: 300px; margin: 0; font-size: 11.5px; line-height: 1.5; }

.multicanal-config-summary { display: grid; margin: 0; }
.multicanal-config-summary > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
}
.multicanal-config-summary > div + div { border-top: 1px solid var(--border); }
.multicanal-config-summary dt { color: var(--text-secondary); font-size: 11.5px; }
.multicanal-config-summary dd { min-width: 0; margin: 0; color: var(--text-base); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.multicanal-config-summary code { font-size: 11px; font-weight: 400; }

.multicanal-config-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.multicanal-config-buttons .btn { min-width: 0; white-space: normal; }
.multicanal-config-buttons .multicanal-btn-whatsapp { grid-column: 1 / -1; }

.multicanal-config-qr {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.multicanal-config-qr[hidden],
.multicanal-config-pairing[hidden] { display: none; }
.multicanal-config-qr strong { font-size: 12.5px; }
.multicanal-config-qr p { margin: 3px 0 12px; color: var(--text-secondary); font-size: 11.5px; }
.multicanal-config-qr img {
    display: block;
    width: min(250px, 100%);
    margin: 0 auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.multicanal-config-pairing {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    text-align: center;
}
.multicanal-config-pairing span { color: var(--text-secondary); font-size: 11.5px; }
.multicanal-config-pairing code { font-size: 18px; font-weight: 800; letter-spacing: .12em; }

.multicanal-config-webhook { padding: 14px 16px; }
.multicanal-config-webhook code {
    display: block;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .multicanal-config-shell { grid-template-columns: 1fr; }
    .multicanal-config-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .multicanal-config-side { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .multicanal-config-health { align-items: flex-start; flex-direction: column; gap: 12px; }
    .multicanal-config-editor > form,
    .multicanal-config-connection { padding: 14px; }
    .multicanal-config-panel-header { padding: 14px; }
    .multicanal-config-buttons { grid-template-columns: 1fr; }
    .multicanal-config-buttons .multicanal-btn-whatsapp { grid-column: auto; }
    .multicanal-config-actions .btn { width: 100%; }
}

/* Central de caixas — leitura administrativa em tempo real */
.central-caixas .page-body { display: block; }
.central-filtros { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; width: 100%; }
.central-filtros .campo { min-width: 170px; margin: 0; }
.central-filtros .campo:first-child { min-width: 230px; }
.central-filtros label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.central-filtros select,
.central-filtros input { min-height: 38px; }

.central-live-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 11.5px;
}
.central-live-status > strong { color: var(--text-base); }
.central-live-pulso { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--sucesso); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sucesso) 14%, transparent); }
.central-live-hora { margin-left: auto; }
.central-live-hora strong { color: var(--text-base); font-variant-numeric: tabular-nums; }
.central-kpis-agora,
.central-kpis-analise { margin-bottom: 18px; }

.central-live-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, .8fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.central-abertos-section,
.central-alertas-section { margin: 0; }
.central-caixas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.central-caixa-card { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.central-caixa-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 14px 10px; }
.central-caixa-unidade { display: block; margin-bottom: 3px; color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.central-caixa-topo h3 { margin: 0; color: var(--text-base); font-size: 16px; }
.central-situacao { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.central-situacao > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.central-situacao-operando { background: color-mix(in srgb, var(--sucesso) 10%, white); color: var(--sucesso); }
.central-situacao-ocioso,
.central-situacao-sem_movimento,
.central-situacao-turno_longo { background: color-mix(in srgb, var(--aviso) 12%, white); color: #8a5a00; }
.central-caixa-operador { display: flex; align-items: center; gap: 9px; padding: 0 14px 12px; }
.central-avatar { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-10); color: var(--primary); font-size: 11px; font-weight: 800; }
.central-caixa-operador strong,
.central-caixa-operador small { display: block; }
.central-caixa-operador strong { color: var(--text-base); font-size: 11.5px; }
.central-caixa-operador small { margin-top: 2px; color: var(--text-secondary); font-size: 10px; }
.central-caixa-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.central-caixa-total span { color: var(--text-secondary); font-size: 10.5px; }
.central-caixa-total strong { color: var(--primary); font-size: 18px; font-variant-numeric: tabular-nums; }
.central-caixa-metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.central-caixa-metricas > div { padding: 10px 14px; }
.central-caixa-metricas > div:nth-child(even) { border-left: 1px solid var(--border); }
.central-caixa-metricas > div:nth-child(n+3) { border-top: 1px solid var(--border); }
.central-caixa-metricas span,
.central-caixa-metricas strong { display: block; }
.central-caixa-metricas span { color: var(--text-secondary); font-size: 9.5px; }
.central-caixa-metricas strong { margin-top: 3px; color: var(--text-base); font-size: 12px; font-variant-numeric: tabular-nums; }
.central-caixa-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 9.5px; }
.central-caixa-rodape > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.central-caixa-rodape a { flex: 0 0 auto; color: var(--primary); font-weight: 700; text-decoration: none; }
.central-caixa-rodape a:hover { text-decoration: underline; }

.central-alertas { display: grid; gap: 8px; padding: 14px; }
.central-alerta { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-base); font-size: 10.5px; line-height: 1.45; text-decoration: none; }
.central-alerta:hover { border-color: var(--border-forte); background: var(--surface-2); }
.central-alerta i { margin-top: 2px; color: var(--aviso); }
.central-alerta-vazio { display: grid; justify-items: center; gap: 8px; padding: 28px 12px; color: var(--text-secondary); font-size: 11px; text-align: center; }
.central-alerta-vazio i { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--sucesso) 10%, white); color: var(--sucesso); }
.central-vazio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 7px; padding: 42px 18px; color: var(--text-secondary); text-align: center; }
.central-vazio i { font-size: 24px; color: var(--primary); }
.central-vazio strong { color: var(--text-base); font-size: 13px; }
.central-vazio span { font-size: 11px; }

.central-periodo-resumo,
.central-fechamento-resumo { display: flex; align-items: stretch; gap: 0; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); overflow: hidden; }
.central-periodo-resumo > div,
.central-fechamento-resumo > div { display: grid; gap: 3px; min-width: 150px; padding: 11px 16px; }
.central-periodo-resumo > div + div,
.central-fechamento-resumo > div + div { border-left: 1px solid var(--border); }
.central-periodo-resumo span,
.central-fechamento-resumo span { color: var(--text-secondary); font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
.central-periodo-resumo strong,
.central-fechamento-resumo strong { color: var(--text-base); font-size: 13px; font-variant-numeric: tabular-nums; }
.central-fechamento-resumo { display: grid; grid-template-columns: repeat(4, 1fr); }

.central-analise-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.central-analise-grid-igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.central-analise-grid .page-section { margin: 0; }
.central-barras-hora { height: 185px; padding-bottom: 20px; gap: 5px; }
.central-barras-hora .chart-coluna { position: relative; min-width: 0; }
.central-barras-hora .chart-coluna > span { position: absolute; bottom: -18px; left: 50%; color: var(--text-secondary); font-size: 8px; transform: translateX(-50%); }
.central-composicao { display: grid; gap: 13px; padding: 15px; }
.central-composicao-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
.central-composicao-item > div:first-child strong,
.central-composicao-item > div:first-child span,
.central-composicao-valor strong,
.central-composicao-valor span { display: block; }
.central-composicao-item strong { color: var(--text-base); font-size: 11px; }
.central-composicao-item span { margin-top: 2px; color: var(--text-secondary); font-size: 9.5px; }
.central-composicao-valor { text-align: right; }
.central-progresso { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.central-progresso span { display: block; height: 100%; margin: 0; border-radius: inherit; background: var(--primary); }
.central-detalhe-linha { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 9.5px; font-weight: 400; }
.central-sessoes-tabela table { min-width: 1180px; }
.central-caixas [aria-busy="true"] { cursor: progress; }
.central-caixas [data-central-atualizar].carregando i { animation: central-girar .8s linear infinite; }
@keyframes central-girar { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
    .central-live-layout,
    .central-analise-grid,
    .central-analise-grid-igual { grid-template-columns: 1fr; }
    .central-alertas-section { order: -1; }
    .central-alertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .central-live-status { align-items: flex-start; flex-wrap: wrap; }
    .central-live-hora { width: 100%; margin-left: 16px; }
    .central-caixas-grid,
    .central-alertas { grid-template-columns: 1fr; }
    .central-periodo-resumo { display: grid; grid-template-columns: 1fr; }
    .central-periodo-resumo > div + div { border-top: 1px solid var(--border); border-left: 0; }
    .central-fechamento-resumo { grid-template-columns: repeat(2, 1fr); }
    .central-fechamento-resumo > div:nth-child(3) { border-left: 0; }
    .central-fechamento-resumo > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 540px) {
    .central-filtros .campo,
    .central-filtros .campo:first-child,
    .central-filtros .btn { width: 100%; }
    .central-caixa-topo { align-items: flex-start; flex-direction: column; }
    .central-caixa-total { align-items: flex-start; flex-direction: column; gap: 3px; }
    .central-caixa-rodape { align-items: flex-start; flex-direction: column; }
    .central-fechamento-resumo { grid-template-columns: 1fr; }
    .central-fechamento-resumo > div + div,
    .central-fechamento-resumo > div:nth-child(3) { border-top: 1px solid var(--border); border-left: 0; }
}

@media (max-width: 1050px) {
    .multicanal-template-shell { grid-template-columns: 1fr; }
    .multicanal-template-lateral { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .multicanal-templates-page .multicanal-conexao-aviso { align-items: flex-start; flex-direction: column; }
    .multicanal-template-agenda { grid-template-columns: 1fr 1fr; }
    .multicanal-template-dias-campo { grid-column: 1 / -1; }
    .multicanal-template-lateral { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .multicanal-template-panel-header { padding: 14px; }
    .multicanal-template-editor > form { padding: 14px; }
    .multicanal-template-agenda { grid-template-columns: 1fr; }
    .multicanal-template-dias-campo { grid-column: auto; }
    .multicanal-template-acoes .btn { width: 100%; }
}
@media (max-width: 900px) {
    .multicanal-page .multicanal-resumo { grid-template-columns: 1fr 1fr; }
    .multicanal-page .multicanal-resumo dl:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
    .multicanal-page .multicanal-resumo dl:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
    .multicanal-page .multicanal-resumo { grid-template-columns: 1fr; }
    .multicanal-page .multicanal-resumo dl + dl { border-left: 0; border-top: 1px solid var(--border); }
}

.usuario-editor-piloto .abas { margin: 0; }
.usuario-editor-piloto .aba-painel { min-width: 0; }

.usuario-editor-piloto .aba-botao {
    min-height: 38px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
}

.usuario-editor-piloto .aba-botao.ativa {
    color: var(--marca-azul-medio);
    box-shadow: inset 0 0 0 1px var(--primary-20);
}

.usuario-editor-piloto .usuario-card {
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.usuario-editor-piloto .usuario-card + .usuario-card {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-suave);
}

.usuario-editor-piloto .usuario-card .section-header { margin-bottom: 14px; }
.usuario-editor-piloto .usuario-card .section-title {
    font-size: 13.5px;
    font-weight: 800;
}

.usuario-editor-piloto .form-grade { gap: 16px; }
.usuario-editor-piloto .campo > label {
    font-size: 11.5px;
    font-weight: 700;
}

.usuario-editor-piloto .campo input[type="text"],
.usuario-editor-piloto .campo input[type="password"],
.usuario-editor-piloto .campo input[type="number"],
.usuario-editor-piloto .campo input[type="email"],
.usuario-editor-piloto .campo input[type="tel"],
.usuario-editor-piloto .campo select,
.usuario-editor-piloto .campo textarea {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13px;
}

.usuario-editor-piloto .check-linha input[type="checkbox"] {
    width: 17px;
    height: 17px;
}

.usuario-editor-piloto .btn {
    min-height: 36px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
}

.usuario-editor-piloto .usuario-unidades-tabela {
    border: 1px solid var(--border-suave);
    border-radius: 8px;
}

.usuario-editor-piloto .usuario-unidades-tabela table.tabela th,
.usuario-editor-piloto .usuario-unidades-tabela table.tabela td {
    padding: 10px 12px;
}

.usuario-editor-piloto .usuario-unidades-tabela table.tabela th {
    color: var(--text-muted);
    font-size: 10.5px;
    letter-spacing: .05em;
}

.usuario-editor-piloto .usuario-unidades-tabela .check-linha {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.usuario-editor-piloto .usuario-unidade-selecao { width: 76px; text-align: center; }
.usuario-editor-piloto .usuario-unidade-selecao .check-linha { justify-content: center; }
.usuario-editor-piloto .usuario-unidade-nome {
    display: block;
    margin: 0;
    color: var(--text-base);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.usuario-editor-piloto .usuario-unidades-ajuda {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--text-muted);
}

.usuario-editor-piloto .usuario-card-senha { margin: 0; padding: 0; border: 0; }

.usuario-editor-piloto .usuario-aviso-operacional {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--sp-4);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.usuario-editor-piloto .usuario-aviso-operacional-icone {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--primary-10);
    color: var(--marca-azul-medio);
}

.usuario-editor-piloto .usuario-aviso-operacional strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-base);
    font-size: 12px;
}

.usuario-editor-piloto .usuario-aviso-operacional > div > span { display: block; }

/* A aba de segurança possui POST próprio. Ao selecioná-la, as ações do
   cadastro principal somem para não sugerir que "Salvar" altera a senha. */
.usuario-editor-piloto:has(#painel-senha-seguranca:not([hidden]))
    .usuario-form-principal > .page-footer { display: none; }

.usuario-editor-piloto .usuario-card-senha .senha-gerar-bloco {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-suave);
}

/* Resultado da senha como continuação da seção, sem card dentro de card. */
.usuario-editor-piloto .senha-gerada {
    margin-top: var(--sp-4);
    padding: var(--sp-4) 0 0;
    border: 0;
    border-top: 1px solid var(--border-suave);
    border-radius: 0;
    background: transparent;
}

.usuario-editor-piloto .senha-gerada-rotulo {
    margin-bottom: 9px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.usuario-editor-piloto .senha-gerada-rotulo i { color: var(--text-muted); }
.usuario-editor-piloto .senha-gerada-linha { gap: 8px; }

.usuario-editor-piloto .senha-gerada code {
    padding: 8px 12px;
    border: 1px solid var(--border-forte);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 16px;
    letter-spacing: .6px;
}

.usuario-editor-piloto .senha-gerada-aviso {
    margin-top: 9px;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .usuario-editor-piloto .usuario-unidades-tabela table.tabela { min-width: 430px; }
    .usuario-editor-piloto .page-footer .btn { flex: 1 1 100%; width: 100%; }
    .usuario-editor-piloto .usuario-aviso-operacional { padding: 10px; }
}

/* ===========================================================================
   Relatório de vendas — abas e leitura analítica

   Filtro permanece visível; cada análise ocupa uma aba. Indicadores continuam
   sendo cards reais, planos e sem faixas laterais ou superfícies flutuantes.
=========================================================================== */
.relatorio-vendas > .page-header,
.relatorio-vendas > .page-tabs,
.relatorio-vendas > .page-toolbar,
.relatorio-vendas > .page-body,
.relatorio-vendas .kpi {
    position: static;
    transform: none;
    box-shadow: none;
}

.relatorio-vendas .relatorio-vendas-abas { margin: 0; }
.relatorio-vendas .aba-painel { min-width: 0; }

.relatorio-vendas .aba-botao {
    min-height: 38px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
}

.relatorio-vendas .aba-botao.ativa {
    color: var(--marca-azul-medio);
    box-shadow: inset 0 0 0 1px var(--primary-20);
}

.relatorio-vendas .relatorio-vendas-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.relatorio-vendas .relatorio-vendas-evolucao {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-suave);
}

.relatorio-vendas .relatorio-vendas-eixos {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.relatorio-vendas .relatorio-vendas-section-header > div { min-width: 0; }
.relatorio-vendas .relatorio-vendas-section-header p { margin: 3px 0 0; }

.relatorio-vendas .relatorio-vendas-limite {
    margin: 0 0 var(--sp-4);
    padding: 9px 11px;
    border: 1px solid var(--border-suave);
    border-radius: 8px;
    background: var(--surface-2);
}

.relatorio-vendas .relatorio-vendas-analitico-tabela table { min-width: 1160px; }

.relatorio-vendas .relatorio-vendas-detalhe-secundario {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
}

@media (max-width: 900px) {
    .relatorio-vendas .relatorio-vendas-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .relatorio-vendas .relatorio-vendas-kpis { grid-template-columns: 1fr; }
    .relatorio-vendas .page-toolbar .filtros .btn { flex: 1 1 auto; }
    .relatorio-vendas .relatorio-vendas-section-header > span { width: 100%; }
}

/* ===========================================================================
   Saúde do sistema — painel técnico e configuração global

   Mantém o container único e substitui os cards antigos por painéis planos,
   com hierarquia de leitura igual às telas novas do sistema.
=========================================================================== */
.saude-page > .page-header,
.saude-page > .page-tabs,
.saude-page > .page-toolbar,
.saude-page > .page-body,
.saude-page .saude-panel,
.saude-page .kpi {
    position: static;
    transform: none;
    box-shadow: none;
}

.saude-page .abas-nav { margin: 0; }
.saude-page .aba-botao {
    min-height: 38px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
}
.saude-page .aba-botao.ativa {
    color: var(--marca-azul-medio);
    box-shadow: inset 0 0 0 1px var(--primary-20);
}

.saude-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.saude-status-principal {
    display: flex;
    align-items: center;
    gap: 10px;
}
.saude-status-icone {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sucesso-soft);
    color: var(--sucesso);
}
.saude-status-bar.critico .saude-status-icone { background: var(--perigo-soft); color: var(--perigo); }
.saude-status-principal > div { display: grid; gap: 2px; }
.saude-status-principal strong { font-size: 12.5px; }
.saude-status-principal small { color: var(--text-secondary); font-size: 11.5px; }

.saude-atualizacao {
    display: grid;
    justify-items: end;
    gap: 2px;
    flex: 0 0 auto;
}
.saude-atualizacao span { color: var(--text-secondary); font-size: 10.5px; }
.saude-atualizacao strong { font-family: var(--font-mono); font-size: 11.5px; }

.saude-page-body .aba-painel { min-width: 0; }
.saude-kpis { margin: 0 0 18px; }

.saude-summary-grid,
.saude-operation-grid,
.saude-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.saude-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.saude-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--border);
}
.saude-panel-header h2 { margin: 0; color: var(--text-base); font-size: 13.5px; font-weight: 800; }
.saude-panel-header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
.saude-panel-header > a { flex: 0 0 auto; color: var(--primary); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.saude-panel-header > a:hover { text-decoration: underline; }

.saude-metric-list { display: grid; margin: 0; padding: 5px 17px; }
.saude-metric-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
}
.saude-metric-list > div + div { border-top: 1px solid var(--border); }
.saude-metric-list dt { color: var(--text-secondary); font-size: 12px; }
.saude-metric-list dd { margin: 0; color: var(--text-base); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.saude-metric-list .com-alerta dd { color: var(--aviso); }
.saude-metric-list .com-erro dd { color: var(--perigo); }

.saude-operation-grid .tabela td { padding-top: 11px; padding-bottom: 11px; }
.saude-subsection + .saude-subsection { border-top: 1px solid var(--border); }
.saude-subsection h3 {
    margin: 0;
    padding: 11px 17px 7px;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.saude-errors-panel { margin-top: 18px; }
.saude-errors-panel table { min-width: 760px; }

.saude-config-form { padding: 18px; }
.saude-config-actions { display: flex; margin-top: 16px; }
.saude-permission-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 11.5px;
}

.saude-totem { display: grid; gap: 14px; padding: 18px; }
.saude-totem-intro { display: flex; align-items: center; gap: 11px; }
.saude-totem-intro > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-10);
    color: var(--primary);
}
.saude-totem-intro strong { font-size: 12.5px; }
.saude-totem-intro p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11.5px; }
.saude-totem ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
.saude-totem-note { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.saude-totem .btn { justify-self: start; }

@media (max-width: 900px) {
    .saude-summary-grid,
    .saude-operation-grid,
    .saude-config-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .saude-status-bar { align-items: flex-start; flex-direction: column; }
    .saude-atualizacao { justify-items: start; }
    .saude-config-form,
    .saude-totem { padding: 14px; }
    .saude-config-actions .btn { width: 100%; }
}

/* Central de produtos e estoque */
.central-produtos .page-body { display: block; }
.central-produtos-filtros { display: flex; width: 100%; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.central-produtos-filtros .campo { min-width: 150px; margin: 0; }
.central-produtos-filtros .campo:first-child { min-width: 230px; }
.central-produtos-filtros label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.central-produtos-filtros select,
.central-produtos-filtros input { min-height: 38px; }
.campo-sufixo { display: flex; align-items: stretch; }
.campo-sufixo input { width: 88px; border-radius: 7px 0 0 7px; }
.campo-sufixo span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-left: 0; border-radius: 0 7px 7px 0; background: var(--surface-2); color: var(--text-secondary); font-size: 10.5px; }
.central-produtos-kpis { margin-bottom: 18px; }
.central-produtos-duas-colunas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.central-produtos-duas-colunas .page-section { margin: 0; }
.central-ranking { display: grid; }
.central-ranking-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.central-ranking-item:first-child { border-top: 0; }
.central-ranking-posicao { display: inline-flex; width: 23px; height: 23px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); font-size: 10px; font-weight: 800; }
.central-ranking-item strong,
.central-ranking-item small { display: block; }
.central-ranking-item strong { color: var(--text-base); font-size: 11px; }
.central-ranking-item small { margin-top: 2px; color: var(--text-secondary); font-size: 9.5px; }
.central-ranking-valor { text-align: right; }
.central-ranking-valor strong { color: var(--primary); font-variant-numeric: tabular-nums; }
.central-prioridades { display: grid; padding: 6px 14px 14px; }
.central-prioridades button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text-base); text-align: left; cursor: pointer; }
.central-prioridades button:first-child { border-top: 0; }
.central-prioridades button:hover strong { color: var(--primary); }
.central-prioridades button > i { color: var(--text-muted); font-size: 10px; }
.central-prioridade-icone { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 7px; background: var(--surface-2); color: var(--text-secondary); }
.central-prioridades strong,
.central-prioridades small { display: block; }
.central-prioridades strong { font-size: 11.5px; }
.central-prioridades small { margin-top: 2px; color: var(--text-secondary); font-size: 9.5px; }
.central-produtos-titulo-filtro { gap: 18px; }
.central-busca { position: relative; width: min(310px, 100%); }
.central-busca i { position: absolute; top: 50%; left: 11px; color: var(--text-secondary); font-size: 11px; transform: translateY(-50%); }
.central-busca input { width: 100%; min-height: 36px; padding-left: 31px; }
.central-produtos-tabela table { min-width: 1480px; }
.central-abc { display: inline-flex; min-width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-2); color: var(--text-secondary); font-size: 10px; font-weight: 800; }
.central-abc-a { background: var(--primary-10); color: var(--primary); }
.central-abc-b { background: var(--info-soft); color: var(--info); }
.central-alertas-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); overflow: hidden; }
.central-alertas-resumo > div { display: grid; gap: 3px; padding: 11px 16px; }
.central-alertas-resumo > div + div { border-left: 1px solid var(--border); }
.central-alertas-resumo span { color: var(--text-secondary); font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
.central-alertas-resumo strong { color: var(--text-base); font-size: 14px; font-variant-numeric: tabular-nums; }
.central-matriz table { min-width: 920px; }
.central-matriz th small,
.central-matriz td small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 8.5px; font-weight: 400; white-space: nowrap; }

@media (max-width: 1000px) {
    .central-produtos-duas-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .central-alertas-resumo { grid-template-columns: repeat(2, 1fr); }
    .central-alertas-resumo > div:nth-child(3) { border-left: 0; }
    .central-alertas-resumo > div:nth-child(n+3) { border-top: 1px solid var(--border); }
    .central-produtos-titulo-filtro { align-items: stretch; flex-direction: column; }
    .central-busca { width: 100%; }
}
@media (max-width: 540px) {
    .central-produtos-filtros .campo,
    .central-produtos-filtros .campo:first-child,
    .central-produtos-filtros .btn { width: 100%; }
    .campo-sufixo input { width: 100%; }
}

/* ==========================================================================
   AJUDA CONTEXTUAL E TOUR
   ========================================================================== */

/*
 * O botao flutuante fica no canto inferior direito, longe do menu e das acoes
 * de pagina. Em telas estreitas ele encolhe: numa lista de produtos no celular,
 * um botao de 56px cobre uma linha inteira da tabela.
 */
.ajuda-fab {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 0;
    background: var(--marca-azul-escuro);
    color: var(--marca-amarelo);
    font-size: 21px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    z-index: 900;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ajuda-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }

.ajuda-pop { position: fixed; inset: 0; z-index: 1200; display: flex;
             align-items: flex-end; justify-content: flex-end; padding: 22px; }
.ajuda-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.35); border: 0; cursor: default; }

.ajuda-card {
    position: relative;
    width: min(420px, 100%);
    max-height: min(620px, 88vh);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.32);
    overflow: hidden;
}
.ajuda-card-topo { display: flex; align-items: flex-start; justify-content: space-between;
                   gap: 10px; padding: 16px 16px 10px; }
.ajuda-card-topo h2 { font-size: 17px; margin: 2px 0 0; }
.ajuda-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
                 color: var(--marca-amarelo); font-weight: 700; }

.ajuda-busca { position: relative; padding: 0 16px 12px; }
.ajuda-busca i {
    position: absolute; left: 28px; top: 20px; z-index: 1;
    color: var(--text-muted); font-size: 12px;
    transform: translateY(-50%); pointer-events: none;
}
.ajuda-busca input {
    appearance: none;
    width: 100%; min-height: 40px;
    padding: 8px 36px 8px 34px;
    border: 1px solid var(--border-forte);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-base);
    font-family: inherit; font-size: 13.5px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ajuda-busca input::placeholder { color: var(--text-muted); opacity: 1; }
.ajuda-busca input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-10);
}
.ajuda-busca input::-webkit-search-cancel-button { cursor: pointer; }

.ajuda-card-corpo { flex: 1; overflow-y: auto; padding: 0 10px 10px; min-height: 0; }
.ajuda-secao { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
               color: var(--text-muted); margin: 12px 6px 6px; }

.ajuda-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px; border-radius: 10px;
    color: var(--text-base); text-decoration: none;
}
.ajuda-item:hover { background: var(--surface-3); text-decoration: none; }
.ajuda-item-tipo {
    flex: none; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
    padding: 3px 7px; border-radius: 6px;
    background: var(--accent-dim); color: var(--marca-amarelo); font-weight: 700;
}
.ajuda-item-txt { flex: 1; min-width: 0; }
.ajuda-item-txt strong { display: block; font-size: 13.5px; }
.ajuda-item-txt small { display: block; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }
.ajuda-item > i { color: var(--text-muted); font-size: 11px; }

.ajuda-card-rodape { display: flex; gap: 8px; justify-content: space-between;
                     padding: 12px 16px; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ tour */
.ajuda-tour { position: fixed; inset: 0; z-index: 1300; }
.ajuda-tour-escuro { position: absolute; inset: 0; background: rgba(0,0,0,.55); }

/*
 * O holofote e um elemento POSICIONADO SOBRE a ancora, e nao um z-index no
 * proprio elemento: mexer no empilhamento de algo que ja esta dentro de um
 * `position` qualquer da resultado diferente conforme a tela, e o tour precisa
 * funcionar igual em todas.
 */
.ajuda-holofote {
    position: fixed;
    border-radius: 10px;
    border: 2px solid var(--marca-amarelo);
    box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
    pointer-events: none;
    transition: all .2s var(--ease);
}

.ajuda-tour-card {
    position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
    width: min(520px, calc(100% - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.4);
    overflow: hidden;
}
.ajuda-tour-barra { height: 3px; background: var(--surface-3); }
.ajuda-tour-barra span { display: block; height: 100%; width: 0;
                         background: var(--marca-amarelo); transition: width .25s var(--ease); }
.ajuda-tour-topo { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 8px; }
.ajuda-tour-topo h2 { font-size: 17px; margin: 2px 0 0; }
.ajuda-tour-icone {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--accent-dim); color: var(--marca-amarelo);
}
.ajuda-tour-corpo { padding: 0 16px 14px; line-height: 1.65; color: var(--text-secondary); }
.ajuda-tour-rodape { display: flex; justify-content: space-between; align-items: center;
                     gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
    .ajuda-fab { width: 44px; height: 44px; font-size: 17px; right: 14px; bottom: 14px; }
    .ajuda-pop { padding: 0; align-items: stretch; }
    .ajuda-card { width: 100%; max-height: 100%; border-radius: 0; }
}

/* A barra inferior ocupa a base do celular; a ajuda fica acima dela. */
@media (max-width: 800px) {
    .ajuda-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}