/* Pantallas menores a 768px (ej: celulares) */
@media (max-width: 768px) {

  body {
    background-color: #185fda;
    /* min-width: 500px; */
    font-size: 16px;
  }

  .menu-bar {
    background-color: var(--menu-bg);
  }

  table {
    width: 100%;
  }


  .container th,
  .container td {

    font-size: 13px;

  }

.tdimgzise{
  width: 200px;
  background-color: red;
}


  td.estado-libre {
    background-color: var(--accent);
    color: green;
    font-weight: bold;
    border-radius: 8px;
    font-size: medium;
    max-width: 10px;
  }




  .Options {

    /* Para asegurar que la opción seleccionada esté centrada */
    width: 95%;
    font-size: 10px;
  }

.inputime {
  width: 80%;
  height: 7px;
}


  .modal {
    width: 100%;
    height: 100%;
  }

  .modal-content {

    max-width: 480px;
    max-height: 1000px;
    height: fit-content;
    width: fit-content;
  }



  .total {
    display: none;
  }

  .tbtotal {
    display: none;
  }


}




@media (min-height: 700px) {

  .container {
    padding: 20px;
    max-height: calc(100vh - 200px);
    /* Por ejemplo, si tienes un header de 100px */
  }
    /* ✅ Fijar el encabezado */
    thead th {
      position: sticky;
      top: -23px;
      z-index: 1;
    }


 
}
@media (min-height: 955px) {

  .container {
    padding: 20px;
    max-height: calc(100vh - 250px);

    /* Por ejemplo, si tienes un header de 100px */
  }
  
  }