/* ============================================================
   HABILI - Componentes reutilizaveis
   ============================================================ */

/* ----- Cartao ----- */
.cartao {
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}

/* ----- Grade de secoes da home ----- */
.secao { padding: 56px 0; }
.secao .titulo-secao { text-align: center; margin-bottom: 8px; }
.secao .sub-secao {
    text-align: center;
    color: var(--cinza-texto);
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

.grade {
    display: grid;
    gap: 20px;
}
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }

/* ----- Atalhos de categorias ----- */
.categorias-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.chip-categoria {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--branco);
    border: 1.5px solid var(--cinza-borda);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--azul);
    transition: border-color .2s, color .2s, background .2s;
}
.chip-categoria:hover {
    border-color: var(--verde);
    color: var(--verde);
    background: var(--verde-suave);
    text-decoration: none;
}
.chip-categoria .icone { width: 18px; height: 18px; }

/* ----- Cartao de recurso (icone + texto) ----- */
.recurso { text-align: left; }
.recurso .icone-caixa {
    width: 50px;
    height: 50px;
    border-radius: var(--raio-pequeno);
    background: var(--verde-suave);
    color: var(--verde);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.recurso .icone-caixa svg { width: 26px; height: 26px; }
.recurso h3 { margin-bottom: 6px; }
.recurso p { color: var(--cinza-texto); margin: 0; font-size: .95rem; line-height: 1.55; }

/* ----- Cartao de profissional ----- */
.cartao-profissional {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    transition: box-shadow .2s, transform .2s;
}
.cartao-profissional:hover {
    box-shadow: var(--sombra-media);
    transform: translateY(-2px);
}
.cartao-profissional .foto {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    background: var(--cinza-fundo);
    border: 3px solid var(--verde-suave);
}
.cartao-profissional .nome {
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--azul);
    font-size: 1.05rem;
}
.cartao-profissional .nome:hover { color: var(--verde); text-decoration: none; }
.cartao-profissional .profissao {
    color: var(--verde);
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.cartao-profissional .local {
    color: var(--cinza-texto);
    font-size: .85rem;
    margin-bottom: 8px;
}
.cartao-profissional .avaliacao-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
}
.cartao-profissional .nota-texto {
    font-size: .82rem;
    color: var(--cinza-texto);
    font-weight: 500;
}
.cartao-profissional .acoes-cartao {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.botao-pequeno {
    padding: 8px 16px;
    font-size: .85rem;
}

/* ----- Avaliacao em estrelas ----- */
.estrelas { display: inline-flex; gap: 2px; }
.estrelas svg { width: 16px; height: 16px; }
.estrelas .cheia { color: #F59E0B; fill: #F59E0B; }
.estrelas .vazia { color: #D1D5DB; fill: #D1D5DB; }

/* ----- Hero da busca ----- */
.hero-busca {
    background: linear-gradient(135deg, #0D1B2A 0%, #0A2E22 100%);
    color: var(--branco);
    padding: 48px 0 72px;
}
.hero-busca h1 { color: var(--branco); font-size: 2rem; margin-bottom: 6px; }
.hero-busca .subtitulo { color: rgba(255,255,255,.7); font-size: 1.05rem; margin: 0; }

/* ----- Filtros de busca ----- */
.filtros-busca {
    padding: 24px;
    position: relative;
    z-index: 2;
}
.filtros-grade { align-items: end; }
.filtros-acoes {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    align-items: center;
}
.chips-profissoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.chip-ativo {
    background: var(--verde-suave);
    border-color: var(--verde);
    color: var(--verde);
}
.resultados-info {
    margin: 20px 0 16px;
}
.grade-resultados {
    margin-bottom: 32px;
}

/* ----- Paginacao ----- */
.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 32px 0;
}
.pagina-atual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--raio-pequeno);
    background: var(--verde);
    color: var(--branco);
    font-weight: 700;
    font-size: .95rem;
}
.pagina-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--cinza-borda);
    color: var(--azul);
    font-weight: 600;
    font-size: .95rem;
    transition: border-color .2s, color .2s;
}
.pagina-link:hover {
    border-color: var(--verde);
    color: var(--verde);
    text-decoration: none;
}

/* ----- Publicacoes (feed) ----- */
.cartao-pub { padding: 20px; }
.pub-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pub-foto { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pub-nome { font-weight: 700; color: var(--azul); font-size: .95rem; }
.pub-nome:hover { color: var(--verde); text-decoration: none; }
.pub-tempo { display: block; font-size: .8rem; color: var(--cinza-texto); }
.pub-texto { margin: 0 0 12px; line-height: 1.6; white-space: pre-line; }
.pub-midias { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-img { max-width: 100%; max-height: 400px; border-radius: var(--raio-pequeno); object-fit: cover; }
.pub-acoes { display: flex; gap: 20px; padding-top: 12px; border-top: 1px solid var(--cinza-borda); }
.pub-acoes button,
.pub-acoes a {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    color: var(--cinza-texto); font-size: .9rem; font-weight: 600;
    font-family: inherit; padding: 4px 0; transition: color .15s;
}
.pub-acoes button:hover,
.pub-acoes a:hover { color: var(--verde); text-decoration: none; }
.btn-curtir.curtiu { color: #EF4444; }

/* ----- Comentarios ----- */
.comentario-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--cinza-borda); }
.comentario-item:last-child { border-bottom: none; }
.comentario-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comentario-corpo { flex: 1; min-width: 0; }
.comentario-autor { font-weight: 700; font-size: .9rem; color: var(--azul); }
.comentario-autor:hover { color: var(--verde); text-decoration: none; }
.comentario-data { font-size: .78rem; color: var(--cinza-texto); margin-left: 8px; }
.comentario-texto { margin: 4px 0 0; font-size: .93rem; line-height: 1.5; }

/* ----- Portfolio ----- */
.cartao-portfolio { padding: 20px; }
.portfolio-galeria {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.portfolio-img {
    width: 100%; max-width: 200px; height: 140px;
    object-fit: cover; border-radius: var(--raio-pequeno);
}

/* ----- Cartao de oportunidade / pedido ----- */
.cartao-oportunidade {
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
    color: var(--azul);
}
.cartao-oportunidade:hover {
    box-shadow: var(--sombra-media);
    transform: translateY(-2px);
    text-decoration: none;
}
.op-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.op-categoria {
    background: var(--verde-suave);
    color: var(--verde);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.op-data {
    font-size: .8rem;
    color: var(--cinza-texto);
}
.op-titulo {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--azul);
    line-height: 1.35;
}
.op-autor {
    font-size: .88rem;
    color: var(--cinza-texto);
    margin: 0 0 12px;
}
.op-detalhes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .84rem;
    color: var(--cinza-texto);
    margin-bottom: 12px;
}
.op-detalhes span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.op-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    color: var(--cinza-texto);
    background: var(--cinza-fundo);
    padding: 6px 12px;
    border-radius: var(--raio-pequeno);
}
.op-rodape {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cinza-borda);
    font-size: .84rem;
    color: var(--cinza-texto);
    font-weight: 600;
}
.op-status-aberta { background: #dcfce7; color: #16a34a; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.op-status-encerrada,
.op-status-em_andamento { background: #fef3c7; color: #d97706; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.op-status-cancelado { background: #fee2e2; color: #dc2626; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; }

/* ----- Candidatura e proposta items ----- */
.candidatura-item,
.proposta-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--cinza-borda);
}
.candidatura-item:last-child,
.proposta-item:last-child { border-bottom: none; }

/* ----- Contadores sociais ----- */
.contadores-sociais { display: flex; gap: 20px; margin: 12px 0; }
.contadores-sociais span { font-size: .9rem; color: var(--cinza-texto); }
.contadores-sociais strong { color: var(--azul); font-weight: 700; }

/* ----- Chat / Mensagens ----- */
.chat-layout {
    display: flex;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    overflow: hidden;
    min-height: 520px;
    background: var(--branco);
}
.chat-lista {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--cinza-borda);
    overflow-y: auto;
}
.chat-lista-topo {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cinza-borda);
}
.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cinza-borda);
    text-decoration: none;
    color: var(--azul);
    transition: background .15s;
}
.chat-item:hover { background: var(--cinza-fundo); text-decoration: none; }
.chat-item.ativo { background: var(--verde-suave); }
.chat-item-foto { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chat-item-info { flex: 1; min-width: 0; }
.chat-item-nome { display: block; font-weight: 700; font-size: .92rem; }
.chat-item-preview { display: block; font-size: .82rem; color: var(--cinza-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-badge {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--verde); flex-shrink: 0;
}
.chat-painel { flex: 1; display: flex; flex-direction: column; }
.chat-painel-vazio { justify-content: center; align-items: center; }
.chat-vazio { text-align: center; padding: 40px; }
.chat-topo {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--cinza-borda);
}
.chat-voltar { display: none; color: var(--azul); }
.chat-mensagens {
    flex: 1; overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.chat-msg { max-width: 70%; padding: 10px 14px; border-radius: 12px; font-size: .93rem; line-height: 1.5; }
.chat-msg p { margin: 0; }
.chat-msg.enviada { align-self: flex-end; background: var(--verde); color: var(--branco); border-bottom-right-radius: 4px; }
.chat-msg.recebida { align-self: flex-start; background: var(--cinza-fundo); color: var(--azul); border-bottom-left-radius: 4px; }
.chat-msg-hora { display: block; font-size: .72rem; margin-top: 4px; opacity: .7; }
.chat-form {
    display: flex; gap: 8px; padding: 12px 20px;
    border-top: 1px solid var(--cinza-borda);
}
.chat-form input[type="text"] { flex: 1; }

/* ----- Notificacoes ----- */
.notif-item { transition: background .15s; }
.notif-nova { background: var(--verde-suave); border-left: 3px solid var(--verde); }

/* ----- Avaliacao inline ----- */
.avaliacao-form-estrelas {
    display: flex; gap: 4px; margin: 8px 0;
}
.avaliacao-form-estrelas svg {
    width: 28px; height: 28px; cursor: pointer;
    color: #D1D5DB; fill: #D1D5DB; transition: color .15s, fill .15s;
}
.avaliacao-form-estrelas svg.selecionada { color: #F59E0B; fill: #F59E0B; }

/* ----- Faixa chamada (CTA) ----- */
.faixa-cta {
    background: linear-gradient(135deg, var(--verde) 0%, var(--verde-escuro) 100%);
    color: var(--branco);
    border-radius: var(--raio);
    padding: 44px;
    text-align: center;
}
.faixa-cta h2 { color: var(--branco); }
.faixa-cta p { color: rgba(255,255,255,.8); }

/* ----- Selo de numero (estatisticas) ----- */
.estatistica { text-align: center; }
.estatistica .numero { font-size: 2.2rem; font-weight: 800; color: var(--verde); }
.estatistica .rotulo { color: var(--cinza-texto); font-size: .9rem; }

/* ----- Paginas de acesso (login / cadastro) ----- */
.pagina-acesso {
    max-width: 440px;
    margin: 48px auto;
}
.pagina-acesso .cartao { padding: 32px; }
.pagina-acesso h1 { font-size: 1.6rem; margin-bottom: 4px; }
.pagina-acesso .texto-apoio { color: var(--cinza-texto); margin-bottom: 22px; font-size: .95rem; }
.pagina-acesso .rodape-form { text-align: center; margin-top: 18px; font-size: .92rem; color: var(--cinza-texto); }
.pagina-acesso .botao { width: 100%; }
[data-mensagem] { display: none; }

.seletor-conta {
    display: flex;
    gap: 6px;
    background: var(--cinza-fundo);
    padding: 5px;
    border-radius: var(--raio-pequeno);
    margin-bottom: 22px;
}
.seletor-conta button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    font-family: inherit;
    font-size: .92rem;
    color: var(--cinza-texto);
    cursor: pointer;
    transition: all .15s;
}
.seletor-conta button.ativo {
    background: var(--branco);
    color: var(--azul);
    box-shadow: 0 1px 4px rgba(13, 27, 42, .1);
}

/* ----- Painel do usuario ----- */
.painel-topo {
    background: linear-gradient(135deg, #0D1B2A 0%, #0A2E22 100%);
    color: var(--branco);
    padding: 36px 0;
}
.painel-topo h1 { color: var(--branco); font-size: 1.6rem; margin: 0; }
.painel-topo p { color: rgba(255,255,255,.7); margin: 4px 0 0; }
.barra-progresso {
    height: 10px;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 14px;
    max-width: 360px;
}
.barra-progresso i {
    display: block;
    height: 100%;
    background: var(--verde);
    border-radius: 999px;
    transition: width .3s ease;
}

/* ----- Topo de perfil/empresa publico ----- */
.cartao-topo-perfil {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.cartao-topo-perfil .foto-perfil {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--verde-suave);
    flex-shrink: 0;
}
.cartao-topo-perfil .logo-empresa {
    width: 120px;
    height: 120px;
    border-radius: var(--raio);
    object-fit: cover;
    border: 1px solid var(--cinza-borda);
    background: var(--branco);
    flex-shrink: 0;
}
.cartao-topo-perfil .info-perfil {
    flex: 1;
    min-width: 220px;
}
.cartao-topo-perfil .acoes-perfil {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}