/* barra abaixo das abas */

.barra-acoes{
display:flex;
align-items:center;
gap:10px;

padding:8px 10px;

background:var(--cor-superficie);
border-bottom:1px solid var(--borda-clara);

box-shadow:var(--sombra-leve);
  width: 99%;
}



/* Barra de Pesquisa */
.menu-busca {
 flex:1 1 auto;
min-width:0;
margin:0;
padding:0;
        position: relative;
}

.menu-busca form{
display:flex;
width:100%;
gap:6px;
}

/* busca */

.busca{
flex:1 1 auto;
min-width:0;
width:100%;

transition:all 0.3s ease;
padding:8px 45px 8px 10px;
border:1px solid var(--borda-media);
border-radius:6px;

font-size:14px;

background:var(--cor-superficie);
color:var(--texto-principal);
}
/* placeholder */

.busca::placeholder{
color:var(--texto-secundario);
}
/* foco */

.busca:focus{
outline:none;
border-color:var(--cor-primaria);
box-shadow:0 0 0 2px color-mix(in srgb, var(--cor-primaria) 20%, transparent);
}

.sbb{
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);

background:transparent;
border:none;

padding:6px 8px;

border-radius:4px;

color:var(--texto-secundario);

cursor:pointer;
transition:background 0.2s,color 0.2s;
}

/* hover */

.sbb:hover{
background:var(--aba-hover);
color:var(--cor-primaria);
}

/* container do tema */

.tema-container{
position:relative;
}


/* menu de temas */

.menu-tema{
position:absolute;
top:42px;
left:0;

background:var(--cor-superficie);
border:1px solid var(--borda-media);
border-radius:6px;

display:none;
flex-direction:column;
min-width:140px;
box-shadow:var(--sombra-media);
z-index:999999;
}

/* botões icones */

.btn-icon{
display:flex;
align-items:center;
justify-content:center;

width:36px;
height:36px;

border:none;
background:none;
cursor:pointer;

color:var(--texto-principal);

border-radius:6px;
}

.btn-icon:hover{
background:var(--aba-hover);
}


/* svg */

.btn-icon svg{
stroke:currentColor;
fill:none;
stroke-width:2;
}

#barraBusca{
width:100%;
max-width:99%;

margin:0;
padding:0;
}

/* menu ativo */

.menu-tema.ativo{
display:flex;
//flex-direction:column;
gap:10px;
padding:5px 0;
}


/* botões do menu */

.menu-tema button{
padding:8px 10px;
border:none;
background:none;
text-align:left;
cursor:pointer;

color:var(--texto-principal);
}

.menu-tema button:hover{
background:var(--aba-hover);
}

.tema-container,
.btn-icon{
flex:0 0 auto;
}
/* ajustes para telas com pouca altura */

@media (max-height:500px){

.menu-tema{
position:fixed;
top:10px;
left:50%;
transform:translateX(-50%);

max-height:90vh;
overflow-y:auto;
}

}


/* telas menores */

@media (max-width:700px){

.busca{
font-size:16px;
padding:10px;
}

.btn-icon{
width:40px;
height:40px;
}

}