/* ESTE CSS SOLO ACTÚA EN PANTALLAS PEQUEÑAS (MÓVILES) */
@media only screen and (max-width: 768px) {

    /* Ajusta imágenes */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hace que las tablas se comporten bien sin romper enlaces */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Respeta los enlaces (los deja azules y subrayados) */
    a {
        color: #0000EE !important;
        text-decoration: underline !important;
        font-weight: normal !important;
    }

    /* Ajusta el cuerpo para que se vea ampliado */
    body {
        font-size: 18px !important;
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Evita que los textos se desborden */
    td, th, p, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Opcional: si usas tablas con fondo de color, se ven bien */
    table {
        background-color: transparent !important;
    }
}

/* ESTO ES PARA PC: DEJA TODO COMO ESTABA */
/* (No toca nada, solo mantiene el diseño original de FrontPage) */