/* ============================================================
   ÓRBITA GLASS · v2 — linguagem visual proprietária da San Gabriel
   Marca (manual oficial): índigo #2F398B · ciano #1E8DCD
                           cinza #808181 · cinza claro #C6C6C6
   Vidro só na camada funcional (navegação, folhas, entrada).
   Conteúdo denso em material sólido, iluminado por cima.
   Cada módulo tem composição própria; nada de "quatro números iguais".
   ============================================================ */

:root{
  /* --- marca --- */
  --indigo:#2F398B; --ciano:#1E8DCD; --cinza:#808181; --cinza-claro:#C6C6C6;
  --indigo-esc:#242C6E; --indigo-prof:#141A45; --indigo-noite:#0B0F2B;
  --ciano-claro:#DCEEFA; --ciano-esc:#146A9C;

  /* --- semântica (nunca só cor: sempre acompanhada de rótulo) --- */
  --ok:#14705A; --ok-fundo:#E1F3EC; --ok-borda:#9AD5C0;
  --atencao:#8F5405; --atencao-fundo:#FAEFDD; --atencao-borda:#E6C089;
  --erro:#A82826; --erro-fundo:#F9E7E5; --erro-borda:#E4A9A4;

  /* --- superfícies claras --- */
  --fundo:#EBEFF8;
  --fundo-2:#E1E7F3;
  --superficie:#FFFFFF;
  --superficie-2:#F5F7FC;
  --texto:#151A2C;
  --texto-2:#4F566F;
  --texto-3:#828AA4;
  --borda:#E3E8F3;
  --borda-forte:#C9D2E5;
  --primaria:var(--indigo);
  --acao:var(--ciano);
  --sobre-acao:#FFFFFF;
  --luz-topo:inset 0 1px 0 rgba(255,255,255,.72);   /* highlight de topo: superfície iluminada */
  --luz-ambiente:radial-gradient(130% 90% at 50% -12%, rgba(30,141,205,.10), transparent 58%);

  /* --- vidro líquido: três camadas (fundo, refração, reflexo) --- */
  --vidro-fundo:linear-gradient(177deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.60) 52%, rgba(255,255,255,.70) 100%);
  --vidro-blur:blur(30px) saturate(200%) brightness(1.05);
  --vidro-borda:rgba(255,255,255,.75);
  --vidro-borda-baixo:rgba(126,140,190,.22);
  --vidro-reflexo:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.32);
  --vidro-sombra:0 2px 8px rgba(16,22,58,.06), 0 18px 50px rgba(16,22,58,.15);
  --vidro-halo:radial-gradient(120% 80% at 22% -14%, rgba(255,255,255,.60), transparent 60%);

  /* --- superfície de marca (heróis dos módulos) --- */
  --marca-fundo:linear-gradient(150deg, #313B92 0%, #26307A 46%, #1B2464 100%);
  --marca-halo:radial-gradient(90% 120% at 82% -20%, rgba(30,141,205,.55), transparent 60%);
  --marca-borda:rgba(255,255,255,.14);

  /* --- tipografia --- */
  --fs-eyebrow:11px; --fs-corpo:15px; --fs-titulo:18px;
  --fs-hero:clamp(30px,7vw,42px); --fs-num:clamp(24px,5vw,30px);
  --ls-aperto:-.02em; --ls-hero:-.035em;

  /* --- geometria --- */
  --r-p:8px; --r-s:12px; --r-m:16px; --r-g:22px; --r-gg:28px; --r-capsula:999px;
  --e1:0 1px 2px rgba(16,22,58,.05), 0 1px 3px rgba(16,22,58,.04);
  --e2:0 2px 6px rgba(16,22,58,.07), 0 12px 30px rgba(16,22,58,.08);
  --e3:0 6px 16px rgba(16,22,58,.10), 0 26px 56px rgba(16,22,58,.14);

  /* --- movimento (calmo, espacial, nunca bloqueante) --- */
  --curva:cubic-bezier(.32,.72,0,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);
  --curva-mola:cubic-bezier(.34,1.42,.5,1);
  --t-rapido:170ms; --t-medio:260ms; --t-lento:360ms;

  --safe-b:env(safe-area-inset-bottom,0px);
  --altura-nav:66px;
}

/* --- modo escuro Órbita --- */
@media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){
  --fundo:#080C20; --fundo-2:#0F1434;
  --superficie:#141A3C; --superficie-2:#1A2148;
  --texto:#EFF1FB; --texto-2:#A7AECD; --texto-3:#767DA0;
  --borda:#232B57; --borda-forte:#333C74;
  --primaria:#96A0F0; --acao:#3BA6E6; --sobre-acao:#04213A;
  --luz-topo:inset 0 1px 0 rgba(180,196,255,.08);
  --luz-ambiente:radial-gradient(130% 90% at 50% -12%, rgba(60,120,220,.16), transparent 58%);
  --vidro-fundo:linear-gradient(177deg, rgba(30,38,84,.80) 0%, rgba(20,26,62,.64) 52%, rgba(26,33,74,.74) 100%);
  --vidro-borda:rgba(150,164,230,.30);
  --vidro-borda-baixo:rgba(0,0,0,.38);
  --vidro-reflexo:inset 0 1px 0 rgba(180,196,255,.28), inset 0 -1px 0 rgba(0,0,0,.30);
  --vidro-sombra:0 2px 10px rgba(0,0,0,.34), 0 20px 52px rgba(0,0,0,.48);
  --vidro-halo:radial-gradient(120% 80% at 22% -14%, rgba(150,170,255,.18), transparent 60%);
  --marca-fundo:linear-gradient(150deg, #1B2358 0%, #141A46 50%, #0D1233 100%);
  --marca-halo:radial-gradient(90% 120% at 82% -20%, rgba(30,141,205,.34), transparent 60%);
  --marca-borda:rgba(150,164,230,.16);
  --ok:#5CC79B; --ok-fundo:#0F3529; --ok-borda:#1E6E53;
  --atencao:#E4AC55; --atencao-fundo:#3A2B0F; --atencao-borda:#7A5A1C;
  --erro:#EB8E84; --erro-fundo:#3B1A19; --erro-borda:#803A35;
  --ciano-claro:#0E2E46;
  --e1:0 1px 2px rgba(0,0,0,.42); --e2:0 2px 12px rgba(0,0,0,.46); --e3:0 10px 34px rgba(0,0,0,.55);
}}
:root[data-tema="escuro"]{
  --fundo:#080C20; --fundo-2:#0F1434;
  --superficie:#141A3C; --superficie-2:#1A2148;
  --texto:#EFF1FB; --texto-2:#A7AECD; --texto-3:#767DA0;
  --borda:#232B57; --borda-forte:#333C74;
  --primaria:#96A0F0; --acao:#3BA6E6; --sobre-acao:#04213A;
  --luz-topo:inset 0 1px 0 rgba(180,196,255,.08);
  --luz-ambiente:radial-gradient(130% 90% at 50% -12%, rgba(60,120,220,.16), transparent 58%);
  --vidro-fundo:linear-gradient(177deg, rgba(30,38,84,.80) 0%, rgba(20,26,62,.64) 52%, rgba(26,33,74,.74) 100%);
  --vidro-borda:rgba(150,164,230,.30);
  --vidro-borda-baixo:rgba(0,0,0,.38);
  --vidro-reflexo:inset 0 1px 0 rgba(180,196,255,.28), inset 0 -1px 0 rgba(0,0,0,.30);
  --vidro-sombra:0 2px 10px rgba(0,0,0,.34), 0 20px 52px rgba(0,0,0,.48);
  --vidro-halo:radial-gradient(120% 80% at 22% -14%, rgba(150,170,255,.18), transparent 60%);
  --marca-fundo:linear-gradient(150deg, #1B2358 0%, #141A46 50%, #0D1233 100%);
  --marca-halo:radial-gradient(90% 120% at 82% -20%, rgba(30,141,205,.34), transparent 60%);
  --marca-borda:rgba(150,164,230,.16);
  --ok:#5CC79B; --ok-fundo:#0F3529; --ok-borda:#1E6E53;
  --atencao:#E4AC55; --atencao-fundo:#3A2B0F; --atencao-borda:#7A5A1C;
  --erro:#EB8E84; --erro-fundo:#3B1A19; --erro-borda:#803A35;
  --ciano-claro:#0E2E46;
  --e1:0 1px 2px rgba(0,0,0,.42); --e2:0 2px 12px rgba(0,0,0,.46); --e3:0 10px 34px rgba(0,0,0,.55);
}

/* acessibilidade: sem transparência o vidro vira material sólido */
@media (prefers-reduced-transparency: reduce){
  :root{ --vidro-fundo:var(--superficie); --vidro-blur:none;
         --vidro-borda:var(--borda-forte); --vidro-halo:none; --vidro-reflexo:none;
         --luz-ambiente:none; }
}
@media (prefers-contrast: more){
  :root{ --borda:var(--borda-forte); --texto-2:var(--texto);
         --vidro-fundo:var(--superficie); --vidro-blur:none; --luz-ambiente:none;
         --marca-borda:rgba(255,255,255,.4); }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font:var(--fs-corpo)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--texto);background:var(--fundo);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility;
}
/* luz ambiente: as superfícies parecem apoiadas num espaço iluminado por cima */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--luz-ambiente)}
#app{min-height:100%;display:flex;flex-direction:column}
:focus-visible{outline:2.5px solid var(--acao);outline-offset:3px;border-radius:6px}
::selection{background:var(--ciano);color:#fff}

/* ------------------------------------------------------ utilitário de vidro */
.vidro:not(nav):not(.folha){position:relative}
.vidro{
  background:var(--vidro-fundo);
  border:1px solid var(--vidro-borda);
  border-bottom-color:var(--vidro-borda-baixo);
  box-shadow:var(--vidro-reflexo), var(--vidro-sombra);
  -webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);
  isolation:isolate;
}
.vidro::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--vidro-halo);opacity:.9;z-index:-1;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .vidro{background:var(--superficie)}
  .vidro::before{display:none}
}

/* ------------------------------------------------------ movimento */
@keyframes chegar{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes chegarProfundo{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes surgir{from{opacity:0}to{opacity:1}}
@keyframes desenhar{from{stroke-dashoffset:var(--dash)}}
@keyframes varrer{to{transform:rotate(360deg)}}
@keyframes orbitar{to{transform:rotate(360deg)}}
@keyframes contra-orbitar{to{transform:rotate(-360deg)}}
@keyframes pulsar{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@keyframes brotar{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* progressão calma: cada item entra em sequência */
.entra > *{animation:chegar var(--t-medio) var(--curva) both}
.entra > *:nth-child(1){animation-delay:0ms}
.entra > *:nth-child(2){animation-delay:45ms}
.entra > *:nth-child(3){animation-delay:90ms}
.entra > *:nth-child(4){animation-delay:130ms}
.entra > *:nth-child(5){animation-delay:165ms}
.entra > *:nth-child(6){animation-delay:195ms}
.entra > *:nth-child(n+7){animation-delay:220ms}

/* transição espacial entre telas */
::view-transition-old(root){animation:sairTela 190ms var(--curva-suave) both}
::view-transition-new(root){animation:entrarTela 320ms var(--curva) both}
@keyframes sairTela{to{opacity:0;transform:translateY(-8px) scale(.994)}}
@keyframes entrarTela{from{opacity:0;transform:translateY(12px) scale(.99)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:1ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============ ENTRADA — composição cinematográfica ============ */
.splash{flex:1;display:grid;place-items:center;background:var(--indigo-prof)}
.entrada{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:32px 22px calc(32px + var(--safe-b));min-height:100vh;min-height:100dvh;
  background:var(--indigo-prof);color:#fff;position:relative;overflow:hidden;
}
.entrada::before,.entrada::after{content:"";position:absolute;inset:0;pointer-events:none}
.entrada::before{
  background:
    radial-gradient(72rem 40rem at 84% -16%, rgba(30,141,205,.42), transparent 58%),
    radial-gradient(50rem 34rem at -18% 106%, rgba(47,57,139,.92), transparent 62%),
    linear-gradient(168deg,#1B2360 0%,var(--indigo-prof) 48%,#080B22 100%);
}
.entrada::after{
  background:
    radial-gradient(26rem 20rem at 14% 24%, rgba(30,141,205,.16), transparent 68%),
    radial-gradient(18rem 14rem at 92% 72%, rgba(255,255,255,.05), transparent 70%);
  animation:respirar 14s ease-in-out infinite alternate;
}
@keyframes respirar{from{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.entrada .palco{width:100%;max-width:404px;margin:0 auto;position:relative;z-index:1;
  animation:chegarProfundo 520ms var(--curva) both}
.entrada .logo-sg{width:min(238px,62%);display:block;margin:0 auto 12px}
.entrada .produto{
  text-align:center;color:#fff;font-size:14px;font-weight:300;
  letter-spacing:.5em;text-transform:uppercase;margin:0 0 40px;opacity:.88;text-indent:.5em;
}
.entrada form{
  background:linear-gradient(177deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.20);border-bottom-color:rgba(0,0,0,.18);
  border-radius:var(--r-gg);padding:22px 20px;
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 20px 52px rgba(3,6,26,.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .entrada form{background:rgba(24,30,78,.95)}
}
.entrada label{display:block;font-size:13px;opacity:.82;margin:0 0 6px;font-weight:500}
.entrada input{
  width:100%;min-height:50px;padding:14px 16px;font-size:16px;color:#fff;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);margin-bottom:14px;
  background:rgba(255,255,255,.10);
  transition:background var(--t-rapido) var(--curva-suave),border-color var(--t-rapido) var(--curva-suave);
}
.entrada input::placeholder{color:rgba(255,255,255,.38)}
.entrada input:focus{outline:none;border-color:var(--ciano);background:rgba(255,255,255,.17)}
.entrada .btn{margin-top:6px}
.entrada .rodape{max-width:404px;margin:22px auto 0;font-size:12.5px;
  color:rgba(255,255,255,.52);line-height:1.6;text-align:center;position:relative;z-index:1}

/* ============ CONCHA ============ */
header{
  position:sticky;top:0;z-index:30;color:#fff;padding:14px 18px;
  background:linear-gradient(152deg,var(--indigo) 0%,var(--indigo-esc) 74%,#1E2560 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, var(--e2);
}
:root[data-tema="escuro"] header{background:linear-gradient(152deg,#1A2158,#111640)}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) header{background:linear-gradient(152deg,#1A2158,#111640)}
}
header .linha{display:flex;align-items:center;gap:12px;max-width:1120px;margin:0 auto}
header .simbolo{width:32px;height:32px;flex:none;object-fit:contain;opacity:.96}
@media (max-width:400px){header .simbolo{display:none}}
header .tit{flex:1;min-width:0}
header h1{margin:0;font-size:18px;font-weight:650;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .sub{font-size:12.5px;opacity:.70;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  display:grid;place-items:center;font-size:13px;font-weight:650;color:#fff;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
.avatar:hover{background:rgba(255,255,255,.26)}
.avatar:active{transform:scale(.94)}

main{flex:1;padding:18px 16px calc(var(--altura-nav) + 30px + var(--safe-b))}
.max{max-width:1120px;margin:0 auto}

/* ============ NAVEGAÇÃO — cápsula de vidro ============ */
nav,nav.vidro{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(11px + var(--safe-b));z-index:40;
  display:flex;gap:2px;padding:6px;border-radius:var(--r-capsula);
  max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;
  animation:navChega var(--t-lento) var(--curva) both;
}
@keyframes navChega{
  from{opacity:0;transform:translateX(-50%) translateY(16px)}
  to{opacity:1;transform:translateX(-50%)}
}
nav::-webkit-scrollbar{display:none}
nav button{
  position:relative;min-width:62px;min-height:52px;border:0;background:none;
  border-radius:var(--r-capsula);padding:7px 13px 6px;
  font-size:10.5px;font-weight:600;color:var(--texto-2);font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;
  transition:color var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
nav button .ic{width:21px;height:21px;transition:transform var(--t-medio) var(--curva-mola)}
nav button.on{color:var(--sobre-acao)}
nav button.on .ic{transform:translateY(-1px) scale(1.08)}
nav button.on::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-capsula);z-index:-1;
  background:linear-gradient(170deg,var(--acao),color-mix(in srgb,var(--acao) 78%, #000 12%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px color-mix(in srgb,var(--acao) 42%, transparent);
  animation:brotar var(--t-medio) var(--curva-mola) both;
}
nav button:not(.on):hover{color:var(--primaria)}
nav button:active{transform:scale(.94)}

@media (min-width: 900px){
  nav,nav.vidro{left:14px;top:50%;bottom:auto;transform:translateY(-50%);
    flex-direction:column;border-radius:30px;max-height:calc(100vh - 40px);overflow-y:auto;
    animation:railChega var(--t-lento) var(--curva) both}
  @keyframes railChega{
    from{opacity:0;transform:translateY(-50%) translateX(-14px)}
    to{opacity:1;transform:translateY(-50%)}
  }
  main{padding-left:112px}
  main .max{max-width:1000px}
}

/* ============ CONTEÚDO — sólido, iluminado, leitura máxima ============ */
.bloco{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:18px;margin-bottom:14px;box-shadow:var(--luz-topo),var(--e1);
}
.bloco h2{margin:0 0 3px;font-size:16px;font-weight:680;letter-spacing:var(--ls-aperto)}
.bloco .conta{font-size:12.5px;color:var(--texto-2);margin-bottom:10px}
.titulo-secao{
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.12em;color:var(--texto-3);
  margin:26px 4px 10px;font-weight:700;display:flex;align-items:center;gap:8px;
}
.titulo-secao::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--borda),transparent)}

.item{
  display:flex;gap:13px;align-items:flex-start;padding:14px 4px;
  border-top:1px solid var(--borda);border-radius:var(--r-s);
}
.item:first-of-type{border-top:0}
.item[data-t],.item[data-f],.item[data-p],.item[data-i],.item[data-un]{
  cursor:pointer;margin:0 -6px;padding-left:12px;padding-right:10px;position:relative;
  transition:background var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
/* afordância de linha clicável: acento que cresce ao passar */
.item[data-t]::before,.item[data-f]::before,.item[data-p]::before,.item[data-i]::before,.item[data-un]::before{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:3px;background:var(--acao);opacity:0;
  transition:height var(--t-medio) var(--curva),opacity var(--t-rapido) var(--curva-suave);
}
.item[data-t]:hover,.item[data-f]:hover,.item[data-p]:hover,.item[data-i]:hover,.item[data-un]:hover{
  background:var(--superficie-2)
}
.item[data-t]:hover::before,.item[data-f]:hover::before,.item[data-p]:hover::before,
.item[data-i]:hover::before,.item[data-un]:hover::before{height:56%;opacity:1}
.item[data-t]:active,.item[data-f]:active,.item[data-i]:active{transform:scale(.99)}
.item .txt{flex:1;min-width:0}
.item .nm{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.item .dt{font-size:12.5px;color:var(--texto-2);margin-top:3px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* haste de estado/prioridade — conecta a linha à saúde calculada */
.item .risco{width:3px;flex:none;align-self:stretch;border-radius:3px;background:var(--borda-forte);min-height:34px}
.item .risco.ok{background:var(--ok)} .item .risco.at{background:var(--atencao)}
.item .risco.er{background:var(--erro)} .item .risco.n{background:var(--borda-forte)}

.selo{
  font-size:10.5px;padding:5px 11px 5px 9px;border-radius:var(--r-capsula);
  background:var(--ciano-claro);color:var(--ciano-esc);border:1px solid transparent;
  white-space:nowrap;font-weight:700;flex:none;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:6px;
}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:none}
:root[data-tema="escuro"] .selo{color:#8FCBF0}
@media (prefers-color-scheme: dark){:root:not([data-tema="claro"]) .selo{color:#8FCBF0}}
.selo.ok{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.selo.at{background:var(--atencao-fundo);color:var(--atencao);border-color:var(--atencao-borda)}
.selo.er{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-borda)}
.selo.n{background:var(--fundo-2);color:var(--texto-2)}
.selo.n::before{opacity:.5}

/* métricas — refinadas; usadas em contextos secundários (folhas, auditoria) */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.metrica{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);
  padding:15px 16px;box-shadow:var(--luz-topo),var(--e1);
  transition:transform var(--t-medio) var(--curva),box-shadow var(--t-medio) var(--curva);
}
.metrica:hover{transform:translateY(-2px);box-shadow:var(--luz-topo),var(--e2)}
.metrica .v{font-size:28px;font-weight:730;color:var(--primaria);line-height:1.08;letter-spacing:var(--ls-hero)}
.metrica .r{font-size:12px;color:var(--texto-2);margin-top:5px;font-weight:500}
.metrica.alerta .v{color:var(--atencao)}

/* ============ SUPERFÍCIE DE MARCA (heróis dos módulos) ============ */
.marca{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--r-gg);
  background:var(--marca-fundo);border:1px solid var(--marca-borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--e2);
  padding:20px;margin-bottom:16px;isolation:isolate;
}
.marca::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--marca-halo)}
.marca .eyebrow{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;opacity:.72;margin:0 0 4px}

/* --- Briefing do dia (Hoje) --- */
.briefing .focos{display:flex;gap:6px;margin-top:6px}
.briefing .foco{
  flex:1;min-width:0;border:0;background:rgba(255,255,255,.07);color:#fff;font-family:inherit;
  border-radius:var(--r-m);padding:13px 12px;text-align:left;cursor:pointer;position:relative;
  transition:background var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
.briefing .foco:hover{background:rgba(255,255,255,.14)}
.briefing .foco:active{transform:scale(.97)}
.briefing .foco .n{font-size:var(--fs-num);font-weight:760;line-height:1;letter-spacing:var(--ls-hero);display:block}
.briefing .foco .l{font-size:11.5px;opacity:.78;margin-top:6px;line-height:1.3;display:block}
.briefing .foco.q .n{color:#FFD79A} .briefing .foco.a .n{color:#9BD8FF}
.briefing .rodape-brief{font-size:12.5px;opacity:.72;margin-top:12px}

/* --- Barra de governança (Fronteiras) --- */
.gov{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-gg);
  padding:20px;margin-bottom:16px;box-shadow:var(--luz-topo),var(--e1)}
.gov .cume{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.gov .cume b{font-size:var(--fs-hero);font-weight:760;letter-spacing:var(--ls-hero);line-height:1;color:var(--primaria)}
.gov .cume span{font-size:13px;color:var(--texto-2)}
.gov .trilho{display:flex;height:14px;border-radius:var(--r-capsula);overflow:hidden;
  background:var(--fundo-2);box-shadow:inset 0 1px 2px rgba(16,22,58,.12)}
.gov .trilho i{display:block;height:100%;transition:width var(--t-lento) var(--curva)}
.gov .trilho .v-ok{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 70%,#fff))}
.gov .trilho .v-at{background:linear-gradient(90deg,var(--atencao),color-mix(in srgb,var(--atencao) 76%,#fff))}
.gov .legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.gov .legenda span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--texto-2);font-weight:550}
.gov .legenda i{width:9px;height:9px;border-radius:3px;flex:none}

/* --- Comando (Painel do administrador) --- */
.comando{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.comando .lead{flex:none}
.comando .lead .n{font-size:var(--fs-hero);font-weight:770;line-height:1;letter-spacing:var(--ls-hero);display:block}
.comando .lead .l{font-size:12.5px;opacity:.78;margin-top:4px}
.comando .apoio{flex:1;min-width:180px;display:flex;flex-wrap:wrap;gap:10px}
.comando .chip{
  flex:1;min-width:120px;background:rgba(255,255,255,.08);border-radius:var(--r-m);padding:11px 13px;
  border:1px solid rgba(255,255,255,.08);
}
.comando .chip .n{font-size:19px;font-weight:730;line-height:1}
.comando .chip.alerta .n{color:#FFD79A}
.comando .chip .l{font-size:11px;opacity:.76;margin-top:4px;line-height:1.3}

/* --- Faixa de status (Obras / integração) --- */
.status-band{
  display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:16px;
  border-radius:var(--r-g);border:1px solid var(--borda);background:var(--superficie);
  box-shadow:var(--luz-topo),var(--e1);
}
.status-band .farol{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)}
.status-band.on{color:var(--ok)} .status-band.off{color:var(--atencao)} .status-band.bad{color:var(--erro)}
.status-band .txt{flex:1;min-width:0}
.status-band .txt b{display:block;font-size:14.5px;font-weight:650;color:var(--texto);letter-spacing:-.01em}
.status-band .txt p{margin:2px 0 0;font-size:12.5px;color:var(--texto-2);line-height:1.45}

/* ============ RADAR DO INVENTÁRIO ============ */
.radar{
  position:relative;overflow:hidden;border-radius:var(--r-gg);margin-bottom:16px;color:#fff;
  background:var(--marca-fundo);border:1px solid var(--marca-borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--e3);
  display:flex;flex-wrap:wrap;gap:8px 22px;padding:22px;isolation:isolate;
}
.radar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--marca-halo)}
.radar-cena{position:relative;width:min(300px,74vw);aspect-ratio:1;margin:0 auto;flex:none}
.radar-cena svg{width:100%;height:100%;display:block;position:relative;z-index:2;overflow:visible}
/* varredura do radar: monitoramento vivo */
.radar-sweep{
  position:absolute;inset:6%;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from -20deg,
     rgba(90,180,240,0) 0deg, rgba(90,180,240,0) 274deg,
     rgba(90,180,240,.05) 300deg, rgba(120,200,255,.30) 350deg, rgba(150,215,255,.5) 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 60%, transparent 62%);
          mask:radial-gradient(circle at 50% 50%, #000 60%, transparent 62%);
  animation:varrer 7s linear infinite;
}
.radar-anel{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.radar-anel.tracejado{stroke-dasharray:2 6;stroke:rgba(255,255,255,.20)}
.radar-eixo{stroke:rgba(255,255,255,.08);stroke-width:1}
.radar-orbita{transform-origin:160px 160px;animation:orbitar 90s linear infinite}
.radar-orbita.b{animation-duration:130s;animation-direction:reverse}
.radar-hub{fill:url(#hubgrad);stroke:rgba(255,255,255,.5);stroke-width:1.5;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.radar-hub-n{fill:#fff;font-weight:770;font-size:24px;letter-spacing:-.03em;text-anchor:middle;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.radar-hub-l{fill:rgba(255,255,255,.72);font-size:8.5px;font-weight:600;text-anchor:middle;
  text-transform:uppercase;letter-spacing:.1em;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.corpo{transform-box:fill-box;transform-origin:center;animation:brotar var(--t-lento) var(--curva-mola) both}
.corpo .halo{opacity:.28;transform-box:fill-box;transform-origin:center}
.corpo .disco{stroke:rgba(255,255,255,.7);stroke-width:1.5}
.corpo.ciano .disco{fill:#38A6E6} .corpo.ciano .halo{fill:#38A6E6}
.corpo.at .disco{fill:#E8A94D} .corpo.at .halo{fill:#E8A94D}
.corpo.er .disco{fill:#E4746B} .corpo.er .halo{fill:#E4746B}
.corpo .qn{fill:#fff;font-weight:750;font-size:12px;text-anchor:middle;dominant-baseline:central;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.corpo.urgente .halo{animation:pulsar 2.4s ease-in-out infinite}
.radar-vazio{text-align:center}
.radar-vazio .check{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;
  background:rgba(92,199,155,.18);color:#8FE3C0}

/* chaves do radar: legenda viva + atalhos (substitui os "quatro números") */
.radar-chaves{flex:1;min-width:210px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.chave{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-m);
  padding:11px 14px;color:#fff;
  transition:background var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
.chave:hover{background:rgba(255,255,255,.13)} .chave:active{transform:scale(.98)}
.chave[disabled]{opacity:.5;cursor:default}
.chave .ponto{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 20%,transparent)}
.chave .ponto.ciano{color:#38A6E6;background:#38A6E6}
.chave .ponto.at{color:#E8A94D;background:#E8A94D}
.chave .ponto.er{color:#E4746B;background:#E4746B}
.chave .cv{flex:1;min-width:0}
.chave .cv b{display:block;font-size:19px;font-weight:750;line-height:1.05;letter-spacing:-.02em}
.chave .cv span{display:block;font-size:11.5px;opacity:.76;margin-top:2px}
.chave .seta{opacity:.5;flex:none;transition:transform var(--t-rapido) var(--curva)}
.chave:hover .seta{transform:translateX(3px);opacity:.8}

@media (min-width:640px){
  .radar{flex-wrap:nowrap;padding:24px 26px}
  .radar-cena{margin:0}
}

/* ============ ESTADO VAZIO — orientação, não deserto ============ */
.estado-vazio{
  text-align:center;padding:28px 22px;display:flex;flex-direction:column;align-items:center;
  border:1px dashed var(--borda-forte);border-radius:var(--r-g);background:var(--superficie-2);
}
.estado-vazio .icone{
  width:60px;height:60px;border-radius:19px;display:grid;place-items:center;margin-bottom:14px;
  color:var(--acao);background:var(--ciano-claro);box-shadow:var(--luz-topo),var(--e1);
}
.estado-vazio .icone svg{width:28px;height:28px}
.estado-vazio h4{margin:0;font-size:16px;font-weight:680;letter-spacing:-.01em}
.estado-vazio p{margin:7px 0 0;font-size:13.5px;color:var(--texto-2);max-width:44ch;line-height:1.6}
.estado-vazio .passos{margin:16px 0 0;padding:0;list-style:none;text-align:left;display:flex;
  flex-direction:column;gap:9px;width:100%;max-width:340px}
.estado-vazio .passos li{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--texto-2);line-height:1.45}
.estado-vazio .passos b{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--primaria);color:#fff;
  font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px;
}
.estado-vazio .btn{margin-top:18px;max-width:280px}
/* legado: mini-vazio dentro de blocos */
.vazio{color:var(--texto-2);font-size:13.5px;padding:18px 10px;text-align:center;line-height:1.65}

/* ============ CONTROLES ============ */
button.btn{
  width:100%;min-height:52px;padding:14px;font-size:15px;font-weight:650;border:0;
  border-radius:var(--r-m);cursor:pointer;font-family:inherit;letter-spacing:-.005em;
  background:linear-gradient(170deg,var(--acao),color-mix(in srgb,var(--acao) 84%, #000 10%));
  color:var(--sobre-acao);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 3px 12px color-mix(in srgb,var(--acao) 34%, transparent);
  transition:transform var(--t-rapido) var(--curva),filter var(--t-rapido) var(--curva-suave),
             box-shadow var(--t-medio) var(--curva);
}
button.btn:hover{filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 20px color-mix(in srgb,var(--acao) 42%, transparent)}
button.btn:active{transform:scale(.977)}
button.btn[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none;filter:none}
button.btn.sec{background:var(--fundo-2);color:var(--primaria);box-shadow:var(--luz-topo);border:1px solid var(--borda)}
button.btn.sec:hover{background:var(--borda);filter:none}
button.min{
  min-height:38px;padding:9px 15px;font-size:13px;font-weight:650;border-radius:var(--r-capsula);
  border:1px solid var(--borda-forte);background:var(--superficie);color:var(--primaria);
  cursor:pointer;font-family:inherit;
  transition:background var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
button.min:hover{background:var(--superficie-2)}
button.min:active{transform:scale(.95)}

select,input[type=text],input[type=password],input[type=date],input[type=number],textarea{
  width:100%;min-height:48px;padding:12px 14px;font-size:15px;font-family:inherit;
  border:1px solid var(--borda-forte);border-radius:var(--r-s);
  background:var(--superficie);color:var(--texto);
  transition:border-color var(--t-rapido) var(--curva-suave),box-shadow var(--t-rapido) var(--curva-suave);
}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--acao);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--acao) 16%, transparent)}
textarea{min-height:88px;resize:vertical;line-height:1.55}
label.campo{display:block;font-size:12.5px;color:var(--texto-2);margin:14px 0 6px;font-weight:650;
  letter-spacing:.005em}

.capsulas{display:flex;gap:8px;overflow-x:auto;padding:3px;margin:0 0 12px;scrollbar-width:none}
.capsulas::-webkit-scrollbar{display:none}
.capsulas button{
  flex:none;min-height:40px;padding:9px 16px;font-size:13px;font-weight:650;
  border-radius:var(--r-capsula);border:1px solid var(--borda-forte);
  background:var(--superficie);color:var(--texto-2);cursor:pointer;font-family:inherit;
  transition:all var(--t-rapido) var(--curva);
}
.capsulas button:active{transform:scale(.95)}
.capsulas button.on{background:var(--primaria);border-color:var(--primaria);color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primaria) 32%, transparent)}

/* ============ AVISOS ============ */
.aviso{padding:14px 16px;border-radius:var(--r-m);font-size:13.5px;line-height:1.55;
  margin-bottom:14px;border:1px solid transparent;animation:chegar var(--t-medio) var(--curva) both}
.aviso.i{background:var(--ciano-claro);color:var(--texto);border-left:3px solid var(--ciano)}
.aviso.a{background:var(--atencao-fundo);color:var(--texto);border-left:3px solid var(--atencao);border-color:var(--atencao-borda)}
.aviso.e{background:var(--erro-fundo);color:var(--texto);border-left:3px solid var(--erro);border-color:var(--erro-borda)}
.aviso.s{background:var(--ok-fundo);color:var(--texto);border-left:3px solid var(--ok);border-color:var(--ok-borda)}

.rede{position:fixed;top:0;left:0;right:0;padding:9px;text-align:center;font-size:12.5px;
  font-weight:600;background:var(--atencao);color:#fff;z-index:100;
  animation:chegar var(--t-rapido) var(--curva) both}
.oculto{display:none}

/* ação principal flutuante */
.flutuante{
  position:fixed;right:16px;bottom:calc(var(--altura-nav) + 24px + var(--safe-b));
  min-width:58px;height:58px;border-radius:var(--r-capsula);border:0;padding:0 20px;
  background:linear-gradient(170deg,var(--acao),color-mix(in srgb,var(--acao) 82%, #000 12%));
  color:var(--sobre-acao);font-size:15px;font-weight:680;line-height:1;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 26px color-mix(in srgb,var(--acao) 48%,transparent);
  cursor:pointer;z-index:35;display:flex;align-items:center;gap:9px;
  animation:chegarProfundo var(--t-lento) var(--curva-mola) both;
  transition:transform var(--t-rapido) var(--curva),box-shadow var(--t-medio) var(--curva);
}
.flutuante:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 34px color-mix(in srgb,var(--acao) 56%,transparent)}
.flutuante:active{transform:scale(.93)}
.flutuante .mais{font-size:27px;font-weight:300}
@media (min-width:900px){.flutuante{right:calc(50% - 500px + 16px)}}
@media (max-width:520px){.flutuante{right:14px}}

/* ============ FOLHA — vidro funcional, cabeçalho ancorado ============ */
.fundo-modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,12,34,.44);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:surgir var(--t-rapido) var(--curva-suave) both;
}
.folha{
  width:100%;max-width:660px;border-radius:var(--r-gg) var(--r-gg) 0 0;
  padding:0 18px calc(22px + var(--safe-b));max-height:92vh;max-height:92dvh;overflow-y:auto;
  background:var(--vidro-fundo);border:1px solid var(--vidro-borda);border-bottom:0;
  box-shadow:var(--vidro-reflexo), 0 -8px 60px rgba(8,12,34,.30);
  -webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);
  animation:folhaSobe var(--t-lento) var(--curva) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .folha{background:var(--superficie)}
}
@keyframes folhaSobe{from{transform:translateY(34px);opacity:.4}to{transform:none;opacity:1}}
/* cabeçalho da folha: ancorado, com título forte e fechamento explícito */
.folha-topo{
  position:sticky;top:0;z-index:3;margin:0 -18px 4px;padding:16px 18px 12px;
  background:linear-gradient(var(--vidro-fundo));
  -webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);
  border-bottom:1px solid var(--borda);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .folha-topo{background:var(--superficie)}
}
.folha-topo .puxador{width:40px;height:4px;background:var(--borda-forte);border-radius:2px;
  margin:0 auto 12px;opacity:.7}
.folha-topo .linha-topo{display:flex;align-items:flex-start;gap:12px}
.folha-topo .tt{flex:1;min-width:0}
.folha-topo h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.folha-topo .sub-folha{font-size:12.5px;color:var(--texto-2);margin-top:3px;line-height:1.4}
.fechar-x{
  flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--borda);
  background:var(--superficie);color:var(--texto-2);cursor:pointer;display:grid;place-items:center;
  transition:background var(--t-rapido) var(--curva-suave),color var(--t-rapido) var(--curva-suave),transform var(--t-rapido) var(--curva);
}
.fechar-x:hover{background:var(--fundo-2);color:var(--texto)}
.fechar-x:active{transform:scale(.9)}
.fechar-x svg{width:18px;height:18px}
.folha-corpo{padding-top:2px}
.folha h3{margin:0 0 4px;font-size:18px;font-weight:680;letter-spacing:-.02em}
.folha .bloco{background:var(--superficie);box-shadow:var(--luz-topo)}
.folha-corpo > *{animation:chegar var(--t-medio) var(--curva) both}
@media (min-width:700px){
  .fundo-modal{align-items:center;padding:22px}
  .folha{border-radius:var(--r-gg);max-height:88vh;border-bottom:1px solid var(--vidro-borda);
    animation:chegarProfundo var(--t-medio) var(--curva) both}
  .folha-topo .puxador{display:none}
}

.linha-btn{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.linha-btn button{flex:1;min-width:130px}
code{background:var(--fundo-2);padding:3px 8px;border-radius:6px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.senha-temp{font-family:ui-monospace,Menlo,monospace;font-size:25px;letter-spacing:.12em;
  text-align:center;padding:18px;background:var(--fundo-2);border-radius:var(--r-m);
  color:var(--primaria);font-weight:750}

/* ============ INVENTÁRIO — arco de saldo, taxímetro, revisão ============ */
.arco{position:relative;width:54px;height:54px;flex:none}
.arco svg{width:54px;height:54px;transform:rotate(-90deg);overflow:visible}
.arco .tri{fill:none;stroke:var(--fundo-2);stroke-width:5}
.arco .val{fill:none;stroke:var(--acao);stroke-width:5;stroke-linecap:round;
  animation:desenhar 780ms var(--curva) both}
.arco.baixo .val{stroke:var(--atencao)}
.arco span{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:750;letter-spacing:-.02em}

.taximetro{display:flex;align-items:baseline;gap:7px;margin-top:6px;
  font-size:25px;font-weight:770;color:var(--primaria);letter-spacing:var(--ls-hero)}
.taximetro small{font-size:12px;color:var(--texto-2);font-weight:550;letter-spacing:0}
.revisao{background:var(--superficie-2);border:1px dashed var(--borda-forte);
  border-radius:var(--r-m);padding:15px;margin-top:14px;animation:chegar var(--t-medio) var(--curva) both}
.revisao .lin{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:4px 0}
.revisao .lin span{color:var(--texto-2)}
.revisao .lin b{font-weight:680;text-align:right}

/* saldo por local — tira compacta, não "cartão branco" repetido */
.saldos-tira{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.saldo-chip{background:var(--superficie-2);border:1px solid var(--borda);border-radius:var(--r-m);
  padding:10px 14px;min-width:96px;box-shadow:var(--luz-topo)}
.saldo-chip .n{font-size:20px;font-weight:740;color:var(--primaria);line-height:1;letter-spacing:var(--ls-aperto)}
.saldo-chip .l{font-size:11.5px;color:var(--texto-2);margin-top:4px}
.saldo-chip.total{background:linear-gradient(160deg,var(--primaria),color-mix(in srgb,var(--primaria) 80%,#000 6%));border-color:transparent}
.saldo-chip.total .n{color:#fff} .saldo-chip.total .l{color:rgba(255,255,255,.8)}

/* ============ SCANNER QR — câmera real com mira ============ */
.scanner{position:relative;width:100%;aspect-ratio:1;max-height:52vh;margin:0 auto 6px;
  border-radius:var(--r-g);overflow:hidden;background:#05070F;box-shadow:var(--e2)}
.scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanner .quadro{position:absolute;inset:0;pointer-events:none}
/* escurece fora da mira, deixando um recorte central claro */
.scanner .quadro::before{content:"";position:absolute;inset:0;
  background:rgba(4,6,16,.5);
  -webkit-mask:radial-gradient(circle at 50% 47%, transparent 0 33%, #000 34%);
          mask:radial-gradient(circle at 50% 47%, transparent 0 33%, #000 34%)}
.scanner .mira{position:absolute;left:50%;top:47%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%)}
.scanner .mira i{position:absolute;width:30px;height:30px;border:3px solid rgba(150,215,255,.95);
  filter:drop-shadow(0 0 6px rgba(56,166,230,.6))}
.scanner .mira i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.scanner .mira i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.scanner .mira i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 12px}
.scanner .mira i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 12px 0}
.scanner .linha-scan{position:absolute;left:8%;right:8%;top:14%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(150,215,255,.95),transparent);
  box-shadow:0 0 12px rgba(56,166,230,.8);animation:escanear 2.4s ease-in-out infinite}
@keyframes escanear{0%{top:16%}50%{top:78%}100%{top:16%}}
.scanner .dica{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;text-align:center;
  font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(4,6,16,.7),transparent)}
.scanner .torch{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(4,6,16,.4);color:#fff;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.scanner .torch.on{background:rgba(150,215,255,.9);color:#05070F}
.scanner.sem-cam{aspect-ratio:auto;background:var(--superficie-2);display:grid;place-items:center;
  padding:28px 18px;box-shadow:none;border:1px dashed var(--borda-forte)}
.scanner .aviso{margin:0}

/* ============================================================
   ÓRBITA GLASS · v3 — concha orbital e Núcleo do Dia
   A interface é o artefato: tela cheia, duas materialidades reais.
   Esta camada só redefine apresentação; fluxos e dados permanecem.
   ============================================================ */

:root{
  --canvas:
    radial-gradient(70rem 46rem at 76% -14%, rgba(30,141,205,.13), transparent 62%),
    linear-gradient(145deg,#F7F8FB 0%,#EEF2F8 50%,#E9EEF7 100%);
  --canvas-grade:rgba(47,57,139,.055);
  --rail-fundo:linear-gradient(165deg,rgba(255,255,255,.84),rgba(242,246,253,.68));
  --rail-borda:rgba(255,255,255,.88);
  --rail-texto:#25305F;
  --palco-fundo:
    radial-gradient(38rem 28rem at 26% 22%,rgba(100,181,229,.22),transparent 64%),
    radial-gradient(32rem 28rem at 92% 110%,rgba(47,57,139,.18),transparent 62%),
    linear-gradient(145deg,rgba(249,251,255,.96),rgba(226,233,248,.94));
  --palco-texto:#15204C;
  --palco-texto-2:#5A6382;
  --palco-borda:rgba(116,135,187,.26);
  --palco-luz:rgba(255,255,255,.86);
  --palco-vidro:linear-gradient(160deg,rgba(255,255,255,.72),rgba(236,242,252,.46));
  --nucleo-sombra:0 34px 64px rgba(30,43,94,.24),inset 0 2px 2px rgba(255,255,255,.88);
  --conteudo-sombra:0 18px 42px rgba(22,34,76,.075),inset 0 1px 0 rgba(255,255,255,.84);
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --canvas:
      radial-gradient(78rem 48rem at 72% -18%,rgba(30,141,205,.18),transparent 62%),
      radial-gradient(50rem 40rem at 106% 88%,rgba(47,57,139,.22),transparent 70%),
      linear-gradient(145deg,#070A19 0%,#0A0F25 48%,#080C20 100%);
    --canvas-grade:rgba(155,178,255,.045);
    --rail-fundo:linear-gradient(165deg,rgba(24,31,70,.82),rgba(13,18,45,.72));
    --rail-borda:rgba(142,162,226,.20);
    --rail-texto:#E8ECFF;
    --palco-fundo:
      radial-gradient(38rem 30rem at 27% 18%,rgba(48,137,204,.18),transparent 65%),
      radial-gradient(32rem 30rem at 96% 108%,rgba(47,57,139,.30),transparent 64%),
      linear-gradient(145deg,rgba(18,25,59,.97),rgba(8,13,34,.98));
    --palco-texto:#F3F5FF;
    --palco-texto-2:#9FA8CC;
    --palco-borda:rgba(129,151,219,.18);
    --palco-luz:rgba(190,210,255,.16);
    --palco-vidro:linear-gradient(160deg,rgba(72,86,146,.22),rgba(20,28,68,.38));
    --nucleo-sombra:0 36px 72px rgba(0,0,0,.48),inset 0 2px 2px rgba(215,235,255,.28);
    --conteudo-sombra:0 20px 46px rgba(0,0,0,.25),inset 0 1px 0 rgba(174,195,255,.08);
  }
}

:root[data-tema="escuro"]{
  --canvas:
    radial-gradient(78rem 48rem at 72% -18%,rgba(30,141,205,.18),transparent 62%),
    radial-gradient(50rem 40rem at 106% 88%,rgba(47,57,139,.22),transparent 70%),
    linear-gradient(145deg,#070A19 0%,#0A0F25 48%,#080C20 100%);
  --canvas-grade:rgba(155,178,255,.045);
  --rail-fundo:linear-gradient(165deg,rgba(24,31,70,.82),rgba(13,18,45,.72));
  --rail-borda:rgba(142,162,226,.20);
  --rail-texto:#E8ECFF;
  --palco-fundo:
    radial-gradient(38rem 30rem at 27% 18%,rgba(48,137,204,.18),transparent 65%),
    radial-gradient(32rem 30rem at 96% 108%,rgba(47,57,139,.30),transparent 64%),
    linear-gradient(145deg,rgba(18,25,59,.97),rgba(8,13,34,.98));
  --palco-texto:#F3F5FF;
  --palco-texto-2:#9FA8CC;
  --palco-borda:rgba(129,151,219,.18);
  --palco-luz:rgba(190,210,255,.16);
  --palco-vidro:linear-gradient(160deg,rgba(72,86,146,.22),rgba(20,28,68,.38));
  --nucleo-sombra:0 36px 72px rgba(0,0,0,.48),inset 0 2px 2px rgba(215,235,255,.28);
  --conteudo-sombra:0 20px 46px rgba(0,0,0,.25),inset 0 1px 0 rgba(174,195,255,.08);
}

body{background:var(--canvas);background-attachment:fixed}
body::before{
  z-index:-3;background:
    linear-gradient(var(--canvas-grade) 1px,transparent 1px),
    linear-gradient(90deg,var(--canvas-grade) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 28%,#000 80%,transparent);
          mask:linear-gradient(90deg,transparent,#000 28%,#000 80%,transparent);
}
body::after{
  content:"";position:fixed;z-index:-2;pointer-events:none;width:min(52vw,780px);aspect-ratio:1;
  right:-12vw;bottom:-26vw;background:url("./marca/simbolo-azul.png") center/contain no-repeat;
  opacity:.026;filter:saturate(.9);transform:rotate(-8deg);
  animation:marcaOrbita 38s ease-in-out infinite alternate;
}
@keyframes marcaOrbita{
  from{transform:translate3d(0,0,0) rotate(-8deg)}
  to{transform:translate3d(-2.4vw,-1.4vw,0) rotate(-3deg)}
}

/* cabeçalho editorial, desacoplado da navegação */
header.cabecalho-orbita{
  position:fixed;z-index:28;top:0;left:240px;right:0;height:108px;padding:24px 30px 16px;
  color:var(--texto);background:linear-gradient(180deg,color-mix(in srgb,var(--fundo) 82%,transparent),transparent);
  border:0;box-shadow:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
header.cabecalho-orbita .linha{max-width:1460px;height:100%;gap:18px}
header.cabecalho-orbita .kicker{
  margin:0 0 3px;color:var(--acao);font-size:10px;font-weight:760;letter-spacing:.16em;
  text-transform:uppercase;
}
header.cabecalho-orbita h1{font-size:clamp(21px,2.1vw,30px);font-weight:720;color:var(--texto)}
header.cabecalho-orbita .sub{font-size:12.5px;color:var(--texto-2);opacity:1}
.acoes-cabecalho{display:flex;align-items:center;gap:9px}
.tema-rapido,.avatar{
  width:44px;height:44px;border-radius:15px;color:var(--texto);
  background:var(--vidro-fundo);border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-reflexo),0 10px 28px rgba(17,27,69,.12);
  -webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);
}
.tema-rapido{
  padding:0;display:grid;place-items:center;cursor:pointer;font-family:inherit;
  transition:transform var(--t-rapido) var(--curva),background var(--t-rapido) var(--curva-suave);
}
.tema-rapido:hover,.avatar:hover{background:var(--superficie);transform:translateY(-1px)}
.tema-rapido:active,.avatar:active{transform:scale(.93)}
.tema-rapido svg{grid-area:1/1;width:20px;height:20px;transition:opacity var(--t-rapido),transform var(--t-medio) var(--curva)}
.tema-rapido .icone-sol{opacity:0;transform:rotate(-30deg) scale(.65)}
.tema-rapido .icone-lua{opacity:1;transform:rotate(0) scale(1)}
.tema-rapido[data-modo="escuro"] .icone-sol{opacity:1;transform:rotate(0) scale(1)}
.tema-rapido[data-modo="escuro"] .icone-lua{opacity:0;transform:rotate(24deg) scale(.65)}
.avatar{font-size:12px;font-weight:720}

/* rail de vidro com presença material */
nav,nav.vidro{
  left:18px;top:18px;bottom:18px;width:204px;max-height:none;max-width:none;padding:14px;
  transform:none;flex-direction:column;align-items:stretch;gap:4px;border-radius:30px;
  overflow:hidden;color:var(--rail-texto);background:var(--rail-fundo);border-color:var(--rail-borda);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.36),inset -1px -1px 0 rgba(36,48,96,.10),
             0 28px 80px rgba(10,18,48,.20);
  animation:railV3Chega 420ms var(--curva) both;
}
@keyframes railV3Chega{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.marca-rail{
  display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 10px 16px;margin-bottom:8px;
  border-bottom:1px solid color-mix(in srgb,var(--rail-texto) 12%,transparent);
}
.marca-rail img{
  width:39px;height:39px;object-fit:contain;padding:7px;border-radius:13px;
  background:linear-gradient(145deg,#34419B,#1B7BB2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(30,141,205,.20);
}
.marca-rail span{font-size:16px;font-weight:730;letter-spacing:-.02em;line-height:1}
.marca-rail small{
  display:block;margin-top:5px;font-size:8px;font-weight:650;letter-spacing:.18em;
  text-transform:uppercase;opacity:.52;
}
nav button{
  min-width:0;min-height:48px;width:100%;padding:9px 12px;border-radius:15px;
  flex-direction:row;justify-content:flex-start;gap:12px;color:color-mix(in srgb,var(--rail-texto) 72%,transparent);
  font-size:12.5px;font-weight:620;
}
nav button .ic{width:19px;height:19px;flex:none}
nav button.on{color:#fff}
nav button.on::before{
  border-radius:15px;background:
    linear-gradient(135deg,color-mix(in srgb,var(--indigo) 92%,#fff),color-mix(in srgb,var(--ciano) 82%,#11205D));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.27),0 10px 26px rgba(35,76,153,.26);
}
nav button:not(.on):hover{color:var(--rail-texto);background:color-mix(in srgb,var(--rail-texto) 7%,transparent)}
.rail-status{
  margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px 10px 4px;
  color:color-mix(in srgb,var(--rail-texto) 58%,transparent);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;
}
.rail-status i{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 15%,transparent);
}

main{padding:112px 30px 48px 240px}
main .max,.max{max-width:1460px;margin:0 auto}
.flutuante{right:30px;bottom:28px}

/* palco: um único objeto 2.5D forte */
.hoje-palco{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.68fr);
  min-height:454px;margin:0 0 18px;border:1px solid var(--palco-borda);border-radius:32px;
  color:var(--palco-texto);background:var(--palco-fundo);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--palco-luz),0 28px 74px rgba(16,27,73,.16);
}
.hoje-palco::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    linear-gradient(150deg,transparent 0 42%,color-mix(in srgb,var(--ciano) 7%,transparent) 42.2% 42.5%,transparent 42.7%),
    radial-gradient(40rem 14rem at 42% 115%,rgba(30,141,205,.16),transparent 70%);
}
.hoje-palco::after{
  content:"";position:absolute;z-index:-1;width:310px;height:90px;left:13%;bottom:-47px;
  border-radius:50%;background:rgba(9,16,48,.22);filter:blur(25px);transform:rotate(-7deg);
}
.palco-cena{position:relative;min-width:0;padding:20px}
.palco-rotulo{position:absolute;z-index:4;top:22px;left:25px;display:flex;flex-direction:column}
.palco-rotulo span{font-size:10px;font-weight:760;letter-spacing:.16em;text-transform:uppercase}
.palco-rotulo small{margin-top:4px;color:var(--palco-texto-2);font-size:10.5px}
.nucleo-wrap{position:relative;width:100%;height:100%;min-height:410px}
.nucleo-estrutura{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nucleo-estrutura .viga{opacity:.72;filter:drop-shadow(0 16px 16px rgba(8,15,44,.20))}
.nucleo-estrutura .viga-b{opacity:.28}
.nucleo-estrutura .eixo{fill:none;stroke:color-mix(in srgb,var(--palco-texto) 10%,transparent);stroke-width:1}
.nucleo-estrutura .anel{
  fill:none;stroke:color-mix(in srgb,var(--palco-texto) 20%,transparent);stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.nucleo-estrutura .anel-b{stroke-dasharray:4 9;opacity:.68}
.nucleo-estrutura .anel-c{stroke:color-mix(in srgb,var(--ciano) 56%,transparent);stroke-width:1.5}
.nucleo-estrutura .trajeto{
  fill:none;stroke:url("#orbita-azul");stroke-width:2;stroke-linecap:round;stroke-dasharray:1 7;
  animation:trajetoVivo 13s linear infinite;
}
@keyframes trajetoVivo{to{stroke-dashoffset:-100}}
.nucleo-estrutura .ponto-orbita{fill:var(--ciano);filter:drop-shadow(0 0 7px rgba(30,141,205,.68))}
.nucleo-estrutura .p2{fill:var(--atencao)}
.nucleo-estrutura .p3{fill:var(--ok)}
.nucleo-lente{
  position:absolute;z-index:3;left:50%;top:51%;width:142px;height:142px;transform:translate(-50%,-50%);
  border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;background:
    radial-gradient(circle at 34% 25%,rgba(230,249,255,.92),rgba(85,174,225,.68) 13%,rgba(47,57,139,.88) 47%,#0D143A 78%);
  border:1px solid rgba(226,244,255,.60);box-shadow:var(--nucleo-sombra);
}
.nucleo-lente::before,.nucleo-lente::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.nucleo-lente::before{
  inset:-23px;border:1px solid rgba(137,193,231,.34);box-shadow:
    inset 0 0 0 8px rgba(100,155,205,.055),0 0 0 1px rgba(11,19,54,.10);
}
.nucleo-lente::after{
  inset:-43px;border:10px solid transparent;
  background:conic-gradient(from 220deg,var(--ciano) 0 var(--intensidade),rgba(119,142,197,.15) var(--intensidade) 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.72;transform:rotate(-28deg);
}
.nucleo-brilho{
  position:absolute;left:26px;top:19px;width:44px;height:17px;border-radius:50%;
  background:rgba(255,255,255,.35);filter:blur(6px);transform:rotate(-18deg);
}
.nucleo-lente strong{font-size:46px;line-height:.92;font-weight:760;letter-spacing:-.055em}
.nucleo-lente small{margin-top:8px;font-size:9.5px;font-weight:690;letter-spacing:.10em;text-transform:uppercase;opacity:.72}
.nucleo-no{
  position:absolute;z-index:5;min-width:100px;min-height:62px;padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--palco-texto) 17%,transparent);border-radius:18px;
  color:var(--palco-texto);background:var(--palco-vidro);font-family:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--palco-luz),0 14px 30px rgba(11,20,56,.12);
  -webkit-backdrop-filter:blur(15px) saturate(140%);backdrop-filter:blur(15px) saturate(140%);
  transition:transform var(--t-medio) var(--curva),border-color var(--t-rapido);
}
.nucleo-no:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ciano) 50%,transparent)}
.nucleo-no span{display:block;font-size:22px;font-weight:750;line-height:1;letter-spacing:-.03em}
.nucleo-no small{display:block;margin-top:5px;color:var(--palco-texto-2);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em}
.nucleo-no.tem-sinal{border-color:color-mix(in srgb,var(--atencao) 62%,transparent)}
.no-vence{right:4%;top:18%}
.no-aceite{right:10%;bottom:8%}
.no-bloqueio{left:6%;bottom:10%}

.palco-leitura{
  position:relative;z-index:4;margin:16px;padding:30px 26px;border-radius:24px;
  background:var(--palco-vidro);border:1px solid color-mix(in srgb,var(--palco-texto) 14%,transparent);
  box-shadow:inset 0 1px 0 var(--palco-luz);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  display:flex;flex-direction:column;justify-content:center;
}
.palco-leitura .eyebrow,.bloco-cabecalho .eyebrow{
  margin:0 0 7px;font-size:9.5px;font-weight:760;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ciano);
}
.palco-leitura h2{margin:0;font-size:clamp(25px,2.6vw,38px);line-height:1.04;letter-spacing:-.04em}
.palco-leitura > p:not(.eyebrow){margin:15px 0 22px;color:var(--palco-texto-2);font-size:13px;line-height:1.62}
.pulso-resumo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pulso-resumo div{
  min-width:0;padding:13px;border-radius:15px;background:color-mix(in srgb,var(--palco-texto) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--palco-texto) 9%,transparent);
}
.pulso-resumo span{display:block;font-size:22px;font-weight:750;line-height:1}
.pulso-resumo small{display:block;margin-top:5px;color:var(--palco-texto-2);font-size:9.5px;line-height:1.3}
.estado-nucleo{
  display:flex;align-items:center;gap:9px;margin-top:16px;padding:10px 12px;border-radius:13px;
  font-size:11px;font-weight:680;background:color-mix(in srgb,var(--palco-texto) 5%,transparent);
}
.estado-nucleo i{width:8px;height:8px;border-radius:50%;background:var(--atencao);box-shadow:0 0 0 4px color-mix(in srgb,var(--atencao) 16%,transparent)}
.estado-nucleo.ok i{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}

/* blocos sólidos e hierarquia operacional */
.hoje-grade{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:16px;align-items:start}
.hoje-coluna-lateral{display:grid;gap:16px}
.bloco-operacional,.agenda-operacional{
  padding:20px;border-radius:24px;box-shadow:var(--conteudo-sombra);margin-bottom:0;
}
.bloco-cabecalho{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:11px}
.bloco-cabecalho h2{margin:0;font-size:17px}
.contador{
  min-width:34px;height:34px;padding:0 10px;border-radius:12px;display:grid;place-items:center;
  background:var(--fundo-2);border:1px solid var(--borda);color:var(--texto);font-size:13px;font-weight:730;
}
.bloco-operacional.vence .contador{color:var(--atencao);background:var(--atencao-fundo);border-color:var(--atencao-borda)}
.lista-operacional{border-top:1px solid var(--borda)}
.vazio-operacional{
  min-height:112px;display:flex;align-items:center;gap:14px;padding:18px;border-radius:17px;
  background:var(--superficie-2);border:1px solid var(--borda);
}
.vazio-check{
  width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;
  color:var(--ok);background:var(--ok-fundo);border:1px solid var(--ok-borda);
}
.vazio-operacional b{font-size:13.5px}
.vazio-operacional p{margin:3px 0 0;color:var(--texto-2);font-size:12px;line-height:1.4}
.agenda-operacional{margin-bottom:16px}
.linha-tempo{display:flex;gap:0;overflow-x:auto;padding:7px 2px 2px;scrollbar-width:none}
.linha-tempo::-webkit-scrollbar{display:none}
.evento-tempo{
  position:relative;flex:1;min-width:170px;display:grid;grid-template-columns:auto 14px 1fr;
  align-items:center;gap:8px;padding-right:16px;color:var(--texto-2);font-size:12px;
}
.evento-tempo::after{content:"";position:absolute;left:76px;right:-2px;top:50%;height:1px;background:var(--borda);z-index:0}
.evento-tempo time{font-weight:730;color:var(--texto)}
.evento-tempo i{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:var(--acao);box-shadow:0 0 0 4px var(--ciano-claro)}
.evento-tempo span{position:relative;z-index:1;background:var(--superficie);padding-right:8px}

@media (max-width:1080px){
  .hoje-palco{grid-template-columns:minmax(0,1.25fr) minmax(255px,.75fr)}
  .nucleo-no{min-width:88px}
  .palco-leitura{padding:24px 20px}
}

@media (max-width:899px){
  body::after{width:90vw;right:-34vw;bottom:-32vw}
  header.cabecalho-orbita{
    left:0;height:92px;padding:16px 16px 12px;background:color-mix(in srgb,var(--fundo) 82%,transparent);
  }
  header.cabecalho-orbita .kicker{display:none}
  header.cabecalho-orbita h1{font-size:20px}
  .marca-rail,.rail-status{display:none}
  nav,nav.vidro{
    left:50%;top:auto;bottom:calc(10px + var(--safe-b));width:auto;max-width:calc(100vw - 18px);
    max-height:none;padding:6px;transform:translateX(-50%);flex-direction:row;align-items:center;
    gap:2px;border-radius:24px;overflow-x:auto;animation:navChega var(--t-lento) var(--curva) both;
  }
  nav button{
    width:auto;min-width:62px;min-height:52px;padding:7px 10px 6px;border-radius:18px;
    flex-direction:column;justify-content:center;gap:3px;font-size:9.5px;
  }
  nav button.on::before{border-radius:18px}
  main{padding:96px 14px calc(var(--altura-nav) + 30px + var(--safe-b))}
  .max,main .max{max-width:100%}
  .hoje-palco{grid-template-columns:1fr;min-height:0;border-radius:26px}
  .palco-cena{min-height:430px;padding:12px}
  .palco-leitura{margin:0 12px 12px;padding:22px}
  .palco-leitura h2{font-size:27px}
  .hoje-grade{grid-template-columns:1fr}
  .flutuante{right:14px;bottom:calc(var(--altura-nav) + 22px + var(--safe-b))}
}

@media (max-width:520px){
  header.cabecalho-orbita .sub{max-width:230px}
  .tema-rapido,.avatar{width:41px;height:41px;border-radius:14px}
  .acoes-cabecalho{gap:7px}
  nav button{min-width:58px;padding-inline:8px}
  .hoje-palco{margin-inline:-2px}
  .palco-cena{min-height:350px;padding:8px}
  .palco-rotulo{top:18px;left:18px}
  .nucleo-wrap{min-height:350px}
  .nucleo-lente{width:116px;height:116px}
  .nucleo-lente::before{inset:-18px}
  .nucleo-lente::after{inset:-34px;border-width:8px}
  .nucleo-lente strong{font-size:38px}
  .nucleo-no{min-width:76px;min-height:54px;padding:8px 9px;border-radius:15px}
  .nucleo-no span{font-size:18px}
  .nucleo-no small{font-size:8px}
  .no-vence{right:1%;top:19%}
  .no-aceite{right:4%;bottom:5%}
  .no-bloqueio{left:1%;bottom:7%}
  .palco-leitura{padding:20px}
  .pulso-resumo{grid-template-columns:1fr 1fr}
  .bloco-operacional,.agenda-operacional{padding:17px;border-radius:21px}
  .vazio-operacional{min-height:94px;padding:14px}
  .flutuante{height:54px;padding:0 17px}
}

@media (prefers-reduced-motion:reduce){
  body::after,.nucleo-estrutura .trajeto{animation:none!important}
}

@media (prefers-reduced-transparency:reduce){
  .tema-rapido,.avatar,nav,.palco-leitura,.nucleo-no{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  nav{background:var(--superficie)}
  .palco-leitura,.nucleo-no{background:color-mix(in srgb,var(--superficie) 94%,var(--fundo))}
}