/* static/css/custom.css
   🔒 iOS SAFE TABLES: scroll horizontal garantizado.
   - Usar <div class="table-scroll"> como wrapper del <table>
   - Agregar clase table-wide al <table> para forzar overflow
   - Opcional: .scroll-hint encima del wrapper para avisar "Desliza →"
*/

/* Wrapper con scroll + inercia iOS */
.table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-height: 70vh;  /* ✅ LÍNEA CLAVE PARA QUE PUEDA HACER SCROLL VERTICAL INTERNO */
}


/* La tabla NO intenta encogerse: forzamos ancho mínimo real */
.table-scroll > table,
table.table-wide {
  min-width: 960px;                  /* ajusta si tienes muchas columnas */
  border-collapse: separate;         /* más estable con headers */
}

/* En pantallas pequeñas, reduce un poco pero asegúrate de overflow */
@media (max-width: 640px) {
  .table-scroll > table,
  table.table-wide {
    min-width: 760px;
  }
}

/* Evita que botones "desaparezcan" al reflow */
table td .btn {
  display: inline-flex;
  margin: 2px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  table td .btn { width: 100%; }
}

/* Cabeceras sticky desactivadas en móvil para cero riesgo */
@media (max-width: 640px) {
  .table-scroll thead th,
  .table-scroll thead td {
    position: static !important;
  }
}

/* Hint textual para indicar que hay scroll horizontal */
.scroll-hint {
  font-size: 12px;
  color: #6b7280;      /* gray-500 */
  margin: 4px 0 6px 0;
}
.scroll-hint b { color: #111827; }   /* gray-900 */