/*
 * Retrofit responsive del sitio público SIMEC v2.
 *
 * La UI de escritorio (>= 768px) debe permanecer IDÉNTICA al legacy, por lo
 * que este archivo solo contiene media queries para viewports menores: el
 * legacy maqueta con tablas de anchos fijos que desbordan en móvil.
 * Se carga DESPUÉS de los estilos legacy para poder corregirlos.
 */

@media (max-width: 767px) {

    main.page .container {
        width: auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Medios: nunca desbordar el viewport. */
    main.page .container img {
        max-width: 100%;
        height: auto;
    }

    main.page .container video,
    main.page .container iframe,
    main.page .container embed,
    main.page .container object {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    /*
     * Tablas de MAQUETACIÓN (sin clase .table/.dataTable): se apilan en
     * bloque. Las tablas de DATOS reales conservan su forma y obtienen
     * scroll horizontal más abajo.
     */
    main.page .container table:not(.table):not(.dataTable),
    main.page .container table:not(.table):not(.dataTable) > tbody,
    main.page .container table:not(.table):not(.dataTable) > tbody > tr,
    main.page .container table:not(.table):not(.dataTable) > tbody > tr > td,
    main.page .container table:not(.table):not(.dataTable) > tbody > tr > th,
    main.page .container table:not(.table):not(.dataTable) > tr,
    main.page .container table:not(.table):not(.dataTable) > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Celdas separadoras vacías del legacy: no ocupan renglón en móvil. */
    main.page .container table:not(.table):not(.dataTable) td:empty {
        display: none;
    }

    /* Tablas de datos: desplazamiento horizontal en lugar de romper el layout. */
    main.page .container table.table,
    main.page .container table.dataTable {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Textos largos (nombres científicos, títulos) sin desbordes. */
    main.page .container {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Bloques de intro del legacy con anchos fijos. */
    main.page .container .div_intro {
        width: auto !important;
    }

    /*
     * Publicaciones (paginador.php): el legacy mide las letras en vw, que en
     * el teléfono quedan de 3-4px; las tarjetas apiladas llevan la portada a
     * un tamaño de miniatura en lugar de todo el ancho.
     */
    main.page .container .letraH {
        font-size: 26px;
    }

    main.page .container .letraT {
        font-size: 15px;
    }

    main.page .container .letraD {
        font-size: 13px;
    }

    main.page .container td.borde img {
        width: 40%;
    }
}