/* Extra pequeño (teléfonos) */
@media (max-width: 575.98px) {
  /*  ---------------------------------------------------header------------------------------------------*/

  header {
    margin-bottom: 50px;
  }

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

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

  .menu {
    position: fixed;
    top: 70px;
    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---------------------------------------------*/
  /*-----------------------------------------------estilos pagina login---------------------------------*/

  .login-box {
    max-width: 80%;
    min-width: 80%;

    align-items: center;
    text-align: center;
  }

  /*-------------------------------------------fin-estilos pagina login---------------------------------*/
  main {
    padding: 0 20px 20px 20px;
  }

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

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

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

  .form-card {
    flex-direction: column;
  }

  .form-card__left {
    align-items: center;
  }

  .form-card__right {
    padding-left: 0;
  }

  .form-card__right select,
  .form-card__right input[type="date"],
  .form-card__right input[type="time"] {
    width: 100%;
  }

  .form-card__right .card__time-container {
    flex-direction: column;
    gap: 10px;
  }

  .form-card__right button[type="submit"] {
    width: 100%;
  }

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

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

  /* ----------------------------------------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.4rem;
    }
    
    .container-privacy .terms__subtitle,  .container-terms .terms__subtitle  {
        font-size: 1rem;
    }

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

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

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

      /* -----------------------------------------------perfil---------------------------------*/
        .card__update {
        padding: 20px;
        width: 95%;
    }
    
    .card__title {
        font-size: 1rem;
    }
    
    .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---------------------------------*/
}