/* Tema visual compartido por las páginas de autenticación (login, olvidé mi
   contraseña, verificar código). Extraído de auth/login.html para evitar
   duplicar ~200 líneas de CSS en cada página nueva — cualquier ajuste de
   marca/estilo futuro se hace en un solo lugar. */
:root{
  --gold:#c9a84c;
  --gold2:#f0d080;
  --card-bg:rgba(5,10,22,0.82);
  --border:rgba(201,168,76,0.35);
  --input-bg:rgba(255,255,255,0.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;overflow:hidden;
  font-family:'Segoe UI',system-ui,sans-serif;
}

/* ── Fondo imagen con overlay oscuro ── */
.bg{
  position:fixed;inset:0;z-index:0;
  background:url('/static/img/bg_login.png') center center / cover no-repeat;
}
/* Overlay para dar contraste al lado derecho donde va el card */
.bg::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    105deg,
    rgba(10,5,30,0.15) 0%,
    rgba(10,5,30,0.35) 45%,
    rgba(5,3,18,0.75) 65%,
    rgba(3,2,12,0.88) 100%
  );
}

/* Partículas canvas encima del overlay */
#bg-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ── Escena centrada ── */
.scene{
  position:relative;z-index:2;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:8vw;
}

/* ── Card login ── */
.login-card{
  width:400px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:22px;
  padding:44px 40px 36px;
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.08),
    0 0 60px rgba(0,0,0,0.7),
    0 0 120px rgba(5,2,20,0.5),
    inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative;overflow:hidden;
}
/* Línea superior dorada */
.login-card::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* Logo 3D flotante */
.logo-scene{
  perspective:1100px;
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:18px;
}
.logo-tilt{
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.22,.8,.25,1);
  will-change:transform;
}
.logo-img{
  width:230px;height:auto;max-height:198px;
  object-fit:contain;
  display:block;
  transform-style:preserve-3d;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.15))
    drop-shadow(0 0 28px rgba(201,168,76,0.6))
    drop-shadow(0 20px 22px rgba(0,0,0,0.55));
  animation:logoFloat3D 6s ease-in-out infinite;
  will-change:transform;
}
@keyframes logoFloat3D{
  0%,100%{ transform:translateY(0)    rotateX(7deg)  rotateY(-9deg) rotateZ(0deg); }
  25%    { transform:translateY(-9px) rotateX(2deg)  rotateY(6deg)  rotateZ(1deg); }
  50%    { transform:translateY(-16px)rotateX(-6deg) rotateY(10deg) rotateZ(0deg); }
  75%    { transform:translateY(-8px) rotateX(3deg)  rotateY(-7deg) rotateZ(-1deg); }
}
.logo-shadow-3d{
  width:86px;height:16px;margin-top:4px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
  animation:logoShadow3D 6s ease-in-out infinite;
}
@keyframes logoShadow3D{
  0%,100%{ transform:scale(1);   opacity:.55; }
  50%    { transform:scale(.68); opacity:.28; }
}

/* Títulos */
.brand-name{
  text-align:center;
  font-size:16px;font-weight:700;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;
  margin-bottom:4px;
  text-shadow:0 0 20px rgba(201,168,76,0.5);
}
.brand-sub{
  text-align:center;font-size:12px;letter-spacing:.15em;
  color:rgba(201,168,76,0.55);text-transform:uppercase;
  margin-bottom:26px;
}

/* Separador diamante */
.sep{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--border)}
.sep i{font-size:9px;color:var(--gold);text-shadow:0 0 8px var(--gold)}

/* Mensajes flash */
.flash{
  padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.flash-danger{background:rgba(220,53,69,0.18);border:1px solid rgba(220,53,69,0.35);color:#f08090}
.flash-success{background:rgba(25,135,84,0.18);border:1px solid rgba(25,135,84,0.35);color:#86efac}
.flash-info{background:rgba(13,110,253,0.18);border:1px solid rgba(13,110,253,0.35);color:#8fc0ff}
.flash-warning{background:rgba(255,193,7,0.18);border:1px solid rgba(255,193,7,0.35);color:#f0d080}

/* Labels */
.field-label{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(201,168,76,0.7);margin-bottom:7px;font-weight:600;
}

/* Inputs */
.input-wrap{
  display:flex;align-items:center;
  background:var(--input-bg);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:10px;
  margin-bottom:20px;
  transition:border-color .2s,box-shadow .2s;
  overflow:hidden;
}
.input-wrap:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.15),0 0 12px rgba(201,168,76,0.1);
}
.ic{padding:0 13px;font-size:15px;color:rgba(201,168,76,0.45);flex-shrink:0;pointer-events:none}
.ic-r{pointer-events:all;cursor:pointer;transition:color .15s;color:rgba(201,168,76,0.35)}
.ic-r:hover{color:var(--gold)}
.input-wrap input{
  flex:1;background:transparent;border:none;outline:none;
  padding:13px 4px;font-size:14px;color:#dde4f0;
}
.input-wrap input::placeholder{color:rgba(255,255,255,0.22)}

/* Remember */
.rem-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:rgba(255,255,255,0.38);
  margin-bottom:26px;cursor:pointer;
  user-select:none;
}
.rem-row input[type=checkbox]{accent-color:var(--gold);width:14px;height:14px;cursor:pointer}

/* Botón principal */
.btn-login{
  width:100%;padding:15px;
  background:linear-gradient(135deg,#b8942a 0%,#e8cc5a 45%,#b8942a 100%);
  background-size:200% 100%;
  border:none;border-radius:11px;
  font-size:13px;font-weight:800;letter-spacing:.25em;
  color:#08100a;text-transform:uppercase;
  cursor:pointer;
  transition:background-position .5s,box-shadow .3s,transform .15s;
  box-shadow:0 4px 24px rgba(201,168,76,0.45),0 2px 8px rgba(0,0,0,0.5);
  position:relative;overflow:hidden;
}
.btn-login::after{
  content:'';
  position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
  transform:skewX(-20deg);
  animation:btnShine 2.8s 1s infinite;
}
@keyframes btnShine{0%{left:-70%}55%,100%{left:130%}}
.btn-login:hover{
  background-position:right center;
  box-shadow:0 6px 36px rgba(201,168,76,0.65),0 2px 10px rgba(0,0,0,0.6);
  transform:translateY(-1px);
}
.btn-login:active{transform:translateY(0)}

/* Link secundario (volver, reenviar código, etc.) */
.link-row{
  text-align:center;font-size:12px;margin-bottom:6px;
}
.link-row a{
  color:rgba(201,168,76,0.75);text-decoration:none;
  transition:color .15s;
}
.link-row a:hover{color:var(--gold);text-decoration:underline}

/* Pie */
.card-foot{
  text-align:center;font-size:10px;letter-spacing:.07em;
  color:rgba(255,255,255,0.15);margin-top:22px;
}

/* Marca inferior pantalla */
.screen-foot{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  text-align:center;z-index:3;pointer-events:none;
}
.screen-foot p{font-size:11px;letter-spacing:.14em;color:rgba(201,168,76,0.45);text-transform:uppercase}
.screen-foot small{font-size:10px;color:rgba(255,255,255,0.2);letter-spacing:.06em}
.screen-foot .diamond{
  display:inline-block;width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);
  margin-bottom:8px;box-shadow:0 0 10px var(--gold);
}