/* Ventanas (modales) a ancho de teléfono — 3-oct-2026.
   Medido en producción a 360 y 390 px: fondo oscuro 16-24 px + ventana 16 px + recuadro 24 px
   + tarjeta interior 24 px dejaban el texto en el 48-60 % del ancho de la pantalla.
   Aquí: 6 px fuera de la ventana y 10-12 px por cada capa de dentro.
   Solo toca ventanas con ancho máximo (max-w-*): los menús laterales no se ensanchan. */
@media (max-width: 640px) {
    .fixed.inset-0:has(> [class*="max-w-"]) {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .fixed.inset-0 > [class*="max-w-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .fixed.inset-0 > [class*="max-w-"]:is(.p-4, .p-5, .p-6, .p-8, .px-4, .px-5, .px-6, .px-8),
    .fixed.inset-0 > [class*="max-w-"] :is(.p-5, .p-6, .p-8, .p-10, .px-5, .px-6, .px-8, .px-10) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .fixed.inset-0 > [class*="max-w-"] :is(.p-4, .px-4) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .fixed.inset-0 > [class*="max-w-"] :is(.mx-4, .mx-6, .mx-8) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Columnas de rejilla que no empujan el ancho de la ventana. */
    .fixed.inset-0 > [class*="max-w-"] .grid > * {
        min-width: 0;
    }
}