/* =============================================================================
   AUTH PAGE — Login / Registro
   Diseño basado en la pantalla de inicio de Random
   ============================================================================= */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
    --auth-purple-1:   #5b21b6;
    --auth-purple-2:   #7c3aed;
    --auth-purple-3:   #9b62df;
    --auth-purple-4:   #c4b5fd;
    --auth-white:      #ffffff;
    --auth-white-80:   rgba(255,255,255,0.80);
    --auth-white-60:   rgba(255,255,255,0.60);
    --auth-white-20:   rgba(255,255,255,0.20);
    --auth-white-10:   rgba(255,255,255,0.10);
    --auth-shadow:     0 20px 60px rgba(0,0,0,0.30);
    --auth-radius:     20px;
    --auth-radius-sm:  12px;
    --auth-transition: 0.3s cubic-bezier(.4,0,.2,1);
}

/* ── Contenedor principal ──────────────────────────────────────────────────── */
.random-auth-page {
    min-height: 75vh;
    background: linear-gradient(135deg, var(--auth-purple-1) 0%, var(--auth-purple-2) 45%, var(--auth-purple-3) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    position: relative;
    overflow: hidden;
    margin: 0 calc(-50vw + 50%);   /* extender al ancho completo */
    width: 100vw;
}

/* Orbes decorativos (igual que la landing) */
.random-auth-page::before,
.random-auth-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}
.random-auth-page::before {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #fff, transparent 70%);
    top: -150px; left: -150px;
}
.random-auth-page::after {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #fff, transparent 70%);
    bottom: -120px; right: -120px;
}

/* ── Aviso Mayorista ───────────────────────────────────────────────────────── */
.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--auth-white-20);
    border: 1px solid var(--auth-white-20);
    border-radius: var(--auth-radius-sm);
    padding: 16px 20px;
    margin-bottom: 24px;
    max-width: 500px;
    width: 100%;
    color: var(--auth-white);
    font-size: 0.92rem;
}
.auth-notice-icon { font-size: 1.4rem; flex-shrink: 0; }
.auth-notice p { margin: 0; }

/* ── Steps ─────────────────────────────────────────────────────────────────── */
.auth-step {
    width: 100%;
    max-width: 560px;
    display: none;
    flex-direction: column;
    align-items: center;
    animation: authFadeIn var(--auth-transition) both;
}
.auth-step.is-active { display: flex; }

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── STEP: choose — Marca ─────────────────────────────────────────────────── */
.auth-brand {
    text-align: center;
    margin-bottom: 36px;
}
.auth-brand a { text-decoration: none; }
.auth-logo {
    max-height: 70px;
    max-width: 200px;
    width: auto;
    filter: brightness(0) invert(1); /* forzar blanco si el logo es oscuro */
    margin-bottom: 10px;
}
.auth-site-name {
    font-size: 2rem;
    font-weight: 800;
    color: var(--auth-white);
    letter-spacing: 0.02em;
}
.auth-tagline {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--auth-white-80);
    text-transform: uppercase;
    margin: 6px 0 0;
}

/* ── STEP: choose — Tarjetas ──────────────────────────────────────────────── */
.auth-choose-label {
    color: var(--auth-white-80);
    font-size: 1rem;
    margin-bottom: 24px;
    text-align: center;
}
.auth-action-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 28px;
}
.auth-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 32px;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.70) !important;
    border-radius: var(--auth-radius) !important;
    color: var(--auth-white) !important;
    font-family: inherit;
    cursor: pointer;
    flex: 1 1 180px;
    max-width: 230px;
    box-shadow: none !important;
    transition: background 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease,
                color 0.3s ease;
    outline: none !important;
    text-shadow: none;
}
.auth-card:hover,
.auth-card:focus,
.auth-card:focus-visible,
.auth-card:active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--auth-purple-2) !important;
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.18) !important;
    outline: none !important;
}
.auth-card-icon {
    width: 72px; height: 72px;
    min-width: 72px; min-height: 72px;
    border: 2px solid rgba(255,255,255,0.70);
    border-radius: 18px;
    display: grid !important;
    place-items: center;
    background: transparent !important;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.auth-card:hover .auth-card-icon,
.auth-card:focus .auth-card-icon,
.auth-card:focus-visible .auth-card-icon {
    background: rgba(124,58,237,0.10) !important;
    border-color: var(--auth-purple-2);
}
.auth-card-icon svg {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
    stroke: var(--auth-white);
    transition: stroke 0.3s ease;
    pointer-events: none;
}
.auth-card:hover .auth-card-icon svg,
.auth-card:focus .auth-card-icon svg,
.auth-card:focus-visible .auth-card-icon svg {
    stroke: var(--auth-purple-2);
}
.auth-card strong {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--auth-white) !important;
    display: block;
    transition: color 0.3s ease;
}
.auth-card:hover strong,
.auth-card:focus strong {
    color: var(--auth-purple-2) !important;
}
.auth-card > span {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.80) !important;
    display: block;
    transition: color 0.3s ease;
}
.auth-card:hover > span,
.auth-card:focus > span {
    color: rgba(124,58,237,0.75) !important;
}

/* ── Botones inferiores del step choose ──────────────────────────────────── */
.auth-choose-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.auth-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: 50px;
    background: transparent;
    color: var(--auth-white);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--auth-transition), border-color var(--auth-transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.auth-outline-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.90);
    color: var(--auth-white);
    text-decoration: none;
}

/* ── STEP: login / register — Header mini ─────────────────────────────────── */
#auth-step-login,
#auth-step-register { max-width: 500px; }

.auth-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
}
.auth-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--auth-white-10);
    border: 1px solid var(--auth-white-20);
    color: var(--auth-white);
    font-family: inherit;
    font-size: 0.88rem;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: background var(--auth-transition), border-color var(--auth-transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.auth-back-btn:hover {
    background: var(--auth-white-20);
    border-color: var(--auth-white-60);
}
.auth-step-logo img {
    max-height: 36px;
    max-width: 140px;
    filter: brightness(0) invert(1);
}

/* ── Caja del formulario ──────────────────────────────────────────────────── */
.auth-form-box {
    background: var(--auth-white);
    border-radius: var(--auth-radius);
    padding: 40px 40px 32px;
    width: 100%;
    box-shadow: var(--auth-shadow);
}
.auth-form-box--register { max-width: 500px; }

.auth-form-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1e1b4b;
    margin: 0 0 6px;
    border: none;
    padding: 0;
}
.auth-form-title::after { display: none; }
.auth-form-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 28px;
}

/* ── Campos ───────────────────────────────────────────────────────────────── */
.auth-field-group {
    margin-bottom: 18px;
}
.auth-field-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.auth-field-group label .required {
    color: #ef4444;
    margin-left: 2px;
}
.auth-field-group input.input-text,
.auth-form-box input.input-text,
.auth-form-box .woocommerce-Input {
    width: 100% !important;
    padding: 11px 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: var(--auth-radius-sm) !important;
    font-size: 0.95rem !important;
    background: #f9fafb !important;
    color: #111827 !important;
    transition: border-color var(--auth-transition), box-shadow var(--auth-transition) !important;
    box-sizing: border-box !important;
}
.auth-field-group input.input-text:focus,
.auth-form-box input.input-text:focus,
.auth-form-box .woocommerce-Input:focus {
    border-color: var(--auth-purple-2) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* ── Remember / Lost pass row ─────────────────────────────────────────────── */
.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 24px;
    flex-wrap: wrap;
    gap: 8px;
}
.auth-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #4b5563;
    cursor: pointer;
}
.auth-checkbox-label input[type="checkbox"] {
    accent-color: var(--auth-purple-2);
    width: 16px; height: 16px;
}
.auth-lost-pass {
    font-size: 0.85rem;
    color: var(--auth-purple-2);
    text-decoration: none;
    font-weight: 500;
}
.auth-lost-pass:hover { text-decoration: underline; }

/* ── Botón principal ──────────────────────────────────────────────────────── */
.auth-submit-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--auth-purple-2), var(--auth-purple-3));
    border: none;
    border-radius: var(--auth-radius-sm);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--auth-transition), transform var(--auth-transition), box-shadow var(--auth-transition);
    box-shadow: 0 4px 18px rgba(124,58,237,0.35);
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}
.auth-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(124,58,237,0.45);
}
.auth-submit-btn:active { transform: translateY(0); }

/* ── Link de cambio de step ───────────────────────────────────────────────── */
.auth-switch-link {
    text-align: center;
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0;
}
.auth-switch-trigger {
    color: var(--auth-purple-2);
    font-weight: 600;
    text-decoration: none;
}
.auth-switch-trigger:hover { text-decoration: underline; }

/* ── Mensajes WooCommerce ─────────────────────────────────────────────────── */
.random-auth-page .woocommerce-error,
.random-auth-page .woocommerce-message,
.random-auth-page .woocommerce-info {
    max-width: 500px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: var(--auth-radius-sm);
}

/* ── Selector de tipo (de registro-empresa.css) sobre fondo blanco ─────────── */
.auth-form-box--register .selector-titulo {
    color: #374151;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.auth-form-box--register #tipo-selector {
    gap: 12px;
}
.auth-form-box--register .tipo-btn {
    border-color: #e5e7eb;
    background: #f9fafb;
    color: #374151;
    flex: 1 1 120px;
    max-width: 160px;
}
.auth-form-box--register .tipo-btn:hover {
    border-color: var(--auth-purple-2);
    background: var(--auth-purple-2) !important;
    color: #fff;
}
.auth-form-box--register .tipo-btn:hover .tipo-label,
.auth-form-box--register .tipo-btn:hover .tipo-desc {
    color: #fff;
}
.auth-form-box--register .tipo-label { color: #374151; }
.auth-form-box--register .tipo-desc  { color: #6b7280; }

/* ── Campos nativos WC — se ocultan hasta que el JS los reubique ────────────── */
#wc-native-email,
#wc-native-password,
#wc-native-username,
#wc-native-submit {
    /* El JS de registro-empresa.js los mueve; los ocultamos hasta entonces */
}

/* ── Spinner WooCommerce ──────────────────────────────────────────────────── */
.random-auth-page .blockUI.blockOverlay {
    border-radius: var(--auth-radius);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Fullscreen body reset */
body.auth-fullscreen-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #5b21b6 !important;
}
body.auth-fullscreen-body .random-auth-page {
    min-height: 100vh !important;
    margin: 0 !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .random-auth-page {
        padding: 32px 16px;
        margin: 0 !important;
        width: 100% !important;
        min-height: 100vh;
    }
    .auth-step { max-width: 100%; }
    #auth-step-login,
    #auth-step-register { max-width: 100%; }
}

@media (max-width: 600px) {
    .auth-form-box { padding: 28px 20px 24px; }
    .auth-action-cards { gap: 14px; }
    .auth-card {
        padding: 22px 18px;
        flex: 1 1 100%;
        max-width: 100%;
        flex-direction: row;
        gap: 16px;
        text-align: left;
        align-items: center;
        border-color: rgba(255,255,255,0.70);
    }
    .auth-card-icon {
        width: 56px; height: 56px;
        border-radius: 14px;
        flex-shrink: 0;
    }
    .auth-card-icon svg { width: 28px; height: 28px; }
    .auth-card-text { display: flex; flex-direction: column; gap: 3px; }
    .auth-card strong { font-size: 1rem; }
    .auth-card > span { font-size: 0.83rem; }
    .auth-form-title { font-size: 1.3rem; }
    .auth-step-header { flex-direction: row; }
    .auth-brand { margin-bottom: 28px; }
    .auth-logo { max-height: 52px; }
}

@media (max-width: 480px) {
    .auth-remember-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .auth-form-box { padding: 24px 16px 20px; border-radius: 16px; }
    .auth-step-header { margin-bottom: 16px; }
}

@media (max-width: 400px) {
    .auth-action-cards { flex-direction: column; }
    .auth-card { max-width: 100%; width: 100%; }
}