/* =========================================================================
   assets/20_nr_numeracao.css — modulo Numeracao de Relatorios
   Todo seletor nasce em .nr-app. assets/ e servida em toda rota: quem isola
   o pacote e o root, nao o nome nem a ordem do arquivo.

   Os tokens abaixo vieram do bloco de estilo que morava no index_string do
   app de pagina unica. Eles sao do PACOTE, nao do design system: o bloco foi
   movido para ca inteiro, nunca apagado.
   ========================================================================= */

.nr-app {
    --nr-c-superficie:     #ffffff;
    --nr-c-superficie-2:   #f8fafc;
    --nr-c-zebra:          #f7f9fc;
    --nr-c-tinta:          #162033;
    --nr-c-texto:          #475569;
    --nr-c-suave:          #64748b;
    --nr-c-rotulo:         #334155;

    --nr-c-borda:          #d6dee8;
    --nr-c-borda-campo:    #cbd5e1;
    --nr-c-borda-botao:    #aab4c2;
    --nr-c-borda-clara:    #e2e8f0;
    --nr-c-borda-tenue:    #eef2f7;

    --nr-c-acento:         #0f766e;
    --nr-c-acento-escuro:  #115e59;
    --nr-c-perigo:         #b91c1c;
    --nr-c-perigo-escuro:  #991b1b;

    --nr-c-previa-fundo:   #ecfeff;
    --nr-c-previa-borda:   #a5f3fc;
    --nr-c-previa-tinta:   #164e63;
    --nr-c-opcao-fundo:    #f0fdfa;
    --nr-c-opcao-borda:    #99f6e4;

    --nr-r-sm:             6px;
    --nr-r-md:             8px;

    --nr-s-1:              0 1px 2px rgba(15, 23, 42, .06);
    --nr-s-modal:          0 22px 60px rgba(15, 23, 42, .28);
    --nr-overlay:          rgba(15, 23, 42, .42);

    --nr-l-modal:          min(1120px, 96vw);
    --nr-l-lateral:        320px;

    background: var(--paper);
    color: var(--nr-c-tinta);
    min-height: 100vh;
    display: block;
}

/* --- Tipografia do pacote ---------------------------------------------- */

.nr-app h1 { margin: 0; font-size: 28px; letter-spacing: 0; }
.nr-app h2 { margin: 18px 0 12px; font-size: 18px; }
.nr-app p  { margin: 5px 0 14px; color: var(--nr-c-suave); }

/* --- Topo e abas -------------------------------------------------------- */

.nr-app .nr-topo {
    background: var(--nr-c-superficie);
    border-bottom: 1px solid var(--nr-c-borda);
    padding: 18px 28px 0;
}

.nr-app .nr-abas {
    background: var(--nr-c-superficie);
    border-bottom: 1px solid var(--nr-c-borda);
    padding: 0 24px;
}

.nr-app .nr-aba {
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: var(--nr-c-superficie) !important;
    padding: 13px 18px !important;
    font-weight: 800;
    color: var(--nr-c-suave);
}

.nr-app .nr-aba--ativa {
    color: var(--nr-c-acento) !important;
    border-bottom-color: var(--nr-c-acento) !important;
}

.nr-app .nr-conteudo { padding: 22px 28px 40px; }

/* --- Barras, grades e paineis ------------------------------------------ */

.nr-app .nr-barra-acoes { display: flex; gap: 10px; margin-bottom: 14px; }

.nr-app .nr-barra-busca { display: flex; gap: 10px; margin-bottom: 14px; }
.nr-app .nr-barra-busca input { max-width: 620px; }

.nr-app .nr-grade-filtros {
    display: grid;
    grid-template-columns: 140px 1fr 1fr 1fr;
    gap: 12px;
    background: var(--nr-c-superficie);
    border: 1px solid var(--nr-c-borda);
    border-radius: var(--nr-r-md);
    padding: 14px;
    margin-bottom: 14px;
}

.nr-app .nr-linha-indicadores {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.nr-app .nr-indicador {
    background: var(--nr-c-superficie);
    border: 1px solid var(--nr-c-borda);
    border-radius: var(--nr-r-md);
    padding: 13px;
}

.nr-app .nr-indicador__rotulo {
    color: var(--nr-c-suave);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.nr-app .nr-indicador__valor { font-size: 24px; font-weight: 800; margin-top: 4px; }

.nr-app .nr-grade-graficos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.nr-app .nr-painel-grafico {
    background: var(--nr-c-superficie);
    border: 1px solid var(--nr-c-borda);
    border-radius: var(--nr-r-md);
    padding: 8px;
    min-width: 0;
}

/* --- Campos e controles ------------------------------------------------- */

.nr-app .nr-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nr-app .nr-campo--largo { grid-column: span 2; }
.nr-app .nr-campo--cheio { grid-column: 1 / -1; }

.nr-app .nr-campo__rotulo {
    font-size: 12px;
    font-weight: 800;
    color: var(--nr-c-rotulo);
    text-transform: uppercase;
}

.nr-app input,
.nr-app textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--nr-c-borda-campo);
    border-radius: var(--nr-r-sm);
    padding: 8px 10px;
    font: inherit;
}

.nr-app textarea { resize: vertical; }

.nr-app .Select-control {
    border-radius: var(--nr-r-sm) !important;
    border-color: var(--nr-c-borda-campo) !important;
}

.nr-app .nr-botao {
    min-height: 38px;
    border: 1px solid var(--nr-c-borda-botao);
    background: var(--nr-c-superficie);
    border-radius: var(--nr-r-sm);
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--nr-s-1);
}

.nr-app .nr-botao:hover { border-color: var(--nr-c-acento); color: var(--nr-c-acento); }

.nr-app .nr-botao--primario {
    background: var(--nr-c-acento);
    color: var(--nr-c-superficie);
    border-color: var(--nr-c-acento);
}

.nr-app .nr-botao--primario:hover {
    background: var(--nr-c-acento-escuro);
    color: var(--nr-c-superficie);
}

.nr-app .nr-botao--perigo {
    background: var(--nr-c-perigo);
    color: var(--nr-c-superficie);
    border-color: var(--nr-c-perigo);
}

.nr-app .nr-botao--perigo:hover {
    background: var(--nr-c-perigo-escuro);
    color: var(--nr-c-superficie);
}

.nr-app .nr-mensagem { min-height: 20px; color: var(--nr-c-acento); font-weight: 800; }

/* --- Modal de geracao --------------------------------------------------- */

.nr-app .nr-geracao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--nr-l-lateral);
    gap: 18px;
    align-items: start;
}

.nr-app .nr-grade-formulario {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 14px;
    align-items: end;
}

.nr-app .nr-acoes { display: flex; align-items: center; gap: 14px; }

.nr-app .nr-previa {
    background: var(--nr-c-previa-fundo);
    border: 1px solid var(--nr-c-previa-borda);
    border-radius: var(--nr-r-md);
    padding: 12px;
    color: var(--nr-c-previa-tinta);
}

.nr-app .nr-opcao {
    background: var(--nr-c-opcao-fundo);
    border: 1px solid var(--nr-c-opcao-borda);
    border-radius: var(--nr-r-md);
    padding: 12px;
}

.nr-app .nr-opcao__rotulo {
    text-transform: none;
    font-weight: 800;
    color: var(--nr-c-acento-escuro);
}

.nr-app .nr-opcao__marcador { margin-right: 8px; transform: scale(1.1); }

.nr-app .nr-historico-lateral {
    border-left: 1px solid var(--nr-c-borda-clara);
    padding-left: 16px;
    position: sticky;
    top: 76px;
    align-self: stretch;
    min-height: 560px;
}

.nr-app .nr-titulo-discreto {
    font-size: 12px;
    color: var(--nr-c-suave);
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 8px;
}

.nr-app .nr-mini {
    display: grid;
    gap: 6px;
    max-height: calc(92vh - 180px);
    overflow: auto;
}

.nr-app .nr-mini__linha {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 12px;
    color: var(--nr-c-suave);
    border-bottom: 1px solid var(--nr-c-borda-tenue);
    padding-bottom: 6px;
}

.nr-app .nr-mini__linha code {
    color: var(--nr-c-acento);
    font-weight: 900;
    background: var(--nr-c-previa-fundo);
    border-radius: 4px;
    padding: 2px 5px;
}

/* --- Casca dos modais --------------------------------------------------- */

.nr-app .nr-modal {
    position: fixed;
    inset: 0;
    background: var(--nr-overlay);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.nr-app .nr-modal__cartao {
    background: var(--nr-c-superficie);
    border-radius: var(--nr-r-md);
    width: var(--nr-l-modal);
    max-height: 92vh;
    overflow: auto;
    box-shadow: var(--nr-s-modal);
}

.nr-app .nr-modal__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--nr-c-borda);
    position: sticky;
    top: 0;
    background: var(--nr-c-superficie);
    z-index: 2;
}

.nr-app .nr-modal__cabecalho h2 { margin: 0; }

.nr-app .nr-modal__corpo { padding: 18px; }

.nr-app .nr-secao-modal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
}

.nr-app .nr-grade-compacta {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}

/* --- Modal de resultado ------------------------------------------------- */

.nr-app .nr-resultado__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.nr-app .nr-resultado__resumo {
    display: grid;
    grid-template-columns: 160px 180px 1fr;
    gap: 10px;
    background: var(--nr-c-superficie-2);
    border: 1px solid var(--nr-c-borda-clara);
    border-radius: var(--nr-r-md);
    padding: 12px;
    margin: 10px 0 12px;
}

.nr-app .nr-resultado__resumo div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.nr-app .nr-resultado__resumo span {
    font-size: 11px;
    color: var(--nr-c-suave);
    text-transform: uppercase;
    font-weight: 900;
}

.nr-app .nr-resultado__resumo strong {
    font-size: 13px;
    color: var(--nr-c-tinta);
    overflow-wrap: anywhere;
}

.nr-app .nr-cartao-resultado {
    border: 1px solid var(--nr-c-borda-campo);
    background: var(--nr-c-superficie-2);
    border-radius: var(--nr-r-md);
    padding: 14px;
    position: relative;
}

.nr-app .nr-cartao-resultado__rotulo {
    font-size: 12px;
    color: var(--nr-c-suave);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.nr-app .nr-cartao-resultado__numero {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: var(--nr-c-acento);
    background: transparent;
    margin-bottom: 6px;
}

.nr-app .nr-cartao-resultado__meta { font-size: 12px; color: var(--nr-c-texto); }

.nr-app .nr-cartao-resultado__copiar { position: absolute; top: 12px; right: 12px; }

/* --- Tabelas ------------------------------------------------------------ */

.nr-app .dash-spreadsheet-container { background: var(--nr-c-superficie); }

.nr-app .dash-filter input { min-height: 0; }

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

@media (max-width: 900px) {
    .nr-app .nr-grade-filtros,
    .nr-app .nr-grade-graficos,
    .nr-app .nr-grade-formulario,
    .nr-app .nr-grade-compacta,
    .nr-app .nr-geracao { grid-template-columns: 1fr; }

    .nr-app .nr-historico-lateral {
        border-left: 0;
        border-top: 1px solid var(--nr-c-borda-clara);
        padding-left: 0;
        padding-top: 12px;
        position: static;
    }

    .nr-app .nr-mini__linha,
    .nr-app .nr-resultado__resumo { grid-template-columns: 1fr; }

    .nr-app .nr-campo--largo,
    .nr-app .nr-campo--cheio { grid-column: auto; }

    .nr-app .nr-linha-indicadores { grid-template-columns: repeat(2, 1fr); }
}