/* Auth screens - Login / OTP */
.auth {
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: calc(20px + var(--sat)) 20px calc(20px + var(--sab));
    background:
        radial-gradient(1000px 500px at 50% -10%, color-mix(in oklab, var(--brand-500) 25%, transparent), transparent 60%),
        var(--bg);
}
.auth-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px 24px;
    width: 100%; max-width: 420px;
    animation: popIn var(--t) var(--ease);
}
.auth-logo{
    width: 64px; height: 64px; margin: 0 auto 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 24px color-mix(in oklab, var(--brand-500) 40%, transparent);
    color: #fff;
}
.auth-title{ font-size: 24px; font-weight: 700; letter-spacing: -0.02em; text-align:center; margin: 0 0 6px; }
.auth-sub{ text-align:center; color: var(--muted); font-size: 14px; margin: 0 0 22px; }

/* OTP inputs */
.otp {
    display:flex; gap:10px; justify-content:center; margin: 8px 0 20px;
}
.otp input{
    width: 60px; height: 68px;
    text-align:center; font-size: 26px; font-weight: 600;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text); outline: none;
    transition: border var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.otp input:focus{
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-500) 20%, transparent);
    transform: translateY(-1px);
}
@media (max-width: 380px){
    .otp input{ width: 52px; height: 60px; font-size: 22px; }
}

.phone-input{
    display:flex; gap:8px; align-items:center;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 0 12px;
}
.phone-input:focus-within{ border-color: var(--brand-500); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-500) 20%, transparent) }
.phone-input input{
    flex:1; border:0; background:transparent; padding: 14px 0; font-size: 16px;
    color: var(--text); outline: none;
}
.form-hint{ font-size: 12px; color: var(--muted); text-align:center; margin-top: 12px; }
.link-btn{ background:none; border:0; color: var(--brand-500); cursor:pointer; padding: 8px; font-size: 14px; }

.theme-toggle{
    position: fixed; top: calc(12px + var(--sat)); right: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--panel); border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow: var(--shadow-sm); z-index: 20;
    transition: transform var(--t-fast) var(--ease);
}
.theme-toggle:hover{ transform: scale(1.06); }

/* Pestañas Login / Registro */
.tabs{
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 4px; gap: 4px;
    margin: 4px 0 18px;
}
.tab{
    padding: 10px 14px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--muted); font-weight: 600; font-size: 14px;
    border-radius: 10px;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tab.active{
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.tab:hover:not(.active){ color: var(--text); }

.tab-panel{ animation: fadeIn var(--t) var(--ease); }
.tab-panel.hidden{ display: none; }