/* =========================================================
   ULTRAPC - MODAL MI CUENTA
   ========================================================= */

.upc-account-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    visibility: hidden;
    opacity: 0;

    z-index: 999999;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.upc-account-modal.is-open {
    visibility: visible;
    opacity: 1;
}


/* Fondo */

.upc-account-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(29,21,36, .48);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* Ventana */

.upc-account-modal__dialog {
    position: relative;

    width: min(440px, calc(100vw - 32px));

    padding: 30px;

    background: #ffffff;

    border: 1px solid #efeae5;
    border-radius: 18px;

    box-shadow:
        0 28px 70px rgba(29,21,36, .22),
        0 6px 18px rgba(29,21,36, .08);

    text-align: center;

    transform: translateY(12px) scale(.985);

    transition: transform .22s ease;

    z-index: 1;
}

.upc-account-modal.is-open
.upc-account-modal__dialog {
    transform: translateY(0) scale(1);
}


/* Cerrar */

.upc-account-modal__close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #f9f8f6;

    border: 1px solid #efeae4;
    border-radius: 50%;

    color: #6f6a65;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.upc-account-modal__close:hover {
    background: #f6f3f1;
    color: #ea6d00;
}


/* Icono */

.upc-account-modal__icon {
    width: 58px;
    height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    background: #f8f6f4;

    border: 1px solid #eee8e2;
    border-radius: 50%;

    color: #ea6d00;

    font-size: 25px;
}


/* Título */

.upc-account-modal__dialog h2 {
    margin: 0 0 6px;

    color: #291f32;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.upc-account-modal__intro {
    margin: 0 0 22px;

    color: #8d8781;

    font-size: 13px;
}


/* Opciones */

.upc-account-modal__option {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "button button";

    gap: 5px 12px;

    padding: 16px;

    background: #fcfbfa;

    border: 1px solid #f1ece7;
    border-radius: 13px;

    text-align: left;
}

.upc-account-modal__option-icon {
    grid-area: icon;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #eee9e4;
    border-radius: 11px;

    color: #f38321;

    font-size: 16px;
}

.upc-account-modal__option-content {
    grid-area: content;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.upc-account-modal__option-content strong {
    color: #382d42;

    font-size: 13.5px;
    font-weight: 750;
}

.upc-account-modal__option-content span {
    margin-top: 2px;

    color: #98928d;

    font-size: 11.5px;
    line-height: 1.35;
}


/* Separador */

.upc-account-modal__divider {
    position: relative;

    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.upc-account-modal__divider::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;

    height: 1px;

    background: #f0ece7;
}

.upc-account-modal__divider span {
    position: relative;

    padding: 0 10px;

    background: #ffffff;

    color: #afaba7;

    font-size: 11px;
}


/* Botones */

.upc-account-modal__button {
    grid-area: button;

    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 9px;

    border-radius: 21px;

    font-size: 12.5px;
    font-weight: 750;

    text-decoration: none !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.upc-account-modal__button--primary {
    background: linear-gradient(135deg, #ea6d00, #f8851f);

    border: 1px solid #ea6d00;

    color: #ffffff !important;

    box-shadow: 0 6px 14px rgba(234,109,0,.18);
}

.upc-account-modal__button--primary:hover {
    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow: 0 8px 18px rgba(234,109,0,.24);
}

.upc-account-modal__button--secondary {
    background: #ffffff;

    border: 1px solid #dbd3cc;

    color: #ea6d00 !important;
}

.upc-account-modal__button--secondary:hover {
    background: #faf8f7;

    color: #ea6d00 !important;

    transform: translateY(-1px);
}


/* Bloqueo scroll */

body.upc-account-modal-open {
    overflow: hidden;
}


/* Solo desktop:
   móvil conserva navegación actual */

@media (max-width: 1199.98px) {
    .upc-account-modal {
        display: none !important;
    }
}


/* =========================================================
   ULTRAPC - LOGIN DIRECTO EN MODAL
   ========================================================= */

.upc-account-login {
    margin-top: 2px;

    text-align: left;
}


/* Campo */

.upc-account-login__field {
    margin-bottom: 14px;
}

.upc-account-login__field label {
    display: block;

    margin: 0 0 6px;

    color: #463c4f;

    font-size: 12px;
    font-weight: 700;
}


/* Input */

.upc-account-login__input-wrap {
    position: relative;

    display: flex;
    align-items: center;
}

.upc-account-login__input-wrap
> i {
    position: absolute;

    left: 14px;

    color: #98928c;

    font-size: 13px;

    pointer-events: none;
}

.upc-account-login__input-wrap
input[type="text"],

.upc-account-login__input-wrap
input[type="password"] {
    width: 100%;
    height: 46px;

    margin: 0;
    padding: 0 45px 0 39px;

    background: #ffffff;

    border: 1px solid #e8e1da;
    border-radius: 12px;

    color: #382e40;

    font-size: 13px;

    outline: none;

    box-shadow:
        inset 0 1px 2px rgba(28,21,35,.018);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.upc-account-login__input-wrap
input:focus {
    border-color: #f7ae6e;

    box-shadow:
        0 0 0 3px rgba(234,109,0,.08);
}


/* Mostrar contraseña */

.upc-account-login__password-toggle {
    position: absolute;

    right: 7px;

    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 8px;

    color: #8f8882;

    cursor: pointer;
}

.upc-account-login__password-toggle:hover {
    background: #f8f5f3;

    color: #ea6d00;
}


/* Extras */

.upc-account-login__extras {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 3px 0 14px;
}


.upc-account-login__remember {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin: 0;

    color: #7b756f;

    font-size: 11.5px;
    font-weight: 500;

    cursor: pointer;
}


.upc-account-login__remember
input {
    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: #ea6d00;
}


.upc-account-login__forgot {
    color: #eb740d;

    font-size: 11.5px;
    font-weight: 600;

    text-decoration: none;
}

.upc-account-login__forgot:hover {
    color: #ea6d00;

    text-decoration: underline;
}


/* Mensajes */

.upc-account-login__message {
    display: none;

    margin: 0 0 10px;
    padding: 9px 11px;

    border-radius: 9px;

    font-size: 11.5px;
    line-height: 1.35;
}

.upc-account-login__message.is-error {
    display: block;

    background: #fbf9f7;

    border: 1px solid #f0ebe5;

    color: #b4232c;
}

.upc-account-login__message.is-success {
    display: block;

    background: #f6f3f1;

    border: 1px solid #cee9d7;

    color: #167447;
}


/* Submit */

.upc-account-login__submit {
    position: relative;

    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0 18px;

    background:
        linear-gradient(
            135deg,
            #ea6d00,
            #f8851f
        );

    border: 1px solid #ea6d00;
    border-radius: 22px;

    color: #ffffff;

    font-size: 12.5px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(234,109,0,.19);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.upc-account-login__submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 9px 20px rgba(234,109,0,.24);
}

.upc-account-login__submit:disabled {
    cursor: wait;

    opacity: .78;
}


/* Spinner */

.upc-account-login__spinner {
    display: none;

    width: 16px;
    height: 16px;

    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        upc-account-spin .65s linear infinite;
}

.upc-account-login__submit.is-loading
.upc-account-login__submit-text {
    display: none;
}

.upc-account-login__submit.is-loading
.upc-account-login__spinner {
    display: block;
}


@keyframes upc-account-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Registro */

.upc-account-modal__register {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 4px 8px 0;

    text-align: center;
}

.upc-account-modal__register
strong {
    color: #463c4f;

    font-size: 13px;
    font-weight: 750;
}

.upc-account-modal__register
span {
    margin-top: 3px;

    color: #9a9590;

    font-size: 11.5px;
    line-height: 1.4;
}

.upc-account-modal__register
.upc-account-modal__button {
    width: 100%;

    margin-top: 12px;
}


/* Logged in */

.upc-account-modal__logged {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.upc-account-modal__logged
.upc-account-modal__button {
    width: 100%;
}

.upc-account-modal__logout {
    color: #8d8781;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.upc-account-modal__logout:hover {
    color: #ea6d00;
}


/* =========================================================
   ULTRAPC - MODAL MI CUENTA
   PULIDO VISUAL FORMULARIO LOGIN
   ========================================================= */


/* =========================================================
   1. INPUTS
   ========================================================= */

.upc-account-login__input-wrap
input[type="text"],

.upc-account-login__input-wrap
input[type="password"] {

    height: 46px !important;

    padding:
        0
        46px
        0
        43px !important;

    background: #ffffff !important;

    border: 1px solid #ddd8d3 !important;
    border-radius: 12px !important;

    color: #382d41 !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    outline: none !important;

    box-shadow:
        inset 0 1px 2px rgba(28,21,35,.025) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease !important;
}


.upc-account-login__input-wrap
input[type="text"]:focus,

.upc-account-login__input-wrap
input[type="password"]:focus {

    background: #ffffff !important;

    border-color: #f58f37 !important;

    box-shadow:
        0 0 0 3px rgba(245,143,55,.10) !important;
}


/* Autofill Chrome */

.upc-account-login__input-wrap
input:-webkit-autofill,

.upc-account-login__input-wrap
input:-webkit-autofill:hover,

.upc-account-login__input-wrap
input:-webkit-autofill:focus {

    -webkit-text-fill-color: #382d41 !important;

    box-shadow:
        0 0 0 1000px #ffffff inset,
        0 0 0 3px rgba(245,143,55,.08) !important;

    transition:
        background-color 9999s ease-out 0s !important;
}


/* =========================================================
   2. ICONOS IZQUIERDA
   ========================================================= */

.upc-account-login__input-wrap
> i {

    left: 15px !important;

    width: 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #9a928b !important;

    font-size: 13px !important;

    z-index: 2 !important;
}


/* =========================================================
   3. BOTÓN MOSTRAR CONTRASEÑA
   ========================================================= */

.upc-account-login__password-toggle {

    right: 7px !important;

    width: 32px !important;
    height: 32px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #f9f8f6 !important;

    border: 1px solid #f0ebe6 !important;
    border-radius: 8px !important;

    color: #6e6760 !important;

    box-shadow: none !important;
}


.upc-account-login__password-toggle:hover {

    background: #f7f4f1 !important;

    border-color: #ebe4dd !important;

    color: #ea6d00 !important;
}


/* =========================================================
   4. BOTÓN INICIAR SESIÓN
   Corrige texto oscuro heredado
   ========================================================= */

.upc-account-login__submit {

    background:
        linear-gradient(
            135deg,
            #ea6d00 0%,
            #f8851f 100%
        ) !important;

    border: 1px solid #ea6d00 !important;

    color: #ffffff !important;

    text-shadow: none !important;
}


.upc-account-login__submit
.upc-account-login__submit-text {

    color: #ffffff !important;

    font-size: 12.5px !important;
    font-weight: 750 !important;
}


.upc-account-login__submit:hover,
.upc-account-login__submit:focus {

    background:
        linear-gradient(
            135deg,
            #ff7802 0%,
            #f88f33 100%
        ) !important;

    color: #ffffff !important;

    border-color: #ff7802 !important;
}


.upc-account-login__submit:hover
.upc-account-login__submit-text,

.upc-account-login__submit:focus
.upc-account-login__submit-text {

    color: #ffffff !important;
}


/* =========================================================
   5. SEPARADOR "O"
   ========================================================= */

.upc-account-modal__divider {

    position: relative !important;

    width: 100% !important;
    height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 2px 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;

    border: 0 !important;
}


.upc-account-modal__divider::before {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    top: 50% !important;

    height: 1px !important;

    background: #eee9e4 !important;

    border: 0 !important;
}


.upc-account-modal__divider span {

    position: relative !important;

    width: auto !important;
    min-width: 28px !important;
    height: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 8px !important;

    background: #ffffff !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: #aaa5a0 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow: none !important;

    z-index: 2 !important;
}


/* =========================================================
   6. RECORDARME + RECUPERAR CONTRASEÑA
   ========================================================= */

.upc-account-login__extras {

    margin-top: 2px !important;
    margin-bottom: 14px !important;
}


.upc-account-login__remember {

    color: #7e7871 !important;

    font-size: 11.5px !important;
}


.upc-account-login__forgot {

    color: #e56b00 !important;

    font-size: 11.5px !important;
    font-weight: 650 !important;
}


.upc-account-login__forgot:hover {

    color: #ea6d00 !important;
}


/* =========================================================
   7. CREAR CUENTA
   ========================================================= */

.upc-account-modal__register
.upc-account-modal__button--secondary {

    height: 42px !important;

    background: #ffffff !important;

    border: 1px solid #dbd3cc !important;
    border-radius: 21px !important;

    color: #ea6d00 !important;

    box-shadow: none !important;
}


.upc-account-modal__register
.upc-account-modal__button--secondary:hover {

    background: #fbf9f7 !important;

    border-color: #cec2b5 !important;

    color: #ea6d00 !important;
}



/* =========================================================
   ULTRAPC - MODAL MI CUENTA
   WORDFENCE 2FA
   ========================================================= */


/* Hidden fiable */

.upc-account-login__step[hidden],
.upc-account-modal__divider[hidden],
.upc-account-modal__register[hidden] {
    display: none !important;
}


/* Al entrar al paso 2FA ocultamos visualmente
   los campos de credenciales, pero permanecen
   en el DOM para completar el login seguro. */

.upc-account-modal__dialog.is-two-factor
.upc-account-login__field:not(
    .upc-account-login__step--2fa
    .upc-account-login__field
),

.upc-account-modal__dialog.is-two-factor
.upc-account-login__extras {

    display: none !important;
}


/* Icono seguridad */

.upc-account-login__2fa-icon {

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        16px;

    background: #f8f6f4;

    border: 1px solid #eee8e2;
    border-radius: 50%;

    color: #ea6d00;

    font-size: 20px;
}


/* Código 2FA */

.upc-account-login__step--2fa
.upc-account-login__field {

    margin-bottom: 12px;
}


.upc-account-login__step--2fa
input[name="two_factor_code"] {

    font-size: 14px !important;
    font-weight: 650 !important;

    letter-spacing: .4px;
}


/* Recordar Wordfence */

.upc-account-login__remember-device {

    display: flex;
    align-items: center;

    gap: 8px;

    margin:
        2px
        0
        15px;

    color: #7e7871;

    font-size: 11.5px;
    font-weight: 500;

    cursor: pointer;
}


.upc-account-login__remember-device
input {

    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: #ea6d00;
}


/* Volver */

.upc-account-login__back {

    width: 100%;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin:
        8px
        0
        0;

    padding: 0;

    background: transparent !important;

    border: 0 !important;

    color: #8a847d !important;

    font-size: 11.5px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: none !important;
}


.upc-account-login__back:hover {

    color: #ea6d00 !important;
}


/* En 2FA compactamos algo el modal */

.upc-account-modal__dialog.is-two-factor {

    width: min(
        420px,
        calc(100vw - 32px)
    );
}


/* Mensaje 2FA */

.upc-account-modal__dialog.is-two-factor
.upc-account-login__message {

    margin-top: 3px;
}


/* Botón */

.upc-account-login__step--2fa
.upc-account-login__submit {

    margin-top: 3px;
}


/* =========================================================
   ULTRAPC - SEPARADOR "O" SIN RECUADRO
   ========================================================= */

.upc-account-modal__divider::before {
    background: linear-gradient(
        to right,
        #eee9e4 0,
        #eee9e4 calc(50% - 14px),
        transparent calc(50% - 14px),
        transparent calc(50% + 14px),
        #eee9e4 calc(50% + 14px),
        #eee9e4 100%
    ) !important;
}

.upc-account-modal__divider span {
    min-width: auto !important;
    padding: 0 3px !important;
    background: transparent !important;
    box-shadow: none !important;
}