/* =============================================================
   registro_common.css — Estilos compartidos de registro
   ChambaCerca · Solo apariencia · Sin lógica de formulario
   Páginas: registro_cliente | registro_negocio | registro_trabajador
   ============================================================= */

/* Variables globales — cada página sobreescribe --badge-color */
:root {
    --navy:        #0a1b39;
    --navy-light:  #1e293b;
    --gold:        #c07f21;
    --green:       #16a34a;
    --muted:       #64748b;
    --bg-page:     #f1f5f9;
    --radius:      20px;
    --shadow:      0 20px 40px -10px rgba(10,27,57,.15);
    --ease:        cubic-bezier(.4,0,.2,1);
    --badge-color: #64748b;
    --badge-glow:  rgba(100,116,139,.2);
}
*, *::before, *::after { box-sizing: border-box; }

/* ── Layout principal ───────────────────────────────────────── */
.main-wrapper { display: flex; min-height: 100vh; width: 100%; }

.visual-panel {
    flex: 1;
    background-color: var(--navy);   /* fallback; cada página define background-image */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex; flex-direction: column;
    justify-content: center; padding: 4rem;
    color: #fff; position: relative;
}

/* Logo / link en esquina superior del panel visual */
.visual-panel .logo-top {
    position: absolute; top: 2rem; left: 2.5rem;
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.visual-panel .logo-top span {
    font-size: .88rem; font-weight: 800; color: #fff;
    letter-spacing: -.3px; line-height: 1;
}
.visual-panel .logo-top span em { color: #c07f21; font-style: normal; }
.visual-panel h1 { font-size: 2.8rem; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 1.5rem; }
.visual-panel > p { font-size: 1.1rem; color: rgba(255,255,255,.8); max-width: 460px; line-height: 1.5; margin: 0; }

.form-panel {
    flex: 1.2; display: flex; align-items: center;
    justify-content: center; padding: 1.5rem; background: var(--bg-page);
}
.wiz-card {
    width: 100%; max-width: 520px; background: #fff;
    border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; display: flex; flex-direction: column; margin: auto;
}

/* ── Header oscuro del formulario ───────────────────────────── */
.wiz-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    padding: 1rem 1.5rem .75rem; color: #fff; position: relative;
}
.wiz-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: .5rem; margin-bottom: .6rem;
}
.btn-back-portal, .btn-login-top {
    color: #fff; text-decoration: none; font-weight: 700; font-size: .74rem;
    opacity: .85; transition: .2s; display: inline-flex; align-items: center;
    gap: .3rem; background: rgba(255,255,255,.08); padding: .35rem .7rem;
    border-radius: 50px; border: 1px solid rgba(255,255,255,.1);
}
.btn-back-portal:hover, .btn-login-top:hover {
    opacity: 1; color: #fff; background: var(--gold);
    border-color: var(--gold); transform: translateY(-1px);
}

/* Badge de tipo de registro — color definido por --badge-color */
.portal-badge {
    background: var(--badge-color) !important;
    color: #fff !important; padding: .3rem .8rem; border-radius: 50px;
    font-weight: 800; font-size: .62rem; text-transform: uppercase;
    letter-spacing: 1.2px; display: inline-block; margin-bottom: .5rem;
    border: 1px solid rgba(255,255,255,.15); box-shadow: 0 2px 10px var(--badge-glow);
}

/* Marca sutil en el header (optimizada vs versión anterior de 48px) */
.wiz-brand { display: flex; align-items: center; gap: 6px; margin-bottom: .2rem; }
.wiz-brand-name { font-weight: 800; font-size: .88rem; letter-spacing: -.3px; color: rgba(255,255,255,.9); }
.wiz-brand-name span { color: #c07f21; }

/* h2 oculto (accesibilidad) y p eliminado */
.wiz-header h2 { font-size: 1.2rem; font-weight: 800; color: #fff !important; margin: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .visual-panel { display: none; }
    .form-panel   { padding: 1rem; width: 100%; }
    .wiz-card     { border-radius: 0; max-width: 100%; min-height: 100vh; margin: 0; }
    /* ChambaCerca visible en mobile a través del wiz-brand en el header */
    .wiz-brand      { margin-bottom: .45rem; }
    .wiz-brand-name { font-size: .92rem; }
}
@media (max-width: 480px) {
    .wiz-top-bar { flex-wrap: wrap; gap: .3rem; }
}