/* =========================================================================
   Específico da Conferência de NFS-e. O visual base vem de sigma-base.css;
   aqui ficam só a tabela comparativa e os detalhes de dado fiscal.
   ========================================================================= */

/* Números de dinheiro alinham pela vírgula; CNPJ em largura fixa para bater
   dígito com dígito de uma linha para outra. */
/* Precisa vencer `.table th, .table td { text-align: left }` do sigma. */
.num,
.table th.num,
.table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnpj {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 0.82rem; white-space: nowrap;
}
.col-livre { white-space: normal; min-width: 200px; }
.texto-fraco { color: var(--cor-texto-suave); font-size: 0.8rem; }

.pilha-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pilha-acoes .cresce { flex: 1; }

/* ------------------------------------------------------------------ */
/*  Tabela comparativa: cada nota ocupa duas linhas — Portal em cima,  */
/*  declaração embaixo — para o olho comparar na vertical.             */
/* ------------------------------------------------------------------ */
.tabela-comparacao tbody tr.linha-portal td { border-bottom: none; padding-bottom: 0.2rem; }
.tabela-comparacao tbody tr.linha-declarada td { padding-top: 0.2rem; }
.tabela-comparacao tbody tr.linha-portal td[rowspan] { padding-bottom: 0.75rem; }
.tabela-comparacao tbody tr.linha-declarada:not(:last-child) td { border-bottom: 2px solid var(--cor-borda); }
.tabela-comparacao tbody tr.grupo-unico td { border-bottom: 2px solid var(--cor-borda); }
.tabela-comparacao tbody tr:hover td { background: transparent; }
.tabela-comparacao tbody tr.linha-portal:hover td,
.tabela-comparacao tbody tr.linha-portal:hover + tr.linha-declarada td,
.tabela-comparacao tbody tr.linha-declarada:hover td,
.tabela-comparacao tbody tr.grupo-unico:hover td { background: var(--cor-fundo-suave); }

.origem {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--cor-texto-fraca); white-space: nowrap;
}
.origem.portal    { color: var(--cor-destaque-escura); }
.origem.declarada { color: var(--cor-primaria-escura); }

/* O valor que não bate fica marcado nas duas linhas, para não obrigar a
   procurar qual dos dois é o diferente. */
.difere {
    background: var(--alerta-perigo-fundo); color: var(--alerta-perigo-texto);
    font-weight: 700; border-radius: var(--raio); padding: 0.1rem 0.4rem;
    display: inline-block; margin: -0.1rem -0.4rem;
}
.ausente { color: var(--cor-texto-fraca); }

/* Cartões de situação: clicáveis, funcionam como filtro da tabela. */
.filtros-situacao { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.chip-situacao {
    display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-borda); border-radius: var(--raio-medio);
    padding: 0.6rem 0.9rem; min-width: 148px; transition: box-shadow .2s, border-color .2s;
}
.chip-situacao:hover { box-shadow: var(--sombra-2); }
.chip-situacao .qtd { font-size: 1.3rem; font-weight: 800; line-height: 1.1; color: var(--cor-texto); }
.chip-situacao .rot { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--cor-texto-suave); }
.chip-situacao .iss { font-size: 0.75rem; color: var(--cor-texto-fraca); font-variant-numeric: tabular-nums; }
.chip-situacao.grave  { border-left-color: var(--cor-perigo); }
.chip-situacao.grave .qtd { color: var(--cor-perigo); }
.chip-situacao.media  { border-left-color: var(--cor-aviso); }
.chip-situacao.media .qtd { color: var(--cor-aviso-escura); }
.chip-situacao.boa    { border-left-color: var(--cor-primaria); }
.chip-situacao.boa .qtd { color: var(--cor-primaria-escura); }
.chip-situacao.ativo  { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); }

/* Rede de segurança: ícone nenhum pode esticar para preencher o container. */
svg { flex: none; }
.section h2 svg,
.btn svg,
.alert svg,
.legenda svg,
.texto-fraco svg { width: 16px; height: 16px; vertical-align: -3px; }
.section h2 svg { color: var(--cor-primaria); }

.stat-card.destaque-laranja { border-left: 4px solid var(--cor-destaque); }
.stat-icon { color: var(--cor-texto-fraca); margin-bottom: 0.35rem; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-card h3 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--cor-texto-suave); }
.stat-number { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-card small { color: var(--cor-texto-fraca); font-size: 0.78rem; }
.stat-card.danger .stat-number { color: var(--cor-perigo); }
.stat-card.warning .stat-number { color: var(--cor-aviso-escura); }

.legenda { font-size: 0.8rem; color: var(--cor-texto-suave); margin-bottom: 0.75rem; }
.legenda code { background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda-suave);
    border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.78rem; }

/* O sigma fixa a última coluna da tabela (pensada para os botões de ação).
   Aqui a última coluna é texto: fixá-la faz ela cobrir o ISS. Precisa vencer
   a especificidade de `.table-scroll-wrapper .table td:last-child`. */
.table-scroll-wrapper .table.tabela-comparacao th:last-child,
.table-scroll-wrapper .table.tabela-comparacao td:last-child,
.table-scroll-wrapper .table.tabela-simples th:last-child,
.table-scroll-wrapper .table.tabela-simples td:last-child {
    position: static;
    box-shadow: none;
}

/* Larguras que evitam a rolagem horizontal no caso comum. */
.tabela-comparacao td.col-livre { min-width: 140px; max-width: 210px; }
.tabela-comparacao td.observacao { min-width: 180px; max-width: 260px; white-space: normal; }
.tabela-comparacao .num { min-width: 92px; }

/* Chave de acesso: 50 dígitos precisam quebrar sem esticar a coluna. */
.chave {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.64rem; line-height: 1.35; color: var(--cor-texto-fraca);
    word-break: break-all; margin-top: 0.2rem; user-select: all;
}
/* O número do lado declarado quando difere do Portal: só sinalizado, não é erro. */
.numero-outro { color: var(--cor-primaria-escura); }

/* A situação é a primeira coluna e não pode roubar espaço das outras: rótulo
   curto no selo (o completo fica no title) e largura limitada. */
.tabela-comparacao td.col-situacao,
.tabela-comparacao th:first-child { width: 1%; }
.tabela-comparacao td.col-situacao .status-badge {
    white-space: normal; display: inline-block; max-width: 92px; line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/*  Campo de arquivo: o input nativo fica invisível por cima do botão,  */
/*  então o clique em qualquer ponto do bloco abre o seletor.           */
/* ------------------------------------------------------------------ */
/* `.form-group label` do sigma tem mais especificidade e força display:block;
   sem este seletor o alinhamento do botão com o nome do arquivo depende de sorte. */
.form-group label.file-input,
.file-input { display: flex; align-items: center; gap: 0.6rem; width: 100%;
              margin-bottom: 0; font-weight: 400; }
.file-input-nome { max-width: none; flex: 1; }
.file-input-botao { color: var(--cor-primaria-escura); border-color: var(--cor-primaria); }
.file-input:hover .file-input-botao {
    background-color: var(--cor-primaria-suave);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-escura);
}
.file-input input[type="file"]:focus-visible + .file-input-botao { box-shadow: var(--anel-foco); }

/* ------------------------------------------------------------------ */
/*  Tela de comparar: os dois lados do cruzamento lado a lado, em vez   */
/*  de uma fileira de selects espremidos.                              */
/* ------------------------------------------------------------------ */
.form-comparar { display: grid; gap: 1.15rem; }
.form-comparar .form-group { margin-bottom: 0; }

.lados { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lados { grid-template-columns: 1fr 1fr; } }

.lado {
    border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-medio);
    padding: 1rem 1.1rem 1.15rem; background: var(--cor-fundo-suave);
    display: flex; flex-direction: column; gap: 0.9rem;
}
.lado > h3 {
    display: flex; align-items: center; gap: 0.45rem; margin: 0;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.lado.portal   { border-left: 3px solid var(--cor-destaque); }
.lado.portal   > h3 { color: var(--cor-destaque-escura); }
.lado.municipal{ border-left: 3px solid var(--cor-primaria); }
.lado.municipal> h3 { color: var(--cor-primaria-escura); }
.lado .dica { font-size: 0.78rem; color: var(--cor-texto-fraca); margin-top: -0.35rem; }

.opcoes {
    display: grid; gap: 1rem; align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding-top: 0.35rem; border-top: 1px solid var(--cor-borda-suave);
}
.opcoes .checkbox-label {
    display: flex; align-items: center; gap: 0.5rem; min-height: 40px;
    font-size: 0.88rem; color: var(--cor-texto); font-weight: 400;
}
.opcoes .checkbox-label input { width: 17px; height: 17px; accent-color: var(--cor-primaria); }
.acao-comparar { display: flex; justify-content: flex-end; }

/* ------------------------------------------------------------------ */
/*  Modal de espera: o ZIP leva alguns segundos e o navegador não dá   */
/*  nenhum sinal de que está gerando. Sem isso o usuário clica de novo. */
/* ------------------------------------------------------------------ */
.modal-espera .app-modal { max-width: 22rem; text-align: center; padding: 2.25rem 1.75rem; }
.modal-espera .rodela {
    width: 44px; height: 44px; margin: 0 auto 1.1rem;
    border: 3px solid var(--cor-primaria-suave);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.modal-espera h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.modal-espera p  { font-size: 0.88rem; color: var(--cor-texto-suave); }
@media (prefers-reduced-motion: reduce) {
    .modal-espera .rodela { animation-duration: 3s; }
}

/* ------------------------------------------------------------------ */
/*  Cabeçalho de tabela ordenável.                                     */
/* ------------------------------------------------------------------ */
th.ordenavel { padding: 0; }
th.ordenavel a {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.75rem 0.85rem; color: inherit; text-decoration: none;
    font: inherit; white-space: nowrap;
}
th.ordenavel.num a { justify-content: flex-end; }
th.ordenavel a:hover { background: rgba(0, 0, 0, .09); }
th.ordenavel .seta { font-size: 0.85em; opacity: 0.45; line-height: 1; }
th.ordenavel.ativa .seta { opacity: 1; font-size: 0.7em; }
th.ordenavel.ativa a { background: rgba(0, 0, 0, .15); }
th.ordenavel a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Nota com ISS devido em outra cidade: informação, não erro — por isso não usa
   o amarelo de alerta nem o vermelho de divergência. */
.selo-fora {
    background: #e8eef7; color: #2c4a7c; border: 1px solid #c3d3e9;
}
.selos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.25rem; }
.selos .texto-fraco { font-size: 0.75rem; }

/* ------------------------------------------------------------------ */
/*  Bloco explicativo recolhido: quem já sabe não perde espaço de tela. */
/* ------------------------------------------------------------------ */
.explicacao {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave);
    border-left: 3px solid var(--cor-primaria);
    border-radius: var(--raio-medio); box-shadow: var(--sombra-1);
    margin-bottom: 1.25rem;
}
.explicacao > summary {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.15rem; cursor: pointer; list-style: none;
    font-size: 0.9rem; font-weight: 600; color: var(--cor-primaria-escura);
}
.explicacao > summary::-webkit-details-marker { display: none; }
.explicacao > summary::after {
    content: '▾'; margin-left: auto; font-size: 0.8rem; opacity: 0.6;
    transition: transform 0.15s;
}
.explicacao[open] > summary::after { transform: rotate(180deg); }
.explicacao > summary:hover { background: var(--cor-primaria-suave); }
.explicacao .corpo {
    padding: 0 1.15rem 1.1rem; font-size: 0.88rem; color: var(--cor-texto-suave);
    max-width: 92ch; display: grid; gap: 0.6rem;
}
.explicacao .corpo b { color: var(--cor-texto); }
.explicacao .corpo ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* ------------------------------------------------------------------ */
/*  Tela de entrada.                                                   */
/* ------------------------------------------------------------------ */
body.tela-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; background: var(--cor-fundo);
}
.caixa-login {
    width: 100%; max-width: 24rem; text-align: center;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-grande); box-shadow: var(--sombra-2);
    padding: 2.25rem 2rem 1.75rem;
}
.caixa-login img { max-width: 190px; height: auto; margin-bottom: 1.35rem; }
.caixa-login h1 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.caixa-login .orgao {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--cor-texto-fraca); margin: 0.3rem 0 1.5rem; font-weight: 600;
}
.caixa-login .form-group { text-align: left; }
.caixa-login .btn { width: 100%; justify-content: center; }
.caixa-login .alert { text-align: left; font-size: 0.88rem; }