/* ═══════════════════════════════════════════════════════════════════════════
   TERAMIND — TEMA JARVIS PARA AS TELAS DE ENTRADA

   Reveste as 7 telas de login (Clínica, Médico, Laudante, Hospital,
   Financeiro, Anestesista e Login central) no mesmo visual do boot:
   preto, verde e brilho de reator — no lugar do navy + dourado.

   NÃO reescreve o HTML de nenhuma delas. A maior parte do trabalho é feita
   redefinindo as VARIÁVEIS que as páginas já usam (--navy, --gold, --paper…);
   o resto são poucos ajustes nos lugares onde a cor estava escrita na mão
   (o dourado rgba(201,169,97,…) espalhado pelo cérebro, radar e HUD).

   Carregar SEMPRE por último, depois do <style> da página:
       <link rel="stylesheet" href="/css/jarvis-login.css">

   Pra trocar a cor do sistema inteiro, mexa só em --verde aqui embaixo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── a cor do sistema ──
     ⚠️ AZUL desde 31/07. Era verde-água; o dono pediu ("tudo azul") e esta
     folha é justamente o ponto único de troca. O nome `--verde` ficou porque
     ele é usado em dezenas de lugares aqui e nas páginas — é a cor da casa,
     não é verde. Ver o mesmo aviso em reator.js e jarvis-app.css.
     ⚠️ `--rgb` existe pros rgba(): antes eram 15 valores cravados nesta folha,
     e foi exatamente por eles que o botão do login continuou verde depois de
     eu ter trocado "tudo". Quem achou foi o dono, olhando a tela. */
  --rgb:         56,189,248;
  --verde:       #38bdf8;
  --verde-claro: #cbefff;
  --verde-fundo: #040910;

  /* ── as variáveis que as páginas já usavam, reapontadas ── */
  --navy:      #04070e;
  --navy-2:    #071019;
  --gold:      var(--verde);
  --gold-soft: var(--verde-claro);
  --gold-mute: #0284c7;

  --paper:   #060b14;   /* o lado do formulário deixa de ser branco */
  --paper-2: #08101c;
  --paper-3: #0b1524;
  --line:    rgba(var(--rgb),.16);
  --line-2:  rgba(var(--rgb),.26);
  --muted:   #6f8aa8;
  --muted-2: #8ba5c0;
  --text:    #dbeafe;
  --ink:     #dbeafe;
}

/* ── AS CORES DA PESSOA, JÁ NA PORTA ──────────────────────────────────────
   Quem escolheu a cor no Núcleo reencontra ela aqui (ver o aviso em
   boot-jarvis.js: o login não sabe QUEM é, então segue a última cor usada
   NESTE aparelho). Cada bloco troca só o essencial — a cor, o fundo e o
   texto; o resto sai de `--rgb` e de `--verde`, que já estão em variável. */
html[data-tema="rosa"] {
  --rgb:244,114,182;
  --verde:#f472b6; --verde-claro:#ffd6ea; --verde-fundo:#0f050b;
  --navy:#0f050b; --navy-2:#1a0a12;
  --paper:#120710; --paper-2:#180b15; --paper-3:#20101b;
  --muted:#a87d92; --muted-2:#c79db0; --text:#fdeef6; --ink:#fdeef6;
  --gold-mute:#be185d;
}
html[data-tema="prata"] {
  --rgb:203,222,235;
  --verde:#cbdeeb; --verde-claro:#ffffff; --verde-fundo:#04060a;
  --navy:#04060a; --navy-2:#0b1118;
  --paper:#070a0f; --paper-2:#0c1118; --paper-3:#111820;
  --muted:#7c8b99; --muted-2:#9dabb8; --text:#eef3f7; --ink:#eef3f7;
  --gold-mute:#64748b;
}
html[data-tema="violeta"] {
  --rgb:167,139,250;
  --verde:#a78bfa; --verde-claro:#e4dbff; --verde-fundo:#08050f;
  --navy:#08050f; --navy-2:#100a1f;
  --paper:#0a0714; --paper-2:#100b1f; --paper-3:#171029;
  --muted:#8579a8; --muted-2:#a99cc8; --text:#f0ecff; --ink:#f0ecff;
  --gold-mute:#6d28d9;
}
html[data-tema="verde"] {
  --rgb:45,212,191;
  --verde:#2dd4bf; --verde-claro:#a5fbf0; --verde-fundo:#04070e;
  --navy:#04070e; --navy-2:#071019;
  --paper:#060b14; --paper-2:#08101c; --paper-3:#0b1524;
  --muted:#6f8aa8; --muted-2:#8ba5c0; --text:#dbeafe; --ink:#dbeafe;
  --gold-mute:#14b8a6;
}

/* ── fundo: preto com grade e brilho verde ─────────────────────────────── */
body { background: var(--verde-fundo); color: var(--text); }

.login-left {
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--rgb),.13) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(7,16,25,.75) 0%, transparent 50%),
    linear-gradient(135deg, #04070e 0%, #071019 100%) !important;
}
.login-left::before {
  background-image:
    linear-gradient(rgba(var(--rgb),.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rgb),.03) 1px, transparent 1px) !important;
}

/* ── o logotipo do topo é o REATOR, escrito no HTML (26/set) ──────────── */
.brand-logo-mini { width: 62px !important; height: 62px !important; flex: 0 0 62px; }
.brand-logo-mini .tmb-logo-svg { width: 62px; height: 62px; }
/* ⚠️ o reator desenhado pelo  (26/set) — mesma regra que a
   tela de bloqueio usa: o SVG ocupa a caixa e o brilho pode vazar. */
.brand-logo-mini > svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* ⚠️⚠️ O `invert(1)` SAIU, E ELE ERA O "LOGO LARANJA" QUE ELE FOTOGRAFOU.
   A regra nasceu como *fallback*: "se o script não rodar, o cérebro antigo ao
   menos fica verde". Eu tirei o boot-jarvis desta tela pra pôr o PIN na frente
   e troquei a imagem pelo reator — só que o reator já é AZUL (#38bdf8), e azul
   invertido dá exatamente LARANJA. O fallback passou a estragar o caso normal.

   ⚠️⚠️ E DEMOREI DUAS TENTATIVAS POR UM ERRO MEU: existem DUAS cópias desta
   regra — uma dentro do `login.html` e esta, no arquivo, que carrega DEPOIS e
   ainda tem `!important`. Eu consertei a de dentro, medi a tela, continuava
   laranja. Só achei esta perguntando ao navegador QUAL regra estava vencendo,
   em vez de procurar no arquivo que eu já tinha aberto.
   É a lição que já está escrita em [[feedback_igualar_a_tela_de_referencia]]:
   conferir o VALOR, não a regra. */
.brand-logo-mini img {
  filter: drop-shadow(0 2px 10px rgba(var(--rgb),.45)) !important;
}

/* ── O CÉREBRO SAIU. Quem ocupa o palco agora é o reator ────────────────
   Quem remove os elementos é o boot-jarvis.js (trocarCerebro), porque são
   nós do DOM, não estilo. Aqui só garantimos que nada deles reapareça caso
   o script não rode — melhor um palco vazio do que dois desenhos brigando. */
.brain-layer, .radar-rings, .scan-line, .hud-circle, .synapse { display: none !important; }
.brain-stage::before {
  background: radial-gradient(circle, rgba(var(--rgb),.30) 0%, rgba(var(--rgb),.11) 30%, transparent 65%) !important;
}
.brain-stage { overflow: visible !important; }

.bracket { border-color: var(--verde) !important; }

/* A etiqueta da esquerda é ancorada no palco e sai 12px pra fora dele —
   em telas largas ela ultrapassava a borda do painel e ficava cortada
   ("XAMES · MULTI-CLÍNICA"). Encurtar o traço e o respiro devolve o espaço. */
.float-tag           { gap: 7px !important; }
.float-tag .dash     { width: 18px !important; }
.float-tag.f-left    { left: 2px !important; }
.float-tag .dot { background: var(--verde) !important; box-shadow: 0 0 8px var(--verde) !important; }
.float-tag .dash        { background: linear-gradient(90deg, var(--verde), transparent) !important; }
.float-tag.f-right .dash{ background: linear-gradient(90deg, transparent, var(--verde)) !important; }

/* ── tipografia: o serif elegante dá lugar ao traço técnico do boot ────── */
.headline, .form-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -.02em;
}
.headline .gold, .headline em, .headline i {
  color: var(--verde) !important; font-style: normal !important; font-weight: 400 !important;
}
.headline-sub, .form-subtitle { color: rgba(219,234,254,.55) !important; }

/* ── lado direito: era branco, agora é o mesmo preto ───────────────────── */
.login-right { background: var(--verde-fundo) !important; border-left: 1px solid rgba(var(--rgb),.12); }
.form-title  { color: #fff !important; }
.access-badge{ color: var(--verde) !important; }
.access-badge::before { background: var(--verde) !important; }

.form-field label { color: rgba(219,234,254,.6) !important; }
.form-field input, .otp-input {
  background: rgba(var(--rgb),.05) !important;
  border-color: rgba(var(--rgb),.2) !important;
  color: #fff !important;
}
.form-field input:focus, .otp-input:focus {
  border-color: var(--verde) !important;
  box-shadow: 0 0 0 3px rgba(var(--rgb),.14) !important;
}
.form-field input::placeholder { color: rgba(219,234,254,.28) !important; }
.otp-input.filled { border-color: var(--verde) !important; color: var(--verde) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--verde), #14b8a6) !important;
  color: #04121a !important; border: 0 !important; font-weight: 700 !important;
}
.btn-primary:hover { box-shadow: 0 0 32px rgba(var(--rgb),.42) !important; }
.btn-primary svg   { color: #04121a !important; }

/* ── cartões de vantagem, rodapé e avisos ──────────────────────────────── */
.vantagem { background: rgba(var(--rgb),.045) !important; border-left-color: var(--verde) !important; }
.vantagem-titulo { color: var(--verde) !important; }
.vantagem-desc   { color: rgba(219,234,254,.68) !important; }
.vantagens       { border-top-color: rgba(var(--rgb),.12) !important; }

.meta-top .val .gold, .headline-eyebrow, .brand-tagline { color: var(--verde) !important; }
.headline-eyebrow::before { color: var(--verde) !important; }
.headline-eyebrow { border-color: rgba(var(--rgb),.3); }

.form-footer, .form-footer a, .otp-meta, .otp-back { color: rgba(219,234,254,.45) !important; }
.form-footer a:hover, .otp-resend, .otp-back:hover  { color: var(--verde) !important; }

.email-sent h2 { color: #fff !important; }
.email-sent p, .email-sent .ttl { color: rgba(219,234,254,.6) !important; }
.email-sent .email-highlight { color: var(--verde) !important; }
.email-sent-icon { border-color: var(--verde) !important; color: var(--verde) !important; }
.email-sent .help-link { color: var(--verde) !important; }

.spinner-overlay { background: rgba(4,7,14,.9) !important; }
.spinner { border-top-color: var(--verde) !important; }
.spinner-overlay p { color: rgba(219,234,254,.7) !important; }
.toast.success { background: #0f766e !important; }

/* O seletor de idioma ficava POR CIMA do boot (z-index alto de fábrica).
   Enquanto o boot está na tela, ele sai da frente. */
#tmbOv ~ .lang-switch,
#tmbOv ~ * .lang-switch,
#tmbOv ~ #langSwitch { display: none !important; }

/* ⚠️ O REATOR DESENHADO NO PALCO (26/set). A regra .brain-layer trazia
   blur e opacidade feitos pras tres copias da imagem do cerebro; o
   desenho ja e translucido e some debaixo disso. Aqui ele fica limpo. */
/* ⚠️⚠️ O display:block E O QUE FALTAVA. A linha 131 desta folha esconde
   .brain-layer com !important -- ela apagava as tres copias do cerebro
   quando o boot ainda punha o reator por cima. Meu reator HERDOU essa
   regra: eu liguei filtro e opacidade e esqueci que ele nem estava sendo
   desenhado. Foi a tela vazia que ele fotografou pela segunda vez. */
.brain-layer.sharp#tmPalcoReator {
  display: block !important; filter: none !important; opacity: 1 !important;
}
.brain-layer.sharp > svg { width: 100%; height: 100%; overflow: visible; display: block; }