/* 
----------------------ESTILOS POR IAMLUAZ------------------

CUALQUIER DUDA COMUNICARSE CONMIGO PARA CORREGIR/AGREGAR/ELIMINAR CUALQUIER ELEMENTO

MANDAR CORREO A: l.vasquezh2022@gmail.com 

TRABAJANDO EN LA VERSIÓN RESPONSIVE

*/

*{
    box-sizing: border-box !important;
    font-family: 'Roboto', sans-serif;
}
body, html {
    margin: 0;
}
body {
    transition: opacity 0.2s ease-in;
    width: 100vw;
    height: 100vh;
}
a{
    text-decoration: none;
}
ul{
    margin: 0;
    padding: 0;
}
.contents{
    display: contents !important;
}
h1,h2,h3,h4,b{
    font-family: 'Poppins', sans-serif !important;
}
/* estilos scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Ancho del scrollbar */
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color de fondo del track */
    /* border-radius: 0.4rem; */
}
::-webkit-scrollbar-thumb {
    /* border-radius: 0.4rem; */
    background: #cfcfcf; /* Color de fondo del thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color de fondo del thumb al hacer hover */
}

/* Texto de colores */
.white, .whitele{
    color: white;
}
.red{
    color: red;
}
.gray{
    color: #848484;
}
.margin-0{
    margin: 0 !important;
}
.display-block{
    display: block !important;
}
.center{
    text-align: center;
}
.start{
    text-align: start;
}
.w-50{
    width: 50% !important;
}
.w-60{
    width: 60% !important;
}
.w-70{
    width: 70% !important;
}
.w-80{
    width: 80% !important;
}
.w-95{
    width: 95% !important;
}
.w-100{
    width: 100% !important;
}
.main-wrapper{
    background-image: url("assets/global/fondo.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    overflow-x: hidden !important;
}

/* Para el Login */

.login-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    padding: 5%;
    max-width: 1224px;
}
.login-container p{
    font-size: 1.3rem;
    margin: 0.8% 0;
    color: #dcdcdc;
}
.login-container .inputs-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
}
.login-container .inputs-container input{
    margin: 1% 0;
    padding: 0.8rem 0.8rem;
    border: none;
    width: 100%;
    border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
    font-size: 1.4rem;
    outline: none;
}
.login-container .inputs-container input::placeholder{
    font-size: 1.4rem;
    color: #848484;
    transition: opacity 0.5s ease;
}
.login-container .btn-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
}
.login-container .btn-container .btn-section{
    display: flex;
    /* width: 42%; */
    justify-content: space-around;
}
.login-container .btn-container .btn-section button{
    background-color: transparent;
    padding: 0;
    margin: 3% 0;
    border: none;
    transition: 0.3s;
    outline: none;
    margin: 0 0.5rem 0 0;
}
.login-container .btn-container .btn-section button:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.login-container .btn-container .btn-section button img{
    cursor: pointer;
}
.login-container .btn-container .btn {
    padding: 0.8rem 2rem;
    border: solid white;
    color: white;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
}


.login-container .btn-container .btn:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.bc-one{
    align-items: center !important;
    justify-content: center !important;
}
.login-container .p-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
}
.login-container .p-container .btn{
    padding: 0.8rem;
    border: solid white;
    outline: none;
    color: white;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 0.4rem 0.4rem 0 0.4rem;
    transition: 0.3s;
    position: relative;
    margin: 2% 0;
}
.login-container .p-container p{
    font-size: 1.3rem;
    margin: 3% 0;
    color: white;
}
.login-container .p-container p a{
    color: white;
    text-decoration: underline;
}
input:focus::placeholder {
    opacity: 0;
    transition: opacity 0.9s ease; 
}


/* Index */

/* Estilos básicos para el menú */
.menu {
    list-style-type: none;
    margin: 0;
    user-select: none;
}

.menu > li {
    display: inline-block;
    position: relative; 
    cursor: pointer;
    font-size: 1.2rem;
    border-bottom: solid transparent;
    transition: 0.3s;
    margin-right: 10px;
}
.menu > li a{
    padding: 1rem 1.5rem;
    font-weight: 600;

}
.menu > li:hover{
    transition: 0.3s;
    border-bottom: solid white;
}
.menu > li:hover .submenu {
    display: block; 
}
.tab-active{
    border-bottom: solid white !important;
}
.icon-active{
    border-bottom: solid white !important;

}
/* Estilos para el submenu */
.submenu {
    display: none; 
    list-style-type: none;
    margin: 0 !important;
    padding: 0.2rem 0 0 0 !important;
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: transparent;
    color: #8e8e8e;
    width: auto;
    min-width: 11rem;
}

.submenu > li {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    width: 13rem;
    transition: 0.2s;
    background-color: white;
    display: flex;
}
.submenu > li a{
    padding: 1rem !important;
    color: #8e8e8e;
    width: 100%;
    border: none !important;
    width: 100% !important;
}
.submenu > li:hover {
    background-color: red;
    color: white;
    transition: 0.2s;
}
.submenu > li:hover a{
    color: white !important;
}
.general-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background-color: white;
}
.general-content .header-background{
    background-color: red;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
}
.general-content .header{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    max-width: 1224px;
    height: 6rem !important;
}
.general-content .header .menu-container{
    display: flex;
    padding: 0 3% 0 0;
    width: 70%;
}
.general-content .header .icon-container{
    display: flex;
    /* width: 13%; */
    justify-content: space-between;
    padding: 0 0 0 0;
    align-items: center;
    user-select: none;
}
.general-content .header .icon-container a{
    margin: 0;
    display: flex;
    /* border-radius: 100%; */
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border: solid red;
    border-radius: 0;
    padding: 0.8rem ;
}
.general-content .header .icon-container img{
    /* margin: 0 1rem; */
    transition: 0.4s;
    cursor: pointer;
    width: 80%;
}
.general-content .header .menu-container .logo{
    margin-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.general-content .header .menu-container .logo img{
    width: 4rem;
    height: auto;
}
.btn-carrito {
    position: relative;
}
.btn-carrito .carrito-contador{
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    color: red;
    font-weight: 600;
    background-color: white;
    padding: 0.4rem;
    border-radius: 100%;
    width: 1.8rem;
    font-size: 1rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.general-content .content{
    background-color: white;
    height: 100%;
    width: 100%;
    display: flex;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column nowrap; 
    /* transition: background-color 0.6s ease; */
    position: relative;
    z-index: 0;
}
.modal-overlay {
    position: fixed;
    top: 6rem;
    left: 0;
    width: 100%;
    z-index: 1;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.content.darken .modal-overlay {
    opacity: 1;
    pointer-events: auto;
}
.general-content .content .footer{
    width: 100%;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    padding: 1% 0;
    min-height: 210px !important;
}
.general-content .content .footer .separator{
    border-left: solid white;
    height: 100%;
}
.general-content .content .footer .first-section, .general-content .content .footer .second-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    max-width: 1224px;
    padding: 1.5% 0;
}
.general-content .content .footer .first-section a img{
    transition: 0.3s;
}
.general-content .content .footer .first-section a:hover img{
    transform: scale(1.1);
    transition: 0.3s;
}
.general-content .content .footer .second-section p{
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    transition: 0.3s;
    justify-content: center;
}
.general-content .content .footer .second-section p img{
    margin-right: 0.3rem;
    width: 1.3rem;
}
.general-content .content .footer .second-section a p{
    text-decoration: underline;
}
.general-content .content .footer .second-section a:hover p{
    transform: scale(1.1);
    transition: 0.3s;
}
.general-content .content .section-center{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    /* min-height: 100%; */
    width: 100%;
}
.general-content .content .item{
    width: 1224px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    height: 100%;
}
.general-content .content .item h1{
    font-size: 3.2rem;
    margin: 0;
}
.general-content .content .item p{
    font-size: 1.2rem;
}
.general-content .content .item-row{
    width: 1224px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.general-content .content .section-center .index-card{
    background-image: url("assets/index/fondo.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-flow: row nowrap;
    padding: 2% 1rem;
    background-color: #aeaeae58;
    min-height: 65vh;
}
.general-content .content .section-center .index-card .card{
    background-color: white;
    padding: 2rem;
    border-radius: 0.4rem;
    box-shadow: 0.4rem 0.4rem 0.4rem #87878758;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-flow: column nowrap;
    width: 27%;
    transition: 0.4s;
    height: auto;
}
.general-content .content .section-center .index-card .card:hover{
    transform: translateY(-0.4rem);
    transition: 0.4s;
}
.general-content .content .section-center .index-card .card img{
    width: 100%;
    /* padding: 1rem; */
}
.general-content .content .section-center .index-card .card .btn-group{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.general-content .content .section-center .index-card .card .btn-group a {
    display: contents;
}
.general-content .content .section-center .index-card .card .btn-group a img{
    transition: 0.3s;
    height: 2rem;
    width: min-content;
}
.general-content .content .section-center .index-card .card .btn-group a img:hover{
    transform: scale(1.1);
    transition: 0.3s;
    opacity: 0.7;
}
.general-content .content .section-center .index-card .card p{
    font-size: 1.2rem;
}
.promuevo-container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    flex-flow: row nowrap;
}
.promuevo-container .first-section{
    background-image: url(assets/promuevo/textura.png);
    background-repeat: repeat;
    background-size: contain    ;
    background-position: bottom;
    width: 100%;
    display: flex;
    height: 100%;
    max-height: 90vh;
    align-items: flex-start;
    justify-content: center;
    margin-left: -58rem;
    padding: 10% 3rem 10% 55rem !important;
}
.promuevo-container .second-section{
    width: 74%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    padding: 1rem 2rem !important;
    height: 87vh;
    overflow-y: auto;
}
.promuevo-container .second-section h1{
    color: red;
    font-weight: 900;
    margin: 0.8rem 0;
}
.promuevo-container .second-section h2{
    color: red;
    font-weight: 300;
}
.promuevo-container .second-section hr{
    width: 100%;
    border: none;
    border-bottom: solid red 0.1rem;
}
.promuevo-container .second-section textarea{
    margin: 1% 0;
    padding: 0.8rem 0.8rem;
    border: none;
    width: 100%;
    border-radius:1rem;
    font-size: 1.4rem;
    outline: none;
    background-color: #ececec;
    resize: none;
    min-height: 15rem;
}
.promuevo-container .second-section .btn-group{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.promuevo-container .second-section .btn-group button{
    background-color: red;
    border: none;
    padding: 0.5rem 2rem;
    color: white;
    font-size: 1.2rem;
    transition: 0.3s;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
}
.promuevo-container .second-section .btn-group button:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.promuevo-container .second-section .categories{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr); /* Esto crea 4 columnas de igual ancho */
    gap: 1rem; /* Espacio entre los elementos del grid */
}
.promuevo-container .second-section .categories .category-item {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: 0.3s;
    padding: 0 !important;
    margin: 0 !important;
}
.promuevo-container .second-section .categories .category-item label {
    padding: 0.5rem 2rem;
    background-color: #e4e4e4;
    border-radius: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
}
.promuevo-container .second-section .categories .category-item label:hover {
    transition: 0.3s;
    background-color: #c4c4c4;
}
.promuevo-container .second-section .categories .category-item input[type="checkbox"] {
    display: none;
}
.promuevo-container .second-section .categories .category-item input[type="checkbox"]:checked + label {
    background-color: red;
}


.exploro-container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    flex-flow: column nowrap;
}
.exploro-container h1{
    color: red;
    font-weight: 900;
    margin: 0.8rem 0;
}
.exploro-container hr{
    width: 100%;
    border: none;
    border-bottom: solid red 0.1rem;
}
.exploro-container .list-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 2rem;
}
.exploro-container .list-section .filters{
    width: 15%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
}
.exploro-container .list-section .filters h2{
    color: red;
    margin: 1.5rem 0;
    font-size: 1.2rem;
}
.exploro-container .list-section .filters h2 span{
    font-size: 1rem !important;
}
/* Estilo base para el checkbox */
.category-item {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin: 0.6rem 0;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

/* Oculta el checkbox original */
.custom-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Estilo para el cuadro del checkbox personalizado */
.checkmark {
    position: absolute;
    top: -2%;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #dbdbdb;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.4s;
}
.checkmark:hover{
    transition: 0.4s;
    background-color: #ababab;
}
/* Al seleccionar el checkbox, aplica estos estilos */
.custom-checkbox-input:checked + .custom-checkbox-label .checkmark {
    background-color: red;
    border: 2px solid red;
}

/* Estilo para la marca de verificación que aparecerá cuando se seleccione el checkbox */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Estilo de la marca de verificación */
.custom-checkbox-input:checked + .custom-checkbox-label .checkmark:after {
    display: block;
}

.custom-checkbox-input:checked + .custom-checkbox-label .checkmark:after {
    left: 5px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.exploro-container .list-section .elements {
    column-count: 3;
    column-gap: 1rem;
    width: 86%;
    margin: 1rem 0 2rem;
}
#elements {
    display: flex;
    position: relative;
    min-height: 30vh;
}

.column {
    flex: 1;
}


.exploro-container .list-section .elements .element {

    width: 100%;
    margin-bottom: 1rem;
    transition: 0.3s;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem #727272e8;
}
.exploro-container .list-section .elements .element:hover{
    transform: translateY(-0.3rem);
    transition: 0.3s;
}
.exploro-container .list-section .elements .element .photo-section{
    width: 100%;
    max-height: 20rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem 0.4rem 0 0 !important;
    /* border-radius: 100%; */
}
.exploro-container .list-section .elements .element .photo-section img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantener las proporciones de la imagen */
}
.exploro-container .list-section .elements .element .photo-section video{
    max-height: 20rem !important;
    width: 100% !important;
}

.exploro-container .list-section .elements .element .info-section{
    background-color: #eaeaea;
    padding: 1rem;
    border-radius: 0 0 0.4rem 0.4rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.exploro-container .list-section .elements .element .info-section div:first-child{
    width: 75% !important;
}
.exploro-container .list-section .elements .element .info-section h2{
    color: red;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.1rem;
}
.exploro-container .list-section .elements .element .info-section h3{
    font-size: 0.8rem;
    margin: 0;
    color: #9c9c9c;
}
.exploro-container .list-section .elements .element .info-section p{
    font-size: 0.70rem;
    margin: 0.1rem 0;
    color: #555;
}
.exploro-container .list-section .elements .element .info-section .btn-group{
    display: flex;
    /* width: 20%; */
    align-items: flex-start;
    justify-content: flex-end;
}
.exploro-container .list-section .elements .element .info-section .btn-group img{
    transition: 0.3s;
    cursor: pointer;
}
.exploro-container .list-section .elements .element .info-section .btn-group img:hover{
    transform: scale(1.2);
    transition: 0.3s;
}
.exploro-container .list-section .elements .element .info-section .btn-group .img-1{
    width: 2rem;
    height: 1.9rem;
    /* margin-right: 0.1rem; */
}
.exploro-container .list-section .elements .element .info-section .btn-group .img-2{
    width: 1.3rem;
    height: 1.8rem;
    /* margin-left: 0.8rem; */
}
.exploro-container .list-section .elements .element .info-section .btn-group p{
    font-size: 1rem;
    color: red;
    font-weight: 700;
    margin-top: 0.3rem;
}
.button-only-comment{
    background-color: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1rem 0;
    width: 100%;
}
.button-only-comment a{
    background-color: white;
    color: red;
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.2rem;
    box-shadow: 0 0 0.1rem #555;
    transition: 0.4s ease-in-out;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.button-only-comment a:hover{
    transition: 0.4s ease-in-out;
    transform: scale(1.08);
    background-color: #dbdbdb;
}
.biblioteca-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    flex-flow: column nowrap;
}
.biblioteca-container .options-wrapper {
    display: flex;
    border: 2px solid red;
    border-radius: 1rem;
    overflow: hidden;
    margin: 5% 0 3%;
    width: 70%;
    user-select: none;
}  
.biblioteca-container .option-input {
    display: none;
}
.biblioteca-container .option-label {
    flex: 1;
    text-align: center;
    padding: 10px 20px;
    border-right: 2px solid red;
    cursor: pointer;
    transition: background-color 0.3s;
    color: red;
    font-size: 1.2rem;
}
.biblioteca-container .option-label:hover{
    background-color: rgb(255, 216, 216);
}
.biblioteca-container .option-label:last-child {
    border-right: none;
}
.biblioteca-container .option-input:checked + .option-label {
    background-color: red;
    color: white;
}
.title-btn-container{
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    margin: 1rem 0;
}
.title-btn-container h1{
    color: red;
    margin: 0;
}
.title-btn-container input{
    background-color: #ededed;
    padding: 0.8rem;
    border: none;
    outline: none;
    border-radius: 1rem;
    width: 50%;
    position: relative;
    font-size: 1.5rem;
}
.title-btn-container span{
    position: absolute;
    right: 1%;
    color: #848484;
}
.content-div {
    display: flex;
    /* position: relative; */
    min-height: 40vh;
}

.content-div .column {
    flex: 1; /* Los elementos se expanden para ocupar el espacio disponible */
    padding: 10px; /* O el valor que desees para el espaciado interno */
}

.content-div {
    width: 100%;
    margin: 1rem 0 2rem;
}
.content-div .element{
    break-inside: avoid-column;
    page-break-inside: avoid; /* Para navegadores que usan page-break */
    -webkit-column-break-inside: avoid; /* Para Chrome y Safari */
    display: inline-block; /* Esto ayuda a evitar que el elemento sea dividido entre columnas */
    width: 100%;
    margin-bottom: 1rem;
    transition: 0.3s;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem #727272e8;
}
.content-div .element:hover{
    transform: translateY(-0.3rem);
    transition: 0.3s;
}
.content-div .element .photo-section{
    width: 100%;
    max-height: 20rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem 0.4rem 0 0 !important;
    /* border-radius: 100%; */
}
.content-div .element .photo-section img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantener las proporciones de la imagen */
}
.content-div .element .photo-section video{
    max-height: 20rem !important;
    width: 100% !important;
}

.content-div .element .info-section{
    background-color: #eaeaea;
    padding: 1rem;
    border-radius: 0 0 0.4rem 0.4rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.content-div .element .info-section h2{
    color: red;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.1rem;
}
.content-div .element .info-section h3{
    font-size: 0.8rem;
    margin: 0.7rem 0;
    color: #9c9c9c;
}
.content-div .element .info-section p{
    font-size: 0.70rem;
    margin: 0.1rem 0;
    color: #555;
}
.content-div .element .info-section .btn-group{
    display: flex;
    /* width: 20%; */
    align-items: flex-start;
    justify-content: flex-end;
}
.content-div .element .info-section .btn-group img{
    transition: 0.3s;
    cursor: pointer;
}
.content-div .element .info-section .btn-group img:hover{
    transform: scale(1.2);
    transition: 0.3s;
}
.content-div .element .info-section .btn-group .img-1{
    width: 2.3rem;
    height: 2rem;
}
.content-div .element .info-section .btn-group .img-2{
    width: 1.5rem;
    height: 2rem;
}
.content-div .element .info-section .btn-group p{
    font-size: 1rem;
    color: red;
    font-weight: 700;
    margin-top: 0.3rem;
}
.aprende-card{
    width: 80%;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    margin: 1rem 0;
    flex-flow: row nowrap;
    position: relative;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(240, 240, 240);
    transition: 0.2s;
    box-shadow: 0 0.3rem 1.4rem #63636358;
}
.aprende-card:hover{
    transform: translateX(-0.3rem);
    transition: 0.2s;
}
.aprende-card .photo-section{
    width: 10% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aprende-card .photo-section img{
    padding: 1.5rem 1rem;
    background-color: #cdcdcd;
    border-radius: 0 0 1rem 1rem;
    margin-top: -15%;
}
.carrito-list .aprende-card{
    width: 100%;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    margin: 1rem 0;
    flex-flow: row nowrap;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    background-color: rgb(240, 240, 240);
    transition: 0.2s;
    box-shadow: 0 0.3rem 1.4rem #63636358;
}
.carrito-list .aprende-card .photo-section{
    /* width: 10%; */
    max-width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1%;
    top: 0.1rem;
}
.carrito-list .aprende-card .photo-section::before {
    content: '';
    position: absolute;
    left: 0.35rem; /* Ajusta este valor para mover el triángulo a la izquierda */
    top: -1.2rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem 1rem 0 0; /* Ajusta estos valores para cambiar el tamaño del triángulo */
    border-color: transparent rgb(187, 187, 187) transparent transparent; /* El segundo valor es el color del triángulo */
}

.aprende-card .photo-section img{
    padding: 1.5rem 1rem;
    background-color: #cdcdcd;
    border-radius: 0 0 1rem 1rem;
    margin-top: -15%;
    width: 70%;
}
.aprende-card .info-section{
    width: 70%;
}
.aprende-card .info-section .title-description{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.aprende-card .info-section .title-description a:hover{
    text-decoration: underline !important;
    text-decoration-color: red !important;
}
.aprende-card .info-section .title-description h1{
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.4rem;
    color: red;
}
.aprende-card .info-section .title-description h2{
    font-size: 0.75rem ;
    color: #a2a2a2;
    margin: 0;
}
.aprende-card .info-section p{
    margin: 1% 0;
    font-size: 0.9rem !important;
}
.aprende-card .button-section{
    width: 16%; 
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-flow: column nowrap;
}
.aprende-card .button-section .btn{
    width: 100%;
    margin: 0.5rem 0;
    background-color: rgb(182, 182, 182);
    color: white;
    font-size: 1rem;
    transition: 0.4s;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 2rem;
    border: none;
    cursor: pointer;
}
.aprende-card .button-section .btn:hover{
    transition: 0.4s;
    transform: scale(1.1);
}
.aprende-card .button-section .btn:first-child{
    background-color:red !important;
}
.banner-agregado {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: red; /* Color de fondo verde para indicar éxito */
    color: white;
    text-align: center;
    padding: 5px 0;
    box-sizing: border-box;
    visibility: hidden; /* Inicialmente no visible */
    opacity: 0; /* Inicialmente transparente */
    transition: visibility 0s, opacity 0.5s linear; /* Efecto suave para aparecer y desaparecer */
}
.carrito-card{
    width: 80%;
    height: 100%;
    min-height: 300px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row nowrap;
    position: relative;
}
.carrito-card .carrito-list{
    min-width: 200%;
    background-color: rgb(238, 238, 238);
    padding: 2rem 6rem 2rem 101.5rem;
    border-radius: 0 5rem 0 0;
    position: relative;
    margin-left: -102rem;
    min-height: 25rem !important;
}

.carrito-card .total-list{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    min-width: 20vw;
}
.carrito-card .total-list p{
    margin: 0;
    font-size: 1.5rem !important;
    color: #888888;
}
.carrito-card .total-list h1{
    margin: 0.3rem 0;
    font-size: 3.2rem !important;
    color: #888888;
    text-transform: uppercase !important;
}
.carrito-card .total-list button{
    background-color: red;
    width: 90%;
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    cursor: pointer;
}
.carrito-card .total-list button:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.carrito-list .aprende-card .photo-section{
    width: 15% !important;
}
.carrito-list .aprende-card .info-section{
    width: 60% !important;
}
.carrito-list .aprende-card .info-section p{
    font-size: 0.7rem !important;
}
.carrito-list .aprende-card .price-section{
    min-width: 11.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    padding: 0.5rem;
}
.carrito-list .aprende-card .price-section h2{
    text-transform: uppercase !important;
    font-size: 2.5rem;
    color: #8f8f8f;
    margin: 0.1rem 0;
    text-align: center;
    width: 100%;
}
.carrito-list .aprende-card .price-section div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.carrito-list .aprende-card .price-section div a{
    font-size: 0.6rem !important;
    transition: 0.3s;
    font-family: 'Poppins', sans-serif !important;
    color: black !important;
    font-weight: 800;
    user-select: none;
}
.carrito-list .aprende-card .price-section div a:hover{
    color: red !important;
    transition: 0.3s;
}
.image-container {
    width: 11rem; /* Ancho deseado */
    height: 11rem; /* Alto deseado */
    overflow: hidden; /* Ocultar lo que se salga del contenedor */
    display: flex;
    justify-content: center; /* Centrar la imagen horizontalmente */
    align-items: center; /* Centrar la imagen verticalmente */
    border-radius: 100%;
    border: solid white 0.5rem;
}
.image-container img {
    width: 100%;
    min-width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
}

#formCambioContrasena{
    display: flex;
    flex-flow: column nowrap;
    padding: 1rem;
    width: 90%;
    min-height: 25rem;
    padding-bottom: 10rem;
}
#formCambioContrasena h2{
    color: red;
    font-size: 2.5rem !important;
    margin: 0.5rem 0;
    font-weight: 700;
}
#formCambioContrasena input{
    padding: 0.8rem 0.8rem;
    font-size: 1.2rem;
    background-color: #ededed;
    border-radius: 0.4rem 0.4rem 1rem 1rem;
    outline: none;
    margin: 0.8rem 0;
    border: none;
}
#formCambioContrasena button{
    padding: 0.8rem 2rem;
    border: solid white;
    color: white;
    background-color: red;
    cursor: pointer;
    font-size: 1.5rem;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    border-radius: 0.4rem 0.4rem 2rem 0.4rem;
    width: min-content;
    float: right;
    transition: 0.3s;
    margin: 0.8rem 0 0.8rem auto;
}
#formCambioContrasena button:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.profile-section{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 2rem;
}
.profile-section .main-info{
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
.profile-section .main-info .flex{
    display: flex;
    align-items: center;
    width: 60%;
}
.profile-section .main-info .flex .foto-editor{
    position: relative;
    display: flex;
}
.profile-section .main-info .flex .foto-editor .icon-photo{
    position: absolute;
    right: 3%;
    top: 3%;
    display: flex;
    background-color: transparent;
    padding: 0;
}
.profile-section .main-info button{
    margin-left: 1rem !important;
}
#cambio-contrasena{
    background-color: red !important;
    color: white !important;
    padding: 0.3rem 1rem;
    font-size: 1.4rem;
    border-radius: 0.4rem;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.1s;
}
.profile-section .main-info input{
    font-weight: 700;
    color: red;
    font-size: 3rem;
    border: none;
    background-color: transparent;
    outline: none;
    margin-left: 2rem;
    width: 80%;
    transition: 0.4s;
    font-family: 'Poppins', sans-serif !important;

}
.profile-section .main-info button{
    padding: 0.3rem 1rem;
    font-size: 1.4rem;
    background-color: #e2e2e2;
    border-radius: 0.4rem;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.1s;
}
.profile-section .main-info button:hover{
    transition: 0.1s;
    transform: scale(1.1);
}
.profile-section .main-info h1{
    color: red;
    font-weight: 700;
    margin: 1rem !important;
}
.profile-section .notification-section{
    /* width: 100%; */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-left: 16%;
    width: 84%;
    margin-top: -3%;
    min-height: 60vh !important;
}
.notimatch{
    display: flex;
    width: 100%;
    background-color: white;
    padding: 2rem;
    align-items: center;
    justify-content: space-between;
}
.notimatch .info{
    display: flex;
    flex-flow: column nowrap;
    width: 20%;
}
.notimatch .info h2{
    color: red;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin: 0;
}
.notimatch .info p{
    font-size: 1rem;
}
.notimatch .info p b{
    color: red;
}
.notimatch .content-div{
    width: 75%;
    display: flex !important;
    justify-content: space-between;
    margin: 5rem 1rem 1rem !important;
}
.notimatch .content-div .element{
    width: 32% !important;
    flex-flow: column nowrap !important;
    padding: 0 !important;
}
.notimatch .content-div .element .info-section{
    display: flex;
    align-items: center;
    padding: 0.4rem;
    justify-content: space-between;
}
.notimatch .content-div .element .info-section .btn-group{
    display: flex;
    /* width: 20%; */
    align-items: flex-start;
    justify-content: flex-end;
}
.notimatch .content-div .element .info-section .btn-group img{
    width: 1.5rem !important;
    height: 1.3rem !important;
}
.notimatch .content-div .element .info-section h2{
    font-size: 0.8rem !important;
}
.notimatch .content-div .element .info-section h3{
    font-size: 0.6rem !important;
}
.notimatch .content-div .element .info-section p{
    font-size: 0.6rem !important;
}
.notimatch .content-div .element .info-section .first-info{
    width: 70%;
}
.profile-section .notification-section .element{
    background-color: white;
    box-shadow: 0 0.3rem 0.7rem #a0a0a058;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-flow: row nowrap;
    width: 100%;
    padding: 0.8rem;
    margin: 0.2rem 0 1rem 0;
}
.profile-section .notification-section .element .info{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 55%;
}
.profile-section .notification-section .element .info a:hover{
    text-decoration: underline ;
    text-decoration-color: red !important;
}
.profile-section .notification-section .element .info a h2{
    margin: 0.2rem 0 !important;
    color: red !important;
    font-size: 1.3rem;
}
.profile-section .notification-section .element .info h3{
    margin: 0.2rem 0 !important;
    font-size: 1rem;
    color:#848484;
}
.profile-section .notification-section .element p{
    color: #777777;
}
.profile-section .notification-section .element button{
    background-color: transparent;
    border: none;
    transition: 0.3s;
    outline: none;
    cursor: pointer;
}
.profile-section .notification-section .element button:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.profile-section .notification-section .element button span{
    font-size: 3.5rem;
    color: #777777;
}
.profile-section .match-section{
    /* width: 100%; */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-left: 16%;
    width: 84%;
    margin-top: -3%;
}
.profile-section .match-section .element{
    background-color: white;
    box-shadow: 0 0.3rem 0.7rem #a0a0a058;
    border-radius: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
    padding: 1.2rem;
    margin: 0.2rem 0 1rem 0;
}
.profile-section .match-section .element .info{
    width: 70%;
}
.profile-section .match-section .element .info .title-description{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.profile-section .match-section .element .info .title-description h2{
    margin: 0;
    color: red;
}
.profile-section .match-section .element .info .title-description .btn-container{
    display: flex;
    width: 30%;
    justify-content: flex-end;
    align-items: center;
}
.profile-section .match-section .element .info .title-description .btn-container img:first-child{
    width: 2rem;
    height: 1.8rem;
    margin-right: 0.5rem;
}
.profile-section .match-section .element .info .title-description .btn-container img:nth-child(3){
    width: 1.5rem;
    height: 1.8rem;
    margin-left: 2rem;
}
.profile-section .match-section .element .info .title-description .btn-container  p{
    color: red;
    font-weight: 600;
    font-size: 1rem;
}
.profile-section .match-section .element .info h3{
    font-size: 1rem;
    margin:0 0 0.3rem 0;
    color: #888888;
}
.profile-section .match-section .element .info h4{
    margin:0 0 0.3rem 0;
    font-size: 0.95rem;
    color: #bcbcbc;
}
.profile-section .match-section .element .info ul{
    list-style: none;
}
.profile-section .match-section .element .info ul li{
    margin: 0;
    font-size: 0.95rem;
    line-height: 1rem;
    color: #5d5d5d;
}
.profile-section .match-section .element .info p{
    margin: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1rem;
    color: #5d5d5d;
}
.image-container-2 {
    width: 15rem ; /* Ancho deseado */
    height: 15rem ; /* Alto deseado */
    overflow: hidden; /* Ocultar lo que se salga del contenedor */
    display: flex;
    border-radius: 1rem;
    justify-content: center; /* Centrar la imagen horizontalmente */
    align-items: center; /* Centrar la imagen verticalmente */
    /* border: solid white 0.5rem; */
}
.image-container-2 img {
    width: 100%;
    object-fit: cover; /* Mantener las proporciones de la imagen */
}
.profile-section .other-info{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 18%;
    width: 82%;
    margin-top: -5%;
}
.profile-section .other-info .section{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    margin: 1rem 0 0 0;
}
.profile-section .other-info .section .input-section{
    display: flex;
    flex-flow: column nowrap;
    width: 50%;
}
.profile-section .other-info .section .input-section label{
    font-size: 1rem;
    color: #777777;
    margin: 0.5rem 0;
}
.profile-section .other-info .section .input-section input{
    background-color: transparent;
    border: none;
    outline: none;
    color: red;
    width: 80%;
    font-size: 1.2rem;
    transition: 0.4s;
    font-family: 'Poppins', sans-serif !important;

}
.profile-section .other-info .section ul{
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    list-style: none;
}
.profile-section .other-info .section ul li{
    width: 50%;
    padding: 0.5rem 0;
    color: red;
    font-weight: 600;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row nowrap;
}
.profile-section .other-info .section .switch-container{
    display: flex;
    align-items: center;
    width: 50%;
}
.profile-section .other-info .section .switch-container label:nth-child(2){
    margin-left: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: red;
}
.editable {
    background-color: #ffffff !important;
    border-radius: 0.4rem;
    padding: 0.3rem;
    border-bottom: solid red !important;
    transition: 0.4s;
}

/* Estilo básico para el switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
  }
  
  /* Oculta el input checkbox */
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Estilo para el slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  /* Estilo para el slider cuando está en ON */
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  /* Estilo cuando se checa el input */
  input:checked + .slider {
    background-color: red;
  }
  
  /* Estilo del slider para cuando el input está en ON (checked) */
  input:checked + .slider:before {
    -webkit-transform: translateX(31px);
    -ms-transform: translateX(31px);
    transform: translateX(31px);
  }
  
  /* Forma redondeada para el slider */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  .btn-eliminar{
    border: none;
    outline: none;
    color: red;
    background-color: transparent;
    font-size: 2rem;
    cursor: pointer;
  }
  #agregar-elemento-btn {
    display: none; /* Oculto por defecto */
    background-color: #e0e0e0;
    color: #8d8d8d;
    font-size: 1.2rem;
    border: none;
    outline: none;
    border-radius: 0.4rem;
    transition: 0.3s;
    padding: 0.3rem;
    cursor: pointer;
}
#agregar-elemento-btn:hover{
    color: red;
    transition: 0.3s;
}
.nuevo-elemento-input{
    background-color: white !important;
}
.div-padre-modificado {
    background-color: gray;
    color: white;
    text-align: center;
    padding: 1%;
    /* Otros estilos que quieras añadir */
}

.fade-in {
    animation-name: fadeIn;
    animation-duration: 0.4s;
    animation-timing-function: ease-in;
}
.bg-1{
    background-image: url("assets/aprende/back_2.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    margin: 0;
    /* background-color: #aeaeae58; */
}
.bg-1::before{
    content: '';
    display: block;
    height: 27vh;
}
.bg-1-space{
    background-image: url("assets/aprende/back_2.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    margin: 0;
    /* background-color: #aeaeae58; */
}
.bg-1-space::before{
    content: '';
    display: block;
    height: 35vh;
}
.bg-2{
    background-image: url("assets/index/fondo.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    margin: 0;
    /* background-color: #aeaeae58; */
}
.bg-3{
    background: rgb(236,236,236);
background: linear-gradient(180deg,rgba(255,255,255,0) 10rem,  rgba(236,236,236,1) 10rem );
}
.bg-4{
    background-image: url("assets/index/fondo.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    margin: 0;
    /* background-color: #aeaeae58; */
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    transition: all 0.5s ease; /* Smooth transition for all changes */
}

.modal-content {
    background-color: #fefefe;
    margin:1%  auto; /* 15% from the top and centered */
    padding: 0 20px 20px;
    border-radius: 0.4rem;
    border: 1px solid #888;
    width: 75%; /* Could be more or less, depending on screen size */
    transform: translateY(100%); /* Start below the screen */
    opacity: 0; /* Iniciar con el contenido del modal transparente */
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    max-width: 1324px;
    max-height: 96vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-content img{
    width: 98%;
    /* max-height: 23rem; */
    margin-bottom: 1rem;
}
.between{
    justify-content: space-between !important;
}
.modal-content .modal-info{
    display: flex;
    width: 98%;
    align-items: flex-start;
    justify-content: flex-start;
}
.modal-content .modal-info h2{
    color: red;
    line-height: 1.4rem;
    margin: 0 0 1rem;
}
.modal-content .modal-info ul{
    margin: 0.3rem;
    width: 100%;
    list-style: none;
}
.modal-content .modal-info ul li::before{
    content: '- ';
}
.modal-content .modal-info ul li{
    margin: 0.3rem 0;
}
.modal-content .modal-info .first-section{
    /* width: 28% !important; */
    width: auto;
    padding: 0 0.2rem;
    max-width: 100%;
}
.modal-content .modal-info .second-section{
    /* margin: 0 2rem; */
    padding: 0 0.2rem;
    /* width: 55% !important; */
    width: auto;
    max-width: 100%;
}
.modal-content .modal-info .third-section{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 11rem;
}
.modal-content .modal-info .third-section button{
    margin: 1.5rem 0 0.5rem 0;
    width: 100%;
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
    border: none;
    background-color: rgb(170, 170, 170);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: 0.3s;
    color: white;
}
.modal-content .modal-info .third-section button:first-child{
    background-color: red !important;
}
.modal-content .modal-info .third-section button:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.close {
    color: #aaa;
    float: right;
    font-size: 30px;
    font-weight: bold;
    margin-left: 99%;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Pagina de agregar información */
.add-information{
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    max-width: 1224px;
    margin-top: -10rem;
    padding-top: 10rem;
    z-index: 1;

}
.add-information .img-container{
    width: 30%;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;  
}
.add-information .img-container .image-container{
    width: 17rem;
    height: 17rem;
}
.add-information .img-container img{
    width: 100%;
}
.add-information form{
    width: 70%;
    padding: 1rem 2rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

}
.add-information form h2{
    color: red;
    margin: 0 0 2rem 0;
    font-size: 2.5rem;
    width: 100%;
}
.add-information form input[type="text"]{
    margin: 2% 0;
    padding: 0.3rem 0.8rem;
    border: none;
    width: 100%;
    border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
    font-size: 1.3rem;
    outline: none;
    background-color: #eaeaea;
    font-weight: 700;
}
.add-information form .double-input{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.add-information form .double-input input{
    margin: 2% 0;
    padding: 0.3rem 0.8rem;
    border: none;
    width: 100%;
    border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
    font-size: 1.3rem;
    outline: none;
    font-weight: 700;
    background-color: #eaeaea;
}
.add-information form .double-input input:first-child{
    width: 43% !important;
}
.add-information form .double-input input:nth-child(2){
    width: 55% !important;
}
.add-information form .gender-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 0 0;
}
.add-information form .gender-section label{
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 2.5rem 0 0.4rem;
}
.add-information form .gender-section .category-item .checkmark, .add-information form .double-div .job-section .category-item .checkmark, .add-information form .register-section .category-item .checkmark{
    position: absolute;
    top: 1%;
    left: 0;
    height: 27px;
    width: 27px;
}
.add-information form .gender-section .category-item .custom-checkbox-input:checked + .custom-checkbox-label .checkmark:after, .add-information form .double-div .job-section .category-item .custom-checkbox-input:checked + .custom-checkbox-label .checkmark:after, .add-information form .register-section .category-item .custom-checkbox-input:checked + .custom-checkbox-label .checkmark:after{
    left: 7px;
    top: 1px;
    width: 6px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.add-information form .birthdate-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 0 0;
}
.add-information form .birthdate-section label{
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 1rem 0 0.4rem;
}
.add-information form .birthdate-section input{
    margin: 2% 1rem 2% 0;
    padding: 0.3rem 0.8rem;
    border: none;
    width: 100%;
    border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
    font-size: 1.3rem;
    outline: none;
    font-weight: 700;
    background-color: #eaeaea;
    width: 12%;
    text-align: center;
    min-width: 5rem;
}
.add-information form .double-div{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 1rem 0;
}
.add-information form .double-div .job-section{
    width: 40%;
    padding: 1rem 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.add-information form .double-div .job-section label{
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 1rem 1rem 0.4rem;
}
.add-information form .double-div .job-section .category-item{
    width: 100%;
}
.add-information form .double-div .living-section{
    width: 59%;
    padding: 1rem 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.add-information form .double-div .living-section label{
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 1rem 1rem 0.4rem;
}
.add-information form .double-div .living-section .ls-element{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.add-information form .double-div .living-section .ls-element select{
    margin: 2% 0 2% 0;
    padding: 0.3rem 0.8rem;
    border: none;
    width: 100%;
    border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
    font-size: 1.3rem;
    outline: none;
    font-weight: 700;
    color: #777777;
    background-color: #eaeaea;
    width: 70%;
}
.add-information form p{
    font-weight: 800;
    font-size: 1.3rem;
    width: 100%;
    margin: 0 0 2rem 0 !important;
}
.add-information form .categories{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr); /* Esto crea 4 columnas de igual ancho */
    gap: 1rem; /* Espacio entre los elementos del grid */
}
.add-information form .categories .category-item {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: 0.3s;
    padding: 0 !important;
    margin: 0 !important;
}
.add-information form .categories .category-item label {
    padding: 0.5rem 2rem;
    background-color: #e4e4e4;
    border-radius: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    cursor: pointer;
    line-height: 1;
    font-size: 1.2rem;
    font-weight: 600;
}
.add-information form .categories .category-item label:hover {
    transition: 0.3s;
    background-color: #c4c4c4;
}
.add-information form .categories .category-item input[type="checkbox"] {
    display: none;
}
.add-information form .categories .category-item input[type="checkbox"]:checked + label {
    background-color: red;
}
.add-information form .register-section{
    width: 100%;
    padding: 0.3rem 1rem;
    border: solid red;
    border-radius: 0.5rem 0.5rem 2rem 0.5rem;
}
.add-information form .register-section label{
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 1rem 1rem 0.4rem;
}
.add-information form .btn-group{
    margin: 1rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.add-information form .btn-group .btn{
    padding: 0.5rem 3rem;
    border: solid white;
    outline: none;
    color: white;
    background-color: red;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 0.5rem 0.5rem 2rem 0.5rem;
    transition: 0.3s;
    position: relative;
    margin: 2% 0;
}

.bg-middle{
    background: rgb(232,232,232);
    background: linear-gradient(90deg, rgba(232,232,232,1) 25%, rgba(255,255,255,1) 25%);
}
.img-topper{
    width: 100%;
    height: 10rem;
    z-index: 2;
    /* margin: 0 0 -60vh 0; */
}

#dialog, #dialog2 {
    display: none;
}
.ui-dialog {
    background-color: #f8f8f8; /* Color de fondo */
    color: #333; /* Color de texto */
    box-shadow: 0 0 0.2rem #9c9c9c;
    flex-flow: column nowrap;
    border-radius: 1rem !important;
    width: auto !important;
}
.ui-dialog .ui-dialog-titlebar {
    background-color: transparent;
    border: none;
    box-shadow: 0 0 0;
    font-size: 1.5rem;
    padding: 0.2rem 0.5rem !important;
    color: red; /* Color de texto de la barra de título */
}
.ui-dialog .ui-dialog-content {
    padding: 10% 5% !important;
    font-size: 1.2rem;
    min-width: 30rem !important;
    font-family: 'Roboto', sans-serif; /* Fuente del contenido */
}
.ui-dialog .ui-dialog-buttonpane {
    background-color: #e7e7e7;
}
.ui-button {
    background-color: white !important; /* Color de fondo de los botones */
    color: black;
    font-size: 1.2rem !important;
}



/* RESPONSIVE */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.no-image{
    padding: 80px;
    margin: 0;
    height: 200px;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}

*{
    text-transform: lowercase !important;
}

/* DROP ZONE */
.drop-zone {
  max-width: 200px;
  height: 200px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #7a7a7a;
  border: 4px dashed red;
    transition: 0.4s ease-in-out;
    border-radius: 10px;
}
.drop-zone:hover{
    background-color: #dddddd;
    transform: scale(1.1);
    transition: 0.4s ease-in-out;
    color: black !important;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 12px;
  text-align: center;
  display: contents;
  flex-flow: row wrap;
}
.loading-div{
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-flow: column nowrap;
    top: 0;
    left: 0;
    position: fixed !important;
    background-color: #ffffffdc;
    z-index: 9999999;
}
.loading-div p{
    font-size: 3rem !important;
    color: red;
    /* background-color: white; */
    padding: 1rem;
    border-radius: 0.4rem;
    font-weight: 900;
}
#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
}
.no-results{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    width: 100%;
}
.no-results p{
    font-size: 3rem !important;
    color: red;
}

.circle {
    width: 50px;
    height: 50px;
    margin: 0 5px;
    background-color: red;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.circle:nth-child(2) {
    animation-delay: 0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

.comments-container{
    display: flex;
    width: 100%;
    padding: 1rem;
    justify-content: space-between;
    height: 86vh;
}
.comments-container .comments-section{
    width: 60%;
    display: flex;
    padding: 0.8rem;
    flex-flow: column nowrap;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.comments-container .comments-section .comment-item{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    box-shadow: 0 0 0.1rem #5d5d5d;
    background-color: #eeeeee;
    border-radius: 0.4rem;
    padding: 0.8rem;
    margin-bottom: 1rem;
}
.modal-content h2{
    color: red;
    margin: 0 !important;
    font-size: 1.1rem;
}
.comments-container .comments-section .comment-item .title-image{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}
.comments-container .comments-section .comment-item .title-image .image-container{
    width: 4rem !important;
    height: 4rem !important;
}
.comments-container .comments-section .comment-item .title-image p{
    width: 85%;
    margin: 0 !important;
}
.comments-doit{
    display: flex;
    flex-flow: column nowrap;
    width: 38%;
}
.comments-doit p{
    margin: 0 0 0.3rem;
}
.comments-doit textarea{
    background-color: white;
    box-shadow: 0 0 0.1rem #5d5d5d;
    border: none;
    padding: 0.8rem;
    border-radius: 0.4rem;
    outline: none;
    resize: none;
    min-height: 30vh;
}
.comments-doit button{
    background-color: red;
    width: 100%;
    outline: none;
    border: none;
    color: white !important;
    padding: 0.3rem 0.8rem;
    border-radius: 0.4rem;
    margin-top: 0.3rem;
}
.dont-scroll{
    overflow:  hidden !important;
}
.no-hay-elementos{
    width: 100% !important;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 2rem !important;
    color: red !important;
}


.custom-alert-two {
    position: fixed !important;
    top: 14vh;
    right: 2vw;
    background-color: #f44336;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    z-index: 99999999;
}

.close-alert-btn-two{
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
}
.close-alert-btn-two span{
    font-size: 2rem;
}

/* Cuando la alerta es visible */
.custom-alert-two.show {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}


.tooltip-text-btn{
    font-size: 1.4rem;
    background-color: white;
    color: red;
    text-align: center;
    padding: 0.3rem 0.5rem;
    box-shadow: 0 0 0.2rem #555;
    border-radius:  0.4rem;
    visibility: hidden;
    width: max-content;
    position: absolute !important;
    z-index: 9999;
    transform: translate(0, -3rem);
    right: 0;
    opacity: 0;
    top: 0%;
    transition: opacity 0.3s;
    font-weight: 700;
    pointer-events: none !important;
}
.tooltip-btn{
    position: relative;
    cursor: pointer !important;
    display: flex;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    padding: 0 !important;
    margin: 0 0 0 0.6rem;
}
.tooltip-btn:hover > .tooltip-text-btn{
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
}
.highlight {
    background-color: yellow;
    font-weight: bold !important;
}
.explore-filter-search{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
}
.explore-filter-search h1{
    color: red;
}
.explore-filter-search .search-container{
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: space-between;
}
.explore-filter-search .search-container select{
    width: 30%;    background-color: #ffe3e3;
    padding: 0.8rem;
    border: none;
    outline: none;
    border-radius: 1rem;
    position: relative;
    font-size: 1.2rem;
}
.explore-filter-search .search-container input{
    width: 69%;
    background-color: #ededed;
    padding: 0.8rem;
    border: none;
    outline: none;
    border-radius: 1rem;
    position: relative;
    font-size: 1.2rem;
}
.explore-filter-search-2{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    padding: 0 1rem;
}
.explore-filter-search-2 h1{
    color: red;
}
.explore-filter-search-2 .search-container{
    display: flex;
    width: 72%;
    align-items: center;
    justify-content: space-between;
}
.explore-filter-search-2 .search-container select{
    width: 30%;    background-color: #ffe3e3;
    padding: 0.8rem;
    border: none;
    outline: none;
    border-radius: 1rem;
    position: relative;
    font-size: 1.2rem;
}
.explore-filter-search-2 .search-container input{
    width: 69%;
    background-color: #ededed;
    padding: 0.8rem;
    border: none;
    outline: none;
    border-radius: 1rem;
    position: relative;
    font-size: 1.2rem;
}
.element-profile{
    display: flex;
    box-shadow: 0 0 0.1rem #333;
    background-color: white;
    padding: 0.8rem;
    border-radius: 0.4rem;
    width: 100%;
}
.element-profile .info-section{
    flex-flow: column nowrap !important;
}
.element-profile .info-section h2{
    font-size: 1.3rem !important;
    line-height: normal !important;
    margin-bottom: 0.8rem !important;
}
.element-profile .info-section h3{
    font-size: 1.1rem !important;
    margin: 0.3rem 0 !important;
}
.element-profile .info-section a{
    background-color: red;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    transition: 0.4s;
    width: 100%;
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.element-profile .info-section a:hover{
    transform: scale(1.1);
    transition: 0.4s;
    opacity: 0.5;
}