/* =============================================================
   login.css — Página de login (index.php)
   Extraído do bloco <style> inline para reduzir HTML
   ============================================================= */

/* ── Local tokens ─────────────────────────────────────────── */
:root {
  --p:        #6366f1;
  --p-dark:   #4f46e5;
  --p-light:  #818cf8;
  --green:    #10b981;
  --red:      #ef4444;
  --yellow:   #f59e0b;
  --bg:       #080c18;
  --surface:  #0f172a;
  --card:     rgba(15,23,42,0.85);
  --input-bg: rgba(8,12,24,0.7);
  --t1: #f1f5f9;
  --t2: #94a3b8;
  --t3: #475569;
  --border:   rgba(255,255,255,0.07);
  --border-p: rgba(99,102,241,0.35);
  --glow:     0 0 40px rgba(99,102,241,0.25);
  --r:  .75rem;
  --r2: 1.25rem;
}

[data-theme="light"] {
  --bg:       #eef2ff;
  --surface:  #e0e7ff;
  --card:     rgba(255,255,255,0.88);
  --input-bg: rgba(238,242,255,0.8);
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;
  --border:   rgba(15,23,42,0.1);
  --border-p: rgba(99,102,241,0.3);
  --glow:     0 0 40px rgba(99,102,241,0.15);
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  color: var(--t1);
  overflow-x: hidden;
}

/* ── Animated background ──────────────────────────────────── */
.bg-layer {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}

.bg-layer::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 15%, rgba(99,102,241,.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(129,140,248,.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(16,185,129,.05) 0%, transparent 60%);
  animation: bgPulse 18s ease-in-out infinite;
}

@keyframes bgPulse {
  0%,100% { opacity: .7; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.04); }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .18;
  animation: orbFloat linear infinite;
}

.orb-1 { width:320px;height:320px;background:#6366f1;top:-80px;left:-80px;animation-duration:22s; }
.orb-2 { width:260px;height:260px;background:#818cf8;bottom:-60px;right:-60px;animation-duration:28s;animation-delay:-8s; }
.orb-3 { width:180px;height:180px;background:#10b981;top:40%;left:60%;animation-duration:20s;animation-delay:-14s; }

@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(30px,-20px) scale(1.05); }
  66%     { transform:translate(-20px,30px) scale(.96); }
}

.grid-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 25s linear infinite;
}

@keyframes gridDrift {
  from { transform: translate(0,0); }
  to   { transform: translate(60px,60px); }
}

/* ── Loading screen ───────────────────────────────────────── */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  transition: opacity .45s ease, visibility .45s ease;
}

.loading-screen.out { opacity: 0; visibility: hidden; }

.ls-logo {
  width: 110px; height: 110px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--p), var(--p-light));
  box-shadow: var(--glow);
  overflow: hidden;
  animation: lsFloat 2.2s ease-in-out infinite;
}

.ls-logo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

@keyframes lsFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

.ls-bar {
  width: 200px; height: 4px; border-radius: 99px;
  background: var(--border); overflow: hidden; position: relative;
}

.ls-bar-fill {
  position: absolute; top:0; left:-50%; width:50%; height:100%;
  background: linear-gradient(90deg, transparent, var(--p), transparent);
  animation: lsSweep 1.1s ease-in-out infinite;
}

@keyframes lsSweep { from{left:-50%} to{left:110%} }

.ls-label { color: var(--t2); font-size: .85rem; font-weight: 500; letter-spacing:.06em; text-transform:uppercase; }

/* ── Main content ─────────────────────────────────────────── */
.main-content { opacity:0; transition: opacity .5s ease; position:relative; z-index:1; }
.main-content.visible { opacity:1; }

.page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem 6rem;
}

/* ── Login card ───────────────────────────────────────────── */
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45), var(--glow);
  padding: 2.75rem 2.5rem;
  width: 100%; max-width: 460px;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--p), var(--p-light), var(--green));
  border-radius: var(--r2) var(--r2) 0 0;
}

.login-card::after {
  content: '';
  position: absolute; inset:0; border-radius: var(--r2);
  box-shadow: inset 0 0 60px rgba(99,102,241,.04);
  transition: box-shadow .4s;
  pointer-events: none;
}

.login-card:hover::after { box-shadow: inset 0 0 80px rgba(99,102,241,.08); }

/* ── Logo area ────────────────────────────────────────────── */
.logo-wrap { text-align: center; margin-bottom: 2rem; }

.logo-box {
  width: 100%; height: 130px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: rgba(99,102,241,.04);
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.5rem;
}

.logo-box img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

.card-title {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.025em;
  background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .4rem;
}

.card-sub { color: var(--t2); font-size: .875rem; line-height: 1.55; }

/* ── Form fields ──────────────────────────────────────────── */
.field { margin-bottom: 1.4rem; }

.field-label {
  display: block; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--t2); margin-bottom: .55rem;
}

.field-inner { position: relative; }

.field-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--t3); font-size: .9rem; pointer-events: none;
  transition: color .25s;
}

.form-control {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  color: var(--t1);
  padding: .875rem 2.75rem .875rem 2.75rem;
  font-size: .95rem; font-family: inherit;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}

.form-control::placeholder { color: var(--t3); }

.form-control:focus {
  outline: none;
  border-color: var(--p);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12), 0 0 20px rgba(99,102,241,.15);
  transform: translateY(-1px);
}

.form-control:focus + .field-icon,
.field-inner:focus-within .field-icon { color: var(--p-light); }

.pwd-toggle {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--t3); cursor: pointer;
  padding: .4rem .5rem; border-radius: .4rem;
  transition: color .2s, background .2s;
}

.pwd-toggle:hover { color: var(--p-light); background: rgba(99,102,241,.1); }

/* ── Fizzy submit button ──────────────────────────────────── */
.btn-fizzy-wrap { position: relative; margin-top: 1.75rem; }

.btn-fizzy {
  position: relative; width: 100%;
  padding: 1rem 2rem;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--p), var(--p-dark));
  border: none; border-radius: var(--r); cursor: pointer; overflow: hidden;
  transition: transform .2s ease, box-shadow .3s ease;
  box-shadow: 0 4px 20px rgba(99,102,241,.35), 0 1px 0 rgba(255,255,255,.1) inset;
  z-index: 0;
}

.btn-fizzy::before {
  content: '';
  position: absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transition: left .55s ease; z-index: 1;
}

.btn-fizzy:hover::before { left: 160%; }
.btn-fizzy:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(99,102,241,.55), 0 1px 0 rgba(255,255,255,.15) inset; }
.btn-fizzy:active { transform: translateY(-1px); }
.btn-fizzy:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.btn-fizzy .bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: inherit; }

.bubble {
  position: absolute; bottom: -20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  animation: bubbleRise var(--dur, .9s) ease-in var(--delay, 0s) infinite;
  opacity: 0;
}

@keyframes bubbleRise {
  0%   { transform: translateY(0)    scale(1);   opacity: .7; }
  60%  { opacity: .4; }
  100% { transform: translateY(-80px) scale(.4); opacity: 0; }
}

.bubble:nth-child(1)  { left:  5%; --dur:.85s; --delay:.0s;  width:6px;  height:6px; }
.bubble:nth-child(2)  { left: 15%; --dur:.95s; --delay:.15s; width:9px;  height:9px; }
.bubble:nth-child(3)  { left: 25%; --dur:.80s; --delay:.3s;  width:5px;  height:5px; }
.bubble:nth-child(4)  { left: 35%; --dur:1.0s; --delay:.05s; width:8px;  height:8px; }
.bubble:nth-child(5)  { left: 45%; --dur:.90s; --delay:.22s; width:6px;  height:6px; }
.bubble:nth-child(6)  { left: 55%; --dur:.75s; --delay:.4s;  width:10px; height:10px; }
.bubble:nth-child(7)  { left: 65%; --dur:.88s; --delay:.1s;  width:7px;  height:7px; }
.bubble:nth-child(8)  { left: 75%; --dur:1.05s;--delay:.28s; width:5px;  height:5px; }
.bubble:nth-child(9)  { left: 85%; --dur:.82s; --delay:.18s; width:9px;  height:9px; }
.bubble:nth-child(10) { left: 93%; --dur:.92s; --delay:.35s; width:6px;  height:6px; }

.btn-fizzy .bubbles .bubble { animation-play-state: paused; }
.btn-fizzy:hover .bubbles .bubble,
.btn-fizzy:focus .bubbles .bubble { animation-play-state: running; }

.btn-fizzy .btn-inner { position: relative; z-index: 3; display:flex; align-items:center; justify-content:center; gap:.6rem; }

.btn-spinner {
  width:18px; height:18px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divider ──────────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.75rem 0 0;
  color: var(--t3); font-size: .78rem; font-weight: 500;
}

.divider::before, .divider::after { content: ''; flex:1; height:1px; background: var(--border); }

/* ── Status row ───────────────────────────────────────────── */
.status-row {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.25rem; font-size: .8rem; color: var(--t3);
}

.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 6px var(--green); }
  50%     { box-shadow: 0 0 14px var(--green); }
}

/* ── Theme toggle button ──────────────────────────────────── */
.theme-sw { position: fixed; top: 14px; right: 14px; z-index: 8000; }

.theme-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(12px);
  color: var(--t2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.9rem;
  transition: border-color .2s, color .2s, box-shadow .2s;
}

.theme-btn:hover { border-color: var(--p); color: var(--p-light); box-shadow: 0 0 12px rgba(99,102,241,.3); }
.theme-btn .ic-sun  { display: none; }
.theme-btn .ic-moon { display: block; }
[data-theme="dark"] .theme-btn .ic-sun  { display: block; }
[data-theme="dark"] .theme-btn .ic-moon { display: none; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(8,12,24,.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: .9rem 2rem; z-index: 100; text-align: center;
}

[data-theme="light"] .site-footer { background: rgba(238,242,255,.92); }
.site-footer p { color: var(--t3); font-size: .78rem; margin: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .login-card { padding: 2rem 1.5rem; }
  .card-title { font-size: 1.3rem; }
}

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

:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; }