/* ============================================================
   Importação de planilhas OCRA legadas

   Arquivo global, e não .razor.css, porque as mesmas classes são usadas pela página e pelos
   componentes de cada etapa — CSS isolado do Blazor não atravessa a fronteira do componente.

   Cores e raios saem dos tokens de app.css. Nada de valor de cor solto aqui: a paleta da marca
   muda num lugar só.
   ============================================================ */

.importacao-pagina {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ---------- Cabeçalho ---------- */

.importacao-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.importacao-cabecalho h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 0.25rem;
}

.importacao-cabecalho p {
    margin: 0;
    color: var(--dashboard-text-secondary);
    max-width: 52ch;
}

/* ---------- Passo a passo ---------- */

.passos-importacao {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.passo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 1 180px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius-md);
    background: #ffffff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.passo-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--dashboard-surface-muted);
    color: var(--dashboard-text-secondary);
    font-weight: 700;
    font-size: 0.85rem;
}

.passo-marca .material-icons {
    font-size: 1rem;
}

.passo-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.passo-titulo {
    font-weight: 600;
    color: var(--dashboard-text-primary);
    font-size: 0.9rem;
}

.passo-descricao {
    font-size: 0.78rem;
    color: var(--dashboard-text-secondary);
}

.passo.atual {
    border-color: var(--brand-primary);
    background: var(--brand-primary-lt);
}

.passo.atual .passo-marca {
    background: var(--brand-primary);
    color: #ffffff;
}

.passo.atual .passo-titulo {
    color: var(--brand-primary);
}

.passo.concluido .passo-marca {
    background: var(--brand-secondary);
    color: #ffffff;
}

.passo.pendente {
    opacity: 0.6;
}

/* ---------- Estado ocupado ---------- */

.importacao-ocupado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-card-radius-lg);
    box-shadow: var(--dashboard-card-shadow-sm);
}

.importacao-ocupado p {
    margin: 0;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.importacao-ocupado-arquivo {
    font-size: 0.85rem;
    color: var(--dashboard-text-secondary);
    word-break: break-all;
    text-align: center;
}

/* ---------- Erro de comunicação ---------- */

.importacao-erro {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--dashboard-radius-md);
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

/* ---------- Etapas ---------- */

.etapa {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-card-radius-lg);
    box-shadow: var(--dashboard-card-shadow-sm);
}

.etapa-subtitulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin: 0;
}

.etapa-acoes {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dashboard-border);
}

.etapa-nota {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--dashboard-radius-md);
    background: var(--dashboard-surface-muted);
    color: var(--dashboard-text-secondary);
}

.etapa-nota .material-icons {
    color: var(--brand-primary);
    flex: 0 0 auto;
}

.etapa-nota p {
    margin: 0 0 0.5rem;
}

.etapa-nota p:last-child {
    margin-bottom: 0;
}

/* ---------- Passo 1: aviso da regra do sistema ---------- */

/* Informativo, não alerta: a planilha traz as respostas e o sistema calcula, como na tela. */
.aviso-regra-sistema {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--dashboard-radius-md);
    background: var(--dashboard-surface-muted);
    color: var(--dashboard-text-primary);
}

.aviso-regra-sistema .material-icons {
    color: var(--brand-primary);
    flex: 0 0 auto;
}

.aviso-regra-sistema p {
    margin: 0.35rem 0 0.75rem;
}

.aviso-regra-sistema-confirmacao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* ---------- Passo 1: área de envio ---------- */

.area-envio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2.75rem 1.5rem;
    border: 2px dashed #cbd5e1;
    border-radius: var(--dashboard-card-radius-lg);
    background: var(--dashboard-surface-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: center;
}

.area-envio:hover,
.area-envio:focus-within {
    border-color: var(--brand-primary);
    background: var(--brand-primary-lt);
}

.area-envio-icone {
    font-size: 2.5rem;
    color: var(--brand-primary);
}

.area-envio-titulo {
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.area-envio-ajuda {
    font-size: 0.85rem;
    color: var(--dashboard-text-secondary);
}

/* ---------- Veredito ---------- */

.veredito {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-radius: var(--dashboard-radius-md);
    border: 1px solid transparent;
}

.veredito div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.veredito span:last-child {
    font-size: 0.85rem;
    word-break: break-word;
}

.veredito .material-icons {
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.veredito-aprovado {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.veredito-reprovado {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ---------- Ocorrências ---------- */

.ocorrencias {
    border-radius: var(--dashboard-radius-md);
    border: 1px solid transparent;
    overflow: hidden;
}

.ocorrencias-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
}

.ocorrencias-contagem {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}

.ocorrencias-lista {
    margin: 0;
    padding: 0 1rem 1rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ocorrencia-mensagem {
    font-weight: 600;
}

.ocorrencia-correcao {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.88rem;
}

.ocorrencia-correcao .material-icons {
    font-size: 1rem;
    margin-top: 0.1rem;
}

.ocorrencia-onde {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    opacity: 0.8;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.ocorrencias-erro {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.ocorrencias-aviso {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* ---------- Blocos informativos da conferência ---------- */

.modulos-pendentes,
.reimportacao,
.sugestao-planilha {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--dashboard-radius-md);
    background: var(--dashboard-surface-muted);
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-text-secondary);
}

.modulos-pendentes .material-icons,
.reimportacao .material-icons,
.sugestao-planilha .material-icons {
    color: var(--brand-primary);
    flex: 0 0 auto;
}

.modulos-pendentes strong,
.reimportacao strong,
.sugestao-planilha strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--dashboard-text-primary);
}

.modulos-pendentes p,
.reimportacao p {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
}

.reimportacao ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
}

.sugestao-planilha dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0;
    font-size: 0.9rem;
}

.sugestao-planilha dt {
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.sugestao-planilha dd {
    margin: 0;
}

.sugestao-avisos {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

/* ---------- Campos identificados ---------- */

.campos-identificados {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.campo-grupo {
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius-md);
    background: #ffffff;
}

.campo-grupo > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    list-style: none;
}

.campo-grupo > summary::-webkit-details-marker {
    display: none;
}

.campo-grupo > summary::after {
    content: "expand_more";
    font-family: "Material Icons";
    color: var(--dashboard-text-secondary);
    transition: transform 0.15s ease;
}

.campo-grupo[open] > summary::after {
    transform: rotate(180deg);
}

.campo-grupo-contagem {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--dashboard-text-secondary);
}

.campo-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.campo-tabela th,
.campo-tabela td {
    padding: 0.45rem 1rem;
    text-align: left;
    border-top: 1px solid var(--dashboard-border);
    vertical-align: top;
}

.campo-tabela th[scope="row"] {
    width: 38%;
    font-weight: 500;
    color: var(--dashboard-text-secondary);
}

.campo-origem {
    width: 22%;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.78rem;
    color: var(--dashboard-text-secondary);
    white-space: nowrap;
}

.campo-sem-valor {
    font-style: italic;
    color: #94a3b8;
}

.campo-tabela tr.campo-vazio {
    background: var(--dashboard-surface-muted);
}

/* ---------- Passo 3: destino ---------- */

.campos-destino {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.campo-largo {
    grid-column: 1 / -1;
}

.campo > label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--dashboard-text-primary);
}

.campo .obrigatorio {
    color: #dc2626;
}

.campo-dica {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--dashboard-text-secondary);
}

.campo-dica .material-icons {
    font-size: 0.95rem;
}

.campo-dica-sugerida {
    color: var(--brand-primary);
}

.campo-dica-alerta {
    color: #b45309;
}

/* ---------- Passo 4: resultado ---------- */

.resultado-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.numero {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem;
    border-radius: var(--dashboard-radius-md);
    background: var(--dashboard-surface-muted);
    border: 1px solid var(--dashboard-border);
}

.numero-rotulo {
    font-size: 0.8rem;
    color: var(--dashboard-text-secondary);
}

.numero-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.resultado-bloco {
    padding: 1rem;
    border-radius: var(--dashboard-radius-md);
    border: 1px solid var(--dashboard-border);
    background: #ffffff;
}

.resultado-bloco > strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dashboard-text-primary);
}

.resultado-bloco p {
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
    color: var(--dashboard-text-secondary);
}

.resultado-bloco ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

.resultado-bloco-atencao {
    border-color: #fde68a;
    background: #fffbeb;
}

.lista-modulos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.lista-modulos li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.lista-modulos .material-icons {
    font-size: 1rem;
    color: var(--brand-secondary);
}

.tabela-divergencias {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.tabela-divergencias th,
.tabela-divergencias td {
    padding: 0.45rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--dashboard-border);
}

.tabela-divergencias thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dashboard-text-secondary);
}

.tabela-divergencias td {
    font-variant-numeric: tabular-nums;
}

/* Previa na conferencia: a linha que diverge precisa saltar, as outras ficam discretas. */
.tabela-previa .linha-divergente th,
.tabela-previa .linha-divergente td {
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
}

.tabela-previa .linha-total th,
.tabela-previa .linha-total td {
    border-top: 2px solid var(--dashboard-border);
    font-weight: 700;
}

.nota-indice-global {
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid #d97706;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.85rem;
}

.lista-detalhes-divergencia {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: #92400e;
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 640px) {
    .importacao-pagina {
        padding: 1rem 0.75rem 2rem;
    }

    .etapa {
        padding: 1rem;
    }

    .etapa-acoes {
        flex-direction: column-reverse;
    }

    .etapa-acoes > * {
        width: 100%;
    }

    .campo-tabela th[scope="row"] {
        width: 45%;
    }

    .campo-origem {
        display: none;
    }
}

/* ============================================================
   Painel de importações
   ============================================================ */

.painel-importacoes {
    max-width: 1240px;
}

.painel-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-card-radius-lg);
    box-shadow: var(--dashboard-card-shadow-sm);
}

.painel-filtros-acoes {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ---------- Indicadores ---------- */

.painel-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.indicador {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-left: 3px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius-md);
    box-shadow: var(--dashboard-card-shadow-sm);
}

.indicador-rotulo {
    font-size: 0.78rem;
    color: var(--dashboard-text-secondary);
    line-height: 1.2;
}

.indicador-valor {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    font-variant-numeric: tabular-nums;
}

.indicador-bom {
    border-left-color: var(--brand-secondary);
}

.indicador-bom .indicador-valor {
    color: #0f766e;
}

.indicador-ruim {
    border-left-color: #fca5a5;
}

.indicador-ruim .indicador-valor {
    color: #b91c1c;
}

.indicador-atencao {
    border-left-color: var(--brand-accent);
}

.indicador-atencao .indicador-valor {
    color: #b45309;
}

/* ---------- Blocos ---------- */

.painel-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.painel-bloco {
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-card-radius-lg);
    box-shadow: var(--dashboard-card-shadow-sm);
}

.painel-bloco h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin: 0 0 1rem;
}

.painel-bloco-atencao {
    border-color: #fde68a;
    background: #fffdf5;
}

.painel-nota {
    margin: -0.5rem 0 1rem;
    font-size: 0.88rem;
    color: var(--dashboard-text-secondary);
}

.painel-vazio {
    margin: 0;
    color: var(--dashboard-text-secondary);
    font-style: italic;
}

/* ---------- Distribuição em barras ---------- */

.distribuicao {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.distribuicao-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.distribuicao-rotulo {
    font-size: 0.88rem;
    color: var(--dashboard-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.distribuicao-quantidade {
    font-weight: 700;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.distribuicao-trilho {
    height: 8px;
    border-radius: 999px;
    background: var(--dashboard-surface-muted);
    overflow: hidden;
}

.distribuicao-barra {
    height: 100%;
    border-radius: 999px;
    background: var(--brand-primary);
    min-width: 2px;
}

.distribuicao-detalhe {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--dashboard-text-secondary);
}

/* ---------- Tabela de importações ---------- */

/* position: relative contem o rotulo visualmente oculto da coluna de acoes (position:
   absolute): sem isso ele escapa da rolagem da tabela e alarga a pagina inteira. */
.tabela-rolagem {
    position: relative;
    overflow-x: auto;
}

.tabela-importacoes {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.tabela-importacoes th,
.tabela-importacoes td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--dashboard-border);
    white-space: nowrap;
}

.tabela-importacoes thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dashboard-text-secondary);
    border-bottom-width: 2px;
}

.celula-arquivo {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.celula-versao,
.celula-secundaria {
    display: block;
    font-size: 0.76rem;
    color: var(--dashboard-text-secondary);
}

.celula-vazia {
    color: #cbd5e1;
}

.celula-motivo {
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b91c1c;
}

.celula-acoes {
    text-align: right;
}

/* Divergencias no painel: recolhidas por padrao, para a tabela nao crescer com cada linha. */
.celula-divergencias summary {
    cursor: pointer;
    color: #92400e;
    font-weight: 600;
    white-space: nowrap;
}

.celula-divergencias ul {
    margin: 0.35rem 0 0;
    padding-left: 1rem;
    font-size: 0.78rem;
    color: #92400e;
}

/* Marcas de situação: cada uma precisa ficar distinguível de relance, e "Reprovada" precisa
   parecer diferente de "Falha do sistema" — são problemas de naturezas diferentes. */
.marca-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--dashboard-surface-muted);
    color: var(--dashboard-text-secondary);
}

.marca-importada {
    background: #dcfce7;
    color: #166534;
}

.marca-validada {
    background: var(--brand-primary-lt);
    color: var(--brand-primary);
}

.marca-reprovada {
    background: #fee2e2;
    color: #991b1b;
}

.marca-falhou {
    background: #f3e8ff;
    color: #6b21a8;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Índice parcial: o número existe, mas não é resultado final. Precisa parecer diferente de
   um indicador fechado, senão vira número de laudo na cabeça de quem lê. */
.numero-parcial {
    border-color: #fde68a;
    background: #fffbeb;
}

.numero-parcial .numero-valor {
    color: #b45309;
}

.numero-nota {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--dashboard-text-secondary);
}

/* Sem a confirmação da regra do sistema, a área não abre o seletor de arquivo. */
.area-envio-bloqueada {
    cursor: not-allowed;
    opacity: 0.6;
}

.area-envio-bloqueada:hover,
.area-envio-bloqueada:focus-within {
    border-color: #cbd5e1;
    background: var(--dashboard-surface-muted);
}

/* Durante a leitura a área continua montada — o input dentro dela ainda está sendo lido —
   mas deixa de convidar ao clique. */
.area-envio-ocupada {
    cursor: progress;
    border-style: solid;
    border-color: var(--brand-primary);
    background: var(--brand-primary-lt);
}

/* ---------- Quadro de módulos da planilha ---------- */

.quadro-modulos {
    padding: 1rem;
    border-radius: var(--dashboard-radius-md);
    border: 1px solid var(--dashboard-border);
    background: #ffffff;
}

.quadro-modulos > strong {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--dashboard-text-primary);
}

.quadro-modulos p {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--dashboard-text-secondary);
}

.tabela-modulos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

.tabela-modulos th,
.tabela-modulos td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--dashboard-border);
}

.tabela-modulos th[scope="row"] {
    width: 34%;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.modulo-onde {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.74rem;
    color: #991b1b;
}

/* Impeditivo precisa saltar: e a linha que explica por que a planilha nao entra. */
.modulo-impeditivo {
    background: #fef2f2;
}

.modulo-impeditivo th[scope="row"] {
    color: #991b1b;
}

.modulo-ok th[scope="row"] {
    color: #166534;
}

.modulo-vazio {
    color: var(--dashboard-text-secondary);
}