/* Capa móvil, compartida por todas las pantallas.
 *
 * Va en un archivo aparte y no adentro del <style> de cada template porque las
 * clases son las mismas en todos (.wrap, .cards, .bar, .tabs, .actions) y
 * copiar 100 líneas en ocho archivos garantiza que se desincronicen.
 *
 * Se carga DESPUÉS del <style> de cada página, así gana por orden y casi no
 * hace falta !important.
 *
 * El problema que resuelve, medido en el dashboard de leads a 390 px: había que
 * scrollear 1.650 px —header de 250, tarjetas de 340, filtros— antes de ver el
 * primer lead, y la tabla de 7 columnas entraba en 781 px de ancho sobre una
 * pantalla de 390. En el celular se trabaja parado y con una mano: lo que
 * importa es el nombre, el teléfono y los tres botones.
 */

/* En pantalla grande los filtros no se pliegan: el <summary> no se muestra y el
   <details> queda abierto (lleva `open` en el HTML). */
details.filtros > summary { display: none; }

@media (max-width: 720px) {

  /* ── Aire ──────────────────────────────────────────────────────────────
     24 px de padding lateral son el 12 % del ancho de un teléfono. */
  .wrap { padding: 12px 10px; }
  header { padding: 10px 12px; gap: 8px; }
  header h1 { font-size: 15px; gap: 7px; }
  header h1 img { width: 22px; height: 22px; }

  /* ── Barra de navegación del header ────────────────────────────────────
     Ocho botones envueltos ocupaban cuatro renglones (250 px) antes de que
     se viera un solo lead. En una fila con scroll horizontal ocupan 44. */
  header .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding-bottom: 2px;
  }
  header .row::-webkit-scrollbar { display: none; }
  header .row > * { flex: 0 0 auto; }
  /* El estado del scraper y el nombre de usuario no valen una fila entera
     en un teléfono: viven en el dashboard grande. */
  header .status-line { display: none; }

  /* ── Tarjetas de resumen ───────────────────────────────────────────────
     Son un vistazo, no el contenido: de 2 columnas gigantes (338 px de alto)
     a 3 chicas (~110). */
  .cards { grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
  .card { padding: 8px 9px; border-radius: 8px; }
  .card .n { font-size: 17px; }
  .card .l { font-size: 9px; letter-spacing: 0; }

  /* ── Pestañas ──────────────────────────────────────────────────────────
     Se salían del ancho y quedaban cortadas. Ahora se deslizan. */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 9px 12px; font-size: 13px; }

  /* ── Filtros ───────────────────────────────────────────────────────────
     Cada control a lo ancho: medio control por fila no se puede usar. */
  .bar { padding: 12px; gap: 8px; }
  .bar > div { width: 100%; }
  .bar input, .bar select, .bar textarea { width: 100%; }
  .bar .btn { width: 100%; padding: 12px; }
  /* El buscador y los selects, con 16 px: abajo de eso iOS hace zoom solo al
     tocarlos y deja la página corrida. */
  input, select, textarea { font-size: 16px; }

  .tabbed { padding: 12px; border-radius: 0 8px 8px 8px; }
  .runbar { font-size: 12px; padding: 9px 11px; }

  /* ── Tabla → fichas apiladas ───────────────────────────────────────────
     Siete columnas no entran en 390 px: o se aplastan o hay que scrollear en
     dos ejes. Cada fila pasa a ser una ficha, con el rótulo de la columna
     puesto por `data-col` (el <thead> se esconde). */
  table { display: block; background: transparent; border-radius: 0; }
  thead { display: none; }
  tbody, tr, td { display: block; width: 100%; }
  tr {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px 12px;
    margin-bottom: 10px;
    position: relative;
  }
  tr:hover td { background: transparent; }
  td { border-bottom: none; padding: 3px 0; }
  td:empty { display: none; }

  /* El rótulo de la columna, para que el dato no quede sin contexto. Va EN
     LÍNEA y no en su propio renglón: en su renglón, tres campos cortos
     (rating, rubro, dirección) costaban 45 px de alto por ficha para nada. */
  td[data-col]::before {
    content: attr(data-col) " ";
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-right: 5px;
  }
  /* El teléfono sí lleva rótulo aparte: abajo tiene botón y chips propios. */
  td[data-col="Teléfono"]::before { display: block; margin-bottom: 2px; }

  /* El checkbox va arriba a la derecha, fuera del flujo: en su propia línea
     desperdiciaba un renglón entero. Con área de toque de 44 px. */
  td.check {
    position: absolute;
    top: 6px; right: 6px;
    width: 44px; height: 44px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  td.check input[type=checkbox] { width: 20px; height: 20px; }
  /* Y el nombre no se mete abajo del checkbox. */
  td.local { padding-right: 46px; }
  td.local .name { font-size: 15px; }

  /* ── Botones de acción ─────────────────────────────────────────────────
     Tenían 25-28 px de alto: abajo del mínimo para el dedo. */
  .actions { gap: 8px; margin-top: 6px; }
  .actions .btn.sm,
  .actions form .btn { min-height: 40px; min-width: 46px; font-size: 14px; padding: 9px 12px; }
  .actions .btn.green { flex: 1 1 auto; }   /* WhatsApp es la acción principal */

  /* Las celdas sin dato ("—") se esconden: en el celular cada una es un
     renglón entero con su rótulo, y Rubro/Dirección vienen vacías casi
     siempre. En compu quedan, que ahí la columna existe igual. */
  td.vacia { display: none; }
  .solo-compu { display: none; }

  /* ── Filtros plegados ──────────────────────────────────────────────────
     El <summary> solo existe en el celular; en compu el panel va abierto. */
  details.filtros > summary {
    display: block;
    cursor: pointer;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0 8px 8px 8px;
    padding: 11px 14px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  details.filtros[open] > summary { margin-bottom: 0; border-radius: 0 8px 0 0; }

  /* ── Acciones masivas ──────────────────────────────────────────────────
     Seis botones envueltos ocupaban 282 px. En una fila que se desliza, 50. */
  .bulkbar {
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .bulkbar::-webkit-scrollbar { display: none; }
  .bulkbar > * { flex: 0 0 auto; white-space: nowrap; }
  .bulkbar .btn { min-height: 38px; }
  .pager { flex-wrap: wrap; gap: 8px; }
  .pager > * { flex: 1 1 auto; text-align: center; }
  .pager .btn { min-height: 38px; }

  details.import { padding: 12px; }

  /* El mapa de Búsquedas: 420 px de alto en un teléfono se come la pantalla. */
  #mapa { height: 300px !important; }
}

/* Teléfonos muy angostos. El corte va en 340 y no en 380: un iPhone estándar
   mide 375-390 y ahí las 3 tarjetas entran bien — con 380 se quedaban en 2 y la
   franja de tarjetas seguía midiendo 340 px de alto. */
@media (max-width: 340px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  header h1 { font-size: 14px; }
}