/* ==========================================================================
   HUB · GRUPO ONDA — design system
   Direção: painel de operação. Grafite + ciano, tipografia tabular,
   grid técnico sutil. Desenvolvido por A.Level.
   ========================================================================== */

:root {
  /* Base */
  --bg:            #0a0f16;
  --bg-2:          #0e141d;
  --surface:       #121a24;
  --surface-2:     #17212e;
  --surface-3:     #1d2939;

  /* Traços */
  --line:          #1f2d3d;
  --line-2:        #2a3c50;
  --line-bright:   #33506b;

  /* Texto */
  --txt:           #e8eef6;
  --txt-2:         #93a6bb;
  --txt-3:         #5d7288;

  /* Acento */
  --acento:          #f97316;
  --acento-dim:      #c2410c;
  --acento-glow:     rgba(249, 115, 22, .14);
  --amber:         #f59e0b;
  --green:         #34d399;
  --red:           #f87171;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  --sidebar-w: 264px;
}

/* ======================= MODO CLARO (alternativo) ======================= */
html.tema-claro {
  --bg:          #f4f6f9;
  --bg-2:        #eaeff5;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --surface-3:   #f1f5f9;
  --line:        #e2e8f0;
  --line-2:      #cbd5e1;
  --line-bright: #94a3b8;
  --txt:         #0f172a;
  --txt-2:       #475569;
  --txt-3:       #94a3b8;
  --acento:        #ea580c;
  --acento-dim:    #c2410c;
  --acento-glow:   rgba(234, 88, 12, .10);
}

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

html, body {
  height: 100%;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--txt);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ======================= GRID TÉCNICO DE FUNDO ======================= */
.grid-fundo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .30;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}
html.tema-claro .grid-fundo { opacity: .5; }

/* ==========================================================================
   LOGIN DIVIDIDO · PALCO 3D (esquerda) + FORMULÁRIO (direita)
   ========================================================================== */

.tela-login {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background: #f7f8fa;
  overflow: hidden;
}

/* ==================== LADO DO PALCO ==================== */
.lado-palco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  overflow: hidden;
  background:
    radial-gradient(620px 460px at 50% 60%, rgba(249,115,22,.06), transparent 70%),
    linear-gradient(170deg, #ffffff 0%, #f4f6f9 55%, #eef1f5 100%);
}

.palco-cena {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1 / 1.05;
  perspective: 900px;
  perspective-origin: 50% 42%;
}

/* ---------- rig suspenso ---------- */
.rig {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%) rotateX(6deg);
  transform-style: preserve-3d;
  width: 76%;
  z-index: 6;
}
.rig-viga {
  position: relative;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8e9db2 0%, #5c6878 22%, #333c47 62%, #1a212a 100%);
  box-shadow: 0 0 0 .5px rgba(120,135,155,.4), 0 3px 10px rgba(15,23,42,.30);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6%;
}
.rig-refletor {
  width: 15px; height: 11px;
  border-radius: 2px 2px 6px 6px;
  background: #10161e;
  border: 1px solid #3d4a5c;
  position: relative;
}
.rig-refletor::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 1px 1px 4px 4px;
  background: radial-gradient(circle at 50% 38%, #fff0d0, #fcd34d 42%, #f59e0b 75%, #7c4a03 100%);
  box-shadow: 0 0 10px 3px rgba(251,191,36,.75), 0 0 26px 8px rgba(245,158,11,.35);
  animation: respira 3.2s ease-in-out infinite;
  transition: background .4s, box-shadow .4s;
}
.rig-refletor:nth-child(2)::after { animation-delay: .4s; }
.rig-refletor:nth-child(3)::after { animation-delay: .8s; }
.rig-refletor:nth-child(4)::after { animation-delay: 1.2s; }
.rig-refletor:nth-child(5)::after { animation-delay: 1.6s; }
.rig-refletor:nth-child(6)::after { animation-delay: 2s; }

@keyframes respira {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: .55; transform: scaleY(.88); }
}

.rig-torre {
  position: absolute;
  top: 0;
  width: 7px;
  height: 34px;
  background: linear-gradient(90deg, #8c9aae 0%, #4b5663 40%, #1e252e 100%);
  border-radius: 1px;
}
.rig-torre-esq { left: 0; }
.rig-torre-dir { right: 0; }

/* ---------- feixes ---------- */
.cena-feixes {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: 74%;
  height: 46%;
  display: flex;
  justify-content: space-around;
  z-index: 2;
  pointer-events: none;
}
.cena-feixes span {
  width: 54px;
  height: 100%;
  clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg,
    rgba(252,211,77,.30) 0%,
    rgba(245,158,11,.14) 38%,
    rgba(217,119,6,.05) 72%,
    transparent 100%);
  filter: blur(8px);
  transform-origin: top center;
  animation: oscila 6s ease-in-out infinite;
  transition: background .45s;
}
.cena-feixes span:nth-child(1) { --r: -10deg; animation-delay: 0s; }
.cena-feixes span:nth-child(2) { --r: -6deg;  animation-delay: .6s; }
.cena-feixes span:nth-child(3) { --r: -2deg;  animation-delay: 1.2s; }
.cena-feixes span:nth-child(4) { --r: 2deg;   animation-delay: 1.8s; }
.cena-feixes span:nth-child(5) { --r: 6deg;   animation-delay: 2.4s; }
.cena-feixes span:nth-child(6) { --r: 10deg;  animation-delay: 3s; }

@keyframes oscila {
  0%, 100% { transform: rotate(var(--r)) scaleY(1); opacity: .8; }
  50%      { transform: rotate(calc(var(--r) * -.7)) scaleY(1.07); opacity: 1; }
}

/* ---------- palco (base 3D) ---------- */
.palco-box {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 66%;
  height: 30%;
  transform: translateX(-50%) rotateX(58deg) rotateZ(-14deg);
  transform-style: preserve-3d;
  z-index: 3;
}
.palco-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #232d3a 0%, #161d26 55%, #0d131a 100%);
  border: 1px solid #39465a;
  box-shadow: inset 0 0 42px rgba(0,0,0,.65), 0 12px 30px rgba(15,23,42,.18);
}
.palco-face.frente {
  top: 100%; left: 0; right: 0;
  height: 42px;
  transform-origin: top center;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, #1f2937 0%, #0b1017 100%);
  box-shadow: inset 0 -14px 26px rgba(0,0,0,.8), 0 14px 24px rgba(15,23,42,.22);
}
.palco-face.lateral {
  left: 100%; top: 0; bottom: 0;
  width: 42px;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #182029 0%, #090d12 100%);
}
.degrau {
  position: absolute;
  left: 12%;
  width: 76%;
  height: 20px;
  background: linear-gradient(180deg, #1c2531 0%, #0b1017 100%);
  border: 1px solid #303c4a;
  transform: translateZ(14px);
}
.degrau.d1 { top: 104%; }
.degrau.d2 { top: 112%; transform: translateZ(28px); width: 88%; left: 6%; }

/* luzes embutidas nos degraus */
.palco-box::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 103%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.85), transparent);
  box-shadow: 0 0 14px 3px rgba(245,158,11,.55);
  transition: background .45s, box-shadow .45s;
}

/* ---------- equipamento ---------- */
.equipamento {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 62%;
  height: 22%;
  transform: translateX(-50%) rotateX(52deg) rotateZ(-14deg);
  transform-style: preserve-3d;
  z-index: 5;
}

.bateria {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  width: 44px; height: 26px;
}
.bateria .pele {
  position: absolute;
  bottom: 0;
  width: 17px; height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a5666 0%, #232c37 55%, #0e131a 100%);
  border: 1px solid #3a4757;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.7);
}
.bateria .pele:nth-child(1) { left: 0;  height: 12px; width: 15px; }
.bateria .pele:nth-child(2) { left: 14px; }
.bateria .pele:nth-child(3) { left: 28px; height: 18px; width: 19px; }
.bateria .prato {
  position: absolute;
  right: -6px; top: -6px;
  width: 20px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1c232 0%, #8a6b12 100%);
  opacity: .8;
  transform: rotate(-12deg);
}

.amp {
  position: absolute;
  bottom: 6%;
  width: 26px; height: 22px;
  border-radius: 2px;
  background: linear-gradient(160deg, #1e2732 0%, #0d1219 100%);
  border: 1px solid #36424f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.amp-esq { left: 2%; }
.amp-dir { right: 2%; }

.monitor {
  position: absolute;
  bottom: -2%;
  width: 22px; height: 10px;
  border-radius: 1px;
  background: linear-gradient(160deg, #222c38, #0c1117);
  border: 1px solid #333f4d;
  transform: rotate(-8deg);
}
.mon-esq { left: 20%; }
.mon-dir { right: 20%; transform: rotate(8deg); }

/* ---------- line arrays ---------- */
.array {
  position: absolute;
  top: 12%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}
.array-esq { left: 2%;  transform: rotate(2deg); }
.array-dir { right: 2%; transform: rotate(-2deg); }
.array span {
  display: block;
  width: 26px; height: 9px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #0c1117 0 1px, #1c2531 1px 2px),
              linear-gradient(180deg, #232d39 0%, #0c1117 100%);
  border: 1px solid #303c4a;
  box-shadow: inset 0 1px 0 rgba(190,205,225,.18), 0 2px 5px rgba(15,23,42,.28);
}
.array span:last-child { width: 30px; }

/* ---------- varredura (espera) ---------- */
.varredura {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 4px;
  height: 52%;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(251,191,36,.9) 0%, rgba(245,158,11,.35) 45%, transparent 100%);
  filter: blur(3px);
  z-index: 4;
  pointer-events: none;
  animation: varrer 7s ease-in-out infinite;
  transition: opacity .4s;
}
@keyframes varrer {
  0%   { transform: translateX(-50%) rotate(-26deg); }
  50%  { transform: translateX(-50%) rotate(26deg); }
  100% { transform: translateX(-50%) rotate(-26deg); }
}

.palco-legenda {
  position: absolute;
  bottom: 1.4rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .28em;
  color: var(--txt-3);
  text-transform: uppercase;
  opacity: .7;
}

/* ==================== DIVISOR ==================== */
.divisor {
  position: relative;
  width: 1px;
  background: linear-gradient(180deg, transparent, #d7dde5 15%, #d7dde5 85%, transparent);
}
.divisor-led {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 46px;
  border-radius: 4px;
  background: rgba(251,191,36,.85);
  box-shadow: 0 0 14px 3px rgba(245,158,11,.5);
  transition: background .4s, box-shadow .4s;
}

/* ==================== LADO DO LOGIN ==================== */
.lado-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: #ffffff;
  /* paleta clara local */
  --txt:   #0f172a;
  --txt-2: #475569;
  --txt-3: #94a3b8;
  --line:  #e2e8f0;
  --line-2:#cbd5e1;
  color: var(--txt);
}

.login-bloco {
  width: 100%;
  max-width: 372px;
  display: flex;
  flex-direction: column;
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.4rem;
}
.login-logo {
  max-height: 58px;
  max-width: 265px;
  object-fit: contain;
  /* logo branca invertida para escuro */
  filter: invert(1) brightness(.18) contrast(1.1);
}

/* ==================== ESTADOS ==================== */
/* SUCESSO — verde */
.tela-login.led-ok .rig-refletor::after {
  background: radial-gradient(circle at 50% 38%, #d1fae5, #34d399 42%, #059669 75%, #064e3b 100%);
  box-shadow: 0 0 14px 4px rgba(52,211,153,.9), 0 0 32px 10px rgba(16,185,129,.45);
  animation: flash-ok .55s ease-in-out infinite alternate;
}
.tela-login.led-ok .cena-feixes span {
  background: linear-gradient(180deg, rgba(52,211,153,.42) 0%, rgba(16,185,129,.18) 40%, transparent 100%);
}
.tela-login.led-ok .varredura { opacity: 0; }
.tela-login.led-ok .divisor-led {
  background: rgba(52,211,153,.9);
  box-shadow: 0 0 16px 4px rgba(52,211,153,.55);
}
.tela-login.led-ok .palco-box::after {
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.9), transparent);
  box-shadow: 0 0 16px 4px rgba(52,211,153,.5);
}

@keyframes flash-ok {
  from { opacity: .45; }
  to   { opacity: 1; }
}

/* ERRO — vermelho */
.tela-login.led-erro .rig-refletor::after {
  background: radial-gradient(circle at 50% 38%, #fecaca, #f87171 42%, #dc2626 75%, #7f1d1d 100%);
  box-shadow: 0 0 14px 4px rgba(248,113,113,.9), 0 0 32px 10px rgba(220,38,38,.45);
  animation: pisca-erro .38s steps(2, end) infinite;
}
.tela-login.led-erro .cena-feixes span {
  background: linear-gradient(180deg, rgba(248,113,113,.42) 0%, rgba(220,38,38,.18) 40%, transparent 100%);
}
.tela-login.led-erro .varredura { opacity: 0; }
.tela-login.led-erro .divisor-led {
  background: rgba(248,113,113,.9);
  box-shadow: 0 0 16px 4px rgba(248,113,113,.55);
}
.tela-login.led-erro .palco-cena { animation: tremor .4s cubic-bezier(.36,.07,.19,.97); }

@keyframes pisca-erro {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .2; }
}
@keyframes tremor {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ==================== RESPONSIVO ==================== */
@media (max-width: 980px) {
  .tela-login { grid-template-columns: 1fr; grid-template-rows: auto 1px auto; }
  .lado-palco { padding: 1.2rem; min-height: 240px; }
  .palco-cena { max-width: 320px; aspect-ratio: 1.6 / 1; }
  .palco-legenda { display: none; }
  .divisor {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
  }
  .divisor-led {
    width: 46px; height: 7px;
    border-radius: 4px;
  }
  .lado-login { padding: 2rem 1.2rem 2.5rem; }
}

@media (max-width: 640px) {
  .lado-palco { display: none; }
  .divisor { display: none; }
  .tela-login { grid-template-columns: 1fr; }
}

.campo { margin-bottom: 1.1rem; }
.lado-login label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: .45rem;
  font-weight: 600;
}
.lado-login input {
  width: 100%;
  padding: .78rem .9rem;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-size: .93rem;
  font-family: var(--sans);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.lado-login input::placeholder { color: var(--txt-3); opacity: .9; }
.lado-login input:hover { border-color: #94a3b8; }
.lado-login input:focus {
  outline: none;
  border-color: #ea580c;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(249,115,22,.16);
}

.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 2.85rem; }
.btn-olho {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem .5rem;
  border-radius: var(--r-sm);
  color: var(--txt-3);
  font-size: .95rem;
  line-height: 1;
  transition: color .15s, background .15s;
}
.btn-olho:hover { color: #ea580c; background: #f1f5f9; }

.btn-primario {
  position: relative;
  width: 100%;
  margin-top: .6rem;
  padding: .82rem 1rem;
  border: 1px solid #ea580c;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: background .18s, color .18s, box-shadow .18s, transform .08s;
}
.btn-primario:hover {
  background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px -6px rgba(234,88,12,.55);
}
.btn-primario:active { transform: scale(.994); }
.btn-primario:disabled { opacity: .55; cursor: wait; }

.msg-erro {
  margin-top: 1rem;
  padding: .65rem .85rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  border-radius: var(--r-sm);
  color: #b91c1c;
  font-size: .82rem;
  font-family: var(--sans);
}

/* status fake (fase visual) */
.status-servicos {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--txt-3);
  letter-spacing: .03em;
}
.pulso {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: pulso 2.2s infinite;
  flex-shrink: 0;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.status-servicos b { color: #475569; font-weight: 600; }
.status-sep { color: #cbd5e1; }

.login-rodape {
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--txt-3);
  letter-spacing: .05em;
}

/* assinatura A.Level */
.assinatura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94a3b8;
  text-decoration: none;
  transition: color .18s;
}
.assinatura:hover { color: #ea580c; }
.assinatura b {
  color: #475569;
  font-weight: 600;
  letter-spacing: .06em;
}
.assinatura:hover b { color: #ea580c; }

/* ======================= APP SHELL ======================= */
.app {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* --------- Sidebar --------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--line);
  min-height: 68px;
}
.sidebar-logo {
  max-height: 36px;
  max-width: 165px;
  object-fit: contain;
  /* logo branca: sem caixa */
}
.sidebar-marca {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--txt-3);
  line-height: 1.4;
}
.sidebar-marca b {
  display: block;
  color: var(--acento);
  font-weight: 600;
  font-size: .68rem;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .55rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.nav-secao {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-3);
  padding: .95rem .7rem .4rem;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .7rem;
  margin-bottom: .1rem;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--txt-2);
  font-family: var(--sans);
  font-size: .855rem;
  cursor: pointer;
  text-align: left;
  transition: background .14s, color .14s, border-color .14s;
}
.nav-item:hover {
  background: var(--surface);
  color: var(--txt);
}
.nav-item.ativo {
  background: linear-gradient(90deg, var(--acento-glow), transparent);
  border-left-color: var(--acento);
  color: var(--txt);
  font-weight: 550;
}
.nav-ico {
  width: 1.15rem;
  text-align: center;
  font-size: .95rem;
  flex-shrink: 0;
  opacity: .85;
}
.nav-item.ativo .nav-ico { opacity: 1; }
.nav-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--amber);
  background: rgba(245,158,11,.11);
  border: 1px solid rgba(245,158,11,.28);
  padding: .09rem .32rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.sidebar-rodape {
  padding: .6rem .55rem .75rem;
  border-top: 1px solid var(--line);
}
.usuario-box {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .35rem;
  padding: .55rem .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.usuario-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--acento-dim), var(--acento));
  color: #04141a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .72rem;
}
.usuario-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.usuario-info strong {
  font-size: .78rem;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usuario-info span {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--txt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-sair {
  background: none;
  border: none;
  color: var(--txt-3);
  cursor: pointer;
  padding: .32rem;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  font-size: .85rem;
  transition: color .15s, background .15s;
}
.btn-sair:hover { color: var(--red); background: rgba(248,113,113,.1); }

/* --------- Conteúdo --------- */
.conteudo {
  flex: 1;
  padding: 1.9rem 2.2rem 3rem;
  max-width: 1240px;
  min-width: 0;
}
.view { animation: entrar .26s cubic-bezier(.16,1,.3,1); }

.view-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.9rem;
}
.view-topo h2 {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.025em;
  margin-bottom: .3rem;
}
.view-sub {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--txt-3);
  letter-spacing: .02em;
}
.btn-menu-mobile {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .45rem .7rem;
  font-size: 1rem;
  cursor: pointer;
  color: var(--txt);
}

/* header count */
.contador-apps {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--txt-3);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: .28rem .7rem;
  letter-spacing: .04em;
}
.contador-apps b { color: var(--acento); font-weight: 600; }

/* ======================= GRID DE APPS ======================= */
.grid-apps {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.app-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .18s, background .18s, transform .18s;
}
.app-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
  opacity: 0;
  transition: opacity .22s;
}
.app-card:hover {
  border-color: var(--line-bright);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.app-card:hover::after { opacity: .8; }

.app-card-topo { display: flex; align-items: flex-start; gap: .75rem; }
.app-card-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
}
.app-card-nome {
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding-top: .15rem;
}
.app-card-desc {
  font-size: .795rem;
  color: var(--txt-2);
  line-height: 1.5;
  flex: 1;
}
.app-card-tags { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .1rem; }

.tag {
  font-family: var(--mono);
  font-size: .575rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .18rem .4rem;
  border-radius: 3px;
  border: 1px solid transparent;
}
.tag-sso {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.26);
  color: var(--amber);
}
.tag-ok {
  background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.26);
  color: var(--green);
}
.tag-admin {
  background: var(--acento-glow);
  border-color: rgba(34,211,238,.28);
  color: var(--acento);
}

/* aviso discreto */
.aviso-sso {
  margin-top: 2rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: var(--r-sm);
  font-size: .79rem;
  color: var(--txt-2);
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.aviso-sso strong { color: var(--amber); display: block; margin-bottom: .18rem; font-size: .8rem; }
.aviso-sso p { margin: 0; line-height: 1.5; }

/* ======================= ACESSOS ======================= */
.barra-filtros {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}
.input-busca {
  flex: 1;
  min-width: 220px;
  padding: .62rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: .86rem;
  color: var(--txt);
  font-family: var(--sans);
  transition: border-color .16s, box-shadow .16s;
}
.input-busca::placeholder { color: var(--txt-3); }
.input-busca:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-glow);
}
.btn-secundario {
  padding: .62rem .95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--txt-2);
  font-family: var(--mono);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.btn-secundario:hover {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--surface-2);
}

.lista-pessoas { display: flex; flex-direction: column; gap: .5rem; }

.pessoa-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .8rem 1rem;
  transition: border-color .16s;
}
.pessoa-card:hover { border-color: var(--line-2); }

.pessoa-topo { display: flex; align-items: center; gap: .7rem; }
.pessoa-nome { font-weight: 570; font-size: .86rem; }
.pessoa-email {
  font-family: var(--mono);
  font-size: .69rem;
  color: var(--txt-3);
}
.pessoa-apps { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }

.chip-app {
  font-family: var(--mono);
  font-size: .65rem;
  padding: .16rem .45rem;
  border-radius: 3px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--txt-2);
}
.chip-app b { color: var(--acento); font-weight: 600; }

.carregando, .vazio {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .03em;
}
.nota-rodape {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .69rem;
  color: var(--txt-3);
  line-height: 1.6;
}

/* ======================= CARDS / CONFIG ======================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.25rem;
  margin-bottom: .85rem;
}
.card h3 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
  margin-bottom: .85rem;
}
.linha-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
  font-size: .845rem;
}
.linha-config:first-of-type { border-top: none; }
.linha-config > span { color: var(--txt-2); }
.linha-config strong {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .8rem;
  color: var(--txt);
}

.segmented {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 2px;
}
.segmented button {
  border: none;
  background: none;
  padding: .3rem .75rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--txt-3);
  transition: background .15s, color .15s;
}
.segmented button.ativo {
  background: var(--acento);
  color: #04141a;
}

/* ======================= RODAPÉ GLOBAL (assinatura) ======================= */
.rodape-app {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--txt-3);
  letter-spacing: .05em;
}
.rodape-app .marca-alevel {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .18s;
}
.rodape-app .marca-alevel b { color: var(--txt-2); font-weight: 600; }
.rodape-app .marca-alevel:hover b { color: var(--acento); }
.rodape-app .dot { color: var(--line-bright); }

/* ======================= RESPONSIVO ======================= */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 0 60px rgba(0,0,0,.6);
  }
  .sidebar.aberta { transform: none; }
  .torre { width: 56px; }
  .line-array { transform: scale(.78) !important; }
  .caixa { width: 34px; height: 10px; }
  .caixa:last-child { width: 38px; height: 11px; }
  .estrutura { height: 250px; }
  .viga-topo { width: calc(100% - 130px); }
  .palco { padding: 6.5rem .75rem 2rem; }
  .painel-led { padding: 1.35rem 1.15rem; }
  .conteudo { padding: 1.3rem 1rem 2.5rem; }
  .btn-menu-mobile { display: block; }
  .view-topo h2 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Tema claro: logo branca some, então invertemos para escuro ---------- */
html.tema-claro .login-logo,
html.tema-claro .sidebar-logo {
  filter: invert(1) brightness(0.22) contrast(1.15);
}