:root {
    /* Colores institucionales */
    --uthf-navbar: #a21d22;
}

/* ventana */
.offcanvas{
    padding: 0;
}
.offcanvas-header{
    color: #fff;
}

#offcanvasWithBackdrop {
    width: 250px;
    background: #404040;
    visibility: visible !important;
}

/* body */
#offcanvasWithBackdrop .offcanvas-body {
    padding: 0;
}

/* lista */
#offcanvasWithBackdrop ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* links */
#offcanvasWithBackdrop .nav-link {
    display: block;
    width: 100%;
    padding: 15px;
    background: #404040;
    color: #fff !important;
    font-size: 12px;
    border-radius: 0;
}

#offcanvasWithBackdrop .nav-link:hover,
#offcanvasWithBackdrop .nav-link.active {
    background: var(--uthf-navbar);
}

/* subitems */
#offcanvasWithBackdrop .collapse.show a {
    display: block;
    padding: 8px 15px 8px 35px;
    font-size: 12px;
    color: #a0a0a0;
    background: #404040;
}

#offcanvasWithBackdrop .collapse.show a:hover {
    background: #a21d22;
    color: #fff;
}

/* sin subrayado */
#offcanvasWithBackdrop a {
    text-decoration: none;
}

/* Contenedor mientras está abriendo o cerrando */
#offcanvasWithBackdrop .collapse,
#offcanvasWithBackdrop .collapsing {
    background: #404040;
}

/* Estilo también durante animación */
#offcanvasWithBackdrop .collapsing a {
    display: block;
    padding: 8px 15px 8px 35px;
    font-size: 12px;
    color: #a0a0a0;
    background: #404040;
    text-decoration: none;
}

/* Hover incluso en transición */
#offcanvasWithBackdrop .collapsing a:hover {
    background: var(--uthf-navbar);
    color: #fff;
}

/* Flecha por defecto (cerrado) */
#offcanvasWithBackdrop .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid #a0a0a0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform 0.2s ease;
}

/* Cuando está abierto -> gira la flecha */
#offcanvasWithBackdrop .collapse.show + .nav-link .arrow,
#offcanvasWithBackdrop .nav-link[aria-expanded="true"] .arrow {
    transform: rotate(90deg);
    border-left-color: #fff;
}