/* ============================================================
   Sistema Darjam — Responsive global
   Se carga en todas las páginas, DESPUÉS del <style> propio de
   cada una, para corregir problemas de desborde horizontal sin
   tener que reescribir cada página una por una.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Nunca dejar que una imagen o tabla sea más ancha que su contenedor */
img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   Bug clásico de CSS Grid/Flexbox: por defecto un hijo de grid
   o flex no se achica más allá del ancho de su contenido (ej.
   una tabla ancha), así que termina empujando todo el layout
   hacia afuera de la pantalla en vez de que la tabla saque su
   propio scroll horizontal. Esto afectaba a Deudas, Adelantos,
   Comisiones, Compras, Libro Diario, Libro General, Patrimonio,
   Perfumes, USDT y Registrar Venta (todas usan una grilla de
   2 columnas en algún punto).
   ------------------------------------------------------------ */
.grid > *,
.stats-bar > *,
.admin-nav > *,
.cuentas > *,
.vendedor-grid > * {
  min-width: 0;
}

/* Cualquier tabla que no esté ya envuelta en un contenedor con
   scroll propio, que al menos pueda scrollear en vez de romper
   la página. */
table {
  max-width: 100%;
}

/* Contenedores de tabla ya usados en varias páginas: aseguran
   que el scroll horizontal quede DENTRO de la tabla, no en la
   página entera. */
.tbl-wrap, .tabla-wrap, .table-wrap, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   Pantallas angostas (celular / ventana chica de navegador)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .page {
    padding: 12px !important;
  }

  h1 {
    font-size: 18px !important;
  }

  /* Grillas de 2+ columnas pasan a 1 sola columna */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* Tarjetas de estadísticas: que ocupen el ancho disponible
     en vez de quedar apretadas en una fila */
  .stats-bar, .cuentas {
    flex-direction: column;
  }
  .stat, .cuenta {
    width: 100%;
  }

  /* Formularios con varios campos en fila pasan a columna */
  .form-row, .fg-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  /* Tablas: letra más chica para que entre más antes de scrollear */
  .tbl, table {
    font-size: 11px !important;
  }
}