/*
 * Componentes compartilhados pelo Planejamento e pela Estratégia de Aquisição de Bens:
 * etapas, painéis, campos, botões, indicadores, gráfico, tabelas e avisos.
 * Carregar depois de base.css e antes do <style> da página.
 */
header{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px;}
.steps{display:flex; gap:4px; margin-bottom:22px; border-bottom:1px solid var(--line); overflow-x:auto;}
.step-btn.active{color:var(--ink); border-bottom:2px solid var(--gold); padding-bottom:9px;}
.step-btn.active .n{border-color:var(--gold-dim); color:var(--gold);}
.step-panel{display:none;}
.step-panel.active{display:block;}
section.panel{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px 20px 8px; margin-bottom:18px;}
section.panel .sub{font-size:12.5px; color:var(--ink-faint); margin:0 0 16px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 18px; margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--ink-muted); margin-bottom:6px;}
.row-input{display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--panel-2);}
.row-input:focus-within{border-color:var(--teal);}
.row-input.invalid{border-color:var(--red);}
.row-input select option{background:var(--panel); color:var(--ink);}
.hint{font-size:11.5px; color:var(--ink-faint); margin-top:5px;}
.seg button.active{background:var(--btn); color:var(--on-btn); font-weight:600;}
button.ghost:hover{border-color:var(--teal);}
.status.ok{background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok); border:1px solid var(--ok);}
.status.no{background:color-mix(in srgb, var(--red) 10%, transparent); color:var(--red); border:1px solid var(--red);}
.lrow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-top:1px dashed var(--line); font-size:12.5px;}
.lrow .k{color:var(--ink-muted);}
.unit.hoje{color:var(--teal); border:1px solid var(--teal-dim);}
.unit.nom{color:var(--ink-faint); border:1px solid var(--line);}
.chart-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--ink-muted); margin-top:8px;}
.legend span::before{content:''; display:inline-block; width:14px; height:3px; border-radius:2px; background:var(--c); margin-right:6px; vertical-align:middle;}
.tooltip{position:absolute; pointer-events:none; background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:8px 10px; font-size:11.5px; color:var(--ink); white-space:nowrap; display:none; z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.18);}
.tooltip .t{color:var(--ink-faint); margin-bottom:3px;}
.table-scroll{overflow-x:auto;}
.explain{background:var(--line-soft); border:1px solid var(--line); border-left:3px solid var(--teal-dim); border-radius:5px; padding:12px 16px; font-size:12.5px; color:var(--ink-muted); margin-bottom:18px;}
.warn-box{display:flex; gap:10px; align-items:flex-start; background:var(--line-soft); border:1px solid var(--line); border-left:3px solid var(--gold-dim); border-radius:5px; padding:10px 14px; font-size:12px; color:var(--ink-muted); margin-bottom:18px;}
.err-banner{display:none; background:color-mix(in srgb, var(--red) 10%, transparent); border:1px solid var(--red); color:var(--ink); border-radius:5px; padding:10px 14px; font-size:12.5px; margin-bottom:16px;}
.err-banner.show{display:block;}
.stale{opacity:.3; filter:grayscale(.6); pointer-events:none; user-select:none; transition:opacity .15s ease;}
#printArea{display:none;}