:root {
  --bg: #f4f6f9;
  --superficie: #ffffff;
  --borda: #dde3ec;
  --texto: #16202e;
  --fraco: #66748a;
  --primaria: #1f3864;
  --ok-bg: #e6f6ec;
  --ok-fg: #1b7a45;
  --nok-bg: #fdeaea;
  --nok-fg: #b3261e;
  --c-dem: #1f3864;
  --c-cap: #5b9bd5;
  --c-ok: #2e9e5b;
  --c-nok: #d24b45;
  --c-nec: #d97706;
  --c-atual: #1f3864;
  /* uma cor por cenario no comparativo */
  --c-cen1: #2e9e5b;
  --c-cen2: #1f3864;
  --c-cen3: #d24b45;
  --c-cen4: #d97706;
  --c-cen5: #7c3aed;

  --gutter: clamp(14px, 2.2vw, 44px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--bg);
}

/* ------------------------------------------------------------------ topo */
.topo {
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gutter);
  background: var(--primaria); color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.marca { font-size: 15px; }
.marca .ano { opacity: .7; margin-left: 6px; }
.topo nav { display: flex; gap: 4px; margin-left: auto; }
.topo nav a {
  color: #cfd9ea; text-decoration: none; padding: 6px 12px; border-radius: 6px;
}
.topo nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topo nav a.ativo { background: #fff; color: var(--primaria); font-weight: 600; }
.troca-cenario {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: #cfd9ea;
}
.troca-cenario select {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px;
}
.troca-cenario select option { color: var(--texto); background: #fff; }

.meta-chip {
  background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 20px; font-size: 12px;
}

main { padding: 22px var(--gutter) 48px; width: 100%; }

h1 { font-size: 21px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 30px 0 10px; color: var(--primaria); }
.sub { color: var(--fraco); margin: 0 0 18px; }
.fraco { color: var(--fraco); font-weight: 400; }
code { background: #e8edf5; padding: 1px 5px; border-radius: 4px; }

/* --------------------------------------------------------------- avisos */
.flash, .alerta, .nota, .ok-check {
  padding: 10px 14px; border-radius: 8px; margin: 0 0 16px;
  border-left: 4px solid;
}
.flash { background: var(--ok-bg); border-color: var(--ok-fg); margin: 14px var(--gutter) 0; }
.flash p { margin: 0; }
.alerta { background: var(--nok-bg); border-color: var(--nok-fg); }
.nota { background: #fff8e6; border-color: #d99b06; }
.ok-check { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg); }

/* ----------------------------------------------------------------- abas */
.abas-area { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.aba {
  padding: 7px 16px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); text-decoration: none; color: var(--texto);
}
.aba:hover { border-color: var(--primaria); }
.aba.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); font-weight: 600; }

.abas-canal {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: -8px 0 18px;
}
.rot-abas { font-size: 12px; color: var(--fraco); text-transform: uppercase;
            letter-spacing: .06em; margin-right: 4px; }
.aba.canal { padding: 5px 13px; font-size: 13px; border-radius: 6px; }
.aba.canal.vazio {
  color: var(--fraco); background: #eceff4; border-style: dashed; cursor: not-allowed;
}

.filtro-mes { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  padding: 4px 11px; border-radius: 14px; font-size: 12px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borda); color: var(--texto);
}
.chip.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }

/* -------------------------------------------------------------- cartoes */
.cartoes {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 18px;
}
/* --------------------------------------------------------------- cenarios */
.cartao.cenario, .cartao.novo { min-width: 250px; display: flex; flex-direction: column; }
.cartao.cenario.ativo { border-color: var(--primaria); box-shadow: 0 0 0 2px #d7e0f0; }
.cartao .nome { font-size: 18px; }
.cartao .desc { margin: 2px 0 8px; font-size: 12px; color: var(--fraco); }
.cartao .tag-ativo, .tag-ativo {
  background: var(--primaria); color: #fff; font-size: 10px; padding: 1px 6px;
  border-radius: 10px; vertical-align: middle;
}
dl.mini { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 0 0 10px; }
dl.mini dt { font-size: 12px; color: var(--fraco); }
dl.mini dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.acoes-cartao { margin-top: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acoes-cartao form { display: inline; }
.btn.peq, .btn-sec.peq, .btn-perigo.peq { padding: 4px 10px; font-size: 12px; }
.btn-perigo {
  background: var(--nok-bg); color: var(--nok-fg); border: 1px solid var(--nok-fg);
  border-radius: 7px; cursor: pointer; font: inherit;
}
.btn-perigo:hover { background: var(--nok-fg); color: #fff; }
details.editar { width: 100%; }
details.editar summary {
  cursor: pointer; font-size: 12px; color: var(--primaria); padding: 4px 0;
}
details.editar form, .cartao.novo form { display: flex; flex-direction: column; gap: 6px; }
details.editar label, .cartao.novo label { font-size: 12px; color: var(--fraco); }
details.editar input, details.editar textarea,
.cartao.novo input, .cartao.novo select, .cartao.novo textarea {
  width: 100%; padding: 5px 7px; font: inherit; font-size: 13px; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 5px; display: block; margin-top: 2px;
}
.cartao.novo label.inline { display: flex; align-items: center; gap: 6px; }
.cartao.novo label.inline input { width: auto; margin: 0; }
.cartao.novo { border-style: dashed; }

.cartao .rot { display: block; font-size: 12px; color: var(--fraco); }
.cartao strong { display: block; font-size: 22px; margin: 2px 0; }
.cartao .rot strong { display: inline; font-size: 13px; color: var(--texto); }

/* -------------------------------------------------------------- tabelas */
.rolagem { overflow-x: auto; background: var(--superficie);
           border: 1px solid var(--borda); border-radius: 10px; }
.rolagem.alta { max-height: 70vh; overflow-y: auto; }

.tabela { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 7px 11px; text-align: right; white-space: nowrap; }
.tabela thead th {
  background: var(--primaria); color: #fff; font-weight: 600; font-size: 12px;
  text-align: right; position: sticky; top: 0; z-index: 2;
}
.tabela th.mes { text-align: left; font-weight: 600; }
.tabela tbody tr { border-top: 1px solid var(--borda); }
.tabela tbody tr:hover { background: #eef3fa; }
.tabela tfoot td, .tabela tfoot th {
  border-top: 2px solid var(--primaria); font-weight: 600; background: #f0f4fa;
}
.tabela.compacta th, .tabela.compacta td { padding: 4px 10px; font-size: 13px; }

.linha-ok  { background: var(--ok-bg); }
.linha-nok { background: var(--nok-bg); }
.sem-demanda { background: #f0f0f2; color: var(--fraco); }
/* desdobramento de uma linha consolidada nas duas equipes */
.sub-linha { background: #fbfcfe; color: var(--fraco); font-size: 13px; }
.sub-linha th.mes { padding-left: 22px; font-weight: 400; }
.sub-linha:hover { background: #eef3fa; }
tr.sub-total th, tr.sub-total td { font-weight: 700; border-top: 2px solid #b9c4d6; }
.col-na, .col-na input { opacity: .45; }
.destaque { font-weight: 700; }
.destaque.ok  { color: var(--ok-fg); }
.destaque.nok { color: var(--nok-fg); }
.bom  { color: var(--ok-fg); }
.ruim { color: var(--nok-fg); font-weight: 600; }
.neg  { color: var(--nok-fg); }
.tag { font-size: 10px; background: #dcdfe6; padding: 1px 5px; border-radius: 3px; }
.tag-erro {
  background: var(--nok-fg); color: #fff; border-radius: 50%;
  padding: 0 6px; font-weight: 700;
}

/* ------------------------------------------------------------ formulario */
.tabela.editavel { background: var(--superficie); }
.tabela.editavel input {
  /* preenche a coluna: em tela larga o campo cresce junto e fica sob o seu cabecalho */
  width: 100%; min-width: 72px; max-width: 190px;
  padding: 5px 8px; text-align: right;
  border: 1px solid var(--borda); border-radius: 5px; font: inherit;
}
.tabela.editavel td { padding: 5px 11px; }
.tabela.editavel input:focus { outline: 2px solid var(--c-cap); border-color: var(--c-cap); }
.tabela.editavel td.ro { color: var(--fraco); }
button.aplicar {
  display: block; margin: 4px auto 0; font-size: 10px; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 1px 6px;
}
button.aplicar:hover { background: rgba(255,255,255,.32); }
button.aplicar.feito { background: var(--c-ok); border-color: var(--c-ok); }

/* ---------------------------------------------------------- base de dados */
.tabela .ini-grupo { border-left: 2px solid var(--borda); }
.tabela thead th.ini-grupo { border-left-color: rgba(255,255,255,.35); }
.tabela thead th.col-base { background: #2d4f86; }
.tabela.base input { min-width: 84px; max-width: 120px; }
.tabela td.alterado { color: #8a5a00; font-weight: 600; }
.tabela td.alterado input { background: #fff8e6; border-color: #d99b06; }
.semana { color: var(--fraco); font-weight: 400; font-size: 11px; margin-left: 5px; }

.opcoes {
  margin: 18px 0; padding: 12px 16px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 10px;
}
.opcoes legend { font-weight: 600; color: var(--primaria); padding: 0 6px; }
.opcoes label { display: flex; gap: 8px; align-items: baseline; margin: 6px 0; }
.opcoes label span { color: var(--fraco); }
.opcoes label strong { color: var(--texto); }

.acoes { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.exportar { display: flex; gap: 8px; margin: 0 0 12px; }
.btn, .btn-sec {
  display: inline-block; padding: 8px 16px; border-radius: 7px; text-decoration: none;
  border: 1px solid var(--primaria); cursor: pointer; font: inherit;
}
.btn { background: var(--primaria); color: #fff; }
.btn:hover { background: #16294a; }
.btn-sec { background: var(--superficie); color: var(--primaria); }
.btn-sec:hover { background: #e8eefa; }

/* -------------------------------------------------------------- graficos */
.graficos {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.graficos.largos { grid-template-columns: 1fr; }
.painel {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; padding: 10px;
}
.grafico { width: 100%; height: auto; display: block; }
.grafico .grid { stroke: #e3e8f0; stroke-width: 1; }
.grafico text { font: 11px "Segoe UI", sans-serif; fill: var(--fraco); }
.grafico .lbl-y { text-anchor: end; }
.grafico .lbl-x { text-anchor: middle; }
.grafico .lbl-leg { fill: var(--texto); }
.grafico .lbl-meta { fill: var(--c-nok); font-weight: 600; text-anchor: start; }
.grafico .b-dem { fill: var(--c-dem); }
.grafico .b-cap { fill: var(--c-cap); }
.grafico .b-ok  { fill: var(--c-ok); }
.grafico .b-nok { fill: var(--c-nok); }
.grafico .meta  { stroke: var(--c-nok); stroke-width: 1.6; stroke-dasharray: 6 4; }
.grafico polyline { fill: none; stroke-width: 2.2; }
.grafico .ln-nec { stroke: var(--c-nec); }
.grafico .ln-atual { stroke: var(--c-atual); }
.grafico .pt-nec { fill: var(--c-nec); }
.grafico .pt-atual { fill: var(--c-atual); }

footer {
  padding: 16px var(--gutter) 30px; color: var(--fraco); font-size: 12px;
  border-top: 1px solid var(--borda);
}

/* ---------------------------------------------------------- login / usuarios */
.menu-usuario { position: relative; font-size: 13px; }
.menu-usuario summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px; color: #fff; white-space: nowrap;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover, .menu-usuario[open] summary { background: rgba(255,255,255,.12); }
.menu-usuario .perfil {
  font-size: 10px; padding: 1px 6px; border-radius: 10px; text-transform: uppercase;
  background: rgba(255,255,255,.2);
}
.menu-usuario .perfil.leitura { background: #d99b06; color: #fff; }
.menu-usuario-corpo {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(16,32,46,.15);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.menu-usuario-corpo .fraco { font-size: 12px; }
.menu-usuario-corpo a { color: var(--primaria); text-decoration: none; }
.menu-usuario-corpo a:hover, button.link:hover { text-decoration: underline; }
button.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--nok-fg);
  cursor: pointer; text-align: left;
}

.caixa-login {
  max-width: 380px; margin: 40px auto; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 12px; padding: 24px 26px;
}
.sub.peq { font-size: 12px; margin: 14px 0 0; }
.form-pilha { display: flex; flex-direction: column; gap: 12px; }
.form-pilha label, .form-linha label { font-size: 12px; color: var(--fraco); }
.form-pilha input, .form-linha input, .form-linha select,
.tabela.usuarios input[type=text], .tabela.usuarios input[type=password], .tabela.usuarios select {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 14px; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 6px; display: block; margin-top: 3px;
  background: #fff;
}
.form-pilha .btn { margin-top: 4px; }
.form-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-linha label { flex: 1 1 160px; }
.form-linha label.inline { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding-bottom: 9px; }
.form-linha label.inline input { width: auto; margin: 0; }

.tabela.usuarios td, .tabela.usuarios th { vertical-align: middle; }
.tabela.usuarios .esq { text-align: left; }
.tabela.usuarios .centro { text-align: center; }
.tabela.usuarios input[type=text], .tabela.usuarios input[type=password],
.tabela.usuarios select { margin: 0; padding: 5px 7px; font-size: 13px; min-width: 130px; }
.tabela.usuarios tr.inativo th, .tabela.usuarios tr.inativo td { opacity: .55; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.acoes-linha form { display: inline; }

/* perfil somente leitura: a tabela de parametros vira consulta */
fieldset.trava { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.trava:disabled button.aplicar { display: none; }
fieldset.trava:disabled input { background: transparent; border-color: transparent; color: var(--texto); }