/* ===========================================
   CTA DE FIM/VAZIO DA LISTA DE PROFISSIONAIS
   Card branco convidando a abrir um pedido público por indicações. Substitui a
   antiga linha "fim da lista"; aparece tanto ao rolar até o fim quanto quando a
   busca/filtros zeram a lista. Fica sobre o fundo verde do feed.
   ======================================== */
.agenda-cta-pedido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-md);
}

.agenda-cta-pedido__icon {
  font-size: 2.6rem;
  color: var(--p-green);
}

.agenda-cta-pedido__text {
  margin: 0;
  max-width: 30ch;
  font-size: var(--fs-6);
  line-height: 1.4;
  color: var(--t-main);
}

.agenda-cta-pedido__btn {
  align-self: stretch;
}

/* ===========================================
   FLIP DO CARD
   Ao clicar, o card gira 180° e expande para
   mostrar todo o conteúdo do verso.
   ======================================== */

.pro-card__flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}

.pro-card--flipped .pro-card__flipper {
  transform: rotateY(180deg);
}

/* Estado expandido — frente colapsa (já invisível pelo backface-hidden),
   verso sai do absolute e ocupa o fluxo normal. Mesmo padrão do vaga-card:
   o verso MANTÉM rotateY(180deg) dentro do flipper rotateY(180deg) (net 0 =
   legível), e a clipagem fica por conta do overflow:hidden do .pro-card. */
.pro-card--expanded .pro-card__front {
  height: 0;
  /* O padding e a borda ficam DIRETO na frente (diferente do vaga-card, cujo
     padding está nos filhos). Com box-sizing:border-box, height:0 zera só o
     conteúdo — sem zerar padding/borda sobram ~26px residuais que empurram o
     verso para baixo (margem no topo) e dessincronizam o footer (delta errado). */
  padding: 0;
  border-width: 0;
  overflow: hidden;
  visibility: hidden;
}

.pro-card--expanded .pro-card__back {
  position: relative;
  inset: auto;
  overflow: visible;
}

/* Expandido: a área de comentários tem ALTURA MÁXIMA fixa e ROLA por dentro (o card
   para de crescer). O flip mede back.offsetHeight já limitado por este teto. */
.pro-card--expanded .pro-card__back-comments {
  flex: 0 1 auto;
  max-height: clamp(220px, 42vh, 340px);
  overflow-y: auto;
}

/* Frente: layout normal do card (foto + QAV + cabeçalho + bio + rodapé) */
.pro-card__front {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm);
  min-width: 0;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);   /* definição sem contorno */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Verso: posicionado sobre a frente, rotacionado 180° inicialmente (invisível) */
.pro-card__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  /* Sem padding-bottom: o footer (.pro-card__back-actions) tem padding-bottom
     próprio e background:white, cobrindo visualmente toda a base do card.
     Isso elimina a faixa "nua" abaixo dos botões que causava flash transparente
     ao início da animação de expansão. */
  padding: var(--space-sm) var(--space-sm) 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Cabeçalho da seção de comentários: título à esquerda + ordenação à direita */
.pro-card__comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  flex-shrink: 0;
}
.pro-card__comments-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--p-green);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.pro-card__comments-title .icon {
  font-size: 0.9rem;
}

/* Ordenação dos comentários: par de botões-ícone (data ↔ Índice de Confiança).
   Seleção = tint AZUL preenchido (padrão de seleção do app); inativo cinza, sem
   contorno. Alterna a ordem da lista abaixo. */
.pro-card__comments-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.pro-card__sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--t-sub);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pro-card__sort-btn .icon {
  font-size: 1rem;
}
.pro-card__sort-btn.is-active {
  background: var(--info-blue-light);
  color: var(--info-blue);
}

/* Área de comentários */
.pro-card__back-comments {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* O scroll interno NÃO encadeia p/ a lista de pros atrás: sem isso, ao subir
     ao topo dos comentários o gesto era roubado pelo overscroll do #agenda-list
     e o scroll interno travava. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-dark) transparent;
  /* Caixa de scroll de LADO A LADO do card: quebra o padding lateral do
     .pro-card__back (margem negativa) e recoloca o respiro DENTRO (padding) —
     a barra e as sombras alcançam as bordas do card; os comentários ficam
     recuados só por dentro. SEM padding-bottom: a sombra de baixo assenta
     rente à linha divisória (o respiro do fim vem do .comment). */
  margin: 0 calc(-1 * var(--space-sm));
  padding: 0 var(--space-sm);
  --shade-bleed: var(--space-sm);
}

/* Barra SEMPRE visível — verso do card de profissional expandido (comentários).
   Fundo claro → thumb escuro translúcido. */
.pro-card__back-comments::-webkit-scrollbar { width: var(--scrollbar-w); }
.pro-card__back-comments::-webkit-scrollbar-thumb { background: var(--scroll-thumb-dark); border-radius: var(--scrollbar-thumb-r); }

.pro-card__comments-list {
  display: flex;
  flex-direction: column;
}

.comment {
  padding: var(--space-xs) 0;
}

.comment__text {
  font-size: var(--fs-3);
  line-height: 1.4;
  color: var(--t-sub);
  margin: 0;
}

/* Assinatura: IC + nome do autor SEMPRE numa linha nova, depois do comentário,
   alinhados à ESQUERDA (IC antes do nome), com o badge compacto (--sm). */
.comment__byline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 3px;
}

.comment__author {
  font-weight: var(--fw-bold);
  font-size: var(--fs-3);
  color: var(--t-main);
  white-space: nowrap;
}

/* Barra de ações no verso */
.pro-card__back-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--bg-white);
}

/* Pré-promove a camada GPU do footer JÁ no flip (500ms antes do slide de
   expansão começar). Sem isso, o translateY aplicado no início da expansão
   cria a GraphicsLayer só naquele instante e o primeiro frame composto sai
   transparente — revelando os comentários atrás dos botões por um piscar.
   Promover durante o flip dá tempo de rasterizar o fundo branco antes do
   movimento. Restrito a --flipped para não manter camadas vivas em todos os
   cards da lista (o vaga-card evita o mesmo flash via box-shadow no footer). */
.pro-card--flipped .pro-card__back-actions {
  will-change: transform;
  transform: translateZ(0);
}

/* Fundação (flex-center, borda, raio, cursor, transição, peso) vem de .btn
   (aplicado no HTML) — aqui só os ajustes próprios do verso do card. */
.pro-card__back-btn {
  gap: 6px;
  font-size: var(--fs-6);
  touch-action: manipulation;
}

.pro-card__back-btn--whatsapp {
  flex: 1;
  padding: 10px var(--space-sm);
  background: var(--p-green);
  color: var(--t-light);
}

/* Voltar/Compartilhar: tamanho quadrado vem de .btn--icon e a COR da primitiva
   .btn--outline (ambos compostos no template) — sem bloco de cor próprio. */

/* Botões de modo indicação — ocultos por padrão, visíveis quando o card está em modo indicação */
.pro-card__back-btn--cancel-indicate,
.pro-card__back-btn--confirm-indicate {
  display: none;
}

/* Em modo indicação (classe na LISTA, não no card): esconde voltar/whatsapp/
   share e exibe Cancelar + Indicar. Dirigir pela lista evita que um flip-back
   individual troque os botões no meio da animação. */
.agenda-list--indicate-mode .pro-card__back-btn--back,
.agenda-list--indicate-mode .pro-card__back-btn--whatsapp,
.agenda-list--indicate-mode .pro-card__back-btn--share {
  display: none;
}

.agenda-list--indicate-mode .pro-card__back-btn--cancel-indicate {
  display: inline-flex;
  flex: 1;
  padding: 10px var(--space-sm);
  /* cor: primitiva .btn--outline (composta no template), igual aos irmãos --back/--share */
}

.agenda-list--indicate-mode .pro-card__back-btn--confirm-indicate {
  display: inline-flex;
  flex: 1;
  padding: 10px var(--space-sm);
  background: var(--p-green);
  color: var(--t-light);
}

.pro-card__back-btn .icon {
  font-size: 1.2rem;
}

/* Animação de entrada — disparada cada vez que .pro-card é inserido no DOM */
@keyframes cardExpand {
  from { opacity: 0; transform: scaleY(0.88); transform-origin: top; }
  to   { opacity: 1; transform: scaleY(1); }
}

.pro-card {
  margin-bottom: var(--space-sm);
  animation: cardExpand 0.2s ease-out;
}

/* Rodapé do card expandido: cartão + nota fiscal lado a lado, em tom
   opaco/discreto (informação secundária de apoio à decisão). */
.pro-card__meta {
  flex-basis: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;        /* row-gap p/ quebra de linha; col-gap zerado (flex:1 cuida) */
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.pro-card__meta-item {
  flex: 1;                   /* célula de largura igual para cada item */
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* centraliza ícone + texto dentro da célula */
  gap: 5px;
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--t-sub);
  white-space: nowrap;
}

.pro-card__meta-item .icon {
  font-size: 1rem;
  color: var(--info-blue);
}

/* Item de pagamento que o profissional não oferece — esmaecido */
.pro-card__meta-item--inactive {
  opacity: 0.22;
}

/* O risco fica só no texto (glifo de ícone riscado fica visualmente
   estranho) — por isso é aplicado direto no span do rótulo, e não herdado
   de .pro-card__meta-item--inactive. Herdar do item não funciona de forma
   confiável aqui porque .pro-card__meta-item é um flex container: o Chrome
   "blockifica" o ícone como item flex e ignora o text-decoration:none que
   se tentaria colocar nele para escapar do risco do pai. */
.pro-card__meta-item--inactive .pro-card__meta-item__label {
  text-decoration: line-through;
}

.pro-card:active .pro-card__front {
  box-shadow: var(--shadow-sm);
}

.pro-card--selected .pro-card__front {
  background: var(--info-blue-light);
}

.pro-card__avatar-wrap {
  position: relative;
}

.pro-card__avatar {
  width: 48px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-light);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);   /* contraste da foto com o card branco */
  display: block;
}

/* Porta-card fixo do modo indicação: recebe o CLONE do card do pedido (um
   .pedido-item, que se estiliza sozinho). O FLIP é feito por transform inline (JS). */
.indicate-post-ref {
  flex-shrink: 0;
}

.indicate-post-ref .pedido-item {
  will-change: transform;
}

/* Coluna esquerda: foto e, abaixo dela, os índices Q/A/V */
.pro-card__col-left {
  width: 48px;           /* igual à largura do avatar no compacto */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Coluna direita: cabeçalho (nome/profissão + confiança) e, abaixo, a bio */
.pro-card__col-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pro-card__head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-sm);
}

.pro-card__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

/* Coluna direita do cabeçalho: só o índice de confiança, ancorado no CANTO
   SUPERIOR DIREITO (flex-start, não centralizado no vão vertical). A marca de
   "salvo" agora é a fita sobre a foto; o salvar é por long-press. */
.pro-card__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
}

/* Escudo --lg com a altura de ~2 linhas do cabeçalho (não as 3 empilhadas):
   o head-right estica com o head (align-items:stretch), e ~66% dessa altura de
   3 linhas equivale a ~2 linhas. A largura sai da razão do viewBox (24:26). O
   número fica centrado no frame (a moldura preenche o .ic-bar), acompanhando o
   tamanho. */
.pro-card__head-right .ic-bar--lg {
  flex: 0 0 auto;
  height: 66%;
  min-height: 0;
}
.pro-card__head-right .ic-bar--lg .ic-bar__frame {
  height: 100%;
  width: auto;
}
.pro-card__head-right .ic-bar--lg .ic-bar__value {
  font-size: var(--fs-8);
}

/* FITA DE MARCADOR (contato salvo): faixa diagonal no canto superior esquerdo,
   recortada à moldura da foto (inset 0 + raio da foto + overflow:hidden) para
   cruzar a foto e terminar rente às bordas. Só aparece com .pro-card--pinned;
   passiva (pointer-events:none) — o toggle é o pressionar-longo. */
.pro-card__saved-ribbon {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.pro-card--pinned .pro-card__saved-ribbon {
  display: block;
}

/* A faixa em si: banda verde (identidade/salvo) rotacionada -45° cruzando o
   canto; o overflow:hidden do pai a corta rente à foto. */
.pro-card__saved-ribbon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -15px;
  width: 48px;
  height: 13px;
  background: var(--p-green);
  transform: rotate(-45deg);
  box-shadow: var(--shadow-xs);
}

/* Feedback do pressionar-longo: ao atingir o limiar, o card "arma" — encolhe
   levemente + tint verde (identidade/salvar) — sinalizando que soltar salva. */
.pro-card.long-press-armed .pro-card__front {
  transform: scale(0.97);
  background: var(--p-green-light);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}

.pro-card__name {
  font-size: var(--fs-7);
  font-weight: var(--fw-bold);
  color: var(--t-main);
}

.pro-card__tags {
  font-size: var(--fs-4);
  color: var(--t-sub);
  margin: 2px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-card__bio {
  font-size: var(--fs-4);
  color: var(--t-sub);
  line-height: 1.35;
  margin: 4px 0 0;
}