/* ============================================================
   BARBERFLOW — App PROFISSIONAL — estilos específicos
   Depende de: ../../shared/css/tokens.css
               ../../shared/css/components.css
============================================================ */

/* ── Botão flutuante — pingo d'água para reabrir footer ────── */
#btn-abrir-footer {
  all: unset;
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: 18px;
  z-index: 998;
  width: 34px;   /* era 48px → menor */
  height: 44px;  /* era 62px → menor */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(32px) scale(0.80);
  transition:
    opacity   0.38s cubic-bezier(.4, 0, .2, 1),
    transform 0.38s cubic-bezier(.4, 0, .2, 1);
}
#btn-abrir-footer.visivel {
  opacity: 0.58; /* era 1 → mais transparente */
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#btn-abrir-footer svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 10px rgba(212, 160, 23, 0.35));
  transition: filter var(--ease), transform var(--ease);
}
#btn-abrir-footer:active svg {
  filter: drop-shadow(0 2px 6px rgba(212, 160, 23, 0.60));
  transform: scale(0.90);
}
@keyframes pingo-pulso {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-4px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
#btn-abrir-footer.visivel {
  animation: pingo-pulso 1.8s cubic-bezier(.4, 0, .2, 1) 0.4s 2 both;
}

/* ── Aura pulsante (gora) exatamente ao redor do botão gota ── */
#btn-abrir-footer { overflow: visible; }

#btn-abrir-footer::before,
#btn-abrir-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(212, 175, 55, 0.52);
  border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%; /* forma de gota */
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
}

/* Primeiro anel — começa logo ao aparecer */
#btn-abrir-footer.visivel::before {
  animation: gora-aura 4.5s ease-out 0.5s infinite;
}

/* Segundo anel — defasado para efeito sonar contínuo */
#btn-abrir-footer.visivel::after {
  animation: gora-aura 4.5s ease-out 2.75s infinite;
}

@keyframes gora-aura {
  0%   { transform: scale(1);    opacity: 0.55; }
  60%  { opacity: 0.18; }
  100% { transform: scale(2.85); opacity: 0;    }
}

/* ── Tag PRO (login) ────────────────────────────────────────── */
.pro-tag {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--cta-text);
}

/* ── Badge variantes pro ────────────────────────────────────── */
.badge.verde  { background: rgba(82, 201, 122, .1); color: var(--success); border-color: rgba(82, 201, 122, .3); }
.badge.danger { background: rgba(224, 82, 82, .08); color: var(--danger);  border-color: rgba(224, 82, 82, .25); }

/* ── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-soft);
}
.kpi.destaque {
  background: linear-gradient(135deg, rgba(242,183,5,.16), rgba(107,74,50,.08));
  border-color: rgba(212,175,55,.4);
}
.kpi-icon { font-size: 1.4rem; margin-bottom: 4px; }
.kpi-val  { font-size: 1.4rem; font-weight: 900; color: var(--gold); }
.kpi-lbl  { font-size: .72rem; color: var(--text-muted); letter-spacing: .3px; }

/* ── Progress bars ──────────────────────────────────────────── */
.progress-wrap   { display: flex; flex-direction: column; gap: 6px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; }
.progress-label  { font-size: .78rem; color: var(--text-muted); }
.progress-pct    { font-size: .78rem; font-weight: 700; color: var(--gold); }
.progress-bar    { height: 6px; background: var(--card2); border-radius: var(--r-full); overflow: hidden; }
.progress-fill   { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); border-radius: var(--r-full); }

/* ── Agenda (timeline) ──────────────────────────────────────── */
.agenda-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: var(--card);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: border-color var(--ease);
}
.agenda-item:hover  { border-color: rgba(212, 175, 55, .5); }

.agenda-time { display: flex; flex-direction: column; align-items: center; min-width: 48px; gap: 3px; }
.agenda-hr   { font-size: .92rem; font-weight: 800; color: var(--gold); }
.agenda-min  { font-size: .65rem; color: var(--text-muted); }

.agenda-info { flex: 1; min-width: 0; }
.agenda-name { font-size: .9rem; font-weight: 700; }
.agenda-serv { font-size: .76rem; color: var(--text-muted); margin-top: 2px; }
.agenda-val  { font-size: .82rem; font-weight: 700; color: var(--gold); margin-top: 4px; }

/* ── Financeiro ─────────────────────────────────────────────── */
.fin-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(242,183,5,.18), rgba(107,74,50,.08));
  border: 1px solid rgba(212,175,55,.35);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
}
.fin-label  { font-size: .78rem; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.fin-val    { font-size: 2.2rem; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
.fin-period { font-size: .72rem; color: var(--text-dim); }

.fin-row            { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--gold-border); }
.fin-row:last-child { border-bottom: none; }
.fin-row-label      { font-size: .85rem; color: var(--text-muted); }
.fin-row-val        { font-size: .9rem; font-weight: 700; color: var(--text); }
.fin-row-val.pos    { color: var(--success); }
.fin-row-val.neg    { color: var(--danger); }

/* ── Banner de localização ──────────────────────────────────── */
.loc-banner {
  background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(107,74,50,.08));
  border: 1.5px solid rgba(212,175,55,.40);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loc-banner__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.loc-banner__icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.loc-banner__titulo {
  font-size: .92rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0 0 2px;
}
.loc-banner__sub {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.loc-banner__cep-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.loc-banner__cep-input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: .88rem;
  outline: none;
}
.loc-banner__cep-input:focus {
  border-color: var(--gold);
}
.loc-banner__msg {
  font-size: .8rem;
  min-height: 1.2em;
  color: var(--text-muted);
  margin: 0;
}

/* ── Portfólio grid ─────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.port-item {
  aspect-ratio: 1;
  background: var(--card2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  border: 1px solid var(--border-soft);
  transition: border-color var(--ease);
  overflow: hidden;
}
.port-item:hover    { border-color: var(--gold); }
.port-item img      { width: 100%; height: 100%; object-fit: cover; }

/* ── Chair pro (ligeiramente maior) ─────────────────────────── */
.chair { min-width: 68px; height: 80px; }
.chair img { width: 32px; height: 32px; }

/* ============================================================
   TELA — TIPO DE USUÁRIO
============================================================ */
.tipo-usuario-wrap {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 32px;
  gap: 24px;
  min-height: 100%;
}

.tipo-usuario-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.tipo-usuario-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.tipo-usuario-titulo {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 900;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.tipo-usuario-sub {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.tipo-usuario-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tipo-usuario-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px 20px;
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.tipo-usuario-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(212,175,55,.2);
}
.tipo-usuario-card:active { transform: scale(.98); }

.tipo-usuario-card--loja {
  opacity: .7;
  cursor: default;
}
.tipo-usuario-card--loja:hover {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.tipo-usuario-card-icon { font-size: 2rem; }

.tipo-usuario-card-titulo {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.tipo-usuario-card-sub {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.tipo-usuario-card-cta {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 6px;
}
.tipo-usuario-card-cta--em-breve {
  color: var(--text-muted);
  background: var(--card2);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .7rem;
  letter-spacing: .5px;
}

/* ============================================================
   TELA — PLANOS DO BARBEIRO
============================================================ */
.planos-wrap {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 40px;
  gap: 20px;
  min-height: 100%;
}

.planos-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.planos-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

/* ── Card de plano ──────────────────────────────────────────── */
.plano-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  transition: border-color .2s ease;
  position: relative;
}

.plano-card--destaque {
  border-color: var(--gold);
  box-shadow: 0 4px 24px rgba(212,175,55,.2);
  transform: scale(1.02);
  transform-origin: center top;
  z-index: 2;
}

.plano-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #1a0e06;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.plano-card-topo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plano-nome    { font-size: 1rem; font-weight: 800; color: var(--text); }
.plano-nome-en { font-size: .72rem; color: var(--text-muted); }

.plano-preco {
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.plano-centavos {
  font-size: 1.1rem;
  font-weight: 700;
}

.plano-periodo { font-size: .72rem; color: var(--text-muted); margin-top: -4px; }

.plano-economia {
  font-size: .78rem;
  font-weight: 700;
  color: var(--success);
  background: rgba(82,201,122,.08);
  border: 1px solid rgba(82,201,122,.25);
  border-radius: var(--r-sm);
  padding: 5px 10px;
}

/* ── Lista de benefícios ──────────────────────────────────── */
.plano-beneficios {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.plano-beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .83rem;
  color: var(--text);
  line-height: 1.35;
}

.plano-check {
  color: var(--gold);
  font-weight: 900;
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.plano-bi {
  display: block;
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.plano-btn {
  margin-top: 6px;
}

/* ============================================================
   PAY TOAST — feedback de pagamento
============================================================ */
.pay-toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--card);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg);
  padding: 14px 20px;
  font-size: .83rem;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  max-width: 320px;
  width: calc(100% - 40px);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  white-space: pre-line;
  transition: opacity .25s ease, transform .25s ease;
}
.pay-toast--visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ============================================================
   TELA PLANOS PRO — redesign premium mobile-first
============================================================ */

/* Aviso de bloqueio no topo da tela de planos (plano vencido/inativo).
   Só visível quando o usuário chega aqui por bloqueio do gate de assinatura. */
.ppp-aviso-bloqueio {
  margin: 14px 20px 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.45);
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.ppp-aviso-bloqueio[hidden] { display: none; }

/* Toggle barbeiro/barbearia */
.ppp-toggle {
  display: flex;
  margin: 12px 20px 0;
  background: rgba(0,0,0,.12);
  border-radius: var(--r-full);
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(212,175,55,.12);
}
.ppp-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all .25s ease;
  letter-spacing: .2px;
}
.ppp-toggle-btn--ativo {
  background: var(--card);
  color: var(--gold);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
/* Ícone dentro do toggle */
.ppp-toggle-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(60%) sepia(10%) saturate(400%) hue-rotate(10deg);
  transition: filter .25s;
}
.ppp-toggle-btn--ativo .ppp-toggle-icon {
  filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(600%) hue-rotate(4deg);
}

/* Header de marca — centralizado, sem logo */
.ppp-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 44px 20px 10px;
  text-align: center;
}
.ppp-brand-nome {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 22px rgba(212,175,55,.45), 0 2px 4px rgba(0,0,0,.4);
}
.ppp-brand-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .5px;
  margin: 4px 0 0;
}

/* Botão fechar flutuante */
.ppp-fechar-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.10);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.ppp-fechar-btn:active { background: rgba(0,0,0,.20); }

/* Container de cards */
.ppp-cards-wrap {
  padding: 14px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card de plano */
.ppp-card {
  background: var(--card);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.04);
  position: relative;
  transition: transform .15s, box-shadow .15s;
}
.ppp-card:active { transform: scale(.985); }

/* Card em destaque — borda + glow dourado */
.ppp-card--destaque {
  border: 1.5px solid var(--gold);
  background: linear-gradient(160deg, rgba(212,175,55,.06) 0%, var(--card) 60%);
  box-shadow: 0 6px 28px rgba(212,160,23,.22), 0 2px 8px rgba(0,0,0,.12);
  padding-top: 26px;
}

/* Badge no card destacado */
.ppp-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #D4A017, #F2C630);
  color: #1a0e00;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(212,160,23,.35);
}

/* Card do plano PAGO atualmente ativo (mensal/trimestral) */
.ppp-card--ativo {
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 2px rgba(212,160,23,.28), 0 6px 24px rgba(0,0,0,.16);
}

/* Selo "Plano aplicado" no topo do card ativo */
.ppp-plano-aplicado {
  display: block;
  background: linear-gradient(135deg, #D4A017, #F2C630);
  color: #1a0e00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-align: center;
  padding: 7px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Dias até expirar — logo abaixo do card do plano ativo */
.ppp-plano-expira {
  text-align: center;
  color: var(--gold);
  font-weight: 700;
  font-size: .84rem;
  margin: -6px 0 16px;
}

/* Row topo do card */
.ppp-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}
.ppp-card-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.pcp-wrap {
  min-height: 100dvh;
  padding: 28px 16px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.pcp-header {
  display: grid;
  gap: 6px;
}
.pcp-kicker {
  margin: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.pcp-title {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
}
.pcp-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.pcp-options {
  display: grid;
  gap: 10px;
}
.pcp-option {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
}
.pcp-option strong {
  color: var(--gold);
  font-size: 13px;
}
.pcp-option--ativo {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,160,23,.18);
}
.pcp-actions {
  display: grid;
  gap: 10px;
}
.pcp-erro {
  margin: 0;
  color: #ffb4b4;
  font-size: 13px;
  line-height: 1.4;
}
.ppp-card-dur {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Bloco de preço — em destaque dourado */
.ppp-preco-wrap { text-align: right; flex-shrink: 0; }
.ppp-preco {
  font-size: 30px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 0 14px rgba(212,175,55,.30);
}
.ppp-centavos {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}
.ppp-periodo  { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.ppp-economia-tag { color: #2ecc71; font-weight: 700; font-size: 10.5px; }
.ppp-preco-gratis {
  font-size: 16px;
  font-weight: 900;
  color: #2ecc71;
  flex-shrink: 0;
  letter-spacing: 1px;
  align-self: center;
  text-shadow: 0 0 10px rgba(46,204,113,.30);
}

/* Lista de benefícios — clean, sem badge */
.ppp-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ppp-chip {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
  padding: 0 2px;
}
/* Texto obs (compartilhado) */
.ppp-chip-obs {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 2px;
}
/* Benefício que depende de parceria — destaque dourado */
.ppp-chip--parceria {
  color: var(--gold);
  opacity: .85;
}

/* Nota de parceria obrigatória */
.ppp-nota-parceria {
  font-size: 10px;
  color: var(--gold);
  opacity: .65;
  margin: -6px 0 12px;
  padding: 6px 8px;
  border-left: 2px solid rgba(212,175,55,.35);
  line-height: 1.5;
}

/* Botão de assinatura */
.ppp-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, #D4A017, #F2C630);
  color: #1a0e00;
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  border-radius: var(--r-full);
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212,160,23,.35);
  transition: transform .15s, box-shadow .15s;
}
.ppp-btn:active {
  transform: scale(.97);
  box-shadow: 0 1px 6px rgba(212,160,23,.20);
}
.ppp-btn--outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.12);
  box-shadow: none;
  color: var(--text-muted);
  font-weight: 600;
}
.ppp-btn--outline:active { box-shadow: none; }

.ppp-voucher-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(17, 24, 39, .62);
  backdrop-filter: blur(10px);
}
.ppp-voucher-modal[hidden] { display: none; }
.ppp-voucher-card {
  position: relative;
  width: min(100%, 420px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 -18px 44px rgba(0,0,0,.34);
  padding: 22px 18px 18px;
}
.ppp-voucher-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
}
.ppp-voucher-kicker {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.ppp-voucher-title {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
}
.ppp-voucher-text {
  margin: 10px 36px 16px 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ppp-voucher-field {
  display: grid;
  gap: 8px;
}
.ppp-voucher-field label {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.ppp-voucher-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 8px;
}
.ppp-voucher-input {
  min-width: 0;
  height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
  padding: 0 14px;
  text-align: center;
}
.ppp-voucher-input:focus {
  outline: 2px solid rgba(212,160,23,.38);
  border-color: var(--gold);
}
.ppp-voucher-ok {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #D4A017, #F2C630);
  color: #1a0e00;
  font-weight: 900;
}
.ppp-voucher-feedback {
  min-height: 18px;
  margin: 10px 0 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.ppp-voucher-feedback--ok { color: #7ee0a1; }
.ppp-voucher-feedback--erro { color: #ffb4b4; }
.ppp-voucher-continue { margin-top: 2px; }

/* ============================================================
   TELA TERMOS LEGAIS — aceite obrigatório pós-pagamento
============================================================ */

/* Header da tela */
.tl-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tl-header-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.tl-titulo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0;
  letter-spacing: .5px;
}
.tl-subtitulo {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 3px 0 0;
}

/* Cards de seção */
.tl-card {
  margin: 12px 16px 0;
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
}
.tl-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tl-card-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.tl-card-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tl-card-texto {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Checkboxes */
.tl-checks {
  padding: 20px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tl-checkbox {
  /* Checkbox customizado — aparência manual */
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  border: 2px solid rgba(212,175,55,.4);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  margin-top: 1px;
  transition: background .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-checkbox:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.tl-checkbox:checked::after {
  content: '✓';
  font-size: 12px;
  color: #1a0e00;
  font-weight: 900;
  display: block;
  line-height: 1;
  margin: auto;
}
.tl-check-label {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  user-select: none;
}

/* Erro */
.tl-erro {
  font-size: 12px;
  color: #e05151;
  text-align: center;
  margin: 12px 16px 0;
  padding: 8px 12px;
  background: rgba(224,81,81,.08);
  border-radius: 8px;
}

/* Área do botão */
.tl-action {
  padding: 20px 16px 32px;
}
.tl-btn {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: linear-gradient(135deg, #D4A017, #F2C630);
  color: #1a0e00;
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: var(--r-full);
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212,160,23,.35);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.tl-btn:active:not(:disabled) {
  transform: scale(.97);
  box-shadow: 0 1px 6px rgba(212,160,23,.20);
}
.tl-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}
/* Spinner no botão durante carregamento */
.tl-btn--carregando {
  opacity: .7;
  cursor: wait;
  pointer-events: none;
}

/* ── CPF/CNPJ toggle (cadastro) ─────────────────────────────── */
.form-label-opt {
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 4px;
}
.cad-doc-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.cad-doc-btn {
  flex: 1;
  padding: 7px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0,0,0,.05);
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all .2s ease;
}
.cad-doc-btn--ativo {
  background: var(--card);
  color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(212,160,23,.18);
}

/* ── Landing Gate overlay (ProLandingGate) ───────────────────── */
#landing-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
}
#landing-gate.gate-ativo  { opacity: 1; }
#landing-gate.gate-saindo { opacity: 0; }

.lg-backdrop {
  position: absolute;
  inset: 0;
  background-image: url('/shared/img/bg-entrada.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lg-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 2, .52);
}

.lg-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 28px 26px;
  width: calc(100% - 48px);
  max-width: 340px;
  background: rgba(10, 5, 2, .78);
  border: 1px solid rgba(212, 175, 55, .42);
  border-radius: var(--r-lg, 20px);
  box-shadow: 0 0 40px rgba(212, 175, 55, .18), 0 16px 48px rgba(0,0,0,.5);
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* BarberPole dentro do gate */
.lg-polo-wrap {
  height: 9rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 4px 0;
}
.lg-polo-wrap .barber-pole {
  transform: scale(0.38);
  transform-origin: top center;
}

.lg-logo-nome {
  height: calc(var(--header-h, 64px) * 1.8);
  width: auto;
  max-width: 70%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.55)) brightness(1.1);
}

.lg-subtitulo {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold, #D4AF37);
  margin: 0;
}

.lg-descricao {
  font-size: .8rem;
  color: rgba(245, 233, 220, .75);
  margin: 4px 0 10px;
  line-height: 1.5;
}

.lg-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.lg-btn-primary,
.lg-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  font-size: .84rem;
  font-weight: 700;
  border-radius: var(--r-full, 99px);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: transform .15s;
}
.lg-btn-primary:active,
.lg-btn-secondary:active { transform: scale(.97); }

.lg-btn-primary {
  background: linear-gradient(135deg, var(--gold-light, #F2B705), var(--gold-dark, #8B6914));
  color: var(--cta-text, #2B1B12);
  box-shadow: 0 4px 18px rgba(212,175,55,.28);
}

.lg-btn-secondary {
  background: rgba(212,175,55,.06);
  color: var(--gold, #D4AF37);
  border: 1.5px solid rgba(212,175,55,.45) !important;
}
.lg-btn-secondary:hover { background: rgba(212,175,55,.12); }

.lg-btn-primary img,
.lg-btn-secondary img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex-shrink: 0;
}
.lg-btn-primary  img { filter: brightness(0) invert(1); }
.lg-btn-secondary img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(600%) hue-rotate(4deg);
}

/* ============================================================
   TELA PARCERIAS
   Seção 1: Barbearias Parceiras
   Seção 2: Convites
   Seção 3: Favoritos (lazy)
============================================================ */

/* Layout geral da tela */
.parcerias-content {
  padding-top: calc(var(--topo-h, 56px) + 1.5rem);
  padding-bottom: calc(var(--nav-h, 64px) + 24px);
}

.parcerias-hero {
  text-align: center;
  margin-bottom: 28px;
}

.parcerias-hero .parcerias-sub {
  color: var(--text-2, #7e6652);
  font-size: .85rem;
  margin-top: 6px;
}

/* Seção genérica */
.parcerias-secao {
  background: var(--card, #fff);
  border: 1px solid var(--gold-border, rgba(212,175,55,.22));
  border-radius: var(--r-lg, 18px);
  padding: 18px 16px 20px;
  margin-bottom: 20px;
}

.parcerias-secao-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.parcerias-secao-icone {
  font-size: 1.2rem;
  line-height: 1;
}

.parcerias-secao-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1, #2b1b12);
  margin: 0;
}

.parcerias-secao-desc {
  font-size: .8rem;
  color: var(--text-2, #7e6652);
  margin: 0 0 14px;
  line-height: 1.4;
}

.parcerias-usuario-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.parcerias-usuario-info__item {
  min-width: 0;
  border: 1px solid rgba(122, 74, 30, .16);
  border-radius: 5px;
  background: rgba(122, 74, 30, .035);
  padding: 9px 10px;
}

.parcerias-usuario-info__item span,
.parcerias-usuario-info__item strong {
  display: block;
  min-width: 0;
}

.parcerias-usuario-info__item span {
  margin-bottom: 3px;
  color: var(--text-2, #7e6652);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.parcerias-usuario-info__item strong {
  overflow: hidden;
  color: var(--text-1, #2b1b12);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row parceira — herda barber-row, só ajusta padding-right */
.parcerias-row {
  padding-right: 80px !important;
}

/* Estado vazio centralizado */
.parcerias-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  opacity: .65;
}
.parcerias-vazio span { font-size: 2rem; }
.parcerias-vazio p    { font-size: .85rem; color: var(--text-2, #7e6652); text-align: center; }

.parcerias-vazio-inline {
  font-size: .82rem;
  color: var(--text-2, #7e6652);
  text-align: center;
  padding: 18px 8px 4px;
  margin: 0;
}

/* Sub-título interno (ex.: "Barbearias", "Barbeiros" em Favoritos) */
.parcerias-sub-titulo {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold, #D4AF37);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 12px 0 8px;
}

/* Botão "Ver meus favoritos" */
.parcerias-fav-btn {
  width: 100%;
  margin-top: 4px;
  font-size: .88rem;
}

/* ── Fotos / Portfolio ──────────────────────────────────────── */
.parcerias-fotos-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.parcerias-fotos-count {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold, #D4AF37);
  border: 1px solid var(--gold-border, rgba(212,175,55,.3));
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}
.btnflow {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.btnflow--outline {
  color: #7a4a1e;
  border-color: rgba(122, 74, 30, .72);
  background: rgba(122, 74, 30, .03);
}
.btnflow--outline:hover,
.btnflow--outline:focus-visible {
  background: rgba(122, 74, 30, .1);
  border-color: rgba(122, 74, 30, .95);
  transform: translateY(-1px);
}
.btnflow--sm {
  min-height: 28px;
  font-size: .72rem;
  padding: 5px 12px;
}
.parcerias-fotos-upload-btn {
  cursor: pointer;
  border-radius: 5px;
  white-space: nowrap;
}
.parcerias-fotos-upload-btn[aria-busy="true"] {
  opacity: .62;
  pointer-events: none;
}
.parcerias-fotos-carrossel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
}
.parcerias-fotos-carrossel:empty {
  display: none;
}
.parcerias-foto-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 132px;
  height: 168px;
  border: 1px solid rgba(122, 74, 30, .22);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  padding: 0;
  background: var(--card-alt, #fdf6ed);
  box-shadow: 0 10px 22px rgba(52, 32, 18, .12);
  transition: transform .15s, opacity .15s, border-color .18s ease, box-shadow .18s ease;
}
.parcerias-foto-item:hover,
.parcerias-foto-item:focus-visible {
  border-color: rgba(122, 74, 30, .45);
  box-shadow: 0 14px 28px rgba(52, 32, 18, .18);
  transform: translateY(-2px);
}
.parcerias-foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
  display: block;
}
.parcerias-foto-item__hint {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  display: block;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(17, 12, 9, .68);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease;
}
.parcerias-foto-item:hover .parcerias-foto-item__hint,
.parcerias-foto-item:focus-visible .parcerias-foto-item__hint,
.parcerias-foto-item--pressionado .parcerias-foto-item__hint {
  opacity: 1;
  transform: translateY(0);
}
.parcerias-foto-item--pressionado {
  transform: scale(.93);
  opacity: .7;
}
.parcerias-fotos-vazio {
  font-size: .82rem;
  color: var(--text-2, #7e6652);
  text-align: center;
  padding: 20px 8px;
  opacity: .7;
}

@media (min-width: 720px) {
  .parcerias-usuario-info {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Convite Card ─────────────────────────────────────────── */
.parcerias-convite-card {
  background: var(--card-alt, #fdf6ed);
  border: 1px solid var(--gold-border, rgba(212,175,55,.22));
  border-radius: var(--r-md, 12px);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}

.parcerias-convite-card.parcerias-convite--pendente {
  cursor: pointer;
}
.parcerias-convite-card.parcerias-convite--pendente:hover,
.parcerias-convite-card.parcerias-convite--pendente:active {
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 3px 14px rgba(212,175,55,.18);
}

.parcerias-convite-card.parcerias-convite--aceito {
  border-color: rgba(34,197,94,.35);
}
.parcerias-convite-card.parcerias-convite--recusado {
  opacity: .55;
  border-color: rgba(239,68,68,.25);
}

/* Badge "Proposta de parceria" */
.parcerias-convite-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gold, #D4AF37);
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 6px;
  padding: 3px 10px;
  width: fit-content;
}

/* Dica de toque */
.parcerias-convite-tap-hint {
  font-size: .75rem;
  color: var(--text-2, #7e6652);
  margin: 0;
  text-align: right;
  opacity: .8;
}

.parcerias-convite-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.parcerias-convite-info {
  flex: 1;
  min-width: 0;
}
.parcerias-convite-info .barber-name {
  font-size: .9rem;
  margin: 0;
}
.parcerias-convite-info .barber-sub {
  font-size: .75rem;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge de status */
.parcerias-convite-status {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
  background: rgba(212,175,55,.12);
  color: var(--gold, #D4AF37);
  border: 1px solid rgba(212,175,55,.3);
}
.parcerias-convite-status--aceito {
  background: rgba(34,197,94,.12);
  color: #16a34a;
  border-color: rgba(34,197,94,.3);
}
.parcerias-convite-status--recusado {
  background: rgba(239,68,68,.1);
  color: #dc2626;
  border-color: rgba(239,68,68,.25);
}

/* Cláusulas / mensagem */
.parcerias-convite-msg {
  font-size: .82rem;
  font-style: italic;
  color: var(--text-2, #7e6652);
  margin: 0;
  padding: 8px 12px;
  border-left: 2px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.04);
  border-radius: 0 6px 6px 0;
}

.parcerias-convite-clausulas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.parcerias-convite-pct {
  font-size: .84rem;
  color: var(--text-1, #2b1b12);
}
.parcerias-convite-pct strong {
  color: var(--gold, #D4AF37);
  font-size: 1rem;
}

.parcerias-convite-data {
  font-size: .72rem;
  color: var(--text-2, #7e6652);
}

.parcerias-convite-acoes {
  display: flex;
  gap: 8px;
}
.parcerias-convite-acoes .btn {
  flex: 1;
  font-size: .82rem;
}

/* ================================================================
   MINHA BARBEARIA — Card de Informações (endereço + contato)
================================================================ */
/* ================================================================
   MODO PARCEIRO — barbeiro vinculado (não dono) só mexe nas próprias
   cadeiras e posta vídeo. Controles de dono ficam inativos/acinzentados.
================================================================ */
.mb-modo-parceiro #mb-gps-btn,
.mb-modo-parceiro #mb-mais-btn,
.mb-modo-parceiro #mb-equipe-convidar-btn {
  opacity: .4;
  filter: grayscale(1);
  pointer-events: none;
  cursor: not-allowed;
}

/* ================================================================
   EQUIPE DA BARBEARIA — section abaixo do gi-header
================================================================ */
.mb-equipe-section {
  margin-top: 4px;
  overflow: hidden;
}

/* Header: titulo a esquerda, botao a direita */
.mb-equipe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mb-equipe-header .sec-title { margin: 0; }

.mb-equipe-convidar-btn {
  all: unset;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold, #D4AF37);
  background: rgba(212,175,55,.1);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: var(--r-full, 99px);
  padding: 4px 12px;
  cursor: pointer;
  transition: background .18s;
  -webkit-tap-highlight-color: transparent;
}
.mb-equipe-convidar-btn:hover { background: rgba(212,175,55,.2); }

/* Grid 2 colunas; dono ocupa linha inteira */
/* ── Layout principal: empilha uma row por barbeiro ─── */
.mb-equipe-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Dono: wraper que ocupa a largura toda */
.mb-equipe-dono-wrap { display: contents; }

/* Membros: filhos entram direto no flex-column */
.mb-equipe-col { display: contents; }

/* ── Convites enviados pela barbearia ─── */
.mb-convites-status-section {
  margin-top: 18px;
  overflow: hidden;
}
.mb-convites-status-vazio,
.mb-convites-status-carregando,
.mb-convites-status-erro {
  font-size: .82rem;
  color: var(--muted, #999);
  padding: 6px 0;
}
.mb-convite-status-card {
  background: var(--card-alt, #fdf6ed);
  border: 1px solid var(--gold-border, rgba(212,175,55,.22));
  border-radius: var(--r-md, 12px);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mb-convite-status-card--aceito { border-color: rgba(34,197,94,.35); }
.mb-convite-status-card--recusado { opacity: .7; border-color: rgba(239,68,68,.25); }
.mb-convite-status-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mb-convite-status-info {
  flex: 1;
  min-width: 0;
}
.mb-convite-status-nome {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-convite-status-cond {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--muted, #888);
}
.mb-convite-status-badge {
  font-size: .7rem;
  font-weight: 700;
  border-radius: var(--r-full, 99px);
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mb-convite-status-badge--pendente {
  background: rgba(212,175,55,.15);
  color: var(--gold, #D4AF37);
}
.mb-convite-status-badge--aceito {
  background: rgba(34,197,94,.15);
  color: #16a34a;
}
.mb-convite-status-badge--recusado {
  background: rgba(239,68,68,.12);
  color: #dc2626;
}
.mb-convite-status-acoes {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mb-dispensar-btn { color: #dc2626; border-color: rgba(239,68,68,.35); }
.mb-dispensar-btn:hover { background: rgba(239,68,68,.08); }
.mb-equipe-status-titulo {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-gold, #c8a951);
  margin: 1rem 0 .4rem;
  padding: 0 .25rem;
}
.mb-equipe-status-titulo:first-child { margin-top: 0; }

/* ── Row por barbeiro: card (coluna) + cadeiras ─── */
.mb-barbeiro-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-md, 12px);
  padding: 8px 10px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mb-barbeiro-row--dono {
  position: relative;
  box-shadow: 0 3px 10px rgba(212,175,55,.13);
  min-height: 72px;
  cursor: pointer;
}
.mb-barbeiro-row--dono:hover {
  box-shadow: 0 6px 18px rgba(212,175,55,.24);
  transform: translateY(-1px);
}
.mb-barbeiro-row--dono::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7B4F2E, #D4AF37);
}
.mb-barbeiro-row--membro {
  border: 1px solid var(--border-soft, rgba(212,175,55,.12));
  min-height: 60px;
  cursor: pointer;
}
.mb-barbeiro-row--membro:hover {
  box-shadow: 0 3px 10px rgba(212,175,55,.14);
  transform: translateY(-1px);
}

/* ── Card do barbeiro (coluna esquerda) ─── */
.mb-barbeiro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  width: 60px;
  min-width: 60px;
  overflow: hidden;
}
.mb-barbeiro-nome {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text, #2b1b12);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin: 0;
}
.mb-barbeiro-badge {
  font-size: .56rem;
  font-weight: 700;
  color: var(--gold, #D4AF37);
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: var(--r-full, 99px);
  padding: 1px 6px;
  white-space: nowrap;
}
.mb-barbeiro-cortes {
  font-size: .58rem;
  color: var(--text-muted, #8c7057);
  text-align: center;
}

/* ── Avatar base (compartilhado) ─── */
.mb-equipe-avatar {
  border-radius: 50%;
  background: var(--card2, #f0e8d8);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-equipe-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tamanhos de avatar ─── */
.mb-equipe-avatar--lg {
  width: 42px;
  height: 42px;
  border: 2px solid var(--gold, #D4AF37);
  font-size: 1.1rem;
}
.mb-equipe-avatar--md {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-soft, rgba(212,175,55,.25));
  font-size: 1rem;
}
.mb-equipe-avatar--sm {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border-soft, rgba(212,175,55,.18));
  font-size: .9rem;
}

/* ── Cadeiras (irmãs do card, puramente visuais) ─── */
/* Container externo: produção (fixa) + fila (scroll) lado a lado */
.mb-cadeiras-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Scroll apenas nas cadeiras de espera */
.mb-cadeiras-fila-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}
.mb-cadeiras-fila-wrap::-webkit-scrollbar { display: none; }

.mb-cadeira {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  position: relative; /* âncora do avatar flutuante */
  width: 72px;
  min-width: 72px;
  padding: 7px 6px;
  padding-top: 18px; /* espaço para o avatar flutuante */
  border-radius: 10px;
  overflow: visible;
  pointer-events: none; /* desabilitado por padrão */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  scroll-snap-align: start;
}

.mb-barbeiro-row,
.mb-barbeiro-row *,
.mb-cadeiras-wrap,
.mb-cadeiras-wrap *,
.mb-cadeiras-fila-wrap,
.mb-cadeiras-fila-wrap *,
.mb-cadeira,
.mb-cadeira * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none;
}

.mb-barbeiro-row:active,
.mb-barbeiro-row:focus,
.mb-barbeiro-row:focus-within,
.mb-cadeiras-wrap:active,
.mb-cadeiras-wrap:focus,
.mb-cadeiras-wrap:focus-within,
.mb-cadeiras-fila-wrap:active,
.mb-cadeiras-fila-wrap:focus,
.mb-cadeiras-fila-wrap:focus-within {
  outline: none;
}
.mb-cadeira--producao {
  border: 1.5px solid var(--gold, #D4AF37);
  background: rgba(212,175,55,.06);
}
.mb-cadeira--fila {
  border: 1px solid var(--border-soft, rgba(212,175,55,.15));
  background: transparent;
}
.mb-cadeira--vazia {
  border-style: dashed;
  opacity: .42;
}

/* Ícone da cadeira — 60×60 com overflow:hidden para ampliar imagem */
.mb-cadeira-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}
.mb-cadeira-icon > img.mb-cadeira-img-fundo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar do cliente flutuando acima da imagem da cadeira (âncora em .mb-cadeira) */
.mb-cadeira-avatar-cli {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold, #D4AF37);
  background: var(--card2, #f0e8d8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  z-index: 1;
  flex-shrink: 0;
}
.mb-cadeira-avatar-cli img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Modo confirmada (borda amarela): avatar desce 0.5rem */
.mb-cadeira--confirmada .mb-cadeira-avatar-cli {
  top: calc(2px + 0.5rem);
}

/* Badge de posição (#N) */
.mb-cadeira-pos-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--gold, #D4AF37);
  color: #1a0f00;
  font-size: .5rem;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  padding: 0 3px;
  z-index: 2;
}

.mb-cadeira-label {
  font-size: .6rem;
  font-weight: 700;
  color: var(--text, #2b1b12);
  text-align: center;
  white-space: nowrap;
}
.mb-cadeira--producao .mb-cadeira-label {
  color: var(--gold, #D4AF37);
  white-space: normal;
  line-height: 1.3;
  font-size: .52rem;
  width: 100%;
}
.mb-cadeira--producao .mb-cadeira-icon { border: 1.5px solid var(--gold, #D4AF37); border-radius: 8px; }
/* Confirmação de presença — cadeira de produção */
.mb-cadeira--confirmada { border: none !important; outline: none !important; }
.mb-cadeira--confirmada .mb-cadeira-label { white-space: normal; line-height: 1.3; font-size: .52rem; }
.mb-cadeira-icon--confirmada {
  border: 2.5px solid #D4A017;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(212,175,55,.35);
}
.mb-cadeira-cliente {
  font-size: .55rem;
  color: var(--text-muted, #8c7057);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ── Interatividade do dono ──────────────────────────────── */
.mb-cadeira--interativa {
  pointer-events: auto;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  outline: none;
}

.mb-cadeira--interativa .mb-cadeira-icon {
  transition: transform .15s ease, opacity .15s ease;
}
.mb-cadeira--interativa:hover .mb-cadeira-icon {
  opacity: .88;
  transform: scale(1.1);
}
.mb-cadeira--interativa:active .mb-cadeira-icon {
  transform: scale(.94);
  opacity: .75;
}
.mb-cadeira--interativa:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}

/* Modais de cadeira — overlay base (reutilizado por csm / crtm / fcm) */
.csm-overlay,
.crtm-overlay,
.fcm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9500;
  opacity: 0;
  transition: opacity .22s ease;
}
.csm-overlay--visivel,
.crtm-overlay--visivel,
.fcm-overlay--visivel  { opacity: 1; }
.csm-overlay--saindo,
.crtm-overlay--saindo,
.fcm-overlay--saindo   { opacity: 0; }

/* Cards das modais */
.csm-card,
.crtm-card,
.fcm-card {
  background: var(--card, #fff9f0);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(32px);
  transition: transform .22s ease;
}
.csm-overlay--visivel .csm-card,
.crtm-overlay--visivel .crtm-card,
.fcm-overlay--visivel .fcm-card { transform: translateY(0); }

/* Header das modais */
.csm-header,
.crtm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border-soft, rgba(212,175,55,.15));
  flex-shrink: 0;
}
.csm-titulo,
.crtm-titulo,
.fcm-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #2b1b12);
  margin: 0;
  padding: 16px 18px 0;
}
.csm-fechar,
.crtm-fechar {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted, #8c7057);
  padding: 4px 8px;
}

/* Busca (ClienteSeletorModal) */
.csm-busca {
  margin: 10px 14px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft, rgba(212,175,55,.25));
  border-radius: 8px;
  background: var(--card2, #f0e8d8);
  font-size: .9rem;
  color: var(--text, #2b1b12);
  outline: none;
  flex-shrink: 0;
}
.csm-secao-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #8c7057);
  padding: 0 18px 4px;
  flex-shrink: 0;
}

/* Lista de clientes */
.csm-lista {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px;
  overflow-y: auto;
  flex: 1;
}
.csm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .12s;
}
.csm-item:hover  { background: var(--card2, #f0e8d8); }
.csm-item:active { background: var(--border-soft, rgba(212,175,55,.2)); }
.csm-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold, #D4AF37);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.csm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csm-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.csm-nome {
  font-size: .9rem;
  color: var(--text, #2b1b12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csm-email {
  font-size: .72rem;
  color: var(--text-muted, #8c7057);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csm-vazio,
.crtm-vazio {
  text-align: center;
  padding: 24px;
  color: var(--text-muted, #8c7057);
  font-size: .85rem;
}

/* ── Seção de cliente anônimo (walk-in) ──────────────────── */
.csm-anon-section {
  padding: 8px 12px 0;
  flex-shrink: 0;
}
.csm-item--anon {
  border: 1px solid var(--gold, #D4AF37);
  border-radius: 8px;
  background: rgba(212,175,55,.07);
  cursor: pointer;
}
.csm-item--anon:hover  { background: rgba(212,175,55,.16); }
.csm-item--anon:active { background: rgba(212,175,55,.25); }

/* Formulário de nome walk-in */
.csm-anon-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--gold, #D4AF37);
  border-radius: 8px;
  background: rgba(212,175,55,.05);
}
.csm-anon-form-titulo {
  font-size: .82rem;
  color: var(--text-muted, #8c7057);
  margin: 0;
}
.csm-anon-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gold, #D4AF37);
  border-radius: 8px;
  background: transparent;
  color: var(--text, #2b1b12);
  font-size: .9rem;
  box-sizing: border-box;
}
.csm-anon-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,.25);
}
.csm-anon-confirm {
  background: var(--gold, #D4AF37);
  color: #2b1b12;
}
.csm-anon-confirm:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.csm-anon-voltar {
  background: transparent;
  color: var(--text-muted, #8c7057);
  border: 1px solid var(--border-soft, rgba(212,175,55,.2));
}

/* Lista de serviços (CorteModal) */
.crtm-lista {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.crtm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  cursor: pointer;
}
.crtm-item:hover { background: var(--card2, #f0e8d8); }
.crtm-checkbox { width: 18px; height: 18px; accent-color: var(--gold, #D4AF37); cursor: pointer; flex-shrink: 0; }
.crtm-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  flex: 1;
}
.crtm-svc-nome {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text, #2b1b12);
}
.crtm-svc-meta {
  font-size: .75rem;
  color: var(--text-muted, #8c7057);
}
.crtm-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-soft, rgba(212,175,55,.15));
  flex-shrink: 0;
}
.crtm-total {
  font-size: .85rem;
  color: var(--text-muted, #8c7057);
  margin: 0;
}
.crtm-total-val { color: var(--gold, #D4AF37); }

/* Botões compartilhados */
.csm-btn,
.crtm-btn,
.fcm-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.csm-btn:active,
.crtm-btn:active,
.fcm-btn:active { opacity: .75; }
.crtm-btn--confirmar,
.fcm-btn--confirmar {
  background: var(--gold, #D4AF37);
  color: #fff;
}
.crtm-btn--confirmar:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.crtm-btn--cancelar,
.fcm-btn--cancelar {
  background: var(--card2, #f0e8d8);
  color: var(--text, #2b1b12);
}

/* FinalizarCorteModal */
.fcm-card {
  padding: 20px 18px 16px;
  border-radius: 18px 18px 0 0;
}
.fcm-titulo { padding: 0 0 8px; }
.fcm-cliente {
  font-size: .9rem;
  color: var(--text, #2b1b12);
  margin: 0 0 6px;
}
.fcm-proximo {
  font-size: .85rem;
  color: var(--text-muted, #8c7057);
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--card2, #f0e8d8);
  border-radius: 8px;
}
.fcm-proximo--vazia { font-style: italic; }
.fcm-acoes { display: flex; flex-direction: column; gap: 8px; }

/* ── Skeleton ─── */
.mb-barbeiro-row--skeleton .mb-equipe-avatar,
.mb-barbeiro-row--skeleton .mb-barbeiro-nome,
.mb-barbeiro-row--skeleton .mb-cadeira-icon { background: var(--card2, #f0e8d8); border-radius: 4px; color: transparent; }
.mb-barbeiro-row--skeleton .mb-cadeira-icon img { display: none; }

/* ================================================================
   CONVITE DE BARBEIRO — sub-painel
================================================================ */
#mb-convite-panel .tela-topo {
  align-items: flex-start;
  padding-right: .5rem;
  padding-left: .5rem;
}

#mb-convite-panel .mb-config-body {
  min-height: 0;
  padding-right: .5rem;
  padding-left: .5rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.mb-convite-titulos {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  margin-top: 1rem;
}

.mb-convite-barbearia-nome {
  margin: 0;
  color: var(--text, #2b1b12);
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mb-convite-panel .tela-topo__titulo {
  flex: none;
  font-size: 1rem;
  line-height: 1.2;
}

#mb-convite-panel .mb-config-secao-label {
  display: block;
  color: var(--brown, #6f4529);
}

#mb-convite-panel .mb-config-secao-label::after {
  content: none;
}

.mb-convite-msg-wrap { margin-top: 12px; }

.mb-convite-busca-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 6px;
}
.mb-convite-busca-row .inpustyle { flex: 1; }

#mb-convite-btn-buscar {
  width: 42px;
  min-height: 34px;
  flex: 0 0 42px;
  padding-bottom: 2px;
  font-size: 1.2rem;
}

.mb-convite-resultado {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mb-convite-barb-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.mb-convite-barb-card:hover,
.mb-convite-barb-card.mb-convite-barb-card--selecionado {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,.18);
}
.mb-convite-barb-card--selecionado::after {
  content: '✓';
  margin-left: auto;
  color: var(--gold);
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
}
.mb-convite-barb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--card2);
  border: 1.5px solid var(--border-soft);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.mb-convite-barb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mb-convite-barb-nome { font-size: .82rem; font-weight: 600; color: var(--text); margin: 0; }
.mb-convite-barb-sub  { font-size: .7rem; color: var(--text-muted); margin: 0; }
.mb-convite-barb-id   { font-size: .7rem; color: var(--text-muted); margin: 0; }

/* Card barbeiro que recusou proposta */
.mb-convite-barb-card--recusou {
  border-color: rgba(239,68,68,.35);
  flex-wrap: wrap;
  cursor: default;
}
.mb-convite-barb-badge-recusou {
  display: inline-block;
  margin-top: 3px;
  font-size: .68rem;
  color: #dc2626;
  font-weight: 600;
}
.mb-convite-barb-acoes-recusou {
  width: 100%;
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(239,68,68,.18);
}
.btn-xs {
  font-size: .7rem;
  padding: 4px 10px;
  border-radius: var(--r-full, 99px);
}

.mb-convite-barbeiro-selecionado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: .75rem;
  padding: 8px .5rem;
  background: transparent;
  border-bottom: 1.5px solid var(--brown, #7b4a2a);
}

.mb-convite-barbeiro-selecionado[hidden] {
  display: none;
}

.mb-convite-barbeiro-selecionado__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--gold, #D4AF37);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  flex: 0 0 38px;
}

.mb-convite-barbeiro-selecionado__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mb-convite-barbeiro-selecionado__info {
  min-width: 0;
}

.mb-convite-barbeiro-selecionado__label {
  margin: 0;
  font-size: .66rem;
  font-weight: 800;
  color: var(--brown, #7b4a2a);
  text-transform: uppercase;
}

.mb-convite-barbeiro-selecionado__nome {
  margin: 2px 0 0;
  font-size: .88rem;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: anywhere;
}

.mb-convite-tipo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 310px;
  margin-top: 6px;
  margin-right: auto;
  margin-left: auto;
}

.mb-convite-tipo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
  padding: 10px 6px;
  background: transparent;
  border: 2px solid var(--brown, #5C3317);
  border-radius: var(--r-sm, 8px);
  color: var(--brown, #5C3317);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, color .18s, background .18s;
  box-sizing: border-box;
}
.mb-convite-tipo-btn strong { font-size: .72rem; color: var(--text); display: block; }
.mb-convite-tipo-btn small  { font-size: .6rem; color: var(--text-muted); }
.mb-convite-tipo-icon {
  width: 62px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-convite-tipo-btn--ativo {
  border-color: var(--gold, #D4AF37);
  color: var(--gold, #D4AF37);
  box-shadow: 0 0 0 2px rgba(212,175,55,.18);
}
.mb-convite-tipo-btn--ativo strong { color: var(--gold); }

.mb-convite-tipo-btn:hover,
.mb-convite-tipo-btn:focus-visible {
  background: transparent;
  border-color: var(--gold, #D4AF37);
  color: var(--gold, #D4AF37);
  box-shadow: 0 0 0 2px rgba(212,175,55,.18);
}

.mb-convite-tipo-btn:active {
  background: transparent;
  border-color: var(--gold, #D4AF37);
  color: var(--gold, #D4AF37);
}

.mb-convite-tipo-icon--parceria {
  gap: 6px;
  width: 78px;
  min-height: 40px;
}

.mb-convite-tipo-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}

.mb-convite-tipo-setas {
  color: var(--gold, #D4AF37);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -1px;
}

.mb-convite-tipo-icon--cadeira {
  position: relative;
  min-height: 44px;
}

.mb-convite-cadeira-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.mb-convite-cadeira-logo {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
}

#mb-convite-enviar-secao {
  margin-top: .75rem;
  margin-bottom: 1rem;
}

#mb-convite-btn-enviar {
  margin: 0;
  background: var(--brown, #5C3317);
  border-color: var(--brown, #5C3317);
  color: #fff;
}

#mb-convite-btn-enviar:hover,
#mb-convite-btn-enviar:active {
  background: var(--brown-light, #7A4520);
  border-color: var(--brown-light, #7A4520);
}

/* ================================================================
   FIM — EQUIPE DA BARBEARIA
================================================================ */

.mb-info-card {
  background: transparent;
  border: none;
  border-radius: var(--r-lg, 18px);
  padding: 8px 4px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mb-info-card[hidden] { display: none; }

.mb-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.mb-info-icon { font-size: .9rem; flex-shrink: 0; }
.mb-info-nome {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text, #2b1b12);
  margin: 0;
}
.mb-info-linha {
  font-size: .75rem;
  color: var(--text-muted, #6b5a4a);
  margin: 0;
  line-height: 1.4;
}
.mb-info-linha[hidden] { display: none; }
.mb-info-desde {
  color: var(--gold, #D4AF37);
  font-weight: 600;
}
.mb-info-whats {
  color: var(--text, #2b1b12);
  font-weight: 500;
}

/* ================================================================
   CONFIG PANEL — Campos editáveis com lápis
================================================================ */
.mb-cfg-editable-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.mb-cfg-display-val {
  flex: 1;
  font-size: .92rem;
  color: var(--text-muted, #6b5a4a);
  font-style: italic;
  word-break: break-all;
}
.mb-cfg-lapis-btn {
  all: unset;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
  padding: 5px 7px;
  border-radius: 8px;
  transition: background .18s;
  line-height: 1;
}
.mb-cfg-lapis-btn:hover  { background: rgba(212,175,55,.12); }
.mb-cfg-lapis-btn.mb-cfg-lapis-ativo {
  background: rgba(212,175,55,.22);
  filter: sepia(1) saturate(3) brightness(1.1);
}
.mb-cfg-editable-row .mb-config-input {
  flex: 1;
  margin: 0;
}
.mb-cfg-editable-row .gps-input { flex: 1; margin: 0; }
.mb-cfg-editable-row .gps-cep-row { flex: 1; }

/* ================================================================
   PROFISSIONAL STARTUP SPLASH — ps-*
================================================================ */
.ps-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #f5e9dc;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.ps-overlay.cs-ativo  { opacity: 1; }
.ps-overlay.cs-saindo { opacity: 0; }
.ps-conteudo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.ps-logo-icon {
  width: 232px; height: 232px; object-fit: contain; background: transparent;
  filter: drop-shadow(0 12px 28px rgba(93, 62, 25, 0.18));
}
.ps-logo-name {
  width: min(72vw, 280px); height: auto; object-fit: contain; background: transparent;
  filter: drop-shadow(0 12px 28px rgba(93, 62, 25, 0.18));
}
.ps-tagline {
  max-width: min(82vw, 460px);
  width: min(82vw, 460px);
  margin: 2px 0 0;
  overflow: hidden;
  white-space: normal;
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 3.1vw, 1rem);
  font-weight: 700;
  color: #5d3e19;
  text-align: center;
  animation: psTyping 2.3s steps(42, end) both;
}
@keyframes psTyping {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.ps-tagline.ps-tagline-concluida {
  animation: none;
  clip-path: inset(0 0 0 0);
}

/* ================================================================
   FINANCAS — Dashboard financeiro
================================================================ */

/* Filtro de período */
.fin-filtro-wrap {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.fin-btn-periodo {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border-soft, rgba(212,175,55,.2));
  background: transparent;
  color: var(--text-muted);
  font-size: .85rem;
  cursor: pointer;
  transition: all .18s;
  font-weight: 500;
}
.fin-btn-periodo--ativo {
  background: var(--gold, #D4AF37);
  color: #1a0f00;
  border-color: var(--gold, #D4AF37);
  font-weight: 700;
}

/* Cards de resumo */
.fin-resumo-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.fin-card-resumo {
  background: var(--card, #fff9f0);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* ── Grid de breakdown por método de pagamento ── */
.fin-metodos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.fin-card-metodo {
  background: var(--card, #fff9f0);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-card-metodo--pix {
  grid-column: 1 / -1;
}
.fin-card-metodo--total {
  grid-column: 1 / -1;
  border: 1.5px solid rgba(212,175,55,.35);
}
.fin-card-metodo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.fin-card-meta {
  font-size: .7rem;
  color: var(--text-muted);
  margin: 0;
}

/* Botão flutuante "Menos %" */
.btn-float {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  border: 1.5px solid var(--gold, #D4AF37);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gold, #D4AF37);
  background: transparent;
  transition: box-shadow .18s, opacity .15s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-float:hover {
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}
.btn-float:active {
  opacity: .75;
}
.btn-float:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ================================================================
   MenosPercentualModal
================================================================ */
.mpm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9700;
  opacity: 0;
  transition: opacity .2s;
  padding: 20px;
}
.mpm-overlay--visivel { opacity: 1; }
.mpm-overlay--saindo  { opacity: 0; }

.mpm-card {
  background: var(--card, #fff9f0);
  border-radius: 18px;
  width: 100%;
  max-width: 340px;
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: scale(.94);
  transition: transform .2s;
}
.mpm-overlay--visivel .mpm-card { transform: scale(1); }

.mpm-titulo {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  text-align: center;
}
.mpm-subtitulo {
  font-size: .8rem;
  color: var(--text-muted);
  margin: -8px 0 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mpm-bruto-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card2, #f0e8dc);
  border-radius: 10px;
  padding: 10px 14px;
}
.mpm-bruto-label {
  font-size: .78rem;
  color: var(--text-muted);
}
.mpm-bruto-valor {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
}
.mpm-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card2, #f0e8dc);
  border-radius: 10px;
  padding: 8px 14px;
}
.mpm-input {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.mpm-input::placeholder { color: var(--text-muted); font-weight: 400; }
.mpm-pct-sufixo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold, #D4AF37);
}
.mpm-preview {
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  min-height: 1.2em;
}
.mpm-acoes {
  display: flex;
  gap: 10px;
}
.mpm-btn {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
}
.mpm-btn:active { transform: scale(.97); }
.mpm-btn--cancelar {
  background: var(--card2, #f0e8dc);
  color: var(--text-muted);
}
.mpm-btn--ok {
  background: var(--gold, #D4AF37);
  color: #1a0f00;
}
.mpm-btn--ok:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

/* Herda os estilos legados do .fin-card-resumo para compatibilidade */
.fin-card-resumo {
  flex: 1;
  background: var(--card, #fff9f0);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.fin-card-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fin-card-valor {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.fin-card-valor--destaque { color: var(--gold, #D4AF37); }

/* Título de seção */
.fin-section-titulo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 12px;
}

/* Grid de barbeiros */
.fin-barbeiros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .fin-barbeiros-grid { grid-template-columns: repeat(3, 1fr); }
}
.fin-barber-card {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  background: var(--card, #fff9f0);
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  transition: box-shadow .18s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fin-barber-card:hover {
  box-shadow: 0 4px 18px rgba(212,175,55,.18);
  transform: translateY(-2px);
}
.fin-barber-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold, #D4AF37);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a0f00;
}
.fin-barber-nome {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.fin-barber-meta {
  font-size: .72rem;
  color: var(--text-muted);
  margin: 0;
}
.fin-barber-total {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold, #D4AF37);
  margin: 0;
}
.fin-barber-chevron {
  font-size: 1.2rem;
  color: var(--text-muted);
  align-self: flex-end;
  margin-top: auto;
}

/* Estado vazio */
.fin-vazio-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: .9rem;
  margin: 0;
}

/* Skeleton de carregamento */
.fin-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fin-skel-card {
  height: 80px;
  border-radius: 14px;
  background: linear-gradient(90deg,
    var(--card2, #f0e8dc) 25%,
    var(--card, #fff9f0) 50%,
    var(--card2, #f0e8dc) 75%
  );
  background-size: 200% 100%;
  animation: finSkeleton 1.4s infinite;
}
@keyframes finSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dashboard financeira premium — contrato BFF /api/v1/financeiro */
#tela-financas [hidden] { display: none !important; }
.fin-filtro-wrap {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.fin-btn-periodo {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(255,255,255,.05);
  color: var(--text-muted, #8a7f73);
  font-size: .82rem;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
  font-weight: 700;
}
.fin-btn-periodo:hover { transform: translateY(-1px); border-color: rgba(15,118,110,.45); }
.fin-btn-periodo--ativo {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}
.fin-custom-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.fin-custom-wrap label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-muted, #8a7f73);
}
.fin-custom-wrap input,
.fin-custom-wrap button {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .25);
  background: var(--card, #fff9f0);
  color: var(--text, #21160f);
  padding: 7px 10px;
}
.fin-custom-wrap button {
  background: #111827;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.fin-resumo-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (min-width: 680px) {
  .fin-resumo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .fin-resumo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.fin-kpi-card,
.fin-chart-panel,
.fin-metodo-card,
.fin-barber-card {
  background: var(--card, #fff9f0);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}
.fin-kpi-card {
  padding: 14px;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s, box-shadow .18s;
}
.fin-kpi-card:hover,
.fin-chart-panel:hover,
.fin-metodo-card:hover,
.fin-barber-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .1);
}
.fin-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fin-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(15, 118, 110, .12);
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
}
.fin-kpi-meta,
.fin-growth {
  font-size: .74rem;
  font-weight: 800;
  color: #0f766e;
  white-space: nowrap;
}
.fin-kpi-meta.neutro { color: var(--text-muted, #8a7f73); }
.fin-kpi-meta.negativo { color: #dc2626; }
.fin-kpi-meta.positivo { color: #0f766e; }
.fin-growth.negativo { color: #dc2626; }
.fin-kpi-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #8a7f73);
  margin: 10px 0 4px;
}
.fin-kpi-value {
  font-size: clamp(1.1rem, 2.2vw, 1.65rem);
  line-height: 1.1;
  color: var(--text, #21160f);
  overflow-wrap: anywhere;
}
.fin-status-equipe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.fin-status-equipe span {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  color: var(--text-muted, #8a7f73);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
  font-size: .8rem;
}
.fin-status-equipe strong { color: var(--text, #21160f); }
.fin-graficos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 14px;
}
@media (min-width: 960px) {
  .fin-graficos-grid { grid-template-columns: 1.35fr 1fr; }
  .fin-chart-panel--wide { grid-row: span 2; }
}
.fin-chart-panel {
  padding: 14px;
  min-height: 250px;
  transition: transform .18s, box-shadow .18s;
}
.fin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fin-panel-head h2 {
  margin: 2px 0 0;
  font-size: 1rem;
  color: var(--text, #21160f);
}
.fin-eyebrow {
  margin: 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0f766e;
  font-weight: 900;
}
.fin-line-chart {
  width: 100%;
  height: auto;
  display: block;
}
.fin-line-grid {
  stroke: rgba(148, 163, 184, .28);
  stroke-width: 1;
}
.fin-line-area { fill: url(#finAreaGradient); }
.fin-line-path {
  fill: none;
  stroke: #0f766e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fin-bar-chart { display: grid; gap: 12px; }
.fin-bar-row {
  display: grid;
  grid-template-columns: minmax(70px, .8fr) minmax(90px, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted, #8a7f73);
}
.fin-bar-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-bar-row strong {
  color: var(--text, #21160f);
  font-size: .78rem;
}
.fin-bar-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .2);
  overflow: hidden;
}
.fin-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #2563eb);
}
.fin-donut-wrap {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 16px;
}
@media (max-width: 420px) {
  .fin-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
}
.fin-donut {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.fin-donut::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: var(--card, #fff9f0);
}
.fin-donut span {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 86px;
  font-size: .82rem;
  font-weight: 900;
  color: var(--text, #21160f);
}
.fin-donut-legend { display: grid; gap: 8px; width: 100%; }
.fin-donut-legend p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted, #8a7f73);
}
.fin-donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.fin-donut-legend strong {
  margin-left: auto;
  color: var(--text, #21160f);
}
.fin-chart-empty,
.fin-vazio-msg,
.fin-erro-msg {
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, .35);
  color: var(--text-muted, #8a7f73);
  text-align: center;
  padding: 28px 14px;
  font-size: .86rem;
  margin: 0;
}
.fin-erro-msg {
  border-color: rgba(220, 38, 38, .35);
  color: #b91c1c;
  background: rgba(220, 38, 38, .07);
}
.fin-metodos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 20px;
}
@media (min-width: 720px) {
  .fin-metodos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .fin-metodos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fin-metodo-card {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform .18s, box-shadow .18s;
}
.fin-metodo-card p,
.fin-metodo-card span {
  margin: 0;
  color: var(--text-muted, #8a7f73);
  font-size: .75rem;
}
.fin-metodo-card strong {
  display: block;
  margin: 4px 0;
  color: var(--text, #21160f);
  font-size: 1.05rem;
}
.fin-taxa-btn {
  border: 1px solid rgba(15, 118, 110, .35);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .75rem;
  font-weight: 700;
  color: #0f766e;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.fin-section-titulo {
  font-size: .82rem;
  font-weight: 900;
  color: var(--text-muted, #8a7f73);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 10px 0 12px;
}
.fin-barbeiros-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .fin-barbeiros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .fin-barbeiros-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fin-barber-card {
  all: initial;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  display: block;
  width: 100%;
  background: var(--card, #fff9f0);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
  padding: 14px;
  transition: transform .18s, box-shadow .18s;
}
.fin-barber-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.fin-barber-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  overflow: hidden;
}
.fin-barber-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fin-barber-head h3 {
  margin: 0 0 4px;
  color: var(--text, #21160f);
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-status {
  display: inline-flex;
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  color: var(--text-muted, #8a7f73);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.fin-status--trabalhando { background: rgba(15, 118, 110, .13); color: #0f766e; }
.fin-status--inativo { background: rgba(220, 38, 38, .1); color: #dc2626; }
.fin-alerta-acordo {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(249, 115, 22, .1);
  color: #c2410c;
  font-size: .76rem;
  font-weight: 800;
}
.fin-barber-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.fin-barber-metrics div {
  border-radius: 8px;
  background: rgba(148, 163, 184, .08);
  padding: 9px;
}
.fin-barber-metrics dt {
  color: var(--text-muted, #8a7f73);
  font-size: .68rem;
  margin-bottom: 3px;
}
.fin-barber-metrics dd {
  margin: 0;
  color: var(--text, #21160f);
  font-size: .86rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.fin-split-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fin-split-result p {
  margin: 0;
  border-radius: 8px;
  padding: 10px;
  background: rgba(15, 118, 110, .09);
}
.fin-split-result span {
  display: block;
  color: var(--text-muted, #8a7f73);
  font-size: .7rem;
}
.fin-split-result strong {
  color: #0f766e;
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.fin-payout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.fin-payout-row p {
  flex: 1;
}

.fin-payout-btn {
  border: 0;
  border-radius: 8px;
  padding: .55rem .8rem;
  background: #0f766e;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  min-width: 72px;
}

.fin-payout-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.fin-settlement-panel {
  gap: 1rem;
}

.fin-settlement-status {
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: .78rem;
  font-weight: 800;
}

.fin-settlement-status--pending {
  background: rgba(245, 158, 11, .14);
  color: #92400e;
}

.fin-settlement-status--paid {
  background: rgba(16, 185, 129, .14);
  color: #047857;
}

.fin-settlement-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  border-radius: 8px;
  padding: 1rem;
  background: #0f766e;
  color: #fff;
}

.fin-settlement-highlight span {
  font-size: .82rem;
  font-weight: 700;
  opacity: .88;
}

.fin-settlement-highlight strong {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.fin-settlement-confirm {
  border: 0;
  border-radius: 8px;
  padding: .65rem .85rem;
  background: #fff;
  color: #0f766e;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.fin-settlement-confirm:disabled {
  opacity: .7;
  cursor: wait;
}

.fin-settlement-metrics {
  margin-top: 0;
}

.fin-settlement-history {
  display: grid;
  gap: .45rem;
}

.fin-settlement-history h3 {
  margin: 0;
  font-size: .95rem;
}

.fin-settlement-history p {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .75rem;
  margin: 0;
  border-top: 1px solid rgba(15, 23, 42, .08);
  padding-top: .45rem;
}

.fin-settlement-history span,
.fin-settlement-history em {
  color: #64748b;
  font-size: .82rem;
}

@media (max-width: 560px) {
  .fin-settlement-highlight,
  .fin-settlement-history p {
    grid-template-columns: 1fr;
  }

  .fin-settlement-highlight {
    align-items: flex-start;
    flex-direction: column;
  }
}

.fin-payout-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, .52);
}

.fin-payout-modal__box {
  width: min(420px, 100%);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.fin-payout-modal__head,
.fin-payout-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem;
}

.fin-payout-modal__head {
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.fin-payout-modal__head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.fin-payout-modal__close {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 1.4rem;
  cursor: pointer;
}

.fin-payout-modal__body {
  display: grid;
  gap: .7rem;
  padding: 1rem;
}

.fin-payout-modal__body p,
.fin-payout-modal__erro {
  margin: 0;
}

.fin-payout-modal__body p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.fin-payout-modal__body span {
  color: #64748b;
}

.fin-payout-modal__erro {
  margin: 0 1rem;
  border-radius: 8px;
  padding: .65rem .75rem;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}

.fin-payout-cancel,
.fin-payout-confirm {
  border: 0;
  border-radius: 8px;
  padding: .7rem 1rem;
  font-weight: 800;
  cursor: pointer;
}

.fin-payout-cancel {
  background: #e2e8f0;
  color: #0f172a;
}

.fin-payout-confirm {
  background: #0f766e;
  color: #fff;
}

.fin-payout-confirm:disabled {
  opacity: .6;
  cursor: wait;
}
.fin-loading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .fin-loading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fin-skel-card {
  height: 112px;
  border-radius: 8px;
}

/* ================================================================
   BarberFinanceModal
================================================================ */
.bfm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9600;
  opacity: 0;
  transition: opacity .22s;
}
.bfm-overlay--visivel { opacity: 1; }
.bfm-overlay--saindo  { opacity: 0; }

.bfm-card {
  background: var(--card, #fff9f0);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(32px);
  transition: transform .22s;
}
.bfm-overlay--visivel .bfm-card { transform: translateY(0); }

.bfm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.bfm-header-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Modal proposta de convite (pci = parcerias-convite-invite) ── */
.pci-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .22s;
}
.pci-overlay--visivel { opacity: 1; }
.pci-overlay--saindo  { opacity: 0; pointer-events: none; }

.pci-card {
  background: var(--card, #1e1e1e);
  border: 1px solid var(--gold-border, rgba(161, 124, 58, .25));
  border-radius: var(--r-md, 14px);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pci-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #f5efe6);
  margin: 0;
}

.pci-linha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gold-border, rgba(161, 124, 58, .15));
  font-size: .88rem;
  color: var(--text-muted, #a0968a);
}
.pci-linha strong { color: var(--text, #f5efe6); }

.pci-notas {
  font-size: .85rem;
  color: var(--text-muted, #a0968a);
  font-style: italic;
  padding: 8px 10px;
  border-left: 3px solid var(--gold, #a17c3a);
  background: rgba(161, 124, 58, .07);
  border-radius: 0 6px 6px 0;
}

.pci-acoes {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.pci-acoes .btn { flex: 1; }

/* ── Cláusula de parceria no modal de convite ── */
.pci-clausula {
  background: var(--card-alt, rgba(255,255,255,.04));
  border: 1px solid var(--gold-border, rgba(212,175,55,.25));
  border-radius: var(--r-md, 12px);
  padding: 14px;
  margin: 12px 0 4px;
}
.pci-clausula-titulo {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold, #D4AF37);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pci-divisao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--bg, #0d0a07);
  border-radius: var(--r-sm, 8px);
  padding: 10px 12px;
}
.pci-divisao-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.pci-divisao-label {
  font-size: .72rem;
  color: var(--text-2, #a08060);
}
.pci-divisao-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}
.pci-divisao-num--shop { color: var(--text-2, #a08060); }
.pci-divisao-num--barb { color: var(--gold, #D4AF37); }
.pci-divisao-sub {
  font-size: .68rem;
  color: var(--text-2, #a08060);
}
.pci-divisao-sep {
  font-size: 1rem;
  color: var(--text-2, #a08060);
  flex-shrink: 0;
}
.pci-beneficios {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pci-beneficio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .8rem;
  color: var(--text, #f5efe6);
  line-height: 1.4;
}

/* ============================================================
   PortfolioPrismViewer — prisma 3D hexagonal de 6 faces
   Compartilhado via shared/css/components.css
============================================================ */
[class*="pp-prism"] {
  margin: 0;
  padding: 0;
  border: none;
}

.pp-prism-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 6, 4, .94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0.5rem 0.2px 18px;
  overflow: hidden;
  --pp-radius: 200px;
}
.pp-prism-viewer[hidden] { display: none; }

.pp-prism-close {
  display: none;
}

/* Botão fechar dentro da face — visível em todos os modos */
.pp-prism-face-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background .2s;
}
.pp-prism-face-close:hover,
.pp-prism-face-close:focus-visible { background: rgba(255,255,255,.18); }

.pp-prism-meta {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  max-width: min(70vw, 320px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  pointer-events: none;
}
.pp-prism-meta[hidden] { display: none; }
.pp-prism-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  flex: 0 0 auto;
}
.pp-prism-meta-text {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pp-prism-name,
.pp-prism-likes {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-prism-name {
  font-size: .82rem;
  line-height: 1.1;
}
.pp-prism-likes {
  color: rgba(255,255,255,.74);
  font-size: .7rem;
  line-height: 1.1;
}

.pp-prism-stage {
  position: relative;
  width: min(90vw, 500px);
  height: min(85vh, calc(min(86vw, 500px) * 1.2 + 30vh - 50px));
  margin-top: 0;
  perspective: 2400px;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.pp-prism-stage:active { cursor: grabbing; }

.pp-prism-reactions {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.portfolio-viewer__reactions {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.pp-prism-float {
  position: absolute;
  left: 50%;
  bottom: calc(18px + (var(--pp-prism-float-stack, 0) * 10px));
  max-width: min(82%, 340px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  transform: translateX(-50%);
  animation: pp-prism-float-up 2.4s ease-out forwards;
  text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.7);
  pointer-events: none;
}
.pp-prism-float--emoji {
  justify-content: center;
  max-width: 72px;
  font-size: 2rem;
  opacity: .38;
  animation: pp-prism-emoji-burst 3.2s ease-out forwards;
  filter: drop-shadow(0 0 12px rgba(255,214,102,.42));
}
.pp-prism-float--like {
  justify-content: center;
  max-width: 72px;
  font-size: 1.85rem;
  animation: pp-prism-like-rise 4.2s linear forwards;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.pp-prism-float__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.7);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
.pp-prism-float__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-prism-float__nome {
  font-size: .75rem;
  font-weight: 800;
  opacity: .9;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.pp-prism-float__texto {
  font-size: .9rem;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}

.pp-prism-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-prism-cube--drag { transition: none; }

.pp-prism-face {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background: #0d0a08;
  box-shadow: 0 18px 38px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  opacity: .92;
  filter: brightness(.86);
  transition: opacity .35s ease, filter .35s ease;
}
.pp-prism-face[data-face="0"] {
  opacity: 1;
  filter: brightness(1);
}

.pp-prism-media {
  position: absolute;
  inset: 0;
}
.pp-prism-media > img,
.pp-prism-media > video {
  width: 100%; height: 100%; display: block;
}
.pp-prism-media > img   { object-fit: cover; }
.pp-prism-media > video { object-fit: cover; }

/* Overlay rotativo dentro de cada face — identidade (esquerda) + like (direita) */
.pp-prism-face-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
  pointer-events: none;
}
.pp-prism-face-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  pointer-events: none;
}
.pp-prism-face-id-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,.5);
  flex: 0 0 auto;
}
.pp-prism-face-id-name {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.pp-prism-face-like-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .2s;
  flex: 0 0 auto;
  pointer-events: auto;
}
.pp-prism-face-like-btn:hover { background: rgba(255,255,255,.15); }
.pp-prism-face-like-btn.is-liked { color: #ff6b8a; border-color: #ff6b8a; }
.pp-prism-face-like-btn[hidden] { display: none; }
.pp-prism-face-like-icon { font-size: 1.1rem; line-height: 1; }
.pp-prism-face-like-count { font-size: .7rem; font-weight: 700; line-height: 1; }

.pp-prism-title {
  color: #f5efe6;
  font-size: .92rem;
  font-weight: 600;
  text-align: center;
  margin: 0;
  max-width: 90vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* Barra de progresso dentro de cada face — gira/arrasta junto com a mídia */
.pp-prism-progress {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  pointer-events: none;
}
.pp-prism-progress[hidden] { display: none; }
.pp-prism-progress-dash {
  flex: 0 1 1rem;
  min-width: 2px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.3s;
}
.pp-prism-progress-dash.is-active {
  background: rgba(255, 255, 255, 0.92);
}
.pp-prism-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.pp-prism-public-actions {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 5;
  transform: translateX(-50%);
  width: min(92vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
}
.pp-prism-public-actions[hidden] { display: none; }
.pp-prism-public-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.pp-prism-message-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
  max-width: 54vw;
  flex-shrink: 0;
}
.pp-prism-message-input {
  width: 100%;
  max-width: 54vw;
  height: 36px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 0 36px 0 12px;
  outline: none;
}
.pp-prism-message-send {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.pp-prism-message-send:hover { background: rgba(255,255,255,.32); }
.pp-prism-message-send:disabled { opacity: .4; cursor: default; }
.pp-prism-public-like,
.pp-prism-public-emoji {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
}
.pp-prism-public-like.is-liked {
  color: #ff6b8a;
}

@keyframes pp-prism-float-up {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.94); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -260px) scale(1.06); }
}
@keyframes pp-prism-emoji-burst {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.74) rotate(-4deg); }
  16% { opacity: .42; transform: translate(calc(-50% - 12px), -44px) scale(1.08) rotate(5deg); }
  38% { opacity: .34; transform: translate(calc(-50% + 16px), -112px) scale(.96) rotate(-6deg); }
  70% { opacity: .24; transform: translate(calc(-50% - 8px), -196px) scale(1.12) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -300px) scale(.82) rotate(-8deg); }
}
@keyframes pp-prism-like-rise {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.9); }
  12% { opacity: .95; }
  78% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -340px) scale(1.02); }
}

@media (max-width: 480px) {
  .pp-prism-stage { width: min(90vw, 500px); perspective: 2400px; }
  .pp-prism-face-id-name { max-width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-prism-cube {
    transition: opacity .25s ease;
    transform: none !important;
  }
  .pp-prism-face {
    transform: none !important;
    opacity: 0;
  }
  .pp-prism-face[data-face="0"] { opacity: 1; }
  .pp-prism-float {
    animation: none;
    opacity: 1;
  }
}
.pci-ben-icon {
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.pci-clausula-rodape {
  font-size: .71rem;
  color: var(--text-2, #a08060);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.bfm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold, #D4AF37);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a0f00;
  flex-shrink: 0;
}
.bfm-nome {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.bfm-periodo-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0;
}
.bfm-fechar {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 8px;
  transition: background .15s;
}
.bfm-fechar:hover { background: rgba(0,0,0,.06); }

.bfm-total-wrap {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.bfm-total-label {
  font-size: .75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 2px;
}
.bfm-total-valor {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold, #D4AF37);
  margin: 0;
}
.bfm-skeleton-line {
  background: linear-gradient(90deg,
    var(--card2, #f0e8dc) 25%,
    var(--card, #fff9f0) 50%,
    var(--card2, #f0e8dc) 75%
  );
  background-size: 200% 100%;
  animation: finSkeleton 1.4s infinite;
  color: transparent !important;
  border-radius: 8px;
  min-width: 80px;
  display: inline-block;
}

.bfm-lista-wrap {
  flex: 1;
  overflow-y: auto;
}
.bfm-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bfm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,.06));
}
.bfm-item--vazio {
  justify-content: center;
  color: var(--text-muted);
  font-size: .88rem;
  padding: 40px 18px;
}
.bfm-item--skel { gap: 0; }
.bfm-skel-line {
  flex: 1;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--card2, #f0e8dc) 25%,
    var(--card, #fff9f0) 50%,
    var(--card2, #f0e8dc) 75%
  );
  background-size: 200% 100%;
  animation: finSkeleton 1.4s infinite;
}
.bfm-skel-val {
  width: 60px;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--card2, #f0e8dc) 25%,
    var(--card, #fff9f0) 50%,
    var(--card2, #f0e8dc) 75%
  );
  background-size: 200% 100%;
  animation: finSkeleton 1.4s infinite;
}
.bfm-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bfm-item-cliente {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
}
.bfm-item-data {
  font-size: .75rem;
  color: var(--text-muted);
}
.bfm-item-valores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.bfm-item-valor {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.bfm-item-metodo {
  font-size: .72rem;
  color: var(--text-muted);
}

/* ================================================================
   FinalizarCorteModal — Método de pagamento
================================================================ */
.fcm-pagamento-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 600;
}
.fcm-metodos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.fcm-metodo {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 4px;
  border-radius: 12px;
  border: 1.5px solid var(--border-soft, rgba(212,175,55,.2));
  background: transparent;
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  transition: all .18s;
}
.fcm-metodo:hover {
  border-color: var(--gold, #D4AF37);
  color: var(--text);
}
.fcm-metodo--ativo {
  background: var(--gold, #D4AF37);
  color: #1a0f00;
  border-color: var(--gold, #D4AF37);
  font-weight: 700;
}
.fcm-metodo--sem-corte {
  grid-column: 1 / -1;
}
.fcm-metodo--sem-corte.fcm-metodo--ativo {
  background: rgba(224, 82, 82, .12);
  color: var(--danger, #E05252);
  border-color: rgba(224, 82, 82, .55);
}
.fcm-metodo-icone { font-size: 1.3rem; }
.fcm-metodo-label { font-size: .77rem; font-weight: 600; }

/* Professional document guard */
.pdoc-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, .72);
  backdrop-filter: blur(10px);
}

.pdoc-modal-open { overflow: hidden; }

.pdoc-modal__card {
  width: min(100%, 390px);
  border: 1px solid rgba(212, 175, 55, .24);
  border-radius: 8px;
  padding: 22px;
  background: #111827;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

.pdoc-modal__title {
  margin: 0 0 10px;
  color: #f9fafb;
  font: 800 1.28rem/1.2 Arial, Helvetica, sans-serif;
}

.pdoc-modal__text {
  margin: 0 0 18px;
  color: #d1d5db;
  font-size: .94rem;
  line-height: 1.45;
}

.pdoc-modal__label {
  display: grid;
  gap: 8px;
  color: #f9fafb;
  font-weight: 700;
}

.pdoc-modal__input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(212, 175, 55, .36);
  border-radius: 8px;
  padding: 0 12px;
  background: #0b1120;
  color: #ffffff;
  font: 700 1rem/1 Arial, Helvetica, sans-serif;
}

.pdoc-modal__input:focus {
  outline: 2px solid rgba(212, 175, 55, .42);
  outline-offset: 2px;
}

.pdoc-modal__erro {
  min-height: 20px;
  margin: 10px 0 14px;
  color: #fca5a5;
  font-size: .88rem;
}

.pdoc-modal__btn { margin-top: 2px; }