/* Minification failed. Returning unminified contents.
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(119,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(120,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(121,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(122,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(124,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(125,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(129,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(145,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-90'
(190,34): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(197,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-90'
(202,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(232,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(233,41): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-40'
(234,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(281,38): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-40'
(292,22): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-90'
(296,22): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(311,22): run-time error CSS1039: Token not allowed after unary operator: '-color-error-10'
(312,34): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(329,32): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(342,21): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(347,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-70'
(495,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-10'
(496,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-50'
(511,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-50'
(524,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-50'
(529,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-70'
(543,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-10'
(544,24): run-time error CSS1039: Token not allowed after unary operator: '-color-success-50'
(549,32): run-time error CSS1039: Token not allowed after unary operator: '-color-success-50'
(555,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-10'
(556,24): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-50'
(561,32): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-50'
(572,22): run-time error CSS1039: Token not allowed after unary operator: '-color-error-10'
(573,24): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(578,32): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(582,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-70'
(619,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(628,34): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(640,37): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-90'
(644,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(647,33): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-90'
(677,24): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(678,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-20'
(679,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(682,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(696,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(708,33): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(719,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(720,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(735,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(746,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(755,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-70'
(767,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-70'
(777,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-90'
(802,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-50'
(808,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-50'
(813,17): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(820,28): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(826,17): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(834,17): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(844,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(849,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(854,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(900,24): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(901,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-20'
(902,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(917,34): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-60'
(926,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-70'
(939,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(992,17): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(993,34): run-time error CSS1039: Token not allowed after unary operator: '-color-error-50'
(1015,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1016,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1021,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1022,26): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1023,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1028,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1031,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1035,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1038,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1057,22): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1058,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1059,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1063,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1064,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1070,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1071,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1077,26): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1080,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1088,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1092,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1093,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1099,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1100,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1106,26): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-0'
(1109,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
 */
@font-face {
    font-family: 'Open Sans';
    src: url(/Content/Fonts/OpenSans-Light.ttf);
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(/Content/Fonts/OpenSans-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(/Content/Fonts/OpenSans-Medium.ttf);
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(/Content/Fonts/OpenSans-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(/Content/Fonts/OpenSans-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(/Content/Fonts/OpenSans-ExtraBold.ttf);
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url(/Content/Fonts/FiraSansCondensed-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url(/Content/Fonts/FiraSansCondensed-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}
:root {
    /*color*/
    --color-primary: #0098CD;

    /*escala de grises*/
    --color-gray-0: #FFFFFF;
    --color-gray-20: #F4F4F4;
    --color-gray-30: #E8E8E8;
    --color-gray-40: #D8D8D8;
    --color-gray-50: #BFBFBF;
    --color-gray-60: #959595;
    --color-gray-70: #606060;
    --color-gray-80: #414141;
    --color-gray-90: #121212;
    --color-gray-100: #000000;
    /*escala de azules*/
    --color-primary-10: #E6F8FE;
    --color-primary-20: #BDEBFA;
    --color-primary-30: #7ED3F0;
    --color-primary-40: #4CBAE1;
    --color-primary-50: #0098CD;
    --color-primary-60: #067ABB;
    --color-primary-70: #0053AF;
    --color-primary-80: #034793;
    --color-primary-90: #073676;
    --color-primary-100: #13255A;
    /*escala de verdes*/
    --color-success-10: #F4FDF9;
    --color-success-20: #C1F2DC;
    --color-success-30: #94E2BF;
    --color-success-40: #6BCCA1;
    --color-success-50: #48B283;
    --color-success-60: #3D9A71;
    --color-success-70: #32825F;
    --color-success-80: #276A4C;
    --color-success-90: #1D513A;
    --color-success-100: #133828;
    /*escala de rojos*/
    --color-error-10: #FFF2F2;
    --color-error-20: #FAB6B6;
    --color-error-30: #ED7C7C;
    --color-error-40: #D94C4C;
    --color-error-50: #BE2424;
    --color-error-60: #AE1E27;
    --color-error-70: #9D182A;
    --color-error-80: #8C132B;
    --color-error-90: #790E2B;
    --color-error-100: #670A29;
    /*escala de najanjas*/
    --color-warning-10: #FFF6E8;
    --color-warning-20: #FFDBB9;
    --color-warning-30: #FFB98E;
    --color-warning-40: #FA9268;
    --color-warning-50: #EE6946;
    --color-warning-60: #DD5B39;
    --color-warning-70: #CA4D2C;
    --color-warning-80: #B34122;
    --color-warning-90: #993519;
    --color-warning-100: #802A11;
    /*escala de amarillos*/
    --color-alert-10: #FFFEF2;
    --color-alert-20: #FFF6BB;
    --color-alert-30: #FFEA8D;
    --color-alert-40: #FFDB67;
    --color-alert-50: #FAC849;
    --color-alert-60: #E4B03F;
    --color-alert-70: #CC9835;
    --color-alert-80: #B3812C;
    --color-alert-90: #996B23;
    --color-alert-100: #80561C;   
    /*Breakpoints -> max-width: --variable*/
    --breakpoint-xs: 576px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 990.125rem;
    --breakpoint-lg: 1200px;
    /*--color-primary-50: darken(var(--color-primary), 20%); TODO: revisar con gradiente a la vuelta*/
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    color: var(--color-gray-90);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}
    input[type="password"] {
        font-size: 15px;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fira Sans Condensed Regular', sans-serif;
    overflow-wrap: break-word;
    font-weight: normal;
}

p {
    overflow-wrap: break-word;
}

h1 {
    margin-top: 2.25rem;
    font-size: 2rem;
}

h2 {
    line-height: 1.75rem;
    font-size: 1.5rem;
}

form {
    width: 34rem;

    display: flex;
    flex-direction: column;
}

select {
    border: 0.0625rem solid var(--color-gray-60);
    height: 3rem;
    width: 100%;
}

a {
    letter-spacing: 0.07rem;
    color: var(--color-gray-90);
    text-decoration-line: none;
}

a:hover{
    color: var(--color-primary-70);
}

.mt-1 {
    margin-top: .5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.phoneIcon{
    display:none;
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    width: 100%;
    padding: 2.5rem 5rem 0 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    left: 0;
    top: 0;
    border-top: 0.5rem solid var(--color-primary);
    border-bottom: 0.0625rem solid var(--color-gray-40);
    background-color: var(--color-gray-0);
    z-index: 10;
}

.header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

a.header-info-logo {
    width: 12.5rem;
}

    a.header-info-logo > img {
        width: 100%;
    }

.header-info-contact {
    display: flex;
    justify-content: flex-end;
    gap: 2.188rem;
}

.header-info-contact-element {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.125rem;
}

    .header-info-contact-element > img {
        width: 1.5rem;
    }

    .header-info-contact-element a {
        text-transform: uppercase;
        font-weight: bold;
    }

main {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    margin: 2rem 0;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid var(--color-gray-40);
}

footer {
    width: 100%;
    padding: 0 5rem;
    height: 10rem;
    display: flex;
    gap: 1.5rem;
    flex-direction: row;
    align-items: center;
    background: var(--color-gray-90);
}

    footer a {
        color: var( --color-gray-0);
    }

.select-items div {
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
}

.toast {
    width: 22rem;
    align-items: flex-start;
    position: fixed;
    top: 5.5rem;
    right: 5.5rem;
    background: var(--color-error-10);
    border: 0.0625rem solid var(--color-error-50);
    gap: 0.5rem;
    flex-direction: column;
    padding: 1.5rem;
    padding-top: 5rem;
    z-index: 999;
    display: none;
    animation: slide-in-out 0.5s ease-in-out forwards, fade-out 0.5s 2.5s forwards;
}

    .toast .toast-icon {
        display: flex;
        padding-top: 0.6rem;
        mask-image: url(/images/icon-error.svg);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: var(--color-error-50);
        width: 2rem;
        height: 2rem;
    }

.toast-link {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
}

    .toast-link > a {
        color: var(--color-error-50);
    }

.toast ul {
    list-style-image: url(/images/square.svg);
    color: var(--color-gray-70);
    padding-inline-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .toast ul li {
        padding-left: 0.5rem;
    }

@keyframes slide-in-out {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}


/* Aplica la animación al elemento que deseas */
.elemento {
    animation: fade-out-down 2s ease forwards;
}





/*Responsive*/
@media only screen and (max-width: 576px) {
    form {
        width: 21rem;

        margin: 16px;
    }

    h2 {
        font-size: 18px;
    }

    h1 {
        width: 100%;
    }

    main {
        margin: 1rem 0 1.5rem 0;
    }

    a.header-info-logo > img {
        height: 1.6rem;
        width: auto;
    }

    header {
        padding: 1rem 1.5rem;
    }

    footer {
        position: relative;
        flex-direction: column;
        height: 296px;
        align-items: flex-start;
        padding: 3.5rem 1.25rem;
        margin-top: 3.5rem;
    }

    .header-info-contact {
        display: none;
    }

    .registro {
        width: auto;
    }

    .phoneIcon {
        mask-image: url(/images/phoneOnly.svg);
        color: red;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: white;
        width: 32px;
        height: 32px;
    }

    .phoneDiv {
        display: flex;
        position: absolute;
        height: 56px;
        width: 56px;
        right: 0;
        top: -3.5rem;
        background-color: #EE6946;
        align-items: center;
        justify-content: center;
        border-bottom: solid white 1px;
    }

    #cancelar {
        width: 100%
    }

    #btn-registrame {
        width: 100%;
    }

    .select-selected div {
        padding: 0px;
    }

    .select-selected {
        padding: 0.8rem 0rem;
        align-items: center;
        justify-content: center;
    }

    .toast {
        right:0.4rem;
    }

    .contenedorPais {
        align-items: center;
        justify-content: center;
    }

    .phoneIcon {
        display: block;
    }
}

.message {
    width: 100%;
    background: var(--color-primary-10);
    border: 0.0625rem solid var(--color-primary-50);
    display: flex;
    align-self: baseline;
    gap: 0.5rem;
    flex-direction: column;
    padding: 1.5rem;
}

.message-icon {
    display: flex;
    padding-top: 0.6rem;
    mask-image: url('../../images/icon-info.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--color-primary-50);
    width: 2rem;
    height: 2rem;
}

.message-link {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
}

    .message-link > a {
        color: var(--color-primary-50);
    }

.message ul {
    list-style-image: url('../../images/square.svg');
    color: var(--color-gray-70);
    padding-inline-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .message ul li {
        padding-left: 0.5rem;
    }

.message--success {
    width: 34rem;
    margin: 2rem;
    background: var(--color-success-10);
    border-color: var(--color-success-50);
}

    .message--success .message-icon {
        mask-image: url('../../images/icon-success.svg');
        background-color: var(--color-success-50);
    }

.message--warning {
    width: 34rem;
    margin: 2rem;
    background: var(--color-warning-10);
    border-color: var(--color-warning-50);
}

    .message--warning .message-icon {
        mask-image: url('../../images/icon-warning.svg');
        background-color: var(--color-warning-50);
    }

.container-error {
    margin-top: 6.5rem;
    align-self: center;
    position: fixed;
    width: 34rem;
}

.message--error {
    background: var(--color-error-10);
    border-color: var(--color-error-50);
}

    .message--error .message-icon {
        mask-image: url('../../images/icon-error.svg');
        background-color: var(--color-error-50);
    }

.message-light {
    color: var(--color-gray-70);
}

#toast .message-icon {
    position: absolute;
    top: 1.8rem;
    left: 1.2rem;
    margin-bottom: 1rem;
}

/*Responsive*/
@media only screen and (max-width: 576px) {

    .container-error {
        width: 21rem;
    }

    .message--success {
        margin: 0;
        width: 100%;
    }
}

/*login*/
.form-group {
    position: relative;
    margin-top: 1.5rem;
}

.form-group-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.5rem;
}

.form-link {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.09rem;
}

input {
    position: relative;
    border: 0.0625rem solid var(--color-gray-60);
    height: 3rem;
    font-weight: 600;
    padding: 1rem 2.3rem 1rem 1rem;
    width: 100%;
    z-index: 1;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

    input:focus, input:focus-visible, input:active {
        border: 0.063rem solid var(--color-gray-90);
    }

    input:hover {
        border: 0.063rem solid var(--color-primary-70);
    }
.select-selected:focus {
    border: 0.063rem solid var(--color-gray-90);
}

.g-recaptcha {
    margin-top: 1.5rem;
}

select {
    background-image: url(/images/CaretDown.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    padding-left: 1rem;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    line-height: 2;
}

    select::-ms-expand {
        display: none;
        border-radius: 0px;
    }

    select::-ms-expand  option {
        border-radius: 0px;
    }

input:disabled {
    border-color: var(--color-gray-60);
    background-color: var(--color-gray-20);
    color: var(--color-gray-60);
}
    input:disabled::placeholder {
        color: var(--color-gray-60);
    }
/*checkbox*/
.label-check {
    width: fit-content;
    display: flex;
    align-items: center;
}

    .label-check:hover {
        cursor: pointer;
    }

        .label-check:hover .input-check {
            border: 2px solid var(--color-primary-70) !important;
        }

    .label-check input {
        display: none;
    }

.input-check {
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.125rem solid var(--color-gray-60);
    margin-right: 0.875rem;
}

    .input-check::before {
        content: "";
        position: absolute;
        top: 0.35rem;
        left: 0.35rem;
        width: 0.7rem;
        height: 0.4rem;
        border-bottom: 0.13rem solid var(--color-primary);
        border-left: 0.13rem solid var(--color-primary);
        transform: scale(0) rotate(-45deg);
    }

.label-check input:checked ~ .input-check::before {
    transform: scale(1) rotate(-45deg);
}

/*Validations*/
.input-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 0;
    padding: 0 4px;
    background-color: var(--color-gray-0);
    color: transparent;
    transition: 0.5s;
}

.mobile-input-label {
    position: absolute;
    top: 1rem;
    left: 43%;
    z-index: 1;
    padding: 0 4px;
    background-color: var(--color-gray-0);
    transition: top 0.5s, color 0.5s; /* Transición suave para top y color */
}

#MobileNumber:focus + .mobile-input-label,
#MobileNumber:not(:placeholder-shown) + .mobile-input-label {
    top: -0.5rem;
    left: 43%;
    z-index: 5;
    color: var(--color-gray-70);
}

#MobileNumber:not(:placeholder-shown):focus + .mobile-input-label {
    top: -0.5rem;
}

input:focus + .input-label,
input:not(:placeholder-shown) + .input-label {
    top: -0.5rem;
    left: 0.2rem;
    z-index: 5;
    color: var(--color-gray-70);
}

input:not(:focus) + .input-label-error {
    z-index: 0;
    top: 1rem;
    left: 1rem;
}

input::placeholder {
    color: var(--color-gray-90);
    font-size: 0.938rem;
    font-weight: 400;
}

input:focus::placeholder {
    color: transparent;
}

.input-icon {
    position: absolute;
    right: 0.75rem;
    z-index: 2;
    cursor: pointer;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    top: 25%;
}

.input-icon-eye {
    mask-image: url(/images/icon-eye.svg);
    -webkit-mask-image: url(/images/icon-eye.svg);
    background-color: var(--color-primary-50);
}

.input-icon-eye-slash {
    mask-image: url(/images/icon-eye-slash.svg);
    -webkit-mask-image: url(/images/icon-eye-slash.svg);
    background-color: var(--color-primary-50);
}

/*Error*/
.input-invalid-text {
    color: var(--color-error-50);
    margin-bottom: 0;
    margin-top: .5rem;
}

.input-icon-error {
    top: 15%;
    background-color: var(--color-error-50);
}



.input-error::placeholder {
    color: var(--color-error-50);
}

.input-label-error,
input:focus + .input-label-error {
    top: -0.5rem;
    left: 0.2rem;
    z-index: 5;
    color: var(--color-error-50);
}

/*Register*/
.movil-telefono {
    display: flex;
    gap: 8px;
}

.input-icon:hover {
    background-color: var(--color-primary-70);
}

.input-icon:hover,
#password-form-group:hover #Password {
    border: 0.063rem solid var(--color-primary-70);
}

.input-icon:hover,
#confirmpassword-form-group:hover #ConfirmPassword {
    border: 0.063rem solid var(--color-primary-70);
}

.input-label-prefix {
    position: absolute;
    top: 1.438rem;
    transform: translateY(-50%);
    left: 1rem;
    z-index: 1;
    pointer-events: none;
    transition: top 0.3s, left 0.3s, font-size 0.3s, color 0.3s;
}

.MobileNumberPrefix {
    width: 30%;
}

.MobileNumber {
    width: 70%;
    position: relative;
}

.input-label-bandera {
    position: absolute;
    top: 0rem;
    left: 0.2rem;
    background-color: white;
    color: #333;
    padding: 0 4px;
}

.MobileNumberPrefix.open .input-label-bandera {
    top: 0rem;
    background-color: white;
    color: #333;
}

#prefijoTel {
    height: 2rem;
}

.text-right{
    display:flex;
    gap:1.5rem;
}
#Email {
    border-color: var(--color-gray-60);
    background-color: var(--color-gray-20);
    color: var(--color-gray-60);
}

/*Selector mobile*/
#selected {
    background-image: url(/images/CaretDown.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 50%;
}

.MobileNumberPrefix {
    position: relative;
}

.select-selected {
    border: 0.0625rem solid var(--color-gray-60);
    padding: 0.438rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
    .select-selected:hover {
        border-color: var(--color-primary-70)
    }

    .select-selected div {
        display: flex;
        flex-direction: row-reverse;
        padding: 5px;
        cursor: pointer;
    }

.select-items {
    display: flex;
    position: absolute;
    background-color: var(--color-gray-0);
    min-width: 100%;
    z-index: 1;
    display: none;
    border: 1px solid #ccc;
    border-top: none;
    overflow-y: auto;
    max-height: 200px;
}

.contenedorPais {
    display: inline-block;
    margin-right: 10px;
    align-items: center;
    justify-content: left;
    margin-left:0.5rem;
    gap:0.5rem;
}

#bandera:not([class]) {
    display: none;
}

#spinner {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    z-index:100;
    background-color: rgba(255, 255, 255, 0.6);
}

    #spinner img {
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.input-error,
.input-error:focus {
    color: var(--color-error-50);
    border: 0.0625rem solid var(--color-error-50);
}

#searchInput{
    width:85%;
    margin:0.5rem;
}
/* Muestra los elementos cuando el selector está abierto */
.MobileNumberPrefix.open .select-items {
    display: block;
}

.button {
    height: 3.5rem;
    font-weight: bold;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    flex: 1;
}

.primary {
    background: var(--color-primary);
    color: var(--color-gray-0);
    border: 0.0625rem solid transparent;
}

    .primary:hover, .primary:focus {
        color: var(--color-primary);
        background: var(--color-gray-0);
        border-color: var(--color-primary);
        cursor: pointer;
    }

    .primary:active {
        background: var(--color-primary);
        box-shadow: none;
        opacity: 30%;
        color: var(--color-gray-0);
    }

    .primary:disabled {
        background: var(--color-primary);
        box-shadow: none;
        opacity: 30%;
        color: var(--color-gray-0);
    }

#cancelar {
    display: inline-block;
    height: 3.5rem;
    font-weight: bold;
    font-size: 0.75rem;
    flex: 1;
    text-align: center;
    line-height: 3.5rem;
    width:48%;
}

#btn-registrame{
    width:48%;
}

.secondary {
    background: var(--color-gray-0);
    color: var(--color-primary);
    border: 0.0625rem solid var(--color-primary);
}

    .secondary:hover, .secondary:focus {
        color: var(--color-gray-0);
        background: var(--color-primary);
        border: 0.0625rem solid transparent;
        cursor: pointer;
    }

    .secondary:active {
        color: var(--color-gray-0);
        background: var(--color-primary);
        border: 0.0625rem solid transparent;
        box-shadow: none;
    }

    .secondary:disabled {
        background: var(--color-gray-0);
        box-shadow: none;
        opacity: 30%;
        color: var(--color-primary);
    }

.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    color: var(--color-primary);
}

    .link-button:hover, .link-button:focus {
        color: var(--color-gray-0);
        background: var(--color-primary);
        border: 0.0625rem solid transparent;
        cursor: pointer;
    }

    .link-button:active {
        color: var(--color-gray-0);
        background: var(--color-primary);
        border: 0.0625rem solid transparent;
        box-shadow: none;
    }

    .link-button:disabled {
        background: var(--color-gray-0);
        box-shadow: none;
        opacity: 30%;
        color: var(--color-primary);
    }