/* =============================================================================
   Buscador de XML SEFAZ-GO  -  style.css (familia --cor-primaria, tema ERP claro)
   Token de cor da marca: --cor-primaria = #FF7500 (unico lugar com o hex).
   PROIBIDO repetir o hex em template. Dark layer para o alternador no fim.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   FONTES self-hosted (declaradas em static/fonts/fonts.css, importado aqui)
   -------------------------------------------------------------------------- */
@import url("../fonts/fonts.css");

/* ---------------------------------------------------------------------------
   TOKENS (tema claro)
   -------------------------------------------------------------------------- */
:root {
    --cor-primaria:         #FF7500;
    --cor-primaria-suave:   #FFE8D4;
    --cor-primaria-escura:  #CC5E00;

    --bb-amarelo:           #A16207;   /* "Contabilidade": dourado BB legivel no claro (fundo branco); vira amarelo vivo no dark (ver camada dark) */

    --branco:               #FFFFFF;
    --fundo:                #F4F5F7;
    --superficie:           #FFFFFF;
    --borda:                #E3E6EA;
    --texto:                #1F2430;
    --texto-suave:          #6B7280;

    --sucesso:              #16A34A;
    --sucesso-suave:        #DCFCE7;
    --sucesso-escura:       #166534;
    --saida:                #9333EA;
    --saida-suave:          #F3E8FF;
    --erro:                 #DC2626;
    --aviso:                #D97706;

    --raio:                 10px;
    --raio-sm:              7px;
    --sombra:               0 1px 3px rgba(16, 24, 40, 0.08);
    --sombra-md:            0 6px 20px rgba(16, 24, 40, 0.12);

    --fonte-corpo:          "Inter", system-ui, sans-serif;
    --fonte-titulo:         "Sora", "Inter", system-ui, sans-serif;

    --sidebar-larg:         244px;
    --topbar-alt:           58px;
}

/* ---------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: 14px;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--texto);
    margin: 0 0 12px;
    line-height: 1.25;
}

a { color: var(--cor-primaria-escura); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   LAYOUT: sidebar + topbar + conteudo
   -------------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-larg);
    flex: 0 0 var(--sidebar-larg);
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Cabecalho da marca (moderno): fundo com degrade suave da cor da marca, logo em
   quadrado arredondado com degrade e sombra, texto a esquerda e o escritorio
   numa faixa propria embaixo, separada por linha tracejada. */
.sidebar .marca {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--borda);
    background: linear-gradient(180deg, var(--cor-primaria-suave) 0%, var(--superficie) 100%);
}
.sidebar .marca-topo { display: flex; align-items: center; gap: 11px; }
.sidebar .logo-quadro {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--cor-primaria) 38%, transparent);
    display: grid; place-items: center;
}
.sidebar .logo-quadro i { font-size: 23px; line-height: 1; }
.sidebar .marca-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sidebar .marca-nome {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
    line-height: 1.15;
}
/* Nome do escritorio sob a marca: "Fernando" acompanha o texto (preto no claro,
   claro no escuro); "Contabilidade" em amarelo Banco do Brasil (--bb-amarelo). */
.marca-escritorio {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.1;
    white-space: nowrap;
}
.sidebar .marca-escritorio { font-size: 11px; }
/* Linha sob o nome do sistema: tipos de documento capturados */
.sidebar .marca-subtitulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 11px;
    letter-spacing: .01em;
    line-height: 1.1;
    color: var(--cor-primaria);
    white-space: nowrap;
}
.sidebar .marca-nome { white-space: nowrap; font-size: 13.5px; font-weight: 800; letter-spacing: -.03em; }
.sidebar .marca-escritorio {
    font-weight: 800; text-align: center;
    padding-top: 10px; border-top: 1px dashed var(--borda);
}
.login-card .marca-escritorio { font-size: 13px; margin-top: 2px; }
.marca-escritorio .mf-nome { color: var(--texto); }
.marca-escritorio .mf-cont { color: var(--bb-amarelo); }

/* --- Menu em 2 niveis (Padrao_Menu_Sidebar): grupo sanfona > item ------------ */
.sidebar-nav { flex: 1; padding: 14px 12px 20px; }

.sidebar-nav .grupo { margin-bottom: 2px; }
.sidebar-nav .grupo-cab {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 4px;
    text-align: left;
    font: inherit;
    border-radius: var(--raio-sm);
    transition: background .15s;
}
.sidebar-nav .grupo-cab:hover { background: var(--fundo); }
.sidebar-nav .grupo-cab:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.sidebar-nav .grupo-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-suave);
    flex: 1;
}
.sidebar-nav .grupo-chevron {
    color: var(--texto-suave);
    font-size: 12px;
    opacity: .7;
    flex-shrink: 0;
    transition: transform .22s ease;
}
.sidebar-nav .grupo.aberto .grupo-chevron { transform: rotate(90deg); }

/* abre/fecha animando a altura via grid-template-rows */
.sidebar-nav .grupo-corpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.sidebar-nav .grupo.aberto .grupo-corpo { grid-template-rows: 1fr; }
.sidebar-nav .grupo-corpo > .corpo-interno { overflow: hidden; min-height: 0; padding-top: 2px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    margin-bottom: 2px;
    border-radius: var(--raio-sm);
    color: var(--texto-suave);
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.nav-item i { font-size: 16px; opacity: .85; flex-shrink: 0; }
.nav-item:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
/* Passar o mouse = mesmo verde do item ativo */
.nav-item:not(.esmaecido):hover { background: var(--sucesso-suave); color: var(--sucesso-escura); }
.nav-item:not(.esmaecido):hover i { opacity: 1; color: var(--sucesso); }
.nav-item .nav-externo { margin-left: auto; font-size: 13px; opacity: .6; }
.nav-item:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.nav-item.ativo {
    background: var(--sucesso-suave);
    color: var(--sucesso-escura);
    font-weight: 600;
}
.nav-item.ativo i { opacity: 1; color: var(--sucesso); }
.nav-item.esmaecido { color: var(--texto-suave); cursor: not-allowed; opacity: .65; }
.nav-item.esmaecido:hover { background: transparent; color: var(--texto-suave); }
.tag-em-breve {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--fundo);
    color: var(--texto-suave);
    padding: 2px 7px;
    border-radius: 999px;
}
/* itens dentro de um grupo recuam um pouco, como no padrao */
.sidebar-nav .grupo-corpo .nav-item { margin-left: 4px; }

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

.topbar {
    height: var(--topbar-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar .titulo-pagina {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 16px;
}
.topbar .acoes-topo { display: flex; align-items: center; gap: 12px; }
.topbar .usuario-chip {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--branco);
    background: var(--cor-primaria);
    padding: 5px 12px; border-radius: 999px;
}

.pagina { padding: 22px; max-width: 1180px; width: 100%; }

.aviso-impersonacao {
    background: var(--aviso);
    color: var(--branco);
    padding: 8px 22px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---------------------------------------------------------------------------
   CARTOES
   -------------------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 18px;
}
.cartao-titulo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   BOTOES
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    font-family: var(--fonte-corpo);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--fundo);
    color: var(--texto);
    line-height: 1;
}
.btn:hover { filter: brightness(0.98); text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--cor-primaria); color: var(--branco); }
.btn-primario:hover { background: var(--cor-primaria-escura); }
.btn-neutro { background: var(--superficie); border-color: var(--borda); }
.btn-sair { background: var(--cor-primaria); color: var(--branco); border-color: var(--cor-primaria); }
.btn-sair:hover { background: var(--cor-primaria-escura); color: var(--branco); }
.btn-perigo { background: var(--superficie); border-color: var(--borda); color: var(--erro); }
.btn-perigo:hover { background: var(--erro); color: var(--branco); }
.btn i { font-size: 18px; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }

/* ---------------------------------------------------------------------------
   FORMULARIO (ra-bar, controles 40px, label 13px/600 sem uppercase)
   -------------------------------------------------------------------------- */
.ra-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}
.campo .input,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    font-family: var(--fonte-corpo);
    font-size: 14px;
    color: var(--texto);
    width: 100%;
}
.campo .input:focus,
.campo input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}
.campo-acao { display: flex; align-items: flex-end; }

/* ---------------------------------------------------------------------------
   TABELAS (listagens, sem KPI)
   -------------------------------------------------------------------------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
}
.tabela th {
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-suave);
    letter-spacing: 0.02em;
}
.tabela tbody tr:hover { background: var(--fundo); }
.tabela .acoes-linha { display: flex; gap: 8px; }

.selo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.selo-ok { background: #E7F6EC; color: var(--sucesso); }
.selo-off { background: #FBE9E9; color: var(--erro); }

/* ---------------------------------------------------------------------------
   TOGGLE ON/OFF (cv-sw, 42x24, verde quando ligado). Input nativo escondido.
   -------------------------------------------------------------------------- */
.cv-sw { position: relative; display: inline-block; width: 42px; height: 24px; }
.cv-sw input { display: none; }
.cv-sw .cv-sw-trilho {
    position: absolute; inset: 0;
    background: #CBD2DA; border-radius: 999px;
    transition: background 0.18s ease;
    cursor: pointer;
}
.cv-sw .cv-sw-bolinha {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: var(--branco); border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.18s ease;
}
.cv-sw input:checked + .cv-sw-trilho { background: var(--sucesso); }
.cv-sw input:checked + .cv-sw-trilho .cv-sw-bolinha { transform: translateX(18px); }

/* ---------------------------------------------------------------------------
   MATRIZ DE PERMISSOES
   -------------------------------------------------------------------------- */
.matriz th.col-check, .matriz td.col-check { text-align: center; width: 90px; }
.matriz .grupo-row td {
    background: var(--fundo);
    font-weight: 600;
    font-size: 12px;
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------------
   FLASH / MENSAGENS
   -------------------------------------------------------------------------- */
.flash-area { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.flash {
    padding: 11px 14px; border-radius: var(--raio-sm);
    font-size: 14px; border: 1px solid transparent;
}
.flash-ok  { background: #E7F6EC; color: var(--sucesso); border-color: #BBE6C9; }
.flash-erro{ background: #FBE9E9; color: var(--erro);    border-color: #F3C2C2; }

/* ---------------------------------------------------------------------------
   LOGIN
   -------------------------------------------------------------------------- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--fundo); padding: 16px;
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra-md); padding: 30px 28px;
}
.login-card .marca {
    display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px;
}
.login-card .marca i { font-size: 38px; color: var(--cor-primaria); }
.login-card .marca span {
    font-family: var(--fonte-titulo); font-weight: 600; font-size: 18px;
}
.login-card .campo { min-width: 0; margin-bottom: 14px; }
.login-card .btn { width: 100%; }

/* Campo de senha com botao mostrar/ocultar (olho) */
.campo-senha { position: relative; }
.campo-senha input.input { padding-right: 42px; }
.campo-senha .olho-senha {
    position: absolute; top: 0; right: 0;
    height: 40px; width: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: var(--texto-suave); font-size: 18px; line-height: 1;
    border-radius: var(--raio-sm);
}
.campo-senha .olho-senha:hover { color: var(--cor-primaria); }
.campo-senha .olho-senha:focus-visible {
    outline: none; color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

/* ---------------------------------------------------------------------------
   LOADING (sempre mostrar). Inline + overlay. Spinner 44px.
   -------------------------------------------------------------------------- */
.loading-inline {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--texto-suave); font-size: 14px;
}
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.72);
    display: none; align-items: center; justify-content: center;
    z-index: 1000;
}
.loading-overlay.ativo { display: flex; flex-direction: column; gap: 14px; }
.loading-texto {
    font-size: 14px; font-weight: 600; color: var(--texto);
    max-width: 80vw; text-align: center;
}
.loading-texto:empty { display: none; }
.spinner-circle {
    width: 44px; height: 44px;
    border: 4px solid var(--cor-primaria-suave);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
.spinner-sm {
    width: 18px; height: 18px; border-width: 3px;
    border: 3px solid var(--cor-primaria-suave);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   SELECTBUSCA (sem <select> nativo)
   -------------------------------------------------------------------------- */
.sb { position: relative; }
.sb-controle {
    height: 40px; padding: 0 12px;
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--superficie); display: flex; align-items: center;
    justify-content: space-between; cursor: pointer; gap: 8px;
}
.sb-controle:focus-within { border-color: var(--cor-primaria); }
.sb-lista {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-sm); box-shadow: var(--sombra-md);
    max-height: 240px; overflow-y: auto; z-index: 50; display: none;
}
.sb-lista.aberta { display: block; }
.sb-busca { width: 100%; height: 38px; border: none; border-bottom: 1px solid var(--borda); padding: 0 12px; font-size: 14px; }
.sb-busca:focus { outline: none; }
.sb-opcao { padding: 9px 12px; font-size: 14px; cursor: pointer; }
.sb-opcao:hover, .sb-opcao.marcada { background: var(--cor-primaria-suave); }

/* ---------------------------------------------------------------------------
   ERRO (403/404)
   -------------------------------------------------------------------------- */
.pagina-erro {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px;
}
.pagina-erro .codigo { font-family: var(--fonte-titulo); font-size: 56px; color: var(--cor-primaria); }

/* ===========================================================================
   FASE 4: upload (im-), tabela te-tab, coluna de acoes, menu da tabela
   ========================================================================== */

/* -- Upload drag-and-drop (Padrao_Upload_Arquivo) ------------------------- */
.im-card {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 20px; margin-bottom: 18px;
}
.im-card h3 {
    margin: 0 0 14px; font-size: 15px; font-weight: 600;
    font-family: var(--fonte-titulo);
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.im-lbl {
    font-size: 13px; font-weight: 600; color: var(--texto);
    display: block; margin-bottom: 8px;
}
.im-drop {
    display: block; border: 2px dashed var(--borda); border-radius: var(--raio);
    padding: 32px; text-align: center; color: var(--texto-suave);
    cursor: pointer; transition: .15s; user-select: none; margin-top: 8px; max-width: 420px;
}
.im-drop:hover, .im-drop.over {
    border-color: var(--cor-primaria); background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura); border-style: solid;
}
.im-drop.loaded {
    border-style: solid; border-color: var(--sucesso);
    background: #F0FDF4; color: #15803D;
}
.im-drop i { font-size: 36px; display: block; margin-bottom: 6px; }
.im-drop small { color: var(--sucesso); font-weight: 600; margin-top: 6px; display: block; }
.im-inp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.im-acao { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
#cofre-btn:disabled { opacity: .45; cursor: not-allowed; }

/* -- Tabela te-tab (mesma aparencia da .tabela) --------------------------- */
.te-tab { width: 100%; border-collapse: collapse; }
.te-tab th, .te-tab td {
    text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borda); font-size: 14px;
    vertical-align: middle;
}
.te-tab th {
    font-size: 12px; font-weight: 700; color: var(--texto);
    letter-spacing: .02em; position: relative; white-space: nowrap;
}
.te-tab thead th {
    background: var(--fundo);
    border-bottom: 2px solid var(--borda);
}
.te-tab thead th:first-child { border-top-left-radius: var(--raio-sm); }
.te-tab thead th:last-child  { border-top-right-radius: var(--raio-sm); }
.te-tab th span { user-select: none; }
/* icone decorativo no titulo da coluna (estilo do menu: Phosphor, esmaecido) */
.te-tab thead th i { font-size: 15px; color: var(--cor-primaria); opacity: .75; vertical-align: -2px; margin-right: 2px; }
.te-tab th.sort-asc span::after  { content: " \25B2"; font-size: 10px; color: var(--cor-primaria); }
.te-tab th.sort-desc span::after { content: " \25BC"; font-size: 10px; color: var(--cor-primaria); }
.te-tab tbody tr:hover { background: var(--fundo); }
.th-funil {
    margin-left: 6px; font-size: 13px; color: var(--texto-suave);
    cursor: pointer; opacity: 0; transition: opacity .15s;
}
.te-tab th:hover .th-funil { opacity: 1; }
.th-funil.ativo { opacity: 1; color: var(--cor-primaria); }
.th-filtro {
    display: block; margin-top: 6px; width: 100%; min-width: 120px;
    height: 30px; padding: 0 8px; font-size: 13px;
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--superficie); color: var(--texto); font-family: var(--fonte-corpo);
}
.th-filtro:focus { outline: none; border-color: var(--cor-primaria); }

/* -- Coluna de acoes: slots fixos com esmaecimento ------------------------ */
.celula-acoes { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.celula-acoes form { display: inline; margin: 0; }
.btn-icone {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--raio-sm); background: transparent; border: none; cursor: pointer;
    color: var(--texto-suave); transition: background .15s, color .15s;
}
.btn-icone:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
.btn-icone.perigo:hover { color: var(--erro); }
.btn-icone i { font-size: 18px; }
.btn-icone.desabilitado { opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--texto-suave); }

/* -- Menu de 3 pontos da tabela ------------------------------------------- */
.ta-menu-wrapper { position: relative; }
.ta-menu-btn {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--superficie); cursor: pointer; color: var(--texto-suave);
}
.ta-menu-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ta-menu-btn i { font-size: 18px; }
.ta-menu {
    position: absolute; top: 100%; right: 0; margin-top: 6px; min-width: 200px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra-md); display: none; z-index: 50;
}
.ta-menu.aberto { display: block; }
.ta-menu-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    font-size: 13px; cursor: pointer; color: var(--texto);
}
.ta-menu-item:hover { background: var(--fundo); color: var(--cor-primaria); }
.ta-menu-item i { font-size: 16px; color: var(--texto-suave); }
.ta-menu-item:hover i { color: var(--cor-primaria); }

/* -- Selo de aviso (vencimento proximo) ----------------------------------- */
.selo-aviso { background: #FEF3E2; color: var(--aviso); }

/* -- Selecao de empresas da captura (lista com rolagem, sem select nativo) - */
.sel-emp {
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    max-height: 320px; overflow-y: auto; margin: 4px 0 14px;
    background: var(--superficie);
}
.sel-emp-linha {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 14px; border-bottom: 1px solid var(--borda);
    cursor: pointer; font-size: 13px; color: var(--texto);
}
.sel-emp-linha:last-child { border-bottom: none; }
.sel-emp-linha:hover { background: var(--fundo); }
.sel-emp-todas { background: var(--fundo); position: sticky; top: 0; z-index: 1; }
.sel-emp-nome { font-weight: 600; }
.sel-emp-meta { color: var(--texto-suave); font-size: 12px; }
.sel-emp-ops { display: inline-flex; gap: 4px; margin-left: auto; }
.sel-emp-ops .selo { background: var(--fundo); color: var(--texto-suave); padding: 2px 8px; }
/* E = entrada (verde), S = saida (lilas); classes proprias pra nao afetar os outros selos */
.sel-emp-ops .selo-entrada { background: #E7F6EC; color: #16a34a; }
.sel-emp-ops .selo-saida   { background: #F3E8FF; color: #9333EA; }

/* -- Seletor de operacao da captura (toggle tipo 1: multi opcoes) ---------- */
.cap-presets {
    display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap;
    height: 40px; padding: 3px; border: 1px solid var(--borda);
    border-radius: var(--raio-sm); background: var(--superficie); box-sizing: border-box;
}
.cap-presets button {
    height: 32px; border: 1px solid transparent; background: transparent;
    border-radius: 5px; padding: 0 12px; font-size: 12px; font-weight: 700;
    color: var(--texto-suave); cursor: pointer; white-space: nowrap;
}
/* Cada operacao tem a sua cor: Entradas verde, Saidas lilas (mesmo lilas do selo
   "S" das empresas), Ambas laranja da marca. */
.cap-presets button[data-op="entrada"]:hover { color: var(--sucesso); }
.cap-presets button[data-op="saida"]:hover   { color: var(--saida); }
.cap-presets button[data-op="ambas"]:hover   { color: var(--cor-primaria); }
.cap-presets button[data-op="entrada"].on {
    border-color: var(--sucesso); background: var(--sucesso-suave); color: var(--sucesso-escura);
}
.cap-presets button[data-op="saida"].on {
    border-color: var(--saida); background: var(--saida-suave); color: var(--saida);
}
.cap-presets button[data-op="ambas"].on {
    border-color: var(--cor-primaria); background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
}
/* Filtros da Conferencia: rotulo e valor escolhido em negrito */
.ra-bar .campo label { font-weight: 700; }
.sb-negrito .sb-rotulo { font-weight: 700; }

/* -- Tela Capturar: pedido em duas partes (Padrao_Tabs, sublinhado) ------- */
.cap-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--borda); margin-bottom: 18px;
}
.cap-tab {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 16px; margin-bottom: -1px;
    background: transparent; border: none; border-bottom: 2px solid transparent;
    font-family: var(--fonte-corpo); font-size: 14px; font-weight: 600;
    color: var(--texto-suave); cursor: pointer;
}
.cap-tab:hover { color: var(--cor-primaria); }
.cap-tab.ativo { color: var(--cor-primaria-escura); border-bottom-color: var(--cor-primaria); }
.cap-tab i { font-size: 18px; }
.cap-tab { font-weight: 700; }
/* Simbolo da operacao: circulo com borda. Entradas verde, Saidas lilas. */
.op-chip {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid;
    vertical-align: middle;
}
/* so a fonte "regular" do Phosphor esta no projeto: o traco extra imita o peso bold */
.op-chip i, .cap-tab .op-chip i { font-size: 15px; line-height: 1; -webkit-text-stroke: 1px currentColor; }
.op-chip.entradas { color: var(--sucesso); background: var(--sucesso-suave); border-color: var(--sucesso); }
.op-chip.saidas   { color: var(--saida);   background: var(--saida-suave);   border-color: var(--saida); }
/* Selo da operacao na tabela de capturas */
.op-selo {
    display: inline-block; padding: 2px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700; border: 1px solid;
}
.op-selo.entrada { color: var(--sucesso-escura); background: var(--sucesso-suave); border-color: var(--sucesso); }
.op-selo.saida   { color: var(--saida);          background: var(--saida-suave);   border-color: var(--saida); }
.td-forte { font-weight: 700; }
.cap-pane { display: none; }
.cap-pane.ativo { display: block; }
.cap-descricao { margin: -6px 0 14px; color: var(--texto-suave); font-size: 13px; font-weight: 700; }
.campo-ano { max-width: 140px; min-width: 110px; }
.campo-mes { max-width: 180px; min-width: 150px; }
.campo-principal { flex: 1; min-width: 240px; }
/* Ano e mes: valor centralizado e em negrito (caret fixo na direita, nao desloca o centro) */
.sb-valor .sb-controle { position: relative; justify-content: center; }
.sb-valor .sb-rotulo { text-align: center; font-weight: 700; }
.sb-valor .sb-controle i { position: absolute; right: 12px; }
.sb-valor .sb-lista { max-height: 380px; }   /* os 12 meses cabem sem rolagem */
.sb-valor .sb-opcao { text-align: center; }
.sb-valor .sb-opcao.marcada { font-weight: 700; }
/* Filtro de empresas: o que a pessoa digita em negrito, o placeholder continua normal */
.campo-principal .input { font-weight: 700; }
.campo-principal .input::placeholder { font-weight: 400; }
.cap-rodape {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.texto-suave { color: var(--texto-suave); }
.sel-emp-aviso { color: var(--aviso); font-size: 12px; }
.sel-emp-linha.indisponivel { cursor: not-allowed; opacity: .55; }
.sel-emp-linha.indisponivel:hover { background: transparent; }
.fila-cabec {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.fila-cabec .cartao-titulo { margin: 0; }
.fila-ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila-ferramentas .campo { min-width: 220px; }
.te-tab td.vazio { color: var(--texto-suave); }

/* -- KPIs do relatorio de conferencia (Fase 7; so em tela de relatorio) ----- */
.rel-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
}
@media (max-width: 1100px) { .rel-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .rel-kpis { grid-template-columns: 1fr; } }
.rel-kpi {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 14px; display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden; box-shadow: var(--sombra);
}
.rel-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--cor-primaria);
}
.rel-kpi.ok::before    { background: var(--sucesso); }
.rel-kpi.alerta::before{ background: var(--aviso); }
.rel-kpi.ruim::before  { background: var(--erro); }
.rel-kpi .ico {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    font-size: 21px; flex-shrink: 0;
    background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
}
.rel-kpi.ok .ico     { background: #DCFCE7; color: var(--sucesso); }
.rel-kpi.alerta .ico { background: #FEF3C7; color: var(--aviso); }
.rel-kpi.ruim .ico   { background: #FBE9E9; color: var(--erro); }
.rel-kpi .corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rel-kpi .lbl {
    font-size: 10.5px; color: var(--texto-suave); text-transform: uppercase;
    letter-spacing: .03em; font-weight: 700; line-height: 1.2;
}
.rel-kpi .val {
    font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1;
    font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--texto);
}
.rel-kpi .val-sm { font-size: 17px; }
.rel-kpi .disc { font-size: 10.5px; color: var(--texto-suave); margin-top: 3px; font-style: italic; }

/* ---------------------------------------------------------------------------
   DARK LAYER (alternador de tema). Ativado por [data-tema="dark"] no <html>.
   -------------------------------------------------------------------------- */
:root[data-tema="dark"] {
    --fundo:        #14181F;
    --superficie:   #1C222B;
    --borda:        #2A3340;
    --texto:        #E6E9EE;
    --texto-suave:  #9AA3AF;
    --branco:       #FFFFFF;
    --cor-primaria-suave: #3A2410;
    --bb-amarelo: #FAE500;   /* no escuro o amarelo BB vivo tem contraste de sobra */
    --sombra:    0 1px 3px rgba(0,0,0,0.4);
    --sombra-md: 0 6px 20px rgba(0,0,0,0.5);
}
:root[data-tema="dark"] { --sucesso-suave: #16351F; --sucesso-escura: #86EFAC; --saida: #C98BFF; --saida-suave: #2A1A3A; }
:root[data-tema="dark"] .nav-item.ativo { color: var(--sucesso-escura); }
:root[data-tema="dark"] .selo-ok  { background: #16351F; }
:root[data-tema="dark"] .selo-off { background: #3A1C1C; }
:root[data-tema="dark"] .selo-aviso { background: #3A2E12; }
:root[data-tema="dark"] .sel-emp-ops .selo-entrada { background: #13331C; color: #4ADE80; }
:root[data-tema="dark"] .sel-emp-ops .selo-saida   { background: #2A1A3A; color: #C98BFF; }
:root[data-tema="dark"] .im-drop.loaded { background: #16351F; color: #86EFAC; }
:root[data-tema="dark"] .flash-ok { background: #16351F; border-color: #1F5130; }
:root[data-tema="dark"] .flash-erro { background: #3A1C1C; border-color: #5A2525; }
:root[data-tema="dark"] .loading-overlay { background: rgba(10,12,16,0.72); }

/* ---------------------------------------------------------------------------
   RESPONSIVO (telefone): sidebar vira topo rolavel, gutter 16px
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        width: 100%; flex-basis: auto; height: auto; position: static;
        border-right: none; border-bottom: 1px solid var(--borda);
    }
    /* no telefone o menu vira faixa no topo: grupos sempre abertos, itens em linha */
    .sidebar-nav { padding: 8px 12px 12px; }
    .sidebar-nav .grupo-cab { cursor: default; padding-top: 8px; }
    .sidebar-nav .grupo-chevron { display: none; }
    .sidebar-nav .grupo-corpo,
    .sidebar-nav .grupo.aberto .grupo-corpo { grid-template-rows: 1fr; }
    .sidebar-nav .grupo-corpo > .corpo-interno { display: flex; flex-wrap: wrap; gap: 4px; }
    .sidebar-nav .grupo-corpo .nav-item,
    .sidebar-nav > .nav-item { margin: 0; min-height: 44px; }
    .pagina { padding: 16px; }
    .topbar { padding: 0 16px; }
    .ra-bar { flex-direction: column; align-items: stretch; }
    .campo { min-width: 0; }
}

/* Telefone (Responsividade_Sempre): input a 16px (iOS nao da zoom) e alvos de toque de 44px. */
@media (max-width: 720px) {
    .campo .input,
    .campo input[type="text"],
    .campo input[type="number"],
    .th-filtro { font-size: 16px; }
    .btn, .ta-menu-btn { min-height: 44px; }
    .btn-icone { width: 44px; height: 44px; }
    .sel-emp-linha { min-height: 44px; }
    .campo-ano, .campo-mes { max-width: none; }
    .fila-ferramentas, .fila-ferramentas .campo { width: 100%; }
}

/* Tabela larga em tela estreita: rola na horizontal dentro do cartao, sem
   estourar o layout (Responsividade_Sempre). */
.tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }