/* ============================================================================
   Juicy — Dashboard Design System · RESUMEN (la home)
   ----------------------------------------------------------------------------
   DE DÓNDE VINO: `assets/css/main.css`, sección "DASHBOARD HOME". Movido, NO
   copiado — dejar una copia en las dos hojas es cómo se separan.

   POR QUÉ AHORA: el resumen cruza al front nuevo, y **el front NO importa
   `main.css`** (a propósito: es la capa legacy). Sin mover esto, la pantalla de
   React salía con las tarjetas y la tabla bien vestidas —eso ya viajaba en
   `widget.css`, `badge.css` y `table.css`— pero SIN REJILLA: los cuatro KPIs uno
   debajo de otro y la gráfica a ancho completo.

   Es el mismo modo de fallo que `.text-red`, `.avatar`, `.widget_subtitle` y la
   caja de referencia de horas. Van cinco.

   LO QUE NO SE MOVIÓ, PORQUE ESTABA MUERTO: `.dash_header`, `.dash_header h1` y
   `.dash_subtitle` — cero emisores en todo el repo (el bloque usa `.page_header`
   y `.page_header_subtitle`, que son del DS). Eran ~14 líneas y es el S-1 del
   doc 37. Se borran aquí en vez de mudarse.

   QUÉ ES DE LA PÁGINA Y QUÉ DEL COMPONENTE: esto es sólo la REJILLA (cómo se
   reparten las tarjetas) y dos realces de celda. La tarjeta, sus cuerpos, la
   pastilla y la tabla siguen en `widget.css`, `badge.css` y `table.css`, que es
   donde les toca.
   ============================================================================ */

.dashboard_home {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}

/* ---- Rejilla ------------------------------------------------------------- */

.dash_kpis { display: flex; gap: 16px; }
.dash_kpis > .widget { flex: 1 1 0; min-width: 0; }

.dash_main_row { display: flex; gap: 16px; align-items: stretch; }
.dash_chart_card { flex: 1 1 0; min-width: 0; }
.dash_lowstock_card { width: 400px; flex: 0 0 400px; }

/* La gráfica crece con la tarjeta: el DS fija 170px de barras y aquí la fila la
   estira para igualar el alto del panel de al lado. */
.dash_chart_card .widget__chart { flex: 1 1 auto; }
.dash_chart_card .widget__bars { flex: 1 1 auto; height: auto; min-height: 170px; }

/* ---- Realces de la tabla de órdenes -------------------------------------- */

/* La celda del DS va en Light 300; el folio y el total son el dato que se busca
   de un vistazo, así que suben a Medium (500). Antes decían 600, un peso que la
   fuente no carga (header.php:11) y que el navegador resolvía a 700. */
.dashboard_home .table .td-id,
.dashboard_home .table .td-total { font-weight: 500; }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .dash_kpis { flex-wrap: wrap; }
  .dash_kpis > .widget { flex: 1 1 45%; }
  .dash_main_row { flex-direction: column; }
  .dash_lowstock_card { width: auto; flex: 1 1 auto; }
}