/* ===== OFFCANVAS PERSONALIZADO PARA MÓVILES ===== */
@media (max-width: 991.98px) {
    .offcanvas.offcanvas-end {
        width: auto !important;           /* Ancho según contenido */
        max-width: 85%;                    /* Máximo 85% de la pantalla */
        min-width: 200px;                   /* Mínimo 200px */
        height: 350px;                       /* Altura según contenido */
        top: 50px;                           /* Debajo del navbar (ajusta según tu navbar) */
        right: 10px;                         /* Separación del borde derecho */
        border-radius: 12px;                 /* Bordes redondeados */
        box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra suave */
        transform: translateX(100%);          /* Oculto inicialmente */
        transition: transform 0.3s ease-in-out;
        background-color: #fff;               /* Fondo blanco */
    }
    .offcanvas.offcanvas-end.show {
        transform: translateX(0);             /* Visible */
    }
    .offcanvas-header {
        padding: 1rem 1rem 0.5rem;            /* Ajuste de padding */
        border-bottom: 1px solid #eee;        /* Línea separadora opcional */
    }
    .offcanvas-body {
        padding: 0.5rem 1rem 1rem;            /* Padding reducido */
    }
    .offcanvas-body .navbar-nav {
        gap: 0.5rem;                           /* Espacio entre items */
    }
    .offcanvas-body .nav-link {
        padding: 0.75rem 1rem;                 /* Tamaño táctil */
        border-radius: 8px;                     /* Bordes redondeados en items */
    }
    .offcanvas-body .nav-link:hover {
        background-color: #f8f9fa;              /* Fondo al hover */
    }
}