/* =========================================================================
 * fix-horizontal-scroll.css
 * También estaba referenciado pero ausente del paquete original. A juzgar
 * por el nombre, existía un problema conocido de scroll horizontal en
 * móvil que nunca llegó a solucionarse. Causas más probables encontradas
 * en el CSS/HTML: imágenes y video sin max-width, y algunos contenedores
 * (media grid, form-error, activity) que pueden desbordar en pantallas
 * angostas si el contenido es más largo que el viewport.
 * ========================================================================= */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

.container, .site-header, .site-footer {
    max-width: 100vw;
}

/* Los bloques de código/monospace (código de reserva, valores largos) no
   deben forzar ancho extra en pantallas angostas. */
.code-box b, pre, code {
    overflow-wrap: break-word;
    word-break: break-word;
}

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 480px) {
    .number-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .countdown-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .countdown-grid b {
        font-size: 16px;
    }
}