/* ═══════════════════════════════════════════════
   Orbita — mobile.css
   Único lugar donde vive el layout de teléfono.

   Se carga DESPUÉS de todos los demás CSS a propósito: los
   hifi-screens*.css redefinen layouts que components.css ya tenía
   resueltos para mobile, y al cargarse después ganaban por orden.
   Cualquier regla responsive nueva va acá, no en components.css.
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Tracks que se estiraban al ancho del contenido ───
     Un track `1fr` es en realidad minmax(auto, 1fr): su mínimo es el
     min-content de lo que contiene, así que el grid crece más que su
     contenedor y desborda la pantalla. minmax(0, 1fr) lo ata al padre.
     Es el equivalente en grid del min-width:0 que necesita un flex item. */
  .cockpit-widgets,
  .habits-layout,
  .habits-stats,
  .inbox-split,
  .inbox-layout,
  .activos-layout,
  .config-layout,
  .salud-top,
  .salud-bottom,
  .sb-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Las tarjetas de activos sí entran de a dos, pero atadas al ancho */
  .activos-grid,
  .assets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ─── Hábitos ─── */
  .today-ritual .ritual-circles {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  /* El heatmap del jardín es tan ancho como días tenga el rango:
     se comprime la columna y scrollea adentro en vez de empujar la página. */
  .garden-row {
    grid-template-columns: 104px minmax(0, 1fr) 56px;
    gap: 10px;
  }
  .garden-row .hm-grid {
    overflow-x: auto;
  }

  /* ─── Configuración ─── */
  .config-nav {
    position: static;
  }
  /* Ocho columnas de controles no entran en 390px: scrollean como bloque */
  .eje-reorder {
    overflow-x: auto;
  }
  .eje-reorder .row {
    grid-template-columns: 16px minmax(120px, 1fr) 80px 36px 28px 22px 22px 20px;
  }

  /* ─── Filas de chips y controles ───
     En desktop entran en una línea; acá tienen que poder bajar. */
  .meta,
  .tasks-toolbar,
  .tasks-toolbar .right,
  .toolbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* components.css le pone flex-shrink:0 y, al no poder achicarse, la fila
     conserva el ancho de todos sus chips sumados aunque tenga wrap. */
  .topbar .meta {
    flex-shrink: 1;
    min-width: 0;
  }

  /* Los tabs no envuelven bien (pierden la línea inferior): scrollean */
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex-shrink: 0; }

  /* ─── Estadísticas ───
     Sus grids se arman con style inline desde el JS, así que un selector
     normal no los alcanza: acá el !important es la única vía. */
  .stats-grid-2,
  .stats-grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ─── Time Log ─── */
  /* La grilla semanal tenía overflow:hidden y se cortaba en seco */
  .tl-grilla {
    overflow-x: auto;
  }

  /* ─── Modal de registro diario ───
     Los tres campos de horario entran en 390px, pero a 89px cada uno los
     labels se parten en dos renglones. Los dos horarios van juntos —se leen
     como un par— y los minutos despierto abajo, a lo ancho. */
  .mreg-horarios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mreg-horarios > .mreg-num:last-child {
    grid-column: 1 / -1;
  }
  /* La tabla del registro histórico es el índice del editor: si no se puede
     tocar una fila con el pulgar, la edición desde el teléfono no existe. */
  .crono-td,
  .crono-td-fecha {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}