/* ==========================================================================
   Instany - Design System dos Painéis
   Tokens, componentes e layout compartilhados pelo admin e pelo cliente.
   Suporta tema claro e escuro por atributo data-tema no elemento raiz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Os controles nativos (campos, listas, barras de rolagem) seguem o tema
       escolhido na página, e não a preferência do sistema operacional. Sem
       isso, um computador em modo escuro pintava os campos de escuro mesmo
       com a página em modo claro, escondendo o texto digitado. */
    color-scheme: light;

    /* Marca */
    --marca-50:  #fff1f1;
    --marca-100: #ffe0e0;
    --marca-200: #ffc6c6;
    --marca-300: #ff9f9f;
    --marca-400: #f96a6a;
    --marca-500: #ef4444;
    --marca-600: #dc2626;
    --marca-700: #b91c1c;
    --marca-800: #971b1b;
    --marca-900: #7d1d1d;

    /* Superfícies */
    --fundo:            #f6f7f9;
    --superficie:       #ffffff;
    --superficie-alt:   #fbfbfc;
    --superficie-forte: #ffffff;
    --superficie-hover: #f4f5f7;

    /* Texto */
    --texto-forte: #0f1115;
    --texto:       #33383f;
    --texto-suave: #6b727d;
    --texto-fraco: #98a0ab;

    /* Linhas */
    --borda:       #e6e8ec;
    --borda-forte: #d3d7de;

    /* Navegação */
    --nav-fundo:        #0d0f13;
    --nav-fundo-alt:    #14171d;
    --nav-texto:        #a7aeba;
    --nav-texto-forte:  #ffffff;
    --nav-ativo-fundo:  rgba(239, 68, 68, 0.14);
    --nav-borda:        rgba(255, 255, 255, 0.07);

    /* Estados */
    --ok-fundo: #e7f7ee;   --ok-texto: #0d7a45;   --ok-borda: #b7e6ce;
    --info-fundo: #e8f1fe; --info-texto: #1256b8; --info-borda: #bcd7fb;
    --aviso-fundo: #fdf3e0; --aviso-texto: #9a6206; --aviso-borda: #f6dcaa;
    --erro-fundo: #fdeceb; --erro-texto: #b4231c; --erro-borda: #f8c7c4;
    --neutro-fundo: #eef0f3; --neutro-texto: #4b525c; --neutro-borda: #dcdfe5;

    /* Elevação */
    --sombra-xs: 0 1px 2px rgba(15, 17, 21, 0.05);
    --sombra-sm: 0 1px 3px rgba(15, 17, 21, 0.07), 0 1px 2px rgba(15, 17, 21, 0.04);
    --sombra-md: 0 4px 12px rgba(15, 17, 21, 0.07), 0 2px 4px rgba(15, 17, 21, 0.04);
    --sombra-lg: 0 12px 28px rgba(15, 17, 21, 0.10), 0 4px 10px rgba(15, 17, 21, 0.05);
    --sombra-xl: 0 24px 48px rgba(15, 17, 21, 0.14), 0 8px 16px rgba(15, 17, 21, 0.06);

    /* Formas */
    --raio-sm: 8px;
    --raio:    12px;
    --raio-lg: 16px;
    --raio-xl: 22px;
    --raio-full: 999px;

    /* Movimento */
    --transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicao-lenta: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Medidas do layout */
    --largura-nav: 268px;
    --altura-topo: 68px;
}

[data-tema="escuro"] {
    color-scheme: dark;

    --fundo:            #0b0d11;
    --superficie:       #14171d;
    --superficie-alt:   #191d24;
    --superficie-forte: #1d222a;
    --superficie-hover: #232830;

    --texto-forte: #f3f5f8;
    --texto:       #d3d8e0;
    --texto-suave: #98a1af;
    --texto-fraco: #6e7784;

    --borda:       #262c35;
    --borda-forte: #333b46;

    --nav-fundo:     #0d1015;
    --nav-fundo-alt: #14181f;
    --nav-borda:     rgba(255, 255, 255, 0.06);

    --ok-fundo: #10291d;   --ok-texto: #56d394;   --ok-borda: #1d4433;
    --info-fundo: #10233d; --info-texto: #74aef8; --info-borda: #1d3a63;
    --aviso-fundo: #33260f; --aviso-texto: #eeb45c; --aviso-borda: #55401a;
    --erro-fundo: #331616; --erro-texto: #f58a84; --erro-borda: #5a2724;
    --neutro-fundo: #1e232b; --neutro-texto: #a6aeba; --neutro-borda: #2e343d;

    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
    --sombra-xl: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--texto-forte);
    font-weight: 650;
    letter-spacing: -0.018em;
    line-height: 1.25;
    margin: 0;
}

a { color: inherit; text-decoration: none; }

::selection {
    background: var(--marca-500);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--marca-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Rolagem discreta */
.rolagem-fina { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
.rolagem-fina::-webkit-scrollbar { width: 8px; height: 8px; }
.rolagem-fina::-webkit-scrollbar-track { background: transparent; }
.rolagem-fina::-webkit-scrollbar-thumb {
    background: var(--borda-forte);
    border-radius: var(--raio-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
.rolagem-fina::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Estrutura do painel
   -------------------------------------------------------------------------- */
.painel { display: flex; min-height: 100vh; min-height: 100dvh; }

.painel-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--largura-nav);
    display: flex;
    flex-direction: column;
    background: var(--nav-fundo);
    border-right: 1px solid var(--nav-borda);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--transicao-lenta);
}
.painel-nav.aberta { transform: translateX(0); }

.painel-nav__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--altura-topo);
    padding: 0 20px;
    border-bottom: 1px solid var(--nav-borda);
    flex-shrink: 0;
}
.painel-nav__topo img { height: 26px; width: auto; display: block; }

.painel-nav__corpo {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 12px 8px;
}

.painel-nav__grupo {
    padding: 16px 12px 6px;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}
.painel-nav__grupo:first-child { padding-top: 4px; }

.painel-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--raio-sm);
    color: var(--nav-texto);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transicao), color var(--transicao);
}
.painel-nav__item i,
.painel-nav__item svg { width: 18px; font-size: 15px; text-align: center; flex-shrink: 0; }
.painel-nav__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.painel-nav__item:hover {
    background: var(--nav-fundo-alt);
    color: var(--nav-texto-forte);
}
.painel-nav__item.ativo {
    background: var(--nav-ativo-fundo);
    color: #ff8f8f;
    font-weight: 600;
}
.painel-nav__item.ativo::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--marca-500);
}

.painel-nav__marca {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--raio-full);
    background: var(--marca-500);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    text-align: center;
    line-height: 1.5;
}

.painel-nav__rodape {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--nav-borda);
}

.painel-nav__perfil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--raio-sm);
    color: var(--nav-texto);
    transition: background var(--transicao);
}
.painel-nav__perfil:hover { background: var(--nav-fundo-alt); }
.painel-nav__perfil .avatar { width: 32px; height: 32px; font-size: 12px; }
.painel-nav__perfil-dados { flex: 1; min-width: 0; }
.painel-nav__perfil-nome {
    color: var(--nav-texto-forte);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-nav__perfil-papel { font-size: 11.5px; color: var(--texto-fraco); }

.painel-veu {
    position: fixed;
    inset: 0;
    background: rgba(9, 11, 15, 0.55);
    backdrop-filter: blur(2px);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicao);
}
.painel-veu.aberto { opacity: 1; pointer-events: auto; }

.painel-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

/* Barra superior */
.painel-topo {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--altura-topo);
    padding: 0 16px;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--borda);
}
@supports not (backdrop-filter: blur(1px)) {
    .painel-topo { background: var(--superficie); }
}

.painel-topo__titulo {
    flex: 1;
    min-width: 0;
}
.painel-topo__titulo h1 {
    font-size: 17px;
    font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-topo__titulo p {
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--texto-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.painel-principal {
    flex: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.painel-rodape {
    padding: 20px 16px;
    border-top: 1px solid var(--borda);
    color: var(--texto-fraco);
    font-size: 12.5px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   4. Botões de ícone e ações do topo
   -------------------------------------------------------------------------- */
.btn-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--texto-suave);
    font-size: 15px;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn-icone:hover {
    background: var(--superficie-hover);
    color: var(--texto-forte);
    border-color: var(--borda);
}
.btn-icone__marca {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--raio-full);
    background: var(--marca-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--superficie);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--raio-full);
    background: linear-gradient(135deg, var(--marca-500), var(--marca-700));
    color: #fff;
    font-weight: 650;
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   5. Cartões
   -------------------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xs);
    overflow: hidden;
}
.cartao--suspenso { box-shadow: var(--sombra-md); }
.cartao--interativo { transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao); }
.cartao--interativo:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-lg);
    border-color: var(--borda-forte);
}

.cartao__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--borda);
}
.cartao__cabecalho h2,
.cartao__cabecalho h3 { font-size: 15.5px; font-weight: 650; }
.cartao__cabecalho p { margin: 2px 0 0; font-size: 13px; color: var(--texto-suave); }

.cartao__corpo { padding: 20px; }
.cartao__rodape {
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
    background: var(--superficie-alt);
}

/* Indicadores numéricos */
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.indicador {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xs);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.indicador::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cor-acento, var(--marca-500));
    opacity: 0.9;
}

.indicador__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--raio);
    background: var(--cor-fundo-icone, var(--marca-50));
    color: var(--cor-acento, var(--marca-600));
    font-size: 17px;
}
.indicador__dados { min-width: 0; flex: 1; }
.indicador__rotulo {
    font-size: 12.5px;
    font-weight: 550;
    color: var(--texto-suave);
    letter-spacing: 0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.indicador__valor {
    margin-top: 3px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--texto-forte);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.indicador__nota { margin-top: 3px; font-size: 12px; color: var(--texto-fraco); }

.indicador--ok    { --cor-acento: #16a34a; --cor-fundo-icone: var(--ok-fundo); }
.indicador--info  { --cor-acento: #2563eb; --cor-fundo-icone: var(--info-fundo); }
.indicador--aviso { --cor-acento: #d97706; --cor-fundo-icone: var(--aviso-fundo); }
.indicador--erro  { --cor-acento: #dc2626; --cor-fundo-icone: var(--erro-fundo); }
.indicador--neutro{ --cor-acento: #64748b; --cor-fundo-icone: var(--neutro-fundo); }
.indicador--roxo  { --cor-acento: #7c3aed; --cor-fundo-icone: #f0e9fe; }
[data-tema="escuro"] .indicador--roxo { --cor-fundo-icone: #221a3a; }

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primario {
    background: var(--marca-600);
    color: #fff;
    box-shadow: var(--sombra-xs);
}
.btn--primario:hover { background: var(--marca-700); box-shadow: var(--sombra-md); }

.btn--neutro {
    background: var(--superficie);
    border-color: var(--borda-forte);
    color: var(--texto);
}
.btn--neutro:hover { background: var(--superficie-hover); border-color: var(--texto-fraco); }

.btn--fantasma { background: transparent; color: var(--texto-suave); }
.btn--fantasma:hover { background: var(--superficie-hover); color: var(--texto-forte); }

.btn--perigo { background: var(--erro-texto); color: #fff; }
.btn--perigo:hover { filter: brightness(0.92); }

.btn--pequeno { padding: 7px 12px; font-size: 13px; gap: 6px; }
.btn--bloco { width: 100%; }

/* Ações compactas de tabela */
.acao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    background: var(--neutro-fundo);
    color: var(--neutro-texto);
    font-size: 12.5px;
    font-weight: 550;
    cursor: pointer;
    transition: filter var(--transicao), background var(--transicao);
}
.acao:hover { filter: brightness(0.95); }
.acao--ok    { background: var(--ok-fundo); color: var(--ok-texto); }
.acao--info  { background: var(--info-fundo); color: var(--info-texto); }
.acao--aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.acao--erro  { background: var(--erro-fundo); color: var(--erro-texto); }

/* --------------------------------------------------------------------------
   7. Selos de estado
   -------------------------------------------------------------------------- */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--neutro-borda);
    border-radius: var(--raio-full);
    background: var(--neutro-fundo);
    color: var(--neutro-texto);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.selo::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.selo--sem-ponto::before { display: none; }
.selo--ok    { background: var(--ok-fundo);    color: var(--ok-texto);    border-color: var(--ok-borda); }
.selo--info  { background: var(--info-fundo);  color: var(--info-texto);  border-color: var(--info-borda); }
.selo--aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: var(--aviso-borda); }
.selo--erro  { background: var(--erro-fundo);  color: var(--erro-texto);  border-color: var(--erro-borda); }

/* --------------------------------------------------------------------------
   8. Tabelas
   -------------------------------------------------------------------------- */
.tabela-area {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tabela thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 16px;
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.tabela tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
    vertical-align: middle;
}
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--superficie-hover); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .celula-principal { color: var(--texto-forte); font-weight: 600; }
.tabela .celula-apoio { font-size: 12.5px; color: var(--texto-suave); }
.tabela .celula-numero { font-variant-numeric: tabular-nums; }
.tabela .celula-acoes { white-space: nowrap; }
.tabela .celula-acoes > * { margin-right: 4px; }

/* Em telas estreitas cada linha vira um cartão legível */
@media (max-width: 767px) {
    .tabela--adaptavel thead { display: none; }
    .tabela--adaptavel tbody tr {
        display: block;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid var(--borda);
        border-radius: var(--raio);
        background: var(--superficie);
        box-shadow: var(--sombra-xs);
    }
    .tabela--adaptavel tbody tr:hover { background: var(--superficie); }
    .tabela--adaptavel tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0;
        border-bottom: 1px dashed var(--borda);
        text-align: right;
    }
    .tabela--adaptavel tbody td:last-child { border-bottom: 0; padding-bottom: 0; }
    .tabela--adaptavel tbody td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--texto-suave);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .tabela--adaptavel tbody td:not([data-rotulo]) { justify-content: flex-end; }
    .tabela--adaptavel .celula-acoes { flex-wrap: wrap; justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   9. Formulários
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 18px; }
.campo:last-child { margin-bottom: 0; }

.campo__rotulo {
    display: block;
    margin-bottom: 7px;
    color: var(--texto-forte);
    font-size: 13.5px;
    font-weight: 600;
}
.campo__dica { margin-top: 6px; font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }
.campo__erro { margin-top: 6px; font-size: 12.5px; color: var(--erro-texto); font-weight: 550; }

.entrada,
.selecao,
.area-texto {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto-forte);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
    appearance: none;
}
.entrada::placeholder, .area-texto::placeholder { color: var(--texto-fraco); }
.entrada:hover, .selecao:hover, .area-texto:hover { border-color: var(--texto-fraco); }
.entrada:focus, .selecao:focus, .area-texto:focus {
    outline: none;
    border-color: var(--marca-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-500) 18%, transparent);
}
.entrada:disabled, .selecao:disabled, .area-texto:disabled {
    background: var(--superficie-alt);
    color: var(--texto-fraco);
    cursor: not-allowed;
}
.area-texto { resize: vertical; min-height: 96px; }

.selecao {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b727d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}
[data-tema="escuro"] .selecao {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a1af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.campo-com-icone { position: relative; }
.campo-com-icone .entrada { padding-left: 40px; }
.campo-com-icone__icone {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-fraco);
    font-size: 14px;
    pointer-events: none;
}

/* Interruptor */
.interruptor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}
.interruptor:hover { border-color: var(--borda-forte); background: var(--superficie-hover); }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor__trilho {
    position: relative;
    width: 40px;
    height: 23px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: var(--raio-full);
    background: var(--borda-forte);
    transition: background var(--transicao);
}
.interruptor__trilho::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicao);
}
.interruptor input:checked + .interruptor__trilho { background: var(--marca-500); }
.interruptor input:checked + .interruptor__trilho::after { transform: translateX(17px); }
.interruptor input:focus-visible + .interruptor__trilho { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-500) 25%, transparent); }
.interruptor__texto { min-width: 0; }
.interruptor__titulo { display: block; color: var(--texto-forte); font-size: 14px; font-weight: 600; }
.interruptor__nota { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }

/* Grade de formulário */
.grade { display: grid; gap: 16px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* --------------------------------------------------------------------------
   10. Avisos
   -------------------------------------------------------------------------- */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--neutro-borda);
    border-left-width: 3px;
    border-radius: var(--raio-sm);
    background: var(--neutro-fundo);
    color: var(--neutro-texto);
    font-size: 13.5px;
    line-height: 1.55;
}
.aviso i { margin-top: 2px; font-size: 15px; flex-shrink: 0; }
.aviso strong { font-weight: 650; }
.aviso--ok    { background: var(--ok-fundo);    color: var(--ok-texto);    border-color: var(--ok-borda); }
.aviso--info  { background: var(--info-fundo);  color: var(--info-texto);  border-color: var(--info-borda); }
.aviso--aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: var(--aviso-borda); }
.aviso--erro  { background: var(--erro-fundo);  color: var(--erro-texto);  border-color: var(--erro-borda); }

/* --------------------------------------------------------------------------
   11. Estado vazio
   -------------------------------------------------------------------------- */
.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    text-align: center;
}
.vazio__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    border-radius: var(--raio-lg);
    background: var(--superficie-hover);
    color: var(--texto-fraco);
    font-size: 24px;
}
.vazio__titulo { color: var(--texto-forte); font-size: 15.5px; font-weight: 650; }
.vazio__texto { margin: 6px 0 0; max-width: 420px; font-size: 13.5px; color: var(--texto-suave); line-height: 1.6; }
.vazio__acao { margin-top: 20px; }

/* --------------------------------------------------------------------------
   12. Cabeçalho de página
   -------------------------------------------------------------------------- */
.pagina-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.pagina-cabecalho__texto { min-width: 0; }
.pagina-cabecalho h1 { font-size: 23px; letter-spacing: -0.025em; }
.pagina-cabecalho p { margin: 5px 0 0; color: var(--texto-suave); font-size: 14px; }
.pagina-cabecalho__acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   13. Painéis suspensos
   -------------------------------------------------------------------------- */
.suspenso { position: relative; }
.suspenso__painel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(384px, calc(100vw - 24px));
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xl);
    z-index: 70;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity var(--transicao), transform var(--transicao);
}
.suspenso__painel.aberto { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.suspenso__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie-alt);
}
.suspenso__cabecalho h3 { font-size: 14px; font-weight: 650; }
.suspenso__lista { max-height: min(420px, 60vh); overflow-y: auto; }
.suspenso__rodape { padding: 10px; border-top: 1px solid var(--borda); background: var(--superficie-alt); }

.suspenso__secao {
    padding: 7px 16px;
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borda);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.notificacao {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--borda);
    transition: background var(--transicao);
}
.notificacao:hover { background: var(--superficie-hover); }
.notificacao--nova { background: color-mix(in srgb, var(--info-fundo) 55%, transparent); }
.notificacao__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: var(--raio-sm);
    font-size: 14px;
}
.notificacao__corpo { flex: 1; min-width: 0; }
.notificacao__titulo {
    color: var(--texto-forte);
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notificacao__texto {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notificacao__hora { margin-top: 3px; font-size: 11.5px; color: var(--texto-fraco); }

/* --------------------------------------------------------------------------
   14. Janelas modais
   -------------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(9, 11, 15, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicao);
}
.modal.aberto { opacity: 1; pointer-events: auto; }
.modal__caixa {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xl);
    transform: translateY(12px) scale(0.98);
    transition: transform var(--transicao-lenta);
}
.modal.aberto .modal__caixa { transform: translateY(0) scale(1); }
.modal__caixa--larga { max-width: 860px; }
.modal__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}
.modal__cabecalho h3 { font-size: 16px; font-weight: 650; }
.modal__corpo { padding: 20px; overflow-y: auto; flex: 1; }
.modal__rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
    background: var(--superficie-alt);
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .modal { align-items: flex-end; padding: 0; }
    .modal__caixa {
        max-width: 100%;
        max-height: 92dvh;
        border-radius: var(--raio-xl) var(--raio-xl) 0 0;
        border-bottom: 0;
        transform: translateY(100%);
    }
    .modal__rodape > .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   15. Abas
   -------------------------------------------------------------------------- */
.abas {
    display: flex;
    gap: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--borda);
    overflow-x: auto;
    scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
    position: relative;
    padding: 11px 15px;
    color: var(--texto-suave);
    font-size: 14px;
    font-weight: 550;
    white-space: nowrap;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: color var(--transicao);
}
.aba:hover { color: var(--texto-forte); }
.aba.ativa { color: var(--marca-600); font-weight: 650; }
.aba.ativa::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--marca-500);
}
[data-tema="escuro"] .aba.ativa { color: #ff8f8f; }

/* --------------------------------------------------------------------------
   16. Barra de progresso
   -------------------------------------------------------------------------- */
.progresso {
    height: 7px;
    border-radius: var(--raio-full);
    background: var(--superficie-hover);
    overflow: hidden;
}
.progresso__barra {
    height: 100%;
    border-radius: var(--raio-full);
    background: var(--marca-500);
    transition: width var(--transicao-lenta);
}
.progresso__barra--ok { background: #16a34a; }
.progresso__barra--aviso { background: #d97706; }
.progresso__barra--erro { background: #dc2626; }

/* --------------------------------------------------------------------------
   17. Utilitários
   -------------------------------------------------------------------------- */
.pilha { display: flex; flex-direction: column; gap: 16px; }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha--fim { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }
.empurra { margin-left: auto; }
.texto-suave { color: var(--texto-suave); }
.texto-fraco { color: var(--texto-fraco); }
.texto-forte { color: var(--texto-forte); }
.numero { font-variant-numeric: tabular-nums; }
.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.oculto { display: none !important; }

.aparece { animation: aparece var(--transicao-lenta) both; }
@keyframes aparece {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pulsa { animation: pulsa 2s ease-in-out infinite; }
@keyframes pulsa {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* --------------------------------------------------------------------------
   18. Pontos de quebra do layout
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .painel-topo { padding: 0 24px; }
    .painel-principal { padding: 26px 24px 48px; }
    .painel-rodape { padding: 22px 24px; text-align: left; }
    .pagina-cabecalho h1 { font-size: 25px; }
}

@media (min-width: 1024px) {
    .painel-nav { transform: translateX(0); }
    .painel-conteudo { margin-left: var(--largura-nav); }
    .painel-veu { display: none; }
    .painel-topo { padding: 0 32px; }
    .painel-principal { padding: 30px 32px 56px; }
    .painel-rodape { padding: 24px 32px; }
    .painel-topo__titulo h1 { font-size: 18px; }
}

@media (min-width: 1536px) {
    .painel-principal { padding: 34px 44px 64px; }
}

/* Telas muito estreitas */
@media (max-width: 380px) {
    :root { --largura-nav: 88vw; }
    .painel-principal { padding: 16px 12px 36px; }
    .painel-topo { padding: 0 12px; gap: 8px; }
    .indicador { padding: 15px; gap: 12px; }
    .indicador__valor { font-size: 22px; }
    .btn { padding: 9px 14px; }
}

/* Impressão */
@media print {
    .painel-nav, .painel-topo, .painel-rodape, .btn, .acao, .painel-veu { display: none !important; }
    .painel-conteudo { margin-left: 0; }
    .cartao { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   19. Ponte com as classes utilitárias das páginas
   As telas foram escritas com utilitários de cor fixos. Em vez de reescrever
   todas, o tema escuro remapeia essas classes para os tokens do sistema.
   -------------------------------------------------------------------------- */

/* Refinamentos válidos nos dois temas */
.painel-principal .bg-white,
.painel-principal .rounded-xl.shadow-sm,
.painel-principal .rounded-lg.shadow-sm {
    border-radius: var(--raio-lg);
}
.painel-principal .shadow-sm { box-shadow: var(--sombra-xs); }
.painel-principal .shadow    { box-shadow: var(--sombra-sm); }
.painel-principal .shadow-md { box-shadow: var(--sombra-md); }
.painel-principal .shadow-lg { box-shadow: var(--sombra-lg); }
.painel-principal .shadow-xl { box-shadow: var(--sombra-xl); }

/* Todo bloco branco ganha uma borda sutil, que sustenta melhor o layout */
.painel-principal .bg-white:not(.no-borda) {
    border: 1px solid var(--borda);
}

[data-tema="escuro"] .painel-principal {
    /* Superfícies */
    --tw-white: var(--superficie);
}

[data-tema="escuro"] .painel-principal .bg-white { background-color: var(--superficie) !important; }
[data-tema="escuro"] .painel-principal .bg-gray-50 { background-color: var(--superficie-alt) !important; }
[data-tema="escuro"] .painel-principal .bg-gray-100 { background-color: var(--superficie-hover) !important; }
[data-tema="escuro"] .painel-principal .bg-gray-200 { background-color: var(--borda) !important; }
[data-tema="escuro"] .painel-principal .bg-gray-800,
[data-tema="escuro"] .painel-principal .bg-gray-900 { background-color: var(--nav-fundo) !important; }

/* Texto */
[data-tema="escuro"] .painel-principal .text-gray-900,
[data-tema="escuro"] .painel-principal .text-gray-800 { color: var(--texto-forte) !important; }
[data-tema="escuro"] .painel-principal .text-gray-700,
[data-tema="escuro"] .painel-principal .text-gray-600 { color: var(--texto) !important; }
[data-tema="escuro"] .painel-principal .text-gray-500 { color: var(--texto-suave) !important; }
[data-tema="escuro"] .painel-principal .text-gray-400,
[data-tema="escuro"] .painel-principal .text-gray-300 { color: var(--texto-fraco) !important; }

/* Linhas */
[data-tema="escuro"] .painel-principal .border,
[data-tema="escuro"] .painel-principal .border-t,
[data-tema="escuro"] .painel-principal .border-b,
[data-tema="escuro"] .painel-principal .border-l,
[data-tema="escuro"] .painel-principal .border-r,
[data-tema="escuro"] .painel-principal .border-gray-100,
[data-tema="escuro"] .painel-principal .border-gray-200,
[data-tema="escuro"] .painel-principal .border-gray-300 { border-color: var(--borda) !important; }
[data-tema="escuro"] .painel-principal .divide-y > * + * { border-color: var(--borda) !important; }

/* Campos de formulário
   Vale nos dois temas: telas antigas usam utilitários sem cor de fundo, e
   sem uma cor explícita o navegador aplicava o esquema do sistema, deixando
   o campo escuro com texto escuro. */
.painel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]),
.painel select,
.painel textarea,
.acesso input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.acesso select,
.acesso textarea {
    background-color: var(--superficie);
    border-color: var(--borda-forte);
    color: var(--texto-forte);
}
.painel input::placeholder,
.painel textarea::placeholder,
.acesso input::placeholder,
.acesso textarea::placeholder { color: var(--texto-fraco); opacity: 1; }

.painel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):focus,
.painel select:focus,
.painel textarea:focus {
    border-color: var(--marca-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-500) 18%, transparent);
    outline: none;
}

.painel input:disabled,
.painel select:disabled,
.painel textarea:disabled,
.painel input[readonly] {
    background-color: var(--superficie-alt);
    color: var(--texto-suave);
}

/* Caixas de seleção e opções acompanham a cor da marca */
.painel input[type=checkbox],
.painel input[type=radio],
.acesso input[type=checkbox],
.acesso input[type=radio] { accent-color: var(--marca-500); }

[data-tema="escuro"] .painel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]),
[data-tema="escuro"] .painel select,
[data-tema="escuro"] .painel textarea,
[data-tema="escuro"] .acesso input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
[data-tema="escuro"] .acesso select,
[data-tema="escuro"] .acesso textarea {
    background-color: var(--superficie-forte);
}

/* Preenchimento automático do navegador não pode voltar ao branco fixo */
.painel input:-webkit-autofill,
.painel input:-webkit-autofill:hover,
.painel input:-webkit-autofill:focus,
.acesso input:-webkit-autofill,
.acesso input:-webkit-autofill:hover,
.acesso input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto-forte);
    -webkit-box-shadow: 0 0 0 1000px var(--superficie) inset;
    caret-color: var(--texto-forte);
}
[data-tema="escuro"] .painel input:-webkit-autofill,
[data-tema="escuro"] .painel input:-webkit-autofill:hover,
[data-tema="escuro"] .painel input:-webkit-autofill:focus,
[data-tema="escuro"] .acesso input:-webkit-autofill,
[data-tema="escuro"] .acesso input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--superficie-forte) inset;
}

/* Selos e realces coloridos */
[data-tema="escuro"] .painel-principal .bg-green-50,
[data-tema="escuro"] .painel-principal .bg-green-100 { background-color: var(--ok-fundo) !important; }
[data-tema="escuro"] .painel-principal .text-green-500,
[data-tema="escuro"] .painel-principal .text-green-600,
[data-tema="escuro"] .painel-principal .text-green-700,
[data-tema="escuro"] .painel-principal .text-green-800 { color: var(--ok-texto) !important; }
[data-tema="escuro"] .painel-principal .border-green-200 { border-color: var(--ok-borda) !important; }

[data-tema="escuro"] .painel-principal .bg-blue-50,
[data-tema="escuro"] .painel-principal .bg-blue-100 { background-color: var(--info-fundo) !important; }
[data-tema="escuro"] .painel-principal .text-blue-500,
[data-tema="escuro"] .painel-principal .text-blue-600,
[data-tema="escuro"] .painel-principal .text-blue-700,
[data-tema="escuro"] .painel-principal .text-blue-800 { color: var(--info-texto) !important; }
[data-tema="escuro"] .painel-principal .border-blue-200 { border-color: var(--info-borda) !important; }

[data-tema="escuro"] .painel-principal .bg-yellow-50,
[data-tema="escuro"] .painel-principal .bg-yellow-100,
[data-tema="escuro"] .painel-principal .bg-amber-50,
[data-tema="escuro"] .painel-principal .bg-amber-100,
[data-tema="escuro"] .painel-principal .bg-orange-100 { background-color: var(--aviso-fundo) !important; }
[data-tema="escuro"] .painel-principal .text-yellow-500,
[data-tema="escuro"] .painel-principal .text-yellow-600,
[data-tema="escuro"] .painel-principal .text-yellow-700,
[data-tema="escuro"] .painel-principal .text-yellow-800,
[data-tema="escuro"] .painel-principal .text-amber-600,
[data-tema="escuro"] .painel-principal .text-amber-700,
[data-tema="escuro"] .painel-principal .text-amber-800,
[data-tema="escuro"] .painel-principal .text-orange-600,
[data-tema="escuro"] .painel-principal .text-orange-700 { color: var(--aviso-texto) !important; }
[data-tema="escuro"] .painel-principal .border-yellow-200,
[data-tema="escuro"] .painel-principal .border-amber-200 { border-color: var(--aviso-borda) !important; }

[data-tema="escuro"] .painel-principal .bg-red-50,
[data-tema="escuro"] .painel-principal .bg-red-100 { background-color: var(--erro-fundo) !important; }
[data-tema="escuro"] .painel-principal .text-red-600,
[data-tema="escuro"] .painel-principal .text-red-700,
[data-tema="escuro"] .painel-principal .text-red-800 { color: var(--erro-texto) !important; }
[data-tema="escuro"] .painel-principal .border-red-200 { border-color: var(--erro-borda) !important; }

[data-tema="escuro"] .painel-principal .bg-purple-100,
[data-tema="escuro"] .painel-principal .bg-indigo-100,
[data-tema="escuro"] .painel-principal .bg-violet-100 { background-color: #221a3a !important; }
[data-tema="escuro"] .painel-principal .text-purple-600,
[data-tema="escuro"] .painel-principal .text-purple-700,
[data-tema="escuro"] .painel-principal .text-indigo-600,
[data-tema="escuro"] .painel-principal .text-indigo-700 { color: #b69bf5 !important; }

/* Estados de passagem do mouse */
[data-tema="escuro"] .painel-principal .hover\:bg-gray-50:hover,
[data-tema="escuro"] .painel-principal .hover\:bg-gray-100:hover { background-color: var(--superficie-hover) !important; }

/* Gradientes chapados ficam legíveis no escuro */
[data-tema="escuro"] .painel-principal [class*="from-"][class*="to-"] { filter: saturate(0.9) brightness(0.92); }

/* Janelas modais escritas com utilitários */
[data-tema="escuro"] .bg-black.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.72) !important; }

/* Ajustes finos no SweetAlert para o tema escuro */
[data-tema="escuro"] .swal2-popup {
    background: var(--superficie) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borda);
}
[data-tema="escuro"] .swal2-title,
[data-tema="escuro"] .swal2-html-container { color: var(--texto-forte) !important; }
[data-tema="escuro"] .swal2-input,
[data-tema="escuro"] .swal2-select,
[data-tema="escuro"] .swal2-textarea {
    background: var(--superficie-forte) !important;
    color: var(--texto-forte) !important;
    border-color: var(--borda-forte) !important;
}

/* Gráficos do Chart.js herdam a cor do texto do tema */
.painel-principal canvas { max-width: 100%; }


/* --------------------------------------------------------------------------
   20. Telas de acesso (entrar, recuperar e redefinir senha)
   -------------------------------------------------------------------------- */
.acesso {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Painel da marca */
.acesso__marca {
    display: none;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background:
        radial-gradient(1000px 520px at 12% -8%, rgba(239, 68, 68, 0.30), transparent 62%),
        radial-gradient(760px 440px at 92% 108%, rgba(220, 38, 38, 0.20), transparent 58%),
        #0b0d11;
    color: #fff;
    overflow: hidden;
}
.acesso__marca::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 30% 40%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 10%, transparent 72%);
    pointer-events: none;
}
.acesso__marca > * { position: relative; z-index: 1; }
.acesso__marca img { height: 30px; width: auto; }
.acesso__frase {
    max-width: 460px;
    font-size: 33px;
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.03em;
}
.acesso__frase span { color: #ff8f8f; }
.acesso__apoio {
    margin-top: 18px;
    max-width: 430px;
    color: #a7aeba;
    font-size: 15px;
    line-height: 1.65;
}
.acesso__itens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.acesso__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: #d3d8e0;
    font-size: 13px;
    font-weight: 500;
}
.acesso__item i { color: #ff8f8f; font-size: 12px; }
.acesso__rodape { color: #6e7784; font-size: 13px; }

/* Painel do formulário */
.acesso__area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--fundo);
}
.acesso__caixa { width: 100%; max-width: 400px; }

/* A logo é clara, então no celular ela vai sobre um bloco escuro */
.acesso__logo-movel { margin-bottom: 30px; text-align: center; }
.acesso__logo-movel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: var(--raio);
    background: var(--nav-fundo);
}
.acesso__logo-movel img { height: 26px; width: auto; display: block; }

.acesso__titulo { font-size: 26px; letter-spacing: -0.03em; }
.acesso__subtitulo { margin: 7px 0 26px; color: var(--texto-suave); font-size: 14.5px; }

.acesso__senha-alternar {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
}
.acesso__senha-alternar:hover { color: var(--texto-forte); background: var(--superficie-hover); }

.acesso__opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
    font-size: 13.5px;
}
.acesso__lembrar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--texto-suave); }
.acesso__lembrar input { width: 16px; height: 16px; accent-color: var(--marca-500); }
.acesso__elo { color: var(--marca-600); font-weight: 600; }
.acesso__elo:hover { text-decoration: underline; }

.acesso__divisor {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
    color: var(--texto-fraco);
    font-size: 12.5px;
}
.acesso__divisor::before,
.acesso__divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borda);
}

.acesso__voltar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 26px;
    color: var(--texto-suave);
    font-size: 13.5px;
}
.acesso__voltar:hover { color: var(--texto-forte); }

.acesso__tema {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 5;
}

@media (min-width: 1024px) {
    .acesso { grid-template-columns: 1.05fr 1fr; }
    .acesso__marca { display: flex; }
    .acesso__logo-movel { display: none; }
    .acesso__area { padding: 48px; }
    .acesso__caixa { max-width: 396px; }
}
@media (min-width: 1440px) {
    .acesso__frase { font-size: 38px; }
}