/* barra de abas */

.barra-abas{
    background:var(--borda-clara);
    padding:5px 5px 0 5px;
    overflow:hidden;
}


/* container rolável */

.abas{
    display:flex;
    overflow-x:auto;
    gap:4px;
    cursor:grab;
    user-select:none;
    scrollbar-width:none;
}

.abas::-webkit-scrollbar{
    display:none;
}


/* abas */

.aba{
    background:var(--aba-fundo);
    padding:10px 18px;
    border-radius:10px 10px 0 0;
    border:1px solid var(--borda-media);
    border-bottom:none;
    white-space:nowrap;
    flex-shrink:0;
    font-size:14px;
    color:var(--texto-principal);
}
.aba a{
  text-decoration:none;
  color:var(--texto-principal);
}
.aba:hover{
    background:var(--aba-hover);
}


.aba.ativa{
    background:var(--aba-ativa);
    font-weight:bold;
    color:var(--texto-principal);
}


/* conteúdo */

.conteudo{
    background:var(--cor-superficie);
    border-top:1px solid var(--borda-media);
    padding:30px;
    color:var(--texto-principal);
}
#tema{
        margin-left:4%;
        margin-top: 1%;
        text-transform: capitalize;
        letter-spacing: 0.2rem;
        border: none;
        padding: 10px 25px;
        border-radius: 25px;
        color:var(--texto-principal);
}

/* ajuste para celular */

@media (max-width:700px){

    .aba{
        font-size:17px;
        padding:14px 24px;
        border-radius:14px 14px 0 0;
    }

}