@charset "utf-8";
/* Aakway · Autenticación (login + registro) — glassmorfismo sobre slider de fotos */

:root{
  --brand:#00c9c9;
  --brand-2:#00e0d5;
  --glass:rgba(255,255,255,.12);
  --glass-strong:rgba(255,255,255,.18);
  --glass-border:rgba(255,255,255,.32);
  --ink:#ffffff;
  --muted:rgba(255,255,255,.78);
  --faint:rgba(255,255,255,.60);
  --danger-bg:rgba(180,40,34,.30);
  --danger-bd:rgba(255,150,146,.55);
  --radius:18px;
  --side-pad:5%;
}
@media (max-width:1024px){ :root{ --side-pad:2%; } }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh; position:relative;
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:#08191d;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px var(--side-pad); overflow-x:hidden;
}

/* ===== Slider de fondo (3 fotos, cross-fade + zoom lento) ===== */
.bg-slider{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.bg-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; will-change:opacity,transform;
  animation:bgFade 21s infinite; transform:scale(1.06);
}
.bg-slide:nth-child(1){ animation-delay:0s; }
.bg-slide:nth-child(2){ animation-delay:7s; }
.bg-slide:nth-child(3){ animation-delay:14s; }
@keyframes bgFade{
  0%   { opacity:0; transform:scale(1.06); }
  6%   { opacity:1; }
  30%  { opacity:1; transform:scale(1.12); }
  36%  { opacity:0; }
  100% { opacity:0; }
}
/* Velo para contraste del texto */
.bg-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 30%, rgba(0,25,30,.25), rgba(0,20,25,.55) 70%),
    linear-gradient(180deg, rgba(4,20,24,.55), rgba(4,20,24,.72));
}
@media (prefers-reduced-motion:reduce){
  .bg-slide{ animation:none; transform:none; }
  .bg-slide:nth-child(1){ opacity:1; }
}

/* Botón volver */
.backBtn{
  position:fixed; top:20px; left:20px; z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-border); color:#fff;
  text-decoration:none; font-size:22px; line-height:1;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.25s;
}
.backBtn:hover{ transform:translateX(-2px); background:var(--glass-strong); }

/* Contenedor */
.auth-wrap{ position:relative; z-index:2; width:100%; max-width:430px; }

/* Letrero superior */
.auth-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0 4px 16px; flex-wrap:wrap;
}
.auth-topbar span{ color:var(--muted); font-size:13.5px; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:11px; text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.2px; color:#fff;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.25s;
}
.btn-ghost:hover{ background:var(--brand); border-color:var(--brand); box-shadow:0 8px 22px rgba(0,201,201,.35); }

/* Tarjeta glassmorfista */
.auth-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  padding:38px 34px 30px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.auth-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

.auth-head{ text-align:center; margin-bottom:26px; }
.auth-logo{ width:54px; height:auto; margin-bottom:16px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.auth-head h1{ margin:0 0 6px; font-size:23px; font-weight:600; letter-spacing:-.2px; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.auth-head p{ margin:0; color:var(--muted); font-size:13.5px; }

/* Mensaje de error */
.auth-alert{
  display:flex; align-items:center; gap:9px;
  background:var(--danger-bg); border:1px solid var(--danger-bd); color:#fff;
  border-radius:11px; padding:11px 14px; font-size:13px; margin-bottom:20px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.auth-alert::before{ content:"!"; font-weight:700; display:inline-flex;
  width:18px; height:18px; border-radius:50%; background:#e8534b; color:#fff;
  align-items:center; justify-content:center; font-size:12px; flex:none; }

/* Mensaje de éxito */
.auth-ok{
  display:flex; align-items:center; gap:9px;
  background:rgba(0,180,140,.26); border:1px solid rgba(120,240,200,.5); color:#fff;
  border-radius:11px; padding:11px 14px; font-size:13px; margin-bottom:20px; line-height:1.4;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.auth-ok::before{ content:"✓"; font-weight:700; display:inline-flex;
  width:18px; height:18px; border-radius:50%; background:#12b981; color:#fff;
  align-items:center; justify-content:center; font-size:12px; flex:none; }

/* Campos */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.6px;
  text-transform:uppercase; color:var(--faint); margin-bottom:7px;
}
.field-control{ position:relative; }
.field input{
  width:100%; height:48px; padding:0 15px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
  font-size:14.5px; color:#fff; font-family:inherit;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{ color:var(--faint); }
.field input:focus{
  outline:none; background:var(--glass-strong); border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(0,201,201,.22);
}
.field input.has-toggle{ padding-right:46px; }
/* Autofill: evita el fondo blanco de Chrome */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  transition:background-color 9999s ease-out;
  box-shadow:0 0 0 1000px rgba(255,255,255,.08) inset;
}

/* Toggle de contraseña */
.pass-toggle{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:34px; height:34px; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:9px; color:var(--muted);
}
.pass-toggle:hover{ background:rgba(255,255,255,.14); color:#fff; }
.pass-toggle svg{ width:20px; height:20px; }

/* Fila utilitaria */
.field-row{ display:flex; justify-content:flex-end; margin:-4px 0 20px; }
.link-muted{ color:#fff; font-size:12.5px; text-decoration:none; font-weight:500; opacity:.85; }
.link-muted:hover{ opacity:1; text-decoration:underline; }

/* Botón principal */
.btn-primary{
  width:100%; height:50px; border:none; border-radius:13px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.3px; color:#05343a;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 12px 26px rgba(0,201,201,.34); transition:.25s;
}
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 16px 32px rgba(0,201,201,.42); }
.btn-primary:active{ transform:translateY(0); }

/* Pie de la tarjeta */
.auth-alt{ margin-top:22px; text-align:center; font-size:13px; color:var(--muted); }
.auth-alt a{ color:#fff; font-weight:600; text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }

/* Footer legal */
.auth-foot{
  position:relative; z-index:2;
  margin-top:26px; text-align:center; color:var(--faint); font-size:12px;
  display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.auth-foot a{ color:var(--muted); text-decoration:none; }
.auth-foot a:hover{ color:#fff; }
.auth-foot .sep{ color:rgba(255,255,255,.35); }

@media (max-width:480px){
  .auth-card{ padding:30px 22px 26px; }
  .auth-topbar{ justify-content:center; }
}