/* ============================================================
   FORBER - Página de Cuenta v1.1
   ============================================================ */

:root {
    --fp-cyan:      #29b6c8;
    --fp-cyan-h:    #1fa0b0;
    --fp-dark:      #1a1a2e;
    --fp-dark-h:    #111124;
    --fp-text:      #333;
    --fp-muted:     #777;
    --fp-border:    #e0e0e0;
    --fp-bg:        #f7f8fa;
    --fp-white:     #fff;
    --fp-radius:    14px;
    --fp-shadow:    0 6px 32px rgba(0,0,0,0.08);
    --fp-tr:        all .22s ease;
}

/* ── Ocultar título duplicado y el título por defecto de WC ── */
.woocommerce-MyAccount-content h2,
.entry-title { /* algunos temas lo muestran */ }

/* ── Wrapper principal ── */
.forber-auth-wrapper {
    display: flex;
    align-items: stretch;
    max-width: 980px;
    margin: 40px auto 60px;
    background: var(--fp-white);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    overflow: hidden;
    border: 1px solid var(--fp-border);
}

/* ── Columnas ── */
.forber-col {
    flex: 1;
    padding: 52px 44px;
}

.forber-col-login   { background: var(--fp-white); border-right: 1px solid var(--fp-border); }
.forber-col-register{ background: var(--fp-bg); }

/* ── Separador central ── */
.forber-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    overflow: visible;
    position: relative;
    z-index: 5;
}
.forber-sep span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fp-white);
    border: 2px solid var(--fp-border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--fp-muted);
    white-space: nowrap;
    letter-spacing: 0;
}

/* ── Caja interior ── */
.forber-box { max-width: 390px; margin: 0 auto; }

/* ── Títulos ── */
.forber-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--fp-dark);
    margin: 0 0 6px;
    line-height: 1.2;
}
.forber-subtitle {
    font-size: .88rem;
    color: var(--fp-muted);
    margin: 0 0 28px;
}

/* ── Formulario ── */
.forber-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Campo ── */
.forber-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.forber-field label {
    font-size: .83rem;
    font-weight: 700;
    color: var(--fp-text);
    margin: 0;
}
.forber-field label .req { color: var(--fp-cyan); margin-left: 2px; }

.forber-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid var(--fp-border) !important;
    border-radius: 8px !important;
    font-size: .92rem !important;
    color: var(--fp-text) !important;
    background: var(--fp-white) !important;
    transition: var(--fp-tr) !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none;
}
.forber-input:focus {
    border-color: var(--fp-cyan) !important;
    box-shadow: 0 0 0 3px rgba(41,182,200,.14) !important;
}
.forber-input::placeholder { color: #bbb !important; }

/* ── Fila nombre+apellido ── */
.forber-row-fields { display: flex; gap: 12px; }

/* ── Contraseña con ojo ── */
.forber-pw-wrap { position: relative; }
.forber-pw-wrap .forber-input { padding-right: 46px !important; }
.forber-eye {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fp-muted);
    padding: 0;
    display: flex;
    align-items: center;
    transition: var(--fp-tr);
    line-height: 0;
}
.forber-eye svg { width: 19px; height: 19px; }
.forber-eye:hover, .forber-eye.active { color: var(--fp-cyan); }

/* ── Fila recuérdame / olvidé ── */
.forber-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.forber-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    color: var(--fp-text);
    cursor: pointer;
    margin: 0;
}
.forber-check input[type="checkbox"] { accent-color: var(--fp-cyan); width: 15px; height: 15px; }
.forber-forgot { font-size: .81rem; color: var(--fp-cyan); text-decoration: none; transition: var(--fp-tr); }
.forber-forgot:hover { color: var(--fp-cyan-h); text-decoration: underline; }

/* ── Botones ── */
.forber-btn {
    width: 100% !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    cursor: pointer;
    transition: var(--fp-tr) !important;
    letter-spacing: .4px;
    margin-top: 4px;
    display: block;
    text-align: center;
}
.forber-btn--login {
    background: var(--fp-cyan) !important;
    color: var(--fp-white) !important;
}
.forber-btn--login:hover {
    background: var(--fp-cyan-h) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(41,182,200,.35) !important;
}
.forber-btn--register {
    background: var(--fp-dark) !important;
    color: var(--fp-white) !important;
}
.forber-btn--register:hover {
    background: var(--fp-dark-h) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(26,26,46,.3) !important;
}

/* ── Términos ── */
.forber-terms {
    font-size: .77rem;
    color: var(--fp-muted);
    text-align: center;
    margin: 4px 0 0;
}
.forber-terms a { color: var(--fp-cyan); text-decoration: none; }
.forber-terms a:hover { text-decoration: underline; }

/* ── Nota informativa ── */
.forber-note {
    font-size: .84rem;
    color: var(--fp-muted);
    background: #e8f7f9;
    border-left: 3px solid var(--fp-cyan);
    padding: 10px 14px;
    border-radius: 5px;
    margin: 0;
}

/* ── Notices de WooCommerce ── */
.forber-auth-wrapper .woocommerce-error,
.forber-auth-wrapper .woocommerce-message,
.forber-auth-wrapper .woocommerce-info {
    margin-bottom: 20px !important;
    border-radius: 8px !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 820px) {
    .forber-auth-wrapper {
        flex-direction: column;
        margin: 20px 14px 40px;
    }
    .forber-col { padding: 36px 22px; }
    .forber-col-login { border-right: none; border-bottom: 1px solid var(--fp-border); }
    .forber-sep { display: none; }
    .forber-row-fields { flex-direction: column; }
}
@media (max-width: 480px) {
    .forber-col { padding: 26px 14px; }
    .forber-title { font-size: 1.25rem; }
    .forber-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}