/**Nuevo diseño web*/
html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

:root {
    --bs-primary: #65a123;
    /* Azul personalizado */
    --bs-success: #28a745;
    /* Verde personalizado */
    --bs-primary-rgb: 171, 194, 81;
    /* RGB del verde personalizado */
}


.bg-primary-1 {
    background: #abc251;
}

.bg-primary-2 {
    background: #14699a;
}

.txt-primary-1 {
    color: #abc251;
}

.txt-primary-2 {
    color: #14699a;
}

/*BOTONES*/
.btn-primary {
    background-color: #abc251;
    /* Cambia esto al color de fondo que quieras */
    border-color: #abc251;
    /* Cambia esto al color de borde que quieras */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #52BE80;
    /* Cambia esto al color de fondo que quieras cuando se pasa el mouse sobre el botón */
    border-color: #52BE80;
    /* Cambia esto al color de borde que quieras cuando se pasa el mouse sobre el botón */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras cuando se pasa el mouse sobre el botón */
}

.btn-outline-primary {
    background-color: #ffffff;
    /* Cambia esto al color de fondo que quieras */
    border-color: #abc251;
    /* Cambia esto al color de borde que quieras */
    color: #abc251;
    /* Cambia esto al color de texto que quieras */
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #52BE80;
    /* Cambia esto al color de fondo que quieras cuando se pasa el mouse sobre el botón */
    border-color: #52BE80;
    /* Cambia esto al color de borde que quieras cuando se pasa el mouse sobre el botón */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras cuando se pasa el mouse sobre el botón */
}

.btn-outline-secondary {
    background-color: transparent;
    /* Cambia esto al color de fondo que quieras */
    border-color: #14699a;
    /* Cambia esto al color de borde que quieras */
    color: #14699a;
    /* Cambia esto al color de texto que quieras */
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #14699a;
    /* Cambia esto al color de fondo que quieras cuando se pasa el mouse sobre el botón */
    border-color: #14699a;
    /* Cambia esto al color de borde que quieras cuando se pasa el mouse sobre el botón */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras cuando se pasa el mouse sobre el botón */
}

.btn-secondary {
    background-color: #14699a;
    /* Cambia esto al color de fondo que quieras */
    border-color: #14699a;
    /* Cambia esto al color de borde que quieras */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras */
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #012e69;
    /* Cambia esto al color de fondo que quieras cuando se pasa el mouse sobre el botón */
    border-color: #012e69;
    /* Cambia esto al color de borde que quieras cuando se pasa el mouse sobre el botón */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras cuando se pasa el mouse sobre el botón */
}


.btn-warning {
    background-color: #da9500;
    /* Cambia esto al color de fondo que quieras */
    border-color: #da9500;
    /* Cambia esto al color de borde que quieras */
    color: #ffffff;
    /* Cambia esto al color de texto que quieras */
}

.efecto-hover {
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Suaviza la transición */
}

.efecto-hover:hover {
    /*Disminuye el tamaño de la imagen*/
    transform: scale(0.9);
    opacity: 0.9;
    /* Cambia la opacidad */
}

.pagination-circle .page {
    margin: 0 2px;
    background-color: #abc251;
    /* Color de fondo para el elemento activo */
}

.pagination-circle .page a,
.pagination-circle .page {
    border-radius: 50%;
    /* Hace los elementos circulares */
    width: 30px;
    /* Ancho del círculo */
    height: 30px;
    /* Altura del círculo */
    padding: 5px;
    /* Ajusta el padding para centrar el texto */
    text-align: center;
    /* Asegura que el texto esté centrado */
    line-height: 20px;
    /* Ajusta la línea para alinear el texto verticalmente */
    color: white;
    /*Quitamos el subrayado del texto*/
    text-decoration: none;
}

.pagination-circle .page.active a,
.pagination-circle .page.active {
    /*Hacemos mas grande el circulo*/
    width: 35px;
    height: 35px;
    line-height: 23px;
    /* Ajusta la línea para alinear el texto verticalmente */
}

/*Hacemos mas grande el circulo cuando se hace hover*/
.pagination-circle .page a:hover {
    width: 35px;
    height: 35px;
    line-height: 23px;
    /* Ajusta la línea para alinear el texto verticalmente */
}

.pagination-circle .page.disabled a,
.pagination-circle .page.disabled {
    color: #6c757d;
    /* Color de texto para el elemento deshabilitado */
}

.menu-canvas a {
    color: #14699a;
    /* Color de texto del menú */
}

.menu-canvas a:hover {
    background-color: #abc251;
    /* Color de texto del menú cuando se pasa el mouse sobre él */
}

.menu-canvas a.active {
    color: #14699a;
    /* Color de texto del menú activo */
    background-color: #abc251;
    /* Color de texto del menú cuando se pasa el mouse sobre él */
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

/**Multicarrusel**/
@media (max-width: 767px) {
    .multiItemCarousel .carousel-inner .carousel-item>div {
        display: none;
    }

    .multiItemCarousel .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
}

.multiItemCarousel .carousel-inner .carousel-item.active,
.multiItemCarousel .carousel-inner .carousel-item-next,
.multiItemCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

    .multiItemCarousel .carousel-inner .carousel-item-end.active,
    .multiItemCarousel .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .multiItemCarousel .carousel-inner .carousel-item-start.active,
    .multiItemCarousel .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.multiItemCarousel .carousel-inner .carousel-item-end,
.multiItemCarousel .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #abc251;
    color: #fff;
}

.nav-pills .nav-link {
    color: #abc251;
}

.accordion-button:not(.collapsed) {
    color: white;
    background-color: #abc251;
}

.google-map {
    width: 100%;
    height: 400px;
    /* Ajusta la altura según tus necesidades */
}

.tabla-personalizada thead tr {
    --bs-table-bg: #14699a;
    --bs-table-color: #fff;
}

.tabla-personalizada tbody tr {
    --bs-table-color: #14699a;
    font-weight: bold;
}

.tabla-personalizada thead tr:first-child th:first-child {
    border-top-left-radius: 20px;
    /* Ajusta el radio según tus necesidades */
    border-bottom-left-radius: 20px;
    /* Ajusta el radio según tus necesidades */
}

.tabla-personalizada thead tr:first-child th:last-child {
    border-top-right-radius: 20px;
    /* Ajusta el radio según tus necesidades */
    border-bottom-right-radius: 20px;
    /* Ajusta el radio según tus necesidades */
}

.bottom-right-main {
    bottom: 50px;
    right: 0px;
}
@media (max-width: 576px) {
    .font-perzonalizado {
        font-size: x-small;
    }

    .bottom-right-main {
        bottom: 0px;
        right: 0px;
    }
}

.font-small {
    font-size: x-small;
}

.cursiva {
    font-style: italic;
}

.errorMessage {
    color: #F5A9A9;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* Ajusta el tamaño según sea necesario */
}

.image-container img {
    width: 100%;
    height: auto;
}

.text-overlay {
    position: absolute;
    padding: 5px;
    border-radius: 5px;
}

.text-overlay-bg-red {
    color: white;
    background-color: rgba(255, 0, 0, 0.9);
}

.text-overlay-bg-yellow {
    /**rgba color amarillo transparente**/
    color: black;
    background-color: rgba(253, 217, 102, 0.9);
}

.text-overlay-bg-blue {
    /**rgba color azul transparente**/
    color: white;
    background-color: rgba(3, 106, 200, 0.8)
}

.top-left {
    top: 10px;
    left: 10px;
}

.top-right {
    top: 10px;
    right: 10px;
}

.bottom-left {
    bottom: 10px;
    left: 10px;
}

.bottom-right {
    bottom: 10px;
    right: 10px;
}

/* parpadeo de carrito*/
.parpadea-descubre {

    animation-name: parpadeo-descubre;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name: parpadeo-descubre;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo-descubre {
    0% {
        background-color: #5e6fe6;
    }

    50% {
        background-color: #4157f5;
    }

    100% {
        background-color: #2732c1;
    }
}

@-webkit-keyframes parpadeo-descubre {
    0% {
        background-color: #5e6fe6;
    }

    50% {
        background-color: #4157f5
    }

    100% {
        background-color: #2732c1;
    }
}

@keyframes parpadeo-descubre {

    0% {
        background-color: #5e6fe6;
    }

    50% {
        background-color: #4157f5;
    }

    100% {
        background-color: #2732c1;
    }
}

.descubre-enlaces {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 34px !important;
    min-width: 300px;
    backface-visibility: hidden;
    box-shadow: 0 12px 14px 8px rgb(0 0 0 / 17%);
    display: block;
    filter: blur(0);
    height: 40px;
    background-color: blue;
    color: white;
    z-index: 2147483648;
    font-size: 15px;
    font-family: Arial, Arial;
    font-style: normal;
    color: rgb(240, 241, 241);
    line-height: 40px;
    padding-left: 8px;
}

.floating-element {
    position: fixed;
    /* O usa position: absolute; si prefieres */
    z-index: 9999;
    /* Fondo semitransparente */
    /*color: white;*/
    padding: 10px;
    border-radius: 5px;
}


.top-right-main {
    top: 250px;
    right: 0px;
}

.bottom-left-main {
    bottom: 0px;
    left: 0px;
}


/* Estilos personalizados para el tooltip */
.custom-tooltip .tooltip-inner {
    background-color: #333;
    /* Fondo del tooltip */
    color: #fff;
    /* Color del texto */
    font-size: 14px;
    /* Tamaño de la fuente */
    padding: 10px;
    /* Relleno */
    border-radius: 5px;
    /* Bordes redondeados */
}

.custom-tooltip .tooltip-arrow {
    color: #333;
    /* Color de la flecha */
}

.menu-container {
    width: 100%;
    /* Ajusta el ancho según tus necesidades */
}

.mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    max-height: 550px;
    /* Ajusta la altura máxima según sea necesario */
    overflow-y: auto;
    /* Habilita el desplazamiento vertical */
}

.mega-menu .dropdown-item {
    padding: 1rem;
}

/** Ajusta el tamaño a 1140px cuando es mayor a 1200px*/
@media (min-width: 2000px) {
    .menu-container {
        width: 1140px;
    }

    .mega-menu {
        max-height: 1100px;
    }
}