/* Portal Inovação — linguagem visual de painel elétrico:
   fundo cinza de chapa (RAL 7035), abas como marcadores de borne num trilho DIN,
   situações como sinaleiros (verde, âmbar, vermelho). */

:root {
  --chapa: #e6e8e5;
  --painel: #fbfbf9;
  --tinta: #24292b;
  --tinta-suave: #5d6669;
  --trilho: #a7aeb0;
  --trilho-escuro: #7f888b;
  --linha: #d3d7d4;
  --sinal: #1f4e8c;
  --sinal-escuro: #173c6c;
  --ok: #2e7d4f;
  --atencao: #b77d00;
  --falha: #b3261e;
  --raio: 3px;
  --fonte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --fonte-marcador: "Barlow Semi Condensed", "Barlow", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--chapa); color: var(--tinta);
  font-family: var(--fonte); line-height: 1.5;
}
a { color: var(--sinal); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #f2b705; outline-offset: 2px;
}

/* ---------- topo: identificação do painel + trilho com as abas ---------- */
.topo { background: var(--tinta); color: #eef0ee; }
.topo-interno {
  max-width: 1120px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.identificacao { font-family: var(--fonte-marcador); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; }
.identificacao small { font-weight: 400; color: #b9c0c2; margin-left: .5rem; }
.usuario { font-size: .9rem; color: #c9cfd1; display: flex; gap: 1rem; align-items: center; }
.usuario a { color: #eef0ee; }

.trilho {
  /* perfil do trilho DIN: faixa metálica com os furos oblongos */
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0,0,0,.18) 34px 52px, transparent 52px 64px) center 50% / 100% 7px no-repeat,
    linear-gradient(var(--trilho), #b9bfc1 45%, var(--trilho));
  border-top: 1px solid var(--trilho-escuro); border-bottom: 1px solid var(--trilho-escuro);
}
.trilho nav { max-width: 1120px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.marcador {
  font-family: var(--fonte-marcador); font-weight: 600; font-size: .98rem;
  padding: .32rem .9rem .3rem; border-radius: 2px; text-decoration: none;
  background: #f4f4f0; color: var(--tinta); border: 1px solid #8c9496;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.marcador:hover { background: #fff; }
.marcador.ativo { background: var(--sinal); color: #fff; border-color: var(--sinal-escuro); }
.marcador.em-breve { color: #7a8285; background: #dfe2df; border-style: dashed; }

/* ---------- conteúdo ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.folha { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem 1.75rem; }
.folha + .folha { margin-top: 1.25rem; }
h1 { font-family: var(--fonte-marcador); font-weight: 600; font-size: 1.75rem; line-height: 1.2; margin: 0 0 .35rem; }
h2 { font-family: var(--fonte-marcador); font-weight: 600; font-size: 1.3rem; margin: 0 0 .75rem; }
.intro { color: var(--tinta-suave); margin: 0 0 1.25rem; max-width: 70ch; }
.subnav { display: flex; gap: 1.25rem; margin: 0 0 1.25rem; font-size: .95rem; border-bottom: 1px solid var(--linha); }
.subnav a { text-decoration: none; color: var(--tinta-suave); padding: .4rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a.ativo { color: var(--tinta); border-color: var(--sinal); font-weight: 600; }

/* ---------- formulários ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: .9rem 0 .3rem; }
label .dica { font-weight: 400; color: var(--tinta-suave); }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select, textarea {
  width: 100%; padding: .55rem .65rem; font: inherit; color: inherit;
  background: #fff; border: 1px solid #b5bcbd; border-radius: var(--raio);
}
textarea { min-height: 6rem; resize: vertical; }
textarea.codigo { min-height: 18rem; font-size: .86rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.grade { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opcao { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.opcao input { margin-top: .3rem; }
.acoes { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.4rem; }

.botao, button {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
  padding: .55rem 1.15rem; border-radius: var(--raio); border: 1px solid var(--sinal-escuro);
  background: var(--sinal); color: #fff;
}
.botao:hover, button:hover { background: var(--sinal-escuro); }
.botao.secundario, button.secundario { background: #fff; color: var(--tinta); border-color: #9aa2a4; }
.botao.secundario:hover, button.secundario:hover { background: #eef0ee; }
button.perigo { background: #fff; color: var(--falha); border-color: var(--falha); }
button:disabled { opacity: .6; cursor: wait; }

/* ---------- avisos ---------- */
.aviso { padding: .75rem 1rem; border-radius: var(--raio); margin: 0 0 1rem; border-left: 4px solid; background: #fff; }
.aviso.erro { border-color: var(--falha); background: #fbeceb; }
.aviso.ok { border-color: var(--ok); background: #e9f4ed; }
.aviso.atencao { border-color: var(--atencao); background: #fdf5e2; }
.aviso ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* ---------- sinaleiros de situação ---------- */
.sinaleiro { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .92rem; }
.sinaleiro::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--trilho); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.sinaleiro.verde::before { background: var(--ok); }
.sinaleiro.ambar::before { background: #e3a10b; }
.sinaleiro.vermelho::before { background: var(--falha); }
.sinaleiro.azul::before { background: var(--sinal); }
.sinaleiro.pulsando::before { animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sinaleiro.pulsando::before { animation: none; } }

/* ---------- tabelas ---------- */
.rolagem { overflow-x: auto; }
table.lista { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.lista th { text-align: left; font-weight: 600; color: var(--tinta-suave); padding: .5rem .6rem; border-bottom: 2px solid var(--linha); }
table.lista td { padding: .55rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.lista tr:hover td { background: #f2f3f0; }
.cod { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.vazio { color: var(--tinta-suave); padding: 1.5rem 0; }
.pequeno { font-size: .85rem; color: var(--tinta-suave); }

/* ---------- revisão ---------- */
.revisao { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.lateral { position: sticky; top: 1rem; }
.previa { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; background: #fff; max-height: 34rem; overflow: auto; }
.previa table { border-collapse: collapse; } .previa th, .previa td { border: 1px solid var(--linha); padding: .3rem .5rem; text-align: left; }
details summary { cursor: pointer; font-weight: 600; margin: .75rem 0 .5rem; }
dl.dados { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .92rem; }
dl.dados dt { color: var(--tinta-suave); } dl.dados dd { margin: 0; }

.entrada { max-width: 400px; margin: 4rem auto; }

@media (max-width: 860px) {
  .revisao { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .folha { padding: 1.1rem; }
  .identificacao small { display: none; }
}

/* espaçamento entre blocos que não são .folha */
.revisao, .folha + .aviso, .aviso + .revisao { margin-top: 1.25rem; }
.aviso + .revisao { margin-top: 0; }

/* ---------- escolha do tipo de descrição, com custo ---------- */
fieldset.tipos { border: 1px solid var(--linha); border-radius: var(--raio); padding: .4rem 1rem .9rem; margin: 1.1rem 0 0; background: #fff; }
fieldset.tipos legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.tipos-cabeca, .tipo { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 7.5rem; gap: .75rem; align-items: center; }
.tipos-cabeca { font-size: .8rem; color: var(--tinta-suave); text-align: right; padding: .2rem 0 .1rem; }
.tipo { font-weight: 400; margin: 0; padding: .6rem .5rem; border-top: 1px solid var(--linha); cursor: pointer; position: relative; padding-left: 2rem; }
.tipo input { position: absolute; left: .45rem; top: .85rem; }
.tipo:has(input:checked) { background: #eef3f9; }
.tipo-texto { display: flex; flex-direction: column; }
.tipo-custo { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-suave); line-height: 1.2; }
.tipo-custo small { display: block; font-size: .72rem; }
.tipo-custo.ativo { color: var(--tinta); font-weight: 600; }
.tipo-custo.ativo small { font-weight: 400; }
@media (max-width: 600px) {
  .tipos-cabeca { display: none; }
  .tipo { grid-template-columns: 1fr 1fr; }
  .tipo-texto { grid-column: 1 / -1; }
  .tipo-custo { text-align: left; }
  .tipo-custo::before { display: block; font-weight: 400; font-size: .78rem; color: var(--tinta-suave); }
  .tipo-custo[data-pesquisa=nao]::before { content: "Sem pesquisa"; }
  .tipo-custo[data-pesquisa=sim]::before { content: "Com pesquisa"; }
}

/* ---------- comparação Bling hoje × novo ---------- */
table.comparar td { vertical-align: middle; }
table.comparar td:first-child { width: 3.5rem; text-align: center; }
table.comparar input:not([type=checkbox]), table.comparar select { padding: .35rem .5rem; }
table.comparar tr.fiscal td { background: #fdf8ea; }
table.comparar input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.duplo { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; min-width: 12rem; }
.duplo.triplo { grid-template-columns: 1fr 1fr 1fr; min-width: 15rem; }

/* ---------- caixinhas de campos ---------- */
fieldset.campos .atalhos { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }
fieldset.campos .atalhos button { padding: .3rem .8rem; font-size: .88rem; font-weight: 600; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; }
.grade-campos .opcao { margin: .55rem 0 0; }
[data-so-atualizar][hidden] { display: none; }
.grupo-fiscal { margin-top: .9rem; padding: .6rem .75rem .4rem; border-left: 3px solid var(--atencao); background: #fdf8ea; border-radius: var(--raio); }
.grupo-fiscal .grade-campos .opcao { margin-top: .4rem; }
[data-so-cadastrar][hidden], [data-rotulo-cadastrar][hidden], [data-rotulo-atualizar][hidden] { display: none; }

/* ---------- Mercado Eletrônico ---------- */
.barra-mover { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .75rem 1rem; margin: .75rem 0 1rem;
  background: #eef3f9; border: 1px solid #c9d6e6; border-radius: var(--raio); position: sticky; top: 0; z-index: 2; }
.grupo-marca + .grupo-marca { margin-top: 1.5rem; }
.grupo-marca h2 { font-size: 1.15rem; margin-bottom: .4rem; }
.grupo-marca h2 label { font-size: 1.15rem; font-family: var(--fonte-marcador); }
table.comparar td.cod { white-space: nowrap; }
input[name$="-descricao"] { min-width: 15rem; }

/* ---------- gastos ---------- */
table.gastos td.cod { white-space: nowrap; }
table.gastos tr.subtotal td { border-top: 2px solid var(--linha); font-weight: 600; }
table.gastos tr.total td { font-weight: 600; background: #eef3f9; }