/* ============================================================================
   EnglishMAX Online · Auth pages (login, registro, recuperar)
   Con soporte completo de dark mode
   ============================================================================ */

.auth-wrap {
    min-height: calc(100vh - 80px);
    display: grid; place-items: center;
    padding: 100px 24px 60px;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,122,255,.08), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(175,82,222,.06), transparent 50%),
        var(--bg-secondary);
    position: relative;
}

[data-theme="dark"] .auth-wrap {
    background:
        radial-gradient(circle at 15% 20%, rgba(10,132,255,.18), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(191,90,242,.14), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0,199,190,.06), transparent 60%),
        var(--bg-primary);
}

.auth-card {
    width: 100%; max-width: 520px;
    background: #fff;
    border-radius: 28px;
    padding: 48px 36px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--separator);
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Variante compacta para login */
.auth-card-sm { max-width: 440px; }

[data-theme="dark"] .auth-card {
    background: rgba(28, 28, 36, 0.85);
    border-color: rgba(84, 84, 88, 0.4);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.auth-card h2 {
    text-align: center; margin-bottom: 8px;
    font-size: 28px; letter-spacing: -0.02em;
    color: var(--text-primary);
}
.auth-card .subtitle {
    text-align: center; color: var(--text-tertiary);
    margin-bottom: 32px; font-size: 15px;
}

/* Logo circular real - sin fondo */
.auth-logo-img {
    width: 110px; height: 110px;
    margin: 0 auto 24px; display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0,122,255,0.3));
    animation: logoIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes logoIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-theme="dark"] .auth-logo-img {
    filter: drop-shadow(0 10px 30px rgba(10,132,255,0.5));
}

/* Fallback para .auth-logo con inicial (si no hay imagen) */
.auth-logo {
    width: 72px; height: 72px;
    margin: 0 auto 24px;
    border-radius: 20px;
    background: var(--gradient-blue);
    display: grid; place-items: center;
    color: #fff; font-size: 32px; font-weight: 900;
    box-shadow: 0 8px 24px rgba(0,122,255,.3);
}
.auth-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #FF9500, #FF2D55);
    display: grid; place-items: center;
    color: #fff; font-size: 36px;
    box-shadow: 0 8px 24px rgba(255,45,85,.3);
}

/* Links */
.auth-link {
    text-align: center; margin-top: 24px;
    color: var(--text-tertiary); font-size: 14px;
}
.auth-link a { color: var(--ios-blue); font-weight: 600; }
.auth-link a:hover { opacity: 0.8; }

/* Mensajes de estado */
.auth-error, .auth-msg-err {
    background: rgba(255,59,48,.08);
    color: var(--ios-red);
    padding: 12px 16px; border-radius: 12px;
    font-size: 14px; margin-bottom: 20px;
    border: 1px solid rgba(255,59,48,.2);
}
[data-theme="dark"] .auth-error, [data-theme="dark"] .auth-msg-err {
    background: rgba(255,69,58,.15);
    border-color: rgba(255,69,58,.3);
    color: #FF6961;
}

.auth-msg { padding: 14px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 20px; }
.auth-msg-ok {
    background: rgba(52,199,89,.1);
    color: var(--ios-green);
    border: 1px solid rgba(52,199,89,.2);
}
[data-theme="dark"] .auth-msg-ok {
    background: rgba(50,215,75,.15);
    border-color: rgba(50,215,75,.3);
}

/* Asterisco campo obligatorio */
.req {
    color: #FF6B7D;
    font-weight: 800;
    margin-left: 2px;
    font-size: 14px;
    line-height: 1;
}

/* Campos en 2 columnas */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .auth-row { grid-template-columns: 1fr; } }

/* Inputs específicos en dark mode */
[data-theme="dark"] .ios-input {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(84, 84, 88, 0.5);
    color: var(--text-primary);
}
[data-theme="dark"] .ios-input:focus {
    background: rgba(44, 44, 46, 0.9);
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}
[data-theme="dark"] .ios-input::placeholder {
    color: rgba(235, 235, 245, 0.4);
}
[data-theme="dark"] .ios-input:disabled {
    background: rgba(44, 44, 46, 0.3);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

[data-theme="dark"] .ios-select {
    background-color: #1A1F33 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234DD0E1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    color: #F5F8FF;
    border-color: rgba(77,208,225,0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="dark"] select.ios-select option {
    background-color: #1A1F33 !important;
    color: #F5F8FF !important;
    padding: 12px 16px;
    font-weight: 500;
}
[data-theme="dark"] select.ios-select option:checked,
[data-theme="dark"] select.ios-select option:hover {
    background: linear-gradient(#4DD0E1, #4DD0E1) !important;
    color: #0A0E1A !important;
}
[data-theme="dark"] .ios-select:focus {
    border-color: #4DD0E1;
    background-color: #1E2441 !important;
    box-shadow: 0 0 0 4px rgba(77,208,225,0.15);
}

[data-theme="dark"] .ios-label {
    color: var(--text-secondary);
}

/* Divider (ej. OR) */
.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0; color: var(--text-tertiary); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--separator);
}

/* Level picker (CEFR selector) */
.level-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 480px) { .level-picker { grid-template-columns: repeat(2, 1fr); } }

.level-opt {
    cursor: pointer; padding: 14px 10px; text-align: center;
    background: var(--bg-secondary); border: 2px solid transparent;
    border-radius: 14px; font-weight: 700; font-size: 15px;
    transition: all 200ms var(--ease-ios);
    color: var(--text-secondary);
    position: relative;
}
.level-opt:hover {
    background: var(--gray-5);
    transform: translateY(-1px);
}
.level-opt.selected {
    background: rgba(0,122,255,.08);
    border-color: var(--ios-blue);
    color: var(--ios-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,122,255,.15);
}
.level-opt small {
    display: block; font-size: 11px; font-weight: 500;
    color: var(--text-tertiary); margin-top: 4px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

[data-theme="dark"] .level-opt {
    background: rgba(44, 44, 46, 0.6);
    color: var(--text-secondary);
}
[data-theme="dark"] .level-opt:hover {
    background: rgba(58, 58, 60, 0.8);
}
[data-theme="dark"] .level-opt.selected {
    background: rgba(10,132,255,.15);
    border-color: var(--ios-blue);
    color: #60B5FF;
    box-shadow: 0 4px 16px rgba(10,132,255,.25);
}
[data-theme="dark"] .level-opt.selected small { color: #60B5FF; opacity: 0.8; }

/* Plan highlight banner */
.plan-highlight {
    background: linear-gradient(135deg, rgba(0,122,255,.08), rgba(175,82,222,.06));
    padding: 14px 18px; border-radius: 14px;
    border: 1px solid rgba(0,122,255,.2);
    font-size: 14px; color: var(--text-secondary);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.plan-highlight strong { color: var(--ios-blue); }
.plan-highlight i { color: var(--ios-blue); font-size: 22px; }

[data-theme="dark"] .plan-highlight {
    background: linear-gradient(135deg, rgba(10,132,255,.15), rgba(191,90,242,.1));
    border-color: rgba(10,132,255,.3);
}

/* Animation scale-in for the whole card */
.animate-scaleIn {
    animation: scaleIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}