/* FLOATING BUTTONS DESKTOP - V3 */
/* Solo se muestran en escritorio, no en móvil */

@media screen and (min-width: 500px) { 
    
    #floatingButtonsContainer {
        position: fixed;
        bottom: 10px;
        right: 30px;
        display: flex;
        gap: 5px;
        z-index: 9999;
    }

    /*  Botones estilo general  */
    #floatingButtonsContainer a button {
        height: 35px;
        display: flex;
        align-items: center;
        gap: 8px; /* Default verde WhatsApp */
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        transition: background-color 0.3s ease;
    }

    #floatingButtonsContainer a button img {
        width: 20px;
        height: 20px;
    }

    /* Botón WhatsApp  */
    #waButton button {
        background-color: #25D366;
    }

    /* Posición normal */
    .containerCourses {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 9999;
    }

    /* Centrado absoluto en pantalla */
    .containerCoursesCentered {
        transform: translate(-50%, -50%);
        left: 50%;
        right: unset !important;
    }

    .containerCoursesHidden {
        display: none!important;
    }
}

@media screen and (max-width: 499px) {

    /* Ocultar el contenedor flotante */
    #floatingButtonsContainer {
      display: none !important;
    }

    /* Cambiar grid a 1fr */
    .nav-grid,
    .activities-resources {
      grid-template-columns: 1fr !important;
    }

    /* Ajustar el tamaño y espaciado de los ítems */
    .nav-item,
    .additional-resources,
    .content-activities {
      font-size: 0.9em;
      padding: 20px 10px !important;
    }

    /* Asegurar que las imágenes escalen correctamente */
    img {
      max-width: 100%;
      height: auto;
    }
}