/**
 * Responsive utilities
 *
 * Enfoque Mobile First.
 *
 * Breakpoints oficiales de Hemik:
 * sm   = 36rem  /  576px
 * md   = 48rem  /  768px
 * lg   = 64rem  / 1024px
 * xl   = 80rem  / 1280px
 * 2xl  = 90rem  / 1440px
 */

.only-mobile {
    display: initial;
}

.from-tablet,
.from-desktop {
    display: none !important;
}

@media (min-width: 48rem) {
    .only-mobile {
        display: none !important;
    }

    .from-tablet {
        display: initial !important;
    }
}

@media (min-width: 64rem) {
    .from-desktop {
        display: initial !important;
    }
}

/* El contenido debe seguir siendo usable con zoom y viewport estrecho. */
@media (max-width: 35.999rem) {
    :root {
        --hemik-container-gutter: 1rem;
    }

    table {
        font-size: var(--hemik-font-size-sm);
    }
}

/* Aumenta ligeramente el gutter en pantallas grandes sin ensanchar la lectura. */
@media (min-width: 80rem) {
    :root {
        --hemik-container-gutter: 2rem;
    }
}