/* Tablet 768–1023px */

/* El sidebar NO tiene iconos, así que el modo "icon-only" de 64px no sirve.
   En tablet el sidebar usa el mismo comportamiento off-canvas que mobile:
   arranca oculto y se abre sobre el contenido al presionar el toggle. */

@media (min-width: 768px) and (max-width: 1023px) {

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform var(--transition-speed) ease;
        width: var(--sidebar-width);
    }

    #sidebar.open {
        transform: translateX(0);
    }

    #main-wrapper {
        width: 100%;
    }

    /* Backdrop cuando el sidebar está abierto en tablet */
    #sidebar.open ~ #main-wrapper::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 150;
    }
}