/* ============================================================
   PROGNOSIS TALENTUM® — Estilos de Registro
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body.registro-body {
    font-family: 'Space Grotesk', sans-serif;
    background: #0a0a0f;
    color: #e0e0e0;
    min-height: 100vh;
    overflow-x: hidden;
}

.bg-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 10% 20%, rgba(0, 212, 255, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 90% 80%, rgba(155, 89, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ---- Layout ---- */
.registro-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    min-height: 100vh;
}

/* ---- Branding lateral ---- */
.registro-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 48px;
    border-right: 1px solid #1a1a2a;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.logo-icon { font-size: 28px; color: #00D4FF; }
.logo-text  { font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #fff; }
.logo-badge { font-size: 12px; color: #00D4FF; }

.brand-headline {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 20px;
}

.brand-desc {
    color: #888;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 48px;
}

/* ---- Stepper ---- */
.stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 48px;
}

.step {
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0.4;
    transition: opacity .3s;
}

.step.active, .step.done { opacity: 1; }

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #2a2a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    flex-shrink: 0;
    transition: all .3s;
}

.step.active .step-dot {
    border-color: #00D4FF;
    background: rgba(0, 212, 255, 0.15);
    color: #00D4FF;
}

.step.done .step-dot {
    border-color: #00FF88;
    background: rgba(0, 255, 136, 0.15);
    color: #00FF88;
}

.step.done .step-dot span::before { content: '✓'; }
.step.done .step-dot span { font-size: 0; }
.step.done .step-dot::before { content: '✓'; font-size: 14px; color: #00FF88; }

.step-label {
    font-size: 14px;
    font-weight: 500;
    color: #aaa;
}

.step.active .step-label { color: #fff; }
.step.done .step-label { color: #00FF88; }

.step-connector {
    width: 2px;
    height: 24px;
    background: #1a1a2a;
    margin-left: 17px;
}

.ya-tienes-cuenta { color: #666; font-size: 14px; }
.ya-tienes-cuenta .link-primary { color: #00D4FF; text-decoration: none; }
.ya-tienes-cuenta .link-primary:hover { text-decoration: underline; }

/* ---- Panel del formulario ---- */
.registro-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
}

.registro-card {
    width: 100%;
    max-width: 480px;
}

/* ---- Form Steps ---- */
.form-step { display: none; animation: stepIn .4s ease; }
.form-step.active { display: block; }

@keyframes stepIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.step-header {
    margin-bottom: 32px;
}

.step-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.step-header p { color: #888; font-size: 15px; }

/* ---- Inputs ---- */
.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.form-input {
    width: 100%;
    padding: 13px 16px;
    background: #12121a;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.form-input:focus {
    border-color: #00D4FF;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.form-input option { background: #12121a; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-wrapper { position: relative; }
.input-wrapper .form-input { padding-right: 44px; }

.toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #666;
}

.password-strength { margin-top: 8px; min-height: 22px; }

/* ---- Botones ---- */
.btn-next, .btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00D4FF, #9B59FF);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    margin-top: 8px;
}

.btn-next:hover, .btn-submit:hover { opacity: .88; }
.btn-next:active, .btn-submit:active { transform: scale(.98); }
.btn-next:disabled, .btn-submit:disabled { opacity: .5; cursor: not-allowed; }

.btn-back {
    background: none;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    color: #888;
    padding: 14px 24px;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .2s;
}

.btn-back:hover { border-color: #00D4FF; color: #00D4FF; }

.form-actions { display: flex; gap: 12px; margin-top: 8px; }
.form-actions .btn-next, .form-actions .btn-submit { flex: 1; margin-top: 0; }

/* ---- Resumen ---- */
.resumen-card {
    background: #0d0d15;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.resumen-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #1a1a2a;
    font-size: 14px;
}

.resumen-row:last-child { border-bottom: none; }
.resumen-row span { color: #666; }
.resumen-row strong { color: #e0e0e0; max-width: 60%; text-align: right; overflow-wrap: break-word; }

/* ---- Checkbox ---- */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    cursor: pointer;
}

.checkbox-label input { margin-top: 3px; accent-color: #00D4FF; }
.link-primary { color: #00D4FF; text-decoration: none; }
.link-primary:hover { text-decoration: underline; }

/* ---- Alertas ---- */
.alert-error {
    background: rgba(255, 0, 85, 0.1);
    border: 1px solid rgba(255, 0, 85, .3);
    border-radius: 8px;
    padding: 12px 16px;
    color: #FF0055;
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-success {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, .3);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
}

.check-icon { font-size: 28px; flex-shrink: 0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .registro-container { grid-template-columns: 1fr; }
    .registro-branding { display: none; }
    .registro-panel { padding: 40px 24px; }
    .form-row { grid-template-columns: 1fr; }
}