:root {
    --verde: #0f6b4c;
    --azul-marinho: #0b3350;
    --areia: #f7f5f0;
    --verde-claro: #e7f2ed;
    --ambar: #b8863c;
    --texto: #1c2a2f;
    --texto-suave: #52655f;
    --borda: #d9d4c7;

    --fonte-titulo: 'Fraunces', Georgia, serif;
    --fonte-corpo: 'Inter', system-ui, sans-serif;
    --fonte-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--areia);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; color: var(--azul-marinho); margin: 0 0 .5rem; }

a { color: var(--verde); }

/* Header */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--azul-marinho);
    color: #fff;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.brand-mark {
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--verde);
    font-family: var(--fonte-titulo);
    font-weight: 600;
}
.brand-text strong { display: block; font-size: 1rem; }
.brand-text small { font-family: var(--fonte-mono); font-size: .7rem; opacity: .75; letter-spacing: .02em; }
.site-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a, .link-button { color: #fff; text-decoration: none; font-size: .9rem; }
.site-nav .nav-operacional { padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.5); border-radius: .35rem; }
.link-button { background: none; border: none; cursor: pointer; font-family: var(--fonte-corpo); padding: 0; }
.nav-user { font-family: var(--fonte-mono); font-size: .8rem; opacity: .85; margin-right: 1rem; }
.nav-form { display: inline; }

/* Hero with radar sweep */
.hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 2rem;
    background: var(--verde-claro);
    border-bottom: 1px solid var(--borda);
}
.hero-content { position: relative; z-index: 1; max-width: 40rem; }
.hero h1 { font-size: 2.25rem; }
.hero p { color: var(--texto-suave); font-size: 1.05rem; }

.radar {
    position: absolute;
    top: 50%; right: -6rem;
    width: 26rem; height: 26rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, transparent 0, transparent 2.4rem, rgba(15,107,76,.12) 2.4rem, rgba(15,107,76,.12) 2.45rem);
    opacity: .8;
}
.radar::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(15,107,76,.35), transparent 35%);
    animation: radar-sweep 6s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar::before { animation: none; } }

/* Panel grid */
.paineis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    padding: 2.5rem 2rem;
    max-width: 72rem;
    margin: 0 auto;
}
.painel-card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: .5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.painel-sigla { font-family: var(--fonte-mono); font-size: .75rem; color: var(--verde); letter-spacing: .05em; }
.painel-card h3 { font-size: 1.1rem; }
.painel-card p { color: var(--texto-suave); font-size: .9rem; flex-grow: 1; }
.status-tag {
    align-self: flex-start;
    font-family: var(--fonte-mono);
    font-size: .7rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    letter-spacing: .03em;
}
.status-disponivel { background: var(--verde-claro); color: var(--verde); }
.status-em_desenvolvimento { background: #f6ecd9; color: var(--ambar); }
.status-pronto_revisao { background: #f6ecd9; color: #77551f; }
.status-planejado { background: #eceeea; color: var(--texto-suave); }
.painel-link {
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}
.painel-link-inativo { color: var(--texto-suave); cursor: default; }
.product-note { color: var(--texto-suave); font-size: .8rem; }

/* Variantes controladas da HOME: os grupos são definidos por tipografia e espaço. */
.grouped-home {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}
.product-group { margin: 0 0 2.75rem; }
.product-group:last-child { margin-bottom: 0; }
.product-group-heading { max-width: 43rem; margin-bottom: 1rem; }
.product-group-heading h2 {
    font-family: var(--fonte-mono);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--verde);
}
.product-group-heading p { margin: .25rem 0 0; color: var(--texto-suave); font-size: .9rem; }
.product-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 20rem));
    gap: 1.25rem;
    align-items: stretch;
}
.grouped-home .painel-card { min-width: 0; }
.grouped-home .operational-entry { margin: 0; max-width: 68rem; }
.grouped-home .operational-entry h3 { font-size: 1.1rem; }

.grouped-home--grouped_compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 3rem;
}
.grouped-home--grouped_compact .product-group { margin: 0; min-width: 0; }
.grouped-home--grouped_compact .product-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.grouped-home--grouped_compact .painel-card { padding: 1.25rem; }
.grouped-home--grouped_compact .product-group--operational .operational-entry {
    height: calc(100% - 3.75rem);
}

.operational-entry {
    max-width: 68rem;
    margin: 0 auto 2.5rem;
    padding: 1.5rem 2rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--verde);
    border-radius: .5rem;
}
.operational-eyebrow { font-family: var(--fonte-mono); font-size: .72rem; color: var(--verde); text-transform: uppercase; letter-spacing: .05em; }
.operational-entry-content { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: .65rem; }
.operational-entry-content p, .operational-source { color: var(--texto-suave); }
.operational-context { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.operational-context span { padding: .2rem .55rem; background: var(--verde-claro); color: var(--verde); border-radius: 999px; font-family: var(--fonte-mono); font-size: .72rem; }
.operational-source { margin: 1rem 0 0; font-size: .8rem; }

.container-narrow { max-width: 28rem; margin: 3rem auto; padding: 0 1.5rem; }
.container-largo { max-width: 72rem; margin: 0 auto; padding: 2rem; }
.card { background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 2rem; }
form p { margin: 0 0 1rem; }
label { display: block; font-size: .85rem; margin-bottom: .3rem; color: var(--texto-suave); }
select {
    padding: .55rem .7rem;
    border: 1px solid var(--borda); border-radius: .35rem;
    font-family: var(--fonte-corpo); font-size: .95rem;
    background: #fff;
}
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 1.5rem 0; }
.filtros label { margin-bottom: 0; }
.grafico-card { background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 1.25rem; margin-bottom: 1.5rem; }
.aviso-vazio { color: var(--texto-suave); font-size: .9rem; padding: 1rem 0; }
table.tabela-simples { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tabela-simples th, table.tabela-simples td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--borda); }

/* PGSSP: navegação por abas */
.pgssp-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin: 1.5rem 0 2rem; flex-wrap: wrap; }
.pgssp-tabs a { padding: .6rem 1rem; text-decoration: none; color: var(--texto-suave); font-size: .9rem; border-bottom: 2px solid transparent; }
.pgssp-tabs a.ativa { color: var(--azul-marinho); border-bottom-color: var(--verde); font-weight: 600; }

/* PGSSP: cards de KPI e do índice de avanço */
.cartoes-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.cartao-kpi { background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 1rem 1.25rem; }
.cartao-kpi .valor { font-family: var(--fonte-titulo); font-size: 1.8rem; color: var(--azul-marinho); display: block; }
.cartao-kpi .rotulo { font-size: .8rem; color: var(--texto-suave); }

.cartoes-indice { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 48rem) { .cartoes-indice { grid-template-columns: 1fr; } }
.indice-card { background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 1.5rem; }
.indice-card .indice-rotulo { font-size: .8rem; color: var(--texto-suave); }
.indice-card .indice-valor { font-family: var(--fonte-titulo); font-size: 2.4rem; color: var(--azul-marinho); }
.indice-card .indice-total { color: var(--texto-suave); font-size: 1.1rem; }
.indice-progresso { background: var(--borda); border-radius: 999px; height: .5rem; margin-top: .75rem; overflow: hidden; }
.indice-progresso span { display: block; height: 100%; background: var(--verde); }

.cobertura { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; font-size: .8rem; color: var(--texto-suave); }
.cobertura-chip { background: var(--verde-claro); color: var(--verde); border-radius: 999px; padding: .2rem .6rem; font-family: var(--fonte-mono); font-size: .75rem; }
.leitura-rapida { background: var(--areia); border-left: 3px solid var(--ambar); padding: .75rem 1rem; font-size: .85rem; margin: 1rem 0; border-radius: 0 .35rem .35rem 0; }

/* PGSSP: semáforo e tabela de síntese */
.semaforo { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; }
.semaforo-atingido { background: var(--verde); }
.semaforo-em_progresso { background: var(--ambar); }
.semaforo-critico { background: #922; }
.semaforo-sem_dados { background: var(--borda); }

.executive-summary { background: var(--verde-claro); border-radius: .35rem; padding: .75rem 1rem; font-size: .9rem; margin: 1rem 0; }

/* Selo de status pela classificação de 5 categorias (paleta.classificar) */
.badge-status { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge-meta_atingida { background: var(--verde); color: #fff; }
.badge-desempenho_intermediario { background: var(--ambar); color: #fff; }
.badge-situacao_critica { background: #922; color: #fff; }
.badge-sem_dado { background: var(--texto-suave); color: #fff; }
.badge-nao_aplicavel { background: var(--borda); color: var(--texto); }

/* Cabeçalho do indicador: breadcrumb, KPIs, banner */
.breadcrumb { font-family: var(--fonte-mono); font-size: .78rem; color: var(--texto-suave); margin-bottom: .5rem; }
.breadcrumb a { color: var(--texto-suave); }
.cabecalho-indicador { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin: 1rem 0; flex-wrap: wrap; }
.cabecalho-indicador h1 { margin-bottom: .25rem; }
.subtitulo-indicador { color: var(--texto-suave); font-size: .95rem; }
.fonte-recorte { font-family: var(--fonte-mono); font-size: .78rem; color: var(--texto-suave); margin-top: .35rem; }
.cartoes-kpi-indicador { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cartao-kpi-indicador { background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 1.1rem 1.25rem; }
.cartao-kpi-indicador .rotulo { font-size: .78rem; color: var(--texto-suave); margin-bottom: .3rem; }
.cartao-kpi-indicador .valor { font-family: var(--fonte-titulo); font-size: 1.5rem; color: var(--azul-marinho); display: block; }
.cartao-kpi-indicador .detalhe { font-size: .78rem; color: var(--texto-suave); margin-top: .2rem; }
.banner-interpretativo { background: var(--verde-claro); border-left: 3px solid var(--verde); padding: .85rem 1.1rem; font-size: .9rem; margin: 1.5rem 0; border-radius: 0 .35rem .35rem 0; }

/* Porta discreta para o aprofundamento operacional (mensal) do mesmo
   indicador — junto ao resultado/identificação, antes de qualquer
   gráfico estratégico. Não é um card novo: uma linha só. */
.visao-operacional-topo { margin: -.75rem 0 1.75rem; font-size: .88rem; }
.visao-operacional-topo a {
    background: var(--verde-claro); color: var(--verde); border-radius: 999px;
    padding: .3rem .85rem; font-weight: 600; text-decoration: none;
}
.visao-operacional-topo a:hover { text-decoration: underline; }
.visao-operacional-topo .aux { color: var(--texto-suave); margin-left: .6rem; font-size: .82rem; }

/* Cards do catálogo de indicadores */
.grade-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.card-catalogo {
    background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 1.25rem;
    border-top: 3px solid var(--acento, var(--borda)); text-decoration: none; color: var(--texto);
    display: block;
}
.card-catalogo:hover { border-color: var(--verde); }
.card-catalogo .codigo { font-family: var(--fonte-mono); font-size: .75rem; color: var(--texto-suave); }
.card-catalogo h3 { font-size: 1rem; margin: .3rem 0 .75rem; }
.card-catalogo .grid-valores { display: flex; gap: 1.5rem; margin-bottom: .75rem; }
.card-catalogo .grid-valores .rotulo { font-size: .72rem; color: var(--texto-suave); }
.card-catalogo .grid-valores .valor { font-family: var(--fonte-titulo); font-size: 1.2rem; color: var(--azul-marinho); }

/* Mapas pequenos múltiplos */
.linha-mapas { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.linha-mapas > div { flex: 1 1 0; min-width: 15rem; }
.legenda-mapas { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; margin-bottom: 1rem; }
.legenda-mapas span { display: flex; align-items: center; gap: .35rem; }
.legenda-mapas i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.mapas-clicaveis .choroplethlocation { cursor: pointer; }

/* Destaque de UF selecionada no mapa, refletido nas tabelas relacionadas */
tr.linha-destacada { background: var(--verde-claro); box-shadow: inset 3px 0 0 var(--verde); }

table.sintese { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.sintese th { text-align: left; padding: .6rem .75rem; border-bottom: 2px solid var(--borda); cursor: pointer; user-select: none; white-space: nowrap; }
table.sintese th.ordenado-asc::after { content: " \25B2"; font-size: .7em; }
table.sintese th.ordenado-desc::after { content: " \25BC"; font-size: .7em; }
table.sintese td { padding: .6rem .75rem; border-bottom: 1px solid var(--borda); }
table.sintese tbody tr { cursor: pointer; }
table.sintese tbody tr:hover { background: var(--verde-claro); }
table.sintese tbody tr.linha-atingida { background: #f3faf6; }

.barra-ferramentas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 1rem 0; }
.barra-ferramentas input[type="search"] { max-width: 22rem; }
input[type="text"], input[type="password"], input[type="file"] {
    width: 100%; padding: .55rem .7rem;
    border: 1px solid var(--borda); border-radius: .35rem;
    font-family: var(--fonte-corpo); font-size: .95rem;
}
button, .button {
    background: var(--verde); color: #fff; border: none;
    padding: .6rem 1.2rem; border-radius: .35rem;
    font-family: var(--fonte-corpo); font-weight: 500; font-size: .9rem;
    cursor: pointer; text-decoration: none; display: inline-block;
}

.messages { list-style: none; padding: 0; margin: 1rem 2rem 0; }
.message { padding: .6rem 1rem; border-radius: .35rem; font-size: .9rem; margin-bottom: .5rem; }
.message-success { background: var(--verde-claro); color: var(--verde); }
.message-error { background: #f8e2e2; color: #922; }

.site-footer {
    padding: 1.5rem 2rem;
    text-align: center;
    font-family: var(--fonte-mono);
    font-size: .75rem;
    color: var(--texto-suave);
}

.demo-environment {
    align-items: center;
    background: #fff4cf;
    border-bottom: 1px solid #d5a72c;
    color: #5d4300;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: center;
    padding: .65rem 1rem;
    text-align: center;
}

@media (max-width: 36rem) {
    .site-header { padding: .75rem 1rem; align-items: flex-start; }
    .brand-text small { display: none; }
    .site-nav { gap: .5rem; }
    .operational-entry { margin: 0 1rem 2rem; padding: 1.25rem; }
    .operational-entry-content { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .nav-user { display: none; }
    .site-footer { padding: 1rem; }
    .hero { padding: 3rem 1rem; }
    .hero h1 { font-size: 2rem; }
    .paineis-grid, .grouped-home { padding: 2rem 1rem; }
    .product-group-grid,
    .grouped-home--grouped_compact .product-group-grid { grid-template-columns: minmax(0, 1fr); }
    .grouped-home--grouped_compact { gap: 2.5rem; }
}

@media (max-width: 64rem) {
    .grouped-home--grouped_compact { grid-template-columns: minmax(0, 1fr); }
    .grouped-home--grouped_compact .product-group-grid {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 20rem));
    }
}

@media (max-width: 36rem) {
    .grouped-home--grouped_compact .product-group-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.container-largo section { margin-bottom: 2rem; }
.container-largo section h2 { font-size: 1.15rem; color: var(--azul-marinho); margin-bottom: .5rem; }
.ficha-tecnica { display: grid; gap: .75rem; }
.ficha-tecnica div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.ficha-tecnica dt { color: var(--texto-suave); font-size: .82rem; }
.ficha-tecnica dd { margin: 0; }
@media (max-width: 40rem) { .ficha-tecnica div { grid-template-columns: 1fr; gap: .15rem; } }

.hero-subtitle { font-size: .88rem; color: var(--texto-suave); margin-top: -.5rem; }

/* Visão operacional de regularidade (continuação visual do PGSSP) */
.filtros-regularidade select { min-width: 9rem; max-width: 18rem; }
.aviso-denominador {
    background: #fff; border: 1px solid var(--borda); border-left: 3px solid var(--ambar);
    border-radius: 0 .4rem .4rem 0; color: var(--texto-suave); font-size: .86rem;
    margin: 1rem 0 1.5rem; padding: .75rem 1rem;
}
.aviso-denominador strong { color: var(--texto); }
.aviso-denominador details { margin-top: .35rem; }
.aviso-denominador summary { color: var(--verde); cursor: pointer; }
.aviso-denominador details p { margin: .5rem 0 0; }
.aviso-denominador-vigente, .aviso-denominador-validado { border-left-color: var(--verde); }
.mensagem-sem-denominador { border-left: 3px solid var(--ambar); margin-top: 1.5rem; }
.mensagem-sem-denominador h2 { font-size: 1.15rem; }
.cartoes-regularidade { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.grade-graficos-regularidade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.grade-graficos-regularidade .grafico-card { min-width: 0; }
.grafico-responsivo { min-height: 24rem; width: 100%; }
.cabecalho-tabela-operacional { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.cabecalho-tabela-operacional .button { flex: 0 0 auto; }
.tabela-operacional-wrapper, .heatmap-scroll { max-width: 100%; overflow-x: auto; }
.tabela-operacional { min-width: 78rem; }
.tabela-operacional th { background: #fff; position: sticky; top: 0; white-space: nowrap; z-index: 1; }
.tabela-operacional td { vertical-align: top; }
.tabela-operacional .cnes { font-family: var(--fonte-mono); white-space: nowrap; }
.heatmap-scroll > div { min-width: 48rem; }

@media (max-width: 56rem) {
    .grade-graficos-regularidade { grid-template-columns: minmax(0, 1fr); }
    .cabecalho-tabela-operacional { align-items: stretch; flex-direction: column; }
    .cabecalho-tabela-operacional .button { align-self: flex-start; }
}

@media (max-width: 36rem) {
    .container-largo.regularidade-operacional { padding: 1.25rem 1rem; }
    .filtros-regularidade { align-items: stretch; display: grid; grid-template-columns: 1fr; }
    .filtros-regularidade select, .filtros-regularidade button { max-width: none; width: 100%; }
    .grafico-responsivo { min-height: 20rem; }
}