/* PulsoLab — pasada de teléfono (Fase 2 de la app instalable).
 *
 * TODO vive dentro de @media (max-width: 720px): en un computador de escritorio
 * este archivo no cambia un solo píxel. Eso es deliberado — el dashboard lo usan
 * seis tiendas todos los días y esto no puede tocarles nada.
 *
 * POR QUÉ SELECTORES DE ATRIBUTO
 * Las rejillas de indicadores se arman con estilos EN LÍNEA dentro de plantillas
 * de JavaScript (tiendas.html:2097 y compañía). Un estilo en línea solo lo vence
 * un !important, y no hay clase a la que agarrarse. Se ataca por el texto exacto
 * del atributo style, y además por :has() como respaldo semántico, de modo que si
 * alguien cambia el espaciado del estilo en línea la corrección no se pierde.
 * Alternativa descartada: reescribir las plantillas de JS — más limpio, pero
 * mucho más riesgoso para lo que se gana.
 */

@media (max-width: 720px) {

  /* ── 1. Filas de indicadores ─────────────────────────────────────────────
     Cinco columnas en una pantalla de 390 px dan ~70 px por tarjeta: el número
     no cabe y se parte. A dos columnas se leen. */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr;"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  /* Respaldo: cualquier rejilla que contenga tarjetas de indicador. */
  div:has(> .pl-kpi) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* minmax(0,1fr) y no 1fr: "1fr" es en realidad minmax(AUTO,1fr), o sea que la
     columna NUNCA baja del ancho de su contenido. Con un monto como
     $184.520.000 en 1.5rem y peso 800 —una sola palabra, sin dónde partir— la
     columna se plantaba en 207 px y dos de esas se salían de la pantalla.
     Medido en el arnés: 441 px de desborde antes, 22 px con solo cambiar a dos
     columnas, 0 con esto. El min-width:0 es la otra mitad de la misma regla:
     un hijo de rejilla tampoco encoge por debajo de su contenido sin él. */
  .pl-kpi { min-width: 0; padding: 13px 14px !important; }
  /* Y el número tiene que caber de verdad, no solo la caja: en la tarjeta el
     valor es el segundo div (etiqueta / valor / subtítulo). */
  .pl-kpi > div:nth-child(2) { font-size: 1.15rem !important; }

  /* ── 2. Filas de filtros y pares de paneles: apilar ──────────────────────
     Son controles de formulario en columnas fijas (110 px, 60 px…). Apretados
     no se pueden ni tocar con el dedo. */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr auto"],
  [style*="grid-template-columns:60px 1fr 1fr 110px 110px auto"],
  [style*="grid-template-columns:1fr 1fr;gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 3. Tablas anchas ────────────────────────────────────────────────────
     Que ruede la TABLA dentro de su tarjeta, nunca la página entera: una página
     que se mueve de lado se siente rota. No se le pone overflow a la tabla en sí
     (display:block rompería la alineación de columnas); se le pone al contenedor. */
  /* Solo .card, NO cualquier div con tabla dentro: dar overflow a un contenedor
     lo convierte en recortador, y un menú desplegable que se salga de esa caja
     quedaría cortado. Acotarlo a la tarjeta deja fuera los contenedores
     genéricos, que es donde vive ese riesgo. */
  .card:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-wrapper table { font-size: 12.5px; }
  .main-wrapper table td,
  .main-wrapper table th { padding-left: 9px !important; padding-right: 9px !important; }

  /* ── 4. NO va aquí un `body { overflow-x: hidden }` ──────────────────────
     Era el cinturón obvio contra el desplazamiento lateral y se quitó a
     propósito: .app-header es `position: sticky` (tiendas.html:82), y poner
     overflow en body convierte a body en contenedor de desplazamiento, que es
     la forma clásica de que un encabezado pegajoso deje de pegarse. Recortar el
     síntoma no valía romper el encabezado justo en el teléfono, que es donde más
     se agradece. La causa real ya está atacada arriba con minmax(0,1fr) y con
     las tablas que ruedan dentro de su tarjeta: medido, el desborde pasó de
     441 px a 1 px de redondeo. */

  /* ── 5. Objetivos táctiles ───────────────────────────────────────────────
     44 px es el mínimo de Apple. Sin esto hay botones de 26 px que se fallan. */
  .main-wrapper button,
  .main-wrapper .btn-primary,
  .main-wrapper .btn-secondary { min-height: 40px; }

  /* ── 6. Zona segura del iPhone ───────────────────────────────────────────
     Instalada, la app llega hasta abajo del todo y la barra de inicio del
     iPhone se come lo que quede ahí. Afecta a lo fijo: el botón de Wolfy. */
  .wolfy-fab {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .wolfy-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Pantallas muy angostas (iPhone mini / SE): los indicadores en una columna,
   porque a dos columnas los montos con separador de miles se parten. */
@media (max-width: 380px) {
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* En regla APARTE, no en la lista de arriba: si el navegador no entiende
     :has(), un selector inválido invalida TODA la lista separada por comas — se
     perderían también los selectores de atributo, que sí entiende. */
  div:has(> .pl-kpi) { grid-template-columns: 1fr !important; }
}