/* ============================================================
   Design system — tokens
   Paleta sóbria em azul; âmbar reservado a números de energia.
   ============================================================ */
:root {
    --co-papel: #FBFCFE;        /* fundo da página, branco frio */
    --co-ceu: #EBF1F8;          /* fundos de apoio */
    --co-tinta: #10263F;        /* texto principal, azul-marinho */
    --co-texto-2: #4A5D71;      /* texto secundário */
    --co-azul: #17548F;         /* primário: links e ações */
    --co-azul-escuro: #0C3157;  /* faixas escuras, hover */
    --co-borda: #D9E2EC;
    --co-ambar: #B4720E;        /* acento de dados (kWh, R$, %) */

    --fonte-titulo: "Archivo", sans-serif;
    --fonte-texto: "Instrument Sans", sans-serif;
    --fonte-dados: "IBM Plex Mono", monospace;

    --largura-max: 68rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--co-papel);
    color: var(--co-tinta);
    font-family: var(--fonte-texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    line-height: 1.15;
    margin: 0;
}

a { color: var(--co-azul); }

:focus-visible {
    outline: 3px solid var(--co-azul);
    outline-offset: 2px;
    border-radius: 2px;
}

.container {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ---------- Cabeçalho ---------- */
.topo {
    border-bottom: 1px solid var(--co-borda);
    background: var(--co-papel);
}

/* Envolve em telas estreitas: sem isto a marca mais o menu passam de 420px e
   é a página inteira que ganha rolagem horizontal, não só o cabeçalho. */
.topo-conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.marca {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--co-tinta);
    text-decoration: none;
}

.marca-ponto { color: var(--co-ambar); }

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-weight: 500;
}

.menu-item--breve {
    color: var(--co-texto-2);
    cursor: default;
}

.menu-item--breve small {
    font-family: var(--fonte-dados);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--co-ceu);
    border: 1px solid var(--co-borda);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    vertical-align: middle;
}

/* ---------- Hero ---------- */
.hero {
    padding: 5.5rem 0 4rem;
}

.hero-chapeu {
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--co-azul);
    margin: 0 0 1.25rem;
}

.hero-titulo {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    max-width: 22ch;
}

.hero-texto {
    max-width: 54ch;
    font-size: 1.15rem;
    color: var(--co-texto-2);
    margin: 1.5rem 0 0;
}

/* ---------- Cartões de seção ---------- */
.secoes { padding: 0 0 5.5rem; }

.secoes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.5rem;
}

.cartao {
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1.75rem 1.75rem 1.5rem;
}

.cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.cartao-topo h2 {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.etiqueta {
    font-family: var(--fonte-dados);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--co-texto-2);
    background: var(--co-ceu);
    border: 1px solid var(--co-borda);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}

/* Assinatura visual: itens com guia pontilhada, como linhas de uma fatura */
.lista-fatura {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.lista-fatura li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

.lista-fatura li + li { border-top: 1px solid var(--co-ceu); }

.lista-fatura li span:first-child { flex-shrink: 0; }

.lista-fatura li::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: 2px dotted var(--co-borda);
    transform: translateY(-0.25em);
}

.lista-fatura .valor {
    order: 2;
    font-family: var(--fonte-dados);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--co-ambar);
}

.cartao-texto {
    margin: 0;
    color: var(--co-texto-2);
    font-size: 0.98rem;
}

/* ---------- Rodapé ---------- */
.rodape {
    background: var(--co-azul-escuro);
    color: #C6D6E6;
    margin-top: auto;
}

.rodape-conteudo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: 0.9rem;
}

.rodape-aviso {
    max-width: 52ch;
    margin: 0;
}

.rodape-copy {
    margin: 0;
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
}

/* Rodapé sempre no pé da janela em páginas curtas */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

.menu-item {
    color: var(--co-tinta);
    text-decoration: none;
}

a.menu-item:hover { color: var(--co-azul); }

.menu-item--ativo {
    color: var(--co-azul);
    border-bottom: 2px solid var(--co-azul);
    padding-bottom: 0.2rem;
}

.cartao-link {
    color: inherit;
    text-decoration: none;
}

.cartao-link:hover { color: var(--co-azul); }

.etiqueta--ativa {
    color: var(--co-azul);
    background: var(--co-ceu);
    text-decoration: none;
}

.etiqueta--ativa:hover { border-color: var(--co-azul); }

/* ---------- Cabeçalho de página interna ---------- */
.pagina-cabecalho { padding: 3.5rem 0 2.5rem; }

.pagina-titulo {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.voltar {
    text-decoration: none;
    letter-spacing: 0.08em;
}

.voltar:hover { text-decoration: underline; }

/* ---------- Blocos de conteúdo ---------- */
.bloco { padding: 1.5rem 0 2.5rem; }

.bloco--final { padding-bottom: 5rem; }

.bloco-titulo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.bloco-texto {
    max-width: 62ch;
    color: var(--co-texto-2);
    margin: 0.5rem 0 1.25rem;
}

.grade-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.painel {
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.painel--rolavel { overflow-x: auto; }

.painel-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ---------- Tabelas de dados ---------- */
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabela th {
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--co-texto-2);
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--co-borda);
}

.tabela td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--co-ceu);
}

.tabela tbody tr:last-child td { border-bottom: none; }

.tabela tbody tr:hover { background: var(--co-ceu); }

.tabela a {
    color: var(--co-tinta);
    text-decoration: none;
}

.tabela a:hover { color: var(--co-azul); text-decoration: underline; }

.num {
    text-align: right;
    font-family: var(--fonte-dados);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

th.num { text-align: right; }

.valor-energia { color: var(--co-ambar); font-weight: 500; }

.valor-grande {
    font-family: var(--fonte-dados);
    font-size: 2rem;
    letter-spacing: -0.02em;
}

/* ---------- Busca de distribuidora ---------- */
.busca { margin-top: 2.25rem; max-width: 34rem; }

.busca-rotulo {
    display: block;
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--co-texto-2);
    margin-bottom: 0.5rem;
}

.busca-linha { display: flex; gap: 0.6rem; }

.busca select {
    flex: 1;
    min-width: 0;
    font: inherit;
    color: var(--co-tinta);
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.busca button {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--co-azul);
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
}

.busca button:hover { background: var(--co-azul-escuro); }

/* ---------- Resumo da distribuidora ---------- */
.resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 2rem 0 0;
}

.resumo-item {
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1rem 1.4rem;
    min-width: 12rem;
}

.resumo-item dt {
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--co-texto-2);
    margin-bottom: 0.35rem;
}

.resumo-item dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.resumo-nota {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--co-texto-2);
}

/* ---------- Calendário de reajustes ---------- */
.calendario {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.mes {
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1rem 1.2rem;
}

.mes--atual { border-color: var(--co-azul); }

.mes-nome {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0.6rem;
}

.mes-nome span {
    font-family: var(--fonte-dados);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--co-texto-2);
}

.mes-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.mes-lista li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.mes-lista li + li { border-top: 1px solid var(--co-ceu); }

.mes-lista a {
    color: var(--co-tinta);
    text-decoration: none;
}

.mes-lista a:hover { color: var(--co-azul); text-decoration: underline; }

.mes-lista li::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: 2px dotted var(--co-borda);
    transform: translateY(-0.25em);
}

.mes-dia {
    order: 2;
    font-family: var(--fonte-dados);
    font-size: 0.75rem;
    color: var(--co-texto-2);
    white-space: nowrap;
}

.mes-vazio {
    margin: 0;
    font-size: 0.85rem;
    color: var(--co-texto-2);
}

/* ---------- Seletor de unidade (kWh/MWh) ---------- */
/* Cada valor de energia existe no HTML nas duas unidades; a classe
   `unidade-mwh` no <html> decide qual delas fica visível. */
.v-mwh { display: none; }
.unidade-mwh .v-mwh { display: inline; }
.unidade-mwh .v-kwh { display: none; }

.tabela th .unid { text-transform: none; }

/* O seletor de período da auditoria é o mesmo controle segmentado, mas com a
   sua própria classe: o unidades.js varre `.seletor-unidade button` e apagaria
   o estado dos botões que não são de unidade. */
.seletor-unidade,
.seletor-visao {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.seletor-unidade-rotulo {
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--co-texto-2);
}

.seletor-unidade button,
.seletor-visao button {
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
    color: var(--co-texto-2);
    background: #fff;
    border: 1px solid var(--co-borda);
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.seletor-unidade button:first-of-type,
.seletor-visao button:first-of-type { border-radius: 8px 0 0 8px; }

.seletor-unidade button:last-of-type,
.seletor-visao button:last-of-type {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.seletor-unidade button[aria-pressed="true"],
.seletor-visao button[aria-pressed="true"] {
    background: var(--co-azul);
    border-color: var(--co-azul);
    color: #fff;
}

.bloco-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 2rem;
}

.bloco-cabecalho .seletor-unidade,
.bloco-cabecalho .seletor-visao { margin: 0 0 1.25rem; }

.ver-mais { margin-top: 1.5rem; font-weight: 500; }

/* ---------- Filtros do explorador de tarifas ---------- */
.filtro {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filtro-rotulo {
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--co-texto-2);
    min-width: 3.5rem;
}

.filtro-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ficha {
    font-family: var(--fonte-dados);
    font-size: 0.85rem;
    color: var(--co-tinta);
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    text-decoration: none;
}

.ficha:hover { border-color: var(--co-azul); color: var(--co-azul); }

.ficha--ativa,
.ficha--ativa:hover {
    background: var(--co-azul);
    border-color: var(--co-azul);
    color: #fff;
}

.explica-selecao {
    max-width: 62ch;
    margin: 0.75rem 0 0;
    font-size: 0.92rem;
    color: var(--co-texto-2);
}

.secao-tarifas { margin-top: 1.75rem; }

.secao-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.linha-separadora td { border-top: 1px solid var(--co-borda); }

/* ---------- Dicas (tooltips) ---------- */
.dica {
    position: relative;
    cursor: help;
    text-decoration: underline dotted var(--co-azul);
    text-underline-offset: 3px;
}

.dica-flutuante {
    position: fixed;
    z-index: 50;
    max-width: 22rem;
    background: var(--co-azul-escuro);
    color: #fff;
    font-size: 0.82rem;
    font-family: var(--fonte-texto);
    font-weight: 400;
    line-height: 1.45;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(12, 49, 87, 0.25);
}

/* ---------- Bandeiras tarifárias ---------- */
:root {
    --bandeira-verde: #2E7D32;
    --bandeira-amarela: #E9B41C;
    --bandeira-vermelha-p1: #C0392B;
    --bandeira-vermelha-p2: #8E1F14;
    --bandeira-escassez: #5B2C6F;
}

.bandeira--verde { background: var(--bandeira-verde); color: #fff; }
.bandeira--amarela { background: var(--bandeira-amarela); color: var(--co-tinta); }
.bandeira--vermelha-p1 { background: var(--bandeira-vermelha-p1); color: #fff; }
.bandeira--vermelha-p2 { background: var(--bandeira-vermelha-p2); color: #fff; }
.bandeira--escassez { background: var(--bandeira-escassez); color: #fff; }

.faixa-bandeira {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    max-width: fit-content;
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    color: var(--co-tinta);
    text-decoration: none;
    font-size: 0.95rem;
}

.faixa-bandeira:hover { border-color: var(--co-azul); }

.faixa-bandeira-cor {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.faixa-bandeira--verde .faixa-bandeira-cor { background: var(--bandeira-verde); }
.faixa-bandeira--amarela .faixa-bandeira-cor { background: var(--bandeira-amarela); }
.faixa-bandeira--vermelha-p1 .faixa-bandeira-cor { background: var(--bandeira-vermelha-p1); }
.faixa-bandeira--vermelha-p2 .faixa-bandeira-cor { background: var(--bandeira-vermelha-p2); }
.faixa-bandeira--escassez .faixa-bandeira-cor { background: var(--bandeira-escassez); }

.faixa-bandeira-seta { color: var(--co-azul); font-weight: 500; }

.bandeira-destaque {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    max-width: 36rem;
}

.bandeira-destaque-faixa { width: 0.6rem; border-radius: 4px; }

.bandeira-destaque--verde .bandeira-destaque-faixa { background: var(--bandeira-verde); }
.bandeira-destaque--amarela .bandeira-destaque-faixa { background: var(--bandeira-amarela); }
.bandeira-destaque--vermelha-p1 .bandeira-destaque-faixa { background: var(--bandeira-vermelha-p1); }
.bandeira-destaque--vermelha-p2 .bandeira-destaque-faixa { background: var(--bandeira-vermelha-p2); }
.bandeira-destaque--escassez .bandeira-destaque-faixa { background: var(--bandeira-escassez); }

.bandeira-destaque-rotulo {
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--co-texto-2);
    margin: 0;
}

.bandeira-destaque-nome {
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.15rem 0;
}

.bandeira-destaque-valor { margin: 0; color: var(--co-texto-2); }

.grade-bandeiras {
    border-collapse: separate;
    border-spacing: 3px;
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
}

.grade-bandeiras th {
    font-weight: 500;
    color: var(--co-texto-2);
    padding: 0.25rem 0.4rem;
    text-align: center;
}

.grade-bandeiras tbody th { text-align: right; }

.cel-bandeira {
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2rem;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
}

.cel-bandeira--vazia { background: var(--co-ceu); }

.legenda-bandeiras {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    font-size: 0.88rem;
    color: var(--co-texto-2);
}

.legenda-bandeiras li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ponto-bandeira {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    vertical-align: -0.05em;
}

/* ---------- Distribuição de reajustes por mês (calendário) ---------- */
.distribuicao {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 11rem;
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 0.9rem;
}

.distribuicao-mes {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    height: 100%;
    min-width: 0;
}

.distribuicao-valor {
    font-family: var(--fonte-dados);
    font-size: 0.78rem;
    color: var(--co-tinta);
}

.distribuicao-barra {
    display: block;
    width: 100%;
    max-width: 2.5rem;
    background: var(--co-azul);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.distribuicao-mes--atual .distribuicao-barra { background: var(--co-azul-escuro); }

.distribuicao-mes--atual .distribuicao-rotulo { color: var(--co-azul); font-weight: 500; }

.distribuicao-rotulo {
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--co-texto-2);
    text-align: center;
    line-height: 1.3;
}

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

.fonte-dados {
    margin-top: 1.5rem;
    font-family: var(--fonte-dados);
    font-size: 0.78rem;
    color: var(--co-texto-2);
}

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hero-chapeu, .hero-titulo, .hero-texto {
        animation: surgir 0.5s ease-out both;
    }
    .hero-texto { animation-delay: 0.08s; }

    @keyframes surgir {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
    }
}

/* ---------- Notícias ---------- */
.filtro-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.noticias-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
}

.noticias-grade--relacionadas { margin-top: 3rem; }

.noticia-cartao {
    display: block;
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
}

.noticia-cartao:hover { border-color: var(--co-azul); }

.noticia-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.noticia-data {
    font-family: var(--fonte-dados);
    font-size: 0.75rem;
    color: var(--co-texto-2);
}

.noticia-titulo {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.noticia-resumo {
    margin: 0;
    color: var(--co-texto-2);
    font-size: 0.95rem;
}

.etiqueta--reajuste { color: var(--co-azul); }
.etiqueta--bandeira { color: var(--co-ambar); }

/* Artigo de notícia */
.artigo { max-width: 62ch; }

.artigo-corpo p { margin: 0 0 1.15rem; }
.artigo-corpo p:last-child { margin-bottom: 0; }

.artigo-fonte {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--co-borda);
    font-size: 0.9rem;
    color: var(--co-texto-2);
}

/* ---------- Envio de fatura ---------- */
.envio-form { margin: 0; }

/* Zona de upload: o <input type=file> fica oculto e o <label> vira o alvo. */
.envio-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    min-height: 12rem;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 2px dashed var(--co-borda);
    border-radius: 12px;
    color: var(--co-texto-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.envio-zona:hover,
.envio-zona:focus-within,
.envio-zona--sobre {
    border-color: var(--co-azul);
    background: var(--co-ceu);
}

.envio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.envio-icone {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--co-azul);
}

.envio-titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--co-tinta);
}

.envio-sub {
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Nome do arquivo escolhido (preenchido por JS). */
.envio-arquivo {
    font-family: var(--fonte-dados);
    font-size: 0.85rem;
    color: var(--co-azul);
    word-break: break-all;
}

.envio-erro {
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    background: #FCEDEA;
    border: 1px solid #E7B7AC;
    border-radius: 8px;
    color: #8E1F14;
    font-size: 0.92rem;
}

.envio-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.botao {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--co-azul);
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.botao:hover { background: var(--co-azul-escuro); }

.botao--secundario {
    color: var(--co-azul);
    background: transparent;
    border: 1px solid var(--co-borda);
}

.botao--secundario:hover { background: var(--co-ceu); color: var(--co-azul); }

.envio-privacidade {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    font-size: 0.88rem;
    color: var(--co-texto-2);
}

.envio-privacidade strong { color: var(--co-tinta); font-weight: 600; }

/* Lista de distribuidoras suportadas, com guia pontilhada de fatura. */
.suportadas {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
}

.suportadas li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0;
}

.suportadas li + li { border-top: 1px solid var(--co-ceu); }

.suportadas li::before {
    content: "✓";
    color: var(--co-azul);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ---------- Resultado da leitura ---------- */
.identificacao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.identificacao div {
    background: #fff;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.identificacao dt {
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--co-texto-2);
    margin-bottom: 0.3rem;
}

.identificacao dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.selo {
    display: inline-block;
    font-family: var(--fonte-dados);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.selo--azul { background: #E4EDF7; color: var(--co-azul-escuro); }
.selo--verde { background: #E3F0E4; color: var(--bandeira-verde); }

/* Valores da fatura: demonstrativo com guia pontilhada, como na conta impressa. */
.valores-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.demonstrativo {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
}

.demonstrativo li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0;
}

.dem-guia {
    flex: 1;
    min-width: 1.5rem;
    border-bottom: 2px dotted var(--co-borda);
}

.dem-valor {
    font-family: var(--fonte-dados);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.demonstrativo-total {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.6rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--co-borda);
    font-weight: 600;
}

.demonstrativo-total--sozinho {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.dem-total {
    font-family: var(--fonte-dados);
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--co-ambar);
    white-space: nowrap;
}

.tributos-nota {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--co-texto-2);
}

.aviso-nao-lido {
    background: #fff;
    border: 1px solid var(--co-borda);
    border-left: 4px solid var(--co-ambar);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    max-width: 52ch;
}

.aviso-nao-lido h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }

/* ---------- Ajustes opcionais do envio ---------- */
.ajustes {
    margin-top: 1.25rem;
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    background: #fff;
}

.ajustes-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.ajustes-titulo::-webkit-details-marker { display: none; }

.ajustes-titulo::before {
    content: "+";
    font-family: var(--fonte-dados);
    color: var(--co-azul);
}

.ajustes[open] .ajustes-titulo::before { content: "−"; }

.ajustes-titulo small {
    font-family: var(--fonte-dados);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--co-texto-2);
}

.ajustes-texto {
    margin: 0 1rem;
    font-size: 0.88rem;
    color: var(--co-texto-2);
}

.ajustes-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.9rem;
    padding: 1rem;
}

.campo { display: flex; flex-direction: column; gap: 0.3rem; }

.campo label {
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--co-texto-2);
}

.campo input,
.campo select {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--co-borda);
    border-radius: 8px;
    background: var(--co-papel);
    color: var(--co-tinta);
    min-width: 0;
}

.campo small { font-size: 0.78rem; color: var(--co-texto-2); }

.campo-erro { color: #8E1F14; }

/* ---------- Memória de cálculo ----------
   O cabeçalho da tabela é a própria equação da fatura: grandeza × tarifa =
   valor, e o valor mais os dois tributos por dentro. As colunas de operador
   são estrutura, não enfeite — por isso ficam no <thead> e vazias no corpo,
   servindo de calha entre os dois lados da conta. */
.memoria { font-size: 0.92rem; }

.memoria th,
.memoria td { padding: 0.5rem 0.55rem; }

.memoria .num {
    font-family: var(--fonte-dados);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.memoria thead th { vertical-align: bottom; }

.memoria-op {
    width: 1.2rem;
    padding: 0.5rem 0 !important;
    text-align: center;
    font-family: var(--fonte-dados);
    color: var(--co-azul);
    font-weight: 400;
}

.memoria-desc {
    position: sticky;
    left: 0;
    background: #fff;
    min-width: 14rem;
    text-align: left;
}

.memoria tbody tr:hover .memoria-desc { background: var(--co-ceu); }

.memoria-grupo th {
    padding-top: 1.1rem;
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--co-texto-2);
    border-bottom: 1px solid var(--co-borda);
    background: #fff;
}

.memoria-grupo td {
    padding-top: 1.1rem;
    font-family: var(--fonte-dados);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    border-bottom: 1px solid var(--co-borda);
    white-space: nowrap;
}

.memoria tbody tr:hover { background: transparent; }
.memoria tbody tr:hover td:not(.memoria-op) { background: var(--co-ceu); }

/* Parcela sem incidência de ICMS: demanda contratada e não medida, crédito de
   geração distribuída. O zero é dado, não ausência — fica visível, mas apagado. */
.memoria-isento { color: var(--co-texto-2); opacity: 0.6; }

.memoria tfoot th,
.memoria tfoot td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    border-top: 2px solid var(--co-tinta);
    font-weight: 600;
    font-family: var(--fonte-dados);
    font-variant-numeric: tabular-nums;
}

.memoria tfoot th {
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    text-align: left;
}

.memoria-total {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--co-ambar);
}

.memoria .dica { margin-left: 0.35rem; }

.memoria-nota {
    margin: 1rem 0 0;
    max-width: 68ch;
    font-size: 0.88rem;
    color: var(--co-texto-2);
}

.memoria-nota code {
    font-family: var(--fonte-dados);
    font-size: 0.85em;
    background: var(--co-ceu);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* ---------- Composição do total ---------- */
.composicao {
    display: flex;
    height: 1.6rem;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.composicao-faixa { display: block; }
.composicao-faixa--base { background: var(--co-azul-escuro); }
.composicao-faixa--icms { background: var(--co-ambar); }
.composicao-faixa--pis { background: #7FA3C7; }

.composicao-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
}

.composicao-legenda li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.composicao-legenda li + li { border-top: 1px solid var(--co-ceu); }

.composicao-legenda b {
    margin-left: auto;
    font-family: var(--fonte-dados);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.composicao-legenda small {
    font-family: var(--fonte-dados);
    font-size: 0.78rem;
    color: var(--co-texto-2);
    min-width: 2.6rem;
    text-align: right;
}

.composicao-ponto {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.conferencia-nota {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: var(--co-texto-2);
}

.premissa-par {
    font-family: var(--fonte-dados);
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
}

.premissa-par small {
    font-family: var(--fonte-texto);
    font-weight: 400;
    color: var(--co-texto-2);
}

/* ---------- Auditoria: cativo × livre ---------- */
/* Duas barras na mesma régua, uma por ambiente de contratação. O que a mais
   curta deixa de percorrer é a diferença — a comparação se lê antes dos
   números. Cada faixa é uma natureza de item, na cor que a tabela repete. */
.auditoria-seletores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.confronto { padding-bottom: 1.75rem; }

.confronto-recorte {
    margin: 0 0 1.75rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--co-texto-2);
}

.confronto-recorte strong { color: var(--co-tinta); }

.confronto-lado + .confronto-lado { margin-top: 1.25rem; }

.confronto-cabeca {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
}

.confronto-chapeu {
    font-family: var(--fonte-dados);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--co-texto-2);
    border: 1px solid var(--co-borda);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.confronto-mercado { font-weight: 600; }

.confronto-detalhe-contrato {
    font-family: var(--fonte-dados);
    font-size: 0.75rem;
    color: var(--co-texto-2);
    white-space: nowrap;
}

.confronto-total {
    font-family: var(--fonte-dados);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.confronto-barra {
    display: flex;
    height: 2.25rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--co-ceu);
}

.confronto-faixa { display: block; }
.confronto-sobra { display: block; background: transparent; }

.confronto-faixa--energia { background: var(--co-azul-escuro); }
.confronto-faixa--tusd_consumo { background: var(--co-azul); }
.confronto-faixa--demanda { background: #5B87B4; }
.confronto-faixa--reativo { background: #97B6D3; }
.confronto-faixa--bandeira { background: var(--co-ambar); }
.confronto-faixa--encargo_acl { background: #D9A441; }
.confronto-faixa--outros { background: #C3D0DE; }

.confronto-veredito {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin: 1.75rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--co-borda);
}

.confronto-veredito-texto {
    font-weight: 600;
    font-size: 1.05rem;
}

.confronto-veredito-texto small {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--co-texto-2);
}

.confronto-delta {
    margin-left: auto;
    font-family: var(--fonte-dados);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.confronto-veredito--economiza .confronto-delta { color: var(--co-azul); }
.confronto-veredito--encarece .confronto-delta { color: var(--co-ambar); }
.confronto-veredito--empata .confronto-delta { color: var(--co-texto-2); }

.confronto-ponto {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.confronto-detalhe { margin-top: 1.5rem; }
.confronto-detalhe .tabela th[scope="row"] { font-weight: 400; }
.confronto-detalhe tfoot th,
.confronto-detalhe tfoot td {
    border-top: 1px solid var(--co-borda);
    font-weight: 600;
}

.confronto-igual {
    font-family: var(--fonte-texto);
    font-size: 0.85rem;
    color: var(--co-texto-2);
}

/* A diferença total é a mesma informação do veredito acima; repetir o âmbar
   aqui a leria como alerta. */
.confronto-delta-tabela { font-weight: 600; }

.leituras .unid {
    font-family: var(--fonte-texto);
    font-size: 0.78rem;
    color: var(--co-texto-2);
}

.empate { text-align: left; }

.empate-numero {
    margin: 1.25rem 0;
    font-family: var(--fonte-dados);
    font-size: clamp(2.1rem, 7vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--co-ambar);
}

.empate-numero small {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--fonte-texto);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--co-texto-2);
}

.leituras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1px;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    background: var(--co-borda);
    border: 1px solid var(--co-borda);
    border-radius: 10px;
    overflow: hidden;
}

.leituras li {
    background: #fff;
    padding: 1rem 1.1rem;
}

.leitura-rotulo {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--co-texto-2);
    margin-bottom: 0.35rem;
}

.leitura-valor {
    font-family: var(--fonte-dados);
    font-size: 1.1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.premissas-simulacao { margin-top: 1.5rem; }

/* ---------- Telas pequenas ---------- */
@media (max-width: 40rem) {
    .hero { padding: 3.5rem 0 2.75rem; }
    .menu { gap: 1rem; font-size: 0.95rem; }
    .memoria-desc { position: static; min-width: 11rem; }
    .confronto-cabeca { flex-wrap: wrap; }
    .confronto-total { margin-left: auto; }
    .confronto-delta { font-size: 1.35rem; }
}