/* Ajustes generales para todas las pantallas. */
.gastronomia-container {
  /* -- */
}

.gastronomia-container-principal {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
  overflow-x: hidden; 
}

/* Ajustes para pantallas de PC (≥ 960px) */
@media (min-width: 960px) {
  .gastronomia-container {
    padding: 0 3px; 
    max-width: 98%; 
    margin: 0 auto; 
    overflow: visible; 
  }

    .gastronomia-container .mud-grid {
      align-items: flex-end;
    }

    .gastronomia-container .buttons-container {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      justify-content: flex-start; 
      align-items: flex-end;
    }
}

/* Ajustes para tablets / iPad (600px a 960px) */
@media (min-width: 600px) and (max-width: 960px) {
  .gastronomia-container {
    padding: 0 3%; 
    position: relative; 
    overflow: visible; 
  }

    .gastronomia-container .mud-item {
      width: 100% !important;
    }

    .gastronomia-container .mud-select,
    .gastronomia-container .mud-datepicker {
      width: 100% !important;
      max-width: none;
    }

  .mud-datepicker .mud-popover {
    position: absolute !important; 
    bottom: auto !important;
    z-index: 9999; 
  }

  .gastronomia-container .buttons-container {
    display: flex;
    justify-content: space-between;
    gap: 10px; 
  }

    .gastronomia-container .buttons-container .mud-button {
      flex: 1; 
      text-align: center;
      min-width: 100px;
    }
}

/* Ajustes específicos para móviles (pantallas < 600px) */
@media (max-width: 600px) {
  .gastronomia-container {
    margin: 0px 5px !important; 
    max-width: calc(98%) !important;
    position: relative; 
    overflow: visible; 
  }

    .gastronomia-container .mud-table {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }

      .gastronomia-container .mud-table .paginador-container {
        display: flex; 
        flex-wrap: wrap;
        justify-content: center; 
        overflow-x: auto; 
        gap: 8px;
      }

    .gastronomia-container .table-buttons-container {
      display: flex;
      justify-content: center; 
      align-items: center;
      gap: 10px; 
    }

    .gastronomia-container .mud-item {
      width: 100% !important;
    }

    .gastronomia-container .mud-select,
    .gastronomia-container .mud-datepicker {
      width: 100% !important;
      max-width: none;
    }

  .mud-datepicker .mud-popover {
    position: absolute !important;
    bottom: auto !important;
    z-index: 9999;
  }

  .gastronomia-container .buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px; 
  }

    .gastronomia-container .buttons-container .mud-button {
      flex: 1;
      min-width: 100px;
      text-align: center;
    }

  .tabla-proveedores-clientes-tribuna {
    margin: 0 !important; 
    width: 100% !important; 
    overflow-x: hidden !important; 
  }

    .tabla-proveedores-clientes-tribuna .mud-table {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important; 
    }

    .tabla-proveedores-clientes-tribuna .mud-table col[style="width: 20%;"] {
      width: auto !important;
    }

    .tabla-proveedores-clientes-tribuna .mud-table .mud-table-pagination {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center; 
      white-space: normal; 
      gap: 8px; 
    }

  .gastronomia-container-principal {
    padding: 0 4px;
  }

    .gastronomia-container-principal .mud-grid .mud-item {
      width: 100% !important;
    }

    .gastronomia-container-principal .mud-text-field,
    .gastronomia-container-principal .mud-select,
    .gastronomia-container-principal .mud-checkbox,
    .gastronomia-container-principal .mud-button {
      width: 100% !important;
      max-width: 100% !important;
    }

    .gastronomia-container-principal .mud-data-grid {
      width: 100% !important;
      min-width: 0 !important;
      overflow-x: auto;
    }

    .gastronomia-container-principal .mud-image {
      max-width: 100%;
      height: auto;
    }
}

.toolbar-container {
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 15px; 
  position: relative; 
  z-index: 0; 
}