:root {
    --azul: #1F4E79; --azul-escuro: #163a5c; --azul-claro: #e8f0f8;
    --laranja: #F28C28; --laranja-escuro: #d9761a;
    --verde: #1f8a4c; --verde-claro: #e9f7ef;
    --ambar: #8a5300; --ambar-claro: #fff7e6; --ambar-borda: #f2cf87;
    --vermelho: #b3261e; --vermelho-claro: #fdf0ef;
    --fundo: #f3f5f8; --cartao: #ffffff; --texto: #1b2533; --suave: #5d6b7c; --borda: #dbe2ea;
    --raio: 14px; --sombra: 0 1px 2px rgba(16, 32, 56, .06), 0 8px 24px rgba(16, 32, 56, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       background: var(--fundo); color: var(--texto); line-height: 1.45; }
button, input { font: inherit; }
[hidden] { display: none !important; }
a { color: var(--azul); text-underline-offset: .18em; }
::selection { background: rgba(31, 78, 121, .18); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--azul); }
/* Foco visível para tudo o que não define o próprio (links da navegação, tabelas, resumos) */
:focus-visible { outline: 3px solid rgba(31, 78, 121, .35); outline-offset: 2px; }

/* Moldura das telas de gestão: menu lateral fixo e barra do topo (só com pendências no computador; sempre no celular) */
/* Cores do menu lateral num lugar só: trocar o tema é trocar estas variáveis. Tema claro: o logo da HR e os gráficos aparecem mais. */
:root { --lateral-largura: 260px;
        --lateral-fundo: #ffffff; --lateral-texto: #3b4a5c; --lateral-forte: var(--texto); --lateral-suave: #6b7889;
        --lateral-hover: #f1f4f8; --lateral-linha: #e3e8ee;
        --lateral-ativo-fundo: var(--azul-claro); --lateral-ativo-texto: var(--azul); --lateral-ativo-sombra: none;
        --lateral-borda: var(--borda); --lateral-foco: rgba(31, 78, 121, .35); }
body:has(> .lateral) { padding-left: var(--lateral-largura); }
.lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: var(--lateral-largura); display: flex; flex-direction: column;
           padding: 16px 12px; overflow-y: auto; background: var(--lateral-fundo); color: var(--lateral-texto);
           border-right: 1px solid var(--lateral-borda); }
.lateral svg, .barra-topo svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; margin-bottom: 4px;
                 border-bottom: 1px solid var(--lateral-linha); color: var(--lateral-forte); text-decoration: none; }
.lateral-marca img { height: 38px; width: auto; display: block; }
.lateral-marca strong { font-size: 1.3rem; letter-spacing: -.01em; color: var(--azul); }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; }
.lateral-secao { padding: 18px 12px 8px; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--lateral-suave); }
.lateral-nav a, .lateral-sair button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px;
                                       border: none; border-radius: 10px; background: none; color: inherit; font-weight: 600; font-size: 1.02rem;
                                       text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.lateral-nav svg, .lateral-sair svg { width: 22px; height: 22px; }
.lateral-nav a:hover, .lateral-sair button:hover { background: var(--lateral-hover); color: var(--lateral-forte); }
.lateral-nav a.ativo { background: var(--lateral-ativo-fundo); color: var(--lateral-ativo-texto); box-shadow: var(--lateral-ativo-sombra); }
.lateral-nav .contador { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--laranja); color: #fff;
                         font-size: .8rem; line-height: 22px; text-align: center; }
.lateral-sair { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--lateral-linha); }
.lateral :focus-visible { outline: 3px solid var(--lateral-foco); outline-offset: 1px; }
.barra-topo { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 24px; background: var(--cartao);
              border-bottom: 1px solid var(--borda); }
.barra-topo:not(:has(.barra-topo-pendencias)) { display: none; }
.abrir-menu, .barra-topo-marca { display: none; }
.barra-topo-pendencias { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
                         border: 1px solid var(--ambar-borda); background: var(--ambar-claro); color: var(--ambar); font-size: .95rem;
                         font-weight: 600; text-decoration: none; transition: background .15s; }
.barra-topo-pendencias:hover { background: #ffefcf; }
.barra-topo-pendencias svg { width: 18px; height: 18px; }
.barra-topo-pendencias .contador { font-weight: 800; }
.lateral-fundo { position: fixed; inset: 0; z-index: 25; background: rgba(16, 32, 56, .45); }

@media (max-width: 1024px) {
    body:has(> .lateral) { padding-left: 0; }
    body.menu-aberto { overflow: hidden; }
    .lateral { transform: translateX(-100%); visibility: hidden; box-shadow: 0 0 40px rgba(0, 0, 0, .3);
               transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s; }
    .lateral.aberta { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
    .barra-topo, .barra-topo:not(:has(.barra-topo-pendencias)) { display: flex; padding: 6px 12px 6px 6px; }
    .abrir-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 10px;
                  background: none; color: var(--texto); cursor: pointer; }
    .abrir-menu:hover { background: var(--fundo); }
    .abrir-menu svg { width: 24px; height: 24px; stroke-width: 2; }
    .barra-topo-marca { display: flex; align-items: center; gap: 8px; color: var(--azul); text-decoration: none; font-size: 1.05rem; }
    .barra-topo-marca img { height: 30px; width: auto; display: block; }
}
@media (max-width: 520px) { .barra-topo-rotulo { display: none; } .barra-topo-pendencias { padding: 6px 12px 6px 10px; } }

/* Layout */
.pagina { max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px; }
.duas-colunas { display: grid; gap: 24px; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); align-items: start; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.formulario { padding: 24px; }
h1 { font-size: 1.35rem; margin: 0 0 4px; }
.intro { margin: 0 0 20px; color: var(--suave); font-size: .92rem; }
.passo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; margin: 22px 0 10px; }
.passo:first-of-type { margin-top: 0; }
.passo .num { width: 24px; height: 24px; border-radius: 50%; background: var(--azul); color: #fff; font-size: .8rem;
              display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Área de envio */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
        border: 2px dashed #a9bccf; border-radius: 12px; padding: 26px 16px; background: #f8fafc;
        transition: border-color .15s, background .15s; }
.drop:hover, .drop.ativo { border-color: var(--azul); background: var(--azul-claro); }
.drop:focus-within { outline: 3px solid rgba(31, 78, 121, .25); outline-offset: 2px; }
.drop svg { width: 34px; height: 34px; color: var(--azul); }
.drop strong { color: var(--azul); }
.drop span { font-size: .85rem; color: var(--suave); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.arquivo { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: #f8fafc; }
.arquivo svg { width: 28px; height: 28px; color: var(--vermelho); flex: none; }
.arquivo .info { flex: 1; min-width: 0; }
.arquivo .nome { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo .tamanho { font-size: .78rem; color: var(--suave); }

/* Campos */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; color: #3b4a5c; }
.campo input { font-size: 1rem; font-weight: 400; color: var(--texto); padding: 10px 12px; border: 1px solid var(--borda);
               border-radius: 10px; background: #fff; min-height: 44px; width: 100%; }
.campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.campo .dica { font-weight: 400; font-size: .75rem; color: var(--suave); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px;
       border-radius: 11px; border: 1px solid transparent; font-weight: 600; font-size: .95rem; cursor: pointer;
       text-decoration: none; transition: background .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .btn-link:focus-visible { outline: 3px solid rgba(31, 78, 121, .35); outline-offset: 2px; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-primario { background: var(--laranja); color: #fff; }
.btn-primario:hover { background: var(--laranja-escuro); }
.btn-primario:disabled { opacity: .7; cursor: wait; }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-escuro); }
.btn-contorno { background: #fff; color: var(--texto); border-color: var(--borda); }
.btn-contorno:hover { border-color: #b9c6d4; background: #f8fafc; }
.btn-whats svg { color: #1fa855; }
.btn-link { background: none; border: none; color: var(--azul); padding: 6px 4px; font-weight: 600; cursor: pointer; }
.gerar { width: 100%; margin-top: 24px; font-size: 1rem; min-height: 52px; }
.giro { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
        animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* Erros */
.erro { margin-top: 18px; border: 1px solid #f1b8b4; background: var(--vermelho-claro); border-radius: 12px; padding: 14px 16px; }
.erro h2 { margin: 0 0 4px; font-size: .98rem; color: var(--vermelho); }
.erro p { margin: 0; font-size: .9rem; }
.tabela-rolagem { overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; background: #fff; }
th, td { border: 1px solid var(--borda); padding: 6px 8px; text-align: left; vertical-align: top; }
.ok { color: var(--verde); font-weight: 600; } .falha { color: var(--vermelho); font-weight: 600; } .alerta-txt { color: var(--ambar); font-weight: 600; }

/* Coluna de resultado */
.vazio { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
         gap: 4px; padding: 32px; color: var(--suave); border-style: dashed; box-shadow: none; background: transparent; }
.vazio svg { width: 56px; height: 56px; color: #a9bccf; margin-bottom: 8px; }
.vazio strong { color: var(--texto); }
.vazio span { max-width: 340px; font-size: .9rem; }
.resultado { padding: 24px; }
.selo { display: inline-flex; align-items: center; gap: 6px; background: var(--verde-claro); color: var(--verde); font-weight: 700;
        font-size: .78rem; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; }
.selo svg { width: 15px; height: 15px; }
.resultado h2 { margin: 10px 0 2px; font-size: 1.25rem; overflow-wrap: anywhere; }
.resultado .sub { margin: 0; color: var(--suave); font-size: .9rem; }
.kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; margin: 20px 0; }
.kpis.tres { grid-template-columns: 1.3fr 1fr 1fr; }
.kpi { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: #fbfcfd; min-width: 0; }
.kpi span { display: block; font-size: .76rem; color: var(--suave); font-weight: 600; }
.kpi strong { display: block; font-size: 1.12rem; margin-top: 2px; white-space: nowrap; }
.kpi.destaque { background: var(--verde-claro); border-color: #bfe5cd; }
.kpi.destaque strong { color: var(--verde); font-size: 1.6rem; }
.kpi.destaque small { color: var(--verde); font-size: .76rem; }
.aviso { border: 1px solid var(--ambar-borda); background: var(--ambar-claro); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.aviso h2, .aviso h3 { margin: 0 0 4px; font-size: .92rem; color: var(--ambar); display: flex; gap: 6px; align-items: center; }
.aviso h3 svg { width: 17px; height: 17px; flex: none; }
.aviso ul { margin: 0; padding-left: 18px; font-size: .85rem; }
.acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acoes .compartilhar { grid-column: 1 / -1; min-height: 52px; font-size: 1rem; }
.nota { font-size: .8rem; color: var(--suave); margin: 10px 0 0; }
.previa { margin-top: 20px; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: #e9edf2; }
.previa iframe { display: block; width: 100%; height: 560px; border: 0; }
.abrir-pdf { display: none !important; }
.rodape-res { display: flex; justify-content: center; margin-top: 14px; }

/* Barra fixa (celular) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(255,255,255,.96);
         backdrop-filter: blur(8px); border-top: 1px solid var(--borda); display: none; gap: 10px;
         padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.barra .btn { flex: 1; }

/* Diálogo de compartilhamento (navegadores sem envio de arquivo) */
dialog { border: none; border-radius: 18px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(16,32,56,.3); }
dialog::backdrop { background: rgba(16, 32, 56, .45); }
.dialogo { padding: 22px; }
.dialogo h2 { margin: 0 0 6px; font-size: 1.1rem; }
.dialogo p { margin: 0 0 16px; font-size: .88rem; color: var(--suave); }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fechar { width: 100%; margin-top: 12px; }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: #1b2533; color: #fff;
         padding: 10px 16px; border-radius: 10px; font-size: .9rem; opacity: 0; pointer-events: none;
         transition: opacity .2s, transform .2s; z-index: 40; max-width: calc(100vw - 32px); }
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

footer { text-align: center; font-size: .78rem; color: var(--suave); padding: 0 20px 28px; }

@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi.destaque { grid-column: 1 / -1; }
                             .kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
    .pagina { padding: 16px 16px 24px; }
    .duas-colunas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .vazio { display: none !important; }
    .previa { display: none; }
    .abrir-pdf { display: inline-flex !important; }
    body.com-resultado { padding-bottom: 84px; }
    body.com-resultado .barra { display: flex; }
}
@media (max-width: 520px) {
    .formulario, .resultado { padding: 18px; }
    .campos { grid-template-columns: minmax(0, 1fr); }
    .acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acoes .baixar { grid-column: 1 / -1; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi:last-child { grid-column: 1 / -1; }
    .kpis.tres .kpi:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
    

/* ===================== Telas de gestão (painel, clientes, faturas) ===================== */

/* Cabeçalho da página */
.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.cabecalho h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.cabecalho p { margin: 4px 0 0; color: var(--suave); font-size: .92rem; }
.cabecalho .acoes-topo { display: flex; flex-wrap: wrap; gap: 10px; }
.cabecalho .chips-topo { display: flex; flex-wrap: wrap; gap: 8px; }
.dados dd .sub { display: block; margin-top: 4px; font-size: .8rem; color: var(--suave); font-weight: 400; }
.migalha { font-size: .82rem; color: var(--suave); margin-bottom: 6px; }
.migalha a { color: var(--azul); text-decoration: none; font-weight: 600; }

/* Seletor de ano */
.anos { display: inline-flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--borda); border-radius: 11px; padding: 3px; gap: 2px; }
.anos a { padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: .9rem; color: var(--suave); text-decoration: none; }
.anos a:hover { color: var(--texto); }
.anos a.ativo { background: var(--azul); color: #fff; }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.indicador { padding: 16px 18px; min-width: 0; }
.indicador span { display: block; font-size: .8rem; color: var(--suave); font-weight: 600; }
.indicador strong { display: block; font-size: 1.45rem; margin-top: 4px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indicador small { display: block; color: var(--suave); font-size: .8rem; margin-top: 2px; }
.indicador.destaque { background: linear-gradient(135deg, var(--azul) 0%, #2b6aa3 100%); border-color: transparent; color: #fff; }
.indicador.destaque span, .indicador.destaque small { color: rgba(255, 255, 255, .82); }

/* Bloco: cartão com título */
.bloco { padding: 20px; margin-bottom: 20px; }
.bloco-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bloco-titulo h2 { margin: 0; font-size: 1.08rem; }
.bloco-titulo p { margin: 2px 0 0; font-size: .85rem; color: var(--suave); }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* Gráfico de barras (economia por mês) */
.grafico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 230px; padding-top: 20px; }
.coluna { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.coluna .trilho { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.coluna .barra-g { width: 100%; max-width: 46px; background: var(--verde); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.coluna .barra-g.negativa { background: var(--vermelho); }
.coluna .barra-g.sem-dado { background: #e3e8ee; height: 3px; }
.coluna .valor { font-size: .68rem; color: var(--suave); white-space: nowrap; margin-bottom: 4px; position: absolute; transform: translateY(-100%); }
.coluna .mes { font-size: .74rem; color: var(--suave); font-weight: 700; text-transform: uppercase; }

/* Tabelas de dados */
/* position: relative segura dentro da rolagem os textos só para leitor de tela; sem isso eles alargam a página no celular */
.rolagem { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; background: transparent; }
.tabela th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 700;
             padding: 10px 12px; border: none; border-bottom: 1px solid var(--borda); background: #f8fafc; white-space: nowrap; }
.tabela td { padding: 11px 12px; border: none; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:hover td { background: #fafbfd; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela tfoot td { font-weight: 700; background: #f8fafc; border-bottom: none; }
.tabela tr.sem-fatura td { color: #64717f; }
.tabela a { color: var(--azul); font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.tabela .sub { display: block; font-size: .78rem; color: var(--suave); font-weight: 400; }
.economia-valor { color: var(--verde); font-weight: 700; }
.economia-valor.negativa { color: var(--vermelho); }
.rodape-tabela { font-size: .78rem; color: var(--suave); margin: 10px 0 0; }

/* Situação */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.chip.ok { background: var(--verde-claro); color: var(--verde); }
.chip.alerta { background: var(--ambar-claro); color: var(--ambar); }
.chip.falha { background: var(--vermelho-claro); color: var(--vermelho); }
.chip.neutro { background: #eef1f5; color: var(--suave); }
.chip.revisao { background: #fff1e3; color: #9a4a00; }

/* Formulários das telas de gestão */
.campo select, .campo textarea { font-size: 1rem; font-weight: 400; color: var(--texto); padding: 10px 12px; border: 1px solid var(--borda);
                                 border-radius: 10px; background: #fff; min-height: 44px; width: 100%; }
.campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.campo-check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin-top: 14px; }
.campo-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.form-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn-pequeno { min-height: 38px; padding: 6px 12px; font-size: .86rem; border-radius: 9px; }
.btn-perigo { background: #fff; color: var(--vermelho); border-color: #f1b8b4; }
.btn-perigo:hover { background: var(--vermelho-claro); }

/* Mensagens */
.info { border: 1px solid #c7d9ec; background: var(--azul-claro); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; font-size: .9rem; }
.info strong { color: var(--azul); }
.sucesso { border: 1px solid #bfe5cd; background: var(--verde-claro); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; font-size: .9rem; color: #14593a; }
.vazio-lista { text-align: center; color: var(--suave); padding: 36px 16px; }
.vazio-lista strong { display: block; color: var(--texto); font-size: 1rem; margin-bottom: 4px; }
.vazio-lista .btn { margin-top: 14px; }

/* Dados do cliente */
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; margin: 0; }
.dados div { min-width: 0; }
.dados dt { font-size: .74rem; color: var(--suave); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dados dd { margin: 2px 0 0; font-size: .95rem; overflow-wrap: anywhere; }
details.editar { margin-top: 16px; border-top: 1px solid var(--borda); padding-top: 12px; }
details.editar summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: .9rem; }
details.editar[open] summary { margin-bottom: 14px; }

/* UC */
.uc-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.uc-cabecalho h2 { margin: 0; font-size: 1.15rem; }
.uc-cabecalho .sub { font-size: .85rem; color: var(--suave); }
.contrato-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.contrato-resumo > span { background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px; padding: 5px 10px; font-size: .84rem; }
.contrato-resumo b { color: var(--azul); }
.mini-totais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.mini-totais div { border: 1px solid var(--borda); border-radius: 11px; padding: 10px 12px; background: #fbfcfd; min-width: 0; }
.mini-totais span { display: block; font-size: .74rem; color: var(--suave); font-weight: 600; }
.mini-totais strong { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-totais .destaque { background: var(--verde-claro); border-color: #bfe5cd; }
.mini-totais .destaque strong { color: var(--verde); }

/* Modalidade do contrato */
.modalidades { border: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modalidades legend { font-size: .82rem; font-weight: 600; color: #3b4a5c; margin-bottom: 8px; padding: 0; }
.modalidade { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px;
              cursor: pointer; background: #fff; }
.modalidade:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); box-shadow: 0 0 0 1px var(--azul) inset; }
.modalidade input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--azul); }
.modalidade b { display: block; font-size: .95rem; }
.modalidade small { display: block; color: var(--suave); font-size: .8rem; margin-top: 2px; }

/* Envio de várias faturas */
.lista-arquivos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-arquivos li { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; background: #f8fafc; border: 1px solid var(--borda);
                     border-radius: 9px; padding: 8px 10px; }
.lista-arquivos li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login .cartao { width: min(400px, 100%); padding: 28px; }
.login img { height: 46px; display: block; margin: 0 auto 18px; }
.login h1 { text-align: center; font-size: 1.2rem; margin: 0 0 4px; }
.login p { text-align: center; color: var(--suave); font-size: .9rem; margin: 0 0 20px; }
.login .campo { margin-bottom: 14px; }
.login .btn { width: 100%; margin-top: 6px; }

@media (max-width: 960px) {
    .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .cabecalho h1 { font-size: 1.3rem; }
    .indicador { padding: 14px; }
    .indicador strong { font-size: 1.2rem; }
    .mini-totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modalidades { grid-template-columns: minmax(0, 1fr); }
    .grafico { gap: 3px; height: 170px; padding-top: 0; }
    .tabela .opc { display: none; }
    .tabela th, .tabela td { padding: 10px 8px; }
    .coluna .valor { display: none; }
    .coluna .mes { font-size: .64rem; }
    .bloco { padding: 16px; }
    .rolagem { margin: 0 -16px; padding: 0 16px; }
    .cabecalho .acoes-topo { width: 100%; }
    .cabecalho .acoes-topo .btn { flex: 1; }

    /* Listas de faturas no celular: cada linha vira um cartão de duas colunas, com a situação e a ação à vista */
    .tabela-cartoes thead { display: none; }
    .tabela-cartoes, .tabela-cartoes tbody { display: block; }
    .tabela-cartoes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
                         padding: 12px 0; border-bottom: 1px solid var(--borda); }
    .tabela-cartoes td { display: block; padding: 0; border: none; min-width: 0; }
    .tabela-cartoes td:empty { display: none; }
    .tabela-cartoes tbody tr:hover td { background: none; }
    .tabela-cartoes .celula-larga { grid-column: 1 / -1; }
    .tabela-cartoes .celula-fim { justify-self: end; text-align: right; }
    .tabela-cartoes .ordem-primeiro { order: -2; }
    .tabela-cartoes .ordem-antes { order: -1; }
    .tabela-cartoes .ordem-depois { order: 1; }
    .tabela-cartoes .coluna-cliente, .tabela-cartoes .coluna-arquivo, .tabela-cartoes .coluna-motivo { min-width: 0; max-width: none; }
    .tabela-cartoes .coluna-arquivo { font-weight: 600; }
}

/* ===================== Revisão manual ===================== */
.pagina-larga { max-width: 1480px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
                      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }.erro-topo { margin: 0 0 18px; }
.revisao-grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }

/* PDF original ao lado */
.revisao-pdf { background: #e9edf2; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.revisao-pdf[open] { position: sticky; top: 16px; }
.pdf-corpo { display: flex; flex-direction: column; height: calc(100vh - 32px - 42px); }
.revisao-pdf summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--cartao); font-weight: 600;
                       font-size: .9rem; cursor: pointer; list-style: none; border-bottom: 1px solid var(--borda); }
.revisao-pdf summary::-webkit-details-marker { display: none; }
.revisao-pdf summary svg { width: 18px; height: 18px; color: var(--vermelho); }
.revisao-pdf iframe { flex: 1; width: 100%; min-height: 0; border: 0; display: block; }
.abrir-aba { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: .84rem; font-weight: 600;
             color: var(--azul); text-decoration: none; background: var(--cartao); border-top: 1px solid var(--borda); }
.abrir-aba svg { width: 16px; height: 16px; }

/* Faixa de balanço: o que a pessoa precisa fechar, sempre à vista */
.sentinela { height: 1px; }
.balanco { position: sticky; top: 0; z-index: 6; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
           padding: 16px 20px 14px; margin-bottom: 20px; transition: background-color .35s ease, border-color .35s ease; }
.balanco.grudada { box-shadow: 0 12px 28px rgba(16, 32, 56, .14); }
.balanco-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.balanco-num { min-width: 0; }
.balanco-num > span, .balanco-num > label { display: block; font-size: .8rem; font-weight: 600; color: var(--suave); }
.balanco-num strong, .campo-total { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
                                    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-total { width: 100%; text-align: left; padding: 0 4px; margin-left: -4px; border: none; border-bottom: 2px dashed #b9c6d4; border-radius: 4px 4px 0 0;
               background: transparent; color: var(--texto); font-family: inherit; }
.campo-total:hover { border-bottom-color: var(--azul); }
.campo-total:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--azul); background: var(--azul-claro); }
.balanco-dif strong { color: var(--vermelho); }
.balanco.fechou .balanco-dif strong { color: var(--verde); }
.balanco-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px;
                  border-top: 1px solid var(--borda); }
.balanco-estado { margin: 0; font-size: .92rem; font-weight: 600; }
.balanco.aprovada { background: var(--verde-claro); border-color: #9fd6b4; }
.balanco.aprovada .balanco-rodape { border-top-color: #bfe5cd; }
.balanco.aprovada .balanco-estado { color: var(--verde); }
.balanco.com-erro .balanco-estado { color: var(--vermelho); }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula { border: 1px solid; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.pilula:focus-visible { outline: 3px solid rgba(31, 78, 121, .35); outline-offset: 1px; }
.pilula.bloqueia { color: var(--vermelho); border-color: #f1b8b4; background: var(--vermelho-claro); }
.pilula.liberada { color: #9a4a00; border-color: #f3c79a; background: #fff1e3; }
.pilula.alerta { color: var(--ambar); border-color: var(--ambar-borda); background: var(--ambar-claro); }

/* Cartões de verificação */
.verificacoes { display: grid; gap: 10px; }
.verificacao { border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: 12px; padding: 12px 14px; }
.verificacao.bloqueia { border-left-color: var(--vermelho); }
.verificacao.liberada { border-left-color: var(--laranja); }
.verificacao.alerta { border-left-color: #e0a526; }
.verificacao-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.verificacao h3 { margin: 0; font-size: .98rem; }
.etiqueta { font-size: .76rem; font-weight: 700; color: var(--suave); }
.verificacao.bloqueia .etiqueta { color: var(--vermelho); }
.verificacao.liberada .etiqueta { color: #9a4a00; }
.verificacao.alerta .etiqueta { color: var(--ambar); }
.dica-verificacao { margin: 4px 0 8px; font-size: .88rem; color: #3b4a5c; max-width: 72ch; }
.esperado-obtido { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 0; font-size: .84rem; }
.esperado-obtido div { display: flex; gap: 6px; min-width: 0; }
.esperado-obtido dt { color: var(--suave); }
.esperado-obtido dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detalhe-verificacao summary { margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--azul); cursor: pointer; }
.detalhe-verificacao p { margin: 4px 0 0; font-size: .8rem; color: var(--suave); overflow-wrap: anywhere; }
.verificacao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.campo-check.compacto { margin: 0; }
.tudo-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--verde); font-weight: 600; }
.tudo-ok svg { width: 20px; height: 20px; }
.justificativa { margin-top: 14px; }
.campo textarea { font-family: inherit; resize: vertical; }
.campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }

/* Tabela de itens com aparência de planilha */
.tabela-itens td { padding: 4px 6px; }
.tabela-itens th, .tabela-itens th.num { white-space: normal; vertical-align: bottom; }
.balanco .campo-total { text-align: left; }
.tabela-itens .col-abrir, .tabela-itens .col-excluir { width: 42px; padding-left: 4px; padding-right: 4px; }
.tabela-itens input, .tabela-itens select { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px;
                                           background: transparent; color: inherit; font: inherit; }
.tabela-itens input:hover, .tabela-itens select:hover { border-color: var(--borda); background: #fff; }
.tabela-itens input:focus, .tabela-itens select:focus { outline: none; border-color: var(--azul); background: #fff;
                                                        box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.campo-numero { text-align: right; font-variant-numeric: tabular-nums; }
.campo input.campo-numero { text-align: right; }
input[aria-invalid="true"] { border-color: var(--vermelho) !important; background: var(--vermelho-claro) !important; }
.descricao-com-codigo { display: flex; align-items: center; gap: 4px; }
.codigo-item { flex: none; min-width: 30px; padding: 2px 6px; border-radius: 6px; background: var(--fundo); color: var(--suave);
               font-size: .74rem; font-weight: 700; text-align: center; }
.tabela-itens { table-layout: fixed; min-width: 700px; }
.tabela-itens th.num { width: 96px; }
.tabela-itens th.col-categoria { width: 24%; }
.tabela-itens tr, .verificacao { scroll-margin-top: 190px; }
.tabela-itens tr.marcada td { background: #fff8f0; }
.tabela-itens tr.marcada td:first-child { box-shadow: inset 3px 0 0 var(--laranja); }
.tabela-itens tr.destacada td { background: #ffe6cc; transition: background-color .6s ease; }
.problemas { display: block; padding: 0 8px 2px; font-size: .74rem; color: #9a4a00; }
.problemas:empty { display: none; }
.campo-categoria.sem-categoria { border-color: var(--vermelho); background: var(--vermelho-claro); }
.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none;
             border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.btn-icone:focus-visible { outline: 3px solid rgba(31, 78, 121, .35); outline-offset: 1px; }
.btn-icone svg { width: 18px; height: 18px; }
.abrir-linha svg { transition: transform .15s ease; }
.abrir-linha[aria-expanded="true"] svg { transform: rotate(90deg); }
.excluir-linha:hover { color: var(--vermelho); background: var(--vermelho-claro); }
.tabela-itens tr.linha-detalhe td { padding: 10px 12px 14px 48px; background: #f8fafc; }
.tabela-itens tr.linha-detalhe:hover td { background: #f8fafc; }
.linha-detalhe .campo input { min-height: 38px; padding: 7px 10px; font-size: .92rem; border-color: var(--borda); background: #fff; }
.campos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.campos-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.campos-7 .campo { font-size: .76rem; }

/* Seção recolhível e prévia */
.secao-recolhivel summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.secao-recolhivel summary::-webkit-details-marker { display: none; }
.secao-recolhivel summary h2 { margin: 0; font-size: 1.08rem; }
.secao-recolhivel summary svg { width: 20px; height: 20px; color: var(--suave); transition: transform .15s ease; }
.secao-recolhivel[open] summary svg { transform: rotate(90deg); }
.subtitulo { margin: 18px 0 8px; font-size: .9rem; color: #3b4a5c; }
.previa h2 { margin: 0 0 8px; font-size: 1.08rem; }
.previa-msg { margin: 0; color: var(--suave); font-size: .9rem; }
.previa-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; }
.previa-numeros div { border: 1px solid var(--borda); border-radius: 11px; padding: 10px 12px; background: #fbfcfd; min-width: 0; }
.previa-numeros dt { font-size: .76rem; font-weight: 600; color: var(--suave); }
.previa-numeros dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.previa-numeros .destaque { background: var(--verde-claro); border-color: #bfe5cd; }
.previa-numeros .destaque dd { color: var(--verde); font-size: 1.3rem; }

/* Aviso com "Desfazer" */
.toast-acao { display: flex; align-items: center; gap: 14px; }
.toast-acao.visivel { pointer-events: auto; }
.toast-acao .btn-link { color: #a8cdf2; padding: 2px 4px; }

@media (max-width: 1180px) {
    .revisao-grade { grid-template-columns: minmax(0, 1fr); }
    .revisao-pdf[open] { position: static; }
    .pdf-corpo { height: 75vh; }
    .campos-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .balanco { position: static; padding: 14px 16px 12px; }
    .balanco-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    .balanco-dif { grid-column: 1 / -1; }
    .balanco-num strong, .campo-total { font-size: 1.4rem; }
    .campos-4, .campos-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* salvar sempre à mão no celular */
    body.tela-revisao { padding-bottom: 84px; }
    .tela-revisao #form-salvar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
                                 background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--borda); }
    .tela-revisao #form-salvar .btn { width: 100%; }
    .tela-revisao .acoes-topo form { flex: 1; }
    .tela-revisao .acoes-topo form .btn { width: 100%; }

    /* a tabela de itens vira uma lista de cartões, um por linha */
    .tabela-itens thead { display: none; }
    .tabela-itens, .tabela-itens tbody { display: block; min-width: 0; }
    .tabela-itens tr.linha-item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 12px 0 8px;
                                  border-top: 1px solid var(--borda); }
    .tabela-itens tr.linha-item td { display: block; padding: 0; border: none; min-width: 0; background: none; }
    .tabela-itens tr.marcada { box-shadow: inset 3px 0 0 var(--laranja); padding-left: 10px !important; background: #fff8f0; }
    .tabela-itens tr.marcada td:first-child { box-shadow: none; }
    .tabela-itens td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: .72rem;
                                            font-weight: 600; color: var(--suave); }
    .tabela-itens .col-descricao, .tabela-itens td[data-rotulo="Categoria"] { grid-column: 1 / -1; }
    .tabela-itens td.num::before { text-align: right; }
    .tabela-itens .col-abrir { order: 10; width: auto; grid-column: 1; }
    .tabela-itens .col-excluir { order: 11; width: auto; grid-column: 3; justify-self: end; }
    .tabela-itens input, .tabela-itens select { border-color: var(--borda); background: #fff; }
    .tabela-itens tr.linha-detalhe { display: block; }
    .tabela-itens tr.linha-detalhe td { display: block; padding: 10px 12px 12px; border: none; }
}

/* ===================== Próxima ação e limpeza de estilos inline ===================== */
.abas { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 16px; }
.abas a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave);
          font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.abas a:hover { color: var(--texto); border-color: #b9c6d4; }
.abas a.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.abas a:focus-visible { outline: 3px solid rgba(31, 78, 121, .35); outline-offset: 2px; }
.link-acao { color: var(--azul); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-acao:hover { text-decoration: underline; }
.tabela a.btn { color: #fff; text-decoration: none; }
.tabela a.btn:hover { text-decoration: none; }
.tabela td.num .btn-pequeno { min-height: 34px; }
/* Ação principal da fatura e, nas pendentes, recalcular e excluir como ícones logo depois */
.acoes-celula { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; vertical-align: middle; }
.acoes-celula form { margin: 0; }
.acoes-celula .btn-icone:first-of-type { margin-left: 4px; }
@media (pointer: coarse) { .acoes-celula .btn-icone { width: 40px; height: 40px; } }
.coluna-cliente { min-width: 220px; }
.coluna-cliente .sub { max-width: 46ch; }
.coluna-arquivo { max-width: 220px; overflow-wrap: anywhere; }
.coluna-motivo { max-width: 360px; font-size: .84rem; }
.coluna-detalhe { font-size: .85rem; }
.coluna-verificacao { min-width: 150px; }
.chip-grande { font-size: .85rem; padding: 6px 14px; }
.uma-coluna { grid-template-columns: minmax(0, 1fr); }
.vazio.carregando { min-height: 220px; }
.vazio.carregando .giro { width: 30px; height: 30px; border-color: #c8d3df; border-top-color: var(--azul); }
.apos-relatorio { margin-top: 20px; }
.info-uc { margin-top: 14px; }
.so-assinatura { margin-top: 14px; }
.formulario .so-assinatura { margin: 0 0 14px; }
section[id^="uc-"] > .grafico { margin-bottom: 18px; }
.login .lembrar { margin: 0 0 6px; }
.botao-enviar { min-width: 220px; }
.dado-largo { grid-column: 1 / -1; }
.resumo-lote { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.resumo-lote .chip { font-size: .8rem; padding: 4px 12px; }
.pendencias ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.pendencias a { color: var(--ambar); font-weight: 700; }

/* Faixa "precisa de revisão" no detalhe da fatura */
.faixa-revisao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px;
                 padding: 16px 18px; border: 1px solid #f3c79a; border-left: 4px solid var(--laranja); border-radius: 12px; background: #fff8f0; }
.faixa-revisao h2 { margin: 0 0 4px; font-size: 1.05rem; color: #9a4a00; }
.faixa-revisao p { margin: 0; font-size: .9rem; max-width: 80ch; }
@media (max-width: 620px) {
    .faixa-revisao .btn { width: 100%; }
    .coluna-cliente { min-width: 160px; }
}

/* Portal do cliente (/c/{token}): uma coluna, pensada primeiro para o celular. O laranja é só para economia. */
.portal { background: var(--cartao); }
.portal-topo { max-width: 760px; margin: 0 auto; padding: 20px 20px 0; display: flex; align-items: center; gap: 14px; }
.portal-topo img { height: 44px; width: auto; display: block; }
.portal-topo h1 { font-size: 1.05rem; color: var(--azul); margin: 0; line-height: 1.25; }
.portal-topo p { margin: 2px 0 0; font-size: .85rem; color: var(--suave); }
.portal-pagina { max-width: 760px; margin: 0 auto; padding: 8px 20px 32px; }
.portal-abertura { padding: 28px 0 8px; }
.portal-frase { font-size: 1.15rem; line-height: 1.35; margin: 0; color: var(--texto); max-width: 30ch; }
.portal-total { display: block; font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1.05; letter-spacing: -.03em; color: var(--laranja-escuro);
                font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.portal-ano-resumo { margin: 12px 0 0; color: var(--suave); }
.portal-anos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.portal-anos a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--borda); color: var(--azul); text-decoration: none; font-weight: 600; }
.portal-anos a.atual { background: var(--azul); border-color: var(--azul); color: #fff; }
.portal-uc { border-top: 1px solid var(--borda); margin-top: 28px; padding-top: 24px; }
.portal-uc h2 { font-size: .95rem; color: var(--suave); font-weight: 600; margin: 0 0 18px; }
.portal-uc h3 { font-size: 1.1rem; color: var(--azul); margin: 0 0 12px; }
/* A conta do mês: a largura toda é o valor sem a usina; o trecho laranja é o que ficou no bolso. */
.portal-conta { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: #e3e8ee; }
.portal-conta .seg { display: block; min-width: 0; }
.portal-conta .celesc { background: var(--azul); }
.portal-conta .assinatura { background: #7f9bb8; }
.portal-conta .economia { background: var(--laranja); }
.portal-legenda { margin: 14px 0 0; display: grid; gap: 8px; max-width: 440px; }
.portal-legenda div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-left: 18px; position: relative; }
.portal-legenda div::before { content: ""; position: absolute; left: 0; top: .35em; width: 10px; height: 10px; border-radius: 3px; }
.portal-legenda .sem-usina::before { background: #e3e8ee; }
.portal-legenda .celesc::before { background: var(--azul); }
.portal-legenda .assinatura::before { background: #7f9bb8; }
.portal-legenda .economia::before { background: var(--laranja); }
.portal-legenda dt { color: var(--suave); }
.portal-legenda dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-legenda .economia dt, .portal-legenda .economia dd { color: var(--texto); font-weight: 700; }
.portal-nota { font-size: .82rem; color: var(--suave); margin: 12px 0 0; }
.portal-pdf { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--azul); font-weight: 600; text-decoration: none; }
.portal-pdf svg { width: 20px; height: 20px; }
.portal-pdf:hover span, .portal-tabela a:hover { text-decoration: underline; }
.portal-historico { margin-top: 32px; }
.portal .coluna .barra-g:not(.sem-dado):not(.negativa) { background: var(--laranja); }
.portal .coluna .mes, .portal .tabela th { text-transform: none; letter-spacing: 0; }
.portal-link-pdf { display: inline-flex; align-items: center; gap: 6px; }
.portal-link-pdf svg { width: 18px; height: 18px; flex: none; }
.portal-tabela a { color: var(--azul); font-weight: 600; text-decoration: none; white-space: nowrap; }
.portal-economia { color: var(--laranja-escuro); }
.marca-nota { color: var(--suave); margin-left: 2px; }
.portal-vazio { padding: 40px 0; }
.portal-vazio h2 { font-size: 1.2rem; color: var(--azul); margin: 0 0 6px; }
.portal-vazio p { color: var(--suave); margin: 0; max-width: 46ch; }
.portal-como { margin-top: 32px; border-top: 1px solid var(--borda); padding-top: 16px; color: var(--suave); }
.portal-como summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.portal-como p { max-width: 64ch; }
.portal-rodape { max-width: 760px; margin: 0 auto; padding: 0 20px 32px; font-size: .82rem; color: var(--suave); }
.portal a:focus-visible, .portal summary:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 520px) {
    .portal .coluna .valor { display: none; }
    .portal .grafico { height: 170px; gap: 3px; }
    .portal .opc-celular { display: none; }
    .portal-link-pdf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===================== Painel: o que fazer, gráficos, clientes e visão geral ===================== */
.painel .cabecalho h1 { font-size: 1.9rem; }
.painel .cabecalho p { font-size: 1.02rem; }
.painel .cabecalho p strong { color: var(--texto); }

.para-fazer { padding: 16px 20px; margin-bottom: 20px; }
.para-fazer h2 { margin: 0 0 14px; font-size: 1.15rem; }
.para-fazer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.para-fazer a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px;
                color: var(--texto); text-decoration: none; transition: border-color .15s, background .15s; }
.para-fazer a:hover { border-color: #b9c6d4; background: #fbfcfd; }
.para-fazer a > strong { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 10px;
                         border-radius: 12px; font-size: 1.4rem; font-variant-numeric: tabular-nums; background: #eef1f5; color: var(--suave); }
.para-fazer a.revisao > strong { background: #fff1e3; color: #9a4a00; }
.para-fazer a.alerta > strong { background: var(--ambar-claro); color: var(--ambar); }
.para-fazer a.falha > strong { background: var(--vermelho-claro); color: var(--vermelho); }
.para-fazer a > span { flex: 1; min-width: 0; }
.para-fazer b { display: block; font-size: 1.05rem; }
.para-fazer small { display: block; color: var(--suave); font-size: .92rem; }
.para-fazer svg { width: 18px; height: 18px; flex: none; color: var(--suave); fill: none; stroke: currentColor; stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.para-fazer a:hover svg { transform: translateX(2px); color: var(--texto); }

.painel-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; }
.painel-grade-larga { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.painel-cartao { padding: 16px 20px 20px; min-width: 0; }
.painel-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px;
                      border-bottom: 1px solid var(--borda); }
.painel-cartao-topo h2 { margin: 0; font-size: 1.25rem; }
.painel-cartao-topo a { font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.painel-cartao-topo a:hover { text-decoration: underline; }
.painel-destaque { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.painel-destaque > div { min-width: 0; }
.painel-destaque strong { display: block; font-size: 2.1rem; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
                          white-space: nowrap; }
.painel-destaque > div > span { display: block; margin-top: 4px; font-size: .95rem; color: var(--suave); }
.painel-variacao { text-align: right; }
.painel-variacao strong { display: inline-flex; align-items: center; gap: 4px; font-size: 1.3rem; letter-spacing: 0; }
.painel-variacao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.painel-variacao.sobe strong { color: var(--verde); }
.painel-variacao.desce strong { color: var(--vermelho); }
.painel-variacao.desce svg { transform: rotate(180deg); }

/* Gráficos desenhados com posições em % (GraficoPainel): eixo à esquerda, área com grade, meses embaixo */
.grafico-painel { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 280px auto; column-gap: 10px; }
.grafico-eixo { position: relative; }
.grafico-eixo span { position: absolute; right: 0; transform: translateY(50%); font-size: .82rem; color: var(--suave);
                     font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico-area { position: relative; }
.grafico-grade { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #e8edf2; }
.grafico-grade.zero { border-top-color: #b9c6d4; }
.grafico-colunas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grafico-coluna, .grafico-ponto { border-radius: 6px; transition: background .15s; }
.grafico-coluna { position: relative; }
.grafico-coluna:hover, .grafico-coluna:focus-visible, .grafico-ponto:hover, .grafico-ponto:focus-visible { background: rgba(31, 78, 121, .06); outline-offset: -2px; }
.barra-painel { position: absolute; left: 22%; width: 56%; max-width: 48px; margin: 0 auto; right: 22%; border-radius: 4px 4px 1px 1px;
                background: var(--verde); transform-origin: bottom; animation: crescer .55s cubic-bezier(.2, .8, .2, 1) both;
                animation-delay: calc(var(--i, 0) * 35ms); }
.com-anterior .barra-painel { max-width: none; margin: 0; right: auto; }
.com-anterior .barra-painel.atual { left: 51%; width: 33%; }
.com-anterior .barra-painel.anterior { left: 16%; width: 33%; background: #c3ceda; }
.barra-painel.negativa { background: var(--vermelho); border-radius: 1px 1px 4px 4px; transform-origin: top; }
.grafico-coluna:hover .barra-painel.atual:not(.negativa), .grafico-coluna:focus-visible .barra-painel.atual:not(.negativa) { background: #187040; }
.grafico-meses { grid-column: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 10px; }
.grafico-meses span { text-align: center; font-size: .82rem; font-weight: 700; color: var(--suave); text-transform: uppercase; }
.grafico-dica { position: absolute; z-index: 5; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 6px)); display: none; min-width: 190px;
                padding: 10px 12px; border-radius: 10px; background: #1b2533; color: #fff; font-size: .92rem; line-height: 1.45; white-space: nowrap;
                pointer-events: none; box-shadow: 0 8px 20px rgba(16, 32, 56, .25); }
.dica-direita .grafico-dica { left: auto; right: 0; transform: translateY(calc(-100% - 6px)); }
.dica-esquerda .grafico-dica { left: 0; transform: translateY(calc(-100% - 6px)); }
.grafico-dica b { display: block; margin-bottom: 2px; }
.grafico-dica span { display: flex; align-items: center; gap: 6px; }
.grafico-coluna:hover .grafico-dica, .grafico-coluna:focus-visible .grafico-dica,
.grafico-ponto:hover .grafico-dica, .grafico-ponto:focus-visible .grafico-dica { display: block; }
.cor { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cor.atual { background: var(--verde); }
.cor.anterior { background: #c3ceda; }
.cor.semgd { background: #8a99ab; }
.cor.pago { background: var(--azul); }
.cor.economia { background: rgba(31, 138, 76, .35); }
.grafico-legenda { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; margin-top: 14px; font-size: .92rem; color: var(--suave); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: revelar .9s cubic-bezier(.2, .8, .2, 1) both; }
.faixa-economia { fill: rgba(31, 138, 76, .16); }
.linha-semgd, .linha-pago { fill: none; vector-effect: non-scaling-stroke; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.linha-semgd { stroke: #8a99ab; stroke-dasharray: 6 5; }
.linha-pago { stroke: var(--azul); }
.grafico-ponto { position: absolute; top: 0; bottom: 0; width: 8.33%; transform: translateX(-50%); }
.marcador { position: absolute; left: 50%; width: 13px; height: 13px; margin: 0 0 -6.5px -6.5px; border-radius: 50%; background: #fff; border: 2.5px solid; }
.marcador.semgd { border-color: #8a99ab; }
.marcador.pago { border-color: var(--azul); }
.grafico-ponto:hover .marcador, .grafico-ponto:focus-visible .marcador { transform: scale(1.25); }
@keyframes crescer { from { transform: scaleY(0); } }
@keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Clientes: avatar, nome e parte de cada um na economia do ano */
.tabela-painel { font-size: 1rem; }
.tabela-painel th { font-size: .78rem; }
.tabela-painel td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.tabela .cliente-linha { display: flex; align-items: center; gap: 12px; color: var(--texto); font-weight: 400; }
.tabela .cliente-linha:hover { text-decoration: none; }
.tabela .cliente-linha:hover b { color: var(--azul); text-decoration: underline; }
.avatar { flex: none; width: 42px; height: 42px; font-size: 1.05rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
          background: var(--azul-claro); color: var(--azul); font-weight: 800; }
.cliente-nome { min-width: 0; }
.cliente-nome b { display: block; font-weight: 700; overflow-wrap: break-word; }
.cliente-nome small { display: block; color: var(--suave); font-size: .88rem; }
.parte { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.parte-barra { width: 80px; height: 8px; border-radius: 999px; background: #e8edf2; overflow: hidden; }
.parte-barra span { display: block; height: 100%; border-radius: inherit; background: var(--verde); }
.parte small { min-width: 40px; font-size: .85rem; color: var(--suave); text-align: right; }
.tabela-painel .btn-icone svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Visão geral: ícone, valor e rótulo */
.visao-geral { list-style: none; margin: 0; padding: 0; }
.visao-geral li { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--borda); }
.visao-geral li:first-child { padding-top: 0; }
.visao-geral li:last-child { border-bottom: none; padding-bottom: 0; }
.visao-icone { flex: none; width: 50px; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.visao-icone svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visao-icone.azul { background: var(--azul-claro); color: var(--azul); }
.visao-icone.verde { background: var(--verde-claro); color: var(--verde); }
.visao-icone.laranja { background: #fff1e3; color: #b35a0b; }
.visao-icone.ambar { background: var(--ambar-claro); color: var(--ambar); }
.visao-icone.cinza { background: #eef1f5; color: var(--suave); }
.visao-geral li > div { flex: 1; min-width: 0; text-align: right; }
.visao-geral strong { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.visao-geral li > div span { display: block; margin-top: 2px; font-size: .92rem; color: var(--suave); }

/* Tabela mês a mês recolhível */
.mes-a-mes { padding: 0; }
.mes-a-mes summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.mes-a-mes summary::-webkit-details-marker { display: none; }
.mes-a-mes-titulo { display: block; font-weight: 700; font-size: 1.25rem; }
.mes-a-mes summary small { display: block; color: var(--suave); font-size: .95rem; }
.mes-a-mes summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--suave); stroke-width: 2; stroke-linecap: round;
                         stroke-linejoin: round; transition: transform .15s; }
.mes-a-mes[open] summary svg { transform: rotate(90deg); }
.mes-a-mes .rolagem { margin: 0; padding: 0 20px 20px; }

@media (max-width: 1280px) { .painel-grade, .painel-grade-larga { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
    .painel-cartao { padding: 14px 16px 16px; }
    .painel-destaque { flex-wrap: wrap; }
    .painel-variacao { width: 100%; text-align: left; }
    .painel-destaque strong { font-size: 1.7rem; }
    .painel-variacao strong { font-size: 1.15rem; }
    /* clientes no celular: o nome ganha a largura; a barra de participação e o botão de abrir saem (a linha toda é link) */
    .tabela-painel .parte-barra, .tabela-painel td:last-child, .tabela-painel th:last-child { display: none; }
    .tabela-painel .avatar { width: 36px; height: 36px; font-size: .95rem; }
    .tabela .cliente-linha { gap: 10px; }
    .grafico-painel { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 230px auto; column-gap: 6px; }
    /* doze meses em ~290 px: minúsculas e peso menor para "mar", "abr", "mai" não encostarem */
    .grafico-meses span { font-size: .64rem; font-weight: 600; text-transform: none; letter-spacing: -.02em; }
    .grafico-eixo span { font-size: .75rem; }
    .painel .cabecalho h1 { font-size: 1.6rem; }
    .grafico-legenda { justify-content: flex-start; }
    .mes-a-mes .rolagem { padding: 0 16px 16px; }
    .para-fazer { padding: 14px 16px; }
}

/* Lucro da cooperativa (/lucro): UCs abaixo do cliente, meses sem dado e memória do cálculo */
.tabela tr.linha-uc td { color: var(--suave); font-size: .85rem; background: #fcfdfe; }
.tabela tr.linha-uc td:first-child { padding-left: 28px; }
/* mês sem dado no detalhe do cliente: texto suave (--suave, AA) e o motivo na primeira célula, sem opacity */
.tabela tr.sem-dado td { color: var(--suave); }
.tabela tr.sem-dado td a { color: inherit; }
.tabela .motivo { display: block; font-size: .78rem; color: var(--suave); font-weight: 400; }
/* Lucro por kWh é a segunda coluna das tabelas do lucro: negrito e fundo azul-claro (em tfoot e hover o fundo do destaque vence o cinza) */
.tabela th.destaque, .tabela td.destaque { font-weight: 700; color: var(--azul); background: var(--azul-claro); }
/* Tabelas do lucro no celular: cada linha vira um cartão com rótulo em cada valor (os rótulos vêm do texto fixo do template, nunca de dado do usuário) */
@media (max-width: 620px) {
    .tabela-lucro td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .72rem; font-weight: 500; color: var(--suave); }
    .tabela-lucro td.num { text-align: left; white-space: normal; }
    .tabela-lucro td.destaque { background: none; }
    .tabela-lucro .celula-titulo { grid-column: 1 / -1; order: -3; font-weight: 600; }
    .tabela-lucro tfoot { display: block; }
    .tabela-lucro tfoot tr { border-top: 2px solid var(--borda); border-bottom: none; background: #f8fafc; padding: 12px 8px; font-weight: 700; }
    .tabela-lucro tfoot td { background: none; }
    .tabela-lucro tr.linha-uc { padding-left: 14px; border-left: 3px solid var(--borda); }
    .tabela-lucro tr.linha-uc td:first-child { padding-left: 0; }
}
.seletor-mes { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.seletor-mes-form { display: flex; align-items: flex-end; gap: 8px; }
/* mês sem fatura calculada: mantém --suave (5,4:1 no branco, AA) e marca com peso menor e sublinhado pontilhado, sem opacity */
.anos a.sem-dado { font-weight: 500; text-decoration: underline dotted; }
.titulo-secao { font-size: 1.08rem; margin: 24px 0 12px; }
/* Acumulado da Visão geral: título à esquerda, atalhos (Ano, 12 meses, Tudo) e o período De/Até à direita; quebra no celular */
.periodo-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 24px 0 12px; }
.periodo-topo .titulo-secao { margin: 0; }
.periodo-seletor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.periodo-form { flex-wrap: wrap; }
.periodo-form.ativo input { border-color: var(--azul); }
@media (max-width: 620px) {
    .periodo-seletor, .periodo-form { width: 100%; }
    .periodo-form .campo { flex: 1 1 0; min-width: 0; }
    .periodo-form .campo input { width: 100%; min-width: 0; }
    .periodo-form .btn { flex: 1 1 100%; }
}
.memoria-lucro h4 { margin: 14px 0 4px; font-size: .9rem; }
.memoria-lucro ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.memoria-lucro li { margin: 2px 0; }

/* Painel do lucro (/lucro, aba Visão geral): cartões do mês e do ano; os tons de variação são usados pelos cartões com comparação */
.cartoes-lucro { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cartao-lucro { padding: 14px 16px; min-width: 0; }
.cartao-lucro-rotulo { display: block; font-size: .85rem; color: var(--suave); }
.cartao-lucro-unidade { display: block; font-size: .8rem; color: var(--suave); }
.cartao-lucro strong { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.cartao-lucro.destaque { background: var(--azul-claro); border-color: var(--azul); }
.cartao-lucro.destaque strong { font-size: 1.9rem; color: var(--azul); }
.variacao-lucro { display: block; font-size: .82rem; margin-top: 4px; }
.variacao-lucro.melhor { color: var(--verde); }
.variacao-lucro.pior { color: var(--vermelho); }
.variacao-lucro.igual, .variacao-lucro.sem-comparacao { color: var(--suave); }
@media (max-width: 620px) {
    .cartoes-lucro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartao-lucro.destaque { grid-column: 1 / -1; }
}

/* Gráfico de 12 meses do lucro líquido (Visão geral): cada coluna é um link para o mês */
.grafico-lucro a.grafico-coluna { display: block; color: inherit; text-decoration: none; }
.grafico-lucro .grafico-coluna.escolhida { background: var(--azul-claro); }
.grafico-lucro .grafico-coluna:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.grafico-lucro .grafico-vazio { position: absolute; left: 0; right: 0; text-align: center; color: var(--suave); font-size: .8rem; transform: translateY(50%); }
.grafico-lucro .grafico-meses span.escolhida { font-weight: 700; color: var(--texto); }

/* Ranking de clientes por lucro por kWh (Visão geral): cada linha é um link; a barra sai do zero, à direita (lucro) ou à esquerda (prejuízo) */
.ranking-lucro { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranking-lucro a { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; padding: 4px 6px; border-radius: 8px; }
.ranking-lucro a:hover { background: var(--fundo); }
.ranking-lucro a:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.ranking-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ranking-barra { position: relative; height: 14px; background: var(--fundo); border-radius: 4px; overflow: hidden; }
.ranking-valor-barra { position: absolute; top: 0; bottom: 0; background: var(--verde); border-radius: 2px; }
.ranking-valor-barra.negativa { background: var(--vermelho); }
.ranking-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--suave); }
.ranking-valor { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 4.5rem; }
.ranking-valor.negativa { color: var(--vermelho); }

/* Para onde vai a receita: barra de 100% da receita ao lado da lista; com prejuízo as partes passam de 100% e o excesso aparece em vermelho */
.receita-lucro .receita-lucro-corpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.barra-receita { position: relative; display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--fundo); }
.barra-receita .parte { flex-basis: 0; flex-shrink: 1; min-width: 0; }
.barra-receita .parte.custo { background: var(--azul); }
.barra-receita .parte.tributos { background: var(--ambar); }
.barra-receita .parte.taxa { background: var(--suave); }
.barra-receita .parte.lucro { background: var(--verde); }
.barra-receita-limite { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--texto); }
.barra-receita-prejuizo { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--vermelho-claro); border: 2px solid var(--vermelho); color: var(--vermelho); font-size: .72rem; font-weight: 700; }
.cor-parte { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; }
.cor-parte.custo { background: var(--azul); }
.cor-parte.tributos { background: var(--ambar); }
.cor-parte.taxa { background: var(--suave); }
.cor-parte.lucro { background: var(--verde); }
.cor-parte.lucro.prejuizo { background: var(--vermelho); }
@media (max-width: 620px) {
    .receita-lucro .receita-lucro-corpo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ranking-lucro a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    .ranking-lucro .ranking-barra { grid-column: 1 / -1; order: 3; }
}

/* Página offline do PWA (static/offline.html): sem o menu, centralizada */
.offline { max-width: 420px; margin: 12vh auto 0; text-align: center; }
.offline h1 { margin: 18px 0 8px; }
.offline p { color: var(--suave); margin: 0 0 20px; }