/* ── La hoja de teléfono, común a las pantallas del sistema ───────────────────
   Estas vistas nacieron para un escritorio de 1440: rejillas de tres columnas,
   una barra en una sola línea y un alto de 100vh con scroll interno. En 390px
   eso no se achica, se corta — y lo que queda fuera del borde derecho es
   siempre lo mismo: el score, la señal y el botón, o sea lo que se viene a
   mirar. Acá van las correcciones que TODAS comparten; lo propio de cada
   pantalla vive en su <style>, porque es distinto en cada una.

   Se apoya en cuatro marcas del markup, y por eso pisa con !important: los
   estilos de estas pantallas son en línea y no hay otra forma de alcanzarlos.

     [data-pantalla] el lienzo de la pantalla completa
     [data-barra]    la barra superior con el logo, el menú y los vestidos
     [data-nav]      los enlaces entre pantallas
     [data-lienzo]   la columna central con el ancho máximo

   Regla de la casa al tocar esto: se mide con la sonda de desborde y se mira
   la captura al ancho real. `--window-size` de Chrome miente —renderiza más
   ancho y recorta la imagen—, así que una captura que no venga del mismo
   viewport que se midió no prueba nada. */

@media (max-width: 760px) {

  /* La página scrollea entera. Dos scrolls anidados en un teléfono son una
     trampa: el de adentro se descubre por accidente y nadie sabe que está. */
  [data-pantalla] { height: auto !important; min-height: 100vh; overflow: visible !important; overflow-x: clip !important; }
  main { overflow: visible !important; }

  /* El campo difuso del fondo mide 46vw y asoma 31px por el borde. */
  [data-pantalla] > div[aria-hidden], [data-pantalla] > div:first-child { overflow: hidden !important; }

  /* La barra se dobla en vez de empujar; el separador elástico sobra cuando
     hay más de una línea. */
  [data-barra] { flex-wrap: wrap !important; gap: 8px 12px !important; padding: 9px 14px !important; }
  [data-barra] > span:empty { display: none !important; }
  [data-nav] { flex-wrap: wrap !important; margin-left: 0 !important; gap: 4px 2px !important; }
  [data-nav] button { margin-left: 0 !important; }

  [data-lienzo] { padding: 0 14px !important; min-height: 0 !important; }

  /* Los titulares de 36-38px piden un ancho que no existe. */
  h1 { font-size: 27px !important; }
  h2 { font-size: 23px !important; }

  /* Cualquier riel de píldoras se envuelve en vez de crecer a lo ancho. */
  [data-pildoras] { flex-wrap: wrap !important; }

  /* Toda rejilla marcada como apilable pasa a una sola columna; las de campos
     cortos —una cifra y su rótulo— aguantan dos y se leen mejor así. */
  [data-apila] { grid-template-columns: 1fr !important; }
  [data-apila-2] { grid-template-columns: 1fr 1fr !important; align-items: start !important; }
}