/* Painel Linket — identidade própria: fundo claro, sidebar grafite, acento verde-petróleo.
   Mobile-first; a sidebar vira barra inferior no celular; tabelas viram cartões. */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-normal-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --fundo: #f4f5f7;
  --cartao: #ffffff;
  --cartao-2: #f8f9fa;
  --texto: #191c21;
  --texto-2: #5a6372;
  --texto-3: #8b94a3;
  --borda: #e4e7ec;
  --borda-forte: #cfd5de;
  --acento: #0c6b62;
  --acento-forte: #095048;
  --acento-suave: #0c6b6214;
  --acento-texto: #0a5a52;
  --ok: #15803d;
  --ok-suave: #15803d1a;
  --atencao: #a05a00;
  --atencao-suave: #eda1001f;
  --grave: #b42321;
  --grave-suave: #e3494817;
  --grafite: #16181d;
  --grafite-2: #1e2127;
  --grafite-texto: #a7afbd;
  --grafite-ativo: #ffffff;
  --sombra: 0 1px 2px rgb(16 20 28 / 5%), 0 4px 16px rgb(16 20 28 / 5%);
  --raio: 10px;
  --grade: #eef0f3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --fundo: #101216;
    --cartao: #171a20;
    --cartao-2: #1c2027;
    --texto: #e8eaee;
    --texto-2: #9aa3b1;
    --texto-3: #6d7685;
    --borda: #262b33;
    --borda-forte: #363d48;
    --acento: #2aa095;
    --acento-forte: #4db8ad;
    --acento-suave: #2aa09521;
    --acento-texto: #5ec4b9;
    --ok: #4ade80;
    --ok-suave: #4ade801f;
    --atencao: #e9a23b;
    --atencao-suave: #e9a23b1f;
    --grave: #f87171;
    --grave-suave: #f871711f;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%);
    --grade: #20242b;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --fundo: #101216;
  --cartao: #171a20;
  --cartao-2: #1c2027;
  --texto: #e8eaee;
  --texto-2: #9aa3b1;
  --texto-3: #6d7685;
  --borda: #262b33;
  --borda-forte: #363d48;
  --acento: #2aa095;
  --acento-forte: #4db8ad;
  --acento-suave: #2aa09521;
  --acento-texto: #5ec4b9;
  --ok: #4ade80;
  --ok-suave: #4ade801f;
  --atencao: #e9a23b;
  --atencao-suave: #e9a23b1f;
  --grave: #f87171;
  --grave-suave: #f871711f;
  --sombra: 0 1px 2px rgb(0 0 0 / 30%);
  --grade: #20242b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv05';
  overscroll-behavior-y: contain;
}
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- estrutura ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.conteudo { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
.sidebar { display: none; }

/* topo (celular) */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  background: var(--grafite); color: var(--grafite-texto);
  padding: 10px 14px calc(10px); padding-top: calc(10px + env(safe-area-inset-top));
}
.topo .marca { color: #fff; }
.topo .vao { flex: 1; }
.botao-topo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: 0; cursor: pointer;
  background: rgb(255 255 255 / 7%); color: #cdd3dd;
}
.botao-topo:hover { background: rgb(255 255 255 / 14%); color: #fff; }

/* marca */
.marca { display: flex; align-items: baseline; gap: 7px; font-weight: 650; letter-spacing: -0.02em; font-size: 17px; }
.marca .ponto { width: 8px; height: 8px; border-radius: 2px; background: var(--acento); align-self: center; }
.marca small { font-weight: 450; font-size: 11px; color: var(--grafite-texto); letter-spacing: 0.08em; text-transform: uppercase; }

/* barra inferior (celular) */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--grafite); border-top: 1px solid #262a31;
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior a, .barra-inferior button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px; font: 500 10.5px/1 'Inter', sans-serif;
  color: var(--grafite-texto); background: none; border: 0; cursor: pointer; text-decoration: none;
}
.barra-inferior .ativo { color: #fff; }
.barra-inferior svg { width: 21px; height: 21px; }

/* desktop */
@media (min-width: 960px) {
  .app { flex-direction: row; }
  .topo, .barra-inferior { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    width: 230px; flex-shrink: 0; position: sticky; top: 0; height: 100dvh;
    background: var(--grafite); color: var(--grafite-texto); padding: 18px 12px;
    overflow-y: auto;
  }
  .sidebar .marca { padding: 2px 10px 14px; color: #fff; }
  .sidebar nav { display: flex; flex-direction: column; gap: 1px; }
  .sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
    color: var(--grafite-texto); text-decoration: none;
  }
  .sidebar nav a svg { width: 18px; height: 18px; opacity: 0.85; }
  .sidebar nav a:hover { background: var(--grafite-2); color: #e6e9ee; }
  .sidebar nav a.ativo { background: var(--grafite-2); color: #fff; box-shadow: inset 2.5px 0 0 var(--acento); }
  .sidebar .secao { font: 600 10.5px/1 'Inter'; letter-spacing: 0.09em; text-transform: uppercase; color: #6b7482; padding: 14px 10px 6px; }
  .sidebar .rodape { margin-top: auto; padding: 10px; display: flex; gap: 8px; align-items: center; }
  .conteudo { padding: 26px 32px 40px; }
}

/* ---------- blocos ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-corpo { padding: 14px 16px; }
h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; margin: 2px 0 2px; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.sub { color: var(--texto-2); font-size: 13px; margin: 0 0 14px; }
.cabeca-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cabeca-cartao { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.cabeca-cartao .acao { font-size: 12.5px; font-weight: 550; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
.kpi { padding: 13px 15px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kpi .rotulo { font-size: 12px; font-weight: 550; color: var(--texto-2); display: flex; gap: 6px; align-items: center; }
.kpi .valor { font-size: clamp(21px, 4.5vw, 27px); font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi .extra { font-size: 11.5px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; min-height: 17px; }
.kpi .delta-mais { color: var(--ok); font-weight: 600; }
.kpi .delta-menos { color: var(--grave); font-weight: 600; }
.kpi .vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulsar 2.4s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: 0.35; } }

/* grades */
.grade-2 { display: grid; gap: 12px; }
@media (min-width: 1100px) { .grade-2 { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.grade-sistemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }

/* cartão de sistema */
.sistema-cartao { padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: border-color 0.15s; }
.sistema-cartao:hover { border-color: var(--borda-forte); }
.sistema-cabeca { display: flex; align-items: center; gap: 8px; }
.sistema-cabeca .etiqueta { flex-shrink: 0; }
.sistema-cabeca strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.sistema-cabeca a { color: inherit; }
.sistema-cabeca a:hover { text-decoration: none; color: var(--acento-texto); }
.sistema-numeros { display: flex; gap: 14px; flex-wrap: wrap; }
.sistema-numeros .mini { display: flex; flex-direction: column; }
.sistema-numeros .mini b { font-size: 16.5px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sistema-numeros .mini span { font-size: 11px; color: var(--texto-3); }
.sistema-rodape { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--texto-3); }

/* ícone à esquerda de um bloco (WhatsApp etc.): tamanho fixo */
.icone-bloco { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--cartao-2); display: inline-flex; align-items: center; justify-content: center; color: var(--texto-2); }
.icone-bloco svg { width: 18px; height: 18px; }

/* etiquetas e estados */
.etiqueta { display: inline-flex; align-items: center; gap: 5px; font: 550 11.5px/1 'Inter'; padding: 3.5px 8px; border-radius: 99px; background: var(--cartao-2); border: 1px solid var(--borda); color: var(--texto-2); white-space: nowrap; }
.etiqueta .cor { width: 7px; height: 7px; border-radius: 2px; background: var(--cor, var(--texto-3)); }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; }
.estado .bola { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.estado-ok { color: var(--ok); } .estado-ok .bola { background: var(--ok); }
.estado-atencao { color: var(--atencao); } .estado-atencao .bola { background: var(--atencao); }
.estado-grave { color: var(--grave); } .estado-grave .bola { background: var(--grave); }
.estado-neutro { color: var(--texto-3); } .estado-neutro .bola { background: var(--texto-3); }

/* alertas */
.faixa-alertas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--raio); font-size: 13.5px; border: 1px solid; }
.alerta svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1.5px; }
.alerta-grave { background: var(--grave-suave); border-color: color-mix(in srgb, var(--grave) 30%, transparent); color: var(--grave); }
.alerta-atencao { background: var(--atencao-suave); border-color: color-mix(in srgb, var(--atencao) 30%, transparent); color: var(--atencao); }
.alerta-info { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 25%, transparent); color: var(--acento-texto); }
.alerta a { color: inherit; text-decoration: underline; }
.alerta .texto { flex: 1; }

/* briefing no topo do cockpit */
.briefing-caixa { background: linear-gradient(135deg, var(--grafite), #22262e); color: #dde2e9; border-radius: var(--raio); padding: 15px 17px; margin-bottom: 14px; display: flex; gap: 12px; align-items: flex-start; }
.briefing-caixa svg { width: 19px; height: 19px; color: var(--acento-forte, var(--acento)); flex-shrink: 0; margin-top: 2px; }
.briefing-caixa .titulo { font: 600 11px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: #8d97a6; margin-bottom: 5px; }
.briefing-caixa p { margin: 0; font-size: 14px; line-height: 1.55; }
.briefing-caixa button { background: none; border: 0; color: #8d97a6; cursor: pointer; padding: 2px; border-radius: 6px; }
.briefing-caixa button:hover { color: #fff; }
.briefing-caixa a { color: #9fd4cc; }

/* linha do tempo */
.tempo-lista { display: flex; flex-direction: column; }
.tempo-item { display: flex; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--borda); font-size: 13px; }
.tempo-item:first-child { border-top: 0; }
.tempo-item time { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; min-width: 48px; font-variant-numeric: tabular-nums; padding-top: 1.5px; }
.tempo-item .texto { flex: 1; min-width: 0; overflow-wrap: break-word; }
.tempo-item .etiqueta { margin-left: auto; align-self: flex-start; flex-shrink: 0; }

/* pendências */
.pendencias li { display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--borda); font-size: 13.5px; }
.pendencias { list-style: none; margin: 0; padding: 0; }
.pendencias li:first-child { border-top: 0; }
.pendencias a { margin-left: auto; font-size: 12.5px; flex-shrink: 0; }

/* ---------- tabelas (viram cartões no celular) ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; font: 600 11.5px/1.3 'Inter'; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-3); padding: 10px 16px 8px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 10px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th.num { text-align: right; }
@media (max-width: 719px) {
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; }
  .tabela-cartoes tr { border-bottom: 1px solid var(--borda); padding: 10px 16px; }
  .tabela-cartoes tr:last-child { border-bottom: 0; }
  .tabela-cartoes td { border: 0; padding: 2px 0; }
  .tabela-cartoes td.num { text-align: left; }
  .tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo) ': '; color: var(--texto-3); font-size: 12px; }
}

/* ---------- botões e formulários ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 550 13.5px/1 'Inter'; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto);
  text-decoration: none; transition: background 0.12s, border-color 0.12s;
}
.botao:hover { background: var(--cartao-2); text-decoration: none; }
.botao svg { width: 16px; height: 16px; }
.botao-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao-primario:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
:root[data-theme='dark'] .botao-primario, :root:not([data-theme='light']) .botao-primario { color: #08211e; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .botao-primario { color: #fff; } }
.botao-perigo { background: var(--grave); border-color: var(--grave); color: #fff; }
.botao-perigo:disabled { opacity: 0.45; cursor: not-allowed; }
.campo { width: 100%; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: 9px; background: var(--cartao); color: var(--texto); font: 400 15px/1.3 'Inter'; }
.campo:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
label { font-size: 13px; font-weight: 550; color: var(--texto-2); display: block; margin: 0 0 5px; }

/* ---------- login ---------- */
.pagina-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--grafite); }
.caixa-login { width: 100%; max-width: 400px; background: var(--cartao); border-radius: 14px; padding: 28px 26px; box-shadow: 0 20px 60px rgb(0 0 0 / 35%); }
.caixa-login .marca { justify-content: center; margin-bottom: 20px; color: var(--texto); }
.caixa-login h1 { font-size: 17px; text-align: center; margin: 0 0 4px; }
.caixa-login .sub { text-align: center; }
.codigos-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.codigos-rec code { background: var(--cartao-2); border: 1px solid var(--borda); padding: 6px 8px; border-radius: 7px; font-size: 13px; text-align: center; }
.qr-caixa { display: flex; justify-content: center; margin: 14px 0; }
.qr-caixa > div, .qr-caixa img, .qr-caixa svg { background: #fff; padding: 10px; border-radius: 10px; border: 1px solid var(--borda); }
.erro-form { color: var(--grave); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.campo-codigo { text-align: center; font-size: 22px !important; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; }

/* ---------- gráficos ---------- */
.grafico { width: 100%; height: auto; }
.grafico text { font: 500 10.5px 'Inter', sans-serif; fill: var(--texto-3); }
.grafico .eixo { stroke: var(--grade); }
.grafico .serie-linha { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px 2px; font-size: 12px; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 9px; height: 9px; border-radius: 2.5px; font-style: normal; }
.dica-grafico { position: fixed; z-index: 60; pointer-events: none; background: var(--grafite); color: #e6e9ee; font-size: 12px; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / 30%); display: none; max-width: 240px; }
.dica-grafico b { font-variant-numeric: tabular-nums; }
.dica-grafico .linha-dica { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.dica-grafico i { width: 8px; height: 8px; border-radius: 2px; font-style: normal; }
.barras-h { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px; }
.barras-h .item { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.barras-h .item .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.barras-h .item .trilho { height: 14px; border-radius: 4px; background: var(--grade); overflow: hidden; }
.barras-h .item .trilho i { display: block; height: 100%; border-radius: 4px; background: var(--acento); }
.barras-h .item b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }

/* esqueleto (carregamentos ao vivo, sem CLS: o espaço já está reservado) */
.esqueleto { position: relative; overflow: hidden; background: var(--grade); border-radius: 6px; color: transparent !important; }
.esqueleto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 35%), transparent); animation: brilho 1.4s infinite; }
:root[data-theme='dark'] .esqueleto::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 7%), transparent); }
@keyframes brilho { to { transform: translateX(100%); } }

/* ---------- paleta de comando ---------- */
.paleta-fundo { position: fixed; inset: 0; z-index: 70; background: rgb(10 12 16 / 55%); backdrop-filter: blur(2px); display: none; }
.paleta-fundo.aberta { display: flex; align-items: flex-start; justify-content: center; padding: 10vh 14px 14px; }
.paleta { width: 100%; max-width: 560px; background: var(--cartao); border-radius: 14px; box-shadow: 0 24px 80px rgb(0 0 0 / 45%); overflow: hidden; border: 1px solid var(--borda); }
.paleta input { width: 100%; border: 0; padding: 15px 18px; font: 400 16px/1.3 'Inter'; background: transparent; color: var(--texto); }
.paleta input:focus { outline: none; }
.paleta-lista { max-height: 50vh; overflow-y: auto; border-top: 1px solid var(--borda); padding: 6px; }
.paleta-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.paleta-item svg { width: 17px; height: 17px; color: var(--texto-3); flex-shrink: 0; }
.paleta-item small { color: var(--texto-3); margin-left: auto; flex-shrink: 0; }
.paleta-item.ativo { background: var(--acento-suave); }
.paleta-item .etiqueta { flex-shrink: 0; }
.paleta-vazio { padding: 18px; text-align: center; color: var(--texto-3); font-size: 13.5px; }
.paleta-dica { display: flex; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--borda); font-size: 11px; color: var(--texto-3); }
kbd { font: 500 10.5px/1 'Inter'; background: var(--cartao-2); border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: 5px; padding: 2.5px 5px; color: var(--texto-2); }

/* ---------- diálogo de confirmação ---------- */
.dialogo-fundo { position: fixed; inset: 0; z-index: 80; background: rgb(10 12 16 / 55%); display: none; align-items: center; justify-content: center; padding: 16px; }
.dialogo-fundo.aberto { display: flex; }
.dialogo { width: 100%; max-width: 420px; background: var(--cartao); border-radius: 14px; padding: 20px; box-shadow: 0 24px 80px rgb(0 0 0 / 45%); }
.dialogo h3 { margin: 0 0 6px; font-size: 16px; }
.dialogo p { margin: 0 0 12px; color: var(--texto-2); font-size: 13.5px; }
.dialogo .acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* puxar para atualizar */
#puxar { position: fixed; top: -46px; left: 50%; translate: -50% 0; z-index: 50; width: 38px; height: 38px; border-radius: 50%; background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra); display: flex; align-items: center; justify-content: center; transition: top 0.2s; }
#puxar svg { width: 18px; height: 18px; color: var(--acento); }
#puxar.girando svg { animation: girar 0.9s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }

/* log de serviço */
.log-caixa { background: var(--grafite); color: #c4cbd6; font: 12px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; border-radius: var(--raio); padding: 14px 16px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 420px; overflow-y: auto; }

/* toast */
#toast { position: fixed; bottom: calc(86px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; z-index: 90; background: var(--grafite); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 30px rgb(0 0 0 / 35%); opacity: 0; pointer-events: none; transition: opacity 0.25s; max-width: min(90vw, 420px); text-align: center; }
#toast.visivel { opacity: 1; }
@media (min-width: 960px) { #toast { bottom: 28px; } }

/* ---------- modo TV ---------- */
.tv { background: #0b0d10; color: #e8eaee; min-height: 100dvh; padding: 3vh 3vw; display: flex; flex-direction: column; font-size: clamp(14px, 1.4vw, 19px); }
.tv .tv-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5vh; color: #8b94a3; }
.tv .tv-topo .marca { color: #fff; font-size: clamp(17px, 1.8vw, 24px); }
.tv .tv-relogio { font-variant-numeric: tabular-nums; font-size: clamp(16px, 1.8vw, 24px); }
.tv-telas { flex: 1; position: relative; }
.tv-tela { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s; pointer-events: none; display: flex; flex-direction: column; gap: 2.5vh; }
.tv-tela.ativa { opacity: 1; pointer-events: auto; }
.tv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6vw; }
.tv-kpi { background: #14171c; border: 1px solid #22262d; border-radius: 16px; padding: 2.4vh 1.6vw; }
.tv-kpi .rotulo { color: #8b94a3; font-size: clamp(12px, 1.1vw, 16px); font-weight: 550; }
.tv-kpi .valor { font-size: clamp(30px, 3.1vw, 50px); font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-lista { background: #14171c; border: 1px solid #22262d; border-radius: 16px; padding: 1.5vh 1.4vw; flex: 1; overflow: hidden; }
.tv-progresso { height: 3px; background: #22262d; border-radius: 2px; overflow: hidden; margin-top: 2vh; }
.tv-progresso i { display: block; height: 100%; background: var(--acento, #2aa095); width: 0; }

/* utilidades */
.linha-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vao { flex: 1; }
.mudo { color: var(--texto-3); font-size: 12.5px; }
.sem-rolagem-x { overflow-x: hidden; }
.oculto { display: none !important; }
.espaco { height: 14px; }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }

/* ===================== Revisão (Opus): navegação, conta, avisos, números ===================== */

/* saudação do cockpit */
.saudacao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 2px 0 14px; }
.saudacao h1 { margin: 0; font: 650 22px/1.2 'Inter'; letter-spacing: -0.02em; }
.saudacao .mudo { font-size: 13px; }
.saudacao .mudo::first-letter { text-transform: uppercase; }

/* lateral: ponto da cor do sistema + sinal de estado à direita */
.ponto-sistema { width: 8px; height: 8px; border-radius: 3px; background: var(--cor); flex-shrink: 0; }
.rotulo-nav { flex: 1; }
.sinal { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sinal-ok { background: #2fa36b; opacity: 0.55; }
.sinal-atencao { background: #e9a23b; box-shadow: 0 0 0 3px rgb(233 162 59 / 18%); }
.sinal-grave { background: #f05252; box-shadow: 0 0 0 3px rgb(240 82 82 / 22%); animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 5px rgb(240 82 82 / 8%); } }
@media (min-width: 960px) {
  .sidebar nav a { display: flex; align-items: center; gap: 10px; }
  .busca-lateral { margin: 14px 4px 0; display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); padding: 8px 10px; border-radius: 8px; background: var(--grafite-2); border: 1px solid #2a2e36; color: var(--grafite-texto); font: 500 13px/1 'Inter'; cursor: pointer; text-align: left; }
  .busca-lateral:hover { color: #e6e9ee; border-color: #3a3f49; }
  .busca-lateral svg { width: 16px; height: 16px; }
  .busca-lateral span { flex: 1; }
  .busca-lateral kbd { font: 600 10.5px/1 'Inter'; padding: 3px 5px; border-radius: 4px; background: #2a2e36; color: #9aa3b1; }
  .sidebar .rodape { border-top: 1px solid #23262d; padding-top: 12px; }
  .conta-lateral { display: flex; align-items: center; gap: 8px; color: var(--grafite-texto); text-decoration: none; font: 500 13px/1 'Inter'; padding: 8px 8px; border-radius: 8px; min-width: 0; }
  .conta-lateral:hover, .conta-lateral.ativo { background: var(--grafite-2); color: #fff; }
  .conta-lateral svg { width: 18px; height: 18px; flex-shrink: 0; }
}
.barra-inferior a { position: relative; }
.bolinha-grave { position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: #f05252; box-shadow: 0 0 0 2px var(--grafite); }

/* quadro de avisos compacto */
.quadro-avisos { margin-bottom: 12px; }
.quadro-avisos .cabeca-cartao h2 { display: flex; align-items: center; gap: 8px; }
.quadro-avisos .cabeca-cartao h2 svg { width: 18px; height: 18px; color: var(--atencao); }
.quadro-avisos.tem-grave .cabeca-cartao h2 svg { color: var(--grave); }
.quadro-avisos.tem-grave { border-color: color-mix(in srgb, var(--grave) 35%, var(--borda)); }
.lista-avisos { display: flex; flex-direction: column; }
.lista-avisos .alerta { border: 0; border-top: 1px solid var(--borda); border-radius: 0; background: transparent; padding: 10px 16px; align-items: center; }
.lista-avisos .alerta:first-child { border-top: 0; }
.lista-avisos .alerta .texto { flex: 1; min-width: 0; }
.lista-avisos .alerta .texto a { color: inherit; }
.lista-avisos .alerta-atencao .texto, .lista-avisos .alerta-grave .texto { color: var(--texto); }
.lista-avisos .alerta svg { width: 17px; height: 17px; flex-shrink: 0; }
.alerta.saindo { opacity: 0; transform: translateX(8px); transition: 0.22s; }
.mais-avisos > summary { list-style: none; cursor: pointer; padding: 9px 16px; border-top: 1px solid var(--borda); color: var(--acento-texto); font: 550 13px/1 'Inter'; }
.mais-avisos > summary::-webkit-details-marker { display: none; }
.mais-avisos[open] > summary { display: none; }
.alerta-menu { position: relative; flex-shrink: 0; }
.alerta-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px; color: var(--texto-3); font: 500 12px/1 'Inter'; padding: 5px 7px; border-radius: 6px; }
.alerta-menu > summary::-webkit-details-marker { display: none; }
.alerta-menu > summary:hover, .alerta-menu[open] > summary { background: var(--cartao-2); color: var(--texto-2); }
.alerta-menu > summary svg { width: 14px !important; height: 14px !important; }
.alerta-menu > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--cartao); border: 1px solid var(--borda); border-radius: 9px; box-shadow: var(--sombra); padding: 4px; min-width: 150px; display: flex; flex-direction: column; }
.alerta-menu button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 6px; font: 500 13px/1 'Inter'; color: var(--texto); }
.alerta-menu button:hover { background: var(--cartao-2); }
@media (max-width: 719px) { .alerta-menu > summary span { display: none; } .lista-avisos .alerta .etiqueta { display: none; } }
.tudo-certo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--raio); background: var(--ok-suave); color: var(--ok); font: 550 13.5px/1.3 'Inter'; }
.tudo-certo svg { width: 18px; height: 18px; }

/* números agrupados na página do sistema */
.grupo-numeros { padding: 12px 16px 14px; border-top: 1px solid var(--borda); }
.grupo-numeros:first-of-type { border-top: 0; }
.grupo-numeros h3 { margin: 0 0 10px; font: 600 11px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; }
.numero-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.numero-item b { font: 650 19px/1.1 'Inter'; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.numero-item span { font-size: 12px; color: var(--texto-2); }
.numero-item.zero b { color: var(--texto-3); font-weight: 500; }
.config-sistema { font-size: 12.5px; }
.borda-topo { border-top: 1px solid var(--borda); }

/* Minha conta */
.conta-grade { display: grid; gap: 12px; }
@media (min-width: 1100px) { .conta-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.conta-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cabeca-cartao h2 svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 7px; color: var(--texto-2); }
.form-conta { display: flex; flex-direction: column; gap: 12px; }
.form-conta label { display: flex; flex-direction: column; gap: 6px; font: 550 13px/1.2 'Inter'; color: var(--texto-2); }
.campo-6 { max-width: 170px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; font-size: 18px; }
.medidor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.medidor i { height: 4px; border-radius: 2px; background: var(--borda); transition: background 0.2s; }
.medidor[data-nivel='1'] i.cheio { background: var(--grave); }
.medidor[data-nivel='2'] i.cheio { background: var(--atencao); }
.medidor[data-nivel='3'] i.cheio, .medidor[data-nivel='4'] i.cheio { background: var(--ok); }
.dica-forca { font-weight: 400; font-size: 12px; }
.etiqueta-acento { background: var(--acento-suave); color: var(--acento-texto); border-color: transparent; }
.lista-aparelhos { display: flex; flex-direction: column; }
.aparelho { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--borda); }
.aparelho:first-child { border-top: 0; }
.aparelho-info { flex: 1; min-width: 0; }
.aparelho-info .mudo { font-size: 12px; margin-top: 3px; }
.icone-bloco svg { width: 20px; height: 20px; }
.botao-pequeno { padding: 6px 10px; font-size: 12.5px; }
.botao.carregando { opacity: 0.6; pointer-events: none; }
.seletor { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--cartao-2); border: 1px solid var(--borda); flex-wrap: wrap; }
.seletor button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 7px; font: 550 13px/1 'Inter'; color: var(--texto-2); }
.seletor button[aria-checked='true'] { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.dialogo [data-passo] p { color: var(--texto-2); }
.dialogo label { display: flex; flex-direction: column; gap: 6px; font: 550 13px/1.2 'Inter'; color: var(--texto-2); margin-top: 8px; }

/* menu "Mais" do celular */
.lista-menu { display: flex; flex-direction: column; }
.lista-menu a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--borda); color: var(--texto); text-decoration: none; font: 500 15px/1.2 'Inter'; }
.lista-menu a:first-child { border-top: 0; }
.lista-menu a > span:not(.estado):not(.ponto-sistema) { flex: 1; }
.lista-menu a > svg { width: 19px; height: 19px; color: var(--texto-2); }
.lista-menu a > svg:last-child { width: 16px; height: 16px; color: var(--texto-3); }

/* ajustes finos */
.cabeca-cartao h2 { display: flex; align-items: center; gap: 8px; }
.cabeca-cartao h2 svg { margin: 0; flex-shrink: 0; }
@media (min-width: 960px) {
  .busca-lateral span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar .rodape { flex-wrap: wrap; row-gap: 8px; }
  .sidebar .rodape .conta-lateral { flex: 1 0 100%; white-space: nowrap; }
  .sidebar .rodape .vao { display: none; }
  .sidebar .rodape .botao-topo { flex: 1; justify-content: center; }
}