* {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #f7f7f7;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 240px;
        height: 100vh;
        background-color: #333;
        overflow-y: auto;
        padding-top: 20px;
    }

    .menu-principal {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu-principal > li {
        border-bottom: 1px solid #444;
        position: relative;
    }

    .menu-principal > li > a,
    .menu-principal > li > strong {
        display: block;
        padding: 12px 20px;
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

    .menu-principal > li:hover > a,
    .menu-principal > li:hover > strong {
        background-color: #555;
    }

    .menu-principal li ul {
        display: none;
        background-color: #444;
    }

    .menu-principal li:hover ul {
        display: block;
    }

    .menu-principal li ul li {
        border-top: 1px solid #555;
    }

    .menu-principal li ul li a {
        display: block;
        padding: 10px 30px;
        color: white;
        text-decoration: none;
    }

    .menu-principal li ul li a:hover {
        background-color: #666;
        padding-left: 35px;
    }

    .menu-principal > li > strong::after {
        content: " ▼";
        font-size: 0.8em;
        margin-left: 5px;
    }

    .conteudo {
        margin-left: 260px; /* largura do menu + margem */
        padding: 20px;
    }

    @media (max-width: 768px) {
        .sidebar {
            width: 100%;
            height: auto;
            position: relative;
        }

        .conteudo {
            margin-left: 240px;
            padding: 20px;
        }
    }