/* ═══════════════════════════════════════════════════════════
   REGISTRO — estilos del módulo de alta de negocios
   Mobile-first. Extiende .auth-card de auth.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Card variants ───────────────────────────────────────── */
.reg-card {
    gap: var(--space-5);
}
.reg-card--center {
    text-align: center;
}

.reg-card__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-text-muted);
}
.reg-card__brand-mark { color: #9d174d; font-size: 1rem; }

.reg-card__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--c-text);
    margin: 0;
}

.reg-card__lead {
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.6;
}
.reg-card__lead strong { color: var(--c-text); }

.reg-card__footer {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    text-align: center;
    margin: 0;
}

.reg-card__notice {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    line-height: 1.5;
    text-align: left;
}

/* ── Social buttons ──────────────────────────────────────── */
.reg-social {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.reg-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    cursor: pointer;
}
.reg-social__btn:hover {
    background: var(--c-surface-2);
    border-color: var(--c-text-muted);
}

@media (min-width: 480px) {
    .reg-social { flex-direction: row; }
    .reg-social__btn { flex: 1; }
}

/* ── Divider ─────────────────────────────────────────────── */
.reg-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.78rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.reg-divider::before,
.reg-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* ── Form fields ─────────────────────────────────────────── */
.reg-req   { color: var(--c-danger); }
.reg-optional { font-weight: 400; font-size: 0.78em; color: var(--c-text-muted); }

.reg-form { gap: var(--space-4); }

/* ── Password toggle ─────────────────────────────────────── */
.reg-pwd-wrap {
    position: relative;
    display: flex;
}
.reg-pwd-wrap input {
    padding-right: 40px;
}
.reg-pwd-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.12s;
}
.reg-pwd-toggle:hover { color: var(--c-text); }

/* ── Password strength ───────────────────────────────────── */
.reg-pwd-strength {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 4px;
}
.reg-pwd-strength__bar {
    flex: 1;
    height: 4px;
    background: var(--c-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}
.reg-pwd-strength__bar::after {
    content: '';
    position: absolute;
    left: 0; top: 0; height: 100%;
    width: var(--strength, 0%);
    background: var(--strength-color, #ef4444);
    border-radius: var(--radius-full);
    transition: width 0.25s, background 0.25s;
}
.reg-pwd-strength__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--strength-color, var(--c-text-muted));
    white-space: nowrap;
    min-width: 52px;
}

/* ── Checkbox ────────────────────────────────────────────── */
.reg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--c-text);
    cursor: pointer;
    line-height: 1.5;
}
.reg-checkbox input { margin-top: 3px; flex-shrink: 0; cursor: pointer; }
.reg-checkbox a { color: var(--c-primary); font-weight: 600; }

/* ── Submit button ───────────────────────────────────────── */
.reg-submit {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: #9d174d;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.reg-submit:hover { background: #831240; }
.reg-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Status icons ────────────────────────────────────────── */
.reg-status-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.reg-status-icon--mail    { background: #e0f2fe; color: #0369a1; }
.reg-status-icon--success { background: #dcfce7; color: #166534; }
.reg-status-icon--error   { background: #fef2f2; color: #991b1b; }

/* ── Steps list ──────────────────────────────────────────── */
.reg-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}
.reg-steps li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9rem;
    color: var(--c-text);
}
.reg-steps__num {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: #fce7f3;
    color: #9d174d;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}