/* Painel da integração Topcon ↔ Sienge.
   Cores por papel, com os valores da paleta de referência validada
   (validate_palette.js): uma série em azul, estados fixos sempre com ícone e
   rótulo, texto só nas tintas de texto. Modo escuro com passos próprios. */

:root {
  color-scheme: light;
  --plano: #f9f9f7;
  --superficie: #fcfcfb;
  --superficie-2: #f3f2ee;
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  --tinta-3: #898781;
  --grade: #e1e0d9;
  --eixo: #c3c2b7;
  --borda: rgba(11, 11, 11, 0.10);
  --lavagem: rgba(11, 11, 11, 0.05);
  --serie-1: #2a78d6;
  --serie-1-lavagem: rgba(42, 120, 214, 0.10);
  --bom: #0ca30c;
  --alerta: #fab219;
  --serio: #ec835a;
  --critico: #d03b3b;
  --sucesso-texto: #006300;
  --raio: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plano: #0d0d0d;
    --superficie: #1a1a19;
    --superficie-2: #232321;
    --tinta: #ffffff;
    --tinta-2: #c3c2b7;
    --tinta-3: #898781;
    --grade: #2c2c2a;
    --eixo: #383835;
    --borda: rgba(255, 255, 255, 0.10);
    --lavagem: rgba(255, 255, 255, 0.06);
    --serie-1: #3987e5;
    --serie-1-lavagem: rgba(57, 135, 229, 0.14);
    --sucesso-texto: #0ca30c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0d0d0d;
  --superficie: #1a1a19;
  --superficie-2: #232321;
  --tinta: #ffffff;
  --tinta-2: #c3c2b7;
  --tinta-3: #898781;
  --grade: #2c2c2a;
  --eixo: #383835;
  --borda: rgba(255, 255, 255, 0.10);
  --lavagem: rgba(255, 255, 255, 0.06);
  --serie-1: #3987e5;
  --serie-1-lavagem: rgba(57, 135, 229, 0.14);
  --sucesso-texto: #0ca30c;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--plano); color: var(--tinta); }
body { font-size: 14px; line-height: 1.45; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--serie-1); outline-offset: 2px; }

/* ----------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-cartao {
  width: min(380px, 100%); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; padding: 28px; display: grid; gap: 6px;
}
.login-titulo { font-size: 20px; margin: 0; }
.login-sub { margin: 0 0 14px; color: var(--tinta-2); }
.login-erro { min-height: 20px; margin: 6px 0; color: var(--critico); font-weight: 600; }

/* ---------------------------------------------------------------- layout */
.app {
  display: grid; min-height: 100vh;
  grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "topo topo" "menu principal";
}
.topo {
  grid-area: topo; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--superficie); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 5;
}
body[data-ambiente="producao"] .topo { box-shadow: inset 0 3px 0 var(--critico); }
.marca { font-weight: 700; white-space: nowrap; }
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atualizado, .usuario { color: var(--tinta-2); font-size: 13px; }
.menu {
  grid-area: menu; padding: 16px 10px; border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 2px; background: var(--superficie);
}
.menu a {
  display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none;
  color: var(--tinta-2); font-weight: 500;
}
.menu a:hover { background: var(--lavagem); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--serie-1-lavagem); color: var(--tinta); font-weight: 650; }
.principal { grid-area: principal; padding: 20px 24px 48px; min-width: 0; }
.titulo-visao { font-size: 22px; margin: 0 0 16px; }
.conteudo { display: grid; gap: 16px; transition: opacity 0.15s; }
.conteudo.recarregando { opacity: 0.6; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topo" "menu" "principal"; }
  .menu { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borda); }
  .menu a { white-space: nowrap; }
  .principal { padding: 16px; }
}

/* ------------------------------------------------------------- elementos */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  padding: 16px 18px; min-width: 0;
}
.cartao-titulo { font-size: 15px; margin: 0 0 12px; }
.cartao-sub { color: var(--tinta-2); margin: -6px 0 12px; }
.grade-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grade-sistemas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 520px) { .grade-sistemas, .grade-2 { grid-template-columns: 1fr; } }
.vazio { color: var(--tinta-2); margin: 4px 0; }
.nota { color: var(--tinta-2); font-size: 13px; margin: 8px 0 0; }
.linha-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--tinta-2); }

.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tile {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px;
}
.tile-rotulo { color: var(--tinta-2); font-size: 13px; }
.tile-valor { font-size: 28px; font-weight: 650; margin-top: 2px; }
.tile-detalhe { color: var(--tinta-2); font-size: 13px; margin-top: 2px; }

.heroi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px;
}
body[data-ambiente="producao"] .heroi { box-shadow: inset 4px 0 0 var(--critico); }
.heroi-rotulo { color: var(--tinta-2); font-size: 13px; }
.heroi-valor { font-size: 48px; font-weight: 700; line-height: 1.05; }
.heroi-estados { display: grid; gap: 6px; }

.botao, .botao-leve, .botao-perigo, .botao-perigo-leve {
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 550; white-space: nowrap;
  border: 1px solid var(--borda); background: var(--superficie);
}
.botao:hover, .botao-leve:hover, .botao-perigo-leve:hover { background: var(--lavagem); }
.botao-leve { border-color: transparent; background: transparent; color: var(--tinta-2); }
.botao-cheio { background: var(--serie-1); border-color: var(--serie-1); color: #fff; padding: 9px 12px; margin-top: 4px; }
.botao-cheio:hover { background: var(--serie-1); filter: brightness(1.08); }
.botao-perigo { background: var(--critico); border-color: var(--critico); color: #fff; }
.botao-perigo:hover { filter: brightness(1.08); }
.botao-perigo-leve { color: var(--tinta); border-color: var(--critico); }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }

.rotulo { font-weight: 600; margin-top: 6px; }
.campo {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--eixo);
  background: var(--superficie);
}
textarea.campo { min-height: 90px; resize: vertical; font-family: ui-monospace, Consolas, monospace; }
select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--eixo); background: var(--superficie); }
.campo-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); }

.filtros { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.segmentado { display: inline-flex; border: 1px solid var(--eixo); border-radius: 8px; overflow: hidden; }
.segmentado button { border: 0; background: var(--superficie); padding: 6px 12px; cursor: pointer; }
.segmentado button + button { border-left: 1px solid var(--eixo); }
.segmentado button.ativo { background: var(--serie-1-lavagem); font-weight: 650; }
.segmentado button:disabled { opacity: 1; cursor: default; }

.etiqueta {
  display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 999px;
  background: var(--lavagem); color: var(--tinta-2); margin-left: 6px; white-space: nowrap;
}

/* ------------------------------------------------ estado: ícone + rótulo */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 6px;
  border-radius: 999px; background: var(--lavagem); color: var(--tinta);
  font-size: 13px; font-weight: 550; white-space: nowrap;
}
.pilula { font-size: 13px; padding: 4px 11px 4px 8px; }
.icone { flex: none; }
.icone circle, .icone path:not(.traco):not(.traco-neutro) { stroke: none; }
.icone-bom circle { fill: var(--bom); }
.icone-critico circle { fill: var(--critico); }
.icone-alerta path:not(.traco) { fill: var(--alerta); }
.icone-serio path:not(.traco) { fill: var(--serio); }
.icone-neutro circle { fill: none; stroke: var(--tinta-3); stroke-width: 1.5; }
.icone .traco { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-alerta .traco, .icone-serio .traco { stroke: #0b0b0b; }
.icone .traco-neutro { fill: none; stroke: var(--tinta-3); stroke-width: 1.5; stroke-linecap: round; }

/* --------------------------------------------------------------- tabelas */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left; font-weight: 600; color: var(--tinta-2); padding: 8px 10px;
  border-bottom: 1px solid var(--eixo); white-space: nowrap;
}
.tabela td { padding: 8px 10px; border-bottom: 1px solid var(--grade); vertical-align: top; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover { background: var(--lavagem); }
.tabela tr.linha-sienge td:first-child { box-shadow: inset 3px 0 0 var(--serio); }
.quebra { max-width: 420px; overflow-wrap: anywhere; }
.fluxo-nome { display: grid; gap: 4px; min-width: 190px; }
.fluxo-nome .etiqueta { margin-left: 0; justify-self: start; }
.nota-bloqueio { display: flex; gap: 6px; align-items: flex-start; color: var(--tinta-2); font-size: 12px; max-width: 320px; }
.nota-bloqueio .icone { margin-top: 2px; }

/* ------------------------------------------------------------- interruptor */
.interruptor { position: relative; display: inline-block; width: 40px; height: 22px; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor .trilho {
  position: absolute; inset: 0; border-radius: 999px; background: var(--eixo); transition: background 0.15s;
}
.interruptor .trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
}
.interruptor input:checked + .trilho { background: var(--serie-1); }
.interruptor input:checked + .trilho::after { transform: translateX(18px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--serie-1); outline-offset: 2px; }
.interruptor input:disabled + .trilho { opacity: 0.5; }

/* --------------------------------------------------------------- gráficos */
.bloco-grafico { margin: 0; min-width: 0; }
.bloco-cab {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tinta-2);
  font-weight: 600; margin: 10px 0 4px;
}
.bloco-cab .botao-leve { margin-left: auto; padding: 2px 8px; font-size: 12px; }
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .eixo { stroke: var(--eixo); stroke-width: 1; }
.grafico .rotulo-eixo { fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .rotulo-fim { fill: var(--tinta); font-size: 12px; font-weight: 600; }
.grafico .barra { fill: var(--serie-1); }
.grafico .barra-erro { fill: var(--critico); }
.grafico .linha { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grafico .area { fill: var(--serie-1-lavagem); stroke: none; }
.grafico .ponto { fill: var(--serie-1); stroke: var(--superficie); stroke-width: 2; }
.grafico .mira { stroke: var(--eixo); stroke-width: 1; }
.alvo { fill: transparent; cursor: default; outline: none; }
.alvo.ativo, .alvo:focus-visible { fill: var(--lavagem); }
.faixa, .mini { display: block; overflow: visible; }
.faixa { width: 100%; height: auto; }
.celula-bom { fill: var(--bom); }
.celula-alerta { fill: var(--alerta); }
.celula-serio { fill: var(--serio); }
.celula-critico { fill: var(--critico); }
.celula-neutro { fill: var(--eixo); }
.celula.oca { fill: none; stroke-width: 1.5; }
.celula-bom.oca { stroke: var(--bom); }
.celula-critico.oca { stroke: var(--critico); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--tinta-2); font-size: 12px; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.chave { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chave-bom { background: var(--bom); }
.chave-critico { background: var(--critico); }
.chave-oca { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinta-3); }
.chave-cheia { background: var(--tinta-3); }
.estatisticas { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 4px; }
.estatistica { display: grid; }
.estatistica span { color: var(--tinta-2); font-size: 12px; }
.estatistica strong { font-size: 18px; font-weight: 650; }
.sistema-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sistema-cab h2 { font-size: 15px; margin: 0; }

.dica {
  position: fixed; z-index: 50; pointer-events: none; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; font-size: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); display: grid; gap: 3px; max-width: 320px;
}
.dica-linha { display: flex; align-items: baseline; gap: 6px; }
.dica-linha strong { color: var(--tinta); font-size: 13px; font-variant-numeric: tabular-nums; }
.dica-rotulo { color: var(--tinta-2); }
.dica-marca { width: 12px; height: 2px; background: var(--serie-1); align-self: center; }
.dica-marca.erro { background: var(--critico); }

/* --------------------------------------------------------- controle */
.controle-atual { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.controle-valor { font-size: 26px; font-weight: 700; }
.texto-corrido p { margin: 0 0 8px; color: var(--tinta-2); }
.quem { color: var(--tinta-2); font-size: 12px; margin-top: 10px; }

/* ------------------------------------------------ diálogo e avisos */
.dialogo {
  border: 1px solid var(--borda); border-radius: 12px; padding: 20px 22px; width: min(560px, 94vw);
  background: var(--superficie); color: var(--tinta);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialogo-titulo { margin: 0 0 10px; font-size: 18px; }
.dialogo p { color: var(--tinta-2); margin: 0 0 10px; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.confirmacao { display: grid; gap: 6px; margin-top: 8px; }
.dialogo .tabela-rolagem { max-height: 50vh; overflow: auto; }

.avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; width: min(420px, 92vw); }
.aviso {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); display: grid; gap: 4px;
}
.aviso-cab { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.aviso-cab .botao-leve { margin-left: auto; padding: 0 6px; }
.aviso ul { margin: 0; padding-left: 20px; color: var(--tinta-2); }

/* --------------------------------------------------------- complementos */
a.botao { text-decoration: none; color: inherit; display: inline-block; }
a { color: inherit; }
.chave-serie { background: var(--serie-1); }
.chave-neutra { background: var(--eixo); }
.chave-linha { width: 14px; height: 2px; border-radius: 1px; background: var(--serie-1); }
.chave-limite { width: 14px; height: 0; border-radius: 0; border-top: 1px dashed var(--tinta-3); }
.grafico .limite { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 4 3; }
.grafico .rotulo-limite { fill: var(--tinta-2); font-size: 11px; }
.celula-faixa { min-width: 220px; width: 32%; }
.json {
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px; overflow: auto; max-height: 40vh; white-space: pre;
  font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.dialogo-largo { width: min(1000px, 94vw); }
.fatos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; }
.fatos dt { color: var(--tinta-2); }
.fatos dd { margin: 0; overflow-wrap: anywhere; }
.subtitulo { font-size: 14px; margin: 14px 0 6px; }
.marcar { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 8px; font-weight: 600; cursor: pointer; }
.marcar input { margin-top: 3px; }
.vinculos { display: grid; gap: 1px; font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.vinculos strong { color: var(--tinta); font-weight: 600; }
.menu a .etiqueta { margin-left: 8px; }
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-avisos li { display: grid; gap: 2px; }
.lista-avisos .quando { color: var(--tinta-2); font-size: 12px; }
.lista-avisos .detalhe { color: var(--tinta-2); font-size: 13px; overflow-wrap: anywhere; }
.faixa-regra { display: flex; gap: 10px; align-items: flex-start; }
.faixa-regra .icone { margin-top: 3px; }