/***********CONFIGURACION ENTORNO***********/

/*modal extensions*/
.modal-xl {
    max-width: 90%; /* Adjust as necessary */
}

.modal-dialog-scrollable {
    height: calc(100% - 1rem);
}

.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 200px); /* Adjust as necessary to fit within the viewport */
}
.interest-link{
    height: 640px;
    width: 390px;
}

/*banner*/
.carousel-item {
    min-height: 300px;
}

.text-container {
    max-height: 300px;
   
}

.image-container {
    max-height: 300px;
    padding: 3rem;
}

    .image-container img {
        max-height: 100%;
        object-fit: cover;
        width: 100%;
    }

@media (max-width: 576px) {
    .text-container {
        padding: 1rem;
        font-size: 0.875rem; /* Reduce font size on small screens */
        overflow-y: auto;
    }

    .image-container {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .text-container {
        padding: 2rem;
        font-size: 1rem; /* Adjust font size on medium screens */
    }

    .image-container {
        padding: 2rem;
    }
}

@media (min-width: 992px) {
    .text-container {
        padding: 3rem;
    }

    .image-container {
        padding: 3rem;
    }
}
/*home*/
.icon-img {
    max-width: 80px;
    width: 100%;
    height: auto;
}

@media (max-width: 576px) {
    .icon-img {
        max-width: 60px;
    }
}

@media (max-width: 768px) {
    .icon-img {
        max-width: 70px;
    }
}

/*Bootstrap a�adidos responsives*/
@media (min-width: 768px) {
    .w-md-100 {
        width: 100%;
    }

    .w-md-75 {
        width: 75%;
    }

    .w-md-50 {
        width: 50%;
    }

    .w-md-25 {
        width: 25%;
    }
}

@media (min-width: 992px) {
    .w-xl-100 {
        width: 100%;
    }

    .w-lg-75 {
        width: 75%;
    }

    .w-lg-50 {
        width: 50%;
    }

    .w-lg-25 {
        width: 25%;
    }
}

@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100%;
    }

    .w-xl-75 {
        width: 75%;
    }

    .w-xl-50 {
        width: 50%;
    }

    .w-xl-25 {
        width: 25%;
    }
}





/*Modo Oscuro*/
html[data-bs-theme="dark"] .logo {
    content: url("/img/logos/LogoMenuDark.png");
    width: 164px;
}

html[data-bs-theme="dark"] p {
    color: white;
}

html[data-bs-theme="dark"] i {
    color: white;
}





/*Fuente*/
@font-face {
    font-family: 'Gotham Medium';
    src: url('../fonts/GothamMedium.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('../fonts/GothamBook.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Asap Regular';
    src: url('../fonts/Asap-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Gotham Medium', sans-serif;
}

p {
    font-family: 'Asap Regular', sans-serif;
}

.a-no-styles {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}


/*Resets*/
.btn-reset {
    background: none;
    color: inherit;
    border: none;
    font: inherit;
    padding: 0;
    cursor: pointer;
    outline: inherit;
}


/***********ELEMENTOS HTML***********/
/*Cabecera*/
.encabezado-personalizado {
    background-color: var(--bs-fondo-azul);
    color: white;
    padding: 10px;
    width: 180px;
    display: inline-block;
    margin: 0;
}
.encabezado-personalizado-extendido {
    background-color: var(--bs-fondo-azul);
    color: white;
    padding: 10px;
    width: 500px;
    display: inline-block;
    margin: 0;
}
.linea-personalizada {
    border: 2px solid var(--bs-fondo-azul);
    margin: 0 0 40px;
}
/*  <div >
        <h5 class="encabezado-personalizado" > Direcciones</h5 >
        <div class="linea-personalizada" > </div >
    </div >
*/


/*Link*/
.link:hover {
    text-decoration: none;
}

a.non-clickable {
    pointer-events: none;
    cursor: default;
}


/*Pesta�as*/
#fichaLeadTabs .nav-link:hover {
    background-color: rgba(13, 162, 228, 0.35);
    transition: background-color 0.3s ease;
}

#fichaInmuebleTabs .nav-link:hover {
    background-color: rgba(13, 162, 228, 0.35);
    transition: background-color 0.3s ease;
}

#sidebar a:not(.no-hover-effect):hover {
    background-color: rgba(13, 162, 228, 0.35);
    transition: background-color 0.3s ease;
}

.dropend button:hover {
    background: rgba(13, 162, 228, 0.35);
    transition: background-color 0.3s ease;
}


/*Table*/
table a {
    color: var(--bs-body-color);
}

.table-group-divider {
    border-top-color: var(--bs-primary);
}

.table-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

    .table-grid > div {
        display: flex;
        flex-direction: column;
    }

.fixedHead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-wrapper {
    max-height: 200px;
    overflow: auto;
    display: inline-block;
}


/*Label*/
label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*Sidebar*/
#sidebar-toggler {
    position: absolute;
    left: 100%;
    bottom: 25px;
    z-index: 1020;
}

#sidebar-offcanvas-toggler {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1020;
}

/*#sidebar-offcanvas {
    min-height: calc(100vh - 96px);
    position: fixed;
    z-index: 1010;
}
*/

/*Navbar*/
nav .active {
    color: black !important;
}

.nav-pills .nav-link:hover {
    color: var(--bs-emphasis-color) !important;
}

.nav-pills .nav-link:active {
    color: var(--bs-black) !important;
    background: var(--bs-primary-bg-subtle) !important;
}


/*Buttons*/
/* Animaci�n para todos los botones de Bootstrap */
.btn {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .btn:hover,
    .btn:focus {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        outline: none;
    }

    .btn:active {
        transform: scale(0.95);
    }

.btn-reset-formato {
    cursor: default; /* Restablece el cursor al valor predeterminado */
    transition: none; /* Elimina las transiciones */
    transform: none; /* Restablece la transformaci�n */
    box-shadow: none; /* Elimina la sombra */
    outline: none; /* Elimina el contorno */
}

    /* Anulaci�n de los estilos para los estados :hover, :focus y :active */
    .btn-reset-formato:hover,
    .btn-reset-formato:focus,
    .btn-reset-formato:active {
        transform: none;
        box-shadow: none;
    }



.btn-primary-aries {
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-color: white;
    color: white;
    background-color: var(--bs-primary);
    /*background-color: #2aace4;*/
    border: none;
}

.swal2-confirm.btn-primary-aries {
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-color: white;
    color: white;
    background-color: var(--bs-primary);
    /*background-color: #2aace4;*/
    border: none;
}

.btn-secondary-aries {
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-color: white;
    color: white;
    background-color: var(--bs-fondo-azul);
    /*background-color: #162f44;*/
    border: none;
}
.btn-excel-aries {
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-color: white;
    color: white;
    background-color: var(--bs-fondo-excel);
    /*background-color: #162f44;*/
    border: none;
}
.swal2-cancel.btn-secondary-aries {
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-color: white;
    color: white;
    background-color: var(--bs-fondo-azul);
    /*background-color: #162f44;*/
    border: none;
}

.btn-gris-aries {
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-color: white;
    color: #2aace4;
    /*background-color: #ebf2f7;*/
    background-color: var(--bs-fondo-gris);
    border: none;
}


/*Table*/
.table-hover td {
    transition: border-bottom 0.3s;
    border-bottom: 2px solid transparent;
}

.table-hover tr:hover td {
    border-bottom: 2px solid #0DA2E4;
}

table.text-center td {
    vertical-align: middle;
}



/*Form*/
.form-full-width {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.form-container {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}




/***********SWEETALERT***********/
.swal-footer {
    display: flex;
    justify-content: space-around;
}



/***********UTILIDADES***********/

/*BASICAS*/
.no-scroll {
    overflow: hidden;
}

.shadow {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

/*Loader*/
#loader {
    position: absolute;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-content: center;
    color: var(--bs-primary);
    background-color: rgba(0, 0, 0, 0.5);
}

    #loader > div {
        width: 5rem;
        height: 5rem;
    }




/*VALIDACIONES FIELDS*/

/*Input a rojo*/
.input-invalid {
    border-color: #ff7070 !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important;
    transition: all 0.3s ease-in-out !important;
}

    .input-invalid:hover {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
    }

div.validation-summary-errors {
    margin-bottom: 3%;
}

    div.validation-summary-errors ul {
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 0;
    }

.has-error {
    border-color: #dc3545 !important;
    outline: 0;
    box-shadow: 0 0 0 0.05rem rgba(255, 180, 180, 0.5) !important; /* boxShadow a�n m�s suave */
    transition: all 0.3s ease-in-out !important;
}

    .has-error:hover {
        box-shadow: 0 0 6px rgba(255, 150, 150, 0.5); /* Reduzco a�n m�s la intensidad y transparencia */
    }


/*Asterisco en label*/
.required-field::after {
    /*    content: "\F4CB"; 
    font-family: "bootstrap-icons";
    color: #dc3545;
    padding-left: 0.5rem;*/
    content: '\F151'; /* bi-asterisk */
    font-family: bootstrap-icons;
    font-size: .7rem;
    margin: .3rem;
    vertical-align: text-top;
    color: var(--bs-azul-banner);
}

/*Animacion Inputs*/
.input-custom {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

    .input-custom:hover,
    .input-custom:focus {
        transform: scale(1.05) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        outline: none !important;
    }





/*Animacion Toasts*/
@keyframes spinFadeIn {
    0% {
        opacity: 0;
        transform: rotateY(90deg) scale(1);
    }

    60% {
        opacity: 1;
        transform: rotateY(0) scale(1);
    }

    70% {
        transform: rotateY(0) scale(1.01);
    }

    75% {
        transform: rotateY(0) scale(0.995);
    }

    80% {
        transform: rotateY(0) scale(1.01);
    }

    85% {
        transform: rotateY(0) scale(0.995);
    }

    90% {
        transform: rotateY(0) scale(1.01);
    }

    95% {
        transform: rotateY(0) scale(0.995);
    }

    100% {
        transform: rotateY(0) scale(1);
    }
}

.toast-custom {
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform-origin: right center;
    animation: spinFadeIn 1.2s forwards;
}

    .toast-custom .toast-body {
        padding: 10px 20px;
    }




/***********CREACIONES***********/

/*Alerta Customizada*/



.alert-custom {
    border: 2px solid #f8d7da;
    background-color: #f8d7da30;
    color: #842029;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.alert-success-custom {
    border: 2px solid #009fdf;
    background-color: #ebf2f7;
    color: black;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.alert-login-custom {
    background-color: transparent; /* Elimina el color de fondo */
    border: none; /* Elimina el borde */
    color: #ffc107; /* Cambia el color del texto a amarillo */
    padding: 10px 20px;
    font-size: 1em;
}


html[data-bs-theme="dark"] .alert-custom {
    border: 2px solid #7a0000;
    background-color: #450000;
    color: #f1f1f1;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}


/*Badge Customizado*/
.badge-custom {
    display: inline-block;
    background-color: #f8d7da;
    color: #842029;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    margin-left: 5px;
    vertical-align: middle;
}







/***********VISTAS***********/

/*LOGIN*/
.alert-custom-login {
    border: 2px solid #d32f2f;
    background-color: rgba(211, 47, 47, 0.1);
    color: #d32f2f;
    padding: 5px;
    border-radius: 8px;
    font-size: 1.1em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 5px;
    text-align: center;
}

#rightColumnLogin {
    background-image: url('/img/fondos/FondoLogin.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

#leftColumnLogin {
    background-color: #142c44;
    min-height: 100vh;
}

.column-with-line {
    border-left: none;
}

/* A�ade el borde solo para pantallas medianas y m�s grandes */
@media (min-width: 991.98px) {
    .column-with-line {
        border-left: 1px solid #2aace4;
    }
}

.logo-image {
    max-width: 100%;
    height: auto;
}

.icon-container {
    width: 48px;
    display: inline-block;
    overflow: hidden;
    border: none;
}

    .icon-container img {
        max-width: 100%;
        max-height: 100%;
        border: none;
    }
/* Fondo del spinner */
#spinner-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Spinner animado */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ddd;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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

.form-login-container {
    max-width: 300px;
}











/*HOME*/
.user-icon-wrapper {
    border-radius: 50%;
    icon-wrapper border: 1px;
    border-style: solid;
    border-color: black;
    background-color: white;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper {
    position: relative;
}

.icon-circle {
    background-color: var(--bs-primary);
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.icon-image {
    width: 80%;
}

.notification-circle {
    background-color: black;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

/* Estilos adicionales para el hover */
.icon-wrapper:hover .icon-circle,
.icon-wrapper:hover {
    transform: scale(1.2); /* Escala ligeramente m�s grande para ambos elementos */
    transition: transform 0.7s ease; /* Transici�n suave para la transformaci�n */
}

.notification-number {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem; /* Adjust font-size as needed */
}

.gestion-section {
    display: flex;
    align-items: center;
}

.gestion-item {
    display: flex;
    align-items: center;
    padding-right: 20px; /* Espacio a la derecha de cada item */
    margin-right: 40px;
    cursor: pointer;
}

    /* Estilo para el texto dentro de gestion-item cuando se pasa el rat�n */
    .gestion-item:hover .gestion-text,
    .gestion-item:focus .gestion-text {
        font-weight: bold;
        font-size: 1.1em;
        /*text-decoration: underline;*/
        transition: font-weight 0.7s ease, font-size 0.7s ease, text-decoration 0.7s ease;
    }

    /* Estilo hover y focus solo para el icono dentro de gestion-item */
    .gestion-item:hover .gestion-icon,
    .gestion-item:focus .gestion-icon {
        transform: scale(1.5);
        transition: transform 0.7s ease;
    }

/* Clase para indicar que el item est� activo */
.gestion-item-active .gestion-text {
    font-weight: bold; /* Texto en negrita */
    font-size: 1.1em; /* Tama�o de texto aumentado */
}

.gestion-item-active .gestion-icon {
    transform: scale(1.5); /* Escala m�s grande para el icono */
}

.gestion-item-active .gestion-text,
.gestion-item-active .gestion-icon {
    transition: font-weight 0.5s ease, font-size 0.5s ease, text-decoration 0.5s ease, transform 0.5s ease, color 0.5s ease;
}


.gestion-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.gestion-text {
    margin-left: 10px;
}

.vertical-divider {
    width: 2.5px;
    background-color: #dee2e6; /* Color de la barra, puedes cambiarlo */
    height: 32px; /* Altura de la barra, ajusta seg�n necesites */
    margin-right: 30px;
    margin-left: 20px;
}



/*Sidebar*/
#sidebar-toggler {
    position: absolute;
    left: 100%;
    bottom: 25px;
    z-index: 99;
}

#sidebar-offcanvas-toggler {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 99;
}

/*#sidebar nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;*/ /* Esto distribuir� los elementos uniformemente */
/*}*/

#navbar-container {
    min-height: calc(100vh - 96px);
    width: 120px;
    justify-content: start;
    align-items: center;
    /*
        Sacar la altura del Nav con JS
        const navHeight = document.querySelector('.aside').offsetHeight;
    */
}

#container-home {
    min-height: calc(100vh - 96px);
}

/* Clase para el contenedor general del icono y texto */
.nav-icon-wrapper {
    display: inline-block;
    text-align: center;
}

/* Clase para el c�rculo que contiene el icono */
.nav-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    cursor: pointer;
    transition: transform 0.7s ease, box-shadow 0.5s ease;
}

    .nav-icon-circle:hover,
    .nav-icon-circle:focus {
        transform: scale(1.3); /* Slightly larger scale on hover/focus */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Shadow for depth */
    }

/* Clase para cuando el nav-icon-wrapper est� activo */
.nav-icon-wrapper-active .nav-icon-circle {
    transform: scale(1.3); /* Escala m�s grande, igual que en hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra para profundidad, igual que en hover */
}

.nav-icon-wrapper-active .nav-icon-text {
    font-weight: bold; /* Texto en negrita */
    margin-top: 8px;
    font-size: 1rem;
}


/* Clase para la imagen dentro del c�rculo */
.nav-icon-img {
    width: 42px;
    height: 42px;
}

.nav-icon-mobile-img {
    width: 24px;
    height: 24px;
}

/* Clase para el texto debajo del c�rculo */
.nav-icon-text {
    margin-top: 2px;
    font-size: 0.8rem;
}


/*Banner Carousel*/


#bannerNews {
    height: 300px;
    width: 100%;
}


/*MI PERFIL*/

/*Tarjeta Direcciones*/
.card-address {
    height: 350px;
    max-height: 350px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    /* Margen opcional, aseg�rate de que sea peque�o */
}

    .card-address p {
        font-size: 14px;
    }

.card-add-address {
    height: 350px;
    cursor: pointer;
    border: 2px dashed #c3c3c3;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* Aseg�rate de que el padre tiene posici�n relativa para que el signo '+' se posicione correctamente */
}

    .card-add-address .plus-sign {
        font-size: 3rem; /* Aumenta el tama�o del signo '+' */
        color: #c3c3c3;
        position: relative;
        top: -10px; /* Ajusta este valor para mover el signo '+' hacia arriba */
    }

    .card-add-address .text-add {
        color: #c3c3c3;
        font-weight: bold;
        text-transform: uppercase;
    }



/*RECURSOS DESCARGABLES*/

.card-recurso-descargable {
    width: 208px;
    height: 140px;
    max-height: 140px;
}

    .card-recurso-descargable img {
        /*max-width: 208px;*/
        /*height: 112px;*/
        max-height: 112px;
        object-fit: scale-down;
    }


.card-recurso {
    width: 300px;
    height: 475px;
    margin-bottom: 20px;
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Organiza los hijos en una columna */
}


    /* Ejemplo para limitar a dos l�neas */
    .card-recurso .card-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 600px) {
    .card-recurso .card-title {
        font-size: 0.8em; /* Tama�o m�s peque�o para pantallas m�s estrechas */
    }
}

.card-recurso .card-title {
    font-size: 1em; /* Tama�o relativo del texto */
}

@media (max-width: 600px) {
    .card-recurso .card-title {
        font-size: 0.8em; /* Tama�o m�s peque�o para pantallas m�s estrechas */
    }
}

.card-recurso .card-img-top {
    width: 100%;
    height: 180px;
    object-fit: contain; /* Ajusta la imagen para que se muestre completamente */
    background-color: grey; /* Color de fondo en caso de que la imagen no ocupe todo el espacio */
}
/* Estilos para la imagen */
/*.card-recurso .card-img-top {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }*/

/* Estilos para el cuerpo de la tarjeta */
.card-recurso .card-body {
    flex-grow: 1; /* Permite que el cuerpo de la tarjeta ocupe el espacio disponible */
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Organiza los hijos en una columna */
}

    /* Estilos para los iconos */
    .card-recurso .card-body .d-flex {
        margin-top: auto; /* Empuja los iconos hacia la parte inferior */
    }

.card-recurso .card-recurso .card-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-hover {
    cursor: pointer;
    transition: transform 0.3s ease; /* Transici�n suave para el efecto de escala */
}

    .icon-hover:hover {
        transform: scale(1.4); /* Aumenta el tama�o del icono en un 10% */
    }


/*MANUALES DE MARCA*/
/*Imagenes*/
.imagen-fija {
    width: 110px;
    /*height: 150px;*/
    object-fit: cover;
}

a.imagen-link {
    text-decoration: none;
    color: black;
}

    a.imagen-link:hover,
    a.imagen-link:focus,
    a.imagen-link:active {
        text-decoration: none;
        color: black;
    }


/*ANIMACIONES*/
.animation-rise-forward {
    transition: transform 0.3s ease-in-out, z-index 0s 0.3s; /* Add transition for smoother animation */
    position: relative; /* Ensure z-index works properly */
}

    .animation-rise-forward:hover {
        transform: scale(1.05); /* Increase the scale slightly on hover */
        z-index: 1; /* Bring the anchor to the front */
    }

/*CUSTOM VIDEO S3 SIZE*/
.video-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 350px; 
    overflow: hidden;
    background: white; 
    display: flex;
    align-items: center;
    justify-content: center;
}

    .video-container iframe {
        width: 100%;
        height: 100%;
        border:none;
    }

/* Fondo del spinner */
#spinner-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Spinner animado */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ddd;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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