/* =====================================================================
   Realce visual do app do cliente.
   Tudo aqui e acrescimo: nao altera nenhuma regra anterior, so eleva o
   brilho, o contraste e o movimento. Nao muda layout nem comportamento.
   ===================================================================== */

/* --- fundo com brilhos vivos e deriva lenta --- */
body::before {
  background:
    radial-gradient(900px 520px at 10% -12%, rgba(34, 211, 238, 0.22), transparent 62%),
    radial-gradient(820px 520px at 90% -4%, rgba(168, 85, 247, 0.2), transparent 62%),
    radial-gradient(760px 560px at 50% 108%, rgba(99, 102, 241, 0.18), transparent 62%),
    radial-gradient(620px 420px at 78% 46%, rgba(14, 165, 233, 0.1), transparent 66%);
  animation: fundoDeriva 26s ease-in-out infinite alternate;
}
@keyframes fundoDeriva {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.5%, 1.5%, 0); }
}

/* --- vidros com mais presenca --- */
.card,
.hero,
.hero-stat,
.machine,
.storebar,
.ext-box,
.acesso {
  backdrop-filter: blur(10px);
}
.card {
  background:
    linear-gradient(180deg, rgba(28, 39, 68, 0.92), rgba(12, 18, 34, 0.94));
  border-color: rgba(120, 150, 210, 0.18);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.card:hover {
  border-color: rgba(34, 211, 238, 0.34);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* --- cartao de maquina: vidro, elevacao e brilho que segue a cor --- */
.machine {
  background:
    linear-gradient(180deg, rgba(30, 42, 74, 0.9), rgba(11, 17, 32, 0.94));
  border-color: rgba(120, 150, 210, 0.16);
  transition:
    transform .18s cubic-bezier(.34, 1.4, .64, 1),
    border-color .22s,
    box-shadow .22s;
}
.machine::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 45%);
  opacity: 0;
  transition: opacity .22s;
}
.machine:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--mc, var(--acc)) 55%, transparent);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 26px color-mix(in srgb, var(--mc, var(--acc)) 26%, transparent);
}
.machine:hover::after { opacity: 1; }
.machine:active { transform: translateY(-1px) scale(.99); }

/* faixa lateral da maquina acende quando esta em ciclo */
.machine::before {
  width: 4px;
  background: linear-gradient(180deg,
    transparent,
    var(--mc, var(--txt3)) 18%,
    var(--mc, var(--txt3)) 82%,
    transparent);
  transition: box-shadow .25s, width .18s;
}
.machine.running::before {
  box-shadow:
    0 0 18px var(--mc),
    0 0 34px color-mix(in srgb, var(--mc) 45%, transparent);
  animation: faixaPulsa 2.6s ease-in-out infinite;
}
@keyframes faixaPulsa {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
.machine.running .st { text-shadow: 0 0 14px color-mix(in srgb, var(--mc) 65%, transparent); }
.machine.running .nm { color: #fff; }

/* selecionada ganha anel de luz */
.machine.sel {
  border-color: var(--acc);
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.22),
    0 0 34px rgba(34, 211, 238, 0.34);
}

/* --- titulos de secao mais vivos --- */
.sect {
  color: #cfe0ff;
  letter-spacing: 0.11em;
}
.sect::after {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(34, 211, 238, 0.55),
    rgba(168, 85, 247, 0.3),
    transparent);
}
.sect-n {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.35);
  color: #7ddcf5;
}

/* --- botoes: brilho e resposta tactile --- */
.btn {
  transition:
    transform .1s cubic-bezier(.34, 1.5, .64, 1),
    filter .18s,
    box-shadow .18s,
    background .18s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.965); }
.btn.pri {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #22d3ee, #6366f1 55%, #a855f7);
  background-size: 200% 100%;
  box-shadow:
    0 8px 26px rgba(34, 211, 238, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  animation: btnGradiente 7s ease infinite;
}
.btn.pri::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: btnBrilho 3.6s ease-in-out infinite;
}
@keyframes btnGradiente {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes btnBrilho {
  0%, 62% { transform: translateX(0); opacity: 0; }
  72% { opacity: .85; }
  100% { transform: translateX(420%); opacity: 0; }
}
.btn.ok {
  background: linear-gradient(120deg, #4ade80, #16a34a);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.34);
}
.btn.bad {
  background: linear-gradient(120deg, #f87171, #dc2626);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}
.btn.warn {
  background: linear-gradient(120deg, #fbbf24, #d97706);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

/* --- selos e etiquetas com luz --- */
.pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.pill.ok {
  background: rgba(34, 197, 94, 0.17);
  border-color: rgba(34, 197, 94, 0.42);
  color: #86efac;
}
.pill.busy {
  background: rgba(34, 211, 238, 0.17);
  border-color: rgba(34, 211, 238, 0.42);
  color: #a5f3fc;
}
.pill.warn {
  background: rgba(245, 158, 11, 0.17);
  border-color: rgba(245, 158, 11, 0.42);
  color: #fcd34d;
}
.pill.bad {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}
.pill.pur {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.42);
  color: #e9d5ff;
}

/* --- numeros em evidencia --- */
.mid, .big, .val {
  text-shadow: 0 0 26px rgba(34, 211, 238, 0.22);
}
.big {
  background: linear-gradient(120deg, #67e8f9, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- hero do app: mais brilho e presenca --- */
.hero {
  padding: 22px 24px;
  border-color: rgba(120, 150, 210, 0.2);
  background:
    linear-gradient(120deg, rgba(34, 211, 238, 0.26), rgba(99, 102, 241, 0.16) 44%, transparent 74%),
    linear-gradient(180deg, rgba(28, 39, 68, 0.92), rgba(12, 18, 34, 0.95));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero h1 {
  background: linear-gradient(100deg, #ffffff 10%, #a5f3fc 55%, #c4b5fd 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 27px;
}
.hero-stat {
  background: rgba(9, 14, 27, 0.62);
  border-color: rgba(120, 150, 210, 0.22);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.hero-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.22);
}
.hero-stat b { text-shadow: 0 0 18px currentColor; }

/* --- topo com mais profundidade --- */
.topbar {
  background: rgba(7, 11, 20, 0.82);
  border-bottom-color: rgba(120, 150, 210, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.navtabs a.on {
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.14));
  border-color: rgba(34, 211, 238, 0.42);
  color: #e8fbff;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.18);
}
.brand .dot { animation: pontoVivo 2.8s ease-in-out infinite; }
@keyframes pontoVivo {
  0%, 100% { box-shadow: 0 0 12px var(--acc), 0 0 4px var(--acc); }
  50% { box-shadow: 0 0 22px var(--acc), 0 0 10px var(--acc); }
}

/* --- barras de progresso com brilho --- */
.bar {
  position: relative;
  background: rgba(7, 11, 20, 0.66);
  border: 1px solid rgba(120, 150, 210, 0.16);
  overflow: hidden;
}
.bar > i {
  border-radius: inherit;
  box-shadow:
    0 0 14px currentColor,
    0 0 26px color-mix(in srgb, currentColor 45%, transparent);
}

/* --- entrada com mais ritmo --- */
.card { animation: riseIn .38s cubic-bezier(.22, 1, .36, 1) both; }

/* ---------- quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .btn.pri,
  .btn.pri::after,
  .machine.running::before,
  .brand .dot,
  .hero::after {
    animation: none !important;
  }
  .machine:hover,
  .card:hover,
  .btn:hover:not(:disabled),
  .hero-stat:hover {
    transform: none;
  }
}