/*
 * Telas leves de cadastro (docs/11-tela-leve.md, a tela base do legado): a pesquisa (a barra da tabela, os filtros
 * ativos, as tabelas e as páginas, também as das abas) e o formulário (abas, grade de 12 colunas, interruptor, seção
 * e listas). Só as telas de cadastro carregam este arquivo (resources/views/leve/cadastro.blade.php), depois do
 * leve.css, que tem o que toda tela leve usa: as mesmas variáveis e regras da casa, e o mesmo teto por arquivo.
 */

/* ==== 1. Pesquisa: tabela com a barra (busca, filtros, colunas), filtros ativos e páginas ==== */

.ef-painel {
    border-radius: 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px var(--ef-linha), var(--ef-sombra);
}

.ef-tabela__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-height: 2.8125rem;
    padding: 0.375rem 1.5rem;
    border-bottom: 1px solid var(--ef-linha);
}

/* O título da tabela ("Sessões da filial"), como o cabeçalho da tabela de hoje. */
.ef-tabela__cabecalho {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ef-linha);
}

.ef-tabela__titulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.ef-tabela__busca {
    width: 13.1875rem;
}

.ef-tabela__ferramentas {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ef-tabela__ferramentas .ef-suspenso {
    display: flex;
}

.ef-tabela__ferramentas .ef-botao-icone {
    margin: -0.5rem;
}

/* Contador dos filtros, no canto do botão. */
.ef-contador {
    position: absolute;
    top: -0.25rem;
    right: -0.5rem;
    min-width: 1rem;
    padding: 0 0.125rem;
    border-radius: 999px;
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.1));
    box-shadow: inset 0 0 0 1px light-dark(color-mix(in oklab, var(--primary-600) 10%, transparent), rgb(255 255 255 / 0.15));
    color: light-dark(var(--primary-600), var(--primary-400));
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1rem;
    text-align: center;
}

/* Filtros ativos como os do Filament: o rótulo e as etiquetas à esquerda, o X de remover todos na ponta. */
.ef-filtros-ativos {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 1.5rem;
    border-bottom: 1px solid var(--ef-linha);
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    font-size: 0.875rem;
}

.ef-filtros-ativos > div {
    display: flex;
    gap: 0.25rem 0.75rem;
}

.ef-filtros-ativos__titulo {
    color: light-dark(var(--gray-700), var(--gray-200));
    font-weight: 500;
    line-height: 1.5rem;
    white-space: nowrap;
}

.ef-filtros-ativos__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ef-filtros-ativos .ef-etiqueta {
    padding-block: 0.25rem;
}

.ef-filtros-ativos .ef-etiqueta button {
    margin: -0.25rem -0.5rem -0.25rem -0.25rem;
    padding: 0.25rem;
}

.ef-filtros-ativos .ef-etiqueta svg {
    width: 0.75rem;
    height: 0.75rem;
}

.ef-filtros-ativos > .ef-botao-icone {
    width: 2rem;
    height: 2rem;
    margin: -0.25rem -0.375rem -0.375rem;
}

/* Etiqueta: os tons de cada cor como o Filament escolhe. */
.ef-etiqueta {
    --cor-50: var(--primary-50);
    --cor-400: var(--primary-400);
    --cor-600: var(--primary-600);
    --texto: var(--primary-600);
    --texto-escuro: var(--primary-300);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: light-dark(var(--cor-50), color-mix(in oklab, var(--cor-400) 10%, transparent));
    box-shadow: inset 0 0 0 1px light-dark(color-mix(in oklab, var(--cor-600) 10%, transparent), color-mix(in oklab, var(--cor-400) 30%, transparent));
    color: light-dark(var(--texto), var(--texto-escuro));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Na página do painel com a tabela direto nela (a consulta de preços), a tabela de hoje fica na fonte da página (16px
   em 24px), e a célula da etiqueta, sem tamanho próprio, fica na linha dessa fonte: na linha mais alta (o produto com a
   marca embaixo), a etiqueta fica na mesma altura. Nos cadastros, a tabela fica no tamanho pequeno, como a leve. */
.ef-tabela--da-pagina td:has(> .ef-etiqueta) {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Na célula da tabela, a etiqueta pequena. */
.ef-tabela .ef-etiqueta {
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0.125rem 0.375rem;
    letter-spacing: -0.025em;
}

.ef-etiqueta button {
    display: inline-flex;
    color: inherit;
    opacity: 0.6;
}

.ef-etiqueta button:hover {
    opacity: 1;
}

.ef-etiqueta--perigo {
    --cor-50: var(--danger-50);
    --cor-400: var(--danger-400);
    --cor-600: var(--danger-600);
    --texto: var(--danger-700);
    --texto-escuro: var(--danger-200);
}

.ef-etiqueta--cinza {
    --cor-50: var(--gray-50);
    --cor-400: var(--gray-400);
    --cor-600: var(--gray-600);
    --texto: var(--gray-600);
    --texto-escuro: var(--gray-300);
}

.ef-etiqueta--sucesso {
    --cor-50: var(--success-50);
    --cor-400: var(--success-400);
    --cor-600: var(--success-600);
    --texto: var(--success-700);
    --texto-escuro: var(--success-300);
}

.ef-etiqueta--info {
    --cor-50: var(--info-50);
    --cor-400: var(--info-400);
    --cor-600: var(--info-600);
    --texto: var(--info-700);
    --texto-escuro: var(--info-300);
}

.ef-etiqueta--alerta {
    --cor-50: var(--warning-50);
    --cor-400: var(--warning-400);
    --cor-600: var(--warning-600);
    --texto: var(--warning-700);
    --texto-escuro: var(--warning-400);
}

/* O texto escondido para o leitor de tela (posição absoluta) rola junto com a tabela: sem a posição aqui, ele
   escapava da rolagem e empurrava a página para o lado no tablet (a grade dos preços da tabela). */
.ef-tabela__rolagem,
.ef-lista__moldura {
    position: relative;
}

.ef-tabela__rolagem {
    overflow-x: auto;
    scrollbar-color: rgb(96 115 130 / 0.4) transparent;
    scrollbar-width: thin;
}

.ef-tabela {
    width: 100%;
    border-collapse: collapse;
    color: var(--ef-texto);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ef-tabela th {
    padding: 0.5rem 0.75rem;
    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;
    line-height: 1.42857;
    text-align: start;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Como no Filament, a célula não quebra a linha, salvo a coluna marcada para quebrar. */
.ef-tabela td {
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--ef-linha);
    vertical-align: middle;
    white-space: nowrap;
}

.ef-tabela td.ef-tabela__quebra {
    white-space: normal;
}

.ef-tabela th.ef-num,
.ef-tabela .ef-tabela__direita {
    text-align: end;
}

/* "of-type": o primeiro filho da linha é o <template> do Alpine. */
.ef-tabela tr:first-of-type td {
    border-top: 0;
}

.ef-tabela th:first-of-type,
.ef-tabela td:first-of-type {
    padding-inline-start: 1.5rem;
}

.ef-tabela th:last-of-type,
.ef-tabela td:last-of-type {
    padding-inline-end: 1.5rem;
}

/* O resumo embaixo da tabela (as colunas somadas), como o das tabelas de hoje: o título em peso 500 e, na coluna
   somada, o rótulo e o valor em cinza, um embaixo do outro. A linha listrada fica no cinza mais claro. */
.ef-tabela tr.ef-resumo th,
.ef-tabela tr.ef-resumo td {
    padding: 1rem 0.75rem;
    border-top: 1px solid var(--ef-linha);
    border-bottom: 0;
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.25rem;
    text-transform: none;
}

.ef-tabela tr.ef-resumo td {
    padding: 0;
    font-weight: 400;
}

.ef-tabela tr.ef-resumo th:first-of-type {
    padding-inline-start: 1.5rem;
}

/* Com mais de uma página, a linha dos títulos das colunas somadas ("Resumo", "Saldo") é mais baixa, como a de hoje. */
.ef-tabela tr.ef-resumo--cabecalho th {
    padding-block: 0.5rem;
}

.ef-resumo--listrado {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
}

.ef-resumo__soma {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
}

.ef-resumo__rotulo {
    font-weight: 500;
}

.ef-resumo__valor {
    color: light-dark(var(--gray-500), var(--gray-400));
}

.ef-tabela__ordem {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.ef-tabela__ordem > span {
    display: flex;
}

/* A seta muda de tom ao passar o mouse ou com o foco do teclado; a da coluna ordenada fica na cor do texto, como na de
   hoje. */
.ef-tabela__ordem svg {
    width: 1.25rem;
    height: 1.25rem;
    color: light-dark(var(--gray-400), var(--gray-500));
}

.ef-tabela__ordem:is(:hover, :focus-visible):not(.ef-tabela__ordem--ativa) svg {
    color: light-dark(var(--gray-500), var(--gray-400));
}

.ef-tabela__ordem--ativa svg {
    color: var(--ef-texto);
}

.ef-tabela tbody tr[data-abrir] {
    cursor: pointer;
}

.ef-tabela tbody tr[data-abrir]:hover,
.ef-tabela tbody tr[data-abrir]:focus-visible {
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.05));
    outline: none;
}

.ef-tabela__descricao {
    display: block;
    margin-top: 0.25rem;
    color: var(--ef-texto-2);
}

/* As linhas de um relatório (TelaDeConsulta::classeDaLinha): o detalhe debaixo da linha (o item e a parcela da venda),
   menor e cinza, sem a borda; o grupo do sintético composto, em negrito. O texto recuado (a cor "recuo" da coluna): o
   do detalhe e o do subgrupo. */
.ef-tabela tr.ef-tabela__linha--detalhe td {
    padding-block: 0.125rem;
    border-top: 0;
    color: var(--ef-texto-2);
    font-size: 0.8125rem;
}

.ef-tabela tr.ef-tabela__linha--grupo td {
    font-weight: 700;
}

.ef-texto--recuo,
.ef-texto--recuo ~ .ef-tabela__descricao {
    padding-inline-start: 1.25rem;
}

/* A grade da quebra composta dos totais (a data e o vendedor): a data em negrito e o grupo dela recuado. */
.ef-grade tr.ef-grade__grupo td {
    font-weight: 700;
}

.ef-grade td.ef-grade__recuo {
    padding-inline-start: 1.5rem;
}

/* Texto de cor na tabela, nos tons do Filament. */
.ef-texto--perigo {
    color: light-dark(var(--danger-600), var(--danger-300));
}

.ef-texto--sucesso {
    color: light-dark(var(--success-700), var(--success-500));
}

.ef-texto--forte {
    font-weight: 700;
}

/* O saldo negativo da posição de estoque: em negrito, como os outros, e em vermelho. */
.ef-texto--perigo-forte {
    color: light-dark(var(--danger-600), var(--danger-300));
    font-weight: 700;
}

/* Sim ou não com o ícone (o "Ativo"), como o do Filament: 24px, verde 600 e vermelho 500, também no escuro. */
.ef-sim-nao {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* O ícone com o texto invisível ao lado ("Sim", "Não"), na mesma caixa do ícone: preso a ela, o texto fica dentro da
   tabela que rola e não alarga a página na tela estreita. */
.ef-sim-nao__celula {
    position: relative;
    display: block;
}

.ef-sim-nao--sim {
    color: var(--success-600);
}

.ef-sim-nao--nao {
    color: var(--danger-500);
}

/* Cabeçalho de uma tabela dentro de uma aba (título e descrição à esquerda, botões à direita). */
/* Como o cabeçalho das tabelas de hoje: empilhado no celular; de 640px, o título à esquerda (o texto quebra na tela
   menor) e os botões à direita, sem encolher. */
.ef-tabela__cabecalho {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--ef-linha);
}

@media (min-width: 40rem) {
    .ef-tabela__cabecalho {
        flex-direction: row;
        align-items: center;
        padding-inline: 1.5rem;
    }

    .ef-tabela__cabecalho > .ef-barra {
        flex-shrink: 0;
        margin-inline-start: auto;
    }
}

.ef-tabela__titulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.ef-tabela__descricao-geral {
    margin-top: 0.25rem;
    color: light-dark(var(--gray-600), var(--gray-400));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* A coluna das ações da linha fica do tamanho dos botões, como no Filament. */
.ef-tabela__acoes {
    width: 1px;
    text-align: end;
    white-space: nowrap;
}

/* A coluna de marcar as linhas (a distribuição DF-e), estreita, como a seleção das tabelas do Filament. */
.ef-tabela__marca {
    width: 1px;
}

.ef-tabela__marca input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-600);
    cursor: pointer;
}

/* A ação da linha ("Estornar"), como o link do Filament. */
.ef-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    vertical-align: middle;
}

.ef-link > svg {
    color: light-dark(var(--gray-400), var(--gray-500));
}

.ef-link:hover {
    text-decoration: underline;
}

/* A ação de perigo da linha ("Estornar" da baixa): o texto e o ícone vermelhos, como o link de perigo do Filament. */
.ef-link--perigo,
.ef-link--perigo > svg {
    color: light-dark(var(--danger-700), var(--danger-400));
}

/* Mais de uma ação na linha (o recibo e o estorno), lado a lado e à direita como as de hoje, sem aumentar a linha. */
.ef-tabela__botoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ef-texto--cinza {
    color: light-dark(var(--gray-500), var(--gray-400));
}

/* Com a linha em cima, como o vazio das tabelas de hoje (embaixo da linha do cabeçalho, as duas juntas). */
.ef-tabela__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    border-top: 1px solid var(--ef-linha);
    text-align: center;
}

/* O texto do vazio com a largura máxima do de hoje (32rem): a explicação longa quebra a linha, como lá. */
.ef-tabela__vazio > div {
    max-width: 32rem;
}

.ef-tabela__vazio-icone {
    display: flex;
    padding: 0.75rem;
    border-radius: 999px;
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.05));
    color: var(--gray-500);
}

.ef-tabela__vazio p {
    color: light-dark(var(--gray-950), #fff);
    font-size: 1rem;
    font-weight: 600;
}

/* O texto embaixo do título do vazio ("Use "Receber" no topo da tela."), como o do Filament. */
.ef-tabela__vazio .ef-tabela__vazio-descricao {
    margin-top: 0.25rem;
    color: light-dark(var(--gray-500), var(--gray-400));
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

/* As partes mudam pela largura da própria caixa, como no Filament: estreita, só "Anterior", as linhas por página e
   "Próxima"; de 28rem, com o "por página"; de 56rem, o resumo e os números no lugar de "Anterior" e "Próxima". */
.ef-paginas {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--ef-linha);
    container-type: inline-size;
}

.ef-paginas__anterior {
    justify-self: start;
}

.ef-paginas__proxima {
    grid-column-start: 3;
    justify-self: end;
}

.ef-paginas__resumo {
    display: none;
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-paginas__por-pagina {
    display: flex;
    grid-column-start: 2;
    justify-self: center;
    align-items: center;
    border-radius: 0.375rem;
    box-shadow: 0 0 0 1px light-dark(var(--gray-300), rgb(255 255 255 / 0.16));
    font-size: 0.875rem;
}

.ef-paginas__por-pagina span {
    display: none;
    padding: 0 0.75rem;
    border-inline-end: 1px solid var(--ef-linha);
    color: var(--ef-texto-2);
    line-height: 1.875rem;
}

.ef-paginas__por-pagina select {
    height: 1.875rem;
    padding: 0 2rem 0 0.75rem;
    border: 0;
    background: transparent var(--ef-seta) no-repeat right 0.5rem center / 1.5em;
    line-height: 1.25rem;
    appearance: none;
}

/* Números das páginas como os do Filament. */
.ef-paginas__numeros {
    display: none;
    justify-self: end;
    border-radius: 0.375rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 10%, transparent), rgb(255 255 255 / 0.2)), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.ef-paginas__numeros button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0 0.875rem;
    border-inline: 0.5px solid var(--ef-linha);
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.ef-paginas__numeros .ef-paginas__seta {
    padding: 0 0.5rem;
}

.ef-paginas__numeros li {
    display: flex;
}

.ef-paginas__numeros li:first-of-type button {
    border-inline-start: 0;
}

.ef-paginas__numeros li:last-of-type button {
    border-inline-end: 0;
}

.ef-paginas__numeros button:hover:not(:disabled) {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
}

.ef-paginas__numeros button:disabled {
    cursor: default;
}

.ef-paginas__numeros .ef-paginas__atual {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    color: light-dark(var(--primary-700), var(--primary-300));
}

.ef-paginas__numeros svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gray-400);
}

@container (min-width: 28rem) {
    .ef-paginas__por-pagina span {
        display: block;
    }
}

@container (min-width: 56rem) {
    .ef-paginas__resumo {
        display: inline;
    }

    .ef-paginas__numeros {
        display: flex;
    }

    .ef-paginas .ef-paginas__anterior,
    .ef-paginas .ef-paginas__proxima {
        display: none;
    }
}

/* ==== 2. Formulário: abas em pílula, grade de 12 colunas, interruptor, seção e listas ==== */

.ef-abas {
    display: flex;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--ef-linha);
    border-start-start-radius: 0.5rem;
    border-start-end-radius: 0.5rem;
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.03));
    scrollbar-color: rgb(96 115 130 / 0.4) transparent;
    scrollbar-width: thin;
}

.ef-abas__aba {
    flex: none;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.375rem;
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.ef-abas__aba:not(.ef-abas__aba--ativa):hover {
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.06));
}

.ef-abas__aba--ativa {
    background: var(--primary-600);
    color: #fff;
}

.ef-abas__painel {
    padding: 0.75rem;
}

/* O cadastro simples, sem abas: os campos direto na página, como os de hoje. */
/* No computador, a grade dos campos com a folga das duas colunas vazias da de hoje (a lista de baixo pede mais colunas
   do que o formulário tem; as grades de tamanhos). */
@media (min-width: 64rem) {
    .ef-formulario--grade-com-folga .ef-grade-12 {
        width: calc(100% - 1.75rem);
    }
}

.ef-formulario--sem-abas .ef-abas__painel {
    padding: 0;
}

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

/* Grade: 1 coluna no celular em pé, 2 deitado, 6 no tablet e 12 no computador; cada campo na largura do conteúdo. */
.ef-grade-12 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem 0.875rem;
}

@media (min-width: 40rem) {
    .ef-grade-12 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ef-l-3,
    .ef-l-4,
    .ef-l-5,
    .ef-l-6,
    .ef-l-9,
    .ef-l-12 {
        grid-column: span 2;
    }
}

@media (min-width: 48rem) {
    .ef-grade-12 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .ef-l-1 {
        grid-column: span 1;
    }

    .ef-l-2 {
        grid-column: span 2;
    }

    .ef-l-3,
    .ef-l-4 {
        grid-column: span 3;
    }

    .ef-l-5 {
        grid-column: span 4;
    }

    .ef-l-6,
    .ef-l-9,
    .ef-l-12 {
        grid-column: span 6;
    }
}

@media (min-width: 64rem) {
    .ef-grade-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ef-l-4 {
        grid-column: span 4;
    }

    .ef-l-5 {
        grid-column: span 5;
    }

    .ef-l-9 {
        grid-column: span 9;
    }

    .ef-l-12 {
        grid-column: 1 / -1;
    }
}

/* Larguras por tamanho de tela, como a "columnSpan" do Filament (Campo::largura com as colunas de cada tela). */
@media (min-width: 40rem) {
    .ef-sm-1 {
        grid-column: span 1;
    }

    .ef-sm-2 {
        grid-column: span 2;
    }
}

@media (min-width: 48rem) {
    .ef-md-1 {
        grid-column: span 1;
    }

    .ef-md-2 {
        grid-column: span 2;
    }

    .ef-md-3 {
        grid-column: span 3;
    }

    .ef-md-4 {
        grid-column: span 4;
    }

    .ef-md-5 {
        grid-column: span 5;
    }

    .ef-md-6 {
        grid-column: span 6;
    }
}

@media (min-width: 64rem) {
    .ef-lg-1 {
        grid-column: span 1;
    }

    .ef-lg-2 {
        grid-column: span 2;
    }

    .ef-lg-3 {
        grid-column: span 3;
    }

    .ef-lg-4 {
        grid-column: span 4;
    }

    .ef-lg-5 {
        grid-column: span 5;
    }

    .ef-lg-6 {
        grid-column: span 6;
    }

    .ef-lg-7 {
        grid-column: span 7;
    }

    .ef-lg-8 {
        grid-column: span 8;
    }

    .ef-lg-9 {
        grid-column: span 9;
    }

    .ef-lg-10 {
        grid-column: span 10;
    }

    .ef-lg-11 {
        grid-column: span 11;
    }

    .ef-lg-12 {
        grid-column: span 12;
    }
}

/* Interruptor (sim/não), como o do painel. */
.ef-interruptor {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex: none;
    border: 2px solid transparent;
    border-radius: 999px;
    background: light-dark(var(--gray-200), var(--gray-700));
    transition: background-color 0.2s;
}

.ef-interruptor span {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
    transition: translate 0.2s;
}

.ef-interruptor[aria-checked='true'] {
    background: var(--primary-500);
}

.ef-interruptor[aria-checked='true'] span {
    translate: 1.25rem 0;
}

/* O filtro de alternar ("Sem NCM"): o interruptor com o nome ao lado, como o de hoje (a linha tem a altura do nome, 20px,
   e o interruptor sobra 2px em cima e embaixo). */
.ef-filtro-interruptor {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    height: 1.25rem;
}

.ef-filtro-interruptor .ef-interruptor {
    margin-top: -0.125rem;
}

.ef-interruptor:disabled {
    cursor: default;
    opacity: 0.7;
}

/* Seção dentro da aba ("Bloqueio"). */
.ef-secao {
    border-radius: 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px var(--ef-linha), var(--ef-sombra);
}

.ef-secao__cabecalho {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ef-linha);
    border-start-start-radius: 0.5rem;
    border-start-end-radius: 0.5rem;
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.03));
}

.ef-secao__titulo {
    color: light-dark(var(--ef-marinho), #fff);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.ef-secao__descricao {
    margin-top: 0.25rem;
    color: var(--ef-texto-2);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ef-secao__conteudo {
    padding: 0.75rem;
}

/* Lista do formulário: a tabela compacta do Filament. */
.ef-lista__corpo {
    display: grid;
    gap: 0.75rem;
}

.ef-lista__moldura {
    overflow-x: auto;
    border-radius: 0.5rem;
    background: light-dark(#fff, var(--gray-900));
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 5%, transparent), rgb(255 255 255 / 0.1)), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.ef-lista__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ef-lista__tabela th {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ef-linha);
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.42857;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.ef-lista__tabela th sup {
    color: var(--danger-600);
    font-weight: 500;
}

.ef-lista__tabela td {
    padding: 0.25rem 0;
    border-top: 1px solid var(--ef-linha);
}

/* A linha entre as colunas fica à esquerda de cada uma depois da primeira: a coluna de remover escondida (a lista
   bloqueada) não deixa linha sobrando. */
.ef-lista__tabela :is(th, td) + :is(th, td) {
    border-inline-start: 1px solid var(--ef-linha);
}

.ef-lista__tabela tr:first-child td {
    border-top: 0;
}

/* O espaço do rótulo escondido do Filament. */
.ef-lista__tabela .ef-campo {
    gap: 0;
    padding-top: 0.25rem;
}

.ef-lista__tabela .ef-entrada {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ef-lista__tabela .ef-entrada:focus-within {
    box-shadow: inset 0 0 0 2px var(--primary-500);
}

.ef-lista__tabela .ef-entrada--erro {
    box-shadow: inset 0 0 0 1px var(--danger-600);
}

.ef-lista__tabela .ef-erro {
    padding: 0 0.75rem 0.25rem;
}

.ef-lista__tabela .ef-campo--interruptor {
    padding-top: 0;
}

/* O combo da linha não estica a coluna com o texto escolhido (o nome longo do componente): ocupa a célula e corta o
   texto, como o da lista de hoje, e as colunas de largura própria ficam com a largura delas. */
.ef-lista__tabela .ef-combo {
    width: 0;
    min-width: 100%;
}

/* A coluna da alça e a de remover, com a largura fixa de hoje (0,25rem, o conteúdo manda): quando todas as colunas
   da lista têm largura (as parcelas), a sobra se divide entre todas na proporção, como na tabela de hoje. */
.ef-lista__acoes {
    width: 0.25rem;
}

.ef-lista__remover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0.125rem 0.375rem;
    border-radius: 0.5rem;
    color: var(--danger-600);
}

.ef-lista__remover:hover {
    color: var(--danger-500);
}

/* A alça "Mover" das listas que podem ser reordenadas (arrastando), como a de hoje. */
.ef-lista__mover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0.125rem 0.375rem;
    border-radius: 0.5rem;
    color: light-dark(var(--gray-500), var(--gray-400));
    cursor: pointer;
}

/* A lista com o botão no alto ("Gerar parcelas"): o rótulo à esquerda e o botão à direita, os dois no alto da linha,
   como a de hoje. */
.ef-lista__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ef-link--primario,
.ef-link--primario > svg {
    color: light-dark(var(--primary-600), var(--primary-300));
}

.ef-lista__adicionar {
    display: flex;
    justify-content: center;
}

.ef-lista__adicionar .ef-botao {
    padding-inline: 0.625rem;
}

/* Códigos e siglas aparecem em maiúsculas enquanto se digita (o domínio grava assim), como hoje. */
.ef-maiusculas {
    text-transform: uppercase;
}

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

/* Campo calculado no servidor (a margem, o lucro): o rótulo e o texto dos textos calculados de hoje (8px entre eles). */
.ef-campo--calculado {
    gap: 0.5rem;
}

.ef-campo--calculado .ef-rotulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-calculado {
    min-height: 1.25rem;
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* O texto solto das telas de hoje (a aba Usuários do vendedor): no cinza do texto, do tamanho do conteúdo. */
.ef-calculado--texto {
    display: inline-block;
    overflow-wrap: break-word;
    color: light-dark(var(--gray-600), var(--gray-400));
}

/* Na lista (o subtotal do componente), o texto com o recuo das colunas de hoje. */
.ef-lista .ef-calculado {
    padding-inline: 0.75rem;
}

/* Botão de ação dentro da grade ("Usar o preço sugerido"). */
.ef-campo__acoes {
    display: flex;
    gap: 0.75rem;
}

/* Seção que recolhe: o título com a seta à direita. */
.ef-secao--recolhivel .ef-secao__cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.ef-secao__textos {
    flex: 1;
    min-width: 0;
}

.ef-secao__recolher {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    /* À direita, 8px para dentro do espaço do cabeçalho, como o botão de ícone do Filament. */
    margin: -0.375rem -0.5rem -0.375rem 0;
    border-radius: 0.5rem;
    /* A cor do botão de ícone do Filament: cinza 500, mais escuro ao passar o mouse. */
    color: var(--gray-500);
}

.ef-secao__recolher:hover {
    color: light-dark(var(--gray-600), var(--gray-400));
}

.ef-secao__recolher svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: rotate 0.2s;
}

.ef-secao--recolhida .ef-secao__recolher svg {
    rotate: 180deg;
}

.ef-secao--recolhida .ef-secao__cabecalho {
    border-bottom: 0;
    border-radius: 0.5rem;
}

/* Painel com os dados do registro (as tabelas dentro do formulário), com a linha de 20px das tabelas de hoje. */
.ef-painel-dados .ef-grade {
    line-height: 1.25rem;
}

/* O cabeçalho em versalete com a linha da fonte de 11px (a das tabelas de hoje). */
.ef-painel-dados .ef-grade th {
    line-height: 1.42857;
}

.ef-painel-dados .ef-grade td {
    color: light-dark(var(--gray-950), var(--gray-100));
    vertical-align: middle;
}

/* O histórico, como o de hoje: a data, o usuário e a ação na altura do primeiro campo alterado. */
.ef-painel-dados .ef-historico td {
    vertical-align: top;
}

.ef-painel-dados__vazio {
    padding: 1.5rem 0;
    color: var(--gray-500);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
}

.ef-painel-dados__acoes {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* As seções embaixo do formulário (as exceções fiscais do produto, os preços da tabela), como as grades embaixo do
   cadastro de hoje: 10px abaixo do formulário, o espaço entre as linhas da página de hoje. */
.ef-formulario__abaixo {
    margin-top: 0.625rem;
}

.ef-grade-abaixo__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--ef-linha);
}

.ef-grade-abaixo__titulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

/* Sem o botão (antes de os dados chegarem, ou na consulta), o cabeçalho fica na altura dele (57px com a linha de
   baixo), a mesma da grade de hoje sem botão. */
.ef-grade-abaixo__cabecalho:not(:has(.ef-botao)) {
    min-height: calc(3.5rem + 1px);
}

/* O link na célula do painel (o kardex da filial), como o link do Filament: na linha do texto, na cor da marca. */
.ef-painel-dados__link {
    color: light-dark(var(--primary-600), var(--primary-400));
    font-weight: 600;
}

.ef-painel-dados__link:hover {
    text-decoration: underline;
}

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

/* Destaque no alto do formulário (a variação de grade), como os destaques de hoje. */
.ef-destaque {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: light-dark(var(--info-50), color-mix(in oklab, var(--info-500) 10%, transparent));
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--info-600) 20%, transparent), color-mix(in oklab, var(--info-400) 30%, transparent));
}

.ef-destaque__icone {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    color: var(--info-500);
}

.ef-destaque__titulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.ef-destaque__texto {
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* O combo com a inclusão na hora (a marca): a seta e o X na parte do combo; o + num segmento à direita, em cinza. */
.ef-combo__area {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
}

.ef-combo__incluir {
    align-self: stretch;
}

.ef-combo__incluir .ef-entrada__acao {
    color: var(--gray-500);
}

.ef-combo__incluir .ef-entrada__acao:hover {
    color: var(--gray-600);
}

/* Combo que aceita texto livre (o NCM): a lista embaixo do campo, como a do combo livre de hoje (um componente da
   casa, não o select do painel): da largura do texto, até 40rem. */
.ef-combo-livre {
    position: relative;
}

.ef-combo-livre__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: 0.375rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px var(--ef-linha), 0 10px 24px rgb(10 50 70 / 0.14);
    list-style: none;
}

.ef-combo-livre__opcao {
    padding: 0.3125rem 0.625rem;
    border-radius: 0.25rem;
    color: light-dark(var(--gray-950), var(--gray-100));
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
}

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

/* ==== Janela de um botão da tela (o Receber dos títulos), como as janelas de ação de hoje ==== */

/* Os campos em duas colunas (uma no celular), com o espaço da grade do formulário. */
.ef-janela__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem 0.875rem;
}

@media (min-width: 40rem) {
    .ef-janela__grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ef-janela__inteira {
    grid-column: 1 / -1;
}

/* Os valores (decimais) da janela, como os da janela de hoje (a largura do campo de valor com uma coluna só no
   computador): entre 768 e 1023px, cada um na linha inteira. */
@media (min-width: 48rem) and (max-width: 63.98rem) {
    .ef-janela__grade > .ef-janela__decimal {
        grid-column: 1 / -1;
    }
}

/* As opções em rádio, uma embaixo da outra ("Como gerar"), cada uma com 24px de altura, como as de hoje. */
.ef-radios {
    display: grid;
    gap: 1rem;
}

/* Uma ao lado da outra, como o Radio de hoje com o "inline()" ("Entra na conta", "Sai da conta"). */
.ef-radios.ef-radios--em-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ef-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    cursor: pointer;
}

/* O círculo do Filament: branco com contorno; marcado, cheio na cor principal com o ponto branco no meio. */
.ef-radio input {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border-radius: 999px;
    background-color: light-dark(#fff, rgb(255 255 255 / 0.05));
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 10%, transparent), rgb(255 255 255 / 0.2)), 0 1px 2px 0 rgb(0 0 0 / 0.05);
    appearance: none;
}

.ef-radio input:checked {
    background: light-dark(var(--primary-600), var(--primary-500)) url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* O anel do foco também no clique, como o rádio de hoje; no marcado, mais claro. */
.ef-radio input:focus {
    outline: none;
    box-shadow: 0 0 0 2px light-dark(var(--primary-600), var(--primary-500));
}

.ef-radio input:checked:focus {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-500) 50%, transparent);
}

/* O interruptor com o nome ao lado ("Quitar o título"): a linha tem a altura do texto, e o interruptor sobra para cima e
   para baixo, como o de hoje. */
.ef-interruptor-com-rotulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 1.25rem;
}

/* O texto no alto da linha, e não centralizado, como o de hoje. */
.ef-interruptor-com-rotulo .ef-rotulo {
    align-self: flex-start;
    margin: 0;
}

/* No celular, o nome comprido quebra a linha, e a linha cresce com ele (sem cortar a segunda linha). */
@media (max-width: 39.99rem) {
    .ef-interruptor-com-rotulo {
        height: auto;
        min-height: 1.25rem;
    }
}

/* A janela mais estreita (42rem), como a da inutilização das notas de hoje. */
.ef-janela--media .ef-janela__caixa {
    max-width: 42rem;
}

/* A janela larga (64rem), com a grade dos títulos da baixa em lote: a grade rola por dentro, e os números ficam
   estreitos. */
.ef-janela--larga .ef-janela__caixa {
    max-width: 64rem;
}

.ef-grade-da-janela__rolagem {
    max-height: 22rem;
    overflow: auto;
}

.ef-grade-da-janela__editavel .ef-entrada {
    width: 6.5rem;
    margin-inline-start: auto;
}

.ef-grade-da-janela tfoot td {
    font-weight: 600;
}

/* A janela de hoje de uma coluna só em que o valor pede duas (o "Gerar preços"): até 768px, uma coluna; depois, a
   segunda do tamanho do que cai nela, e o valor na linha inteira. */
.ef-janela__grade.ef-janela__grade--conteudo {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
    .ef-janela__grade.ef-janela__grade--conteudo {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ef-janela__grade--conteudo > .ef-janela__decimal {
        grid-column: 1 / -1;
    }
}

/* A grade de colunas fixas das janelas de hoje (a das notas): uma embaixo da outra até 1024px. */
@media (min-width: 40rem) {
    .ef-janela__grade.ef-janela__grade--lg {
        grid-template-columns: minmax(0, 1fr);
    }

    .ef-janela__grade--3:not(.ef-janela__grade--lg) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .ef-janela__grade.ef-janela__grade--lg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ef-janela__grade.ef-janela__grade--lg.ef-janela__grade--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A tabela embaixo dos campos (as últimas inutilizações), como o rodapé do conteúdo das janelas de hoje. */
.ef-janela__tabela {
    margin-top: 1.5rem;
}

.ef-janela__subtitulo {
    margin-bottom: 0.5rem;
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* A célula sem valor ("—", "Rascunho"), no cinza do texto de exemplo das tabelas de hoje, com a linha de 24px dele (a
   linha da tabela fica 2,5px mais alta, como a de hoje). */
.ef-texto--vazio {
    color: light-dark(var(--gray-400), var(--gray-500));
    line-height: 1.5rem;
}

/* Várias escolhas (o filtro de situação das notas), como o select de várias escolhas de hoje: as escolhidas em
   etiquetas dentro do campo e a seta à direita. */
.ef-varios {
    position: relative;
}

.ef-varios__campo {
    align-items: center;
    min-height: 2.25rem;
    padding: 0.3125rem 2rem 0.3125rem 0.75rem;
    background: var(--ef-seta) no-repeat right 0.5rem center / 1.5em, light-dark(#fff, rgb(255 255 255 / 0.05));
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: none;
    cursor: pointer;
}

/* O anel fica enquanto o foco está no campo, também ao escolher na lista e ao tirar uma escolhida pelo X. */
.ef-varios__campo:focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in oklab, var(--primary-500) 22%, transparent);
}

.ef-varios__escolhas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.ef-varios__vazio {
    color: var(--gray-400);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* A escolhida como a etiqueta do select de hoje: a pílula de 24px, com o X de 12px numa área de 20px. */
.ef-varios__escolha {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: light-dark(var(--primary-50), color-mix(in oklab, var(--primary-400) 10%, transparent));
    box-shadow: inset 0 0 0 1px light-dark(color-mix(in oklab, var(--primary-600) 10%, transparent), color-mix(in oklab, var(--primary-400) 30%, transparent));
    color: light-dark(var(--primary-600), var(--primary-200));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.ef-varios__tirar {
    display: flex;
    margin: -0.25rem -0.5rem -0.25rem -0.25rem;
    padding: 0.25rem;
    color: light-dark(color-mix(in oklab, var(--primary-700) 50%, transparent), var(--primary-300));
}

.ef-varios__tirar:hover {
    color: light-dark(color-mix(in oklab, var(--primary-700) 75%, transparent), var(--primary-200));
}

.ef-varios__tirar svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* ==== Tela de processo (a atualização de preço em lote, a conferência do estoque) ==== */

/* As partes da página (a explicação, os campos, o resultado) a 12px uma da outra, como as de hoje; a coluna encolhe
   até a tela (a tabela larga rola dentro da caixa, no celular). */
.ef-processo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

/* O resultado no painel (a prévia), como o de hoje, com os cantos maiores. */
.ef-processo__resultado {
    border-radius: 0.75rem;
}

/* A seção compacta de hoje (a explicação e o resultado da conferência): o texto com 12px em volta. */
.ef-processo__secao {
    padding: 0.75rem;
    border-radius: 0.375rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px var(--ef-linha), var(--ef-sombra);
}

/* A seção com uma grade larga (o resumo do caixa): na tela estreita, a grade rola dentro dela, sem alargar a página. */
.ef-processo__secao--grade {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* A nota embaixo da grade (o que o relatório deixa de fora). */
.ef-processo__nota {
    margin-top: 0.5rem;
}

/* O aviso embaixo dos filtros do relatório que mudaram e ainda não foram pesquisados ("Atualizar"). */
.ef-consulta__desatualizada {
    margin-top: 0.75rem;
}

/* O total principal negativo (o saldo final do fluxo de caixa), em vermelho. */
.ef-totais__principal dd.ef-texto--perigo {
    color: var(--danger-600);
}

/* O gráfico do saldo dia a dia (o fluxo de caixa): o maior e o menor saldo à esquerda, as datas embaixo; a linha na cor
   das ações, a área até o zero clara, o zero tracejado e a parte abaixo dele num vermelho leve. */
.ef-grafico {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.5rem;
    margin-top: 0.75rem;
}

.ef-grafico svg {
    display: block;
    width: 100%;
    height: 9rem;
    overflow: visible;
}

.ef-grafico__eixo,
.ef-grafico__datas {
    color: var(--gray-500);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1rem;
}

.ef-grafico__eixo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
}

.ef-grafico__datas {
    display: flex;
    grid-column: 2;
    justify-content: space-between;
}

.ef-grafico__linha {
    fill: none;
    stroke: light-dark(var(--primary-600), var(--primary-400));
    stroke-width: 2;
}

.ef-grafico__area {
    fill: light-dark(var(--primary-600), var(--primary-400));
    opacity: 0.1;
}

.ef-grafico__zero {
    stroke: var(--gray-400);
    stroke-dasharray: 4 3;
    stroke-width: 1;
}

.ef-grafico__negativo {
    fill: var(--danger-600);
    opacity: 0.06;
}

/* O link da tabela (o produto que abre o kardex), como o link de hoje. */
.ef-processo__link {
    display: inline-flex;
    color: light-dark(var(--primary-600), var(--primary-400));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-processo__link:hover {
    text-decoration: underline;
}

/* O texto da célula que é um link (o documento do movimento no kardex), como a coluna com "url" de hoje: na cor do
   link, sublinhado ao passar o mouse. */
.ef-tabela__link {
    color: light-dark(var(--primary-600), var(--primary-400));
}

.ef-tabela__link:hover,
.ef-tabela__link:focus-visible {
    text-decoration: underline;
}

/* A tabela larga rola dentro do painel (no celular), sem empurrar a página para o lado. */
.ef-processo__rolagem {
    overflow-x: auto;
}

/* O assistente do primeiro acesso (docs/21-implantacao-e-importacao.md §2.3): os passos um embaixo do outro, cada um
   com a etiqueta de feito ou falta no cabeçalho, e o destaque do "pronto" com o botão da venda de teste. */
.ef-primeiros-passos {
    display: grid;
    gap: 1rem;
    max-width: 64rem;
}

.ef-primeiros-passos__resumo {
    color: var(--ef-texto-2);
    font-size: 0.875rem;
}

.ef-primeiros-passos__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ef-primeiros-passos .ef-secao__descricao {
    margin: 0 0 0.75rem;
}

.ef-primeiros-passos__acoes {
    margin-top: 0.875rem;
}

/* O formulário com várias seções (o assistente da produção): o mesmo espaço entre elas. */
.ef-primeiros-passos__formulario {
    display: grid;
    gap: 1rem;
}

.ef-primeiros-passos__pronto {
    align-items: center;
    margin-bottom: 0;
}

.ef-primeiros-passos__pronto > div {
    flex: 1;
}