:root{
  --azul:#1565c0; --azul-claro:#2e86de; --azul-deep:#0c2f52;
  --verde:#2e8b3d; --verde-claro:#43a047; --verde-deep:#123317;
  --acento-grad: linear-gradient(135deg, var(--azul) 0%, var(--verde) 100%);
  --negro:#0a0a0a; --card:#141414; --card-glass:rgba(20,20,20,.72); --borde:#262626;
  --texto:#e8e8e8; --texto-mute:#8a8a8a;
  --peligro:#e04b4b;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--texto);
  background:var(--negro);
  min-height:100vh;
  overflow-x:hidden;
}
 
/* ═══════════════ LAYOUT SPLIT-SCREEN ═══════════════ */
.auth-page{
  min-height:100vh;
  display:flex;
}
 
/* ── Panel visual (izquierda) ── */
.auth-visual{
  flex:1.15;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(21,101,192,.35), transparent 55%),
    radial-gradient(circle at 80% 78%, rgba(46,139,61,.32), transparent 55%),
    linear-gradient(160deg, #0a0e14 0%, #0a0a0a 60%, #060a08 100%);
  padding:60px 40px;
}
.visual-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  animation:float 14s ease-in-out infinite;
}
.visual-blob.b1{ width:340px; height:340px; background:var(--azul); top:-80px; left:-60px; }
.visual-blob.b2{ width:300px; height:300px; background:var(--verde); bottom:-90px; right:-60px; animation-delay:3s; }
.visual-blob.b3{ width:180px; height:180px; background:var(--azul-claro); bottom:20%; left:10%; opacity:.3; animation-delay:6s; }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-24px) scale(1.06); }
}
 
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 45%, #000 10%, transparent 72%);
  pointer-events:none;
}
 
.visual-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:420px;
}
.visual-logo{
  width:100%; max-width:280px; height:auto;
  filter:drop-shadow(0 12px 40px rgba(21,101,192,.35));
  margin-bottom:8px;
}
.visual-tagline{
  color:rgba(255,255,255,.55);
  font-size:.92rem;
  letter-spacing:.3px;
  line-height:1.6;
  margin:10px 0 26px;
}
.code-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:.76rem; letter-spacing:.5px;
  color:var(--verde-claro);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(67,160,71,.28);
  border-radius:30px;
  padding:.5rem 1.1rem;
}
.code-chip::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--verde-claro);
  box-shadow:0 0 8px var(--verde-claro);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
 
.visual-features{
  display:flex; flex-direction:column; gap:12px;
  margin-top:34px; width:100%; text-align:left;
}
.visual-feature{
  display:flex; align-items:center; gap:10px;
  font-size:.8rem; color:rgba(255,255,255,.45);
}
.visual-feature i{
  color:var(--azul-claro); font-size:.95rem; flex-shrink:0;
}
 
/* ── Panel del formulario (derecha) ── */
.auth-panel{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  position:relative;
  background:
    radial-gradient(circle at 90% 10%, rgba(21,101,192,.08), transparent 40%),
    var(--negro);
}
 
.auth-wrap{ width:100%; max-width:400px; }
 
/* Logo compacto para mobile (oculto en desktop) */
.brand-mobile{ display:none; align-items:center; justify-content:center; gap:10px; margin-bottom:26px; }
.brand-mobile-icon{
  width:38px; height:38px; border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px;
  box-shadow:0 2px 14px rgba(21,101,192,.4);
}
.brand-mobile-icon img{ width:100%; height:100%; object-fit:contain; }
.brand-mobile-text{ font-size:1.1rem; font-weight:800; letter-spacing:1.5px; color:var(--verde-claro); }
.brand-mobile-text span{ color:var(--azul-claro); }
 
.auth-card{
  background:var(--card-glass);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--borde);
  border-radius:20px;
  padding:40px 34px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}
.auth-card::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--acento-grad);
}
.auth-title{ font-weight:800; font-size:1.4rem; color:#fff; margin-bottom:4px; letter-spacing:-.2px; }
.auth-sub{ color:var(--texto-mute); font-size:.86rem; margin-bottom:28px; line-height:1.5; }
 
.form-label{ font-size:.78rem; font-weight:600; color:#cfcfcf; margin-bottom:6px; letter-spacing:.2px; }
.input-group-text{
  background:#1c1c1c; border:1px solid var(--borde); color:var(--texto-mute); border-right:none;
}
.form-control{
  background:#1c1c1c; border:1px solid var(--borde); color:var(--texto); padding:.68rem .8rem;
}
.form-control:focus{
  background:#1c1c1c; color:var(--texto); border-color:var(--azul-claro);
  box-shadow:0 0 0 .2rem rgba(46,134,222,.18);
}
.input-group .form-control{ border-left:none; }
.input-group:focus-within .input-group-text{ border-color:var(--azul-claro); color:var(--azul-claro); }
 
.btn-rojo{
  background:var(--acento-grad); border:none; color:#fff; font-weight:700; padding:.72rem 1rem;
  border-radius:11px; transition:.18s; letter-spacing:.3px;
  box-shadow:0 10px 26px rgba(21,101,192,.32);
}
.btn-rojo:hover{ filter:brightness(1.1); color:#fff; transform:translateY(-1px); box-shadow:0 14px 32px rgba(21,101,192,.4); }
.btn-rojo:active{ transform:translateY(0); }
 
.alert-custom{
  background:rgba(224,75,75,.1); border:1px solid rgba(224,75,75,.32); color:#ff9d9d;
  border-radius:10px; font-size:.85rem; padding:.65rem .9rem;
}
.toggle-pass{ cursor:pointer; }
.toggle-pass:hover{ color:var(--azul-claro); }
 
.auth-footnote{
  text-align:center; margin-top:22px; font-size:.72rem; color:#555; letter-spacing:.3px;
}
 
/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:980px){
  .auth-visual{ display:none; }
  .auth-panel{ flex:1 1 100%; }
  .brand-mobile{ display:flex; }
}
@media (max-width:400px){
  .auth-card{ padding:30px 22px; border-radius:16px; }
}