/*
 * A moldura da Central da software house (docs/20-central.md), sobre o visual das telas leves (leve.css e cadastro.css):
 * a barra superior em petróleo, o menu à esquerda, o conteúdo, a caixa da entrada e a chave mostrada uma vez.
 */

.ef-central {
    --ef-central-menu: 13rem;
}

.ef-central__corpo {
    display: grid;
    grid-template-columns: var(--ef-central-menu) minmax(0, 1fr);
    min-height: calc(100dvh - var(--ef-topo));
}

.ef-central__menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 1px 0 0 var(--ef-linha);
}

.ef-central__menu a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.ef-central__menu a:hover {
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.05));
}

.ef-central__menu a[aria-current='page'] {
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.08));
    color: light-dark(var(--primary-700), var(--primary-300));
}

.ef-central__menu svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.ef-central__conteudo {
    min-width: 0;
    padding: 0 0.75rem 1rem;
}

.ef-central__nome {
    margin-inline-start: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.ef-central__usuario {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.ef-central__usuario button {
    padding: 0.25rem 0.625rem;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 0.375rem;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.ef-central__usuario button:hover {
    background: rgb(255 255 255 / 0.1);
}

/* Os formulários: uma coluna no celular, duas a partir do tablet. */
.ef-central__formulario {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 1rem;
    min-width: 0;
    margin: 0;
    padding: 1rem;
    /* Também no fieldset (os dados da empresa, travados enquanto o servidor cria), sem a borda do navegador. */
    border: 0;
}

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

.ef-central__formulario .ef-central__inteira {
    grid-column: 1 / -1;
}

.ef-central__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.ef-central__acoes--sem-recuo {
    padding: 0;
}

.ef-central__acoes--acima {
    padding-top: 0.75rem;
}

.ef-central__espaco {
    margin-top: 1rem;
}

.ef-central__secao {
    margin-top: 1rem;
}

.ef-central__secao-titulo {
    margin: 0;
    padding: 0.875rem 1rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.ef-central__texto {
    margin: 0;
    padding: 0.5rem 1rem 0;
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.875rem;
}

.ef-central__fim {
    padding-bottom: 1rem;
}

/* A saúde de cada servidor: o cabeçalho com o "Conferir agora" à direita e os itens lado a lado. */
.ef-central__saude-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1rem 0;
}

.ef-central__saude-cabecalho .ef-central__secao-titulo {
    padding: 0;
}

.ef-central__saude-cabecalho form {
    margin-inline-start: auto;
}

.ef-central__saude {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0.875rem 1rem 1rem;
}

.ef-central__saude dt {
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ef-central__saude dd {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.ef-central__saude-lista {
    margin: 0.375rem 0 0;
    padding-inline-start: 1rem;
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.8125rem;
}

.ef-central__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.ef-central__filtros .ef-campo {
    min-width: 10rem;
}

.ef-central__filtros .ef-central__busca {
    flex: 1 1 18rem;
    max-width: 28rem;
}

/* A entrada (o login, o código e o primeiro acesso): a caixa no meio da página, sobre o petróleo. */
.ef-central-entrada {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 1rem;
    background: var(--ef-petroleo);
}

.ef-central-entrada__caixa {
    width: min(100%, 26rem);
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: var(--ef-fundo-painel);
    box-shadow: var(--ef-sombra);
}

.ef-central-entrada__caixa--larga {
    width: min(100%, 42rem);
}

.ef-central-entrada__marca {
    margin-bottom: 1.25rem;
}

.ef-central-entrada__marca img {
    height: 2rem;
}

.ef-central-entrada h1 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.ef-central-entrada__texto {
    margin: 0 0 1rem;
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.875rem;
}

.ef-central-entrada form {
    display: grid;
    gap: 0.875rem;
}

.ef-central-entrada__subtitulo {
    margin: 0.5rem 0 0;
    color: light-dark(var(--gray-800), var(--gray-200));
    font-size: 0.9375rem;
    font-weight: 600;
}

.ef-central-entrada__lado-a-lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
}

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

/* A entrada dos clientes pelo site: a última empresa do navegador, a escolha entre as do mesmo CNPJ e o "outra empresa". */
.ef-central-entrada__empresa {
    margin: -0.5rem 0 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.ef-central-entrada__escolhas {
    display: grid;
    gap: 0.5rem;
}

.ef-central-entrada__escolhas .ef-botao {
    width: 100%;
}

.ef-central-entrada__outra {
    margin: 0.875rem 0 0;
}

/* O aviso do que acabou de acontecer (a gravação) e o resumo das recusas. */
.ef-central__aviso {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: light-dark(var(--success-50), rgb(34 197 94 / 0.12));
    box-shadow: 0 0 0 1px light-dark(var(--success-200), rgb(34 197 94 / 0.3));
    color: light-dark(var(--success-800), var(--success-300));
    font-size: 0.875rem;
}

.ef-central__aviso--erro {
    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));
}

.ef-central__aviso--alerta {
    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));
}

.ef-central__aviso ul {
    margin: 0.25rem 0 0;
    padding-inline-start: 1.25rem;
}

/* A chave do agente e os códigos de recuperação: mostrados uma vez, para copiar. */
.ef-central__chave {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.06));
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.875rem;
    word-break: break-all;
    user-select: all;
}

.ef-central__codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.06));
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    list-style: none;
}

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

/* A página Atualizar: o subtítulo de cada parte, o que muda, as empresas com falha (com o "Repetir") e a saída. */
.ef-central__subtitulo {
    margin: 0;
    padding: 1rem 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.ef-central__no-painel {
    margin-inline: 1rem;
}

.ef-central__detalhes {
    margin: 0.75rem 1rem 0;
    font-size: 0.875rem;
}

.ef-central__detalhes summary {
    cursor: pointer;
    color: light-dark(var(--gray-700), var(--gray-200));
    font-weight: 600;
}

.ef-central__mudancas {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
    color: light-dark(var(--gray-600), var(--gray-300));
}

.ef-central__mudancas code,
.ef-central__saida {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

.ef-central__saida {
    max-height: 24rem;
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    overflow: auto;
    border-radius: 0.5rem;
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.06));
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* As ações numa linha da tabela (os backups da empresa): os botões menores, lado a lado. */
.ef-central__acoes-da-linha {
    flex-wrap: nowrap;
    gap: 0.375rem;
}

.ef-central__acoes-da-linha .ef-botao {
    padding-block: 0.25rem;
    font-size: 0.8125rem;
}

/* O identificador ao lado do nome (a lista dos backups). */
.ef-central__discreto {
    color: light-dark(var(--gray-500), var(--gray-400));
    font-size: 0.8125rem;
}

/* O progresso da atualização: as etapas feitas, a atual (com o banco de agora e a barra) e as que faltam. */
.ef-central__etapas {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.5rem 1rem 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ef-central__etapa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: light-dark(var(--gray-500), var(--gray-400));
}

.ef-central__etapa-marca {
    display: inline-flex;
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px light-dark(var(--gray-300), var(--gray-600));
}

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

.ef-central__etapa--feita .ef-central__etapa-marca {
    background: light-dark(var(--success-500), var(--success-400));
    box-shadow: none;
}

.ef-central__etapa--feita .ef-central__etapa-marca::after {
    content: '';
    display: block;
    width: 0.3rem;
    height: 0.55rem;
    margin: 0.1rem auto 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ef-central__etapa--atual {
    color: light-dark(var(--ef-marinho), #fff);
    font-weight: 600;
}

.ef-central__etapa--atual .ef-central__etapa-marca {
    background: light-dark(var(--destaque-500), var(--destaque-400));
    box-shadow: 0 0 0 3px light-dark(var(--destaque-100), color-mix(in oklab, var(--destaque-500) 25%, transparent));
}

.ef-central__etapa--falhou {
    color: light-dark(var(--danger-700), var(--danger-300));
    font-weight: 600;
}

.ef-central__etapa--falhou .ef-central__etapa-marca {
    background: light-dark(var(--danger-500), var(--danger-400));
    box-shadow: none;
}

.ef-central__progresso {
    display: block;
    flex-basis: 100%;
    height: 0.375rem;
    margin-inline-start: 1.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: light-dark(var(--gray-200), rgb(255 255 255 / 0.1));
}

.ef-central__progresso > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: light-dark(var(--destaque-500), var(--destaque-400));
}

.ef-central__falhas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 1rem 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ef-central__falhas li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: light-dark(var(--danger-50), rgb(239 68 68 / 0.12));
}

/* A janela aberta de dentro de uma célula da tabela (o Restaurar de cada backup) não herda o "sem quebra" da célula. */
.ef-central .ef-janela {
    white-space: normal;
}

/* O texto que a ação pede na janela de confirmação (o motivo do acesso de suporte), alinhado como os campos. */
.ef-central__campo-da-janela {
    text-align: start;
}

/* O acesso de suporte liberado: o texto e o botão que abre o sistema da empresa, lado a lado. */
.ef-central__suporte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 0;
    padding-bottom: 0.875rem;
}

.ef-central__suporte > .ef-botao {
    margin-inline: 1rem;
}

.ef-central__qr svg {
    width: 12rem;
    height: 12rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: #fff;
}

/* A importação do legado: a barra do envio em partes, os motivos de cada etapa do relatório e os exemplos. */
.ef-central__envio {
    margin: 0.75rem 1rem 0;
}

.ef-central__progresso--envio {
    margin-inline-start: 0;
    height: 0.5rem;
}

.ef-central__progresso--envio > span {
    transition: width 0.3s ease;
}

.ef-central__envio .ef-central__texto {
    margin-inline: 0;
}

.ef-central__etapa--relatorio {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.ef-central__etapa--relatorio .ef-central__etapa-marca {
    margin-top: 0.15rem;
}

.ef-central__relatorio {
    flex: 1;
    margin: 0;
}

.ef-central__relatorio summary {
    font-weight: 400;
}

.ef-central__motivo .ef-central__texto {
    margin: 0.5rem 0 0;
}

.ef-central__exemplos {
    max-height: 12rem;
    margin: 0.25rem 0 0;
    padding-inline-start: 1.25rem;
    overflow-y: auto;
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.8125rem;
}

.ef-central__caixa {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.ef-central__caixa input {
    margin-top: 0.2rem;
}

@media (max-width: 47.99rem) {
    .ef-central__corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .ef-central__menu {
        flex-direction: row;
        overflow-x: auto;
        box-shadow: 0 1px 0 var(--ef-linha);
    }

    .ef-central__menu a {
        white-space: nowrap;
    }
}