/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL ANCHO DE TRABAJO DE LA WEB. UN SOLO SITIO.
   ═══════════════════════════════════════════════════════════════════════════════════════════

   QUÉ FALLABA. Cada pantalla decidía su propio ancho, y lo decidía en un sitio distinto: unas
   con la clase `.container` (main.css + Tailwind), otras con una utilidad en línea
   (`max-w-7xl`, `max-w-6xl`, `max-w-screen-md`), otras con una clase inventada en su propia
   hoja (`.cf-container`, `.mrx-dia__ancho`, `.wrap`) y otras con nada, a sangre. Medido a
   1656px de pantalla convivían OCHO anchos:

       1536  landing, cupones, disputas, bloqueos           (.container)
       1280  backoffice, mis retiradas                      (max-w-7xl)
       1240  dashboard del proveedor                        (.mrx-dash .wrap)
       1152  sobre nosotros, legales                        (max-w-6xl)
       1100  cómo funciona, disputa                         (.cf-container, disputa.css)
        820  agenda del día                                 (.mrx-dia__ancho)
        768  contacto, pedir artículo                       (max-w-screen-md)
          -  perfil, calendario, operaciones                (sin techo)

   Navegar entre dos pantallas cualesquiera movía el contenido de sitio, y las tablas anchas se
   ahogaban en 1280 mientras la landing tenía 1536.

   CÓMO ESTÁ AHORA. DOS anchos y una regla: **trabajar es ancho, leer y rellenar es estrecho.**

       --mrx-ancho-trabajo   1536px   tablas, listados, dashboards, fichas, checkout
       --mrx-ancho-lectura    820px   textos legales, formularios de una columna, la agenda

   El techo es FLUIDO y no escalonado como el `.container` de Tailwind: aquél se queda clavado
   en 1280 hasta que la pantalla llega a 1536, así que en un monitor de 1400 desperdiciaba
   120px. Aquí el contenido crece con la pantalla hasta tocar el techo, con lo que NINGUNA
   pantalla pierde ancho respecto a antes.

   CÓMO SE USA. No se usa: lo pone el layout alrededor de `@yield('section')` y
   `@yield('content')`, así que una pantalla nueva ya nace con el ancho bueno. Solo hay que
   declarar algo cuando la pantalla NO es de trabajo:

       @section('ancho', 'mrx-ancho--lectura')    un texto o un formulario de una columna
       @section('ancho', 'mrx-ancho--completo')   a sangre: la landing, el catálogo con mapa

   Y LO QUE NO HAY QUE HACER: volver a poner `max-w-*`, `.container` o un `px-4` en el
   envoltorio de una pantalla. El techo y la sangría los pone el layout; repetirlos ahí es lo
   que producía la sangría doble (el `.container` de main.css se pone 2rem por su cuenta y con
   el `px-4` del envoltorio quedaban 48px por lado: 270px útiles de los 390 de un móvil).
   Lo vigila tests/Feature/AnchoPaginaTest.php.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --mrx-ancho-trabajo: 1536px;
    --mrx-ancho-lectura: 820px;

    /* La sangría crece con la pantalla. En móvil son los mismos 16px que ya daba el `px-4` de
       la mayoría de las pantallas, así que el aspecto en móvil no se mueve. */
    --mrx-sangria: 1rem;
}

@media (min-width: 640px) {
    :root { --mrx-sangria: 1.5rem; }
}

@media (min-width: 1024px) {
    :root { --mrx-sangria: 2rem; }
}

.mrx-ancho {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mrx-ancho-trabajo);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mrx-sangria);
    padding-right: var(--mrx-sangria);
    /* Sin esto, una tabla o una rejilla que se pase de ancho estira el envoltorio y arrastra
       la página entera a la derecha en vez de quedarse dentro. */
    min-width: 0;
}

.mrx-ancho--lectura {
    max-width: var(--mrx-ancho-lectura);
}

/* A sangre. La usan la landing (su carrusel de cabecera ocupa toda la pantalla) y el catálogo
   (el mapa llega al borde). Estas pantallas ponen sus propios envoltorios por dentro. */
.mrx-ancho--completo {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Para el contenido interior de una pantalla a sangre: el mismo techo, sin repetir números. */
.mrx-ancho-interior {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mrx-ancho-trabajo);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mrx-sangria);
    padding-right: var(--mrx-sangria);
    min-width: 0;
}