/* Establece el tamaño base de la fuente para todo el sitio */
html {
    font-size: 14px;
    min-height: 100%;
    box-sizing: border-box; /* Asegura que el padding y los bordes se incluyan en el tamaño total */
}

/* Aumenta el tamaño de la fuente en pantallas más grandes */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* El cuerpo de la página tiene un margen inferior para que no se pegue al pie */
body {
    margin-bottom: 60px;
    padding: 0; /* Elimina el padding por defecto del body */
}

/* Hacer que las imágenes sean responsivas y se ajusten al tamaño del contenedor */
.card-img-top {
    width: 100%; /* Asegura que la imagen se ajuste al contenedor */
    height: auto; /* Mantiene la relación de aspecto */
    object-fit: cover; /* Ajusta el tamaño de la imagen si es necesario */
}

/* Asegura que los contenedores sean flexibles */
.container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten cuando no hay suficiente espacio */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    gap: 20px; /* Añade espacio entre los elementos de manera consistente */
}

/* Hacer que las tarjetas ocupen un 45% del contenedor, pero que se adapten */
.card-custom {
    flex: 1 1 calc(45% - 20px); /* Ocupa 45% del contenedor menos el espacio entre cards */
    margin-bottom: 20px; /* Espacio entre las cards */
    box-sizing: border-box;
    padding: 15px;
}

/* Ajustar el diseño de la barra lateral o el contenedor si se necesita */
.sidebar {
    width: 100%; /* Ocupa todo el espacio disponible */
    max-width: 300px; /* Limita a 300px en pantallas más grandes */
}

/* Ajustar la tipografía para mejorar la legibilidad */
h1 {
    font-size: 2rem; /* Tamaño relativo */
}

p {
    font-size: 1rem; /* Tamaño relativo */
}

/* Estilo general para los botones y campos de entrada */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Diseño de la barra de navegación */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ajustar las cards en pantallas más pequeñas */
@media (max-width: 1200px) {
    .card-custom {
        flex: 1 1 calc(50% - 20px); /* 2 tarjetas por fila en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .card-custom {
        flex: 1 1 100%; /* 1 tarjeta por fila en pantallas pequeñas */
    }

    .sidebar {
        width: 100%; /* La barra lateral ocupa toda la pantalla en móviles */
        margin-bottom: 20px;
    }

}

/* SOLO en móviles, aplicar scroll horizontal */
@media (max-width: 768px) {
    .categorias-container {
        overflow-x: auto; /* Permite desplazamiento en móviles */
        white-space: nowrap;
    }

    .categorias-grid {
        flex-wrap: nowrap; /* No permite que se vayan a una nueva línea */
        justify-content: flex-start; /* Alinea al inicio */
        width: max-content; /* Ajusta el ancho al contenido */
        gap: 10px; /* Reduce la separación en móviles */
    }

    .categoria-item {
        width: 150px; /* Reduce el tamaño en móviles */
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .card-custom {
        flex: 1 1 100%; /* 1 tarjeta por fila en pantallas muy pequeñas */
    }
}

.header-section {
    text-align: center;
    margin-bottom: 40px; /* Espacio debajo del encabezado */
}

    .header-section h1 {
        font-size: 3.5rem;
        margin-bottom: 15px;
    }

    .header-section p {
        font-size: 1.2rem;
    }

/* Estilos del icono de WhatsApp */
.whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-icon {
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    cursor: pointer;
    animation: pulse 1.5s infinite;
}

    .whatsapp-icon i {
        color: white;
        font-size: 30px;
    }

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-icon:hover {
    background-color: #1ebe57;
}

.whatsapp-container a {
    text-decoration: none; /* Elimina la línea subrayada */
    color: inherit; /* Usa el color del contenedor (en este caso, blanco del ícono) */
}

/* Estilos del mensaje */
.whatsapp-message {
    position: absolute;
    top: 50%;
    right: 60px; /* Colocamos el mensaje justo a la derecha del icono */
    transform: translateY(-50%); /* Centrado verticalmente */
    background-color: #25d366;
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1001;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Ocultar el mensaje por defecto */
    animation: slideIn 5s ease-in-out infinite; /* Animación de deslizamiento */
}

@keyframes slideIn {
    0% {
        transform: translateY(-50%) translateX(-100%); /* El mensaje empieza completamente a la izquierda */
        opacity: 0;
    }

    10% {
        transform: translateY(-50%) translateX(0); /* El mensaje se desliza y comienza a aparecer */
        opacity: 1;
    }

    90% {
        transform: translateY(-50%) translateX(0); /* El mensaje permanece visible en su posición */
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) translateX(100%); /* El mensaje se desliza completamente a la derecha, fuera de la vista */
        opacity: 0;
    }
}

.whatsapp-message.show {
    display: block; /* Muestra el mensaje cuando se activa */
}

/* ==============================
   BOTÓN MODO CLARO/OBSCURO EN NAVBAR
================================ */
#themeToggle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

    #themeToggle:hover {
        transform: rotate(15deg) scale(1.1);
    }

    #themeToggle:active {
        transform: scale(0.9) rotate(20deg);
    }