/* === Apilar las 3 columnas a partir de 990px === */
@media (max-width: 990px) {
    body {
        background: #FFF !important;
    }
    #layout-table,
    #layout-table > tbody {
        display: block;
        width: 100%;
    }
    #layout-table > tbody > tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #layout-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #middle-column { order: 1; }
    #left-column   { order: 2; }
    #right-column  { order: 3; }
}

/* === 551px a 990px (tablets) === */
@media (min-width: 551px) and (max-width: 990px) {
    body, td, li, input, select, button {
        font-size: 15px !important;
    }
    .cajacategorias {
        width: 45% !important;
    }
}

/* === Hasta 550px (móvil) === */
@media (max-width: 550px) {
    body, td, li, input, select, button {
        font-size: 14px !important;
    }
    .cajacategorias {
        width: 100% !important;
    }
    .sideblock {
        margin-bottom: 12px;
    }
}