/* Demonstrações Contábeis — tela de três passos.
 *
 * Nada aqui foi emprestado de relatorio-df.css de propósito: aquela aba era a versão anterior desta
 * mesma funcionalidade e saiu na Fase 7. Estilo emprestado dela teria virado dependência a desfazer
 * na remoção — e a remoção não precisou tocar em nada daqui.
 */

.dfs-passos {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-wrap: wrap;
}

.dfs-passo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.dfs-passo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
}

.dfs-passo.atual {
    border-color: var(--primary-orange);
    color: var(--primary-blue);
}

.dfs-passo.atual .dfs-passo-num {
    background: var(--primary-orange);
    color: #fff;
}

.dfs-passo.feito .dfs-passo-num {
    background: #1baf7a;
    color: #fff;
}

.dfs-cartao {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
}

.dfs-cartao[hidden] {
    display: none;
}

.dfs-cartao h3 {
    margin: 0;
    font-size: 17px;
    color: var(--primary-blue);
}

.dfs-secao-titulo {
    margin: 24px 0 4px;
    font-size: 14px;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dfs-secao-nota {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #64748b;
}

.dfs-ok {
    margin: 8px 0;
    font-size: 13px;
    color: #14804f;
}

.dfs-aviso {
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 3px solid #eda100;
    background: #fffaf0;
    font-size: 13px;
    color: #7a5b00;
}

/* ---- Passo 1: envio ---- */

.dfs-drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.dfs-drop-zone:hover,
.dfs-drop-zone.drag-over {
    border-color: var(--primary-orange);
    background: #fff7f0;
}

.dfs-drop-icone {
    font-size: 34px;
    color: #94a3b8;
}

.dfs-drop-texto {
    margin-top: 10px;
    font-weight: 600;
    color: var(--primary-blue);
}

.dfs-drop-dica {
    margin-top: 4px;
    font-size: 12.5px;
    color: #64748b;
}

.dfs-drop-zone input[type="file"] {
    display: none;
}

.dfs-arquivos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.dfs-arquivo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
}

.dfs-arquivo-nome {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dfs-arquivo-tam {
    color: #64748b;
    font-size: 12px;
}

.dfs-arquivo-remover {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
}

.dfs-arquivo-remover:hover {
    color: #d03b3b;
}

/* ---- Passo 2: identificação ---- */

.dfs-empresa-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: #64748b;
}

.dfs-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 24px;
    margin-top: 14px;
}

.dfs-ficha-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.dfs-ficha-rotulo {
    color: #64748b;
}

.dfs-ficha-valor {
    font-weight: 600;
    color: var(--primary-blue);
    text-align: right;
}

.dfs-origem {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: #94a3b8;
}

/* ---- Passo 2: conferências ---- */

.dfs-conferencias {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dfs-conferencia {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
}

.dfs-conferencia.falha {
    background: #fef2f2;
}

.dfs-conferencia-dif {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.dfs-conferencia-detalhe {
    grid-column: 2 / -1;
    font-size: 12px;
    color: #64748b;
}

.dfs-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #e2e8f0;
    color: #475569;
}

.dfs-conferencia.falha .dfs-tag,
.dfs-tag.pendente {
    background: #fee2e2;
    color: #b91c1c;
}

.dfs-conferencia.atencao .dfs-tag,
.dfs-tag.atencao {
    background: #fef3c7;
    color: #92400e;
}

/* ---- Passo 2: fila de revisão ---- */

.dfs-contas {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dfs-conta {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(140px, 0.9fr) minmax(130px, 0.8fr) minmax(190px, 1.1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.dfs-conta-identidade {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dfs-conta-codigo {
    font-size: 11.5px;
    color: #64748b;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.dfs-conta-descricao {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-blue);
}

.dfs-conta-caminho {
    font-size: 11.5px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dfs-conta-saldos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.dfs-conta-saldo {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dfs-conta-saldo-ant {
    font-size: 11.5px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.dfs-conta-situacao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.dfs-conta-regra {
    font-size: 11px;
    color: #94a3b8;
}

.dfs-destino {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12.5px;
    background: #fff;
}

.dfs-destino:focus {
    outline: none;
    border-color: var(--primary-orange);
}

/* ---- Passo 2: assinaturas ---- */

.dfs-assinatura-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dfs-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dfs-campo label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.dfs-campo input,
.dfs-campo textarea {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
}

.dfs-campo input:focus,
.dfs-campo textarea:focus {
    outline: none;
    border-color: var(--primary-orange);
}

.dfs-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.dfs-acoes .dfs-espaco {
    flex: 1;
}

.dfs-btn-grande {
    padding: 12px 22px;
    font-size: 14px;
}

/* ---- Cartões de escolha (opções de saída e posição da assinatura) ----
 *
 * Sem cor de destaque: o estado ligado se lê pela borda, pelo fundo e pelo ícone de confirmação.
 * A caixa de marcar nativa fica escondida, mas continua sendo ela que carrega o estado — o rótulo
 * envolve o input, então clique, tecla e leitor de tela funcionam sem uma linha de JavaScript.
 */

.dfs-opcoes,
.dfs-escolha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.dfs-opcao-cartao,
.dfs-escolha-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.dfs-opcao-cartao:hover,
.dfs-escolha-item:hover {
    border-color: #cbd5e1;
    background: #fcfcfc;
}

.dfs-opcao-cartao input,
.dfs-escolha-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dfs-opcao-cartao > i:first-of-type,
.dfs-escolha-item > i {
    font-size: 17px;
    color: #94a3b8;
    margin-top: 1px;
}

.dfs-opcao-cartao span,
.dfs-escolha-item span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
}

.dfs-opcao-cartao strong,
.dfs-escolha-item strong {
    display: block;
    font-size: 13.5px;
    color: #334155;
    margin-bottom: 2px;
}

/* O ícone de estado só existe nos cartões de ligar/desligar. */
.dfs-opcao-estado {
    font-size: 16px;
    color: #e2e8f0;
    align-self: center;
}

/* `.ligado` vem de page.js. O estado NÃO depende de `:has()`: a caixa nativa está escondida, então
   num navegador sem suporte o usuário ficaria sem caixa e sem destaque — sem forma de saber o que
   está ligado. O seletor de foco abaixo pode usar `:has()`, porque ali a falta dele custa um anel
   de foco, não a informação. */
.dfs-opcao-cartao.ligado,
.dfs-escolha-item.ligado {
    border-color: var(--primary-blue);
    background: #f8fafc;
}

.dfs-opcao-cartao.ligado > i:first-of-type,
.dfs-escolha-item.ligado > i {
    color: var(--primary-blue);
}

.dfs-opcao-cartao.ligado strong,
.dfs-escolha-item.ligado strong {
    color: var(--primary-blue);
}

.dfs-opcao-cartao.ligado .dfs-opcao-estado {
    color: var(--primary-blue);
}

/* Foco de teclado: o input está escondido, então o anel tem de vir do cartão. */
.dfs-opcao-cartao:has(input:focus-visible),
.dfs-escolha-item:has(input:focus-visible) {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

/* ---- Cabeçalho de seção com ação à direita ---- */

.dfs-secao-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dfs-secao-cab .dfs-secao-titulo {
    margin-top: 24px;
}

/* ---- Passo 3: artefatos ---- */

.dfs-artefatos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.dfs-artefato {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    text-decoration: none;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 600;
}

.dfs-artefato:hover {
    border-color: var(--primary-orange);
    background: #fff7f0;
}

.dfs-artefato.pdf i {
    color: #d03b3b;
}

.dfs-artefato.html i {
    color: #2a78d6;
}

.dfs-artefato-tam {
    font-weight: 400;
    color: #94a3b8;
    font-size: 12px;
}

@media (max-width: 900px) {
    .dfs-conta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dfs-conta-saldos {
        align-items: flex-start;
    }
}