/* ===============================
   ESTILOS BASE (DESKTOP)
   =============================== */
.t-Body-nav {
    background-color: var(--ut-body-nav-background-color);
    box-shadow: inset calc(var(--ut-body-nav-border-width, 1px) * -1) 0 0 var(--ut-body-nav-border-color, var(--ut-component-border-color));
    color: var(--ut-body-nav-text-color);
    grid-area: nav;
    height: auto;
    min-height: unset;
    overflow: auto;
    overflow-x: hidden;
    position: sticky;
    width: var(--ut-nav-initial-width, 240px); /* ancho por defecto */
    z-index: 9000;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}


/* ===============================
   TABLET (pantallas medianas)
   =============================== */
@media (max-width: 1024px) {
    .t-Body-nav {
        width: 200px;                /* reducir ancho */
        background-color: #f8f9fa;   /* color más claro */
        position: relative;          /* quitar sticky */
    }
}

/* ===============================
   MÓVIL (pantallas pequeñas)
   =============================== */
@media (max-width: 768px) {
    .t-Body-nav {
        width: 125%;                 /* ocupar ancho total */
        position: sticky;             /* menú flotante arriba */
        height: 100vh;               /* ocupar toda la altura */
        z-index: 10000;              /* sobre el contenido */
        background-color: #ffffff;   /* fondo blanco */
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    /* ocultar menú al cargar si quieres versión responsive */
    body .t-Body-nav.is-expanded {
        transform: translateX(0);
    }
}