*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,system-ui;
background:#f0f2f5; /* FACEBOOK BASE */
}

/* HEADER */
.topbar{
position:fixed;
top:0;
left:0;
width:100%;
background:#1877f2;
color:#fff;
z-index:1000;
}

.header-flex{
display:flex;
justify-content:space-between;
align-items:center;
}

.topbar .wrap{
max-width:900px;
margin:auto;
padding:14px;
}

/* BOTÃO LUPA */
.icon-search{
width:42px;
height:42px;
border-radius:50%;
border:none;
background:rgba(255,255,255,0.15);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s;
}

.icon-search svg{
width:20px;
height:20px;
fill:#fff;
}

.icon-search:hover{
background:rgba(255,255,255,0.25);
transform:scale(1.05);
}

/* PAGE */
.page{
padding-top:80px;
}

.wrap{
max-width:900px;
margin:auto;
padding:12px;
}

/* LISTA */
.lista{
background:#fff;
border-radius:12px;
overflow:hidden;
}

/* ITEM */
.item{
display:flex;
gap:12px;
padding:14px;
border-bottom:1px solid #eee;
align-items:center;
background:#fff;
}

.foto img{
width:52px;
height:52px;
border-radius:50%;
object-fit:cover;
}

.no-foto{
width:52px;
height:52px;
border-radius:50%;
background:#e4e6eb;
display:flex;
align-items:center;
justify-content:center;
}

/* INFO */
.info{flex:1}

.top{
display:flex;
justify-content:space-between;
}

.nome{
font-weight:600;
color:#050505;
}

.unidade{
color:#1877f2;
font-weight:600;
}

.bottom{
display:flex;
justify-content:space-between;
font-size:12px;
color:#65676b;
}

/* =========================
   OVERLAY FACEBOOK STYLE
========================= */
.search-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#1877f2; /* FACEBOOK BLUE */
transform:translateX(100%);
transition:0.35s cubic-bezier(0.4,0,0.2,1);
z-index:2000;
display:flex;
flex-direction:column;
}

.search-overlay.active{
transform:translateX(0);
}

/* HEADER BUSCA */
.search-header{
padding:15px;
display:flex;
gap:10px;
}

.search-header input{
flex:1;
padding:14px;
border-radius:8px;
border:none;
font-size:15px;
outline:none;
}

.search-header button{
background:none;
border:none;
color:#fff;
font-size:22px;
}

/* RESULTADOS */
.resultados{
padding:10px;
overflow:auto;
}

/* CARD RESULTADO */
.resultados .item{
background:#fff;
border-radius:10px;
margin-bottom:10px;
}