/* Pequeño (teléfonos grandes) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /*  ---------------------------------------------------header------------------------------------------*/
    
    header{
        margin-bottom: 50px;
    }


    /*  -----------------------------------------------fin-header------------------------------------------*/

     /*  -----------------------------------------------banner---------------------------------------------*/
    .banner__text {
        font-size: 2.5em;
    }
     /*  -------------------------------------------fin-banner---------------------------------------------*/


/*  --------------------------------------------Menu---------------------------------------------*/

.menu {
    position: fixed;
    top: 130px;
    left: 0;
    width: 100%;
    background: #333;
    z-index: 1000;
    padding: 15px 0;
  }
  .menu__toggle {
    display: block;
  }
  .menu__list {
    display: none;
    flex-direction: column;
  }
  .menu__list.active {
    display: flex;
  }
  .submenu {
    position: relative;
    display: none;
  }
  .submenu.active {
    display: block;
  }
  .submenu__item {
    min-width: 100%;
  }

  /*  -------------------------------------------fin-Menu---------------------------------------------*/


    /*-----------------------------------------------targetas---------------------------------*/

    .container__event {
        grid-template-columns: repeat(
          1,
          1fr
        ); /* 2 columnas por fila en pantallas pequeñas */    
    }

    /*-----------------------------------------fin-targetas---------------------------------*/


   /*-----------------------------------------------targetas eventos---------------------------------*/

.form-card__left .button_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

form-card__left .button_container {
  flex-direction: column;

}

.form-card.form-card--add_event {
  display: flex;
  flex-direction: column !important; /* apila .left y .right */
  gap: 20px; /* opcional para espacio entre secciones */
}

 /*-------------------------------------------Fin-targetas eventos---------------------------------*/
 /* ----------------------------------------alquiler de material--------------------*/
  .material-tabla__celda {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  .material-tabla__titulo {
    font-size: 1.4rem;
  }

  .material-tabla__fila--seleccionada {
    background-color: #d4eaff !important;
  }

  .content {
    flex-direction: column;
  }

  .filters {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .reserva-tabla__celda {
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  .reserva__titulo {
    font-size: 1.5rem;
  }

  .reserva__subtitulo {
    font-size: 1.2rem;
  }

  .reserva-formulario__boton {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  /* ----------------------------------------fin-alquiler de material--------------------*/ 
/*-----------------------------------------------foro---------------------------------*/
 .forum__container {
      flex-direction: column;
  }
  /*-----------------------------------------------fin-foro---------------------------------*/
  /*-----------------------------------------------privacy y terms--------------------------------*/  

   .container-privacy , .container-terms  {
        padding: 20px;
        margin: 0 15px;
    }
    
   .container-privacy  .terms__title, .container-terms  .terms__title {
        font-size: 1.8rem;
    }
    
    .container-privacy .terms__subtitle,  .container-terms .terms__subtitle  {
        font-size: 1.3rem;
    }

    /*-----------------------------------------------fin-privacy y terms--------------------------------*/

    /* -----------------------------------------------contact---------------------------------*/

     .contact {
    padding: 1rem;
  }

  .contact__title,
  .contact__subtitle {
    text-align: center;
  }

  .form__submit {
    align-self: stretch;
    text-align: center;
  }
  /* -----------------------------------------------fin-contact---------------------------------*/

  /* -----------------------------------------------asignar rol---------------------------------*/

   .container-gestion {
        padding: 1rem;
        margin: 1rem;
    }
    
    .container-gestion .filters {
        grid-template-columns: 1fr;
    }
    
    .user-table th, 
    .user-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
    /* -----------------------------------------------fin-asignar rol---------------------------------*/

    /* -----------------------------------------------perfil---------------------------------*/
        .card__update {
        padding: 20px;
        width: 95%;
    }
    
    .card__title {
        font-size: 2rem;
    }
    
    .form > div:last-child {
        flex-direction: column;
    }
    
    .button {
        width: 100%;
    }
    /* -----------------------------------------------fin-perfil---------------------------------*/

    /* -----------------------------------------------foro---------------------------------*/


  .container {
    display: flex;
    flex-direction: column; /* apilar vertical */
    gap: 15px; /* separación entre secciones */
  }

  .section {
    width: 100%;  /* que ocupe todo el ancho del contenedor */
    display: block; /* forzar bloque */
    margin-bottom: 15px;
  }

  /* Ocultar resizers porque no sirven en móvil */
  .resizer {
    display: none;
  }
  /* -----------------------------------------------fin-foro---------------------------------*/
}