:root{
    --color-rosado-1: #8C1AAA;
    --color-rosado-2: #5D428E;
    --color-rosado-3: #C77DB5;
    --color-fondo-1: #5427851a;
    --color-text: #242426;
    --color-title: #303880;
    --color-fondo-important: #FBE7F0;
    --color-fondo-gris: #F2F2F2;
    --color-success: #198759;
    --color-danger: #dc3545;
    --color-primary: #007bff;
    --color-info: #17a2b8;
    --color-warning: #ffc107;
    --color-boton: #8C1AAA;
    --color-celeste: #74BCDB;
}



html {
    scroll-behavior: smooth;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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


ul,ol{
    list-style: none;
}

img{
    vertical-align: middle;
    border-style: none;
}

a{
    text-decoration: none;
}

.uppercase{
    text-transform: uppercase;
}

body{
    font-family: "Roboto", serif;
    background-color: #fff;
}

.letra-espaciada {
    letter-spacing: 3px; 
}

h1,h2,h3,h4,h5,h6{
    font-family: "Roboto Slab", sans-serif;
    color: var(--color-title);
    font-weight: bold;
}

.no-padding{
    padding: 0 !important;
}

.no-color{
    background-color: transparent !important;
}

#loader{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    background-color: #fff;
    z-index: 100000000;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
}

#loader .loader{
    left:50%;
    position:absolute;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width: 400px;
}


#loader .loader img{
    width: 200px;
    max-width: 200px;
    height: auto;
    object-fit: cover;
    vertical-align: middle;
    position: relative;
    
}

.link-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}


.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
}

.container--md{
    width: 100%;
    max-width: 1200px;
}

.container--sm{
    width: 100%;
    max-width: 1000px;
}

.container--xs{
    width: 100%;
    max-width: 900px;
}

.container--xxs{
    width: 100%;
    max-width: 800px;
}

.container--min{
    width: 100%;
    max-width: 600px;
}

.block_disabled {
    opacity: .6;
    user-select: none;
    pointer-events: none; 
}

.hide{
    display: none !important;
}

.pdt{
    padding-top: 60px;
}

.pdb{
    padding-bottom: 60px;
}

@media screen and (max-width: 768px){
    .pdt{
        padding-top: 50px;
    }
    
    .pdb{
        padding-bottom: 50px;
    }

    .hide-desktop{
        display: block !important;
    }

    .hide-mobile{
        display: none !important;
    }

}


.pt-40{
    padding-top: 40px;
}

.pt-10{
    padding-top: 10px;
}

.pt-20{
    padding-top: 20px;
}

.pt-30{
    padding-top: 30px;
}

.mt-40{
    margin-top: 40px;
}

.mt-10{
    margin-top: 10px;
}

.mt-20{
    margin-top: 20px;
}

.mt-30{
    margin-top: 30px;
}

.mb-40{
    margin-bottom: 40px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-20{
    margin-bottom: 20px;
}

.mb-30{
    margin-bottom: 30px;
}

.text-right{
    text-align: right;
}

.no-scroll{
    overflow: hidden;
}

.relative{
    position: relative;
}

.absolute{
    position: absolute;
}

@media screen and (min-width: 768px) {
    .container {
        padding: 0 40px;
    }

    .hide-desktop{
        display: none !important;
    }

    .hide-mobile{
        display: block !important;
    }
    
}
/* =======================================
    HEADER
=========================================*/

header{
    background-color: #fff;
    padding: 12px 0;
    position: relative;
}

.is-fixed{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .1);

}

.h__wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.h__logo img{
    width: auto;
    height: 48px;
}

.h__logo_absolute{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
}

.nav_login__link svg{
    width: 23px;
    height: auto;
}

.nav_login__link svg path{
    fill: var(--color-text);
}
.h__nav_login{
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.nav_login__dividor{
    width: 1px;
    height: 20px;
    background-color: var(--color-text);
    opacity: .7;
}

.nav_login__link a{
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.nav_login__link p,.nav_login__link a{
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
}

.nav_login__link a:hover{
    color: var(--color-rosado-2);
}

.nav_login__link a:hover p{
    color: var(--color-rosado-2);
}

.nav_login__link a:hover svg path{
    fill: var(--color-rosado-2);
}

.nav_login__active p span{
    font-size: 10px;
    color: var(--color-success);
}

.nav_login__link.nav_login__active a::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--color-success);
    border-radius: 50%;
    left: 13px;
    bottom: -2px;
}

/* ==================== END HEADER ==================== */

/* =======================================
    MENU
=========================================*/

.h__menu_principal{
    position: relative;
}

.h__menu_principal ul{
    display: flex;
    align-items: center;
    gap: 20px;
}

.h__menu_principal ul li a{
    color: var(--color-text);
    font-weight: 500;
    font-weight: 15px;
}

/* ==================== END MENU ==================== */

/* =======================================
    FOOTER
=========================================*/

.copy-right{
    background-color: var(--color-rosado-2);
    color: #888888;
    padding: 20px 0;
}
   
.copy-right .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap:1.3rem;
}
.copy-right .firma{
    opacity: .6;
}
.copy-right  .firma a{
    color: #fff;
    opacity: 5;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.copy-right  .firma a svg{
    width: 80px;
    padding-left: 10px;
    height: auto;
}

.copy-right  .firma a svg path,.copy-right  .firma a svg rect{
    fill: #fff;
}
.copy-right .text  p{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    opacity: .8;
}

footer{
    background-color: var(--color-fondo-1);
    padding: 60px 0;
}
.f__logo{
    margin-bottom: 50px;
}

.f__logo:last-child{
    margin-bottom: 0;
}

.f__logo img{
    height: 56px;
    width: auto;
    object-fit: cover;
}

.f__title{
    font-size: 16px;
    color: var(--color-title);
    text-transform: uppercase;
}

.f__social_media{
    margin-top: 40px;
}

.social_media__redes{
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.social_media__redes a{
    display: inline-flex;
    color: var(--color-rosado-2);
    font-size: 22px;
}


.f__data_contact{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap:2rem;
}

.f__contact_item{
    display: flex;
    gap: 14px;
    align-items: flex-start;
}


.f__contact_item_icono{
    width: 26px;
    height: 26px;
}

.f__contact_item_icono svg{
    width: 100%;
    height: 100%;
}

.f__contact_item_icono svg path{
    fill: var(--color-rosado-2);
}

.f__contact_item_text{
    width: calc(100% - 26px - 14px);
}

.f__contact_item_text p{
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}

.f__contact_item_text p  a{
    color: var(--color-text);
}

.f__contact_item_text span{
    font-size: 15px;
    opacity: .7;
    color: var(--color-text);
}

.f__contact_item_text span a{
    color: var(--color-text);
}

/* ==================== END FOOTER ==================== */


/* =======================================
    GRID
=========================================*/

.container_grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
}

.d-flex{
    display: flex;
}

.d-grid{
    display: grid;
}

.grid_1{
    grid-template-columns: 1fr;
}

.grid_2{
    grid-template-columns: repeat(2, 1fr);
}

.grid_3{
    grid-template-columns: repeat(3, 1fr);
}

.gap-05{
    gap: .5rem;
}

.gap-1{
    gap: 1rem;
}

.gap-2{
    gap: 2rem;
}

.gap-3{
    gap: 3rem;
}

.gap-4{
    gap: 4rem;
}

.gap-5{
    gap: 5rem;
}

.row-gap-1{
    row-gap: 1rem;
}

.row-gap-2{
    row-gap: 2rem;
}

.row-gap-3{
    row-gap: 3rem;
}

.row-gap-4{
    row-gap: 4rem;
}

.row-gap-5{
    row-gap: 5rem;
}

.column-gap-1{
    column-gap: 1rem;
}

.column-gap-2{
    column-gap: 2rem;
}

.column-gap-3{
    column-gap: 3rem;
}

.column-gap-4{
    column-gap: 4rem;
}

.column-gap-5{
    column-gap: 5rem;
}

.flex-column{
    flex-direction: column;
}

.flex-row{
    flex-direction: row;
}

.flex-wrap{
    flex-wrap: wrap;
}

.flex-nowrap{
    flex-wrap: nowrap;
}

.flex-column-reverse{
    flex-direction: column-reverse;
}

.flex-row-reverse{
    flex-direction: row-reverse;
}

.grid_column_1{
    grid-column: span 1;
}

.grid_column_2{
    grid-column: span 2;
}

.grid_column_3{
    grid-column: span 3;
}

.grid_column_4{
    grid-column: span 4;
}

.grid_column_5{
    grid-column: span 5;
}

.grid_column_6{
    grid-column: span 6;
}

.grid_column_7{
    grid-column: span 7;
}

.grid_column_8{
    grid-column: span 8;
}

.grid_column_9{
    grid-column: span 9;
}

.grid_column_10{
    grid-column: span 10;
}

.grid_column_11{
    grid-column: span 11;
}

.grid_column_12{
    grid-column: span 12;
}

.justify-content-center{
    justify-content: center;
}

.justify-content-end{
    justify-content: flex-end;
}

.justify-content-start{
    justify-content: flex-start;
}

.justify-content-between{
    justify-content: space-between;
}

.justify-content-around{
    justify-content: space-around;
}

.justify-content-evenly{
    justify-content: space-evenly;
}

.align-items-center{
    align-items: center;
}

.align-items-end{
    align-items: flex-end;
}

.align-items-start{
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .grid_column_1, 
    .grid_column_2, 
    .grid_column_3, 
    .grid_column_4, 
    .grid_column_5, 
    .grid_column_6,
    .grid_column_7,
    .grid_column_8,
    .grid_column_9,
    .grid_column_10,
    .grid_column_11,
    .grid_column_12 {
        grid-column: span 6;
    }

}

@media (max-width: 768px) {
    .grid_column_1, 
    .grid_column_2, 
    .grid_column_3, 
    .grid_column_4, 
    .grid_column_5, 
    .grid_column_6,
    .grid_column_7,
    .grid_column_8,
    .grid_column_9,
    .grid_column_10,
    .grid_column_11,
    .grid_column_12 {
        grid-column: span 12;
    }

    .gap-3,.gap-4,.gap-5{
        gap: 1rem;
    }
}

/* ==================== END GRID ==================== */


/* =======================================
    WP CONTENT
=========================================*/

.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6{
    margin-bottom: 20px;
}

.wp-content p{
    font-size: 16px;
    color: var(--color-text);
    line-height: 24px;
    font-weight: 400;
}

.wp-content p img{
    max-width: 100%;
    height: auto;
}

.wp-content p+p{
    margin-top: 15px;
}

.wp-content a{
    color: var(--color-rosado-1);
    font-weight: 600;
    text-decoration: underline;
}

.wp-content a img{
    max-width: 100%;
    height: auto;
}

.wp-content ul,ol{
    list-style: none;
    margin: 20px 0 ;
}

.wp-content ul li, .wp-content ol li{
    font-size: 16px;
    color: var(--color-text);
    line-height: 24px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 400;
}

.wp-content ul li:last-child, .wp-content ol li:last-child{
    margin-bottom: 0;
}

.wp-content ul li img, .wp-content ol li img{
    max-width: 100%;
    height: auto;
}

.wp-content ul{
    padding-left: 0;
}

.wp-content>ul>li::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 300;
    content: "\f058";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--color-celeste);
    font-size: 18px;
}

.wp-content>ul>li>ul>li::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 300;
    content: "\f111";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--color-rosado-2);
    font-size: 11px;
}

.wp-content>ul>li>ul>li>ul>li::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--color-rosado-2);
    font-size: 14px;
}

.wp-content ol{
    counter-reset: list-counter; 
}


.wp-content ol li{
    counter-increment: list-counter;
}

.wp-content ol li::before{
    content: counter(list-counter) ".";
    position: absolute;
    top: 3px;
    left: 0;
    color: var(--color-rosado-2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
}

.wp-content ol li img{
    max-width: 100%;
    height: auto;
}

.wp-content  blockquote{
    margin-top: 20px;
    padding: 15px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: 600;
    background-color: #fff3f2;
    color: var(--color-fondo-important);
    border-radius: 7px;
    
}

.wp-content blockquote img{
    max-width: 100%;
    height: auto;
}

.wp-content blockquote p{
    color: var(--color-rosado-2);
}

.wp-content blockquote p img{
    max-width: 100%;
    height: auto;
}

.block-columns .columns{
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

.block-columns .columns .col{
    width: 100%;
}


.html__iconos .html__icon{
    display: flex;
    align-items: center;
    gap: 13px;
}

.html__iconos .html__icon .icono{
    width: 32px;
    height: 32px;
}

.html__iconos .html__icon .icono img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.html__iconos .html__icon p{
    width: calc(100% - 32px - 13px);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text);
    margin: 0;
}


.accordion {
    overflow: hidden;
    
}

.accordion .accordion-item{
    border: 1px solid #d3d3d37d;
    margin-bottom: 30px;
    border-radius: 5px;
    overflow: hidden;
}

.accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion .accordion-item .accordion-header {
    width: 100%;
    padding: 15px 20px;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-title);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    margin: 0;
}

.accordion .accordion-item .accordion-header:hover {
    background-color: #f1f1f1;
}

.accordion .accordion-item .accordion-header::after {
    content: '+';
    font-size: 20px;
    color: var(--color-title);
}

.accordion .accordion-item .accordion-header.active::after {
    content: '-';
    color: var(--color-title);
}

.accordion .accordion-item .accordion-header .title-visible{
    background-color: #f1f1f1;
    border-color: var(--color-title);
    color: #fff;
}

.accordion .accordion-item .accordion-header .title-visible::after {
    color: #fff;
}

.accordion .accordion-item .accordion-content {
    display: none;
    padding: 20px;
    overflow: hidden;
}

.adw-banner-page{
    padding: 40px 0;
    background-color: var(--color-title);
}

.adw-banner-page .bp-title{
    font-size: 36px;
    font-weight: 600;
    padding-bottom: 26px;
    position: relative;
    color: var(--color-celeste);
    text-align: center;
}

.adw-banner-page .bp-title::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: var(--color-celeste);
}

/* ==================== END WP CONTENT ==================== */


/* =======================================
    SWIPPER
=========================================*/

.swiper{
    width: 100%;
    height: 100%;
}

.swiper .swiper-button-next, .swiper .swiper-button-prev{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.7);
}

.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after{
    font-size: 18px;
    color: var(--color-text) ;
}

.swiper .swiper-pagination{
    text-align: left;
    left: 20px;
    display: flex;
    align-items: center;
}

.swiper .swiper-pagination .swiper-pagination-bullet{
    background-color: transparent;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
    opacity: .8;
}
.swiper .swiper-pagination .swiper-pagination-bullet-active{
    width: 14px;
    height: 14px;
    background-color: var(--color-rosado-2);
    border-color: #fff;
}

.home-slider .slide-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== END SWIPPER ==================== */

/* =======================================
    TABS
=========================================*/

.tabs__destacado{
    margin-bottom: 40px;
    padding: 30px;
    border-radius: 16px;
    background-color: var(--color-fondo-important);

    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 2rem;
}

.tabs__destacado h2{
    margin-bottom: 30px;
}

.tabs__destacado p{
    color: var(--color-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
}

.tabs__destacado p+p{
    margin-top: 20px;
}

.tabs__destacado .icono{
    width: 180px;
    height: 180px;
}

.tabs__destacado .icono img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tabs__wrap{
    display: flex;
    justify-content: space-between;
    gap: 7rem;
}

.tabs__navs {
    width: 100%;
    max-width: 220px;
    position: sticky;
    top: 100px; 
    align-self: start;
}

.tabs__contents{
    width: calc(100% - 220px - 7rem);
}


.tabs__navs_links{
    padding-left: 20px;
    border-left: 1px solid #11344c80;
}

.tabs__navs_links li, .tabs__navs_links li a{
    color: #939393;
    font-size: 16px;
}

.tabs__navs_links li:hover a, .tabs__navs_links li.active a{
    color: var(--color-celeste);
    font-weight: 600;
}

.tabs__navs_links li {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .tabs__wrap {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .tabs__navs,
    .tabs__contents {
        width: 100%;
        max-width: none;
        position: static; 
    }
}
.perfil-tabs .tabs-nav {
    white-space: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    border-bottom: 1px solid #f1ecec;
    display: flex;
    align-items: center;
}

.perfil-tabs .tab-item { display: none; }
.perfil-tabs .tab-item.active { display: block; }

.perfil-tabs .tabs-nav li { 
    cursor: pointer; 
    display: inline-block; 
    margin-right: 10px; 
    padding: 5px 10px; 
    border-bottom: 2px solid transparent;
    color: #535353;
    font-size: 15px;
    font-weight: 500;
    opacity: .7;
    margin-right: 15px;
}
.perfil-tabs .tabs-nav li.active { 
    font-weight: bold; 
    border-bottom: 2px solid var(--color-celeste);
    color: var(--color-celeste);
    opacity: 1; 

}


.perfil-tabs .tabs-nav li.tab-destacado.active{
    border-bottom: transparent;
}

.perfil-tabs .tabs-nav li.tab-inactive {
    cursor: not-allowed;
    user-select: none;  
    opacity: .4;     
}

.perfil-tabs .tabs-nav li.tab-destacado span{
    background-color: var(--color-danger);
    color: #fff;
    padding: 5px 7px;
    font-size: 14px;
    border-radius: 4px;
}

.perfil-tabs .tabs-nav li.tab-destacado span i{
    font-size: 10px;
}

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

.perfil-tabs .tabs-content{
    margin-top: 40px;
}

.ver-lecturas{
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .perfil-tabs .tabs-nav {
        white-space: nowrap; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
    }
}

.dmpopup { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    display: none;
    justify-content: center;
    z-index: 1050;
    
    padding: 50px 0; 
    
    overflow-y: auto; 
}

.dmpopup-body {
    position: relative;
    min-height: 200px; 
}


.dmpopup.is-active{
    display: flex;
}

.dmpopup-content { 
    background: #fff; 
    padding: 50px 20px; 
    width: 95%;
    max-width: 450px; 
    
    margin: auto; 
    
    position: relative; 
    border-radius: 15px;

    max-height: calc(100vh - 100px); 
    
    overflow-y: scroll; 

    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.dmpopup-content::-webkit-scrollbar {
    
    display: none; 
    width: 0; 
    height: 0; 
}

.dmpopup-close{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #ffe0e3;
    color: var(--color-danger);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;

    cursor: pointer;
    outline: 0;
    border: transparent;
}



.dmpopup.dmpopup-max .dmpopup-content{
    max-width: 940px;
}

.dmpopup.dmpopup-detalles .dmpopup-content{
    padding: 0;
}

.dmpopup-footer{
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dmpopup.dmpopup-detalles .detalle-item-content{
    padding-top: 10px;
    margin-bottom: 40px;
}


.detalle-table-content{
    padding: 0 50px;
    margin-top: 50px;
}

.dmpopup.dmpopup-detalles .detalle-titulo {
    font-size: 28px;
    max-width: 600px;
    color: var(--color-text);
    text-align: center;
    margin: auto;
    margin-bottom: 30px;
}

.dmpopup-detalles .detalle-portada{
    width: 100%;
}
.dmpopup-detalles .detalle-portada img{
    height: auto;
    max-width: 100%;
    display: block;
    margin: auto;
}


.dmpopup-content h4{
    margin-bottom: 20px;
    text-align: center;
}

.trans-mesanje{
    text-align: center;
    margin-bottom: 50px;

}

.dmpopup-botones{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 30px;
}

.trans-mesanje p{
    font-size: 20px;
    font-weight: 600;
}

.dmpopup-content p{
    font-size: 16px;
    color: var(--color-text);
}


.dmpopup-loader {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #ccc;
    border-top-color: var(--color-boton);
    border-radius: 50%;
    animation: spinpopup 1s linear infinite;
}
  
@keyframes spinpopup {
    to {
      transform: rotate(360deg);
    }
}


.cuenta-bcp,.cuenta-yape{
    margin-top: 20px;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;

}

.cuenta-yape{
    margin-bottom: 20px;
}
.cuenta-bcp .logo, .cuenta-yape .logo{
    width: 100px;
}

.cuenta-bcp .logo img, .cuenta-yape .logo img{
    width: 100%;
    height: auto;
}

.cuenta-bcp ul,.cuenta-yape ul{
    width: calc(100% - 100px - 1rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cuenta-bcp ul li,.cuenta-yape ul li{
    color: var(--color-text);
    font-size: 16px;
}


.paquetes-list{
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.boton_siguinete-caja{
    max-width: 900px;
    margin: auto;
    margin-top: 40px;
}

.paquete-gradient {
    border-radius: 12px;
    padding: 3px;        
}

.paquete-item{
    background-color: #f3f3f3;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    border: 4px solid transparent; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.paquete-item h5{
    font-size: 20px;
    margin-bottom: 20px;
    padding-left: 50px;
    position: relative;
}

.paquete-gradient.selected,.paquete-gradient:hover{
    background: linear-gradient(90deg, var(--color-rosado-2), var(--color-rosado-3));
}

.paquete-item h5::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.paquete-item h5::after{
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.paquete-gradient.selected  h5::before{
    background-color: var(--color-title);
}

.paquete-item p{
    font-size: 16px;
    color: var(--color-text);
    opacity: .7;
    line-height: 22px;
}

.paquete-item hr {
    border: none;
    height: 1px;
    background-color: #6d6d6d33;
    margin: 30px 0;
}

.paquete-item .seleccion-paquete{
    opacity: 0;
    height: 0;
    visibility: 0;
    display: none;
}

.precios-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.precios-flex.flex-column{
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.precios-flex .precio-original {
    text-decoration: line-through;
    margin-right: 10px;
    color: #888;
    font-weight: 500;
    font-size: 18px;
}

.precios-flex .precio-desc {
    color: var(--color-danger);
    font-weight: bold;
}
.js-ver-detalle {
    cursor: pointer;
}

  
.precios-flex .valores {
    display: flex;
    align-items: center;
    color: var(--color-rosado-2);
    font-size: 20px;
    font-weight: 600;
}

.precios-flex .label{
    font-size: 15px;
    color: var(--color-text);
    opacity: .7;
}


.detalle-paquete-select{
    max-width: 450px;
    padding: 30px;
    border-radius: 15px;
    background-color: #f3f3f3;
}

.opciones-pago{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 450px;
}

.detalle-paquete-select p{
    font-size: 16px;
    color: var(--color-text);
    opacity: .8;
    line-height: 24px;
}

.js-tabs-nav-perfil li.disabled {
    opacity: 0.5; 
    cursor: default;
    pointer-events: none; 
}

.js-tabs-nav-perfil li.disabled {
    color: #aaa; 
    cursor: not-allowed; 
}

.estado-pago{
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 40px;
    display: block;
}

.estado-pago.success{
    color: var(--color-success);
}

.estado-pago.cancelado{
    color: var(--color-danger);
}

.acciones-pago{
    margin-top: 30px;
}

.mis-paquetes-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.pago-validacion{
    margin-top: 20px;
}

.pago-validacion a{
    margin-top: 15px;
    font-weight: 600;
    color: var(--color-title);
}

.info-acceso{
    margin-top: 20px;
}

.tag-estado{
    padding: 5px 10px;
    border-radius: 4px;
    background: #000;
    display: inline-block;
    color: #fff;
    font-size: 14px;
}

.tag-estado.tag-pendiente{
    background-color: var(--color-warning);
    color: var(--color-text);
}

.tag-estado.tag-pagado{
    background-color: var(--color-success);
}

.tag-estado.tag-cancelado{
    background-color: var(--color-danger);
}

/* ==================== END TABS ==================== */

/* =======================================
    BOTONES
=========================================*/

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    outline: 0;
    cursor: pointer;
    text-decoration: none;
    border: none;
    border-radius: 7px;
    background-color: #11344C;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.cookie-btn-whrite{
    background-color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 10px;
    color: #542785;
    cursor: pointer;
    font-weight: 600;
}

.btn-sm{
    height: 40px;
    font-size: 13px;
    padding: 0 15px;
}

.btn svg{
    width: 16px;
    height: 16px;
    margin-left: 12px;
    transition: all .4s ease;
}

.btn-border{
    background-color: transparent;
    border: 2px solid #ddd;
}

.btn-icono.btn-icono-youtube{
    padding: 0 20px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #e1002d;
    border-radius: 4px;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
}

.btn-icono.btn-icono-youtube i{

    font-size: 24px;
}

.btn-border-primary{
    border-color: var(--color-rosado-1);
    color:  var(--color-rosado-1);
}

.btn-border-primary svg path{
    fill:  var(--color-rosado-2);
    fill: currentColor;
}

.btn-border-primary:hover{
    background-color: var(--color-fondo-important);
}

.btn-primary{
    background: linear-gradient(
        to right,
        #5D428E 0%,  
        #8C1AAA 100%  
    );
    color: #fff;
}

.btn-secundario{
    background-color: #c5c5c5;
    color: #0f0e0e;
    font-weight: bold;
}


.btn-primary svg path{
    fill: currentColor;
    
}


.btn-primary:hover svg{
    margin-left: 20px;
}

.btn-success{
    background-color: var(--color-success);
    color: #fff;
}

.btn-secondary{
    background-color: #ddd ;
    color: #878787;
}

.is-loading {
    opacity: 0.5 !important;
    cursor: wait !important;
    transition: none !important; 
}

.btn-success svg path{
    fill: #fff;
}

.btn-success:hover{
    background-color: #155724;
}

.btn-success:hover svg{
    margin-left: 20px;
}

.swal-custom-btn{
    background-color: var(--color-success) !important;
}

.btn-link{
    display: flex;
    align-items: center;
    gap: 12px;
    outline: 0;
    border: 0;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.link-danger{
    color: var(--color-rosado-1);
}

.link-primary{
    color: var(--color-rosado-2);
}

.link-blanco{
    color: #fff;
    transition: all .2s ease;
}

.link-blanco:hover{
    color: var(--color-rosado-1);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-rosado-1);
}

.link-blanco:hover svg path{
    fill: var(--color-rosado-1);
}

.btn-disabled{
    cursor: not-allowed;
    opacity: .6;
    user-select:none;
}

/* ==================== END BOTONES ==================== */

/* =======================================
    BANNER
=========================================*/
.banner{
    background-color: var(--color-rosado-3);
    padding: 16px 0;
}


.banner-gradient{
    background: linear-gradient(
        to right,
        #1C63A8 0%,      /* Izquierda */
        #75BCDB 60%,     /* Un poco corrido hacia la derecha */
        #E1DF3E 100%     /* Derecha */
    );
}


.banner__wrap{
    display: flex;
    justify-content: space-between;
    gap: 6rem;
    align-items: center;
}

.banner__numero{
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: bold;
    border: 3px solid rgba(255, 255, 255, .3);
    color:#fff;
    background-color: transparent;
    border-radius: 50%;
}

.banner__text{
    font-size: 16px;
    font-weight: bold;
    font-family: 'Roboto Slab', Courier, monospace;
    color: #fff;
}

.banner__text.text-lg{
    font-size: 30px;
}

.banner__item{
    display: flex;
    gap: 1rem;
    align-items: center;
}

.banner__left{
    display: flex;
    align-items: center;
    gap:2rem;
}

/* ==================== END BANNER ==================== */

/* =======================================
    FORM Y LOGIN
=========================================*/

form{
    font-family: "Roboto", serif;
}

form input{
    font-family: "Roboto", serif;
}

form label.error,form span.error,form span.error-text{
    font-size: 13px;
    color: var(--color-danger);
    opacity: 1;
    margin-top: 4px;
    position: relative;
    display: block;
}

.login__title{
    margin-bottom: 40px;
}

.login__link{
    font-size: 15px;
    color: var(--color-rosado-1);
    margin-bottom:20px;
    display: inline-block;
}
/* ============== CHECKBOX ============== */
.checkbox-wrapper input[type="checkbox"],
.checkbox-wrapper input[type="radio"] {
    opacity: 0; 
    position: absolute;
    z-index: -1; 
    width: 0; 
    height: 0; 
}

.checkbox-wrapper .terms-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-wrapper .terms-label .label-text {
    color: var(--color-text) ;
    font-size: 15px;
    width: calc(100% - 25px - 10px);
}

.checkbox-wrapper .terms-label .label-text a{
    color: var(--color-rosado-2);
    text-decoration: underline;
}

.checkbox-wrapper .checkbox-svg {
    width: 25px;
    height: 25px;
}

.checkbox-wrapper .checkbox-box {
    fill: #c3c3c3;
    stroke: var(--color-rosado-2);
    stroke-dasharray: 565; 
    stroke-dashoffset: 565;
    transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper .checkbox-tick {
    stroke: transparent;
    stroke-dasharray: 172;
    stroke-dashoffset: 172;
    transition: stroke-dashoffset 0.6s ease-in;
}

/* Estilos para el checkbox */
.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box,
.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
    stroke-dashoffset: 0;
}

.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box{
    fill: #fff;
}

/* Estilos para el radio button */
.checkbox-wrapper input[type="radio"]:checked + .terms-label .checkbox-box {
    stroke-dashoffset: 0;
    fill: #fff;
}

.checkbox-wrapper input[type="radio"]:checked + .terms-label .checkbox-tick {
    fill: var(--color-rosado-2); 
}

.form__checkbox{
    margin-bottom: 20px;
}

.form__checkbox .form__checkbox_input {
    opacity: 0;
    height: 0;
    visibility: hidden;
    
}

.form__checkbox .form__checkbox_input:checked + .form__checkbox_label span:first-child{
    background: var(--color-rosado-2);
    border-color: var(--color-rosado-2);
    animation: wave-46 0.4s ease;
}

.form__checkbox .form__checkbox_input:checked + .form__checkbox_label span:first-child svg{
    stroke-dashoffset: 0;
}

.form__checkbox .form__checkbox_input:checked + .form__checkbox_label span:first-child::before{
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
} 


.form__checkbox .form__checkbox_label {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form__checkbox .form__checkbox_label span{
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.form__checkbox .form__checkbox_label span a{
    color: var(--color-rosado-2);
    font-weight: 500;
}

.form__checkbox .form__checkbox_label span:last-child{
    width: calc(100% - 24px - 10px);
}

.form__checkbox .form__checkbox_label span:first-child{
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid #9098a9;
    transition: all 0.2s ease;
    
}

.form__checkbox .form__checkbox_label span:first-child svg{
    position: absolute;
    top: 6px;
    left: 6px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.form__checkbox .form__checkbox_label span:first-child::before{
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-rosado-2);
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}

.form__checkbox .form__checkbox_label:hover span:first-child{
    border-color: var(--color-rosado-2);
}


@keyframes wave-46 {
    50% {
      transform: scale(0.9);
    }
}

/* ============== END CHECKBOX ============== */

.form__group{
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

.form__group .form__label{
    font-size: 14px;
    color: #a7a7a7;
    margin-bottom: 8px;
    display: block;
    font-weight: 400;
}

.form__group .form__label span{
    color: var(--color-danger);
}

.form__group .form__control{
    width: 100%;
    height: 50px;
    line-height: 28px;
    padding: 0 1.3rem;
    border: 1px solid #dfdfdf;
    border-radius: 8px;
    outline: none;
    background-color: transparent;
    color: var(--color-text);
    transition: .3s ease;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    appearance: none;
}

.form__group .form__control::placeholder{
    color: #aaa;
    font-weight: 400;
    font-size: 15px;
}

.form__group .form__control.readonly{
    background-color: #ddd;
    user-select: none;
    cursor: not-allowed;
    pointer-events: none; 
    color: #6d6d6d;
}

.form__group .form__control[type='number'] {
    appearance: textfield;
}

.form__group .form__control[type='number']::-webkit-inner-spin-button,
.form__group .form__control[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none; 
    margin: 0; 
}

.form__group .form__control:hover,.form__group .form__control:focus{
    outline: none;
    border-color: rgba(144, 63, 152, .7);
    box-shadow: 0 0 0 4px rgba(144, 63, 152, .1);
}

.form__select_down{
    position: absolute;
    top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    right: 10px;
}
.form__select_down svg{
    width: 18px;
    height: 18px;
}

.form__select_down svg g{
    fill: #b9b9b9;
}

.form__select_down.select_label{
    top: 42px;
}


.form__group select.form__control {
    color: #aaa; 
}

.form__group select.form__control option {
    color: var(--color-text); 
}

.form__group select.form__control option[disabled] {
    color: #aaa; 
}

.form__textarea{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 150px;
    max-height: 200px;
    padding: 20px !important;
}

.form__row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 25px;
    
}

.form__row .form__group{
    margin-bottom: 0;
    width: calc(50% - 1rem);
}

.form__message_error p{
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-danger) !important;
}

.form__radio_button{
    margin-bottom: 20px;
}

.form__radio_button.text_color .label-text {
    color: var(--color-text);
    
}

.form__radio_button.text_color .label-text a{
    color: var(--color-rosado-2);
}

.mensaje-verificacion{
    font-size: 14px;
    padding: 10px 20px;
    color: #000;
    background-color: #f2f2f2;
    border-radius: 4px;
    margin-bottom: 20px;
}


/* LOGIN */
.login_container{
   position: relative;
}

.login__wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #F7F8F8;
}

.login__wrap.login-wrap-center{
    align-items: flex-start;
}

.login__left_column {
    width:45%;
    position: sticky;
    top: 80px;
}

.login__left_column .imagen{
    width: 100%;
    height: 100%;
}

.login__left_column .imagen img{
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.login__right_column {
    width: 55%;
    padding: 50px;
}

.login__form_box{
    width: 100%;
    padding:50px;
    border-radius: 20px;
    background: #fff;
}

.login__form_box.box-login-in{
    max-width: 500px;
    margin: auto;
}


.login_notice{
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.login_notice .icono{
    width: 90px;
    height: 90px;
    background-color: var(--color-fondo-important);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 50%;
}

.login_notice svg{
    width: 40px;
    height: 40px;
}

.login_notice .icono svg path{
    fill: var(--color-rosado-2);
}

.login_notice p{
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    color: var(--color-text);
    max-width: 300px;
}

.login_notice .message_title{
    color: var(--color-rosado-1);
    font-size: 22px;
}

.login_notice h2{
    max-width: 300px;
}

.form__text_readonly{
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 30px;
    font-weight: 500;
    background-color: #f1f1f1;
    padding: 10px 10px;
    border-radius: 3px;
}

.form__text{
    margin-bottom: 22px;
    font-size: 16px;
    color: var(--color-text);
}

.form__text_important{
    font-size: 15px;
    color: var(--color-rosado-2);
}

.form__separator{
    width: 100%;
    height: 1px;
    background-color: #11344c45;
    margin: 30px 0;
}

.form__input_icon{
    position: relative;  
}

.form__input_icon .form__control{
    padding-right: 50px;
}

.form__input_icon  .form__control_icon{
    position: absolute;
    top: 17px;
    right: 0;
    font-size: 18px;
    padding: 0 10px;
    color: #b9b9b9;
    cursor: pointer;
}

.form__input_icon  .form__control_icon:hover{
    color: #787878;
}

.form__group .form__control.form__control_password{
    font-size: 30px;
    font-weight: 700;
}


.form__group .form__control.form__control_password::placeholder{
    color: #aaa;
    font-weight: 400;
    font-size: 15px;
}

.form__group .form__control.form__control_password::placeholder {
  color: #aaa;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
}

.form__group .form__control.form__control_password::-webkit-input-placeholder { 
    color: #aaa;
    font-size: 15px;
    font-weight: 400;
}
.form__group .form__control.form__control_password:-moz-placeholder { 
    color: #aaa;
    font-size: 15px;
    font-weight: 400;
}
.form__group .form__control.form__control_password::-moz-placeholder { 
    color: #aaa;
    font-size: 15px;
    font-weight: 400;
}
.form__group .form__control.form__control_password:-ms-input-placeholder { 
    color: #aaa;
    font-size: 15px;
    font-weight: 400;
}

.form__group .form__control.form__readonly{
    background-color: #11344c1c;
    opacity: .7;
}

.form__group .form__control.form__file{
    padding-top: 8px;
}

.form__reproducto_audio .name_cancion{
    font-size: 14px;
    color: var(--color-rosado-1);
}

.form__importante{
    margin-bottom: 40px;
}

.form__nota p{
    font-size: 14px;
    color: var(--color-text);
    opacity: .6;
    margin-bottom: 5px;
}

.form h4{
    color: var(--color-celeste);
}

.rating-wrapper {
    margin-bottom: 20px;
}

.rating-label {
    font-weight: 600;
    margin-bottom: 10px;
}

.required {
    color: #e53935;
}

.rating-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rating-text {
    font-size: 14px;
    color: var(--color-text);
    width: 60px;
    text-align: center;
}

.rating-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.rating-button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-text);
    background-color: transparent;
    color: var(--color-text);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rating-button:hover {
    transform: scale(1.1);
}

.rating-button.selected {
    background-color: var(--color-rosado-2);
    color: white;
    border: 2px solid var(--color-rosado-2);
}

.form_input_oculto{
    opacity: 0;
    visibility: hidden;
}

.form__enlaces_descarga p{
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 15px;
}

.form__enlaces_descarga a{
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    padding: 8px 14px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 5px;
}

.form__links{
    margin-top: 20px;
    font-size: 15px;
    color: var(--color-text);
}

.form__links a{
    color: var(--color-rosado-2);
    font-weight: 500;
    text-decoration: underline;
}

#confirm-email-wrapper{
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
}

#confirm-email-wrapper p{
    color: var(--color-text);
}

#confirm-email-wrapper p.error{
    color: var(--color-danger);
}

.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
}

.user-trigger span{
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.user-trigger svg {
    width: 22px;
    height: 22px;
}

.user-menu {
    position: absolute;
    top: 120%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    list-style: none;
    margin: 0;
    padding: 10px;
    min-width: 160px;
    display: none;
    z-index: 1000;
}

.user-menu li {
    margin: 0;
}

.user-menu li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    background-color: transparent;
}

.user-menu li a:hover {
    background-color: #54278521;
}

.user-menu li.link-cerrar-sesion a:hover{
    background-color: #dc35452b;
    color: var(--color-danger);
}



.user-dropdown.active .user-menu {
    display: block;
}


/* ==================== END FORM Y LOGIN ==================== */

/* =======================================
    ALERTS
=========================================*/
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert a{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-rosado-1);
    text-transform: uppercase;
    text-decoration: underline;
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}


.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-success {
    background-color: var(--color-success) !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}

.colored-toast.swal2-icon-error .swal2-icon,
.colored-toast.swal2-icon-success .swal2-icon {
    color: #fff !important;
    border-color: #fff !important;
}

.colored-toast.swal2-icon-error .swal2-icon .swal2-x-mark-line-left,
.colored-toast.swal2-icon-error .swal2-icon .swal2-x-mark-line-right,
.colored-toast.swal2-icon-success .swal2-icon .swal2-success-line-long,
.colored-toast.swal2-icon-success .swal2-icon .swal2-success-line-tip{
    background-color: white !important;
}


.colored-toast.swal2-icon-success .swal2-icon  .swal2-success-ring{
    border-color: #fff !important;
}

.colored-toast.swal2-icon-success .swal2-icon .swal2-success-circular-line-left,
.colored-toast.swal2-icon-success .swal2-icon .swal2-success-circular-line-right,
.colored-toast.swal2-icon-success .swal2-icon .swal2-success-fix{
    background-color: transparent !important;
}

/* ==================== END ALERTS ==================== */


/* =======================================
    ADMIN PARTICIPANTES
=========================================*/
.admin__banner{
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 20px;
    background: var(--color-fondo-important);
}

.admin__banner .left{
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin__banner .left .icono{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin__banner .left .icono svg{
    width: 24px;
    height: 24px;
}

.admin__banner .left .icono svg path{
    fill: var(--color-rosado-2);
}

.admin__title span{
    font-size: 14px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin__title span svg{
    width: 25px;
    height: 25px;
}

.admin__title span svg path,
.admin__title span svg circle{
    fill: var(--color-celeste);
}


.admin__title a{
    font-size: 14px;
    color: var(--color-rosado-2);
    text-decoration: underline;
    font-weight: 500;
    margin-left:10px;
}

.admin__ins_lists p{
    font-size: 15px;
    
    margin-bottom: 14px;
    color:#11344cba;
}

.admin__ins_lists p strong{
    color: var(--color-text);
}

.admin__ins_lists h3{
    margin-bottom: 20px;
    border-bottom: 2px dotted var(--color-text);
    color: var(--color-text);
    padding-bottom: 12px;
}

.admin__ficha_tabs ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
}

.admin__ficha_tabs ul li{
    background-color: #F1F1F1;
    padding: 14px 24px;
    font-size: 15px;
    color: #11344c85;
    text-align: center;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.admin__ficha_tabs ul li i{
    color: var(--color-success);
    font-size: 16px;
    margin-left: 6px;
}

.admin__ficha_tabs ul li.filled{
    color: var(--color-text);
}

.admin__ficha_tabs ul li.earring{
    cursor: not-allowed;
    opacity: 0.6;
    user-select: none;
}

.admin__ficha_tabs ul li.tab_click{
    cursor: pointer;
    opacity: 1;
    user-select:auto;
}


.admin__ficha_tabs ul li.active{
    background-color: #fff;
    color: var(--color-title);
    font-weight: 500;
    border-bottom-color: var(--color-title);
}

.admin__ficha_content{
    margin-top: 50px;
    margin-bottom: 60px;
}

.detalle-inscripcion-content{
    padding: 50px;
}

.welcome-message p.lead{
    font-size: 15px;
    color: var(--color-text);
    opacity: .8;
}

.detalle-inscripcion-content hr{
    margin: 40px 0;
    border: none;
    border-top: 2px dotted #ccc;
}

.welcome-message{
    margin-top: 15px;
}

.admin__ficha_content .admin__tabs_content_item{
    display: none;
    opacity: 0;
}

.admin__ficha_content .admin__tabs_content_item.active{
    display: block;
    opacity: 1;
}

.admin__form{
    margin-top: 40px;
}

.admin__title_sub{
    font-size: 28px;
    margin-bottom: 50px;
    text-align: center;
}

/* TABLA PRECIOS */
.price-table {
    display: grid;
    grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    margin: auto;
    gap:5px;
}

.price-table.table-1{
    grid-template-columns: 2fr minmax(0, 1fr);
}

.price-table.table-2{
    grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr);
}

.price-row {
    display: contents;
}

.price-cell {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}



.th-disabled-bg{
    background-color: #8C1AAA;
    opacity: .5;
}

.price-bg {
    color: #8C1AAA;
    font-weight: bold;
    font-size: 1.3rem;
    background-color: #fcefff;
    cursor: pointer;
}

.price-disbaled{
    opacity: .5;
    cursor:not-allowed;
    background-color: #ddd;
    color: #0f0e0e;
}

.price-value{
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.price-disabled{
    cursor: not-allowed;
}

.price-vigente,.price-gratuita{
    background-color: #f7d9ff;
    color: var(--color-boton);
}

.price-vigente:hover{
    background-color: var(--color-boton);
    color: #fff;
}

.price-proximo{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #d6f3ff;
    opacity: .8;
}

.price-agotado .status-text,
.price-expirado .status-text,
.price-proximo .status-text,
.price-gratuita .status-text{
    font-size: 14px;
    font-weight: 500;
}

.price-agotado,.price-expirado{
    background-color: #ddd;
    position: relative;
}

.price-agotado .status-text ,.price-expirado .status-text{
    position: absolute;
    padding: 10px;
    border: 2px dotted #929292;
    left: 50%;
    color: #767676;
    width: calc(100% - 40px);
    top: 50%;
    transform: translate(-50%, -50%);
}

.price-proximo .status-text{
    color: var(--color-celeste);
}

.price-proximo small{
    font-size: 20px;
    font-weight: bold;
    color: var(--color-title);
}

/* ************************ */
/* Estilos de la Cabecera */
/* ************************ */

.header-row .header-cell {
    padding: 10px;
    font-size: 0.9rem;
}

.header-row .empty-cell {
    border: none;
    background-color: transparent;
}

.header-cell{
    font-size: 16px;
    font-weight: 400;
    color: var(--color-title);
}

.bg-cell{
    background-color: #fff;
    border: 2px solid transparent;
}

.header-row .header-cell.cell-dscto{
    background-color: #d2d6ff ;
    font-size: 18px;
    font-weight: bold;

}

.header-row .header-cell.cell-dscto.header-proximo{
    background-color: #def6ff;
}

.price-cell.header-cell.empty-cell.header-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.price-cell.header-cell.empty-cell.header-title h3{
    text-transform: uppercase;
}

/* ************************ */
/* Estilos de Detalle (1ra columna) */
/* ************************ */

.detail-cell {
    display: block; 
    text-align: left;
    padding: 15px 10px;
    background-color: #f1f1f1;
    border-left: 5px solid transparent;
}

.price-row:nth-child(odd) .detail-cell{
    border-left-color: var(--color-title);
    background-color: var(--color-title);
}

.price-row:nth-child(even) .detail-cell{
    border-left-color: var(--color-celeste);
    background-color: var(--color-celeste);
}

.cupos-info{
    margin-top: 20px;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
}

/* .price-row:nth-child(odd) .cupos-info{
    background-color: var(--color-celeste);
}


.price-row:nth-child(even) .cupos-info{
    background-color: var(--color-title);
} */


.cupos-info.cupos-agotado{
    font-size: 14px;
    background-color: var(--color-danger) !important;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    text-align: center;
    display: inline;
}

.detail-cell  .pack-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.detail-cell .description {
    font-size: 15px;
    margin-bottom: 20px;
}

.detail-cell .pack-title,
.detail-cell .description{
    color: #fff;
}

.detail-cell .wp-content p,
.detail-cell .wp-content a,
.detail-cell .wp-content ul li,
.detail-cell .wp-content ol li,
.detail-cell .wp-content h1,
.detail-cell .wp-content h2,
.detail-cell .wp-content h3,
.detail-cell .wp-content h4,
.detail-cell .wp-content h5,
.detail-cell .wp-content h6{
    color: #fff;
}

.detail-cell .wp-content p,
.detail-cell .wp-content a,
.detail-cell .wp-content ul li,
.detail-cell .wp-content ol li{
    line-height: 22px;
    font-size: 15px;
}
.detail-cell .wp-content ul li::before{
    color: #fff;
}
.price-group-label {
    opacity: .9;
    font-size: 14px;
    display: block;
    font-weight: 300;
    text-transform: capitalize;
    margin-top: 4px;
}

.packs{
    margin-top: 50px;
}

.packs-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.packs-columns{
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.packs-columns .packs__item_wrap{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.pack__item_portada{
    width: 100%;
}

.packs-columns .inscripcion-item .packs__item_wrap{
    align-items: center;
}

.sin-paquetes{
    max-width: 600px;
    margin: auto;
    text-align: center;
    margin-top: 40px;
}

.sin-paquetes p{
    font-size: 15px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 15px;
}

.sin-paquetes h4{
    margin-bottom: 10px;
}

.sin-paquetes p a{
    text-decoration: underline;
    font-weight: bold;
    color: var(--color-celeste);
}


.packs-columns .pack__item_portada{
    width: 100%;
}

.packs-columns .packs__item_content{
    width: 100%;
}   

.pack__item_portada img{
    width: 100%;
    height: auto;
    display: block;
}

.packs__item_content{
    padding: 0 20px;
    background-color: #fff;
}

.packs-columns .packs__item_content{
    padding: 40px;
}

.packs__item_content h4{
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--color-text);
}

.packs-columns .packs__item_content h4{
    font-size: 22px;
    max-width: 700px;
    text-align: center;
}

.packs-columns .packs__item_content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.packs__btn{
    margin-top: 20px;
}

.seleccion-modalidad-wrap,
.detalle-transferencia-wrap,
.subida-comprobante-wrap{
    padding: 50px;
}

.seleccion-title{
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40px;
}

.dmpopup-content h4.seleccion-title{
    margin-bottom: 10px;
}


.seleccion-title span{
    font-size: 18px;
    color: var(--color-celeste);
    font-weight: 500;
}

.botones-pago-wrap,
.boton-volver-detalles{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
}

.seleccion-subtitle {
    font-size: 18px;
    text-align: center;
    margin-bottom: 40px;
}

.seleccion-mensaje {
    text-align: center;
    margin-bottom: 10px;
    opacity: .8;
}

.dmpopup-content h4.subida-title{
    font-size: 20px;
}

.dmpopup-content h4.subida-title{
    margin-bottom: 40px;
}

.subida-grid{
    display: flex;
    justify-content: space-between;
    gap: 5rem;
    position: relative;
}

.subida-grid::before{
    position: absolute;
    content: '';
    left: 50%;
    top: 0;
    width: 0;
    height: 100%;
    border-right: 2px dotted;
    opacity: .3;
}

.subida-col{
    width: calc(50% - 2.5rem);
}

.inscripcion-id-display{
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
    font-weight: bold;
    color: #0898ba;
}



.subida-instruccion{
    margin-bottom: 30px;
}
.subida-instruccion p{
    font-size: 15px;
    color: var(--color-text);
    opacity: .8;
}

.subida-instruccion p+p{
    margin-top: 20px;
}

.mt-40{
    margin-top: 40px;
}

.subida-comprobante-wrap hr{
    margin: 40px 0;
    border: 1px solid #ddd;
}

#form-subir-comprobante{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.insc-info{
    margin: 15px 0; 
}

.insc-info ul{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.insc-info ul li{
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.insc-info ul li i{
    font-size: 20px;
}

.insc-info ul li i.fa-circle-check{
    color: var(--color-celeste);
}

.insc-info ul li i.fa-circle-xmark{
    color: var(--color-danger);
}

.insc-info ul li i.fa-circle-exclamation{
    color: var(--color-warning);
}

.status-badge{
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.status-badge.btn-warning {
    background-color: var(--color-warning);
    color: #fff;
}

.status-badge.btn-danger {
    background-color: var(--color-danger);
    color: #fff;
}

.status-badge.btn-success {
    background-color: var(--color-success);
    color: #fff;
}

/* ==================== END ADMIN PARTICIPANTES ==================== */

/* TOOTIPS */
.tippy-box[data-theme~='success'] {
    background-color: var(--color-success);
    color: #fff;
}

.tippy-box[data-theme~='success'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-success);
}

.tippy-box[data-theme~='success'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-success);
}

.tippy-box[data-theme~='success'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-success);
}

.tippy-box[data-theme~='success'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-success);
}

.tippy-box[data-theme~='warning'] {
    background-color: var(--color-warning);
    color: #fff;
}

.tippy-box[data-theme~='warning'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-warning);
}

.tippy-box[data-theme~='warning'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-warning);
}

.tippy-box[data-theme~='warning'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-warning);
}

.tippy-box[data-theme~='warning'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-warning);
}


.tippy-box[data-theme~='danger'] {
    background-color: var(--color-danger);
    color: #fff;
}

.tippy-box[data-theme~='danger'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-danger);
}

.tippy-box[data-theme~='danger'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-danger);
}

.tippy-box[data-theme~='danger'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-danger);
}

.tippy-box[data-theme~='danger'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-danger);
}

.tippy-box[data-theme~='info'] {
    background-color: var(--color-info);
    color: #fff;
}

.tippy-box[data-theme~='info'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-info);
}

.tippy-box[data-theme~='info'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-info);
}

.tippy-box[data-theme~='info'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-info);
}

.tippy-box[data-theme~='info'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-info);
}

.encuesta__intro{
    margin-bottom: 40px;
}

.fqs__modalidad{
    font-size: 18px;
    font-weight: bold;
    color: var(--color-celeste);
}

.fqs__general{
    margin-top: 30px;
}

.radio-buttons-container {
    display: flex;
    align-items: center;
    gap: 24px;
}

.radio-button {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.radio-button__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-button__label {
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 10px;
    position: relative;
    font-size: 15px;
    color: #848487;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.radio-button__custom {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.radio-button__input:checked + .radio-button__label .radio-button__custom {
    transform: translateY(-50%) scale(0.9);
    border: 5px solid var(--color-boton);
    color: var(--color-boton);
}

.radio-button__input:checked + .radio-button__label {
    color: var(--color-boton);
    font-weight: bold;
}

.radio-button__label:hover .radio-button__custom {
    transform: translateY(-50%) scale(1.2);
    border-color: var(--color-boton);
    box-shadow: 0 0 10px var(--color-fondo-2);
}

.fqs__subtitle{
    margin-bottom: 20px;
}

.fqs__tema{
    font-size: 17px;
    color: var(--color-rosado-2);
    font-weight: 500;
    margin-bottom: 10px;
}

.fqs__tema span{
    font-size: 14px;
    color: #979797;
    display: block;
    font-weight: 400;
}

.fqs__item{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 30px;
}

.fqs__item li p{
    margin-bottom: 15px;
    color: #000;
    font-weight: 500;
}

hr.linea{
    margin-bottom: 30px;
    opacity: .2;
}
.fqs__rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fqs__rating .rating input {
    display: none;
}

.fqs__rating .rating label span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f2f2f2;
    color: #7f7e7e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.fqs__rating .rating label span:hover {
    background-color: var(--color-rosado-1);
    color: #fff;
}

.fqs__rating .rating label span.active {
    background-color: var(--color-rosado-1);
    color: #fff;
}

.encuesta__tipo-modalidad{
    margin-bottom: 40px;
}

.encuesta__tipo-modalidad p{
    margin-bottom: 12px;
}

.form-content-encuesta {
    display: none;
}
.form-content-encuesta.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.recurso-incripcion{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.recurso-incripcion.w900{
    max-width: 900px;
    margin: auto;
}

.recurso-incripcion.full{
    max-width: 100%;
}

.recurso-incripcion .item{
    padding-bottom: 3rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.recurso-incripcion .item h4{
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}

.recurso-incripcion .item  .links-dias{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 20px;
    color: var(--color-celeste);
    font-weight: bold;
}

p.no-recursos{
    font-size: 15px;
    color: var(--color-text);
}

.link-fecha{
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.link-fecha i{
    color: var(--color-rosado-2);
}

.encuesta__navegacion {
    margin-bottom: 20px;
}

.encuesta__navegacion p{
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 10px;
}

.botones-dias {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.btn-dia {
    padding: 8px 16px;
    border-radius: 3px;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    transition: background 0.3s;
    font-size: 13px;
    text-transform: uppercase;
}
.btn-dia:hover {
    background: #ddd;
}
.btn-dia.active {
    background: var(--color-title);
    color: var(--color-celeste);
    font-weight: bold;
}

.live-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.live-video,
.live-chat {
    border-radius: 10px;
    overflow: hidden;
}

.live-video {
    flex: 1 1 65%;
    position: relative;
    height: auto;
}

.live-video iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    object-fit: cover;
}

.live-chat {
    flex: 1 1 30%;
    min-height: 500px;
    border: 1px solid #ddd;
}

.live-chat iframe{
    width: 100%;
    height: 100%;
}
.toggle-chat-btn {
    display: none; 
    background: #eee9f3;
    border: 1px solid #eee9f3;
    border-radius: 6px;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 600;
    margin: 10px 0;
    color: #5e428e;
}

/* =======================================
    MEDIA QUERY
=========================================*/
@media (max-width: 1024px){
    .h__logo_absolute{
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }

    .h__menu_principal,.h__logo.h__logo_left{
        display: none;
    }


    .packs-columns .packs__item_wrap {
        flex-direction: column;
    }

    .packs-columns .pack__item_portada,
    .packs-columns .packs__item_content{
        width: 100%;
    }

    .packs-columns .packs__item_content{
        padding: 30px;
    }
}
@media (max-width: 768px) {
    .h__logo.h__logo_left{
        display: none;
    }

    .nav_login__link p{
        display: none;
    }

    .admin__ficha_tabs ul{
        width: 100%;
        overflow-x: scroll;
    }

    .admin__ficha_tabs ul li{
        min-width: 300px;
    }

    .f__wrap.grid_2{
        grid-template-columns: 1fr;
    }

    .rating-text{
        display: none;
    }

    .rating-buttons{
        gap: 5px;
    }

    .rating-button{
        width: 32px;
        height: 32px;
    }

    .admin__banner{
        flex-direction: column;
        gap: 2rem;
    }

    .admin__banner .left{
        text-align: center;
        flex-direction: column;
    }

    .login_container{
        height: auto;
        flex-direction: column-reverse;
    }

    .login__right_column{
        width: 100%;
    }

    .banner__left{
        display: none;
    }

    .tabs__navs{
        position: sticky;
        top: 72px;
        background-color: #fff;
    }
    .tabs__navs_links{
        border-bottom: 1px solid transparent;
        border-left: none;
        display: flex;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap;
        scroll-behavior: smooth;
        gap: 20px;
        padding: 0;
        margin: 0;
        padding-bottom: 0;
        padding: 20px 0;
    }


    .tabs__navs_links li{
        flex: 0 0 auto; /* no dejar que se encajen o crezcan */
        min-width: 100px; 
    }

    .tabs__destacado{
        grid-template-columns: 1fr;
    }

    .tabs__destacado .icono{
        margin: auto;
    }

    .wp-content ul{
        padding-left: 0;
    }

    .wp-content ul li, .wp-content ol li{
        padding-left: 30px;
    }

    .banner__wrap{
        justify-content: center;
    }

    .block-columns .columns{
        gap: 2rem;
        flex-direction: column;
    }

    .adw-banner-page .bp-title{
        font-size: 28px;
    }

    .f__logo img{
        height: 45px;
    }

    .banner__wrap .right{
        flex-direction: column;
        align-items: stretch;
    }

    .admin__title a{
        display: block;
        margin-top: 10px;
        text-align: center;
    }

   

    


    .seleccion-modalidad-wrap, .detalle-transferencia-wrap, .subida-comprobante-wrap{
        padding: 25px;
    }

    .subida-grid{
        flex-direction: column;
        gap: 3rem;
    }

    .subida-grid::before{
        display: none;
    }


    .subida-col{
        width: 100%;
    }

    .login__wrap{
        flex-direction: column;
    }

    .login__left_column{
        display: none;
    }

    .login__right_column{
        padding: 20px;
    }

    .login__form_box{
        padding: 30px;
    }

    .form__row{
        flex-direction: column;
    }

    .form__row .form__group{
        width: 100%;
    }

    .detalle-table-content{
        padding: 0 20px;
    }

    .price-table{
        grid-template-columns: 1fr !important;
    }

    .price-value{
        min-height: 150px;
    }

    .botones-pago-wrap, .boton-volver-detalles{
        flex-direction: column;
        align-items: stretch;
    }

    #form-subir-comprobante{
        align-items: stretch;
    }

    .radio-buttons-container{
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .live-container {
        flex-direction: column;
    }

    .live-video,
    .live-chat {
        flex: 1 1 100%;
        width: 100%;
    }

    .toggle-chat-btn {
        display: inline-block;
      }
    
    .live-chat {
        min-height: 400px;
    }

    .live-chat iframe{
        width: 100%;
        height: 400px;
    }
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999; 
}
  
.loader-overlay .loader {
    border: 8px solid #e0e0e0;
    border-top: 8px solid var(--color-rosado-2);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
  

/* Estilos para SweetAlert2 Toast personalizado - Colores INFO (Azul) */
.swal2-container.swal2-top-end .swal2-popup.swal-toast-info {
    /* Color de Fondo (Azul claro/grisáceo) */
    background-color: #f0fcfe !important; /* Azul muy claro */
    /* Color del Texto (Azul oscuro para contraste) */
    color: var(--color-info)  !important; 
    /* Color del borde (Opcional) */
    border: 1px solid transparent !important;
}

/* Asegurar que el título y el texto usen el mismo color oscuro */
.swal2-container.swal2-top-end .swal2-popup.swal-toast-info .swal2-title,
.swal2-container.swal2-top-end .swal2-popup.swal-toast-info .swal2-html-container {
    color: var(--color-info)  !important;
}

.video-container {
    width: 100%;
    padding-top: 56.25%; 
    position: relative; 
    overflow: hidden; 
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}