/* Fluxo GV-O-M — componentes na identidade visual do Grupo GVS (redesign rodada 1).
   Carregar DEPOIS de style.css e gvs-tokens.css. Mantém os seletores que o JS já usa; enquanto o
   style.css antigo existir, este arquivo sobrepõe só o que foi redesenhado.
   Regras (skill gestao-visual): só var(--token), nunca hex; card com hover/foco em --line-cyan;
   cabeçalho de tabela navy com texto branco fixo; selo = cor de status a 13% + texto na cor. */

html, body { margin: 0; background: var(--bg-main); color: var(--text-main); font: 13.5px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--brand-navy); text-decoration: none; }
a:hover { color: var(--line-cyan); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--line-cyan); outline-offset: 2px; }
h1 { font: 700 30px/1.05 var(--font-display); color: var(--brand-navy); margin: 0 0 4px; }
.page-subtitle { margin: 0; color: var(--text-secondary); }
main { padding: 22px 28px 90px; }

/* ---------- Header (common.js injeta .btn-update e "Sair" no fim de .header-inner) ---------- */
header { position: sticky; top: 0; z-index: var(--z-header); background: var(--card-1); border-bottom: 1px solid var(--border-strong); }
.header-inner { display: flex; align-items: center; gap: 16px; padding: 10px 28px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-logo { background: var(--logo-plate); border-radius: var(--radius-sm); padding: 5px 8px; display: flex; }
.brand img { height: 26px; width: auto; display: block; }
.brand-divider { width: 1px; height: 28px; background: var(--border-strong); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font: 700 16px var(--font-display); color: var(--brand-navy); white-space: nowrap; }
.brand-subtitle { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

/* Botão de tema: sol no claro, lua no escuro — troca só por CSS */
.theme-toggle { font: 600 13px var(--font-display); background: var(--card-2); color: var(--text-main); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-toggle:hover { background: var(--card-3); border-color: var(--line-cyan); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* Login (sem header): botão de tema no canto e logo maior sobre a placa clara */
.login-theme { position: fixed; top: 16px; right: 16px; }
.brand-logo.login-logo { display: inline-flex; padding: 8px 12px; }
.login-logo img { height: 40px; width: auto; display: block; }

/* Sem overflow no nav: qualquer overflow diferente de visible recorta o submenu "Cadastros" (que abre
   para baixo, fora do nav). Em tela estreita os itens quebram linha em vez de rolar. */
nav { flex: 1 1 580px; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; min-width: 0; }
nav a, .nav-dropdown-toggle { font: 600 13.5px var(--font-body); padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); white-space: nowrap; background: transparent; border: 0; cursor: pointer; }
nav a:hover, .nav-dropdown-toggle:hover { background: var(--card-3); color: var(--text-main); text-decoration: none; }
nav a.active, .nav-dropdown-toggle.active { color: var(--line-cyan); background: transparent; box-shadow: inset 0 -3px 0 var(--line-cyan); }
nav a.active:hover { background: var(--card-3); color: var(--line-cyan); }
.nav-dropdown { position: relative; }
.nav-dropdown-menu { background: var(--card-1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: var(--z-dropdown); }
.nav-dropdown-menu a { box-shadow: none; }

/* ---------- Botões ---------- */
button { font: 600 13px var(--font-display); background: var(--brand-navy); color: var(--on-brand); border: 0; border-radius: var(--radius-sm); padding: 9px 14px; cursor: pointer; }
button:hover { background: var(--brand-navy-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: var(--card-1); color: var(--brand-navy); border: 1px solid var(--border-strong); }
button.secondary:hover { border-color: var(--line-cyan); background: var(--card-2); }
button.danger, .removeBtn { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
button.danger:hover, .removeBtn:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
button.success { background: var(--green); color: var(--on-brand); }
button.success:hover { background: var(--green); filter: brightness(.95); }

/* Abas: ativa em --line-cyan com borda inferior; inativa em --text-secondary */
.tab-btn { background: transparent; color: var(--text-secondary); border: 0; }
.tab-btn:hover { background: var(--card-3); color: var(--text-main); }
.bloco-toggle .tab-btn.active, #budgetTabSwitch .tab-btn.active { color: var(--line-cyan); }
#budgetTabSwitch { background: none; border-bottom: 1px solid var(--border-strong); border-radius: 0; padding: 0; gap: 4px; }
#budgetTabSwitch .tab-btn { font-size: 14.5px; padding: 10px 14px 11px; border-radius: 0; }
#budgetTabSwitch .tab-btn.active { background: none; box-shadow: inset 0 -3px 0 var(--line-cyan); }

/* ---------- Formulários ---------- */
input, select, textarea { font-family: var(--font-body); border: 1px solid var(--border-strong); background: var(--card-1); color: var(--text-main); border-radius: var(--radius-sm); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--line-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--line-cyan) 25%, transparent); }
td select.pending, td input.pending { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 8%, var(--card-1)); color: var(--red); font-weight: 700; }

/* ---------- Cards e KPIs ---------- */
.card { background: var(--card-1); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color .15s; }
.card:hover, .card:focus-within { border-color: var(--line-cyan); }
.card:focus-visible { outline: 2px solid var(--line-cyan); outline-offset: 2px; }
.card-title { font: 700 16px var(--font-display); color: var(--brand-navy); }
.card-soft { background: var(--card-2); border-color: var(--line-soft); }
.card.stat { position: relative; overflow: hidden; }
.card.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-gradient); }
.stat .value { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Tabelas: cabeçalho navy + texto branco fixo nos dois temas ---------- */
/* line-height: normal mantém a altura de linha que as tabelas tinham quando as páginas estavam sem
   <!DOCTYPE> (modo quirks); com o DOCTYPE elas herdariam o 1.45 do body e cresceriam ~1,5px/linha.
   color: inherit garante a cor do texto do tema nas células. */
table { font-variant-numeric: tabular-nums; color: inherit; line-height: normal; }
thead th { background: var(--table-head-bg); color: var(--table-head-text); }
th.sortable:hover { color: var(--table-head-text); opacity: .85; }
tbody tr:hover td { background: var(--row-hover); }
/* Dashboard — Matriz: linha com IEC > 1 (custo acima da Linha Base Original) em destaque vermelho */
tr.iec-over td { background: color-mix(in srgb, var(--red) 6%, var(--card-1)); }
tr.iec-over td:first-child { box-shadow: inset 4px 0 0 var(--red); }
/* Bolinha do IEC: no selo herda a cor do selo; no Custo por Usina segue o estado */
.badge .iec-dot { background: currentColor; }
.iec-dot.is-over { background: var(--red); }
.iec-dot.is-ok { background: var(--green); }
/* Célula editável: salvo (✓ por 1,5 s) ou erro do servidor (campo volta ao valor salvo) */
td.is-saved::after { content: "✓"; color: var(--green); font-weight: 700; margin-left: 6px; }
td.is-error select, td.is-error input { border-color: var(--red); color: var(--red); }

/* ---------- Selos (só as 7 cores de status: fundo 13% + texto na cor + bolinha) ---------- */
.gvs-pill { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-display); padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.gvs-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gvs-pill--pendente { background: color-mix(in srgb, var(--orange) 13%, transparent); color: var(--orange); }
.gvs-pill--erro { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
.gvs-pill--info { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue); }
.gvs-pill--auto { background: color-mix(in srgb, var(--purple) 13%, transparent); color: var(--purple); }
.gvs-pill--neutro { background: color-mix(in srgb, var(--gray) 13%, transparent); color: var(--gray); }

/* ---------- Aviso inline (erro de carga, trava, info) ---------- */
.gvs-aviso { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--card-1); color: var(--text-main); }
.gvs-aviso--erro { border-color: var(--red); background: color-mix(in srgb, var(--red) 13%, var(--card-1)); }
.gvs-aviso--travado { border-color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--card-1)); }
.gvs-aviso--info { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, var(--card-1)); }

/* ---------- Toast (substitui alert()) — visual mínimo, só tokens ---------- */
.gvs-toast-stack { position: fixed; top: 72px; right: 22px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: calc(100vw - 32px); }
.gvs-toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card-1); color: var(--text-main); border: 1px solid var(--border-strong); border-left: 4px solid var(--blue); box-shadow: var(--shadow); }
.gvs-toast--sucesso, .gvs-toast--travado { border-left-color: var(--green); }
.gvs-toast--erro { border-left-color: var(--red); }
.gvs-toast-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gvs-toast-title { font: 700 14px var(--font-display); }
.gvs-toast-text { font-size: 12.5px; color: var(--text-secondary); }
.gvs-toast-actions { display: flex; gap: 12px; }
.gvs-toast-actions:empty { display: none; }
.gvs-toast-action, .gvs-toast-close { font: 600 12.5px var(--font-display); background: none; border: 0; padding: 0; color: var(--brand-navy); cursor: pointer; }
.gvs-toast-action:hover, .gvs-toast-close:hover { background: none; color: var(--line-cyan); }
.gvs-toast-close { color: var(--text-secondary); font-size: 14px; }

/* ---------- Modal único (ui.modal) — visual mínimo, só tokens ---------- */
.gvs-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; }
.gvs-modal { width: 100%; max-width: 540px; max-height: 86vh; overflow: auto; background: var(--card-1); color: var(--text-main); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.gvs-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-strong); }
.gvs-modal-title { font: 700 16px var(--font-display); color: var(--brand-navy); }
.gvs-modal-close { width: 30px; height: 30px; padding: 0; }
.gvs-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.gvs-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-strong); }

/* ---------- Carregando e vazio ---------- */
.gvs-skeleton { display: block; height: 14px; margin: 6px 0; border-radius: var(--radius-sm); background: var(--card-3); animation: gvs-pulse 1.2s ease-in-out infinite; }
@keyframes gvs-pulse { 50% { opacity: .45; } }
.gvs-vazio-cell { padding: 40px 20px !important; text-align: center; }
.gvs-vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 32px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); text-align: center; }
.gvs-vazio-title { font: 700 16px var(--font-display); color: var(--text-main); }

/* ---------- Reorçamento ---------- */
/* Estado de cada bloco na aba (data-status vem de reorcamento-aprovacao.js) */
#planBlocoTabs .tab-btn[data-status="aprovado"]::after { content: " 🔒"; font-size: 11px; }
#planBlocoTabs .tab-btn[data-status="edicao"]::after { content: " ●"; font-size: 9px; opacity: .7; }
/* KPIs: continuam filhos diretos de #planKpiStrip (o script inline lê o texto deles);
   4 grandes (Contribuições, Custos, Resultado, Payback) e os demais compactos, por flex-basis */
#planKpiStrip { display: flex; flex-wrap: wrap; }
#planKpiStrip > .plan-kpi { flex: 1 1 150px; }
#planKpiStrip > .plan-kpi-highlight, #planKpiStrip > .plan-kpi-resultado,
#planKpiStrip > .plan-kpi:has(#planKpiContribVal), #planKpiStrip > .plan-kpi:has(#planKpiPaybackVal) { flex: 1 1 250px; }
#planKpiStrip .plan-kpi-value { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Linha do tempo (histórico do Memorial) — padrão de timeline da skill gestao-visual:
   trilho vertical, avatar com o bloco em --brand-gradient (texto branco fixo), bolha em --card-1 */
.an-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.an-timeline::before { content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: var(--border-strong); }
.an-timeline-item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.an-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-gradient); color: var(--table-head-text); font: 700 11px var(--font-display); position: relative; z-index: 1; }
.an-bubble { flex: 1; background: var(--card-1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; }
.an-author { font: 700 13px var(--font-display); color: var(--line-cyan); margin-right: 6px; }
.an-note { margin: 6px 0 0; color: var(--text-secondary); }
.an-timeline-item:not(.is-ativa) .an-avatar { opacity: .7; }

/* ---------- Classificar ---------- */
/* Os filtros de Classificar NÃO grudam no topo: a tabela já rola dentro da própria caixa (com o
   cabeçalho fixo), e a barra grudada cobria os cabeçalhos ordenáveis ao rolar a página. */
/* "Mostrar apenas pendentes" vira pílula; vermelha quando marcado */
.filtro-pendentes { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--card-1); font: 600 12.5px var(--font-display); }
.filtro-pendentes:has(input:checked) { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 13%, var(--card-1)); }
.progress-head .gvs-pill { margin-left: 8px; font-size: 11px; padding: 1px 8px; }

@media (max-width: 900px) {
  .header-inner { padding: 8px 16px; gap: 10px; }
  nav { order: 10; flex-basis: 100%; }
  main { padding: 16px 16px 90px; }
}