/* =========================================================
   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(15, 23, 42, .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 #e3e9f1;
    border-radius: 18px;

    box-shadow:
        0 28px 70px rgba(15, 23, 42, .22),
        0 6px 18px rgba(15, 23, 42, .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: #f5f7fa;

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

    color: #5c6878;

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

    cursor: pointer;

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

.upc-account-modal__close:hover {
    background: #edf2fa;
    color: #003EB2;
}


/* Icono */

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

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

    margin-bottom: 12px;

    background: #edf4ff;

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

    color: #003EB2;

    font-size: 25px;
}


/* Título */

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

    color: #17263a;

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

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

    color: #778397;

    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: #f9fbfd;

    border: 1px solid #e6ebf2;
    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 #e2e8f0;
    border-radius: 11px;

    color: #316aab;

    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: #24354b;

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

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

    color: #8490a1;

    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: #e6ebf1;
}

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

    padding: 0 10px;

    background: #ffffff;

    color: #a0a9b6;

    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, #003EB2, #0757D8);

    border: 1px solid #003EB2;

    color: #ffffff !important;

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

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

    transform: translateY(-1px);

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

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

    border: 1px solid #bfd0e8;

    color: #003EB2 !important;
}

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

    color: #003EB2 !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: #344357;

    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: #8090a4;

    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 #d7e0eb;
    border-radius: 12px;

    color: #263548;

    font-size: 13px;

    outline: none;

    box-shadow:
        inset 0 1px 2px rgba(16,24,40,.018);

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

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

    box-shadow:
        0 0 0 3px rgba(0,62,178,.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: #77869a;

    cursor: pointer;
}

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

    color: #003EB2;
}


/* 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: #647286;

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

    cursor: pointer;
}


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

    margin: 0;

    accent-color: #003EB2;
}


.upc-account-login__forgot {
    color: #0a61b6;

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

    text-decoration: none;
}

.upc-account-login__forgot:hover {
    color: #003EB2;

    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: #fff3f3;

    border: 1px solid #ffd6d8;

    color: #b4232c;
}

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

    background: #eef9f2;

    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,
            #003EB2,
            #0757D8
        );

    border: 1px solid #003EB2;
    border-radius: 22px;

    color: #ffffff;

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

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(0,62,178,.19);

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

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

    box-shadow:
        0 9px 20px rgba(0,62,178,.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: #344357;

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

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

    color: #8793a3;

    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: #778397;

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

    text-decoration: none;
}

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


/* =========================================================
   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 #cad7e6 !important;
    border-radius: 12px !important;

    color: #24354a !important;

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

    outline: none !important;

    box-shadow:
        inset 0 1px 2px rgba(16,24,40,.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: #1D70D6 !important;

    box-shadow:
        0 0 0 3px rgba(29,112,214,.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: #24354a !important;

    box-shadow:
        0 0 0 1000px #ffffff inset,
        0 0 0 3px rgba(29,112,214,.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: #7e90a7 !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: #f5f7fa !important;

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

    color: #52657c !important;

    box-shadow: none !important;
}


.upc-account-login__password-toggle:hover {

    background: #edf3fb !important;

    border-color: #d7e2f1 !important;

    color: #003EB2 !important;
}


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

.upc-account-login__submit {

    background:
        linear-gradient(
            135deg,
            #003EB2 0%,
            #0757D8 100%
        ) !important;

    border: 1px solid #003EB2 !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,
            #0048C9 0%,
            #0863EB 100%
        ) !important;

    color: #ffffff !important;

    border-color: #0048C9 !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: #e3e8ef !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: #98a3b2 !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: #64748b !important;

    font-size: 11.5px !important;
}


.upc-account-login__forgot {

    color: #0067ad !important;

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


.upc-account-login__forgot:hover {

    color: #003EB2 !important;
}


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

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

    height: 42px !important;

    background: #ffffff !important;

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

    color: #003EB2 !important;

    box-shadow: none !important;
}


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

    background: #f3f7ff !important;

    border-color: #9fbbe4 !important;

    color: #003EB2 !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: #edf4ff;

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

    color: #003EB2;

    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: #64748b;

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

    cursor: pointer;
}


.upc-account-login__remember-device
input {

    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: #003EB2;
}


/* 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: #718096 !important;

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

    cursor: pointer;

    box-shadow: none !important;
}


.upc-account-login__back:hover {

    color: #003EB2 !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;
}