/* ==========================================================================
   Login Mi arbell — Registro de clientes (usa la base de login.css)
   ========================================================================== */

.arb-registro { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

.arb-section {
    margin: 0 0 6px 4px !important;
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--label2);
}
.arb-registro .arb-group { margin-bottom: 18px; }

/* Nombre y Apellido en la misma fila, con separador vertical */
.arb-field-row { display: flex; position: relative; }
.arb-field-row .arb-field { flex: 1; min-width: 0; }
.arb-field-row .arb-field + .arb-field::before {
    content: ""; position: absolute; top: 10px; bottom: 10px; left: 0;
    right: auto; width: 1px; height: auto; transform: scaleX(.5); background: var(--sep);
}
.arb-field-row + .arb-field::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 0;
    height: 1px; transform: scaleY(.5); background: var(--sep);
}

/* Ayuda de contraseña */
.arb-pass-hint {
    display: flex; align-items: center; gap: 8px;
    margin: -10px 4px 18px !important; font-size: 13px; color: var(--label2);
}
.arb-pass-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--label3); transition: background .2s ease; }
.arb-pass-hint.is-ok { color: #1B7A35; }
.arb-pass-hint.is-ok .arb-pass-dot { background: var(--arb-green); }

.arb-registro-login { margin: 18px 0 0 !important; text-align: center; font-size: 15px; }
.arb-registro-login a { color: var(--arb-blue) !important; font-weight: 600; text-decoration: none !important; }

/* Pantalla de éxito */
.arb-registro-ok { text-align: center; padding: 40px 8px 20px; }
.arb-registro-ok[hidden] { display: none; }
.arb-registro.is-done > header,
.arb-registro.is-done > form,
.arb-registro.is-done > .arb-registro-login { display: none; }
.arb-ok-icon {
    width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; background: var(--arb-green); color: #fff;
    box-shadow: 0 12px 30px rgba(52, 199, 89, .35);
    animation: arb-pop .45s cubic-bezier(.2, .9, .3, 1.3);
}
.arb-ok-icon svg { width: 40px; height: 40px; stroke-width: 3; }
.arb-registro-ok .arb-title { text-align: center !important; }
.arb-registro-ok .arb-sub { margin: 8px 0 22px !important; }
.arb-ok-spinner {
    display: inline-block; width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid rgba(0, 122, 255, .2); border-top-color: var(--arb-blue);
    animation: arb-spin .7s linear infinite;
}
@keyframes arb-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.arb-login .arb-registro-login { margin: 20px 0 0 !important; }