/*
 * Camada visual do EficazWeb sobre o CSS do Filament, com a identidade do Gerenciador Eficaz (a mesma do
 * AgenteEficaz): petróleo #0A3246 na estrutura e nos títulos, turquesa #006F78 nas ações e na seleção,
 * laranja só na ação principal da tela.
 *
 * Regras da casa (ver AGENTS.md):
 * - Este é o ÚNICO arquivo de CSS próprio do painel. Nada de CSS por tela nem de atributo style.
 * - Telas usam os componentes do Filament; o que faltar vira componente reutilizável "ef-*" aqui.
 * - Cores vêm das paletas do painel (PainelProvider: --primary-*, --gray-*, --destaque-*) e raios das
 *   variáveis do Filament (--radius-lg...), então o tema vale para tudo sem regra duplicada.
 * - Modo escuro: light-dark(cor do claro, cor do escuro) na própria regra, sem regra .dark à parte. A
 *   barra superior em petróleo usa as cores do escuro (color-scheme: dark nos campos dela).
 * - O Filament declara as regras dele em @layer; as daqui ficam fora de camada e prevalecem sem
 *   precisar de seletores mais fortes nem de !important. Por isso, quem muda a base de um componente
 *   (ex.: a borda do campo) repete aqui os estados dele (inválido, desabilitado).
 * - Orçamento: 40 KB sem compressão (tests/Unit/OrcamentoDosArquivosDoPainelTest.php).
 */

/* ==========================================================================
   1. Densidade compacta
   Pensada para notebook de 1366×768: o padrão do Filament é confortável demais para telas com
   muitos campos (venda, NF-e). Altera só espaçamentos; cores e acabamento ficam na seção 9.
   ========================================================================== */

/* --topbar-height acompanha a altura real da barra (layout.js); a altura mínima da barra é fixa. */
.fi-body {
    --topbar-height: 3.25rem;
}

.fi-topbar {
    min-height: 3.25rem;
}

.fi-main {
    padding-inline: 0.75rem;
}

/* O menu lateral tem seção própria (7). */

/* Barra superior: a busca geral e o seletor de filial encolhem; o rótulo "Filial" só aparece em
   telas largas. */
.fi-topbar-end {
    column-gap: 0.625rem;
}

.fi-topbar .fi-global-search-ctn {
    width: 11rem;
}

@media (min-width: 96rem) {
    .fi-topbar .fi-global-search-ctn {
        width: 16rem;
    }
}

/* Tecla de atalho nos botões ("Gravar F6"). Some no celular, que não tem teclas de função. */
.ef-atalho {
    margin-inline-start: 0.125rem;
    padding: 0 0.3125rem;
    border-radius: 0.25rem;
    background: color-mix(in oklab, currentColor 12%, transparent);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.125rem;
}

@media (max-width: 39.99rem) {
    .ef-atalho {
        display: none;
    }
}

/* Cabeçalho da página: sem o respiro de 32px acima e abaixo (a faixa do título está na seção 9). */
.fi-page-header-main-ctn {
    row-gap: 0.625rem;
    padding-block: 0 1rem;
}

.fi-page-content {
    row-gap: 0.75rem;
}

.fi-header {
    gap: 0.5rem;
}

/* Formulários: distância entre campos e entre rótulo e campo. */
.fi-sc.fi-sc-has-gap {
    gap: 0.625rem 0.875rem;
}

.fi-sc-form,
.fi-sc-flex {
    gap: 0.75rem;
}

.fi-fo-field,
.fi-fo-field .fi-fo-field-label-col,
.fi-fo-field .fi-fo-field-content-col {
    row-gap: 0.25rem;
}

/* Campos com 30px de altura (o padrão é 36px). A fonte fica como está: no celular o Filament
   usa 16px para o iPhone não ampliar a tela ao focar o campo. */
input.fi-input,
select.fi-select-input,
.fi-select-input .fi-select-input-btn,
.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input {
    padding-block: 0.3125rem;
    line-height: 1.25rem;
}

.fi-fo-textarea textarea {
    padding-block: 0.3125rem;
}

/* Seções e abas. */
.fi-section-header {
    padding: 0.5rem 0.75rem;
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-section:not(.fi-section-not-contained).fi-divided > .fi-section-content-ctn > .fi-section-content > * {
    padding: 0.75rem;
}

.fi-sc-tabs.fi-contained .fi-sc-tabs-tab.fi-active {
    padding: 0.75rem;
}

.fi-tabs.fi-contained {
    padding: 0.375rem 0.5rem;
}

.fi-tabs-item {
    padding: 0.3125rem 0.75rem;
}

/* Botões (tamanho padrão) e itens do menu superior. */
.fi-btn:not(.fi-size-xs):not(.fi-size-sm):not(.fi-size-lg):not(.fi-size-xl) {
    padding-block: 0.375rem;
}

.fi-topbar-item-btn {
    padding-block: 0.375rem;
}

/* Tabelas: linha de ~33px no lugar de ~53px. A rolagem horizontal continua em telas estreitas. */
.fi-ta-header-cell {
    padding-block: 0.5rem;
}

.fi-ta-text:not(.fi-inline),
.fi-ta-icon:not(.fi-inline),
.fi-ta-color:not(.fi-inline),
.fi-ta-image:not(.fi-inline),
.fi-ta-select:not(.fi-inline),
.fi-ta-checkbox:not(.fi-inline),
.fi-ta-toggle:not(.fi-inline),
.fi-ta-text-input:not(.fi-inline),
.fi-ta-cell:has(.fi-ta-actions),
.fi-ta-cell:has(.fi-ta-record-checkbox),
.fi-ta-cell.fi-ta-selection-cell {
    padding-block: 0.375rem;
}

.fi-ta-text-item.fi-size-sm {
    line-height: 1.25rem;
}

.fi-ta-ctn .fi-ta-header-toolbar {
    padding-block: 0.375rem;
}

.fi-ta-ctn .fi-ta-header-toolbar > * {
    min-height: 2rem;
}

/* ==========================================================================
   2. Peças básicas
   ========================================================================== */

.ef-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ef-icone {
    width: 1rem;
    height: 1rem;
}

.ef-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Siglas e códigos (unidade, fator, tamanho): aparecem em maiúsculas enquanto se digita. */
.ef-maiusculas {
    text-transform: uppercase;
}

.ef-texto-alerta {
    color: var(--danger-600);
    font-weight: 600;
}

/* Tecla de atalho: [F2], [Enter]... */
.ef-campo__rotulo kbd,
.ef-teclas kbd {
    padding: 0.0625rem 0.3125rem;
    border: 1px solid light-dark(var(--gray-300), var(--gray-600));
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background: light-dark(var(--gray-50), var(--gray-800));
    color: light-dark(var(--gray-700), var(--gray-200));
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
}

/* Selo ao lado do título da página (ex.: "protótipo"). */
.ef-selo {
    display: inline-block;
    margin-inline-start: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--warning-100);
    color: var(--warning-800);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Bloco com fundo e borda, igual às seções do Filament (seção 9). */
.ef-painel {
    border-radius: var(--radius-xl);
    background: light-dark(var(--color-white), var(--gray-900));
    box-shadow: 0 0 0 1px light-dark(var(--gray-200), rgb(255 255 255 / 0.1)), var(--ef-sombra);
}

/* Campo solto em tela própria: rótulo em cima, como nos formulários do Filament. */
.ef-campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ef-campo__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.25rem;
}

.ef-campo__saida {
    display: block;
    min-height: 2rem;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-lg);
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    box-shadow: inset 0 0 0 1px light-dark(var(--gray-200), rgb(255 255 255 / 0.1));
    color: light-dark(var(--gray-950), var(--gray-100));
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.375rem;
}

/* ==========================================================================
   3. Grade densa (itens da venda, janela de pesquisa)
   O cabeçalho fica parado ao rolar e tem o desenho do das tabelas (seção 9). A linha atual tem
   fundo e filete na cor primária.
   ========================================================================== */

.ef-grade {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.ef-grade th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.4375rem 0.625rem;
    background: light-dark(var(--color-white), var(--gray-900));
    text-align: left;
    white-space: nowrap;
}

.ef-grade td {
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid light-dark(var(--gray-100), rgb(255 255 255 / 0.08));
    color: light-dark(var(--gray-950), var(--gray-100));
    white-space: nowrap;
}

.ef-grade .ef-grade__principal {
    width: 100%;
    min-width: 14rem;
    white-space: normal;
}

.ef-grade .ef-grade__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ef-grade .ef-grade__acoes {
    width: 1%;
    padding-block: 0;
    text-align: right;
}

.ef-grade td.ef-grade__vazio {
    padding: 2rem 0.75rem;
    color: var(--gray-500);
    text-align: center;
    white-space: normal;
}

.ef-grade tbody tr:hover td {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.04));
}

.ef-grade tbody tr:focus {
    outline: none;
}

.ef-grade tbody tr:focus td,
.ef-grade tbody tr.ef-grade__linha--atual td {
    background: light-dark(var(--primary-50), color-mix(in oklab, var(--primary-500) 22%, transparent));
}

.ef-grade tbody tr:focus td:first-child,
.ef-grade tbody tr.ef-grade__linha--atual td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-600);
}

.ef-grade tbody tr.ef-grade__linha--nova td {
    animation: ef-destacar 1.2s ease-out;
}

@keyframes ef-destacar {
    from {
        background: var(--success-100);
    }
}

/* Histórico do registro (botão "Histórico" da tela base) */
.ef-historico td {
    vertical-align: top;
}

.ef-historico__vazio {
    padding: 1.5rem 0;
    color: var(--gray-500);
    text-align: center;
}

/* ==========================================================================
   4. Campo de pesquisa (código + descrição + lupa), janela de pesquisa e combo com texto livre
   ========================================================================== */

.ef-pesquisa__linha {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.ef-pesquisa__linha > .fi-input-wrp {
    flex: 0 0 8.5rem;
}

.ef-pesquisa__descricao {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding-inline: 0.75rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    box-shadow: inset 0 0 0 1px light-dark(var(--gray-200), rgb(255 255 255 / 0.1));
    color: light-dark(var(--gray-950), var(--gray-100));
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ef-pesquisa__descricao--pendente {
    color: var(--gray-400);
}

.ef-pesquisa__lupa {
    display: inline-flex;
    align-items: center;
    color: var(--gray-500);
    cursor: pointer;
}

.ef-pesquisa__lupa:hover {
    color: var(--primary-600);
}

.ef-pesquisa__erro {
    margin-top: 0.25rem;
    color: var(--danger-600);
    font-size: var(--text-sm);
}

/* Combo com texto livre (ComboLivre): a lista abre embaixo do campo e pode ser mais larga que ele. */
.ef-combo {
    position: relative;
}

.ef-combo__lista {
    position: absolute;
    top: calc(100% + 0.25rem);
    inset-inline-start: 0;
    z-index: 30;
    width: max-content;
    min-width: 100%;
    max-width: min(40rem, calc(100vw - 2rem));
    max-height: 15rem;
    margin: 0;
    padding: 0.25rem;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background: light-dark(var(--color-white), var(--gray-900));
    box-shadow: 0 0 0 1px var(--ef-linha), 0 10px 24px rgb(10 50 70 / 0.14);
    list-style: none;
}

.ef-combo__opcao {
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-md);
    color: light-dark(var(--gray-950), var(--gray-100));
    font-size: var(--text-sm);
    cursor: pointer;
}

.ef-combo__opcao[aria-selected='true'] {
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.08));
    color: light-dark(var(--primary-700), var(--color-white));
}

.ef-janela {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 1rem;
}

.ef-janela__fundo {
    position: absolute;
    inset: 0;
    background: rgb(9 33 47 / 0.5);
}

.ef-janela__caixa {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(64rem, 100%);
    max-height: 84vh;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: light-dark(var(--color-white), var(--gray-900));
    box-shadow: 0 16px 40px rgb(10 50 70 / 0.18), 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 0.1));
}

.ef-janela__cabecalho,
.ef-janela__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.875rem;
}

.ef-janela__cabecalho {
    justify-content: space-between;
    border-bottom: 1px solid var(--ef-linha);
}

.ef-janela__titulo {
    font-size: var(--text-base);
}

.ef-janela__fechar {
    color: var(--gray-400);
}

.ef-janela__fechar:hover {
    color: light-dark(var(--gray-700), var(--gray-200));
}

.ef-janela__busca {
    padding: 0.625rem 0.875rem;
}

.ef-janela__grade {
    flex: 1 1 auto;
    min-height: 10rem;
    overflow: auto;
    border-top: 1px solid var(--ef-linha);
}

.ef-janela__grade tbody tr {
    cursor: pointer;
}

.ef-janela__rodape {
    border-top: 1px solid var(--ef-linha);
    color: var(--gray-500);
    font-size: var(--text-sm);
}

.ef-janela__rodape > :last-child {
    margin-inline-start: auto;
}

.ef-teclas {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--gray-500);
    font-size: var(--text-xs);
}

@media (max-width: 40rem) {
    .ef-janela {
        padding: 0;
    }

    .ef-janela__caixa {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .ef-teclas {
        display: none;
    }
}

/* ==========================================================================
   5. Molde de documento (nota, venda e as próximas telas de documento, docs/08 §9)
   A grade de itens ocupa a altura que sobra e o rodapé com os totais fica sempre visível.
   ========================================================================== */

.ef-documento {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ef-documento__capa,
.ef-documento__entrada {
    padding: 0.625rem 0.75rem;
}

.ef-documento__entrada-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}

.ef-campo--referencia {
    flex: 1 1 15rem;
    max-width: 24rem;
}

.ef-campo--qtd {
    width: 5.5rem;
}

.ef-campo--valor {
    width: 7.5rem;
}

.ef-campo--data {
    width: 10rem;
}

.ef-documento__modos {
    display: inline-flex;
    gap: 0.125rem;
    margin-inline-start: auto;
    padding: 0.1875rem;
    border-radius: var(--radius-lg);
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.06));
}

.ef-documento__modo {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-md);
    color: var(--gray-500);
    font-size: var(--text-xs);
    font-weight: 600;
}

.ef-documento__modo--ativo {
    background: light-dark(var(--color-white), var(--gray-700));
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
    color: light-dark(var(--primary-700), var(--color-white));
}

.ef-documento__produto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.5rem;
    color: var(--gray-500);
    font-size: var(--text-sm);
}

.ef-documento__produto strong {
    color: light-dark(var(--gray-950), var(--gray-100));
}

.ef-documento__erro {
    margin-top: 0.375rem;
    color: var(--danger-600);
    font-size: var(--text-sm);
}

.ef-documento__abas {
    overflow: hidden;
}

.ef-documento__aba {
    padding: 0.75rem;
}

.ef-documento__grade {
    min-height: 9rem;
    overflow: auto;
}

.ef-grade__botoes {
    display: inline-flex;
    gap: 0.125rem;
}

/* No computador, o documento ocupa a janela inteira, como no legado: a grade fica com toda a altura que
   sobra e rola por dentro, e o rodapé com os totais fica no pé da tela. 4.75rem = faixa do título da
   página e os respiros acima e abaixo do documento. */
@media (min-width: 64rem) and (min-height: 36rem) {
    .ef-documento {
        height: calc(100dvh - var(--topbar-height) - 4.75rem);
    }

    .ef-documento__abas {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 12rem;
    }

    .ef-documento__grade,
    .ef-documento__aba {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }
}

.ef-documento__rodape {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-xl);
    background: light-dark(var(--color-white), var(--gray-900));
    box-shadow: 0 -6px 16px -10px rgb(10 50 70 / 0.25), 0 0 0 1px light-dark(var(--gray-200), rgb(255 255 255 / 0.1));
}

.ef-documento__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.ef-totais {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
}

.ef-totais > div {
    display: flex;
    flex-direction: column;
}

.ef-totais dt {
    color: var(--gray-500);
    font-size: var(--text-xs);
}

.ef-totais dd {
    margin: 0;
    color: light-dark(var(--gray-950), var(--gray-100));
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ef-totais small {
    color: var(--gray-500);
    font-weight: 400;
}

.ef-totais__principal dd {
    color: light-dark(var(--ef-marinho), var(--primary-300));
    font-size: var(--text-2xl);
    line-height: 1.75rem;
}

.ef-situacao {
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.ef-situacao--orcamento {
    background: var(--info-50);
    color: var(--info-700);
}

.ef-situacao--finalizada {
    background: var(--success-50);
    color: var(--success-700);
}

.ef-situacao--cancelada {
    background: var(--danger-50);
    color: var(--danger-700);
}

/* Faixa de aviso no alto da tela (ex.: contingência da NF-e ativa na filial). */
.ef-faixa-aviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    background: light-dark(var(--warning-50), rgb(245 158 11 / 0.12));
    box-shadow: 0 0 0 1px light-dark(var(--warning-200), rgb(245 158 11 / 0.3));
    color: light-dark(var(--warning-800), var(--warning-300));
    font-size: var(--text-sm);
    font-weight: 500;
}

.ef-faixa-aviso .ef-icone {
    flex: none;
}

/* Faixa vermelha: o que impede o trabalho (ex.: certificado vencido ou nos últimos dias). */
.ef-faixa-aviso--urgente {
    background: light-dark(var(--danger-50), rgb(239 68 68 / 0.12));
    box-shadow: 0 0 0 1px light-dark(var(--danger-200), rgb(239 68 68 / 0.3));
    color: light-dark(var(--danger-800), var(--danger-300));
}

/* No alto do conteúdo (aviso do certificado), afastado do título da página. */
.fi-main > .ef-faixa-aviso {
    margin-bottom: 0.75rem;
}

/* Histórico curto abaixo de um formulário de janela (ex.: últimas inutilizações da NF-e). */
.ef-inutilizacoes {
    margin-top: 0.25rem;
    overflow-x: auto;
}

/* Conferência dos impostos (aba Impostos da nota): totais do XML por grupo e a grade por item. */
.ef-impostos {
    display: grid;
    gap: 1rem;
}

.ef-impostos__grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}

.ef-impostos__grade {
    overflow-x: auto;
}

/* Campos só de consulta, rótulo em cima e valor embaixo, em colunas (item completo, dados da nota). */
.ef-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.ef-item-completo,
.ef-item-completo__aba {
    display: grid;
    gap: 1rem;
}

/* Título pequeno de um bloco dentro de uma aba ou janela. */
.ef-subtitulo {
    margin: 0 0 0.375rem;
    color: var(--gray-500);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Celular: rodapé enxuto (só o valor a pagar e os botões) e grade sem as colunas secundárias; o
   resto da grade rola para o lado. */
@media (max-width: 39.99rem) {
    .ef-documento__rodape {
        gap: 0.375rem 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .ef-documento__rodape .ef-totais > div:not(.ef-totais__principal) {
        display: none;
    }

    .ef-documento__acoes {
        width: 100%;
        margin-inline-start: 0;
    }

    .ef-documento__acoes > * {
        flex: 1 1 0;
    }

    .ef-grade .ef-grade__opcional {
        display: none;
    }
}

/* ==========================================================================
   6. Seletor de filial (barra superior, em petróleo)
   ========================================================================== */

.eficaz-seletor-filial {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eficaz-seletor-filial .fi-input-wrp {
    width: 12rem;
}

.eficaz-seletor-filial__rotulo {
    display: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(255 255 255 / 0.6);
}

@media (min-width: 96rem) {
    .eficaz-seletor-filial__rotulo {
        display: inline;
    }

    .eficaz-seletor-filial .fi-input-wrp {
        width: 15rem;
    }
}

@media (max-width: 39.99rem) {
    .eficaz-seletor-filial .fi-input-wrp {
        width: 8.5rem;
    }

    .fi-topbar .fi-global-search-ctn {
        width: 6.5rem;
    }
}

.eficaz-seletor-filial__vazio {
    font-size: 0.875rem;
    color: var(--danger-300);
}

/* ==========================================================================
   7. Menu lateral
   Três estágios no computador (botão da barra superior, layout.js): completo, só com os ícones dos
   módulos e oculto. No celular, o menu abre por cima da tela. Fundo claro com filete à direita, o
   nome do módulo como título da lista e a tela atual marcada. Nome longo quebra a linha, sem corte.
   ========================================================================== */

/* O botão de três estágios substitui as setas de abrir e recolher do Filament. */
.fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
}

@media (min-width: 64rem) {
    .fi-main-sidebar {
        background: light-dark(var(--color-white), var(--gray-900));
        box-shadow: inset -1px 0 0 var(--ef-linha);
    }

    .ef-menu-oculto .fi-main-sidebar {
        display: none;
    }
}

.fi-sidebar-header {
    padding-inline: 0.75rem;
}

/* Barra de rolagem fina, que aparece com o mouse sobre o menu. */
.fi-sidebar-nav {
    row-gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

.fi-sidebar-nav:hover {
    scrollbar-color: rgb(96 115 130 / 0.4) transparent;
}

.fi-sidebar-nav-groups {
    row-gap: 0.625rem;
    margin-inline: 0;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    row-gap: 0.125rem;
}

.fi-sidebar-group-btn {
    column-gap: 0.625rem;
    padding: 0.375rem 0.5rem;
}

.fi-sidebar-group-btn > .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-sidebar-group-label,
.ef-inicio__titulo {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Telas: o nome alinha com o do módulo, sem os pontos e as linhas do Filament. */
.fi-main-sidebar .fi-sidebar-item-btn {
    padding: 0.3125rem 0.5rem;
    padding-inline-start: 2.375rem;
}

.fi-main-sidebar .fi-sidebar-item-grouped-border {
    display: none;
}

.fi-main-sidebar .fi-sidebar-item-label {
    overflow: visible;
    line-height: 1.25rem;
    text-wrap: balance;
    white-space: normal;
}

/* Tela atual: fundo, nome em negrito e um filete na coluna do ícone do módulo. */
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn {
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.06));
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.375rem;
    inset-inline-start: 1rem;
    width: 0.1875rem;
    border-radius: 999px;
    background: light-dark(var(--primary-600), var(--primary-400));
}

.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
}

/* Só ícones: módulos centralizados, sem barra de rolagem; o da tela atual fica marcado. */
.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
    align-items: center;
    padding-inline: 0;
    scrollbar-gutter: auto;
    scrollbar-width: none;
}

.fi-sidebar-group-dropdown-trigger-btn {
    padding: 0.4375rem;
}

/* Áreas que rolam por dentro (abas, tabelas, grades): barra de rolagem fina e discreta. */
.fi-tabs,
.fi-ta-content-ctn,
.ef-janela__grade,
.ef-documento__grade {
    scrollbar-color: rgb(96 115 130 / 0.4) transparent;
    scrollbar-width: thin;
}

/* Combo: o texto escolhido e o "Selecione uma opção" ficam numa linha, para o campo não crescer. A
   lista de opções continua mostrando o nome inteiro. */
.fi-select-input-placeholder,
.fi-select-input-value-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   8. Página inicial: um cartão por módulo, com as telas como atalhos (o título usa o estilo do menu)
   ========================================================================== */

.ef-inicio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    align-items: start;
    gap: 0.75rem;
}

.ef-inicio__modulo {
    padding: 0.625rem 0.5rem 0.5rem;
}

.ef-inicio__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0.125rem 0.5rem;
    color: var(--gray-500);
}

.ef-inicio__tela {
    display: block;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--radius-lg);
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: var(--text-sm);
    font-weight: 500;
}

.ef-inicio__tela:hover,
.ef-inicio__tela:focus-visible {
    outline: none;
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.06));
    color: light-dark(var(--primary-700), var(--primary-300));
}

/* ==========================================================================
   9. Acabamento (identidade do Gerenciador Eficaz, como no AgenteEficaz)
   Fundo cinza-claro, painéis brancos com linha fina e cantos de 8px, faixa clara no topo de cada
   painel, rótulos firmes em petróleo, campos com borda definida e foco turquesa, abas em pílula com
   a ativa em turquesa e cabeçalho das tabelas em versalete. A barra superior fica em petróleo, com o
   logotipo claro.
   ========================================================================== */

:root {
    --ef-marinho: #0a3246;
    --ef-petroleo: #0a3046;
    --ef-linha: light-dark(var(--gray-200), rgb(255 255 255 / 0.1));
    --ef-sombra: 0 1px 2px rgb(10 50 70 / 0.06);
    --radius-md: 0.25rem;
    --radius-lg: 0.375rem;
    --radius-xl: 0.5rem;
}

/* Barra superior. Os campos (filial e busca) usam as cores do modo escuro. */
.fi-topbar {
    background-color: var(--ef-petroleo);
    box-shadow: none;
}

.fi-topbar .fi-icon-btn {
    color: rgb(255 255 255 / 0.85);
}

.fi-topbar .fi-icon-btn:hover {
    background-color: rgb(255 255 255 / 0.1);
    color: var(--color-white);
}

.fi-topbar .fi-logo-light {
    display: none;
}

.fi-topbar .fi-logo-dark {
    display: flex;
}

.fi-topbar .fi-input-wrp {
    color-scheme: dark;
}

/* Título e botões da página numa faixa branca que, no computador, fica presa embaixo da barra
   superior: Gravar e os outros botões continuam à vista ao rolar um formulário longo, como a barra
   do legado. O ícone do módulo vem de PainelProvider::iconeDoTitulo. */
.fi-header {
    margin-inline: -0.75rem;
    padding: 0.5rem 0.75rem;
    background: light-dark(var(--color-white), var(--gray-900));
    box-shadow: 0 1px 0 var(--ef-linha);
}

@media (min-width: 64rem) {
    .fi-header {
        position: sticky;
        top: var(--topbar-height);
        z-index: 15;
    }
}

.fi-header-heading {
    color: light-dark(var(--ef-marinho), var(--color-white));
    font-size: 1.375rem;
    line-height: 1.75rem;
    letter-spacing: 0;
}

.fi-header > div:has(> .ef-titulo-icone) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.625rem;
}

.fi-header > div:has(> .ef-titulo-icone) > .fi-header-subheading {
    grid-column: 2;
}

.ef-titulo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-lg);
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.06));
    box-shadow: inset 0 0 0 1px light-dark(var(--primary-200), rgb(255 255 255 / 0.1));
    color: light-dark(var(--primary-600), var(--primary-400));
}

/* Painéis: seções, tabelas e abas. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-sc-tabs.fi-contained,
.fi-tabs:not(.fi-contained) {
    --tw-ring-color: var(--ef-linha);
    --tw-shadow: var(--ef-sombra);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
.fi-tabs.fi-contained {
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
    background-color: light-dark(var(--gray-50), rgb(255 255 255 / 0.03));
}

.fi-section-header-heading,
.fi-modal-heading,
.ef-janela__titulo,
.fi-header-heading {
    font-weight: 700;
}

.fi-section-header-heading,
.fi-modal-heading,
.ef-janela__titulo {
    color: light-dark(var(--ef-marinho), var(--color-white));
}

/* Abas em pílula: a ativa em turquesa, as outras em cinza-petróleo. */
.fi-tabs-item .fi-tabs-item-label {
    color: light-dark(var(--gray-600), var(--gray-300));
    font-weight: 600;
}

.fi-tabs-item:not(.fi-active):hover {
    background-color: light-dark(var(--gray-100), rgb(255 255 255 / 0.06));
}

.fi-tabs-item.fi-active {
    background-color: var(--primary-600);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: var(--color-white);
}

/* Rótulos dos campos. */
.fi-fo-field .fi-fo-field-label-content,
.ef-campo__rotulo {
    color: light-dark(var(--gray-800), var(--gray-200));
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Campos: borda definida, sem sombra, foco turquesa com halo. */
.fi-input-wrp {
    background-color: light-dark(var(--color-white), rgb(255 255 255 / 0.05));
    --tw-ring-color: light-dark(var(--gray-300), rgb(255 255 255 / 0.16));
    --tw-shadow: 0 0 #0000;
}

.fi-input-wrp.fi-disabled {
    background-color: light-dark(var(--gray-100), transparent);
    --tw-ring-color: var(--ef-linha);
}

.fi-input-wrp.fi-invalid {
    --tw-ring-color: var(--danger-600);
}

.fi-input-wrp:not(.fi-disabled):not(.fi-invalid):focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in oklab, var(--primary-500) 22%, transparent);
}

input.fi-input,
select.fi-select-input,
.fi-fo-textarea textarea {
    color: light-dark(var(--gray-950), var(--color-white));
}

/* Botões: os comuns com borda e texto em petróleo; o principal (laranja) com texto branco. */
.fi-btn:not(.fi-outlined):not(.fi-color) {
    --tw-ring-color: light-dark(var(--gray-300), rgb(255 255 255 / 0.16));
    --tw-shadow: 0 0 #0000;
    color: light-dark(var(--ef-marinho), var(--color-white));
    font-weight: 600;
}

.fi-btn:not(.fi-color) > .fi-icon {
    color: var(--gray-500);
}

.fi-btn.fi-color-destaque:not(.fi-outlined) {
    --bg: var(--destaque-600);
    --hover-bg: var(--destaque-700);
    --dark-bg: var(--destaque-600);
    --dark-hover-bg: var(--destaque-700);
    --text: var(--color-white);
    --hover-text: var(--color-white);
    --dark-text: var(--color-white);
    --dark-hover-text: var(--color-white);
}

/* Excluir na barra: vermelho só no contorno, como no AgenteEficaz; o laranja segue sendo o destaque. */
.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) {
    --bg: light-dark(var(--color-white), transparent);
    --hover-bg: light-dark(var(--danger-50), rgb(255 255 255 / 0.05));
    --dark-bg: transparent;
    --dark-hover-bg: rgb(255 255 255 / 0.05);
    --text: var(--danger-700);
    --hover-text: var(--danger-700);
    --dark-text: var(--danger-400);
    --dark-hover-text: var(--danger-300);
    box-shadow: inset 0 0 0 1px light-dark(var(--danger-300), var(--danger-800));
}

.fi-badge {
    border-radius: 999px;
}

/* Tabelas: cabeçalho branco em versalete, linha clicável com fundo turquesa claro. */
.fi-ta-table > thead > tr {
    background-color: transparent;
}

.fi-ta-header-cell,
.fi-fo-table-repeater > table > thead > tr > th,
.ef-grade th {
    border-bottom: 1px solid var(--ef-linha);
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-ta-row.fi-clickable:hover {
    background-color: light-dark(var(--primary-50), rgb(255 255 255 / 0.05));
}