/* ══════════════════════════════════════════════════════════════
   PROMETHEUS // VISUAIS DOS CARDS
   Carregado DEPOIS do app.css: sobrescreve sem !important.
   ══════════════════════════════════════════════════════════════ */

/* ═══ 03 // EVENTOS — linha do tempo de verdade ══════════════════
   Era um radar circular genérico. O módulo se chama "Linha do
   tempo", então virou linha do tempo: trilha, marcas de hora,
   ocorrências e um cabeçote varrendo o presente.
   ══════════════════════════════════════════════════════════════ */
.radar {
  width: auto; height: 58px;
  margin: 16px 14px 6px;
  border-radius: 0;
  border: 0;
  border-left: 1px solid rgba(0,212,255,.22);
  border-bottom: 1px solid rgba(0,212,255,.22);
  overflow: hidden;
  position: relative;
  background:
    /* marcas verticais de tempo */
    repeating-linear-gradient(90deg,
      rgba(0,212,255,.16) 0 1px, transparent 1px 26px),
    /* faixas horizontais de faixa de risco */
    linear-gradient(180deg,
      rgba(255,83,110,.09) 0 33%,
      rgba(255,200,87,.07) 33% 66%,
      rgba(57,230,163,.06) 66% 100%);
}
.radar::before {
  /* a trilha das ocorrências: pontos em alturas diferentes = severidade */
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle, #39e6a3 0 2px, transparent 2px),
    radial-gradient(circle, #7cecff 0 2px, transparent 2px),
    radial-gradient(circle, #ffc857 0 2.5px, transparent 2.5px),
    radial-gradient(circle, #7cecff 0 2px, transparent 2px),
    radial-gradient(circle, #ff536e 0 3px, transparent 3px),
    radial-gradient(circle, #39e6a3 0 2px, transparent 2px);
  background-position: 12% 78%, 26% 52%, 41% 30%, 57% 60%, 72% 18%, 88% 70%;
  background-size: 8px 8px;
  filter: drop-shadow(0 0 4px currentColor);
}
.radar::after {
  /* cabeçote varrendo: o "agora" caminhando */
  content: "";
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, #00d4ff 22%, #00d4ff 78%, transparent);
  box-shadow: 0 0 10px rgba(0,212,255,.85);
  animation: linhaTempo 5.5s linear infinite;
}
@keyframes linhaTempo {
  from { left: -2%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  to   { left: 102%; opacity: 0; }
}

/* ═══ 01 // mini mapa: estados honestos ═════════════════════════ */
.mini-map-vazio {
  height: 100%;
  display: grid; place-items: center; align-content: center; gap: 6px;
  text-align: center; padding: 20px;
  color: #41606f; font-size: 11px; letter-spacing: .16em;
}
.mini-map-vazio small { color: #2f4855; font-size: 9.5px; letter-spacing: .08em; }
/* borda acende quando o mapa realmente montou */
.mini-map.vivo { box-shadow: inset 0 0 0 1px rgba(0,212,255,.12); }

/* ═══ 02 // ATMOSFERA — selo de procedência ══════════════════════
   O operador reclamou de dado velho e estava certo. Antes não havia
   nem como saber a idade do dado. Agora o painel declara.
   ══════════════════════════════════════════════════════════════ */
.wx-topo {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; margin-bottom: 14px;
}
.proc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  font-size: 10px; letter-spacing: .12em;
  color: #7fb3c8;
}
.proc i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.proc.real  { border-color: rgba(57,230,163,.5);  color: #39e6a3; }
.proc.real i { animation: procVivo 2s ease-in-out infinite; }
.proc.cache { border-color: rgba(0,212,255,.35);  color: #7cecff; }
.proc.velho { border-color: rgba(255,200,87,.55); color: #ffc857; }
@keyframes procVivo { 50% { box-shadow: 0 0 7px currentColor; } }

.wx-relogio { font-size: 10px; letter-spacing: .06em; color: #5f8ba1; }
.wx-relogio b { color: #a8d8ea; }

/* ═══ 04 // TRÂNSITO — ocorrências em rodízio ════════════════════
   Uma por vez, entrando por baixo. Sete segundos cada: dá pra ler.
   ══════════════════════════════════════════════════════════════ */
.inc-rodizio {
  margin-top: 10px; min-height: 62px;
  position: relative; overflow: hidden;
}
.inc {
  display: grid; gap: 3px;
  padding: 8px 10px 8px 11px;
  border-left: 2px solid var(--line);
  background: rgba(3, 6, 12, .5);
  animation: incEntra .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes incEntra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inc b {
  font-size: 10px; letter-spacing: .12em;
  color: #dff6ff; font-weight: 700;
}
.inc-onde  { font-size: 11px; color: #7fb3c8; line-height: 1.35; }
.inc-meta  { font-size: 9.5px; letter-spacing: .06em; color: #5f8ba1; }
.inc-conta {
  position: absolute; right: 8px; top: 8px;
  font-size: 8.5px; letter-spacing: .1em; color: #3d5a68; font-style: normal;
}
/* gravidade pela cor da borda — leitura instantânea */
.inc.baixo { border-left-color: rgba(57, 230, 163, .7); }
.inc.medio { border-left-color: rgba(255, 200, 87, .8); }
.inc.alto  { border-left-color: #ff536e; }
.inc.alto b { color: #ff8ba0; }

.inc-vazio, .inc-erro {
  display: block; padding: 8px 0;
  font-size: 10.5px; letter-spacing: .06em;
}
.inc-vazio { color: #4b6b7d; }
.inc-erro  { color: #ffc857; }      /* fonte fora ≠ sem ocorrência */

@media (prefers-reduced-motion: reduce) { .inc { animation: none; } }

/* ═══ 07 // IDENTIDADE — brasão do dono ══════════════════════════
/* ═══ 07 // IDENTIDADE — brasão do dono ══════════════════════════
   ERRO QUE EU COMETI NA PRIMEIRA VERSÃO: pus `overflow: hidden` no
   círculo pra conter a faixa de varredura. Isso CORTAVA pela metade o
   selo verde e os dois cantos de mira, que ficam na borda. Resultado:
   aspecto tosco, elementos truncados.

   Estrutura correta agora:
     .brasao-wrap   invólucro que NÃO corta  -> anel, miras e selo
       .brasao-disco  círculo com overflow   -> varredura e monograma
   Cada coisa no nível certo de clipping.
   ══════════════════════════════════════════════════════════════ */
.brasao-wrap {
  position: relative;
  width: 86px; height: 86px;
  margin: 16px auto 10px;
  /* SEM overflow: o selo e as miras precisam passar da borda do disco */
}

/* ── o disco: só ele recorta ─────────────────────────────────── */
.brasao-disco {
  position: absolute; inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(120, 226, 255, .26), transparent 55%),
    radial-gradient(circle at 50% 52%, #0a1420 0%, #050a12 62%, #02050a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 212, 255, .22),
    inset 0 -8px 18px rgba(0, 0, 0, .7),
    inset 0 6px 16px rgba(0, 140, 220, .14);
}

/* ── monograma: metal escovado com luz por cima ──────────────── */
.br-mono {
  position: relative; z-index: 3;
  font-family: var(--font-t); font-weight: 900;
  font-size: 34px; line-height: 1; letter-spacing: .01em;
  background: linear-gradient(168deg, #f4fbff 0%, #9fe9ff 38%, #3d8fd6 72%, #1a4a7a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 10px rgba(90, 200, 255, .45));
}

/* ── faixa de leitura descendo DENTRO do disco ───────────────── */
.br-varre {
  position: absolute; left: 0; right: 0; height: 14px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(140, 240, 255, .22), transparent);
  animation: brasaoVarre 3.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes brasaoVarre {
  0%, 100% { top: -14%; opacity: 0; }
  18%      { opacity: 1; }
  82%      { opacity: 1; }
  99%      { top: 100%; opacity: 0; }
}

/* ── anel externo girando: fora do disco, sem corte ──────────── */
.br-anel {
  position: absolute; inset: 0; z-index: 4;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(124, 236, 255, .9);
  border-right-color: rgba(168, 85, 247, .45);
  animation: brasaoGira 5.2s linear infinite;
}
@keyframes brasaoGira { to { transform: rotate(360deg); } }

/* ── cantos de mira: agora INTEIROS ──────────────────────────── */
.br-mira {
  position: absolute; z-index: 5;
  width: 15px; height: 15px;
  border: 1px solid rgba(0, 212, 255, .55);
}
.br-mira.tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.br-mira.br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* ── selo de verificado: inteiro, sobre a borda ──────────────── */
.br-selo {
  position: absolute; z-index: 6;
  right: 1px; bottom: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 1;
  color: #04170f;
  background: linear-gradient(158deg, #7df7c0 0%, #24b481 62%, #14805c 100%);
  box-shadow:
    0 0 10px rgba(57, 230, 163, .55),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 2px rgba(2, 5, 10, .95);          /* recorte contra o disco */
}

/* ── tipografia do card ──────────────────────────────────────── */
.os-window[data-open="face"] h3 {
  letter-spacing: .11em; font-size: 15px;
  background: linear-gradient(92deg, #7cecff 0%, #eaf7ff 46%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.os-window[data-open="face"] .win-head i { color: #39e6a3; letter-spacing: .18em; }
.os-window[data-open="face"]:hover .br-anel { border-top-color: #a8f4ff; }

@media (prefers-reduced-motion: reduce) {
  .br-anel, .br-varre { animation: none; }
  .br-anel { border-color: rgba(124, 236, 255, .5); }
  .br-varre { display: none; }
}
@media (max-width: 820px) {
  .brasao-wrap { width: 78px; height: 78px; }
  .br-mono { font-size: 30px; }
  .br-selo { width: 19px; height: 19px; font-size: 10px; }
}

/* ═══ 08 // INTELIGÊNCIA — GLOBO HOLOGRÁFICO ═════════════════════
   Era uma bolinha com `animation: pulse` (opacity 1 -> .35), ou seja,
   programada pra sumir. Agora é um globo de malha girando.

   Como o giro funciona: os meridianos são um padrão de faixas verticais
   MAIS LARGO que o disco, e o que anima é o `background-position-x`.
   O disco recorta em círculo, então as faixas entram por um lado e
   saem pelo outro — leitura de rotação sem WebGL, sem imagem, sem JS.

   Os paralelos são elipses estáticas: latitude não se move quando o
   planeta gira no próprio eixo. Errar isso é o que faz globo em CSS
   parecer cilindro.
   ══════════════════════════════════════════════════════════════ */
.globo {
  position: relative;
  width: 74px; height: 74px;
  margin: 16px auto 6px;
  /* sem overflow: a atmosfera precisa passar da borda */
}

.globo-disco {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;                    /* só o disco recorta */
  background: radial-gradient(circle at 34% 28%, #0e3350 0%, #071a2c 52%, #030a14 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 212, 255, .38),
    inset -7px -9px 20px rgba(0, 0, 0, .72),
    inset 5px 6px 16px rgba(60, 190, 255, .12);
}

/* ── MERIDIANOS: giram ───────────────────────────────────────── */
.globo-meridianos {
  position: absolute; top: -6%; bottom: -6%;
  left: -60%; right: -60%;             /* bem mais largo que o disco */
  background-repeat: repeat-x;
  background-size: 26px 100%;
  background-image: linear-gradient(
    90deg,
    rgba(0, 212, 255, .55) 0 1px,
    rgba(0, 212, 255, .10) 1px 3px,
    transparent 3px 26px
  );
  animation: globoGira 9s linear infinite;
}
@keyframes globoGira { to { background-position-x: 26px; } }

/* ── PARALELOS: parados, e em ELIPSE pra dar curvatura ───────── */
.globo-paralelos {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  /* elipses achatadas: quanto mais perto do polo, mais estreita */
  background-image:
    radial-gradient(ellipse 96% 8%  at 50% 22%, transparent 0 96%, rgba(0,212,255,.34) 96% 100%),
    radial-gradient(ellipse 100% 9% at 50% 50%, transparent 0 96%, rgba(0,212,255,.46) 96% 100%),
    radial-gradient(ellipse 96% 8%  at 50% 78%, transparent 0 96%, rgba(0,212,255,.34) 96% 100%),
    radial-gradient(ellipse 74% 6%  at 50% 8%,  transparent 0 95%, rgba(0,212,255,.20) 95% 100%),
    radial-gradient(ellipse 74% 6%  at 50% 92%, transparent 0 95%, rgba(0,212,255,.20) 95% 100%);
}

/* ── LUZ E TERMINADOR: o que faz ler como ESFERA ─────────────── */
.globo-luz {
  position: absolute; inset: 0;
  background:
    /* reflexo especular em cima-esquerda */
    radial-gradient(circle at 30% 24%, rgba(190, 245, 255, .30) 0%, transparent 42%),
    /* sombra do lado escuro (terminador) */
    radial-gradient(circle at 74% 78%, rgba(0, 0, 0, .62) 0%, transparent 58%);
  animation: globoRespira 5s ease-in-out infinite;
}
@keyframes globoRespira {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* ── ATMOSFERA: o halo que dá o aspecto de holograma ─────────── */
.globo-atmosfera {
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, .16);
  box-shadow:
    0 0 18px rgba(0, 170, 255, .32),
    inset 0 0 16px rgba(0, 190, 255, .16);
  animation: globoHalo 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes globoHalo {
  0%, 100% { box-shadow: 0 0 14px rgba(0,170,255,.26), inset 0 0 12px rgba(0,190,255,.12); }
  50%      { box-shadow: 0 0 30px rgba(0,200,255,.52), inset 0 0 20px rgba(0,200,255,.22); }
}

/* linhas de varredura de holograma, bem sutis */
.globo-disco::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 212, 255, .07) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.os-window[data-open="assistant"]:hover .globo-meridianos { animation-duration: 4s; }

/* ═══ respeita quem pediu menos movimento ══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .globo-meridianos, .globo-luz, .globo-atmosfera, .radar::after { animation: none; }
  .globo-atmosfera { box-shadow: 0 0 20px rgba(0,170,255,.38); }
}

@media (max-width: 820px) {
  .globo { width: 64px; height: 64px; }
  .globo-meridianos { background-size: 22px 100%; }
  .radar { height: 50px; margin: 14px 12px 6px; }
}