/* =========================================================================
   GAVETA DE PERFIL (#profile-sheet) — visão do próprio profissional.
   Gaveta slide-down no MESMO padrão das outras: reusa o scaffolding
   .historico-sheet* (container/clip/painel/slide/durações) + a variante
   --bar-clear (a action bar segue viva; o AVATAR que abre vira o Fechar).
   Diferenças próprias, aqui: backdrop com BLUR, painel TRANSPARENTE (cards
   flutuantes, sem panel-card ao redor) e os botões Sair/Editar retangulares.
   Carregado por ÚLTIMO para vencer as classes reusadas.
   ========================================================================= */

/* Backdrop: além do dim padrão (--overlay), ganha BLUR (como o modo indicação). */
.profile-sheet .historico-sheet__backdrop {
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

/* Painel TRANSPARENTE: mantém o slide/posição do .historico-sheet__panel, mas
   sem o "card" (fundo/sombra/padding/raio) — os cards internos é que flutuam.
   Rola por dentro quando o conteúdo passa da altura (o card pode abrir o flip). */
.profile-sheet__panel {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: var(--space-sm) 0 calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  gap: var(--space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--on-green-muted) transparent;
}
.profile-sheet__panel::-webkit-scrollbar { width: var(--scrollbar-w); }
.profile-sheet__panel::-webkit-scrollbar-thumb { background: var(--on-green-muted); border-radius: var(--scrollbar-thumb-r); }

/* ── Ações do perfil NA ACTION BAR (Sair/Editar) ─────────────────────────
   OVERLAY sobre a ZONA DO MEIO enquanto a gaveta está aberta — cobre o
   conteúdo da aba (com fundo verde) para funcionar em QUALQUER aba. O Fechar é
   o avatar (fixo à esquerda) e o Contratos segue visível (fixo à direita).
   Mesma métrica retangular do par de Vagas. */
.agenda-filters__profile-actions {
  position: absolute;    /* dentro da .agenda-filters__action-row (position:relative) */
  inset: 0;
  z-index: 1;            /* acima do trilho */
  display: flex;         /* sempre no fluxo; a visibilidade é por opacity/visibility */
  align-items: center;
  gap: var(--space-xs);
  background: var(--p-green);   /* mascara o conteúdo da aba atrás */
  /* Troca de visualização = FADE (crossfade sobre o conteúdo da aba). visibility
     atrasada mantém interativo enquanto aparece e some após o fade de saída. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fade-bar-zone) var(--ease), visibility 0s linear var(--fade-bar-zone);
}

/* Com a gaveta aberta: o overlay de ações aparece (fade in) sobre a zona do meio. */
.agenda-filters--profile .agenda-filters__profile-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--fade-bar-zone) var(--ease);
}

/* COMPÕEM .btn (fundação única); aqui só os overrides do formato 40px, iguais ao
   par de Vagas (.agenda-filters__vagas-btn) e ao .pedido-action__btn. */
.agenda-filters__profile-btn {
  flex: 1;
  min-width: 0;
  height: var(--control-h);              /* casa com o avatar (40px) e o par de Vagas */
  padding: 0;                /* zera o padding 16px do .btn */
  gap: 4px;   /* vão ícone↔texto compacto (<= margem lateral), igual aos demais botões do topo */
  font-size: var(--fs-6);
}
.agenda-filters__profile-btn .icon { flex-shrink: 0; }   /* tamanho vem do padrão único da barra (navigation.css) */

/* Ambos no padrão AMARELO dos botões do topo (exceto contratos). */
.agenda-filters__profile-btn--edit,
.agenda-filters__profile-btn--logout { background: var(--a-gold); color: var(--p-green-dark); }
/* Fade padronizado no toque (igual aos demais botões do topo): vence o scale do .btn:active. */
.agenda-filters__profile-btn:active { transform: none; opacity: 0.6; }

/* Card de profissional flutuante: o .pro-card já traz sombra/raio próprios; só
   zera a margem inferior dele (o respiro vem do gap do painel). */
.profile-pro-card {
  flex-shrink: 0;
}
.profile-pro-card .pro-card {
  margin-bottom: 0;
}

/* ── Card de Avaliações (QR + compartilhar) — card cinza flutuante ────────── */
.profile-review {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.profile-review .eyebrow {
  align-self: flex-start;
}

.profile-review__text {
  margin: 0;
  align-self: flex-start;
  font-size: var(--fs-3);
  line-height: 1.4;
  color: var(--t-sub);
}

/* Moldura BRANCA do QR: os módulos claros do SVG são transparentes, então o
   fundo branco vem daqui (contraste p/ leitura). Quadrado, centralizado. */
.profile-review__qr {
  margin: var(--space-xs) 0;
  width: min(52vw, 190px);
  aspect-ratio: 1;
  padding: var(--space-sm);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--p-green);   /* stroke=currentColor dos módulos do QR */
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-review__qr-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.profile-review__share {
  align-self: stretch;
  gap: 6px;
}

/* ── Avatar da action bar vira o botão de FECHAR (X), no MESMO lugar ──────
   Enquanto a gaveta está aberta: esconde a foto e mostra o X (a COR vem da
   receita única .btn--close-on-green, composta no HTML). O Fechar é o ÚNICO
   botão do perfil que segue redondo (exceção pedida). */
.agenda-filters__profile-close {
  display: none;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.agenda-filters__profile-close .icon { font-size: 1.3rem; }

.agenda-filters__profile--close .agenda-filters__profile-img { display: none; }
.agenda-filters__profile--close .agenda-filters__profile-close { display: inline-flex; }