/* ===========================
   PÁGINAS DE AUTENTICACIÓN
   (login.html / registro.html)
=========================== */
.auth-wrapper{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    padding-top:80px;
}

/* Variante sin panel de marca (verificar-correo.html) — una sola columna
   centrada, para páginas de solo estado/confirmación sin formulario. */
.auth-wrapper-centered{
    grid-template-columns:1fr;
}

.verify-email-card{
    text-align:center;
}

.verify-email-icon{
    font-size:48px;
    margin-bottom:20px;
    color:var(--accent-secondary);
}

.verify-email-icon.success{ color:#5ee2ab; }
.verify-email-icon.error{ color:#ff9f9f; }

/* ---------- Panel de marca (izquierda) ---------- */
.auth-brand{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px 70px;
    overflow:hidden;
    background:
        radial-gradient(circle at 25% 25%, rgba(0,140,255,.18), transparent 35%),
        linear-gradient(180deg,#050816,#081325);
}

.auth-brand::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    left:-150px;
    bottom:-150px;
    background:radial-gradient(circle, rgba(0,132,255,.20), transparent 70%);
    filter:blur(70px);
}

.auth-brand-logo{
    font-size:38px;
    font-weight:900;
    color:var(--text-primary);
    letter-spacing:1px;
    margin-bottom:40px;
    position:relative;
    z-index:2;
}

.auth-brand-logo span{
    color:var(--accent-secondary);
}

.auth-brand h1{
    font-size:clamp(1.75rem, 1.353rem + 1.697vw, 2.625rem);
    font-weight:800;
    color:var(--text-primary);
    line-height:1.2;
    margin-bottom:20px;
    position:relative;
    z-index:2;
}

.auth-brand h1 span{
    color:var(--accent-secondary);
}

.auth-brand p{
    color:var(--text-muted);
    font-size:17px;
    line-height:1.7;
    max-width:420px;
    margin-bottom:36px;
    position:relative;
    z-index:2;
}

.auth-brand-list{
    list-style:none;
    position:relative;
    z-index:2;
}

.auth-brand-list li{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--text-primary);
    font-size:15px;
    margin-bottom:18px;
}

.auth-brand-list i{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(45,169,255,.15);
    color:var(--accent-secondary);
}

/* ---------- Panel de formulario (derecha) ---------- */
.auth-form-side{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 40px;
    background:var(--bg-primary);
}

.auth-card{
    width:100%;
    max-width:440px;
}

.auth-card h2{
    font-size:clamp(1.5rem, 1.143rem + 1.524vw, 2rem);
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:8px;
}

.auth-card .auth-subtitle{
    color:var(--text-muted);
    font-size:15px;
    margin-bottom:34px;
}

.form-group{
    margin-bottom:20px;
    position:relative;
}

.form-group label{
    display:block;
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    margin-bottom:8px;
}

.input-icon{
    position:relative;
}

.input-icon i{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    color:var(--text-muted);
    font-size:15px;
}

.input-icon input{
    width:100%;
    height:50px;
    padding:0 16px 0 46px;
    background:var(--surface-4);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    font-size:15px;
    transition:var(--transition-fast);
}

.input-icon input::placeholder{
    color:var(--text-muted);
}

.input-icon input:focus{
    outline:none;
    border-color:var(--accent-secondary);
    box-shadow:0 0 15px var(--glow-soft);
}

.input-icon .toggle-password{
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);
    color:var(--text-muted);
    cursor:pointer;
    background:none;
    border:none;
    font-size:15px;
}

.input-icon .toggle-password:hover{
    color:var(--accent-secondary);
}

.field-error{
    display:none;
    color:#ff6b6b;
    font-size:13px;
    margin-top:6px;
}

.form-group.has-error .input-icon input{
    border-color:#ff6b6b;
}

.form-group.has-error .field-error{
    display:block;
}

.form-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
    font-size:14px;
}

.form-check{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-muted);
}

.form-check input{
    width:16px;
    height:16px;
    accent-color:var(--accent-primary);
}

.form-link{
    color:var(--accent-secondary);
    text-decoration:none;
    font-weight:600;
}

.form-link:hover{
    text-decoration:underline;
}

.auth-switch{
    text-align:center;
    color:var(--text-muted);
    font-size:15px;
    margin-top:26px;
}

.form-alert{
    display:none;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:var(--radius-sm);
    background:rgba(255,107,107,.12);
    border:1px solid rgba(255,107,107,.35);
    color:#ff9f9f;
    font-size:14px;
    margin-bottom:22px;
}

.form-alert.is-visible{
    display:flex;
}

.form-alert.success{
    background:rgba(45,206,137,.12);
    border-color:rgba(45,206,137,.35);
    color:#5ee2ab;
}

.auth-card .btn-primary{
    width:100%;
    text-align:center;
    border:none;
}