/* ═══════════════════════════════════════════════════════════════════════
   Vigília · Observatório — folha única da vista de luxo.
   Direção: relojoaria-observatório noturna. Obsidiana azulada, latão,
   marfim; serif lapidar para números, editorial para frases, mono para
   instrumento. Elevação por COR de superfície (dark-first), hairlines de
   latão, cantos quase retos. Single-theme deliberado: a vigília é noite.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --noite: #08090d;
  --carvao: #0e1016;
  --elevacao: #151823;
  --elevacao-2: #1b1f2e;
  --latao: #c8a96e;
  --latao-vivo: #e3c68b;
  --latao-fio: rgba(200, 169, 110, 0.22);
  --latao-fio-forte: rgba(200, 169, 110, 0.45);
  --marfim: #eae4d4;
  --taupe: #8e8878;
  --taupe-escuro: #5c584e;
  --ok: #7fa97b;
  --alerta: #d9a441;
  --critico: #c4554d;
  --serif-display: "Marcellus", "Times New Roman", serif;
  --serif-texto: "Newsreader", Georgia, serif;
  --mono: "Spline Sans Mono", "Cascadia Mono", monospace;
  --transicao: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(200, 169, 110, 0.05), transparent 60%),
    radial-gradient(900px 700px at 12% 110%, rgba(38, 48, 82, 0.35), transparent 55%),
    var(--noite);
  color: var(--marfim);
  font-family: var(--serif-texto);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* grão de filme sobre tudo, quase imperceptível */
.grao {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");
}

a { color: var(--latao); text-decoration: none; }
a:hover { color: var(--latao-vivo); }
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--latao-vivo); outline-offset: 3px;
}

/* ── topo ─────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 2rem;
  padding: 0.85rem clamp(1.2rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--noite) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--latao-fio);
}

.marca { display: flex; align-items: baseline; gap: 0.55rem; }
.marca-selo {
  width: 9px; height: 9px; border: 1px solid var(--latao);
  transform: rotate(45deg); display: inline-block;
  background: linear-gradient(135deg, var(--latao) 0%, transparent 65%);
}
.marca-nome {
  font-family: var(--serif-display); font-size: 1.28rem;
  letter-spacing: 0.06em; color: var(--marfim);
}
.marca-sub {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.32em; color: var(--taupe);
}

.vistas { display: flex; gap: 1.6rem; margin-left: auto; }
.vista {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--taupe);
  padding: 0.35rem 0; position: relative; transition: color 0.35s var(--transicao);
}
.vista::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -0.15rem;
  height: 1px; background: var(--latao);
  transition: right 0.45s var(--transicao);
}
.vista:hover { color: var(--marfim); }
.vista.is-ativa { color: var(--latao-vivo); }
.vista.is-ativa::after { right: 0; }

.topo-estado {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--taupe);
}
.farol {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--taupe-escuro); transition: background 0.4s, box-shadow 0.4s;
}
.farol.is-vivo { background: var(--ok); box-shadow: 0 0 10px rgba(127, 169, 123, 0.55); }
.farol.is-mudo { background: var(--critico); box-shadow: 0 0 10px rgba(196, 85, 77, 0.45); }
/* Cota do Codex no topo (11/09): conta em uso, reset e Reserva Luna; sempre visível, inclusive no celular. */
.topo-cota {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-left: auto;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--taupe); white-space: nowrap; cursor: help;
}
.topo-cota[hidden] { display: none; }
.topo-cota-ponto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ok); box-shadow: 0 0 8px rgba(127, 169, 123, 0.5); transition: background 0.4s, box-shadow 0.4s;
}
.topo-cota.is-alerta .topo-cota-ponto { background: var(--alerta); box-shadow: 0 0 8px rgba(217, 164, 65, 0.5); }
.topo-cota.is-esgotada .topo-cota-ponto, .topo-cota.is-sem-leitura .topo-cota-ponto { background: var(--critico); box-shadow: 0 0 8px rgba(196, 85, 77, 0.45); }
.topo-cota.is-reserva .topo-cota-ponto { background: var(--latao-vivo); box-shadow: 0 0 10px rgba(227, 198, 139, 0.6); }
.topo-cota.is-esgotada #topoCotaTexto { color: var(--critico); }
.topo-cota.is-alerta #topoCotaTexto { color: var(--alerta); }
.topo-cota-reserva { color: var(--taupe-escuro); }
.topo-cota-reserva:not(:empty)::before { content: "·"; margin-right: 0.55rem; color: var(--taupe-escuro); }
.topo-cota.is-reserva .topo-cota-reserva { color: var(--latao-vivo); }
@media (max-width: 1180px) {
  .topo { flex-wrap: wrap; row-gap: 0.45rem; }
  .topo-cota { order: 5; flex-basis: 100%; margin-left: 0; white-space: normal; }
}

/* ── páginas ──────────────────────────────────────────────────────── */
.pagina {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.2rem, 4vw, 3rem) 4rem;
}

.secao-cabeca {
  display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 1.4rem;
}
.secao-cabeca h2 {
  font-family: var(--serif-display); font-size: 1.35rem; font-weight: 400;
  letter-spacing: 0.05em; color: var(--marfim); white-space: nowrap;
}
.secao-fio { flex: 1; height: 1px; background: var(--latao-fio); }
.secao-nota {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--taupe); white-space: nowrap;
}

.vazio { padding: 3rem 1rem; text-align: center; color: var(--taupe); }
.vazio em { font-size: 1.15rem; }
.vazio-sub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; margin-top: 0.6rem; }

/* ── abertura: relógio + radar ────────────────────────────────────── */
.abertura {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3.4rem);
}

.relogio {
  font-family: var(--serif-display);
  font-size: clamp(4.2rem, 11vw, 8.2rem);
  line-height: 0.95; color: var(--marfim);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.relogio-seg {
  font-size: 0.32em; color: var(--latao); margin-left: 0.18em;
  font-variant-numeric: tabular-nums;
}
.abertura-frase {
  margin-top: 1.1rem; font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--marfim); font-weight: 300;
}
.abertura-frase em { color: var(--latao-vivo); }
.abertura-data {
  margin-top: 0.5rem; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe);
}

/* radar */
.abertura-radar { justify-self: center; text-align: center; }
.radar {
  position: relative; width: min(320px, 68vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 24, 35, 0.9) 0%, rgba(14, 16, 22, 0.5) 68%, transparent 72%);
}
.radar-anel {
  position: absolute; border: 1px solid var(--latao-fio); border-radius: 50%;
}
.radar-anel-1 { inset: 0; }
.radar-anel-2 { inset: 18%; opacity: 0.75; }
.radar-anel-3 { inset: 36%; opacity: 0.5; }
.radar-centro {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--latao); box-shadow: 0 0 12px rgba(200, 169, 110, 0.7);
}
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(200, 169, 110, 0.16), transparent 18%);
  animation: varrer 7.5s linear infinite;
}
@keyframes varrer { to { transform: rotate(360deg); } }
.radar-pontos { position: absolute; inset: 0; }
.radar-ponto {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--taupe); transform: translate(-50%, -50%);
}
.radar-ponto.is-ativo {
  background: var(--latao-vivo);
  animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 198, 139, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(227, 198, 139, 0); }
}
.radar-legenda {
  margin-top: 1rem; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe);
}

/* ── bento dos postos ─────────────────────────────────────────────── */
.bento {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow: dense;
}
.posto {
  position: relative; overflow: hidden;
  background: var(--carvao);
  border: 1px solid var(--latao-fio);
  border-radius: 3px;
  padding: 1.15rem 1.2rem 1rem;
  cursor: pointer;
  transition: background 0.45s var(--transicao), border-color 0.45s var(--transicao),
              transform 0.45s var(--transicao);
}
.posto:hover {
  background: var(--elevacao); border-color: var(--latao-fio-forte);
  transform: translateY(-2px);
}
.posto.is-grande { grid-column: span 2; grid-row: span 2; padding: 1.5rem 1.6rem 1.3rem; }
.posto-rotulo {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--taupe); display: flex; gap: 0.6rem;
  align-items: center;
}
.posto-vela {
  width: 6px; height: 6px; border-radius: 50%; background: var(--taupe-escuro);
}
.posto.is-vivo .posto-vela {
  background: var(--latao-vivo); animation: pulsar 2.4s ease-in-out infinite;
}
.posto-nome {
  font-family: var(--serif-display); font-size: 1.12rem; margin-top: 0.5rem;
  color: var(--marfim); letter-spacing: 0.02em;
}
.posto.is-grande .posto-nome { font-size: 1.5rem; }
.posto-total {
  font-family: var(--serif-display);
  font-size: clamp(2.1rem, 4vw, 2.7rem); line-height: 1;
  margin-top: 0.75rem; color: var(--latao);
  font-variant-numeric: tabular-nums;
}
.posto.is-grande .posto-total { font-size: clamp(3.2rem, 6vw, 4.4rem); }
.posto-total small {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--taupe); margin-left: 0.55rem;
}
.posto-selos { display: flex; gap: 0.45rem; margin-top: 0.9rem; flex-wrap: wrap; }
.selo {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  padding: 0.18rem 0.5rem; border-radius: 2px;
  border: 1px solid var(--latao-fio); color: var(--taupe);
  font-variant-numeric: tabular-nums;
}
.selo-vivo { color: var(--latao-vivo); border-color: var(--latao-fio-forte); }
.selo-lacre { color: var(--critico); border-color: rgba(196, 85, 77, 0.4); }
.selo-entregue { color: var(--ok); border-color: rgba(127, 169, 123, 0.35); }
.posto-faisca {
  position: absolute; right: -22px; top: -22px; width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.12), transparent 65%);
  opacity: 0; transition: opacity 0.5s;
}
.posto:hover .posto-faisca, .posto.is-vivo .posto-faisca { opacity: 1; }

/* ── reservas (quota) ─────────────────────────────────────────────── */
.cota-linhas { display: grid; gap: 0.55rem; }
.cota-linha {
  display: grid; grid-template-columns: 130px 1fr 120px; gap: 1rem;
  align-items: center; padding: 0.55rem 0.9rem;
  background: var(--carvao); border: 1px solid var(--latao-fio); border-radius: 3px;
}
.cota-nome {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--marfim);
}
.cota-trilho { height: 3px; background: var(--elevacao-2); border-radius: 2px; overflow: hidden; }
.cota-uso {
  height: 100%; background: linear-gradient(90deg, var(--latao), var(--latao-vivo));
  width: 0; transition: width 1.1s var(--transicao);
}
.cota-valor {
  font-family: var(--mono); font-size: 0.68rem; color: var(--taupe);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── quadros ──────────────────────────────────────────────────────── */
.quadros-cabeca { margin-bottom: 1rem; }
.quadros-seletor { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.seletor-posto {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe);
  background: transparent; border: 1px solid var(--latao-fio); border-radius: 2px;
  padding: 0.4rem 0.85rem; cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.seletor-posto:hover { color: var(--marfim); border-color: var(--latao-fio-forte); }
.seletor-posto.is-ativo {
  color: var(--noite); background: var(--latao); border-color: var(--latao);
}

.colunas {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 320px);
  gap: 1rem; overflow-x: auto; padding-bottom: 1.2rem;
  scrollbar-width: thin; scrollbar-color: var(--latao-fio) transparent;
}
.coluna {
  background: var(--carvao); border: 1px solid var(--latao-fio); border-radius: 3px;
  display: flex; flex-direction: column; max-height: min(72dvh, 900px);
}
.coluna-cabeca {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.8rem 1rem 0.7rem;
  border-bottom: 1px solid var(--latao-fio);
}
.coluna-cabeca::before {
  content: ""; width: 14px; height: 1px; background: var(--latao);
}
.coluna-nome {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--marfim);
}
.coluna-conta {
  margin-left: auto; font-family: var(--serif-display); font-size: 0.95rem;
  color: var(--latao); font-variant-numeric: tabular-nums;
}
.coluna-cartas { overflow-y: auto; overflow-anchor: none; padding: 0.7rem; display: grid; gap: 0.55rem; }

.carta {
  min-width: 0; overflow-wrap: anywhere;
  background: var(--elevacao); border: 1px solid transparent; border-radius: 3px;
  padding: 0.75rem 0.85rem; cursor: pointer; position: relative;
  transition: border-color 0.35s, background 0.35s, transform 0.35s var(--transicao);
}
.carta:hover {
  border-color: var(--latao-fio-forte); background: var(--elevacao-2);
  transform: translateX(2px);
}
.carta-titulo { font-size: 0.92rem; line-height: 1.35; color: var(--marfim); font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.carta-impedimento { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.4; color: var(--marfim); overflow-wrap: anywhere; }
/* Barra de progresso de 7 etapas (ler, reproduzir, mudar, testar, PR, merge/deploy, readback). */
.carta-barra { margin-top: 0.55rem; }
.barra-segs { display: flex; gap: 3px; height: 6px; }
.barra-seg { flex: 1; background: var(--latao-fio); border-radius: 2px; }
.barra-seg.is-feita { background: var(--ok); }
.barra-seg.is-atual { background: var(--latao-vivo); }
.barra-seg.is-estourada { background: var(--critico); }
.barra-rotulo {
  margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--taupe); font-variant-numeric: tabular-nums;
}
.carta-barra.is-estourada .barra-rotulo { color: var(--critico); }
.barra-prox { flex-basis: 100%; color: var(--taupe-escuro); }
.carta-meta {
  margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem; align-items: center;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--taupe); font-variant-numeric: tabular-nums;
}
.carta-id { color: var(--taupe-escuro); }
.carta.is-viva { border-left: 2px solid var(--latao); }
.carta.is-stale { border-left: 2px solid var(--alerta); }
.carta.is-stale .carta-worker { color: var(--alerta); }
/* a mesma vela do cabeçalho do Live Log: acesa e pulsando com sinal recente,
   âmbar sem sinal, apagada quando o worker não responde */
.carta-sinal { display: inline-flex; align-items: center; gap: 0.4rem; }
.carta-vela {
  width: 7px; height: 7px; border-radius: 50%; background: var(--taupe-escuro);
  flex: none; transition: background 0.4s;
}
.carta.is-stale .carta-vela { background: var(--alerta); }
.carta.is-viva .carta-vela {
  background: var(--latao-vivo); box-shadow: 0 0 8px rgba(227, 198, 139, 0.6);
  animation: pulsar 2.4s ease-in-out infinite;
}
.carta.is-viva .carta-worker { color: var(--latao-vivo); }
.carta.is-lacrada { border-left: 2px solid var(--critico); }
.carta-lacre { color: var(--critico); }
.carta.is-esquecida { border-left: 2px solid var(--alerta); }
.carta-esquecida { color: var(--alerta); }
.carta-entregue { color: var(--ok); }
.carta-jira { color: var(--latao); }
.carta-fato { color: var(--latao); }
.carta-readback.is-confirmado { color: var(--ok); }
.carta-readback.is-pendente { color: var(--alerta); }
.carta-decisao { color: var(--alerta); }
.carta-espera { margin: .75rem 0; padding: .65rem .8rem; border-left: 3px solid var(--alerta); background: var(--fundo); color: var(--alerta); font-size: 1rem; line-height: 1.5; }
.carta-retomar { color: var(--alerta); }
.carta-parcial { color: var(--alerta); }
.carta.is-aguardando { border-style: dashed; opacity: 0.88; }
.carta-pergunta { font-style: italic; opacity: 0.8; }
.carta-recusa, .carta-medicao { color: var(--alerta); }
.carta-reparo { opacity: 0.9; }
/* Filtro de pendências de FEITO: pílula no idioma dos demais controles, depois da contagem. */
.coluna-filtro {
  align-self: center; margin-left: 0.55rem; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.18rem; border: 1px solid var(--latao-fio); border-radius: 999px;
  background: transparent; color: var(--taupe); font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.coluna-filtro:hover { color: var(--marfim); border-color: var(--latao-fio-forte); }
.coluna-filtro:focus-visible { outline: 1px solid var(--latao-vivo); outline-offset: 2px; }
.filtro-ponto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--taupe-escuro);
  transition: background 0.3s, box-shadow 0.3s;
}
.coluna-filtro.is-ativo { color: var(--marfim); border-color: var(--latao-fio-forte); background: rgba(200, 169, 110, 0.1); }
.coluna-filtro.is-ativo .filtro-ponto { background: var(--latao-vivo); box-shadow: 0 0 6px rgba(227, 198, 139, 0.6); }
.selo-parcial { color: var(--alerta); }

/* ── turno (diário) ───────────────────────────────────────────────── */
.diario { list-style: none; position: relative; padding-left: 1.6rem; }
.diario::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.4rem; bottom: 0.4rem;
  width: 1px; background: var(--latao-fio);
}
.entrada {
  position: relative; padding: 0.65rem 0.9rem; margin-bottom: 0.55rem;
  background: var(--carvao); border: 1px solid transparent; border-radius: 3px;
  transition: border-color 0.35s;
}
.entrada:hover { border-color: var(--latao-fio); }
.entrada::before {
  content: ""; position: absolute; left: -1.44rem; top: 1.05rem;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--noite); border: 1px solid var(--latao);
}
.entrada-cabeca {
  display: flex; gap: 0.8rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--taupe);
}
.entrada-quem { color: var(--latao); }
.entrada-hora { margin-left: auto; font-variant-numeric: tabular-nums; }
.entrada-texto {
  margin-top: 0.35rem; font-size: 0.9rem; color: var(--marfim);
  overflow-wrap: anywhere;
}

/* ── lente ────────────────────────────────────────────────────────── */
.lente { position: fixed; inset: 0; z-index: 50; }
.lente-veu {
  position: absolute; inset: 0;
  background: rgba(5, 6, 9, 0.65); backdrop-filter: blur(6px);
}
.lente-corpo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(640px, 94vw);
  background: var(--carvao); border-left: 1px solid var(--latao-fio-forte);
  display: flex; flex-direction: column;
  animation: lente-entra 0.5s var(--transicao);
}
@keyframes lente-entra {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.lente-cabeca {
  padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--latao-fio);
  position: relative;
}
.lente-rotulo {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--latao);
}
.lente-cabeca h3 {
  font-family: var(--serif-texto); font-weight: 400; font-size: 1.15rem;
  margin-top: 0.45rem; color: var(--marfim); line-height: 1.35;
  padding-right: 4.5rem;
}
.lente-meta {
  margin-top: 0.4rem; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; color: var(--taupe); font-variant-numeric: tabular-nums;
}
.lente-fechar {
  position: absolute; top: 1.15rem; right: 1.3rem;
  background: none; border: 1px solid var(--latao-fio); border-radius: 2px;
  color: var(--taupe); font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; cursor: pointer; transition: color 0.3s, border-color 0.3s;
}
.lente-fechar:hover { color: var(--marfim); border-color: var(--latao-fio-forte); }
.lente-varredura {
  height: 1px; background: linear-gradient(90deg, transparent, var(--latao), transparent);
  background-size: 220px 1px; background-repeat: no-repeat;
  animation: varredura 3.4s ease-in-out infinite;
}
@keyframes varredura {
  0% { background-position: -220px 0; }
  55%, 100% { background-position: calc(100% + 220px) 0; }
}
.lente-log {
  flex: 1; overflow: auto; padding: 1.1rem 1.5rem;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 300;
  line-height: 1.75; color: var(--marfim);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lente-esperando { color: var(--taupe); font-style: italic; }
.lente-log .l-pensa { color: var(--taupe); }
.lente-log .l-erro { color: var(--critico); }
.lente-log .l-marco { color: var(--latao); }
.lente-rodape {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 1.5rem; border-top: 1px solid var(--latao-fio);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--taupe);
}

/* ── rádio (conversas AIRC) ───────────────────────────────────────── */
.radio-mesa {
  display: grid; grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 1rem; align-items: start;
}
.radio-faixas { display: grid; gap: 0.55rem; max-height: 72dvh; overflow-y: auto; }
.faixa {
  background: var(--carvao); border: 1px solid var(--latao-fio); border-radius: 3px;
  padding: 0.75rem 0.9rem; cursor: pointer;
  transition: background 0.35s, border-color 0.35s;
}
.faixa:hover { background: var(--elevacao); border-color: var(--latao-fio-forte); }
.faixa.is-sintonizada { background: var(--elevacao); border-color: var(--latao); }
.faixa-topico { font-size: 0.88rem; color: var(--marfim); line-height: 1.35; }
.faixa-meta {
  margin-top: 0.4rem; display: flex; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--taupe); font-variant-numeric: tabular-nums;
}
.faixa-quem { color: var(--latao); }
.radio-fio-cabeca {
  padding: 0 0 0.9rem; border-bottom: 1px solid var(--latao-fio); margin-bottom: 0.9rem;
}
.radio-fio-cabeca h3 {
  font-family: var(--serif-texto); font-weight: 400; font-size: 1.1rem;
  color: var(--marfim);
}
.radio-participantes {
  margin-top: 0.3rem; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe);
}
.radio-mensagens { display: grid; gap: 0.6rem; max-height: 66dvh; overflow-y: auto; }
.telegrama {
  background: var(--carvao); border: 1px solid var(--latao-fio); border-radius: 3px;
  padding: 0.7rem 0.95rem; max-width: 46rem;
}
.telegrama-cabeca {
  display: flex; gap: 0.8rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--taupe);
}
.telegrama-de { color: var(--latao); }
.telegrama-hora { margin-left: auto; font-variant-numeric: tabular-nums; }
.telegrama-texto {
  margin-top: 0.4rem; font-size: 0.9rem; color: var(--marfim);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.telegrama-volta { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .radio-mesa { grid-template-columns: 1fr; }
  .radio-faixas { max-height: 32dvh; }
}

/* ── rodapé ───────────────────────────────────────────────────────── */
.rodape {
  max-width: 1280px; margin: 0 auto;
  padding: 2rem clamp(1.2rem, 4vw, 3rem) 2.6rem;
  text-align: center; color: var(--taupe);
}
.rodape-fio { display: block; height: 1px; background: var(--latao-fio); margin-bottom: 1.6rem; }
.rodape p { font-size: 0.85rem; }
.rodape-marca { font-family: var(--serif-display); color: var(--marfim); letter-spacing: 0.05em; }
.rodape-antigo { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; }
.regua {
  display: flex; justify-content: space-between; max-width: 420px;
  margin: 1.4rem auto 0; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.18em; color: var(--taupe-escuro);
  flex-wrap: nowrap; white-space: nowrap;
}
.regua span { position: relative; padding-top: 0.55rem; }
.regua span::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 0.35rem; background: var(--latao-fio);
}

/* ── reveal orquestrado ───────────────────────────────────────────── */
.revela { opacity: 0; transform: translateY(14px); }
.revela.is-visto {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--transicao), transform 0.7s var(--transicao);
}

/* ── responsivo ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .abertura { grid-template-columns: 1fr; }
  .abertura-radar { order: -1; }
  .radar { width: min(230px, 60vw); }
  .posto.is-grande { grid-column: span 1; grid-row: span 1; }
  .topo { gap: 1rem; flex-wrap: wrap; }
  .vistas { gap: 1rem; }
  .topo-estado { display: none; }
  .topo-cota { margin-left: 0; white-space: normal; flex-basis: 100%; }
  .cota-linha { grid-template-columns: 96px 1fr 90px; gap: 0.6rem; }
}

/* ── movimento reduzido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep, .radar-ponto.is-ativo, .posto.is-vivo .posto-vela,
  .carta.is-viva .carta-vela, .lente-varredura { animation: none; }
  .revela, .revela.is-visto { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
/* Atualização manual do quadro. */
.quadro-atualizar {
  flex: none; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--latao-fio-forte); border-radius: 6px;
  background: var(--carvao); color: var(--marfim); font: inherit;
  font-size: 13px; cursor: pointer;
}
.quadro-atualizar:hover { border-color: var(--latao); }
.quadro-atualizar:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; }
.quadro-atualizar:disabled { opacity: .6; cursor: wait; }
@media (max-width: 650px) {
  .quadros-cabeca .secao-cabeca { flex-wrap: wrap; }
  .quadros-cabeca .secao-fio { display: none; }
  .quadro-atualizar { margin-left: auto; }
}

/* ── quadros: estados de carga e botão no idioma dos demais controles ── */
.quadro-atualizar {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
  min-height: 38px; padding: 0.4rem 0.85rem;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--taupe);
  background: transparent; border: 1px solid var(--latao-fio); border-radius: 2px;
  cursor: pointer; transition: color 0.3s, border-color 0.3s;
}
.quadro-atualizar::before {
  content: "↻"; display: inline-block; font-size: 0.95rem; line-height: 1; color: var(--latao);
}
.quadro-atualizar:hover { color: var(--marfim); border-color: var(--latao-fio-forte); background: transparent; }
.quadro-atualizar:focus-visible { outline: 1px solid var(--latao-vivo); outline-offset: 3px; }
.quadro-atualizar:disabled, .quadro-atualizar[aria-busy="true"] {
  opacity: 1; color: var(--latao-vivo); border-color: var(--latao-fio-forte); cursor: progress;
}
.quadro-atualizar[aria-busy="true"]::before { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.quadro-progresso {
  height: 1px; margin-top: 0.7rem;
  background: linear-gradient(90deg, transparent, var(--latao), transparent);
  background-size: 220px 1px; background-repeat: no-repeat;
  animation: varredura 1.6s ease-in-out infinite;
}
/* A linha some sem devolver o espaço: as colunas não descem quando uma leitura começa. */
.quadro-progresso[hidden] { display: block; visibility: hidden; animation: none; }
.colunas { transition: opacity 0.3s; }
.colunas.is-carregando { opacity: 0.45; pointer-events: none; }
.colunas.is-trocando { display: none; }
.quadro-carregando {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: clamp(0.7rem, 1vw, 1rem); overflow: hidden; padding-bottom: 0.8rem;
}
.quadro-carregando[hidden] { display: none; }
.fantasma-coluna {
  min-height: 22rem; padding: 0.85rem 0.7rem; display: grid; gap: 0.55rem; align-content: start;
  background: var(--carvao); border: 1px solid var(--latao-fio); border-radius: 3px;
}
.fantasma-cabeca, .fantasma-carta {
  border-radius: 3px;
  background: linear-gradient(90deg, var(--elevacao) 0%, var(--elevacao-2) 50%, var(--elevacao) 100%);
  background-size: 200% 100%; animation: cintilar 1.4s ease-in-out infinite;
}
.fantasma-cabeca { height: 0.8rem; width: 45%; margin-bottom: 0.35rem; }
.fantasma-carta { height: 5.2rem; }
.fantasma-carta:nth-child(3) { height: 3.6rem; }
.fantasma-carta:nth-child(4) { height: 6.4rem; }
@keyframes cintilar { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.secao-nota.is-erro { color: var(--alerta); }
.coluna-cartas:empty { min-height: 6rem; }
.coluna-cartas:empty::after {
  content: "nada aqui"; display: block; padding: 1.4rem 0.5rem; text-align: center;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-escuro);
}
@media (max-width: 650px) {
  .quadro-carregando { grid-auto-columns: min(86vw, 420px); gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quadro-progresso, .fantasma-cabeca, .fantasma-carta, .quadro-atualizar[aria-busy="true"]::before { animation: none; }
}

/* ── quadros: a largura inteira no desktop, uma coluna por tela no celular ── */
.pagina-quadros {
  max-width: none;
  padding: clamp(1rem, 2vw, 1.8rem) clamp(0.9rem, 2vw, 2rem) 1.2rem;
}
.pagina-quadros .colunas {
  grid-auto-columns: minmax(300px, 1fr);
  gap: clamp(0.7rem, 1vw, 1rem);
  padding-bottom: 0.8rem;
}
.pagina-quadros .coluna {
  max-height: calc(100dvh - 15rem);
  min-height: 22rem;
}
.coluna-cabeca { position: sticky; top: 0; z-index: 1; background: var(--carvao); }
@media (min-width: 1600px) {
  .carta-titulo { font-size: 0.98rem; }
  .carta-impedimento { font-size: 0.86rem; }
  .carta-meta { font-size: 0.66rem; }
}
@media (max-width: 650px) {
  .topo { padding: 0.6rem 0.9rem; gap: 0.6rem 1rem; }
  .vistas { gap: 0.9rem; margin-left: 0; width: 100%; justify-content: space-between; }
  .vista { font-size: 0.68rem; letter-spacing: 0.14em; padding: 0.5rem 0; }
  .pagina-quadros { padding: 0.7rem 0.8rem 0.8rem; }
  .quadros-cabeca { margin-bottom: 0.5rem; }
  /* título e botão na mesma linha, nota embaixo: menos altura antes das colunas */
  .quadros-cabeca .secao-cabeca {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo botao" "nota nota";
    align-items: center; margin-bottom: 0.5rem; gap: 0.25rem 0.6rem;
  }
  .quadros-cabeca h2 { grid-area: titulo; font-size: 1.15rem; }
  .quadros-cabeca .secao-nota { grid-area: nota; white-space: normal; }
  .quadros-cabeca .quadro-atualizar { grid-area: botao; margin-left: 0; }
  .quadro-atualizar { min-height: 40px; padding: 6px 12px; font-size: 12px; }
  .quadros-seletor {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0.2rem -0.8rem 0; padding: 0 0.8rem 0.4rem;
  }
  .quadros-seletor::-webkit-scrollbar { display: none; }
  .seletor-posto { flex: none; white-space: nowrap; min-height: 40px; padding: 0.45rem 0.8rem; }
  .pagina-quadros .colunas {
    grid-auto-columns: min(86vw, 420px);
    gap: 0.6rem;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.8rem;
    margin: 0 -0.8rem;
    padding: 0 0.8rem 0.6rem;
  }
  .pagina-quadros .coluna {
    scroll-snap-align: start;
    max-height: calc(100dvh - 13.5rem);
    min-height: 18rem;
  }
  .coluna-cabeca { padding: 0.7rem 0.85rem 0.6rem; }
  .coluna-cartas { padding: 0.55rem; gap: 0.5rem; }
  .carta { padding: 0.8rem 0.85rem; }
  .carta:hover { transform: none; }
  .carta-titulo { font-size: 1rem; line-height: 1.4; }
  .carta-impedimento { font-size: 0.86rem; }
  .carta-meta { font-size: 0.66rem; gap: 0.35rem 0.6rem; }
  .nfos-requests { margin-bottom: 0.6rem; }
}

/* Revisor: permanent run history and native scheduling. */
.revisor-intro { margin: 1rem 0 1.8rem; color: var(--taupe); font-size: 1.2rem; }
.revisor-config { display: flex; align-items: end; gap: 1.2rem; flex-wrap: wrap; padding: 1.5rem; background: var(--carvao); border: 1px solid var(--latao-fio); }
.revisor-config label, .revisor-history-head label { display: grid; gap: .6rem; font-family: var(--mono); font-size: .8rem; color: var(--taupe); }
.revisor-config input, .revisor-config select, #reviewerRun { background: var(--noite); color: var(--marfim); border: 1px solid var(--latao-fio-forte); padding: .65rem; font: inherit; }
.revisor-config [hidden] { display: none; }
.revisor-config input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--latao); }
.revisor-history-head { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 2rem 0 1rem; }
#reviewerNext, #reviewerState { margin: 1rem 0; color: var(--latao-vivo); line-height: 1.5; }
.revisor-metrics { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 2rem; font-family: var(--mono); font-size: .85rem; }
.revisor-metrics button { padding: .7rem 1rem; border: 1px solid var(--latao-fio); background: var(--noite); color: var(--marfim); font: inherit; cursor: pointer; }
.revisor-metrics button:hover, .revisor-metrics button:focus-visible { border-color: var(--latao); }
.revisor-metrics button[aria-pressed=true] { background: var(--latao); color: var(--noite); border-color: var(--latao); }
.revisor-filter-status { color: var(--taupe); margin: -1rem 0 1rem; }
.revisor-event[hidden], #reviewerMore[hidden] { display: none; }
.revisor-event { margin: 1rem 0; padding: 1.25rem 1.5rem; background: var(--carvao); border-left: 3px solid var(--latao-fio-forte); overflow-wrap: anywhere; }
.revisor-event small { color: var(--taupe); font-family: var(--mono); font-size: .73rem; }
.revisor-event h3, .revisor-event h4 { margin: .8rem 0; }
.revisor-event p, .revisor-event li { line-height: 1.55; margin-top: .55rem; }
.revisor-event ul { margin-left: 1.2rem; }
.revisor-event details { margin-top: 1rem; padding: .9rem; background: var(--elevacao); }
.revisor-event summary { cursor: pointer; color: var(--latao-vivo); font-size: 1.2rem; }
.revisor-saved { border-color: var(--ok); }
.revisor-error, .revisor-memory_pending { border-color: var(--critico); }
@media(max-width:700px) { .revisor-config { align-items: stretch; } .revisor-config label { flex: 1 1 45%; } #reviewerRun { max-width: 70vw; } }