:root {
        --sidebar-width: 250px;
    }

    body {
        font-family: 'Poppins', sans-serif;
        transition: background-color 0.3s, color 0.3s;
    }

    #sidebar {
        width: var(--sidebar-width);
        transition: margin-left 0.3s;
    }

    #sidebar.collapsed {
        margin-left: calc(var(--sidebar-width) * -1);
    }

    #toggleSidebar {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1051;
    }

    .dark-mode {
        background-color: #121212 !important;
        color: #f1f1f1 !important;
    }

    .dark-mode .bg-dark {
        background-color: #1e1e1e !important;
    }

    .dark-mode .nav-link {
        color: #f1f1f1 !important;
    }

    .theme-toggle {
        cursor: pointer;
    }

    nav a:hover {
        background-color: #343a40;
        border-radius: 5px;
    }

    #previewPopover {
        background: white;
        border: 1px solid #ccc;
        padding: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.15);
        border-radius: 4px;
    }

    #listaMidiasCliente .list-group-item,
    #listaMidiasSistema .list-group-item,
    #listaPlaylist .list-group-item {
        cursor: pointer;
    }