/* =========================================================================
   CSWeb — Tema "Vidro" (glassmorphism corporativo)
   Escopo atual: tela de login (index.php).
   Não altera nenhuma função — apenas apresentação. IDs/names preservados.
   ========================================================================= */

:root{
  --v-bg-0:#070b16;
  --v-bg-1:#0c1226;
  --v-bg-2:#111a3a;
  --v-accent:#5b9dff;
  --v-accent-2:#8a5bff;
  --v-glass:rgba(24,34,64,.55);
  --v-glass-hi:rgba(255,255,255,.06);
  --v-line:rgba(150,180,255,.16);
  --v-text:#eaf0ff;
  --v-muted:#9fb0d6;
  --v-faint:#6d7eaf;
  --v-danger:#f2647f;
  --v-radius:18px;
  --v-font:-apple-system,"Segoe UI",system-ui,"Roboto",sans-serif;
  color-scheme: dark;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:var(--v-font);
  color:var(--v-text);
  background:var(--v-bg-0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- fundo com orbes suaves ---- */
body::before,
body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}
body::before{
  width:60vmax;height:60vmax;
  left:-15vmax;top:-20vmax;
  background:radial-gradient(circle at 30% 30%, var(--v-accent), transparent 60%);
  animation:vfloat1 18s ease-in-out infinite;
}
body::after{
  width:55vmax;height:55vmax;
  right:-18vmax;bottom:-22vmax;
  background:radial-gradient(circle at 60% 60%, var(--v-accent-2), transparent 60%);
  animation:vfloat2 22s ease-in-out infinite;
}
@keyframes vfloat1{50%{transform:translate(6vmax,4vmax) scale(1.08)}}
@keyframes vfloat2{50%{transform:translate(-5vmax,-4vmax) scale(1.1)}}

/* linhas de grade tênues ao fundo */
.bg-scanline{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(150,180,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,180,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
}

/* ---- cartão de vidro ---- */
.login-container{
  position:relative;
  z-index:10;
  width:100%;
  max-width:400px;
  padding:42px 38px 30px;
  text-align:center;
}
.glass-panel{
  background:var(--v-glass);
  border:1px solid var(--v-line);
  border-radius:var(--v-radius);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  box-shadow:
    0 1px 0 var(--v-glass-hi) inset,
    0 30px 60px -30px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.2);
}

/* ---- logo / título ---- */
.logo-area{margin-bottom:28px}
.logo-area img{
  width:150px;height:auto;margin-bottom:12px;
  filter:drop-shadow(0 6px 20px rgba(91,157,255,.35));
}
.logo-area h2{
  font-size:1.9rem;margin:0;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(90deg,var(--v-text),var(--v-accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.logo-area h5{
  color:var(--v-muted);font-size:.7rem;letter-spacing:.28em;
  margin-top:8px;font-weight:600;text-transform:uppercase;
}

/* ---- formulário ---- */
.login-form{text-align:left;display:flex;flex-direction:column;gap:20px}

#retorno{
  color:var(--v-danger);text-align:center;min-height:0;font-weight:600;font-size:.85rem;
  white-space:pre-line;
}
#retorno:not(:empty){
  min-height:20px;padding:10px 12px;border-radius:10px;
  background:rgba(242,100,127,.10);border:1px solid rgba(242,100,127,.28);
}

.input-group{position:relative;margin:0}
.input-group i{
  position:absolute;top:50%;left:15px;transform:translateY(-50%);
  color:var(--v-accent);font-size:1.15em;pointer-events:none;z-index:2;
}
.input-group input{
  width:100%;
  padding:14px 16px 14px 46px;
  font-size:.95rem;
  color:var(--v-text);
  background:rgba(8,12,24,.6);
  border:1px solid var(--v-line);
  border-radius:12px;
  outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.input-group input::placeholder{color:var(--v-faint);letter-spacing:.08em;font-size:.85rem}
.input-group input:focus{
  border-color:var(--v-accent);
  background:rgba(8,12,24,.85);
  box-shadow:0 0 0 3px rgba(91,157,255,.18);
}
.input-group input:-webkit-autofill{
  -webkit-text-fill-color:var(--v-text);
  transition:background-color 9999s ease-in-out 0s;
}

/* ---- checkbox "mostrar senha" ---- */
.checkbox-group{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--v-muted);margin:-4px 0 4px}
.checkbox-group input{width:16px;height:16px;accent-color:var(--v-accent);cursor:pointer}
.checkbox-group label{cursor:pointer}

/* ---- botão ---- */
button.login{
  width:100%;
  padding:14px 18px;
  font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#04122b;
  border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--v-accent),var(--v-accent-2));
  box-shadow:0 10px 26px -10px rgba(91,157,255,.7);
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
button.login:hover{filter:brightness(1.06);box-shadow:0 14px 32px -10px rgba(91,157,255,.85)}
button.login:active{transform:translateY(1px)}
button.login:focus-visible{outline:2px solid var(--v-text);outline-offset:3px}

/* ---- rodapé ---- */
.footer-text{margin-top:26px;font-size:.72rem;color:var(--v-faint);opacity:.85}

@media (max-width:440px){
  .login-container{padding:34px 24px 24px}
  .logo-area img{width:128px}
}

@media (prefers-reduced-motion: reduce){
  body::before,body::after{animation:none}
}