/* ============================================================ PARCHE — pegar como AL FINAL del , después del CSS del build (para que el !important gane sobre los estilos inline de React que usa esta app). Basado en la estructura REAL encontrada en el bundle: html/body > #root > div(beige, minHeight:100vh) > div(maxWidth:480, contenido) ============================================================ */ html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100dvh !important; overflow-x: hidden !important; overflow-y: hidden !important; background: #F7F1E6 !important; /* mismo beige que usa la app (k.paper) */ } #root { width: 100% !important; height: 100dvh !important; overflow-x: hidden !important; overflow-y: hidden !important; background: #F7F1E6 !important; } /* Nivel 1: el div que centra todo y pinta el fondo beige */ #root > div { width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; overflow-x: hidden !important; overflow-y: hidden !important; background: #F7F1E6 !important; box-sizing: border-box !important; } /* Nivel 2: el "card" de ancho máximo 480px que contiene cada pantalla. Le damos altura real (no solo minHeight) para que el height:100% y el marginTop:auto que usa la app internamente funcionen bien, y overflow-y:auto como red de seguridad SOLO si el contenido interno llegara a pasarse (así el botón nunca queda fuera de vista). */ #root > div > div { width: 100% !important; max-width: 100% !important; /* en iPhone mini (375px) esto gana sobre el maxWidth:480 inline */ height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; display: flex !important; flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } /* Nada dentro de la app puede generar scroll horizontal: cualquier hijo con un ancho fijo en px mayor al viewport (típico causante del scroll lateral) queda contenido acá. */ #root, #root * { max-width: 100% !important; } /* Excepción: dejamos que SVGs/gráficos (recharts) definan su propio viewBox interno sin que max-width:100% les rompa el aspect-ratio */ #root svg { max-width: 100% !important; height: auto; } /* ============================================================ PANTALLAS CHICAS (iPhone mini / SE y similares, ~375px o menos): achicamos paddings, botones (CTA) y títulos para que todo el contenido entre sin necesidad de scroll ni de que se corte nada. ============================================================ */ @media (max-width: 390px) { /* Padding general del "card" de contenido: bajamos de 24px/20px a algo más chico, dejando el respeto por el safe-area del iPhone */ #root > div > div { padding: 14px 14px calc(10px + env(safe-area-inset-bottom)) !important; } /* Títulos (h2 con className="f-display"): un poco más chicos */ #root h2.f-display { font-size: 18px !important; margin-bottom: 12px !important; } /* Todos los botones de la app (CTA principal, secundarios, opciones): menos padding y letra más chica, para que ocupen menos alto */ #root button { padding: 10px 14px !important; font-size: 13.5px !important; } /* Reducimos separaciones típicas entre bloques */ #root [style*="marginBottom: 20px"], #root [style*="margin-bottom: 20px"] { margin-bottom: 12px !important; } } /* ============================================================ REDUCCIÓN AGRESIVA DE ESPACIADO (todos los tamaños de pantalla, no solo chicos): esta app define cada margen/padding como número fijo en píxeles directo en el JS (sin clases), así que acá se ataca cada valor real encontrado en el bundle, achicándolo ~40%. El navegador serializa el atributo style como "propiedad: valor" CON espacio después de los dos puntos — por eso el selector va así. ============================================================ */ /* --- margin-bottom: de más grande a más chico --- */ [style*="margin-bottom: 28px"] { margin-bottom: 16px !important; } [style*="margin-bottom: 22px"] { margin-bottom: 12px !important; } [style*="margin-bottom: 20px"] { margin-bottom: 12px !important; } [style*="margin-bottom: 18px"] { margin-bottom: 10px !important; } [style*="margin-bottom: 16px"] { margin-bottom: 10px !important; } [style*="margin-bottom: 14px"] { margin-bottom: 8px !important; } [style*="margin-bottom: 12px"] { margin-bottom: 8px !important; } [style*="margin-bottom: 10px"] { margin-bottom: 6px !important; } [style*="margin-bottom: 8px"] { margin-bottom: 5px !important; } [style*="margin-bottom: 6px"] { margin-bottom: 4px !important; } /* --- margin-top --- */ [style*="margin-top: 40px"] { margin-top: 22px !important; } [style*="margin-top: 30px"] { margin-top: 18px !important; } [style*="margin-top: 26px"] { margin-top: 16px !important; } [style*="margin-top: 22px"] { margin-top: 14px !important; } [style*="margin-top: 18px"] { margin-top: 12px !important; } [style*="margin-top: 16px"] { margin-top: 10px !important; } [style*="margin-top: 14px"] { margin-top: 8px !important; } [style*="margin-top: 12px"] { margin-top: 8px !important; } [style*="margin-top: 10px"] { margin-top: 6px !important; } [style*="margin-top: 8px"] { margin-top: 5px !important; } [style*="margin-top: 6px"] { margin-top: 4px !important; } /* --- gap (flex) --- */ [style*="gap: 14px"] { gap: 8px !important; } [style*="gap: 12px"] { gap: 8px !important; } [style*="gap: 10px"] { gap: 6px !important; } [style*="gap: 8px"] { gap: 5px !important; } [style*="gap: 6px"] { gap: 4px !important; } [style*="gap: 5px"] { gap: 3px !important; } /* --- padding numérico (sin unidad expresa en el objeto JS, pero el navegador siempre serializa con "px") --- */ [style*="padding: 20px"] { padding: 12px !important; } [style*="padding: 18px"] { padding: 12px !important; } [style*="padding: 16px"] { padding: 10px !important; } [style*="padding: 14px"] { padding: 9px !important; } [style*="padding: 12px"] { padding: 8px !important; } [style*="padding: 10px"] { padding: 6px !important; } /* --- padding compuesto (dos valores) más comunes --- */ [style*="padding: 36px 16px"] { padding: 20px 12px !important; } [style*="padding: 14px 20px"] { padding: 10px 14px !important; } [style*="padding: 14px 16px"] { padding: 10px 12px !important; } [style*="padding: 12px 20px"] { padding: 9px 14px !important; } [style*="padding: 12px 14px"] { padding: 9px 10px !important; } [style*="padding: 12px 10px"] { padding: 9px 8px !important; } [style*="padding: 12px 8px"] { padding: 9px 6px !important; } [style*="padding: 10px 12px"] { padding: 7px 9px !important; } [style*="padding: 10px 10px"] { padding: 7px 8px !important; } [style*="padding: 10px 8px"] { padding: 7px 6px !important; } [style*="padding: 10px 6px"] { padding: 7px 5px !important; } [style*="padding: 10px 4px"] { padding: 7px 4px !important; } [style*="padding: 9px 4px"] { padding: 6px 4px !important; } [style*="padding: 8px 0"] { padding: 6px 0 !important; } [style*="padding: 9px 0"] { padding: 6px 0 !important; } [style*="padding: 10px 0"] { padding: 6px 0 !important; } /* --- El padding del card raíz de la app (24px 20px del inline original) ya lo achicamos arriba en el bloque @media, esto lo deja también achicado en pantallas grandes por consistencia --- */ #root > div > div { padding: 14px 14px calc(10px + env(safe-area-inset-bottom)) !important; } /* --- Títulos más compactos en todas las pantallas --- */ #root h2.f-display { font-size: 19px !important; margin-bottom: 12px !important; } /* --- Botones más compactos en todas las pantallas --- */ #root button { padding: 11px 14px !important; }