@import url('bottom-nav.min.css');
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('loader-styles.min.css');
@import url('mudBlazor-custom.min.css');
@import url('custom-icons-styles.css');

@font-face {
    font-family: "Omnes_Bold";
    src: url("../fonts/omnes-semibold-webfont.ttf")
}

@font-face {
    font-family: "Omnes_Regular";
    src: url("../fonts/omnes-regular-webfont.ttf")
}

@font-face {
    font-family: "Omnes_Light";
    src: url("../fonts/omnes_light-webfont.ttf")
}

@font-face {
    font-family: "Poppins_Bold";
    src: url("../fonts/poppins-semibold.ttf")
}

@font-face {
    font-family: "Poppins_Regular";
    src: url("../fonts/poppins-regular.ttf")
}

@font-face {
    font-family: "Poppins_Light";
    src: url("../fonts/poppins-light.ttf")
}

:root {
    --background-card: #f8f9fb;
    --background-color: #eff1f9;
    --background-loader: #ddd;
    --black: #000000;
    --blue: #132872;
    --cyan: #479be6;
    --dark: #000c45;
    --dark-gray: #333333;
    --gray: #c2c2c2;
    --green-mint: #66D19E;
    --lavender: #ded9ff;
    --medium-gray: #ccc;
    --forte-gray: #838994;
    --light-gray: #e5e5e5;
    --pale-green: #ddffc2;
    --pastel-purple: #bba8f6;
    --soft-black: #202020;
    --soft-lavender: #f0eeff;
    --soft-red: #ff6b6b;
    --white: #fff;
    --mud-zindex-dialog: 1 !important
}

html, body, main, .container {
    max-width: 100% !important;
    /*overflow-x: hidden !important;*/
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth !important;
    /*background-color: #000000 !important;*/
    background-size: cover !important;
}

html, body {
    font-family: Poppins_Regular,sans-serif !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-image: url('/assets/background.png') !important;
    background-attachment: fixed;
}


h1:focus {
    outline: 0 !important
}

a, .btn-link {
    color: #0071c1
}

    a:hover {
        color: #DED9FF !important;
    }

    a.btn:hover {
        color: var(--dark-gray) !important;
    }

.btn-check:focus + .btn-primary, .btn-primary:focus {
    border-color: var(--lavender) !important;
    box-shadow: 0 0 0 .25rem rgba(132,123,255,.5) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--lavender) !important;
    color: var(--black) !important;
}

.btn-outline-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgb(211 151 255 / 44%) !important;
}

.btn-primary {
    color: #000000 !important;
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--lavender) !important;
}

.btn-outline-primary {
    color: #000000 !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}

.identity-primary-button {
    color: #000000 !important;
    background-color: #bba8f6 !important;
    border-color: var(--lavender) !important;
    opacity: 1 !important;
}

    .identity-primary-button:hover,
    .identity-primary-button:focus {
        color: #000000 !important;
        background-color: var(--lavender) !important;
        border-color: #ffffff !important;
    }

    .identity-primary-button:disabled {
        color: #000000 !important;
        background-color: #bba8f6 !important;
        border-color: var(--lavender) !important;
        opacity: .65 !important;
    }

.identity-public-shell {
    min-height: 100vh;
    width: 100%;
}

.identity-public-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.identity-public-logo-link {
    border-radius: 0 !important;
    line-height: 0;
}

.identity-public-logo {
    display: block;
    width: 300px;
    height: auto;
}

.identity-recovery-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.identity-recovery-glass {
    border-radius: 22px !important;
    flex: 0 0 min(100%, 520px) !important;
    max-width: 520px !important;
}

    .identity-recovery-glass form {
        display: flex;
        flex-direction: column;
    }

    .identity-recovery-glass p.font-medium {
        margin-bottom: 1rem;
    }

    .identity-recovery-glass hr {
        margin: 1rem 0 1.35rem;
    }

    .identity-recovery-glass .form-control,
    .identity-recovery-glass .btn {
        border-radius: 50px !important;
    }

    .identity-recovery-glass .form-control {
        height: 44px;
        min-height: 2.82rem;
    }

    .identity-recovery-glass .form-group {
        margin-bottom: 1rem;
    }

    .identity-recovery-glass label {
        line-height: 1.2;
        margin-bottom: .42rem;
    }

    .identity-recovery-glass .validation-message {
        display: block;
        margin-top: .45rem;
    }

    .identity-recovery-glass .identity-password-input {
        position: relative;
    }

        .identity-recovery-glass .identity-password-input .form-control {
            padding-right: 3rem !important;
        }

    .identity-recovery-glass .identity-password-toggle {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--lavender);
        display: inline-flex;
        height: 2.5rem;
        justify-content: center;
        padding: 0;
        position: absolute;
        right: .8rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2.5rem;
        z-index: 2;
    }

        .identity-recovery-glass .identity-password-toggle:hover,
        .identity-recovery-glass .identity-password-toggle:focus {
            color: var(--white);
            outline: 0;
        }

    .identity-recovery-glass .password-meter {
        margin-top: .25rem;
        padding: 1rem;
        border-radius: 22px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(222,217,255,.24);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    .identity-recovery-glass .password-meter__status {
        display: block;
        width: 100%;
        margin-bottom: .85rem;
        padding: .45rem .8rem;
        border-radius: 999px;
        color: var(--black);
        font-family: Poppins_Bold,sans-serif;
        font-size: .92rem;
        text-align: center;
    }

    .identity-recovery-glass .password-rule-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: .55rem;
    }

    .identity-recovery-glass .password-rule {
        border: 0 !important;
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        font-size: .92rem;
        line-height: 1.35;
    }

        .identity-recovery-glass .password-rule i {
            margin-top: .1rem;
        }

    .identity-recovery-glass .password-rule--valid {
        color: var(--green-mint) !important;
    }

    .identity-recovery-glass .password-rule--invalid {
        color: rgba(255,255,255,.78) !important;
    }

        .identity-recovery-glass .password-rule--invalid i {
            color: rgba(255,255,255,.38);
        }

    .identity-recovery-glass .password-meter__hint,
    .identity-recovery-glass .password-meter__warning {
        margin: .8rem 0 0;
        font-size: .82rem;
        line-height: 1.4;
    }

    .identity-recovery-glass .password-meter__hint {
        color: rgba(255,255,255,.74);
    }

    .identity-recovery-glass .password-meter__warning {
        color: #ffd6d6;
    }

    .identity-recovery-glass .veryweak-password {
        background-color: var(--soft-red);
    }

    .identity-recovery-glass .weak-password {
        background-color: #ff8738;
    }

    .identity-recovery-glass .medium-password {
        background-color: #e8a944;
    }

    .identity-recovery-glass .average-password {
        background-color: #ffd942;
    }

    .identity-recovery-glass .strong-password {
        background-color: var(--green-mint);
    }

.identity-register-panel {
    max-width: 620px !important;
}

.identity-field-space {
    margin-bottom: 1.25rem;
}

.identity-resend-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--lavender) !important;
    cursor: pointer;
    display: block;
    font-family: Poppins_Bold, sans-serif !important;
    font-size: .9rem;
    margin: 0 auto .75rem;
    padding: 0 !important;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    width: 100%;
}

.identity-resend-link:hover,
.identity-resend-link:focus {
    color: var(--white) !important;
    outline: 0;
}

.identity-resend-link:disabled {
    color: rgba(255, 255, 255, 0.35) !important;
    cursor: default;
    opacity: 1;
}

.identity-secondary-button {
    background: var(--white) !important;
    border-color: var(--white) !important;
    color: var(--black) !important;
    opacity: 1 !important;
}

    .identity-secondary-button:hover,
    .identity-secondary-button:focus {
        background: var(--soft-lavender) !important;
        border-color: var(--soft-lavender) !important;
        color: var(--black) !important;
    }

.identity-recovery-glass .form-card {
    display: flex;
    flex-direction: column;
    gap: 1.12rem;
    margin-bottom: 1.35rem;
}

    .identity-recovery-glass .form-card .form-group {
        margin-bottom: 0;
    }

.identity-biometric-step {
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.identity-biometric-title {
    color: var(--white);
    font-family: Poppins_Bold, sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
}

.identity-biometric-note {
    color: rgba(255,255,255,.78);
    font-size: .92rem;
    line-height: 1.45;
    margin: 0;
}

.identity-biometric-guidance {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(222,217,255,.24);
    border-radius: 22px;
    margin-top: .35rem;
    padding: 1rem;
}

.identity-biometric-guidance__title {
    color: var(--lavender);
    font-family: Poppins_Bold, sans-serif;
    font-size: .95rem;
    margin: 0 0 .85rem;
}

.identity-biometric-tips {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

    .identity-biometric-tips li {
        align-items: center;
        color: rgba(255,255,255,.76);
        display: flex;
        flex-direction: column;
        font-size: .72rem;
        gap: .45rem;
        line-height: 1.25;
        min-width: 0;
        text-align: center;
    }

    .identity-biometric-tips img {
        background: var(--white);
        border: 2px solid rgba(222,217,255,.72);
        border-radius: 50%;
        box-shadow: 0 0 12px rgba(222,217,255,.24);
        height: 72px;
        object-fit: contain;
        padding: .2rem;
        width: 72px;
    }

    .identity-biometric-tips span {
        color: rgba(255,255,255,.78);
    }

.identity-check-row {
    align-items: center;
    color: var(--white);
    display: flex;
    gap: .55rem;
    font-family: Poppins_Bold,sans-serif;
    font-size: .92rem;
    line-height: 1.25;
    margin-top: .2rem;
}

.identity-animated-check {
    display: inline-flex;
    flex: 0 0 auto;
    height: 22px;
    margin: 0;
    position: relative;
    width: 22px;
}

    .identity-animated-check input {
        height: 22px;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 22px;
        z-index: 2;
    }

    .identity-animated-check svg {
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(222,217,255,.85);
        border-radius: 50%;
        height: 22px;
        stroke: var(--blue);
        stroke-dasharray: 24;
        stroke-dashoffset: 24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3;
        transition: stroke-dashoffset .22s ease, background .2s ease, box-shadow .2s ease;
        width: 22px;
    }

    .identity-animated-check input:checked + svg {
        background: var(--soft-lavender);
        box-shadow: 0 0 0 3px rgba(222,217,255,.22);
        stroke-dashoffset: 0;
    }

.identity-terms-button {
    background: transparent;
    border: 0;
    color: var(--white);
    font-family: Poppins_Bold,sans-serif;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .identity-terms-button:hover,
    .identity-terms-button:focus {
        color: var(--lavender);
        outline: 0;
    }

.identity-dactilar-input {
    position: relative;
}

.identity-dactilar-tooltip {
    align-items: center;
    color: var(--lavender);
    cursor: help;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    z-index: 4;
}

.identity-dactilar-tooltip__content {
    background: var(--soft-lavender);
    border-radius: 2px;
    bottom: calc(100% + 8px);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    color: var(--black);
    display: none;
    left: 50%;
    padding: .35rem;
    position: absolute;
    transform: translateX(-50%);
    width: 180px;
    z-index: 20;
}

.identity-dactilar-tooltip:hover .identity-dactilar-tooltip__content,
.identity-dactilar-tooltip:focus .identity-dactilar-tooltip__content {
    display: block;
}

.identity-dactilar-tooltip__title {
    display: block;
    font-family: Poppins_Bold,sans-serif;
    font-size: .72rem;
    line-height: 1.2;
    margin-bottom: .25rem;
    text-align: center;
}

.identity-dactilar-tooltip__content img {
    display: block;
    width: 100%;
}

.identity-legal-backdrop {
    background: rgba(0,0,0,.7);
    inset: 0;
    position: fixed;
    z-index: 1050;
}

.identity-legal-modal {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    color: var(--black);
    left: 50%;
    max-height: min(760px, 82vh);
    max-width: min(620px, calc(100vw - 28px));
    overflow: hidden;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1051;
}

.identity-legal-modal__header {
    align-items: center;
    background: var(--blue);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    padding: .9rem 1.15rem;
}

    .identity-legal-modal__header h2 {
        font-family: Poppins_Bold,sans-serif;
        font-size: 1.15rem;
        margin: 0;
    }

.identity-legal-modal__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--white);
    display: inline-flex;
    font-size: 1.2rem;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

    .identity-legal-modal__close::before {
        content: "×";
        line-height: 1;
    }

.identity-legal-modal__body {
    max-height: calc(min(760px, 82vh) - 58px);
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

    .identity-legal-modal__body h3,
    .identity-legal-modal__body h4 {
        font-family: Poppins_Bold,sans-serif;
        text-transform: uppercase;
    }

@media (max-width: 600px) {
    .identity-register-panel {
        max-width: calc(100vw - 24px) !important;
    }

    .identity-biometric-step {
        gap: .85rem;
    }

    .identity-biometric-guidance {
        padding: .85rem;
    }

    .identity-biometric-tips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .identity-biometric-tips img {
            height: 64px;
            width: 64px;
        }

    .identity-dactilar-tooltip {
        right: -24px;
    }

    .identity-check-row {
        align-items: flex-start;
        font-size: .88rem;
    }
}

.username-status {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .55rem;
    font-family: Poppins_Bold, sans-serif;
    font-size: .84rem;
}

.username-status--checking {
    color: var(--lavender);
}

.username-status--available {
    color: var(--green-mint);
}

.username-status--taken {
    color: var(--soft-red);
}

.username-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .55rem;
}

.username-suggestions__label {
    color: rgba(255,255,255,.72);
    font-size: .82rem;
}

.username-suggestion-chip {
    background: rgba(222,217,255,.12);
    border: 1px solid rgba(222,217,255,.32);
    border-radius: 999px;
    color: var(--lavender);
    font-family: Poppins_Bold, sans-serif;
    font-size: .8rem;
    padding: .3rem .65rem;
}

    .username-suggestion-chip:hover,
    .username-suggestion-chip:focus {
        background: rgba(222,217,255,.22);
        color: var(--white);
        outline: 0;
    }

.identity-security-image-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    gap: .65rem;
    margin: .75rem 0;
}

.identity-security-image {
    aspect-ratio: 1;
    background: rgba(255,255,255,.08);
    border: 2px solid transparent;
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
    padding: .25rem;
}

    .identity-security-image.active {
        border-color: var(--lavender);
        box-shadow: 0 0 0 2px rgba(187,168,246,.24);
    }

    .identity-security-image img {
        border-radius: 14px;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

@media (max-width: 576px) {
    .identity-security-image-grid {
        grid-template-columns: repeat(3, minmax(64px, 1fr));
    }
}

@media (max-width: 600px) {
    .identity-public-header {
        padding-top: 28px;
    }

    .identity-public-logo {
        width: min(260px, 70vw);
    }
}

.card-position-center {
    height: calc(85vh - var(--mud-appbar-height)) !important;
}

.contact-card:hover {
    border: 1px solid var(--lavender);
}

.contactos-list {
    background: rgba(255, 255, 255, .075) !important;
    border: 1px solid rgba(222,217,255,.18) !important;
    border-radius: 20px !important;
    max-width: 500px !important;
    margin: 10px auto !important;
}

.content {
    padding-top: 1.1rem;
    margin-bottom: 60px;
}

#reporteGenerado {
    position: relative;
}

#transaction-invoice {
    background-color: var(--lavender);
    border-radius: 20px;
}

#transaction-invoice-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.transaction-invoice-mark {
    opacity: .3;
    background-image: url(../assets/logoHorizontalBlancoSF.png);
    background-repeat: repeat;
    background-size: 252px;
    background-position-x: 115%;
    background-position-y: 30%;
}

#transaction-invoice-container {
    position: relative;
    z-index: 1;
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
    background: linear-gradient(180deg, rgba(222,217,255,.98) 0%, rgba(214,208,255,.98) 100%) !important;
    border-radius: 32px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.42);
    box-shadow: 0 20px 46px rgba(19,40,114,.14);
}

#transaction-invoice {
    background: linear-gradient(180deg, rgba(222,217,255,.99) 0%, rgba(216,210,255,.99) 100%);
    border-radius: 26px;
}

#transaction-invoice-mark {
    z-index: 2;
    border-radius: 32px;
    pointer-events: none;
}

.transaction-invoice-mark {
    opacity: .22;
    background-size: 240px;
    background-position-x: 108%;
    background-position-y: 12%;
}

.transaction-receipt {
    position: relative;
    padding: 1.7rem 1.2rem 1.3rem !important;
    overflow: hidden;
}

.transaction-receipt__brand {
    margin-bottom: .2rem;
}

.transaction-receipt__title {
    max-width: 420px;
    margin-inline: auto;
    line-height: 1.15;
}

.transaction-receipt__success {
    margin: .45rem 0 .25rem;
}

.transaction-receipt__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    max-width: 460px;
    margin: 0 auto 1rem;
    padding: 1.2rem 1.05rem 1rem;
    text-align: center;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 26px;
    box-shadow: 0 16px 32px rgba(19,40,114,.08);
}

.transaction-receipt__eyebrow {
    font-family: Poppins_Bold,sans-serif;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5b6480;
    width: 100%;
    text-align: center;
}

.transaction-receipt__amount {
    font-family: Omnes_Bold,Poppins_Bold,sans-serif;
    font-size: clamp(2.35rem, 11vw, 3.8rem);
    line-height: .95;
    color: var(--blue);
    width: 100%;
    text-align: center;
    word-break: break-word;
}

.transaction-receipt__beneficiary {
    max-width: 420px;
    width: 100%;
    font-family: Poppins_Bold,sans-serif;
    font-size: clamp(1.15rem,4.3vw,1.55rem);
    line-height: 1.25;
    color: var(--dark-gray);
    text-align: center;
    word-break: break-word;
}

.transaction-receipt__meta {
    max-width: 420px;
    width: 100%;
    font-size: .96rem;
    line-height: 1.28;
    color: #4f5872;
    text-align: center;
}

.transaction-receipt__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: .42rem .9rem;
    border-radius: 999px;
    background: var(--lavender);
    color: var(--blue);
    font-family: Poppins_Bold,sans-serif;
    font-size: .92rem;
    text-align: center;
    word-break: break-word;
}

.transaction-receipt__message {
    max-width: 460px;
    margin: 0 auto .8rem;
    padding: .75rem .9rem;
    background: rgba(255,255,255,.38);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 18px;
    color: #44506b;
    font-size: .94rem;
    line-height: 1.35;
    text-align: center;
}

.transaction-receipt__details {
    width: 100%;
}

.transaction-receipt__subtitle {
    margin-top: .25rem !important;
}

.transaction-receipt__location-icon {
    margin: .2rem 0 .15rem;
}

.transaction-receipt__location-title {
    margin-bottom: .75rem !important;
}

#transaction-invoice .invoice {
    width: 100%;
    max-width: 470px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 24px;
    overflow: hidden;
}

    #transaction-invoice .invoice td {
        padding: .6rem 0;
    }

    #transaction-invoice .invoice .invoice-items {
        width: 100%;
    }

        #transaction-invoice .invoice .invoice-items td {
            width: auto;
            padding: .7rem .2rem;
            border-top: 1px solid rgba(19,40,114,.14);
            vertical-align: top;
        }

        #transaction-invoice .invoice .invoice-items tr:first-child td {
            border-top: none;
        }

        #transaction-invoice .invoice .invoice-items td:first-child {
            width: 43%;
            padding-right: .7rem;
            color: #5b6480;
            font-family: Poppins_Regular,sans-serif;
        }

        #transaction-invoice .invoice .invoice-items td:last-child {
            color: var(--dark-gray);
            font-family: Poppins_Bold,sans-serif;
            word-break: break-word;
        }

        #transaction-invoice .invoice .invoice-items td:only-child {
            width: 100% !important;
            padding-right: 0;
            font-family: Poppins_Regular,sans-serif;
        }

@media print {
    @page {
        margin: 8mm;
    }

    html,
    body {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: var(--white) !important;
        background-image: none !important;
        background-attachment: initial !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

        body#editor {
            margin: 0 !important;
            padding: 0 !important;
        }

    .watermark {
        display: none !important;
    }

    #transaction-invoice-container {
        overflow: visible !important;
        box-shadow: none !important;
    }

    .transaction-receipt {
        padding: 1.2rem 1rem .95rem !important;
    }

    .transaction-receipt__title,
    .transaction-receipt__success,
    .transaction-receipt__message,
    .transaction-receipt__hero {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .transaction-receipt__hero {
        margin-bottom: .75rem !important;
        padding: 1rem .9rem .85rem !important;
    }

    #transaction-invoice .invoice {
        max-width: 100% !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

        #transaction-invoice .invoice .invoice-items tr {
            break-inside: avoid;
            page-break-inside: avoid;
        }
}

.valid.modified:not([type=checkbox]) {
    border: 1px solid var(--green-mint) !important;
}

.info-mark {
    font-weight: bolder;
    background: var(--pastel-purple);
    color: var(--white);
    padding-right: 5px;
    font-size: xx-large;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -15px;
    right: -15px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
}


.invalid {
    border: 1px solid var(--soft-red) !important
}

.input-search {
    background-color: var(--black) !important;
    box-sizing: content-box;
    border: 2px solid var(--lavender) !important;
    border-radius: 20px !important;
    color: var(--white);
    padding: 10px !important;
    width: 100%;
}

input::placeholder {
    color: var(--gray) !important;
    text-transform: initial !important;
}

input::-webkit-input-placeholder {
    color: var(--gray) !important;
    text-transform: initial !important;
}

.validation-message {
    color: var(--soft-red);
}

body {
    height: 100vh !important
}

#blazor-error-ui {
    background: var(--lavender) !important;
    color: var(--black) !important;
    bottom: 0 !important;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2) !important;
    display: none;
    left: 0 !important;
    padding: .6rem 1.25rem .7rem 1.25rem !important;
    position: fixed !important;
    width: 100% !important;
    z-index: 1000 !important
}

    #blazor-error-ui .dismiss {
        cursor: pointer !important;
        position: absolute !important;
        right: .75rem !important;
        top: .5rem !important;
        color: var(--cyan) !important
    }

    #blazor-error-ui a:visited {
        color: var(--cyan) !important
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem,#b32121 !important;
    padding: 1rem 1rem 1rem 3.7rem !important;
    color: #fff !important
}

    .blazor-error-boundary::after {
        content: "¡Ups! ha ocurrido un error que no pudimos controlar." !important
    }

.input-group.with-icon > i {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    position: absolute;
    z-index: 3;
    top: 30%
}

.input-group.with-icon > i, .input-group.with-icon.icon-right > i {
    right: .7rem
}

.input-icon-information {
    width: 0;
    height: 35px;
    margin-left: 1.5px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--gray)
}

[data-md-tooltip] {
    position: initial
}

    [data-md-tooltip]:before {
        content: attr(data-md-tooltip);
        position: absolute;
        bottom: -35px;
        left: 50%;
        padding: 5px;
        transform: translateX(-50%) scale(0);
        transition: transform .2s ease-in-out;
        transform-origin: top;
        background: var(--lavender);
        color: #fff;
        border-radius: 2px;
        font-size: 12px;
        font-family: 'Poppins_Bold';
        font-weight: 400;
        text-align: center;
        color: black;
    }

    [data-md-tooltip]:hover:before {
        transform: translateX(60%) translateY(-50%) scale(1)
    }

    [data-md-tooltip].md-tooltip--right:before {
        left: auto;
        right: -10px;
        bottom: auto;
        top: 50%;
        transform: translate(100%,-50%) scale(0);
        transform-origin: left center
    }

    [data-md-tooltip].md-tooltip--right:hover:before {
        transform: translate(100%,-50%) scale(1)
    }

    [data-md-tooltip].md-tooltip--left:before {
        left: -15px;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-100%,-50%) scale(0);
        transform-origin: right center
    }

    [data-md-tooltip].md-tooltip--left:hover:before {
        transform: translate(-100%,-50%) scale(1)
    }

    [data-md-tooltip].md-tooltip-disabled:before {
        display: none
    }

.md-tooltip--top:before {
    bottom: auto;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom center;
    width: 200px
}

.material-icons {
    cursor: pointer
}

    .material-icons:hover {
        color: #001042
    }

a {
    color: #07c
}

    a.navbar-brand {
        white-space: normal;
        text-align: center;
        word-break: break-all
    }

.align-items-center > .mud-input-control-input-container {
    width: 350px;
    align-items: center
}

.auto-resize-textarea {
    resize: none;
    overflow: scroll;
    height: fit-content;
    font-size: 12px
}

.avatar {
    width: 140px;
    height: 140px;
    box-shadow: 0 .25rem .75rem var(--white)
}

.background-black {
    background: var(--black) !important;
}

.background-pastel-purple {
    background: var(--pastel-purple) !important;
}

.background-card {
    background: #00000069 !important;
    border-radius: 20px;
}


.background-lavender {
    background: var(--lavender) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.background-pale-green {
    background: var(--pale-green) !important;
}

.background-soft-lavender {
    background: var(--soft-lavender) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.background-medium-gray {
    background: var(--white);
    border: 2px solid var(--gray);
}

.background-white {
    background-color: var(--white);
    -webkit-box-shadow: 0 0 23px -5px #000;
    -moz-box-shadow: 0 0 23px -5px #000;
    box-shadow: 0 0 23px -5px #000
}

.background-white-no-border {
    background: var(--white)
}

.background-dark-gray {
    background-color: var(--dark-gray) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.background-cristal-clear {
    background: rgba(255, 255, 255, .075) !important;
    border: 1px solid rgba(222,217,255,.18) !important;
}

.background-transparent-40 {
    background-color: var(--black-transparent-40) !important;
    -webkit-box-shadow: 0 0 23px -5px #000 !important;
    -moz-box-shadow: 0 0 23px -5px #000 !important;
    box-shadow: 0 0 23px -5px #000 !important;
}

.background-dark-gray-no-border {
    background: var(--dark-gray)
}

.banner {
    /*background: #000000;*/
    left: 0%;
    min-height: 300px;
    position: absolute;
    top: 0%;
    width: 100%;
    z-index: -99999
}

.bloqueo-item {
    max-width: 400px !important;
    min-width: 400px !important;
    padding: 20px !important
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5 !important;
}

.border-bottom-info {
    border-bottom: 1px solid var(--gray) !important;
}

.border-circle {
    border: 1px var(--lavender) solid;
    border-radius: 100%
}

.border-lavender-circle {
    border: 1px var(--lavender) solid;
    border-radius: 100%
}

.border-radius-standard {
    border-radius: 20px !important
}

.border-radius-transaction {
    border-top-right-radius: 20px !important;
    border-top-left-radius: 20px !important;
}

.border-radius-50 {
    border-radius: 50px !important;
    border: 2px solid var(--lavender) !important;
}

.border-radius-20 {
    border-radius: 20px !important;
}

.border-radius-10 {
    border-radius: 10px !important;
}


.border-top {
    border-top: 1px solid #e5e5e5
}

.box-veronika {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #318fe4;
    border-top: 0;
    text-align: left;
    cursor: default;
    border-radius: 5px
}

.box-veronika__title {
    color: #318fe4;
    font-weight: bold
}

.box-veronika__inner {
    position: relative;
    overflow: hidden;
    top: -50px;
    padding-top: 50px;
    margin-bottom: -10px
}

.box-veronika__icon-outer {
    display: block;
    position: relative;
    margin: 0 40px -20px auto;
    width: 90px;
    text-align: center
}

    .box-veronika__icon-outer::before, .box-veronika__icon-outer::after {
        content: '';
        position: absolute;
        top: 0;
        border-bottom: 2px solid #318fe4;
        width: 100vw
    }

    .box-veronika__icon-outer::before {
        left: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    .box-veronika__icon-outer::after {
        right: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

.box-veronika__icon {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    font-size: 30px;
    line-height: 1;
    background: linear-gradient(0deg,transparent,transparent);
    background: -webkit-linear-gradient(0deg,#318fe4,#2d993a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #318fe4
}

.box-veronika__main {
    padding: 30px 25px
}

.box-veronika__icon-sm {
    font-size: 22px
}

.box-veronika__icon-md {
    font-size: 35px
}

@media(max-width: 767px) {
    .box-veronika {
        max-width: 370px;
        margin-left: auto;
        margin-right: auto
    }
}

@media(min-width: 576px) {
    .box-veronika__title {
        max-width: 95%
    }
}

@media(min-width: 992px) {
    .box-veronika__main {
        padding: 35px 20px
    }
}

@media(min-width: 1200px) {
    .box-veronika__inner {
        top: -35px;
        padding-top: 35px
    }

    .box-veronika__main {
        padding: 30px 50px
    }

    .box-veronika__icon {
        font-size: 40px
    }

    .box-veronika__icon-sm {
        font-size: 28px
    }

    .box-veronika__icon-md {
        font-size: 45px
    }
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05)
}

.btn .btn-outline-primary a {
    border-radius: 50px !important
}

/*.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac
}*/

.btn-link.nav-link:focus {
    outline: #000 auto 1px
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit
}

.card-container {
    display: flex;
    flex-direction: row
}

.checkbox {
    --border: #d1d6ee;
    --border-hover: #bbc1e1;
    --border-active: #001042;
    --tick: #fff;
    position: relative
}

    .checkbox input, .checkbox svg {
        width: 21px;
        height: 21px;
        display: block
    }

    .checkbox input {
        -webkit-appearance: none !important;
        -moz-appearance: none;
        position: relative !important;
        outline: 0;
        background: var(--white);
        border: 0;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer;
        border-radius: 4px !important;
        transition: box-shadow .3s;
        box-shadow: inset 0 0 0 var(--s,1px) var(--b,var(--border))
    }

        .checkbox input:hover {
            --s: 2px;
            --b: var(--border-hover)
        }

        .checkbox input:checked {
            --b: var(--border-active)
        }

    .checkbox svg {
        pointer-events: none;
        fill: none;
        stroke-width: 2px;
        stroke-linecap: unset;
        stroke-linejoin: round;
        stroke: var(--stroke,var(--border-active));
        position: absolute;
        top: 0;
        left: 0;
        width: 21px;
        height: 21px;
        transform: scale(var(--scale,1)) translateZ(0)
    }

    .checkbox.path input:checked {
        --s: 2px;
        transition-delay: .4s
    }

        .checkbox.path input:checked + svg {
            --a: 16.1 86.12;
            --o: 102.22
        }

    .checkbox.path svg {
        stroke-dasharray: var(--a,86.12);
        stroke-dashoffset: var(--o,86.12);
        transition: stroke-dasharray .6s,stroke-dashoffset .6s
    }

    .checkbox.bounce {
        --stroke: var(--tick)
    }

        .checkbox.bounce input:checked {
            --s: 11px
        }

            .checkbox.bounce input:checked + svg {
                animation: bounce .4s linear forwards .2s
            }

        .checkbox.bounce svg {
            --scale: 0
        }

    .checkbox.path {
        display: inline-flex;
        margin: 5px
    }

.color-black {
    color: var(--black) !important;
}

.color-blue {
    color: var(--blue) !important;
}

.color-cyan {
    color: var(--cyan);
}

.color-forte-gray {
    color: var(--forte-gray);
}

.color-gray {
    color: var(--gray);
}

.color-green-mint {
    color: var(--green-mint) !important;
}

.color-lavender {
    color: var(--lavender) !important;
}

.color-medium-gray {
    color: var(--medium-gray) !important;
}

.color-pale-green {
    color: var(--pale-green) !important;
}

.color-soft-red {
    color: var(--soft-red) !important;
}

.color-white {
    color: var(--white) !important;
}

.container {
    max-width: 960px !important;
}

.content-bill {
    padding: 0 !important;
    max-width: 50% !important;
    margin: 0 auto
}

.content-block {
    padding: 0 0 20px;
}

.close {
    color: #929296;
    padding: 0;
    font-weight: 400;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    font-size: 50px !important
}

.cursor-pointer {
    cursor: pointer !important
}

.detail-container {
    background: var(--background-card)
}

.eye {
    cursor: pointer;
    height: 18px;
    left: 80%;
    top: 60%;
    position: absolute;
    margin: 0 0 -500px 0;
    max-width: 100px
}

.flag-info {
    border-radius: 100%;
    width: 25px;
    height: 25px;
}

.font-bold {
    font-family: Poppins_Bold !important
}

.font-large {
    font-size: 40px
}

.font-medium {
    font-size: 20px
}

.font-regular {
    font-family: Poppins_Regular
}

.font-small {
    font-size: 15px
}

.form-control {
    background-color: var(--dark-gray) !important;
    color: white !important;
    border-radius: 20px !important;
}

    .form-control:focus {
        border-color: #07c;
        box-shadow: 0 0 0 .25rem rgba(132, 123, 255, 0.5) !important;
        background-color: var(--dark-gray) !important;
        color: var(--white) !important;
    }

    .form-control:disabled, .form-control[readonly] {
        background-color: var(--dark-gray) !important;
        border: unset !important;
    }

.footer {
    color: var(--white) !important;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px
}

    .footer .container {
        background-color: transparent !important
    }

header {
    display: flex !important;
    justify-content: center !important
}

    header img {
        width: 200px;
        margin: 20px
    }

.header-image {
    height: 60px !important;
    margin-bottom: 10px;
}

.highlight-text {
    color: var(--black);
    background-color: var(--pastel-purple);
    font-weight: bold;
    border-radius: 4px;
    padding: 0 2px;
}

hr {
    height: 1px !important;
    background-color: var(--white) !important;
    border: 0 !important
}

.img-circle {
    border-radius: 50%
}

#img-success {
    display: none;
}

input {
    border: 1px solid var(--lavender) !important
}

input, select, button, a {
    border-radius: 50px !important
}

    input.mud-input-slot, select {
        border-radius: 10px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        border: 1px solid var(--soft-lavender) !important;
        background-color: var(--soft-lavender) !important;
    }

    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    input[type=number] {
        -moz-appearance: textfield
    }

    input:invalid {
        box-shadow: 0 0 2px 1px red
    }

    input:focus:invalid {
        box-shadow: none
    }

.instruction-container {
    /* border: 1px solid var(--gray); */
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    max-width: 340px;
    padding: 20px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 10px auto;
    background-color: var(--dark-gray);
}

    .instruction-container ul {
        margin: 0;
        list-style: none
    }

    .instruction-container li {
        margin: 0;
        list-style: none;
        width: 100% !important
    }

    .instruction-container img {
        width: 80px;
        margin-right: 10px
    }

    .instruction-container span {
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        font-family: Poppins_Light;
        font-size: 9pt;
        text-align: left;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        font-weight: bold
    }

    .instruction-container hr {
        border: 1px solid var(--medium-gray);
        margin: 5px;
        width: 100%
    }

.invoice {
    text-align: left;
    width: 80%
}

    .invoice td {
        padding: 5px 0
    }

    .invoice .invoice-items {
        width: 100%
    }

        .invoice .invoice-items td {
            border-top: var(--black) 1px solid;
            padding: 5px;
        }

.label-lavender label {
    color: var(--lavender) !important;
}


.left-image {
    width: 85%;
    height: 100%;
}

.line-height-small {
    line-height: 20px;
}

.line-height-large {
    line-height: 45px;
}

.list-image {
    margin-bottom: 20px !important;
    margin-top: 40px;
    display: flex !important;
    flex-direction: column;
}

    .list-image li {
        margin: 0;
        padding: 10px 0 2px 0px;
        list-style: none;
        /*background-image: url('../assets/list.png');*/
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 17px;
        display: flex;
    }

.login-info {
    border-radius: 50px !important;
    background: #00000054 !important;
    border: 4px solid var(--lavender) !important;
    color: var(--white) !important;
}

.main {
    background: var(--dark-gray) !important;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(10,76,137,.08)
}

.margin-auto-top {
    margin: auto 0 0 0 !important
}

.margin-suggestions {
    margin-top: 0.5rem !important
}

.material-icons {
    cursor: pointer
}

    .material-icons:hover {
        color: var(--lavender);
    }

.max-width-130 {
    max-width: 130px
}

.max-width-350 {
    max-width: 350px
}

.md-tooltip--top:before {
    top: -35px;
    bottom: auto;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom center;
    width: 200px
}

.min-height-product {
    min-height: 120px
}

.min-width-130 {
    min-width: 130px !important
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem 2rem 0 2rem !important
}

.modal-header {
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    height: 56px;
    box-shadow: 0 8px 8px -8px rgba(7,7,7,.16);
    display: flex;
    align-content: center;
    background: var(--lavender);
    color: var(--black);
}

.mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center
}

.nav-info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: .5rem
}

    .nav-info img {
        max-width: 200px
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac
}

.nav-menu-list-movil {
    padding: 0;
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
}

.notificaciones:hover {
    color: #6a1b9a !important;
}

.not-connection-page {
    background: #000000 !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

    .not-connection-page .ilustration {
        width: 300px;
        height: 300px
    }

.not-found-page {
    /*background: #000000 !important;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

    .not-found-page .ilustration {
        width: 500px;
        height: 250px
    }

.number-panapay-input {
    padding-top: 10px;
    padding-bottom: 20px;
    max-width: 270px;
    min-width: 40px;
}

.number-panapay-input {
    padding-top: 10px;
    padding-bottom: 20px;
    max-width: 270px;
    min-width: 40px;
}

.option-style {
    background: var(--blue);
    border-radius: 20px;
    display: grid;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-content: center
}

.opciones-usuario {
    text-align: right;
    font-size: 15px;
    padding: 0 !important;
    margin: 0;
    line-height: 0;
    min-width: 293px
}

.field-wrap {
    margin-right: 6px;
}

.otp-field-container {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.otp-box-input {
    background: white !important;
    color: black !important;
    border-radius: unset !important;
    width: 42px;
    height: 50px;
    font-size: 22px;
    text-align: center;
    border: unset !important;
}

    .otp-box-input:focus {
        border-color: #07c;
        box-shadow: 0 0 0 .25rem rgba(132, 123, 255, 0.5) !important;
        /*background-color: var(--dark-gray) !important;*/
        /*color: var(--white) !important;*/
    }

    .otp-box-input:disabled, .otp-box-input[readonly] {
        /*background-color: var(--dark-gray) !important;*/
        border: unset !important;
    }


::selection {
    background-color: var(--lavender);
    color: var(--black);
}

::-moz-selection {
    background-color: var(--lavender);
    color: var(--black);
}

select option:checked {
    background-color: var(--lavender); /* Green background */
    color: var(--black); /* White text color */
}

input:focus-visible {
    outline: none; /* Remove default outline */
    border: 2px solid #28a745; /* Custom border */
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25); /* Custom box shadow */
}

.panel-heading {
    display: flex
}

    .panel-heading img {
        width: 100px;
        margin-right: 7px
    }

.product-card {
    padding: 20px;
    width: 430px;
    border-radius: 20px;
    border: 1px solid var(--white);
    box-shadow: 0 4px 32px rgba(10,76,137,.08)
}

    .product-card:hover {
        border: 1px solid var(--lavender);
    }

.product-detail-container {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column
}

.product-detail-card {
    flex-direction: row;
    justify-content: space-between !important;
    padding: 20px !important;
    border-radius: 20px !important;
    /*border: 1px solid var(--white) !important;*/
    box-shadow: 0 4px 32px rgba(10,76,137,.08)
}

.product-info-inner-table {
    color: black !important;
    box-shadow: 0 .25rem .75rem #8787875e;
    border-radius: 21px;
    background-color: #f0eeff;
}

.reload {
    margin-left: 20px
}

    .reload:hover {
        color: var(--cyan) !important
    }

.row {
    --bs-gutter-x: unset !important;
    --bs-gutter-y: unset !important;
    /*display: flex;
    flex-wrap: wrap;*/
    margin-top: unset !important;
    margin-right: unset !important;
    margin-left: unset !important;
}

select {
    white-space: normal !important;
    line-height: normal !important
}

.separator {
    border: 1px solid var(--forte-gray)
}

.security-image {
    width: 45%;
    height: 100%;
    box-shadow: 0 .25rem .75rem var(--lavender)
}



.skeleton-nav {
    width: 70% !important;
    height: 40px !important;
    background: rgb(210 210 210/39%) !important;
    margin-top: 20px !important;
    border-radius: 20px !important;
    margin: 0 auto
}

.swal2-html-container {
    margin: unset !important;
}

.wizard-stepper-shell {
    width: min(100%, 72rem);
    margin: 0 auto 1.35rem;
    padding: 0 0.35rem;
}

.identity-register-stepper.step-indicator {
    --step-indicator-count: 3;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(var(--step-indicator-count), minmax(0, 1fr));
    list-style: none;
    margin: 0 auto 1.75rem;
    max-width: min(100%, calc(var(--step-indicator-count) * 14rem));
    padding: 0;
    position: relative;
    width: min(100%, calc(var(--step-indicator-count) * 14rem));
}

    .identity-register-stepper.step-indicator::before {
        background: rgba(255, 255, 255, .24);
        bottom: 0;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        right: 0;
    }

    .identity-register-stepper.step-indicator li {
        border: 0 !important;
        color: rgba(255, 255, 255, .66);
        font-family: Poppins_Bold, sans-serif;
        font-size: .92rem;
        line-height: 1;
        padding: 0 0 .82rem;
        position: relative;
        text-align: center;
    }

        .identity-register-stepper.step-indicator li::after {
            background: transparent;
            border-radius: 999px;
            bottom: 0;
            content: "";
            height: 3px;
            left: 0;
            position: absolute;
            right: 0;
            z-index: 1;
        }

        .identity-register-stepper.step-indicator li.active {
            color: var(--white);
        }

            .identity-register-stepper.step-indicator li.active::after {
                background: var(--lavender);
                box-shadow: 0 0 14px rgba(222, 217, 255, .38);
            }

    .identity-register-stepper.step-indicator.wizard-inline-stepper {
        max-width: min(100%, 72rem);
        width: 100%;
    }

    .identity-register-stepper.step-indicator.identity-manage-stepper {
        max-width: min(100%, 440px);
        width: min(100%, 440px);
    }

    .identity-register-stepper.step-indicator.identity-manage-stepper--three {
        max-width: min(100%, 520px);
        width: min(100%, 520px);
    }

.box-stepper {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: min(100%, 28rem);
    margin: 0 auto 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(222, 217, 255, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.percent {
    position: relative;
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
}

    .percent svg {
        position: relative;
        width: 150px;
        height: 150px;
        transform: rotate(270deg);
        transform-origin: center;
    }

        .percent svg circle {
            width: 100%;
            height: 100%;
            fill: transparent;
            stroke-width: 7;
            stroke: rgba(255, 255, 255, 0.22);
            transform: none;
        }

            .percent svg circle:nth-child(2) {
                stroke: var(--pale-green);
                stroke-dasharray: 251;
                stroke-dashoffset: 125;
                stroke-linecap: round;
            }

.number {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--white);
    font-family: Poppins_Bold, sans-serif;
}

    .number h2 {
        font-size: 1.05rem;
        margin: 0;
    }

#second-circle {
    stroke-dasharray: 250;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset .35s;
}

.stepper-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.25rem 0;
    min-width: 0;
}

@media (max-width: 600px) {
    .identity-register-stepper.step-indicator {
        gap: .45rem;
        margin-bottom: 1.25rem;
        max-width: 100%;
        width: 100%;
    }

        .identity-register-stepper.step-indicator li {
            font-size: .78rem;
            line-height: 1.15;
            padding-bottom: .65rem;
            overflow-wrap: anywhere;
        }

            .identity-register-stepper.step-indicator li::after {
                height: 2px;
            }

        .identity-register-stepper.step-indicator.identity-manage-stepper,
        .identity-register-stepper.step-indicator.identity-manage-stepper--three {
            max-width: 100%;
            width: 100%;
        }

    .wizard-stepper-shell {
        display: none;
    }

    .box-stepper {
        display: flex;
        padding: 0.85rem 1rem;
    }
}

.swal2-container {
    padding: 0 !important;
    overflow-y: hidden !important;
    margin: 0 !important
}

.swal2-styled.swal2-default-outline:focus {
    box-shadow: 0 0 0 3px rgba(112,102,224,.5) !important;
    color: black !important;
}




#msform fieldset:not(:first-of-type) {
    display: none
}

.terminos-condiciones {
    margin-left: 10px
}

.text-center-input input {
    text-align: center !important
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.validate-input .form-control {
    position: relative;
    border-radius: 40px;
    margin-bottom: 20px
}

.wrap {
    height: 100vh;
    width: 100vw
}

.w-30 {
    width: 30px !important
}

.w-45 {
    width: 45%
}

.w-85 {
    width: 85%
}

.w-100-loader {
    background: var(--black) !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important
}

@media(max-width: 400px) {

    .checkbox.path {
        display: inline-flex;
        margin: 0
    }

    .terminos-condiciones {
        margin: 1px;
        width: 150px
    }
}

@media(max-width: 420px) {

    .content-bill {
        padding: 0 !important;
        max-width: 100% !important
    }

    .mud-table-toolbar {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 70px
    }

    .steps li a::before {
        width: 70px
    }
}

@media(max-width: 440px) {
    .product-detail-card {
        flex-direction: column
    }

    .eye {
        font-size: 18px;
        top: 65% !important;
        left: 50% !important
    }

    .card-container {
        display: flex;
        flex-direction: column;
        align-items: start
    }
}

@media(max-width: 450px) {
    .bloqueo-item {
        max-width: 300px !important;
        min-width: 300px !important
    }
}

@media(max-width: 480px) {
    .steps li a::before {
        width: 50px
    }

    .steps li:not(.last) {
        width: 70px;
        font-size: 10px !important
    }

    ul.thumbnails.image_picker_selector li .thumbnail img {
        width: 65px !important;
        height: 65px !important
    }

    ul.thumbnails.image_picker_selector li .thumbnail.selected {
        width: 77px !important;
        height: 77px !important
    }
}

@media(max-width: 500px) {
    /*.dato-cuenta-padding {
        padding: 0 !important
    }*/

    .not-found-page .ilustration {
        display: flex;
        margin: 0 auto;
        width: 200px;
        height: 100px
    }
}

@media only screen and (max-width: 640px) {
    /*.steps li a::before {
        width: 70px
    }

    .steps li:not(.last) {
        width: 100px
    }
    */
    .container-bill {
        width: 100% !important
    }

    .content, .content-wrap {
        padding: 10px !important
    }

    .invoice {
        width: 100% !important
    }
}

@media(min-width: 768px) {
    html {
        font-size: 16px
    }
}

@media(max-width: 768px) {

    .left-image {
        width: 45% !important;
        display: flex;
        margin: 2px auto
    }

    .login-panel {
        display: flex;
        flex-direction: column-reverse
    }

    /*.margin-suggestions {
        margin-top: 6rem !important
    }*/

    .security-image {
        width: 35% !important;
        margin-bottom: 2rem;
    }

    .mud-table-toolbar a {
        display: none !important
    }
}

@media(max-width: 770px) {
    div.panel-heading:nth-child(2) {
        margin-left: 4em
    }

    .panel-heading {
        font-size: 13px
    }

        .panel-heading img {
            width: 60px;
            height: 60px;
            margin-right: 7px
        }

    .date-cointainer {
        display: flex !important;
        flex-direction: column !important
    }

    .mud-radio-group {
        align-items: start;
        display: flex !important;
        flex-direction: column;
        justify-content: left
    }

    .mud-radio-content-placement-end {
        margin-top: 20px !important
    }
}

@media(max-width: 800px) {
    [data-md-tooltip]:hover::before {
        transform: translateX(-20%) translateY(-60%) scale(1)
    }
}

@media(max-width: 870px) {
    .content-bill {
        padding: 0 !important;
        max-width: 80% !important;
        margin: 0 auto
    }

    .list-image {
        margin-bottom: 20px !important;
        margin-top: 40px;
        display: flex !important;
        flex-direction: column
    }

        .list-image li {
            margin: 0;
            padding: 10px 0 2px 30px;
            list-style: none;
            /*background-image: url('../assets/list.png');*/
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 17px;
            width: inherit !important;
            font-size: inherit !important
        }

    .steps > ul:nth-child(1) > li:nth-child(1) > a:nth-child(1) > strong:nth-child(2) {
        right: 5%
    }

    .steps > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1) > strong:nth-child(2) {
        right: 50%
    }

    .steps > ul:nth-child(1) > li:nth-child(3) > a:nth-child(1) > strong:nth-child(2) {
        right: 25%
    }

    .last > a:nth-child(1) > strong:nth-child(2) {
        right: 25%
    }

    /*.steps ul {
        -o-justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center
    }
    */
    .steps li:not(.last) {
        font-size: 13px !important
    }

    .steps li.last strong {
        font-size: 13px !important;
        margin: 0;
        top: 25px
    }

    .steps li a::before {
        left: 100%
    }

    .steps li .title {
        font-size: 15px !important
    }

    .steps li strong {
        right: 13px !important;
        font-size: 13px
    }
}

@media(max-width: 960px) {
    .detail-container {
        display: flex
    }
}

.simulador-container {
    height: max-content;
    margin-top: 10px;
    /* padding-top: 30px; */
    padding-bottom: 30px;
}

.simulador-container-subtitle {
    font-family: Poppins_Bold;
    font-size: 12pt;
    margin: 5px 0 10px 0;
    text-align: center;
    display: flex;
    justify-content: center
}

.simulador-container img {
    height: auto;
    position: absolute;
    top: -12px;
    width: 50px;
    z-index: 1;
    margin-left: 10px
}

.simulador-container hr {
    border: 1px solid var(--medium-gray);
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0
}

.simulator-icon {
    font-size: 20px;
    color: var(--lavender);
    padding: 0;
    /* text-align: center; */
    width: 30px;
    align-self: center;
    /* margin-left: -23px; */
}

.simulador-rate-containter {
    border: 1px solid var(--gray);
    border-radius: 5px;
    color: var(--gray);
    margin: 10px auto;
    max-width: 450px;
    padding: 10px
}

.simulador-rate-title {
    font-size: 9pt;
    font-family: Poppins_Bold
}

.simulador-rate-description {
    color: var(--gray);
    font-size: 8pt;
    text-align: left
}

.simulator-results-container {
    margin-top: 10px;
    height: 500px;
    padding-bottom: 10px;
    margin-bottom: 10px
}

.simulator-results-box {
    padding-top: 30px;
    height: max-content;
    padding-bottom: 30px;
    border: 1px solid var(--gray);
    border-radius: 2px;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(237,237,237,1)),color-stop(20%,rgba(246,246,246,1)),color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,rgba(237,237,237,1) 0%,rgba(246,246,246,1) 20%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,rgba(237,237,237,1) 0%,rgba(246,246,246,1) 20%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,rgba(237,237,237,1) 0%,rgba(246,246,246,1) 20%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,rgba(237,237,237,1) 0%,rgba(246,246,246,1) 20%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff',GradientType=0)
}

.simulator-results-info-container {
    background-color: var(--white);
    border: 1px solid var(--black);
    height: 120px;
    margin-top: 20px
}

.simulator-results-container img {
    height: auto;
    width: 50px;
    position: absolute;
    right: 0;
    top: 100%;
    margin: auto;
    display: block
}

.simulator-results-info-logo {
    height: auto;
    width: 50px;
    position: absolute;
    right: 0
}

.simulator-results-info-box {
    background-color: #eff1f9 !important;
    border: 1px solid var(--gray);
    border-radius: 10px;
    max-width: 350px;
    padding: 10px 20px 10px 20px;
    text-align: left;
    margin: auto
}

.simulator-results-info-cuote {
    font-family: Poppins_Bold;
    font-size: 25pt;
    text-align: center;
    display: flex;
    justify-content: center
}

.simulator-results-info-text {
    color: var(--gray);
    font-size: 15pt;
    font-weight: 700
}

.scrollable-content {
    overflow: scroll;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

    .scrollable-content::-webkit-scrollbar {
        display: none !important;
    }

.text-danger {
    color: var(--soft-red) !important;
}


.transaction-list {
    list-style: none;
    padding: 0;
    /*margin: 0 -1.9rem*/
}

.to-image-white {
    filter: invert(87%) sepia(100%) saturate(1%) hue-rotate(71deg) brightness(104%) contrast(102%);
}

.to-image-lavender {
    filter: invert(80%) sepia(99%) saturate(426%) hue-rotate(183deg) brightness(99%) contrast(105%);
}

.top-left-border {
    border-top: 1px solid #dee3ed
}

.transaction-date-divider {
    padding: 15px;
    margin: 0 -1px 0 0;
    color: var(--black);
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
    min-height: 54px
}

.transaction {
    padding: 0 16px;
    outline: 0;
    /*background: var(--white)*/
}

    .transaction .wrapper {
        padding: 15px 0;
        align-items: center;
        outline: 0;
        cursor: pointer;
        display: flex;
        min-height: auto;
        flex-direction: row
    }

    .transaction .container-flex {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid var(--black);
    }

    .transaction .transaction-data {
        flex: 1
    }

    .transaction .transaction-to {
        word-break: break-word;
        padding-right: 20px;
        box-sizing: border-box;
        color: var(--black);
        font-size: 14px;
        text-transform: capitalize
    }

    .transaction .transaction-amount {
        font-size: 14px;
        font-weight: 500;
        color: var(--black)
    }

        .transaction .transaction-amount.amount-positive {
            color: #6cb96b
        }

    .transaction .available-balance {
        color: var(--black);
        font-size: 12px;
        font-weight: 600;
    }

.transaction-details-section {
    margin: 5px -15px;
    word-break: break-word
}

    .transaction-details-section .extra-details button {
        text-align: left
    }

    .transaction-details-section .extra-details-wrapper .load-extra-details {
        padding: 15px 0 5px
    }

    .transaction-details-section .transaction-details {
        width: 100%
    }

        .transaction-details-section .transaction-details td {
            padding: 1px
        }

        .transaction-details-section .transaction-details .data-label {
            width: 35%;
            font-size: 14px;
            font-family: 'Poppins_Bold';
            color: var(--black)
        }

@media(max-width: 767.98px) {
    .transaction-details-section .transaction-details .data-label {
        min-width: 120px;
        width: auto
    }
}

.transaction-details-section .transaction-details .data-value {
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize
}

.transaction-details-section .transaction-details .transaction-extra-heading td {
    font-size: 16px;
    padding-top: 15px;
    font-weight: 700;
    color: #0f265c
}

.transaction-details-section .cheques-image-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-position: below;
    margin-right: 15px
}

.text-12 {
    font-size: 12px !important
}

.text-14 {
    font-size: 14px !important
}

.text-17 {
    font-size: 17px !important
}

.wrapper-product {
    display: grid;
    margin: 100px 30px auto;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    margin: 0
}

    .wrapper-product .box-product {
        width: 350px;
        margin: 0 auto;
        position: relative;
        perspective: 1000px
    }

        .wrapper-product .box-product .front-face {
            background: #fff;
            height: 220px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 5px 20px 0 rgba(0,81,250,.1);
            transition: all .5s ease
        }

.box-product .front-face .icon {
    height: 80px;
    text-align: center
}

    .box-product .front-face .icon i {
        font-size: 65px
    }

.box-product .front-face span, .box-product .back-face span {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase
}

.box-product .front-face .icon i, .box-product .front-face span {
    background: linear-gradient(-135deg,#4468a8,#4158d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center
}

.back-button {
    color: var(--white) !important;
    border: 1.5px solid var(--white) !important;
    background-color: rgba(0,0,0,0.5) !important;
}

    .back-button:hover {
        color: var(--lavender) !important;
        border-color: var(--lavender) !important;
    }

.box-product .back-face {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 220px;
    width: 100%;
    padding: 30px;
    color: #fff;
    opacity: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    background: linear-gradient(-135deg,#4468a8,#4158d0);
    transform: translateY(110px) rotateX(-90deg);
    box-shadow: 0 5px 20px 0 rgba(0,81,250,.1);
    transition: all .5s ease
}

    .box-product .back-face p {
        margin-top: 10px;
        text-align: justify
    }

.box-product:hover .back-face {
    opacity: 1;
    transform: rotateX(0deg)
}

.box-product:hover .front-face {
    opacity: 0;
    transform: translateY(-110px) rotateX(90deg)
}

.custom-icon-dark {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(0%) sepia(64%) saturate(2197%) hue-rotate(17deg) brightness(81%) contrast(95%);
}

.custom-icon-white {
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(87%) sepia(100%) saturate(1%) hue-rotate(71deg) brightness(104%) contrast(102%);
    width: 40px !important;
}

.watermark {
    position: fixed;
    left: -129px;
    top: -900px;
    pointer-events: none;
    fill: black;
    z-index: 1;
    height: 300vh;
    background: url("/assets/logoHorizontalBlancoSF.png") center center repeat;
    background-size: 250px;
    width: 400vh;
    opacity: .3;
}

@media print {
    .watermark {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact
    }
}


@media screen and (max-width: 320px) {
    .content {
        margin-bottom: unset;
    }
}

@media screen and (min-width: 767px) {
    .content {
        margin-bottom: unset;
    }
}

@media screen and (min-width: 1024px) {
    .content {
        margin-bottom: unset;
    }
}

.qr-wrapper {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#sanfraCode {
    display: flex;
    justify-content: center;
}

    #sanfraCode img {
        width: 135px;
    }

.qr-container {
    position: relative;
    min-height: 129px;
    display: flex;
    justify-content: center;
}

input.input-contacto {
    border: none !important;
    font-size: 1.5rem;
    padding-left: 5px;
    font-weight: bold;
    color: #4d4e56;
    width: inherit;
    outline: none;
}

    input.input-contacto:focus {
        border: unset !important;
    }

.qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
}

.qr-button {
    width: 100%;
    padding: 2px;
    border: unset;
    border-radius: unset !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: var(--black);
    font-weight: bold;
}

    .qr-button img {
        width: 24px;
        height: 24px;
    }

input.input-contacto .invalid {
    border: unset !important;
}

input.input-contacto.valid.modified:not([type=checkbox]) {
    border: unset !important;
}

button.qr-button-container {
    border-radius: 12px !important;
    background-color: var(--pale-green);
    max-width: 90px;
    min-width: 75px;
}

    button.qr-button-container:focus {
        background-color: #f1ffe6;
    }

.qr-logo-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: white;
    border-radius: 50%;
}

.panapay-qr-dialog-contaniner {
    background-color: #fff;
    border: 2px solid #061356;
    border-radius: 20px;
}

.color-yellow-panapay {
    color: #ffc832;
}

.panapay-qr {
    border: 2px solid #ffc832;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
}

.panapay-qr-details {
    display: flex;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #00c4b3;
    border-radius: 50%;
}

.panapay-qr-step {
    color: #00c4b3;
}

.back-button {
    color: var(--white) !important;
    border: 1.5px solid var(--white) !important;
    background-color: rgba(0,0,0,0.5) !important;
}

    .back-button:hover {
        color: var(--lavender) !important;
        border-color: var(--lavender) !important;
    }

.btn-download-qr {
    width: 90%;
    border: 2px solid;
    border-radius: 20px !important;
    height: 50px;
}

.qr-reporte-container {
    padding-bottom: 0rem;
    padding-top: 3rem;
    padding-right: 3rem;
    padding-left: 3rem;
}

.scrollable-content {
    overflow: scroll;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

    .scrollable-content::-webkit-scrollbar {
        display: none !important;
    }

/* ── Transfer type chip selector ── */
.transfer-type-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.transfer-chip {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid var(--lavender);
    border-radius: 14px !important;
    background: transparent;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    text-align: center;
}

    .transfer-chip i {
        font-size: 1.25rem;
    }

    .transfer-chip:hover {
        border-color: var(--pastel-purple);
        color: var(--black);
        background: var(--soft-lavender);
    }

.transfer-chip--active {
    border-color: var(--pastel-purple);
    background: var(--pastel-purple);
    color: var(--black);
}

    .transfer-chip--active:hover {
        border-color: var(--lavender);
        background: var(--lavender);
        color: var(--black);
    }

/* ── Account origin card selector ── */
.account-origin-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.btn-toggle-saldo {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(222, 217, 255, 0.12);
    border: 1px solid rgba(222, 217, 255, 0.22);
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--lavender);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .btn-toggle-saldo:hover {
        color: var(--white);
        background: rgba(222, 217, 255, 0.18);
        border-color: rgba(222, 217, 255, 0.42);
    }

    .btn-toggle-saldo i {
        font-size: 0.9rem;
    }

.account-cards-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--lavender) transparent;
    -webkit-overflow-scrolling: touch;
}

    .account-cards-scroll::-webkit-scrollbar {
        height: 3px;
    }

    .account-cards-scroll::-webkit-scrollbar-thumb {
        background: var(--lavender);
        border-radius: 2px;
    }

.account-card {
    flex: 1 0 200px;
    max-width: 280px;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    padding: 14px 16px !important;
    border: 1.5px solid rgba(255,255,255,0.13) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.05) !important;
    text-align: left;
    cursor: pointer;
    overflow: hidden !important;
    min-height: 86px;
    transition: border-color 0.18s, background 0.18s;
}

    .account-card:hover:not(:disabled) {
        border-color: var(--pastel-purple) !important;
        background: rgba(255,255,255,0.09) !important;
    }

.account-card--active {
    border: 2px solid var(--pastel-purple) !important;
    background: rgba(187,168,246,0.08) !important;
}

.account-card--blocked {
    opacity: 0.4;
    cursor: not-allowed;
}

.account-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.account-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    display: block;
}

.account-card__check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
}

    .account-card__check i {
        font-size: 0.55rem;
        color: transparent;
    }

.account-card__check--visible {
    background: var(--pastel-purple);
    border-color: var(--pastel-purple);
}

    .account-card__check--visible i {
        color: var(--dark);
    }

.account-card__titular {
    font-size: 0.72rem;
    color: var(--forte-gray);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.account-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-top: auto;
    overflow: hidden;
}

.account-card__number {
    font-size: 0.78rem;
    color: var(--lavender);
    font-family: monospace;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.account-card--active .account-card__number {
    color: var(--pastel-purple);
}

.account-card__balance {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-mint);
    white-space: nowrap;
}
/* ── Prominent monto input ── */
.monto-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    transition: border-color 0.2s, background 0.2s;
}

    .monto-field:focus-within {
        border-color: var(--pastel-purple);
        background: rgba(187,168,246,0.06);
    }

.monto-field--error {
    border-color: var(--soft-red) !important;
    background: rgba(255,107,107,0.06) !important;
}

.monto-field__symbol {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--lavender);
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

.monto-field__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--white);
    width: 100%;
    font-family: inherit;
    -moz-appearance: textfield;
}

    .monto-field__input::placeholder {
        color: rgba(255,255,255,0.2);
    }

    .monto-field__input::-webkit-outer-spin-button,
    .monto-field__input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.monto-field__input--error {
    color: var(--soft-red);
}

.monto-saldo-ref {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

    .monto-saldo-ref i {
        font-size: 0.78rem;
    }

    .monto-saldo-ref strong {
        color: var(--green-mint);
        font-weight: 700;
    }

.monto-saldo-ref--error {
    color: var(--soft-red);
}

    .monto-saldo-ref--error strong {
        color: var(--soft-red);
    }

/* ── Contact selector trigger ── */
.contact-selector {
    display: flex;
    gap: 8px;
    align-items: stretch
}

.contact-selector__trigger {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 8px !important;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s,background .2s;
    min-width: 0;
    color: inherit
}

    .contact-selector__trigger:hover {
        border-color: #bba8f6;
        background: rgba(187,168,246,.08)
    }

.contact-selector__icon {
    font-size: 1rem;
    color: rgba(255,255,255,.4);
    flex-shrink: 0
}

.contact-selector__icon--selected {
    color: #bba8f6
}

.contact-selector__placeholder {
    color: rgba(255,255,255,.4);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.contact-selector__name {
    color: #fff;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.contact-selector__chevron {
    color: rgba(255,255,255,.4);
    font-size: .8rem;
    flex-shrink: 0;
    margin-left: auto
}

.contact-selector__add {
    background: rgba(187,168,246,.15);
    border: 1.5px solid rgba(187,168,246,.3);
    border-radius: 8px !important;
    color: #bba8f6;
    padding: 0 14px;
    cursor: pointer;
    font-size: 1rem;
    transition: background .2s,border-color .2s;
    flex-shrink: 0;
    display: flex !important;
    align-items: center
}

    .contact-selector__add:hover {
        background: rgba(187,168,246,.25);
        border-color: #bba8f6
    }

/* ── Contact picker drawer ── */
@keyframes drawer-slide-up {
    from {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes drawer-slide-right {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes fadeInBackdrop {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.contact-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    z-index: 1200;
    animation: fadeInBackdrop .2s ease
}

.contact-drawer {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 0;
    z-index: 1201;
    background: #1e1b2e;
    border: 1px solid rgba(222,217,255,.14);
    border-radius: 22px 22px 0 0;
    max-height: min(76dvh,640px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -16px 44px rgba(0,0,0,.46);
    animation: drawer-slide-up .28s cubic-bezier(.32,1,.64,1);
    overflow: hidden
}

.contact-drawer__handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.28);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0
}

.contact-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0
}

.contact-drawer__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #bba8f6;
    font-weight: 600;
    font-size: 1rem;
    min-width: 0
}

    .contact-drawer__title-wrap i {
        font-size: 1.1rem
    }

.contact-drawer__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.contact-drawer__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.contact-drawer__new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--pastel-purple);
    color: var(--black);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap
}

.contact-drawer__close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color .15s
}

    .contact-drawer__close:hover {
        color: #fff
    }

.contact-drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px
}

@media(min-width:1024px) {
    .contact-drawer {
        top: 24px;
        bottom: 24px;
        left: auto;
        right: 24px;
        width: min(420px,32vw);
        border-radius: 20px;
        max-height: none;
        animation: drawer-slide-right .28s cubic-bezier(.32,1,.64,1);
        box-shadow: 0 22px 54px rgba(0,0,0,.45)
    }

    .contact-drawer__handle {
        display: none
    }

    .contact-drawer__body {
        padding: 16px
    }
}

@media(max-width:420px) {
    .contact-drawer {
        left: 0;
        right: 0;
        max-height: 78dvh
    }

    .contact-drawer__header {
        padding-inline: 14px
    }

    .contact-drawer__title-wrap {
        font-size: .94rem
    }

    .contact-drawer__new {
        padding: 0 10px;
        font-size: .84rem
    }

    .contact-drawer__body {
        padding: 12px 12px 16px
    }
}

/* ── Confirmation step: hero ── */
.confirm-hero {
    text-align: center;
    padding: 20px 16px 14px;
    margin-bottom: 8px
}

.confirm-hero__eyebrow {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #bba8f6;
    margin-bottom: 6px
}

.confirm-hero__amount {
    font-size: clamp(2.35rem,13vw,3.1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 10px
}

.confirm-hero__beneficiary {
    max-width: 100%;
    font-size: clamp(1rem,4.7vw,1.18rem);
    line-height: 1.25;
    color: #bba8f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow-wrap: anywhere
}

    .confirm-hero__beneficiary i {
        font-size: 1rem
    }

/* ── Confirmation step: flow ── */
.confirm-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(222,217,255,.08);
    border-radius: 14px;
    margin-bottom: 14px
}

.confirm-flow__account {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

    .confirm-flow__account:last-child {
        border-left: 1px solid rgba(255,255,255,.1);
        padding-left: 16px
    }

.confirm-flow__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #bba8f6;
    font-weight: 600;
    margin-bottom: 2px
}

.confirm-flow__name {
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere
}

.confirm-flow__number {
    font-size: .78rem;
    color: rgba(255,255,255,.72);
    overflow-wrap: anywhere
}

.confirm-flow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06)
}

/* ── Confirmation step: strip ── */
.confirm-strip {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(222,217,255,.08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 8px
}

.confirm-strip__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    gap: 14px
}

    .confirm-strip__row:last-child {
        border-bottom: none
    }

.confirm-strip__row--total {
    background: rgba(187,168,246,.08)
}

.confirm-strip__key {
    font-size: .84rem;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0
}

    .confirm-strip__key i {
        width: 14px;
        text-align: center;
        color: #bba8f6
    }

.confirm-strip__val {
    min-width: 0;
    font-size: .92rem;
    font-weight: 500;
    color: #fff;
    text-align: right;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.confirm-strip__val--total {
    font-weight: 700;
    font-size: 1rem;
    color: #fff
}

.confirm-strip__val--fast {
    color: #4ade80
}

.confirm-strip__val--slow {
    color: #facc15
}

.confirm-strip__free {
    color: #4ade80;
    font-weight: 500
}

/* ── Confirmation step: notice ── */
.confirm-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(250,204,21,.08);
    border: 1px solid rgba(250,204,21,.25);
    border-radius: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: .83rem;
    color: rgba(255,255,255,.7)
}

    .confirm-notice i {
        color: #facc15;
        flex-shrink: 0;
        margin-top: 2px
    }

@media(max-width:575.98px) {
    .confirm-hero {
        padding: 18px 8px 12px
    }

    .confirm-flow {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding: 14px
    }

    .confirm-flow__account,
    .confirm-flow__account:last-child {
        align-items: flex-start;
        text-align: left;
        width: 100%
    }

    .confirm-flow__arrow {
        height: 20px;
        opacity: .75;
        overflow: hidden
    }

        .confirm-flow__arrow lottie-player {
            height: 42px !important;
            width: 42px !important;
            transform: rotate(90deg)
        }

    .confirm-strip__row {
        padding: 12px 14px
    }

    .confirm-strip__key {
        max-width: 45%
    }

    .confirm-strip__val {
        max-width: 55%
    }
}

/* ── Confirm flow: horizontal override (todos los breakpoints) ── */
.confirm-flow {
    flex-direction: row !important;
    align-items: center !important
}

.confirm-flow__account:last-child {
    border: none !important;
    padding-left: 0 !important;
    width: auto !important
}

.confirm-flow__arrow {
    border: none !important;
    padding: 0;
    background: transparent !important;
    flex-shrink: 0
}


    /* ── Confirm arrow: libre, sin recortes ── */
    .confirm-flow__arrow, .confirm-flow__arrow lottie-player {
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important
    }


/* ── Confirm flow: padding simétrico en ambas cuentas ── */
.confirm-flow__account {
    padding: 8px 10px !important
}

    .confirm-flow__account:last-child {
        padding: 8px 10px !important
    }

/* ── Account cards: ocultar scrollbar visible ── */
.account-cards-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none
}

    .account-cards-scroll::-webkit-scrollbar {
        display: none
    }

/* ── OTP context banner (transfer) ── */
.otp-ctx {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center
}

.otp-ctx__amount {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.1
}

.otp-ctx__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: .82rem;
    color: rgba(255,255,255,.72)
}

.otp-ctx__dot {
    color: rgba(255,255,255,.35)
}

.otp-ctx__beneficiary {
    color: #bba8f6;
    font-weight: 600
}

    .otp-ctx__beneficiary i {
        margin-right: 4px
    }

.otp-ctx__origen {
    color: rgba(255,255,255,.72)
}

/* ── OTP context: fix centering ── */
.otp-ctx {
    text-align: center !important
}

.otp-ctx__amount {
    text-align: center !important;
    width: 100%
}

.otp-ctx__meta {
    justify-content: center !important;
    text-align: center !important;
    width: 100%
}

/* Receipt actions: clear closing hierarchy */
.receipt-actions {
    padding: 0 0 calc(1.4rem + env(safe-area-inset-bottom));
}

.receipt-actions__wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: 420px
}

.receipt-actions__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border-radius: 999px !important;
    font-size: .96rem;
    line-height: 1.2;
    padding: 10px 16px;
    text-decoration: none !important;
    transition: background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease
}

    .receipt-actions__btn:active {
        transform: scale(.99)
    }

.receipt-actions__btn--primary {
    background: var(--pastel-purple);
    border: 1px solid var(--lavender);
    color: var(--black);
    font-weight: 700
}

    .receipt-actions__btn--primary:hover {
        background: var(--lavender);
        color: var(--black)
    }

.receipt-actions__btn--secondary {
    background: var(--white);
    border: 1px solid var(--white);
    color: var(--black);
    font-weight: 600
}

    .receipt-actions__btn--secondary:hover {
        background: var(--soft-lavender);
        border-color: var(--soft-lavender);
        color: var(--black)
    }

.receipt-actions__btn--utility {
    background: transparent;
    border: 1px solid rgba(222,217,255,.34);
    color: var(--lavender);
    font-weight: 600
}

    .receipt-actions__btn--utility:hover {
        background: rgba(222,217,255,.1);
        border-color: rgba(222,217,255,.55);
        color: var(--white)
    }

@media(max-width:575.98px) {
    .receipt-actions {
        padding-bottom: calc(5.8rem + env(safe-area-inset-bottom));
    }

    .receipt-actions__wrap {
        width: calc(100% - 32px);
    }

    .receipt-actions__btn {
        min-height: 44px;
        font-size: .94rem
    }
}

/* ── Receipt message variants ── */
.transaction-receipt__message--fast {
    color: #4caf50;
    font-size: .84rem;
    text-align: center;
    margin: .5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.transaction-receipt__message--spi {
    color: rgba(255,255,255,.65);
    font-size: .84rem;
    text-align: center;
    margin: .5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

/* ── Receipt actions: tertiary fix (outline-secondary, not link) ── */
.receipt-actions__btn--tertiary {
    opacity: .75
}

    .receipt-actions__btn--tertiary:hover {
        opacity: 1
    }

/* ════════════════════════════════════════
   TEMA SANFRA — SweetAlert2
   ════════════════════════════════════════ */

/* Backdrop: oscuro con blur */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(6px) !important;
}

/* Popup card */
.swal2-popup {
    background: #13111c !important;
    border: 1px solid rgba(187,168,246,.18) !important;
    border-radius: 24px !important;
    padding: 0 0 28px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.55) !important;
    font-family: inherit !important;
}

/* Título */
.swal2-title {
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    padding: 1.2rem 1.5rem .25rem !important;
}

/* Cuerpo */
.swal2-html-container,
.swal2-content {
    color: rgba(255,255,255,.75) !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 1.5rem .5rem !important;
}

/* ── Íconos por tipo ── */
.swal2-icon.swal2-error {
    border-color: #f44336 !important;
    color: #f44336 !important;
}

    .swal2-icon.swal2-error .swal2-x-mark-line-left,
    .swal2-icon.swal2-error .swal2-x-mark-line-right {
        background-color: #f44336 !important;
    }

.swal2-icon.swal2-success {
    border-color: #4caf50 !important;
    color: #4caf50 !important;
}

    .swal2-icon.swal2-success .swal2-success-ring {
        border-color: rgba(76,175,80,.28) !important;
    }

    .swal2-icon.swal2-success .swal2-success-line-tip,
    .swal2-icon.swal2-success .swal2-success-line-long {
        background-color: #4caf50 !important;
    }

.swal2-icon.swal2-info {
    border-color: #bba8f6 !important;
    color: #bba8f6 !important;
}

.swal2-icon.swal2-warning {
    border-color: #ff9800 !important;
    color: #ff9800 !important;
}

.swal2-icon.swal2-question {
    border-color: #bba8f6 !important;
    color: #bba8f6 !important;
}

/* ── Botones ── */
.swal2-actions {
    padding: 4px 1.4rem 0 !important;
    gap: 10px !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: .75rem !important;
}

    .swal2-actions .swal2-confirm,
    .swal2-styled.swal2-confirm {
        background: #bba8f6 !important;
        color: #000000 !important;
        border-radius: 50px !important;
        width: 100% !important;
        font-weight: 600 !important;
        font-size: .95rem !important;
        padding: 11px 0 !important;
        border: none !important;
        box-shadow: none !important;
        letter-spacing: .01em !important;
    }

        .swal2-actions .swal2-confirm:hover,
        .swal2-styled.swal2-confirm:hover {
            background: #cebdff !important;
        }

    .swal2-actions .swal2-cancel,
    .swal2-styled.swal2-cancel {
        background: transparent !important;
        color: rgba(255,255,255,.72) !important;
        border: 1.5px solid rgba(255,255,255,.22) !important;
        border-radius: 50px !important;
        width: 100% !important;
        padding: 10px 0 !important;
        font-weight: 500 !important;
        font-size: .92rem !important;
        box-shadow: none !important;
    }

        .swal2-actions .swal2-cancel:hover,
        .swal2-styled.swal2-cancel:hover {
            border-color: rgba(255,255,255,.5) !important;
            color: #ffffff !important;
            background: rgba(255,255,255,.05) !important;
        }

/* Focus ring */
.swal2-styled.swal2-default-outline:focus {
    box-shadow: 0 0 0 3px rgba(187,168,246,.45) !important;
}

/* Input (SolicitaDatoCliente) */
.swal2-input {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(187,168,246,.35) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    caret-color: #bba8f6 !important;
}

    .swal2-input:focus {
        border-color: #bba8f6 !important;
        box-shadow: 0 0 0 3px rgba(187,168,246,.25) !important;
    }

/* Mensaje de validación */
.swal2-validation-message {
    background: rgba(244,67,54,.12) !important;
    color: #f44336 !important;
    border-radius: 8px !important;
}

/* ── Loader SweetAlert2: fondo negro para el Lottie ── */
.swal2-popup.w-100-loader {
    background: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Contact selector: quitar cursiva del placeholder ── */
.contact-selector__placeholder {
    font-style: normal !important;
    color: rgba(255,255,255,.55) !important;
}

/* ── Role banner (Banca Empresas) ── */
.role-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 4px
}

    .role-banner i {
        font-size: 1.2rem;
        margin-top: 2px;
        flex-shrink: 0
    }

    .role-banner div {
        display: flex;
        flex-direction: column;
        gap: 3px
    }

    .role-banner strong {
        font-size: .88rem;
        font-weight: 700;
        line-height: 1.2
    }

    .role-banner span {
        font-size: .82rem;
        line-height: 1.45;
        opacity: .88
    }

.role-banner--blocked {
    background: rgba(244,67,54,.12);
    border: 1px solid rgba(244,67,54,.3)
}

    .role-banner--blocked i {
        color: #f44336
    }

    .role-banner--blocked strong {
        color: #f44336
    }

    .role-banner--blocked span {
        color: rgba(255,255,255,.8)
    }

.role-banner--info {
    background: rgba(187,168,246,.1);
    border: 1px solid rgba(187,168,246,.3)
}

    .role-banner--info i {
        color: #bba8f6
    }

    .role-banner--info strong {
        color: #bba8f6
    }

    .role-banner--info span {
        color: rgba(255,255,255,.8)
    }

.identity-recovery-glass {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(185, 162, 255, 0.32);
    border-radius: 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    margin-top: 2rem;
    padding: 1.5rem 1.25rem 2rem;
}

/* MisProductos / Index — expansion panels glass */
.mp-panel.mud-expand-panel {
    background-color: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(185, 162, 255, .25) !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: .5rem;
}

.mp-panel .mud-expand-panel-header {
    background: transparent !important;
    padding: .65rem .85rem !important;
    min-height: 56px;
}

.mp-panel.mud-panel-expanded > .mud-expand-panel-header {
    border-bottom: 1px solid rgba(185, 162, 255, .18) !important;
}

.mp-panel .mud-expand-panel-content {
    background: transparent !important;
    padding: 0 !important;
}

.mp-panel .mud-expand-panel-icon {
    color: rgba(185, 162, 255, .9) !important;
}

.mp-panels-wrapper {
    padding: 0 1rem;
    margin-top: 1rem;
}


/* ── Global glass utility classes ── */
.mp-no-access-card {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(185, 162, 255, 0.32);
    border-radius: 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    padding: 2rem;
}

.page-skeleton-panel {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(185, 162, 255, 0.18);
    border-radius: 1.25rem;
}

.page-date-filter {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(185, 162, 255, 0.32);
    border-radius: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* MudDatePicker / MudTextField legibles sobre fondos dark */
.page-date-filter .mud-input-label,
.page-date-filter .mud-input-label-animated,
.page-date-filter .mud-input-label-inputcontrol {
    color: rgba(255, 255, 255, 0.65) !important;
}

.page-date-filter .mud-icon-button {
    color: rgba(255, 255, 255, 0.65) !important;
}

.page-date-filter .mud-icon-button:hover {
    color: #fff !important;
}

.page-date-filter .mud-input::before {
    border-color: rgba(185, 162, 255, 0.3) !important;
}

.page-date-filter .mud-input:hover::before,
.page-date-filter .mud-input.mud-input-underline:hover::before {
    border-color: rgba(185, 162, 255, 0.65) !important;
}

.mc-radio-group {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(185, 162, 255, 0.20);
    border-radius: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* MudTable glass */
.mud-table-glass {
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 1rem !important;
    overflow: hidden;
}

.mud-table-glass .mud-table-toolbar {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.mud-table-glass .mud-table-head .mud-table-cell {
    background: rgba(185, 162, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(185, 162, 255, 0.25) !important;
}

.mud-table-glass .mud-table-body .mud-table-row {
    background: transparent !important;
}

.mud-table-glass .mud-table-body .mud-table-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.mud-table-glass .mud-table-body .mud-table-cell {
    color: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mud-table-glass .mud-table-pagination {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(185, 162, 255, 0.18) !important;
}

/* ── MudDatePicker calendar — forzar texto oscuro sobre fondo blanco ── */
.mud-picker-container .mud-day,
.mud-picker-container .mud-button-day,
.mud-picker-calendar-content .mud-day {
    color: rgba(0, 0, 0, 0.87) !important;
}

.mud-picker-container .mud-typography,
.mud-picker-calendar-weekdays .mud-typography {
    color: rgba(0, 0, 0, 0.6) !important;
}

.mud-picker-container .mud-day.mud-selected,
.mud-picker-container .mud-day.mud-current {
    color: #fff !important;
}

.mud-picker-container .mud-icon-button {
    color: rgba(0, 0, 0, 0.54) !important;
}

.mud-picker-container .mud-icon-button:hover {
    color: rgba(0, 0, 0, 0.87) !important;
}

/* ── business-card empty search state ── */
.bc-empty-search {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(185, 162, 255, 0.22);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.bc-empty-search__icon {
    color: rgba(185, 162, 255, 0.45);
    font-size: 2.25rem;
    margin-bottom: .35rem;
}

.bc-empty-search__title {
    color: rgba(255, 255, 255, 0.75);
    font-family: Poppins_Bold, sans-serif;
    font-size: 1rem;
    margin: 0;
}

.bc-empty-search__hint {
    color: rgba(255, 255, 255, 0.45);
    font-size: .85rem;
    margin: 0;
}

.bc-empty-search__hint strong {
    color: rgba(255, 255, 255, 0.7);
}

/* ── business-card-list system — global ── */
.business-card-list {
    display: grid;
    gap: 1rem;
    margin: 1.5rem auto 0;
    max-width: 1180px;
    width: 100%;
}

.business-card-list__toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(223, 216, 255, 0.18);
    border-radius: 1.25rem;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(12rem, 1fr) auto;
    padding: 0.9rem 1rem;
}

.business-card-list__search {
    align-items: center;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(223, 216, 255, 0.22);
    border-radius: 999px;
    display: flex;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.45rem 0.9rem;
}

.business-card-list__search input {
    background: transparent;
    border: 0;
    color: #fff;
    outline: 0;
    width: 100%;
}

.business-card-list__search input::placeholder {
    color: rgba(255, 255, 255, 0.68);
}

.business-card-list__add,
.business-card-row__actions button {
    align-items: center;
    background: #bba3ff;
    border: 0;
    border-radius: 999px;
    color: #111;
    display: inline-flex;
    height: 2.45rem;
    justify-content: center;
    width: 2.45rem;
}

.business-card-list__items {
    display: grid;
    gap: 0.75rem;
}

.business-card-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(223, 216, 255, 0.24);
    border-radius: 1.5rem;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(12rem, 1.3fr) repeat(3, minmax(8rem, 1fr)) auto;
    min-height: 4.75rem;
    padding: 0.95rem 1.15rem;
}

.business-card-row__main,
.business-card-row__meta {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.business-card-row__main strong,
.business-card-row__meta strong {
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.business-card-row__main span,
.business-card-row__meta span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

.business-card-row__actions {
    display: flex;
    gap: 0.45rem;
}

.business-card-row__actions button {
    background: rgba(187, 163, 255, 0.18);
    color: #ded5ff;
}

@media (max-width: 991.98px) {
    .business-card-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .business-card-row__meta {
        grid-column: 1 / 2;
    }

    .business-card-row__actions {
        align-self: start;
        grid-column: 2 / 3;
        grid-row: 1 / span 4;
    }
}

@media (max-width: 575.98px) {
    .business-card-list__toolbar {
        grid-template-columns: 1fr auto;
    }

    .business-card-list__search {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}