/*
 * Capa do processo (CapaProcessoNova)
 *
 * Layout em cartões, pensado para concentrar o máximo de informação
 * numa única tela (como a capa do sistema legado):
 *   - barra de ações (histórico / salvar)
 *   - linha do tempo das datas do processo
 *   - coluna principal (dados editáveis) + coluna lateral (financeiro,
 *     faturas, andamento, fechamento)
 *
 * Fontes, tamanhos de texto, campos e botões seguem o padrão do Adianti;
 * aqui fica só o layout. As cores vêm das variáveis do Bootstrap 5.3
 * (respeitam o tema claro/escuro via data-bs-theme) e da cor de destaque:
 * #0B223C no tema claro e #b5863d no escuro.
 */

.capa-processo {
    --capa-destaque: #0B223C;
    --capa-destaque-claro: rgba(11, 34, 60, .15);
    --capa-titulo-fundo: rgba(11, 34, 60, .06);
    --capa-titulo-borda: rgba(11, 34, 60, .12);
    --capa-sobre-destaque: #FFFFFF;          /* texto sobre a cor de destaque */
    --capa-borda: var(--bs-border-color);
    --capa-linha: var(--bs-border-color-translucent);
    --capa-texto-suave: var(--bs-secondary-color);

    padding: 4px 0;
}

[data-bs-theme=dark] .capa-processo {
    --capa-destaque: #b5863d;
    --capa-destaque-claro: rgba(181, 134, 61, .25);
    --capa-titulo-fundo: rgba(181, 134, 61, .10);
    --capa-titulo-borda: rgba(181, 134, 61, .18);
    --capa-sobre-destaque: #1B1B1B;
}

.capa-processo *,
.capa-processo *::before,
.capa-processo *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Cartões                                                            */
/* ------------------------------------------------------------------ */

/* Cada card se separa pela borda e pelo título sublinhado na cor de
   destaque, no estilo do cabeçalho de um TPanelGroup do Adianti. */
.capa-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--capa-borda);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

.capa-card-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: -14px -16px 12px;
    padding: 9px 16px;
    /* "cinza clássico" de cabeçalho, mas tingido com a cor de destaque */
    background: var(--capa-titulo-fundo);
    border-bottom: 1px solid var(--capa-titulo-borda);
}

.capa-card-titulo h2 {
    margin: 0;
    font-size: inherit;
    font-weight: bold;
    color: var(--capa-destaque);
}

.capa-card-titulo span {
    color: var(--capa-texto-suave);
}

/* ------------------------------------------------------------------ */
/* Barra de ações                                                     */
/* ------------------------------------------------------------------ */

.capa-acoes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.capa-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* ------------------------------------------------------------------ */
/* Linha do tempo                                                     */
/* ------------------------------------------------------------------ */

.capa-timeline {
    display: flex;
    overflow-x: auto;
    /* overflow-x força overflow-y: auto e cortaria o halo (4px) da etapa atual */
    padding: 6px 6px 2px;
    margin: -6px -6px -2px;
}

.capa-etapa {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.capa-etapa-trilho {
    display: flex;
    align-items: center;
}

.capa-etapa-ponto {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border: 2px solid var(--capa-borda);
    color: var(--capa-sobre-destaque);
}

.capa-etapa-ponto i { font-size: .75em; }

.capa-etapa-linha {
    flex: 1;
    height: 2px;
    margin: 0 8px;
    background: var(--capa-borda);
}

.capa-etapa.concluida .capa-etapa-ponto {
    background: var(--capa-destaque);
    border-color: var(--capa-destaque);
}

.capa-etapa.concluida .capa-etapa-linha { background: var(--capa-destaque); }

.capa-etapa.atual .capa-etapa-ponto {
    border-color: var(--capa-destaque);
    box-shadow: 0 0 0 4px var(--capa-destaque-claro);
}

.capa-etapa-texto {
    display: flex;
    flex-direction: column;
    padding-right: 8px;
}

.capa-etapa-nome { font-weight: bold; }

.capa-etapa-prev { color: var(--capa-texto-suave); }

/* Marco da exoneração do ICMS (entre Desembaraço e Fechamento, filial RO) */
.capa-etapa-marco { flex: .8; }

.capa-etapa-marca {
    width: 4px;
    height: 22px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--capa-borda);
}

.capa-etapa-marco.pendente .capa-etapa-marca { background: var(--bs-warning); }
.capa-etapa-marco.pendente .capa-etapa-prev  { color: var(--bs-warning-text-emphasis); }
.capa-etapa-marco.ok .capa-etapa-marca       { background: var(--bs-success); }

/* ------------------------------------------------------------------ */
/* Corpo: coluna principal + lateral                                  */
/* ------------------------------------------------------------------ */

.capa-corpo {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 12px;
    align-items: start;
}

.capa-grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 12px;
}

.capa-span-2  { grid-column: span 2; }
.capa-span-3  { grid-column: span 3; }
.capa-span-4  { grid-column: span 4; }
.capa-span-5  { grid-column: span 5; }
.capa-span-6  { grid-column: span 6; }
.capa-span-8  { grid-column: span 8; }
.capa-span-12 { grid-column: span 12; }

.capa-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.capa-campo > label {
    margin-bottom: 3px;
}

.capa-campo-linha {
    display: flex;
    align-items: center;
    gap: 6px;
}

.capa-campo-linha > :first-child {
    flex: 1;
    min-width: 0;
}

.capa-lista-relacionamento {
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
}

.capa-lista-relacionamento table { width: 100%; }

/* ------------------------------------------------------------------ */
/* Lateral: financeiro / faturas / andamento                          */
/* ------------------------------------------------------------------ */

.capa-linha-valor {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--capa-linha);
}

.capa-linha-valor:last-child { border-bottom: 0; }

.capa-linha-valor span:first-child { color: var(--capa-texto-suave); }

.capa-linha-valor span:last-child {
    font-weight: bold;
    text-align: right;
}

.capa-linha-valor .negativo { color: var(--bs-danger-text-emphasis); }

.capa-aviso {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bs-tertiary-bg);
    font-weight: bold;
}

.capa-aviso.ok {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.capa-aviso.pendente {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.capa-tabela {
    width: 100%;
    border-collapse: collapse;
}

.capa-tabela th {
    text-align: left;
    padding: 5px 6px;
    color: var(--capa-texto-suave);
    border-bottom: 1px solid var(--capa-borda);
    white-space: nowrap;
}

.capa-tabela td {
    padding: 6px;
    border-bottom: 1px solid var(--capa-linha);
    vertical-align: middle;
}

.capa-tabela .num {
    text-align: right;
    white-space: nowrap;
}

.capa-vazio {
    padding: 8px 0;
    color: var(--capa-texto-suave);
}

/* Andamento do processo: um comentário fixo por vez, navegável.
   O card segue o padrão dos demais; só o botão usa a cor de destaque. */
.capa-processo .capa-btn-andamento,
.capa-processo .capa-btn-andamento:hover,
.capa-processo .capa-btn-andamento:focus {
    background: var(--capa-destaque);
    border-color: var(--capa-destaque);
    color: var(--capa-sobre-destaque);
    white-space: nowrap;
}

.capa-processo .capa-btn-andamento i { color: var(--capa-sobre-destaque) !important; }

.capa-processo .capa-btn-andamento:hover { opacity: .9; }

.capa-processo .capa-btn-andamento i,
.capa-processo .capa-btn-andamento span { display: inline; }

.capa-andamento-item { display: none; }
.capa-andamento-item.ativo { display: block; }

.capa-andamento-meta {
    color: var(--capa-texto-suave);
    margin-bottom: 4px;
}

.capa-andamento-texto {
    min-height: 60px;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bs-tertiary-bg);
    border-left: 3px solid var(--capa-destaque);
    white-space: normal;
    overflow-wrap: anywhere;
}

.capa-andamento-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0 12px;
}

.capa-andamento-botoes {
    display: flex;
    gap: 4px;
}

.capa-andamento-posicao { color: var(--capa-texto-suave); }

/* ------------------------------------------------------------------ */
/* Aba Fiscal (NfEntradaSaidaForm): mesmo layout em colunas da capa  */
/* ------------------------------------------------------------------ */

/* Painel NF Entrada / Saída (nf-entrada-saida.css) alinhado aos cards da lateral */
.fiscal-processo .nf-painel { padding: 0; }

.fiscal-processo .nf-painel .nf-section { margin-bottom: 12px; }

/* Situação fiscal: NF de entrada / saída e solicitações, com os alertas abaixo */
.fiscal-situacao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.fiscal-situacao-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bs-tertiary-bg);
    border-left: 3px solid var(--capa-borda);
}

.fiscal-situacao-item span:first-child { color: var(--capa-texto-suave); }
.fiscal-situacao-item span:last-child { font-weight: bold; }

.fiscal-situacao-item.ok { border-left-color: var(--bs-success); }
.fiscal-situacao-item.ok i { color: var(--bs-success); }

.fiscal-situacao-item.pendente { border-left-color: var(--bs-warning); }
.fiscal-situacao-item.pendente i { color: var(--bs-warning); }

.fiscal-alertas {
    list-style: none;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.fiscal-alertas li + li { margin-top: 4px; }

/* Tabelas da lateral: o card corta (overflow: hidden); com pouca largura, rola na horizontal */
.fiscal-rolagem { overflow-x: auto; }

.fiscal-detalhe {
    color: var(--capa-texto-suave);
    font-size: .9em;
}

.fiscal-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.fiscal-status.ok {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.fiscal-status.erro {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.fiscal-status.pendente {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* ------------------------------------------------------------------ */
/* Responsivo                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
    .capa-corpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .capa-card { padding: 12px; }
    .capa-card-titulo { margin: -12px -12px 10px; padding: 8px 12px; }
    .capa-acoes { justify-content: flex-start; }
    .capa-grade > [class*="capa-span-"] { grid-column: span 12; }
}