/* ════════════════════════════════════════════════════════════
   Freedom — app-compat.css
   Classes geradas pelo JS (app.js / app_patch.js) que estavam
   em style.css e não foram portadas para freedom.css.
   ════════════════════════════════════════════════════════════ */

/* .spinner — defined later */

/* ── EMPTY STATE ────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--tx3, #AAAAAA);
}

.empty-icon { font-size: 56px; margin-bottom: 12px; }

.empty-title { font-size: 18px; font-weight: 800; color: var(--tx, #FFFFFF); margin-bottom: 6px; }

.empty-sub { font-size: 14px; }

/* .notif-titulo — defined later */

/* .notif-msg — defined later */

/* Service grid — 4 colunas, tiles grandes e tocáveis */
/* service-grid: defined later in this file with correct values */

/* .qdchip — defined later */

/* ── MODAL SUCESSO ───────────────────────────────────── */
/* .modal-overlay — defined later */

.modal-box {
  background: #1C1C1C;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  padding: 0;
  width: 100%; max-width: 480px;
  position: relative;
  animation: slideUp 0.28s cubic-bezier(0.32,0.72,0,1) both;
  max-height: 92dvh;
  overflow-y: auto;
}
.modal-box::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.15);
  margin: 10px auto 0;
}

.modal-title { font-size: 17px !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; line-height: 1.2; flex: 1; min-width: 0; }

.modal-close-x {
  margin-left: auto;
  background: rgba(255,255,255,.07) !important;
  border: none !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #888 !important;
}

/* ── CARD PEDIDO v3 (prestador) ──────────────────────── */
.pedido-card-v3 {
  background: var(--surface, #1A1A1A);
  border-radius: var(--r, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08));
  margin-bottom: 12px;
  border: 1.5px solid var(--bd, rgba(255,255,255,0.08));
  transition: box-shadow .2s ease;
}

/* ═══════════════════════════════════════════════════════
   pcv3 — Card de pedido para o prestador (versão unificada)
   ═══════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────── */
.pcv3-card {
  background: #1A1A1A;
  border-radius: 16px;
  overflow: visible;
  margin: 0 16px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s, box-shadow .15s;
  clip-path: none;
}
.pcv3-card { overflow: hidden; border-radius: 16px; }
.pcv3-card:active { transform: scale(.985); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pcv3-card.pcv3-novo {
  border-color: #1A9EFF;
  border-width: 2px;
  animation: pulse-border 2.5s ease-in-out infinite;
}

/* ── Header: emoji | tipo+num | tempo ──────────────────── */
.pcv3-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-width: 0;
}

.pcv3-emoji-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(26,158,255,0.1);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  border: 1px solid rgba(26,158,255,0.18);
}

/* Coluna central: nome do serviço + número */
.pcv3-tipo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.pcv3-nome {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcv3-num {
  font-size: 11px;
  font-weight: 600;
  color: #AAAAAA;
  letter-spacing: .03em;
}

/* Tempo — canto direito */
.pcv3-tempo {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #AAAAAA;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  padding: 4px 9px;
  border-radius: 99px;
  flex-shrink: 0;
  align-self: flex-start;
}
.pcv3-tempo.recente {
  background: rgba(0,196,140,0.12);
  color: #00C48C;
}

/* Coluna direita do header (geo card): badge dist + tempo empilhados */
.pcv3-tempo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Body: descrição + meta ────────────────────────────── */
.pcv3-body {
  padding: 10px 14px 12px;
}
.pcv3-desc {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta-info (endereço, localidade) */
.pcv3-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.pcv3-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #AAAAAA;
  font-weight: 500;
}
.pcv3-meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Footer: botão interesse ───────────────────────────── */
.pcv3-aceitar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  margin: 0 !important;
  padding: 15px 16px !important;
  background: #00C48C !important;
  color: #000 !important;
  border: none !important;
  border-top: 1px solid rgba(0,196,140,0.2) !important;
  border-radius: 0 !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none !important;
  transition: opacity .15s, transform .12s;
  min-height: 50px;
  letter-spacing: -0.1px;
  box-sizing: border-box;
}
.pcv3-aceitar:active { opacity: .88; transform: scale(.97); }

/* ── CARD PEDIDO CLIENTE v3 ──────────────────────────── */
.pedido-card-cliente {
  background: #1A1A1A;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
  margin-bottom: 12px;
  transition: transform .15s, box-shadow .15s;
  animation: pcc-enter 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.pedido-card-cliente:active {
  transform: scale(.985);
}

@keyframes pcc-enter {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Borda esquerda colorida por status */
.pedido-card-cliente[data-status="aguardando_interessados"] { border-left: 3px solid #F59E0B; }
.pedido-card-cliente[data-status="prestador_selecionado"]   { border-left: 3px solid #F59E0B; }
.pedido-card-cliente[data-status="aguardando_pagamento"]    { border-left: 3px solid #F59E0B; }
.pedido-card-cliente[data-status="contratado"]              { border-left: 3px solid #3B82F6; }
.pedido-card-cliente[data-status="em_andamento"]            { border-left: 3px solid #00C9B8; }
.pedido-card-cliente[data-status="reagendamento_pendente"]  { border-left: 3px solid #A78BFA; }
.pedido-card-cliente[data-status="aguardando_confirmacao"]  { border-left: 3px solid #10B981; }
.pedido-card-cliente[data-status="finalizado"]              { border-left: 3px solid #6B7280; }
.pedido-card-cliente[data-status="cancelado_cliente"],
.pedido-card-cliente[data-status="cancelado_prestador"]     { border-left: 3px solid #EF4444; }
.pedido-card-cliente[data-status="expirado"]                { border-left: 3px solid #6B7280; }

/* ── Header ── */
.pcc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 10px;
  gap: 10px;
}
.pcc-header-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.pcc-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
  user-select: none;
}
.pcc-tipo {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  word-break: break-word;
}
.pcc-time {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
}
.pcc-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* Badge alinhado ao topo quando título é grande */
.pcc-header > .badge {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  white-space: nowrap;
}

/* ── Agendamento wrap ── */
.pcc-agend-wrap {
  padding: 0 16px 10px;
}

/* ── Body ── */
.pcc-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcc-desc {
  font-size: 13px;
  color: #AAAAAA;
  line-height: 1.5;
}
.pcc-local {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #888;
  text-decoration: none;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  transition: background .15s;
}
.pcc-local:hover { background: rgba(255,255,255,.06); }
.pcc-local span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Prestador box ── */
.pcc-prestador-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px;
}
.pcc-prest-label {
  font-size: 10px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.pcc-prest-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pcc-prest-foto {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pcc-prest-foto-init {
  background: rgba(0,201,184,.15);
  color: #00C9B8;
  font-size: 15px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pcc-prest-nome {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

/* ── Footer ── */
.pcc-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 14px;
}

/* ── Botões ── */
.pcc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
  text-align: center;
}
.pcc-btn:active { transform: scale(.97); opacity: .85; }

/* ── Badge de status SVG ── */
.pcc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill, 9999px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pcc-status-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* aguardando_interessados — âmbar pulsante */
.pcc-status-badge.aguardando_interessados {
  background: var(--amber-lt, rgba(245,158,11,0.10));
  color: var(--amber-dk, #D97706);
  border: 1px solid rgba(245,158,11,0.20);
  animation: badge-pulse-amber 2.5s ease-in-out infinite;
}
@keyframes badge-pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.18); }
  50%       { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
}

/* em_andamento — azul */
.pcc-status-badge.em_andamento {
  background: rgba(26,158,255,0.12);
  color: #1A9EFF;
  border: 1px solid rgba(26,158,255,0.20);
}

/* confirmado — verde */
.pcc-status-badge.confirmado {
  background: rgba(0,196,140,0.12);
  color: #00C48C;
  border: 1px solid rgba(0,196,140,0.20);
}

/* concluido — verde escuro */
.pcc-status-badge.concluido {
  background: rgba(0,196,140,0.12);
  color: #00C48C;
  border: 1px solid rgba(0,196,140,0.20);
}

/* cancelado — vermelho */
.pcc-status-badge.cancelado {
  background: rgba(239,68,68,0.10);
  color: #F87171;
  border: 1px solid rgba(239,68,68,0.20);
}



.pcc-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }

.pcc-tipo { font-size: 15px; font-weight: 800; }

.pcc-body { padding: 8px 16px 14px; }

.pcc-desc { font-size: 13px; color: #AAAAAA; margin-bottom: 6px; }

.pcc-local { font-size: 12px; color: #AAAAAA; display: flex; align-items: center; gap: 4px; }

.pcc-prestador {
  margin-top: 10px; padding: 10px 12px;
  background: #242424;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm, 10px);
}

.pcc-prest-name { font-size: 14px; font-weight: 800; color: #FFFFFF; }

.pcc-prest-action {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
}

.pcc-time { font-size: 11px; color: #AAAAAA; font-weight: 600; padding: 2px 16px 6px; margin-top: 0; }

/* ── STEPPER DE STATUS ANTIGO — substituído pela mc-timeline em freedom-status-flow.css ── */
/* Os blocos .status-progress e .sp-step abaixo são mantidos para não quebrar
   referências legadas, mas estão ocultos. A nova timeline usa .mc-timeline. */

/* Container principal */
.status-progress {
  display: none !important;
}

.status-progress::before,
.status-progress::after { content: none; }

/* Cabeçalho: título + contador */
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2, #AAAAAA);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sp-title svg {
  width: 14px;
  height: 14px;
  stroke: var(--pr, #00C9B8);
  flex-shrink: 0;
}

.sp-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--pr, #00C9B8);
  background: rgba(0,201,184,.12);
  border-radius: 99px;
  padding: 2px 8px;
}

/* Wrapper dos dots — scroll horizontal se necessário */
.sp-dots {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-dots::-webkit-scrollbar { display: none; }

/* Descrição contextual da etapa atual */
.sp-desc {
  margin-top: 12px;
  padding: 9px 12px;
  background: rgba(0,201,184,.12);
  border-left: 3px solid var(--pr, #00C9B8);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx2, #AAAAAA);
  line-height: 1.5;
}

/* Step */
.sp-step {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 2;
  animation: sp-enter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sp-step:nth-child(1) { animation-delay:   0ms; }
.sp-step:nth-child(2) { animation-delay:  55ms; }
.sp-step:nth-child(3) { animation-delay: 110ms; }
.sp-step:nth-child(4) { animation-delay: 165ms; }
.sp-step:nth-child(5) { animation-delay: 220ms; }
.sp-step:nth-child(6) { animation-delay: 275ms; }

@keyframes sp-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Label do step */
.sp-step-label {
  font-size: 10px;
  font-weight: 500;
  color: #666666;
  text-align: center;
  line-height: 1.3;
  max-width: 58px;
  transition: color 0.3s ease, font-weight 0.2s ease;
}

/* Dot (círculo do ícone) */
.sp-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 2px solid var(--bd, rgba(255,255,255,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.12);
  position: relative;
  z-index: 2;
  transition:
    background   0.30s ease,
    border-color 0.30s ease,
    color        0.30s ease,
    transform    0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   0.30s ease;
  box-sizing: border-box;
}

/* SVG dentro do dot */
.sp-step-dot svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  transition: stroke 0.25s ease;
}

/* Labels e spans do step (suporta <span> gerado pelo JS) */
.sp-step span {
  font-size: 10px;
  font-weight: 500;
  color: #666666;
  text-align: center;
  line-height: 1.3;
  max-width: 58px;
  transition: color 0.3s ease, font-weight 0.2s ease;
}

/* ── Estado: CONCLUÍDO ── */
.sp-step.done .sp-step-dot {
  background: var(--green, #10B981);
  border-color: var(--green, #10B981);
  color: #fff;
  transform: scale(1.05);
}
.sp-step.done .sp-step-dot svg { display: none; }
.sp-step.done .sp-step-dot::after {
  content: '';
  display: block;
  width: 7px;
  height: 11px;
  border: 2.5px solid #1A1A1A;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1.5px);
  border-radius: 1px;
}
.sp-step.done span,
.sp-step.done .sp-step-label { color: var(--green-dk, #059669); font-weight: 600; }

/* ── Estado: ATIVO — suporta "current" (JS) e "active" (legado) ── */
.sp-step.current .sp-step-dot,
.sp-step.active  .sp-step-dot {
  background: var(--pr, #00C9B8);
  border-color: var(--pr, #00C9B8);
  color: #fff;
  transform: scale(1.14);
  animation: sp-pulse 2.2s ease-in-out infinite;
}
.sp-step.current .sp-step-dot svg,
.sp-step.active  .sp-step-dot svg { stroke: #fff; }
.sp-step.current span,
.sp-step.active  span,
.sp-step.current .sp-step-label,
.sp-step.active  .sp-step-label { color: var(--pr, #00C9B8); font-weight: 700; }

@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
}



.rating-bar-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #78716C; margin-bottom: 5px;
}

.rating-bar-track {
  flex: 1; height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden;
}

.rating-bar-fill {
  height: 100%; background: linear-gradient(90deg, #F59E0B, #D97706);
  border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Star picker ── */
.rv-star-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 8px;
}

/* ── Review card (lista) ── */
.rv-card {
  background: var(--card-bg,#1A1A1A);
  border: 1px solid var(--bd, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}

.rv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rv-card-nome  { font-size: 13px; font-weight: 700; color: var(--tx, #FFFFFF); }

.rv-card-stars { font-size: 15px; letter-spacing: 1px; }

.rv-card-cmt   { font-size: 13px; color: var(--tx3, #AAAAAA); font-style: italic; margin-bottom: 6px; line-height: 1.5; }

.rv-card-data  { font-size: 11px; color: #666666; }

.rv-empty { text-align:center; color:var(--tx3, #AAAAAA); font-size:13px; padding:20px 0; }

.reviews { display:flex; flex-direction:column; gap:0; }

.rv-media {
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.20);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.rv-avg-num   { font-size: 48px; font-weight: 900; line-height: 1; }

.rv-avg-stars { font-size: 22px; margin: 4px 0; }

.rv-avg-total { font-size: 12px; color: var(--tx3, #AAAAAA); margin-bottom: 12px; }

.rv-bars { display:flex; flex-direction:column; gap:6px; }

.rv-bar-row {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 8px;
}

.rv-bar-n, .rv-bar-cnt { font-size: 11px; color: var(--tx3, #AAAAAA); text-align:right; }

.rv-bar-track {
  height: 6px;
  background: #000000;
  border-radius: 4px;
  overflow: hidden;
}

.rv-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

.rv-badge-total { color: var(--tx3, #AAAAAA); font-weight: 400; }

.rv-badge-new   { color: #666666; font-size: 12px; font-weight: 500; }

/* ── Botão já avaliado ── */
.rv-avaliado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #059669;
}

/* ══════════════════════════════════════════════════
   FINANCEIRO — transparência de valores
   ══════════════════════════════════════════════════ */

/* ── Cliente: preço simples ── */
.fin-cliente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0;
}

.fin-cliente .fin-label-sm {
  font-size: 12px;
  color: #888;
  font-weight: 600;
}

.fin-total {
  font-size: 20px;
  font-weight: 900;
  color: #00C9B8;
  letter-spacing: -.5px;
}

.fin-selos { display: none; } /* removido */

/* ── Prestador: breakdown completo ── */
.fin-prestador {
  background: #242424;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm, 10px);
  padding: 10px 12px;
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}

.fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 8px;
  min-width: 0;
}

.fin-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fin-val   { flex-shrink: 0; white-space: nowrap; }

.fin-row-liquido {
  border-top: 1px solid var(--bd, rgba(255,255,255,0.08));
  padding-top: 6px;
  margin-top: 2px;
}

.fin-liquido {
  font-size: 16px;
  font-weight: 900;
  color: #00C48C;
}

/* fallback pedidos antigos sem financeiro */
.fin-fallback .fin-base {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

/* ── Aviso de horário agendado no card do prestador ── */
.pcc-agend-aviso {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #F59E0B;
  margin-bottom: 8px;
}

.pcc-agend-falta {
  font-size: 12px;
  font-weight: 400;
  color: #D97706;
}

/* ── Frete / Deslocamento ── */
.fin-row-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.fin-label-sm { color: #AAAAAA; font-size: 12px; }

.fin-frete-row { color: #F59E0B; }

.fin-frete-val { font-weight: 700; color: #F59E0B; }

.fin-total-row { border-top: 1px solid var(--bd, rgba(255,255,255,0.08)); margin-top: 4px; padding-top: 4px; }

.fin-selos-sm  { font-size: 11px; display: block; margin-top: 4px; }

.fin-frete-positivo { color: #00C48C; font-weight: 700; }

.fin-frete-gratis   { color: var(--tx3, #AAAAAA); font-size: 12px; font-style: italic; }

.metric-card {
  background: var(--surface, #1A1A1A);
  border: 1px solid var(--bd, rgba(255,255,255,0.08));
  border-radius: var(--r, 14px);
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.metric-card.metric-green  { border-top: 3px solid var(--green, #10B981); }

.metric-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--tx, #FFFFFF);
  line-height: 1.1;
}

.metric-label {
  font-size: 11px;
  color: var(--tx3, #AAAAAA);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Categoria group ── */
.admin-cat-group { margin-bottom: 8px; }

.admin-cat-header {
  font-size: 12px;
  font-weight: 800;
  color: var(--tx3, #AAAAAA);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-cat-count {
  background: var(--bd, rgba(255,255,255,0.08));
  color: var(--tx3, #AAAAAA);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Serviço card ── */
.admin-svc-card {
  background: var(--surface, #1A1A1A);
  border: 1px solid var(--bd, rgba(255,255,255,0.08));
  border-left: 4px solid var(--green, #10B981);
  border-radius: var(--r-sm, 10px);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.admin-svc-inativo {
  border-left-color: rgba(255,255,255,0.12);
  opacity: 0.7;
}

.admin-svc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.admin-svc-nome {
  font-weight: 800;
  font-size: 15px;
  color: var(--tx, #FFFFFF);
  flex: 1;
}

.admin-svc-desc {
  font-size: 12px;
  color: var(--tx3, #AAAAAA);
  margin-bottom: 8px;
  line-height: 1.4;
}

.admin-svc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-preco-total {
  font-size: 17px;
  font-weight: 900;
  color: var(--tx, #FFFFFF);
}

.admin-preco-liq {
  font-size: 11px;
  color: var(--green, #10B981);
  font-weight: 700;
  display: block;
}

.admin-svc-preco { line-height: 1.3; }

.admin-svc-dur { font-size: 12px; color: var(--tx3, #AAAAAA); font-weight: 600; }

/* ── Status badges admin ── */
.admin-badge-ativo {
  background: #ECFDF5; color: var(--green, #10B981);
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid #BBF7D0;
  white-space: nowrap; flex-shrink: 0;
}

.admin-badge-inativo {
  background: #000000; color: #AAAAAA;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap; flex-shrink: 0;
}

/* ── Ações serviço ── */
.admin-svc-actions { display: flex; gap: 8px; }

.admin-btn-edit   { background: rgba(75,110,245,0.10); color: #2563EB; border: 1px solid rgba(75,110,245,0.25); }

.admin-btn-desat  { background:rgba(239,68,68,0.10); color: #EF4444; border: 1px solid #FECACA; }

.admin-btn-ativar { background: #ECFDF5; color: var(--green, #10B981); border: 1px solid #BBF7D0; }

/* ── Modal admin ── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Usuários ── */
.admin-total-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx3, #AAAAAA);
  padding: 4px 0 10px;
}

.admin-user-list { display: flex; flex-direction: column; gap: 8px; }

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #1A1A1A);
  border: 1px solid var(--bd, rgba(255,255,255,0.08));
  border-radius: var(--r-sm, 10px);
  padding: 10px 12px;
}

.admin-user-avatar {
  width: 36px; height: 36px;
  background: rgba(0,201,184,.12);
  color: var(--pr, #00C9B8);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
  flex-shrink: 0;
}

.admin-user-info { flex: 1; min-width: 0; }

.admin-user-nome  { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; }

.admin-user-email { font-size: 12px; color: var(--tx3, #AAAAAA); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-user-tipo  { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; }

.tipo-cliente    { background: rgba(99,102,241,0.10); color: #4F46E5; }

.tipo-prestador  { background: #ECFDF5; color: var(--green, #10B981); }

.admin-badge-mini {
  background: rgba(0,201,184,.12);
  color: var(--pr, #00C9B8);
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ── Preço no modal de sucesso (pós-criação) ── */
.msucc-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,201,184,.12);
  border: 1.5px solid rgba(0,201,184,.3);
  border-radius: var(--r-sm, 10px);
  padding: 12px 16px;
  margin: 12px 0;
  gap: 4px;
}

.msucc-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pr, #00C9B8);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.msucc-valor {
  font-size: 28px;
  font-weight: 900;
  color: var(--tx, #FFFFFF);
  line-height: 1;
}

.msucc-selos {
  font-size: 11px;
  color: var(--green, #10B981);
  font-weight: 700;
}

.wizard-preco-box {
  background: rgba(0,201,184,.12);
  border: 2px solid var(--pr, #00C9B8);
  border-radius: var(--r, 14px);
  padding: 16px 20px;
  margin: 0 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(100% - 32px);
  box-sizing: border-box;
}

.wpr-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--pr, #00C9B8);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.wpr-valor {
  font-size: 32px;
  font-weight: 900;
  color: var(--tx, #FFFFFF);
  line-height: 1;
  word-break: break-all;
}

.wpr-duracao {
  font-size: 13px;
  color: var(--tx3, #AAAAAA);
  font-weight: 600;
}

.wpr-selos {
  font-size: 12px;
  font-weight: 700;
  color: var(--green, #10B981);
}

/* ══════════════════════════════════════════════════
   FLUXO 3 ETAPAS — Categorias → Serviços → Formulário
   ══════════════════════════════════════════════════ */

/* Etapa 1: grid de categorias — 2 colunas, tiles maiores */
.service-grid-cat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px 16px 16px;
  width: 100%;
}

.cat-tile {
  padding: 16px 10px 12px;
  border-radius: var(--r, 14px);
  cursor: pointer;
  transition: all .18s;
  overflow: hidden;
  word-break: break-word;
  text-align: center;
}

.cat-tile-count {
  font-size: 11px;
  color: var(--tx3, #AAAAAA);
  margin-top: 4px;
  font-weight: 600;
}

.servico-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #1A1A1A);
  border: 1.5px solid var(--bd, rgba(255,255,255,0.08));
  border-radius: var(--r, 14px);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08));
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.si-left  { flex: 1; min-width: 0; }

.si-nome  { font-size: 14px; font-weight: 800; color: var(--tx, #FFFFFF); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.si-dur   { font-size: 12px; color: var(--tx3, #AAAAAA); margin-top: 2px; }

.si-right { text-align: right; flex-shrink: 0; }

.si-preco {
  font-size: 18px;
  font-weight: 900;
  color: var(--pr, #00C9B8);
  line-height: 1;
  white-space: nowrap;
}

.si-selos {
  font-size: 10px;
  color: var(--green, #10B981);
  font-weight: 700;
  margin-top: 2px;
}

.si-arrow {
  font-size: 22px;
  color: var(--tx3, #AAAAAA);
  font-weight: 300;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   REAGENDAMENTO — Freedom
   ══════════════════════════════════════════════════════════════ */

/* ── Aviso no card do CLIENTE ── */
.pcc-reagend-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(75,110,245,0.10);
  border: 1px solid rgba(75,110,245,0.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1D4ED8;
  font-weight: 600;
  margin: 8px 14px;
}

.pcc-reagend-limite {
  font-size: 12px;
  color: var(--tx3, #AAAAAA);
  text-align: center;
  padding: 4px 0 8px;
}

.pcc-btn-info {
  background: rgba(75,110,245,0.10);
  color: #1D4ED8;
  border: 1.5px solid #93C5FD;
  font-weight: 700;
}

.pcc-btn-info:active { background: #DBEAFE; }

/* ── Aviso no card do PRESTADOR ── */
.pcc-reagend-prest-aviso {
  background: rgba(245,158,11,0.10);
  border: 1.5px solid #FCD34D;
  border-radius: 12px;
  padding: 14px;
  margin: 8px 14px;
}

.prp-titulo {
  font-size: 14px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 4px;
}

.prp-data {
  font-size: 13px;
  color: #78350F;
  margin-bottom: 12px;
}

.prp-acoes {
  display: flex;
  gap: 8px;
}

.prp-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

/* ── Modal de Reagendamento (cliente) ── */
.mreag-box {
  max-width: 420px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 0;
}

.mreag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
  position: sticky;
  top: 0;
  background: var(--surface, #1A1A1A);
  z-index: 1;
  border-radius: 20px 20px 0 0;
}

.mreag-titulo {
  font-size: 17px;
  font-weight: 900;
  margin: 0;
}

.mreag-body {
  padding: 16px 20px 28px;
}

.mreag-atual {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #166534;
  margin-bottom: 16px;
}

.mreag-section {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx3, #AAAAAA);
  margin-bottom: 10px;
  margin-top: 16px;
}

.mreag-dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mreag-dia-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--bd, rgba(255,255,255,0.08));
  background: var(--surface, #1A1A1A);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mreag-horas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mreag-hora-btn {
  padding: 10px 0;
  border-radius: 10px;
  border: 2px solid var(--bd, rgba(255,255,255,0.08));
  background: var(--surface, #1A1A1A);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.mreag-resumo {
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: #166534;
  margin-top: 16px;
  text-align: center;
}

.mreag-pen-aviso {
  background:rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.20);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #92400E;
  margin-top: 10px;
}

.mreag-acoes {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL SAQUE
   ═══════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   MODAL DE SAQUE — Redesign
   ════════════════════════════════════════════════════ */
.saque-box {
  max-width: 400px;
  width: 94vw;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
}

/* Header */
.saque-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.saque-header-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0,201,184,.12);
  color: #00C9B8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.saque-titulo {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.saque-subtitulo {
  font-size: 12px;
  color: #888;
  margin: 2px 0 0;
}
.saque-close {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: none; cursor: pointer;
  color: #888;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.saque-close:active { background: rgba(255,255,255,.13); }

/* Card de saldo */
.saque-saldo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 18px 0;
  padding: 14px 16px;
  background: rgba(0,201,184,.06);
  border: 1px solid rgba(0,201,184,.2);
  border-radius: 14px;
}
.saque-saldo-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.saque-saldo-label {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.saque-saldo-valor {
  font-size: 22px;
  font-weight: 900;
  color: #00C9B8;
  letter-spacing: -.5px;
}

/* Formulário */
.saque-form { padding: 14px 18px 0; }

.saque-campo { margin-bottom: 14px; }

.saque-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Input de valor */
.saque-valor-wrap {
  display: flex;
  align-items: center;
  background: #111;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s;
}
.saque-valor-wrap:focus-within { border-color: rgba(0,201,184,.5); }
.saque-moeda {
  padding: 0 8px 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #555;
  flex-shrink: 0;
}
.saque-input-valor {
  border: none !important;
  background: transparent !important;
  padding: 14px 14px 14px 4px !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  flex: 1; width: 100%;
  outline: none;
}

/* Inputs normais */
.saque-input, .saque-select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 12px;
  font-size: 15px;
  background: #111;
  color: #fff;
  box-sizing: border-box;
  transition: border-color .15s;
  font-family: inherit;
}
.saque-input:focus, .saque-select:focus {
  outline: none;
  border-color: rgba(0,201,184,.5);
}

/* Chips de tipo */
.saque-tipo-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.saque-tipo-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: #111;
  color: #888;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.saque-tipo-btn:active { transform: scale(.95); }
.saque-tipo-btn.active {
  background: rgba(0,201,184,.12);
  border-color: rgba(0,201,184,.4);
  color: #00C9B8;
}

/* Dica e validação */
.saque-chave-dica {
  font-size: 11px;
  color: #555;
  margin-top: 5px;
  line-height: 1.4;
}
.saque-validacao {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  min-height: 0;
  transition: all .2s;
}
.sv-ok     { background: rgba(16,185,129,.1);  color: #34D399; }
.sv-erro   { background: rgba(239,68,68,.1);   color: #FCA5A5; }
.sv-aviso  { background: rgba(245,158,11,.1);  color: #FCD34D; }
.sv-neutro { display: none; }

/* Aviso de titularidade */
.saque-aviso-tit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 10px;
  font-size: 12px;
  color: #FCD34D;
  line-height: 1.55;
  margin-bottom: 4px;
}
.saque-aviso-tit span { display: inline; }
.saque-aviso-tit strong { color: #fff; font-weight: 700; }

/* Revisão manual */
.saque-revisao-wrap {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
}

/* Botões de ação */
.saque-acoes {
  display: flex;
  gap: 10px;
  padding: 16px 18px 18px;
}
.saque-btn-cancelar {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.1);
  color: #888;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.saque-btn-cancelar:active { opacity: .7; }
.saque-btn-confirmar {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: #00C9B8;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
}
.saque-btn-confirmar:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.saque-btn-confirmar:not(:disabled):active { transform: scale(.97); }

/* fin-destaque: destaca o "Você receberá" no card do prestador */
.fin-destaque {
  background: rgba(0,196,140,0.08);
  border: 1px solid rgba(0,196,140,0.15);
  border-radius: 8px;
  padding: 8px 12px !important;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD PRESTADOR — Aguardando pagamento do cliente
   ═══════════════════════════════════════════════════════════════ */
.pcc-aguardando-pag {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(245,158,11,0.10);
  border: 1px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 0;
}

/* [FIX-LOW3] Aviso quando prestador finalizou e cliente precisa confirmar */
.pcc-aviso-confirmar {
  background: var(--color-background-info, rgba(75,110,245,0.10));
  border-left: 3px solid var(--color-border-info, #3B82F6);
  border-radius: 0;
  padding: 10px 12px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-info, #1D4ED8);
  line-height: 1.5;
}

/* [FIX] Avatar do prestador no modal de interessados */
.mi-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid var(--bd, rgba(255,255,255,0.08)); }
.mi-card:last-child { border-bottom: none; }
.mi-avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--color-background-info, rgba(75,110,245,0.10)); display: flex; align-items: center; justify-content: center; }
.mi-avatar-img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.mi-avatar-ini { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,201,184,.12); color: var(--pr, #00C9B8); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mi-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.mi-tag { font-size: 11px; font-weight: 600; color: var(--pr, #00C9B8); background: rgba(0,201,184,.12); border-radius: 6px; padding: 2px 7px; }
.mi-local { font-size: 11px; color: var(--tx3, #AAAAAA); display: flex; align-items: center; gap: 2px; }
.mi-media { font-size: 13px; font-weight: 700; }
.mi-btn-contratar { width: 100%; margin-top: 10px; justify-content: center; }

/* ── Box informativo de titularidade — legacy (substituído) ── */
.saque-info-box, .sib-icon, .sib-texto, .sib-titulo, .sib-desc,
.sib-aviso, .saque-saldo-hint { display: none; }

/* saque-campo, valor-wrap, moeda, tipo — já definidos acima */

/* ── Classes não encontradas no style.css antigo — definidas aqui ── */

.pvc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pvc-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mc-pulse-loader {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 40px 24px;
}
.mc-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pr, #00C9B8);
  animation: mc-pulse 1.2s ease-in-out infinite;
}
.mc-pulse-dot:nth-child(2) { animation-delay: .2s; }
.mc-pulse-dot:nth-child(3) { animation-delay: .4s; }
@keyframes mc-pulse {
  0%, 80%, 100% { transform: scale(.8); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1;  }
}

/* Modal overlay genérico */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow-y: auto;
  animation: overlay-in .2s ease both;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Spinner genérico */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
  opacity: .85;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   PATCH: Layout dos cards de pedido do prestador (pvc-*)
   Estas classes são geradas pelo JS mas não existiam no CSS antigo.
   ════════════════════════════════════════════════════════════════ */

/* Container da lista */
#lista-disponiveis,
#lista-aceitos {
  padding: 12px 0 16px;
}

/* Card base — adiciona padding interno que estava faltando */
.pedido-card-v3 {
  padding: 0;               /* reset — o padding fica nas sub-seções */
  margin-bottom: 12px;
}

/* Header do card */
.pvc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
}

.pvc-emoji {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.pvc-tipo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx, #FFFFFF);
  flex: 1;
  min-width: 0;
}

.pvc-when {
  font-size: 12px;
  color: var(--tx4, #666666);
  white-space: nowrap;
  background: var(--bg, #000000);
  padding: 3px 8px;
  border-radius: 99px;
}

/* Body do card */
.pvc-body {
  padding: 12px 16px;
}

.pvc-desc {
  font-size: 14px;
  color: var(--tx2, #AAAAAA);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pvc-end {
  font-size: 13px;
  color: var(--tx3, #AAAAAA);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pvc-cliente {
  font-size: 13px;
  color: var(--tx3, #AAAAAA);
  margin-bottom: 6px;
}

.pvc-preco {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx, #FFFFFF);
  margin-top: 8px;
}

/* Footer com botões */
.pvc-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 14px;
}

/* Botões do card do prestador */
.pvc-btn {
  flex: 1;
  min-width: 120px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
  text-align: center;
}

.pvc-btn:active { transform: scale(0.97); opacity: .85; }

.pvc-btn-aceitar {
  background: var(--pr, #00C9B8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,201,184,.25);
}

.pvc-btn-ja {
  background: var(--green-lt, #ECFDF5);
  color: var(--green-dk, #059669);
  border: 1.5px solid #A7F3D0;
}

.pvc-btn-cancelar {
  background: rgba(239,68,68,0.10);
  color: var(--red-dk, #DC2626);
  border: 1.5px solid #FECACA;
}

/* Card destaque — novo pedido */
.pvc-novo {
  border-color: var(--pr, #00C9B8);
  border-width: 2px;
  animation: pulse-border 2.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--pr, #00C9B8); }
  50%       { border-color: rgba(0,201,184,.12); }
}

/* Interesse demonstrado (badge verde no fundo do card) */
.pvc-ja-banner {
  background: var(--green-lt, #ECFDF5);
  color: var(--green-dk, #059669);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
  border-top: 1px solid #A7F3D0;
}

/* ── Ajuste do Hero do prestador ────────────────────────────────── */
.prest-hero {
  padding-left: 16px;
  padding-right: 16px;
}

/* ── Ajuste página cliente ──────────────────────────────────────── */
#lista-meus-pedidos {
  padding: 12px 16px 0;
}

/* ── Corrige "endereço não georef." e "788min" no pvc-when ──────── 
   Esses dados vêm do backend com campos crus — o CSS não pode
   corrigir dados mas pode ao menos esconder overflow 
──────────────────────────────────────────────────────────────── */
.pvc-when {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════
   PATCH 2: Profile sections, notif panel, form controls
   ════════════════════════════════════════════════════════════════ */

/* ── Profile header ──────────────────────────────────────────────────── */
.profile-header-simple {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  background: var(--surface, #1A1A1A);
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
}
.profile-name-block { flex: 1; min-width: 0; }
.profile-name { font-size: 18px; font-weight: 800; color: var(--tx, #FFFFFF); }
.profile-role-tag { font-size: 12px; color: var(--tx3, #AAAAAA); margin-top: 2px; }

/* ── Stats row ───────────────────────────────────────────────────────── */
.profile-stats-row {
  display: flex;
  background: var(--surface, #1A1A1A);
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
  margin-bottom: 4px;
}
.pstat-item { flex: 1; text-align: center; padding: 14px 8px; }
.pstat-num  { font-size: 20px; font-weight: 800; color: var(--tx, #FFFFFF); }
.pstat-lbl  { font-size: 10px; color: var(--tx3, #AAAAAA); margin-top: 3px; font-weight: 600; text-transform: uppercase; }
.pstat-sep  { width: 1px; background: var(--bd, rgba(255,255,255,0.08)); margin: 10px 0; }

/* ── Profile body ────────────────────────────────────────────────────── */
.profile-section-body { padding-bottom: 16px; padding-top: 8px; }
.profile-section-title {
  font-size: 12px; font-weight: 700; color: var(--tx3, #AAAAAA);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 20px 16px 8px;
  display: flex; align-items: center; gap: 5px;
}
.profile-section-title svg { color: var(--or, #00C9B8); opacity: .8; flex-shrink: 0; }
.profile-card-block {
  background: var(--surface, #1A1A1A);
  border-radius: var(--r, 14px);
  margin: 0 16px 12px;
  padding: 16px;
  border: 1px solid var(--bd, rgba(255,255,255,0.07));
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.pf-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
  font-size: 14px;
}
.pf-row:last-child { border-bottom: none; }
.pf-lbl { color: var(--tx3, #AAAAAA); }
.pf-val { color: var(--tx, #FFFFFF); font-weight: 500; }
.profile-action-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; padding: 13px 0;
  font-size: 15px; font-weight: 500; color: var(--tx, #FFFFFF);
  font-family: inherit; cursor: pointer;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
}
.profile-action-btn span:first-child { display: flex; align-items: center; gap: 7px; }
.profile-action-btn span:first-child svg { color: var(--or, #00C9B8); }
.profile-action-btn:last-child { border-bottom: none; }
.profile-action-btn:active { background: rgba(255,255,255,0.04); }
.pab-arrow { color: var(--tx4, #666666); font-size: 18px; }

/* Form controls (bridge between old and new) */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--tx3, #AAAAAA); letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 6px;
}
/* .form-control — defined later */
.form-control:focus {
  border-color: var(--pr, #00C9B8);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
textarea/* .form-control — defined later */
select.form-control { cursor: pointer; }

/* Notif panel items (used by renderNotifications) */
.notif-item {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
  cursor: pointer; transition: background .15s;
}
.notif-item:active { background: var(--bg, #000000); }
.notif-item.lida { opacity: .6; }
.notif-icon  { font-size: 22px; flex-shrink: 0; padding-top: 2px; }
.notif-body  { flex: 1; min-width: 0; }
.notif-titulo{ font-size: 14px; font-weight: 700; color: var(--tx, #FFFFFF); }
.notif-msg   { font-size: 13px; color: var(--tx3, #AAAAAA); margin-top: 2px; line-height: 1.4; }
.notif-time  { font-size: 11px; color: var(--tx4, #666666); margin-top: 3px; }
.notif-dot   { width: 8px; height: 8px; background: var(--pr, #00C9B8); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* Tabbar prestador (old classes used by ui-bridge) */
#tabbar-prestador {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 72px; background: var(--surface, #1A1A1A);
  border-top: 1px solid var(--bd, rgba(255,255,255,0.08));
  display: flex; z-index: 200;
}
.tab-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  font-size: 10px; font-weight: 600; color: var(--tx4, #666666);
  position: relative; font-family: inherit;
}
.tab-item .tab-icon { font-size: 20px; line-height: 1; }
.tab-item.active { color: var(--pr, #00C9B8); }

/* Service catalog */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 0 16px 16px;
}
.service-grid-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-tile {
  background: var(--surface, #1A1A1A);
  border-radius: 12px; padding: 14px 10px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  cursor: pointer; border: 1.5px solid transparent;
  transition: all .15s;
  /* [FIX] min-width:0 é essencial em itens de grid flex: sem ele o item
     pode inflar para além da célula, causando overflow e quebra de layout.
     width:100% garante ocupação total da célula sem transbordar. */
  min-width: 0;
  width: 100%;
}
.service-tile:active, .service-tile.selected {
  border-color: var(--pr, #00C9B8);
  background: rgba(0,201,184,0.12);
}
.service-tile-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.service-tile-name {
  font-size: 12px; font-weight: 700;
  color: var(--tx, #FFFFFF); text-align: center; line-height: 1.3;
  word-break: break-word; overflow-wrap: break-word; width: 100%;
}
.cat-tile-count { font-size: 11px; color: var(--tx3, #AAAAAA); }

/* Serviço item (step-servicos list) */
.servico-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface, #1A1A1A); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06); cursor: pointer;
  border: 1.5px solid transparent; transition: all .15s;
}
.servico-item:active, .servico-item.selected {
  border-color: var(--pr, #00C9B8); background: rgba(0,201,184,0.10);
}
.si-left  { flex: 1; min-width: 0; }
.si-right { text-align: right; flex-shrink: 0; }
.si-nome  { font-size: 15px; font-weight: 700; color: var(--tx, #FFFFFF); margin-bottom: 3px; }
.si-dur   { font-size: 12px; color: var(--tx3, #AAAAAA); }
.si-preco { font-size: 16px; font-weight: 800; color: var(--pr, #00C9B8); }
.si-selos { font-size: 10px; color: var(--tx4, #666666); margin-top: 2px; }
.si-arrow { font-size: 20px; color: var(--tx4, #666666); flex-shrink: 0; }

/* Quick description chips */
.qdchip {
  padding: 6px 12px; background: var(--bg, #000000);
  border-radius: 99px; border: 1px solid var(--bd, rgba(255,255,255,0.08));
  font-size: 12px; font-weight: 600; color: var(--tx3, #AAAAAA);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.qdchip:active { background: rgba(0,201,184,.12); border-color: var(--pr, #00C9B8); color: var(--pr, #00C9B8); }

/* Wizard price box */
.wizard-preco-box {
  background: rgba(0,201,184,.12); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--pr-lt2, #CCF5F2);
}
.wpr-label { font-size: 12px; color: var(--tx3, #AAAAAA); margin-bottom: 4px; }
.wpr-valor { font-size: 22px; font-weight: 800; color: var(--pr, #00C9B8); margin-bottom: 4px; }
.wpr-duracao { font-size: 13px; color: var(--tx3, #AAAAAA); }
.wpr-selos { font-size: 11px; color: var(--tx4, #666666); margin-top: 6px; line-height: 1.5; }

/* Chat bubble classes (used by chat.js) */
/* chat-bubble: sizing handled by chat.css */
.chat-bubble-meta { font-size: 10px; color: var(--tx4, #666666); margin-top: 3px; }
.chat-date-sep { text-align: center; margin: 12px 0; }
.chat-date-sep span {
  background: var(--bg, #000000); color: var(--tx4, #666666);
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
}
.chat-empty { padding: 40px 24px; text-align: center; }
.chat-empty-icon { font-size: 40px; margin-bottom: 12px; }
.chat-empty-title { font-size: 16px; font-weight: 700; color: var(--tx, #FFFFFF); }
.chat-empty-sub   { font-size: 14px; color: var(--tx3, #AAAAAA); margin-top: 6px; }
.chat-system-msg {
  text-align: center; margin: 8px 16px;
  font-size: 12px; color: var(--tx4, #666666);
  background: var(--bg, #000000); border-radius: 99px; padding: 4px 12px;
}
.chat-status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.conversa-item {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08));
  cursor: pointer; align-items: center;
}
.conversa-item:active { background: var(--bg, #000000); }
.conversa-nome { font-size: 15px; font-weight: 700; color: var(--tx, #FFFFFF); }
.conversa-body { flex: 1; min-width: 0; }
.conv-unread-dot { width: 8px; height: 8px; background: var(--pr, #00C9B8); border-radius: 50%; flex-shrink: 0; }
.conversa-unread-badge {
  min-width: 18px; height: 18px; background: var(--pr, #00C9B8);
  color: #fff; font-size: 10px; font-weight: 900; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Auth screens (OTP injected by otp-auth.js) */
.mc-auth-screen {
  display: none; position: fixed; inset: 0; z-index: 7000;
  background: var(--surface, #1A1A1A); flex-direction: column;
  overflow: hidden;
}
.mc-auth-screen.active { display: flex; }
.mc-auth-card { padding: 24px 20px; flex: 1; overflow-y: auto; }
.mc-auth-btn {
  width: 100%; min-height: 52px; border-radius: 14px;
  font-size: 16px; font-weight: 700; border: none; cursor: pointer;
  background: var(--pr, #00C9B8); color: #fff;
  font-family: inherit; transition: opacity .15s;
}
.mc-auth-btn:active { opacity: .85; }
.mc-auth-error {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
  color: var(--red, #EF4444); margin-top: 8px; display: none;
}
.mc-auth-error.show { display: block; }
.mc-auth-title  { font-size: 24px; font-weight: 900; color: var(--tx, #FFFFFF); margin-bottom: 6px; }
.mc-auth-subtitle { font-size: 14px; color: var(--tx3, #AAAAAA); margin-bottom: 24px; }
.mc-otp-code-input {
  text-align: center !important; font-size: 30px !important;
  font-weight: 800 !important; letter-spacing: 10px !important;
  caret-color: var(--pr, #00C9B8);
}
.mc-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 20px; background: #1A1A1A; color: #3c4043;
  border: 1.5px solid #dadce0; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: box-shadow .15s;
}
.mc-google-btn:active { box-shadow: 0 2px 12px rgba(0,0,0,.18); }

/* Misc utility */
.section { padding: 16px 16px 0; }
.section-title {
  font-size: 13px; font-weight: 700; color: var(--tx3, #AAAAAA);
  letter-spacing: .3px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px; text-transform: uppercase;
}
.typing-dot {
  width: 7px; height: 7px; background: var(--tx4, #666666);
  border-radius: 50%; animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing-bounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-6px); }
}
.skeleton {
  background: var(--bd, rgba(255,255,255,0.08)); border-radius: var(--r, 14px);
  overflow: hidden; position: relative;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  animation: shimmer 1.4s ease infinite; background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card { height: 110px; margin: 0 16px 10px; }


.btn-ja-interessado {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  /* Sem border-radius — fica colado no rodapé do card (overflow:hidden faz o arredondamento) */
  padding: 10px 16px !important;
  margin: 0 !important;
  background: #F0FDF4 !important;
  color: #15803D !important;
  font-size: 14px;
  font-weight: 700;
  border: none !important;
  border-top: 1px solid #D1FAE5 !important;
  border-radius: 0 !important;
  letter-spacing: -0.1px;
  width: 100%;
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════════
   PATCH 3 — Critical missing classes from audit
   ════════════════════════════════════════════════════════════════ */

/* ── pcc-* buttons ─────────────────────────────────────────────── */
.pcc-btn {
  flex: 1; min-width: 100px; padding: 11px 14px;
  border-radius: var(--r-sm, 10px); font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit;
  transition: opacity .15s, transform .1s; text-align: center;
}
.pcc-btn:active { transform: scale(.97); opacity: .85; }

.pcc-btn-primary  { background: var(--pr, #00C9B8); color: #fff; box-shadow: 0 4px 12px rgba(26,158,255,.22); }
.pcc-btn-success  { background: #00C48C; color: #000; font-weight: 800; }
.pcc-btn-pagar    { background: #00C48C; color: #000; font-weight: 800; }
.pcc-btn-cancelar { background: rgba(239,68,68,0.10); color: #F87171; border: 1.5px solid rgba(239,68,68,0.20); }
.pcc-btn-recriar  { background: rgba(0,201,184,0.08); color: #00C9B8;  border: 1.5px solid rgba(0,201,184,0.20); }
.badge-expirado   { background: rgba(107,114,128,0.15); color: #9CA3AF; border: 1px solid rgba(107,114,128,0.25); border-radius: 20px; font-size: 11px; font-weight: 700; padding: 2px 10px; }
.pcc-aviso-vencido { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.5; margin-bottom:10px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2); color:#FCD34D; }
.pcc-aviso-vencido strong { color:#fff; }
.pcc-aviso-vencido.urgente { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); color:#FCA5A5; }
.pcc-aviso-vencido svg { flex-shrink:0; margin-top:1px; }
.pcc-btn-ghost    { background: #242424; color: #AAAAAA; border: 1px solid rgba(255,255,255,0.07); }
.pcc-btn-info     { background: rgba(26,158,255,0.10); color: #1A9EFF; border: 1.5px solid rgba(26,158,255,0.20); }
.pcc-btn-star     { background: rgba(245,158,11,0.10); color: #F59E0B; border: 1.5px solid rgba(245,158,11,0.20); }
.pcc-btn-danger   { background: rgba(239,68,68,0.10); color: #F87171; border: 1.5px solid rgba(239,68,68,0.20); }
.pcc-btn-aceitar  { background: var(--pr, #00C9B8); color: #fff; }
.pcc-btn-disputa  { background: rgba(26,158,255,0.08); color: #1A9EFF; border: 1.5px solid rgba(26,158,255,0.25); }
.pcc-btn-disputa:hover { background: rgba(26,158,255,0.15); }
.pcc-disputa-badge {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0; padding: 8px 12px;
  background: rgba(245,158,11,0.10); color: #D97706;
  border: 1px solid rgba(245,158,11,0.20); border-radius: 10px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}

/* ── pcc-emoji ─────────────────────────────────────────────────── */
.pcc-emoji {
  font-size: 22px; flex-shrink: 0; width: 36px;
  display: flex; align-items: center; justify-content: center;
}

/* ── pcc-footer ────────────────────────────────────────────────── */
.pcc-footer {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 16px 14px;
}

/* ── pcc-prestador-box ─────────────────────────────────────────── */
.pcc-prestador-box {
  background: #242424; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.07);
}
.pcc-prest-label { font-size: 11px; font-weight: 600; color: #AAAAAA; margin-bottom: 3px; }
.pcc-prest-nome  { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.pcc-prest-name  { font-size: 14px; font-weight: 700; color: #FFFFFF; }

/* ── pcc-avaliado-badge ────────────────────────────────────────── */
.pcc-avaliado-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: var(--amber-lt, rgba(245,158,11,0.10));
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--amber-dk, #D97706); border: 1px solid rgba(245,158,11,0.20);
}

/* ── sp-cancelado ──────────────────────────────────────────────── */
.sp-cancelado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  margin: 10px 0 4px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red, #DC2626);
}
.sp-cancelado svg {
  width: 16px;
  height: 16px;
  stroke: var(--red, #DC2626);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  flex-shrink: 0;
}

/* ── rv-star (review star button) ──────────────────────────────── */
.rv-star {
  font-size: 32px; background: none; border: none;
  cursor: pointer; opacity: .35; transition: opacity .15s, color .15s;
  color: var(--amber, #F59E0B); line-height: 1;
  padding: 0 2px;
}
.rv-star.active { opacity: 1; }

/* ── av-card (old review system fallback) ──────────────────────── */
.av-card {
  background: var(--bg, #000000); border-radius: 12px;
  padding: 14px; margin-bottom: 8px;
}
.av-card-header  { display: flex; justify-content: space-between; margin-bottom: 6px; }
.av-card-nome    { font-size: 13px; font-weight: 700; color: var(--tx, #FFFFFF); }
.av-card-estrelas{ color: var(--amber, #F59E0B); }
.av-card-comentario { font-size: 13px; color: var(--tx2, #AAAAAA); font-style: italic; margin-bottom: 4px; }
.av-card-data    { font-size: 11px; color: var(--tx4, #666666); }
.av-section-title{ font-size: 13px; font-weight: 700; color: var(--tx, #FFFFFF); margin-bottom: 8px; }

/* ── btn-avaliado / btn-contratar ──────────────────────────────── */
.btn-avaliado {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--green-lt, #ECFDF5); color: var(--green-dk, #059669);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid #A7F3D0;
}
.btn-contratar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; background: var(--pr, #00C9B8); color: #fff;
  border: none; border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: opacity .15s;
}
.btn-contratar:hover { opacity: .88; }
.btn-contratar svg { flex-shrink: 0; }

/* pcv3 layout — ver bloco unificado acima */

/* ── chat classes ──────────────────────────────────────────────── */
.chat-attach-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg, #000000);
  border: none; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--tx3, #AAAAAA); cursor: pointer; flex-shrink: 0;
}
.chat-blocked-bar {
  background: rgba(239,68,68,0.10); color: var(--red, #EF4444);
  font-size: 13px; font-weight: 600; padding: 10px 16px;
  text-align: center; border-top: 1px solid #FECACA;
}
.chat-img {
  max-width: 200px; border-radius: 12px; display: block;
  cursor: pointer; pointer-events: auto;
}
.chat-load-more {
  display: block; margin: 8px auto; padding: 8px 16px;
  background: var(--bg, #000000); border: 1.5px solid var(--bd, rgba(255,255,255,0.08));
  border-radius: 99px; font-size: 12px; font-weight: 600;
  color: var(--tx3, #AAAAAA); cursor: pointer; font-family: inherit;
}
.chat-msg-tick  { font-size: 11px; opacity: .6; }
.chat-msg-time  { font-size: 10px; color: var(--tx4, #666666); }
.chat-link      { color: var(--pr, #00C9B8); text-decoration: underline; }
.chat-retry-btn { background: none; border: none; color: var(--red, #EF4444); cursor: pointer; font-size: 12px; }
.chat-send-btn  { width: 40px; height: 40px; border-radius: 50%; background: var(--pr, #00C9B8); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-textarea  { flex: 1; min-height: 40px; max-height: 120px; border: 1.5px solid var(--bd, rgba(255,255,255,0.08)); border-radius: 20px; padding: 10px 14px; font-size: 14px; font-family: inherit; outline: none; resize: none; background: var(--bg, #000000); }
.chat-textarea:focus { border-color: var(--pr, #00C9B8); }
.chat-input-wrap { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: var(--surface, #1A1A1A); border-top: 1px solid var(--bd, rgba(255,255,255,0.08)); }

/* ── agendamento classes ────────────────────────────────────────── */
.agd-dia-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 8px; border-radius: 10px;
  border: 1.5px solid var(--bd, rgba(255,255,255,0.08)); background: var(--surface, #1A1A1A);
  cursor: pointer; min-width: 52px; font-family: inherit;
  transition: all .15s;
}
.agd-dia-btn.active, .agd-dia-btn.selected {
  border-color: var(--pr, #00C9B8); background: rgba(0,201,184,.12);
}
.agd-dia-nome { font-size: 10px; font-weight: 700; color: var(--tx3, #AAAAAA); text-transform: uppercase; }
.agd-dia-num  { font-size: 18px; font-weight: 800; color: var(--tx, #FFFFFF); }
.agd-hora-btn {
  padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid var(--bd, rgba(255,255,255,0.08)); background: var(--surface, #1A1A1A);
  cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit;
}
.agd-hora-btn.active, .agd-hora-btn.selected {
  border-color: var(--pr, #00C9B8); background: rgba(0,201,184,.12);
  color: var(--pr, #00C9B8);
}
.agd-penalidade-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--amber-lt, rgba(245,158,11,0.10)); color: var(--amber-dk, #D97706);
}
.agd-sem-horario { font-size: 13px; color: var(--tx3, #AAAAAA); padding: 12px 0; text-align: center; }

/* ── Admin panel classes ────────────────────────────────────────── */
.admin-metrics { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.admin-metrics-fin { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.admin-prazos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.ap-group { background: var(--surface, #1A1A1A); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.ap-titulo { font-size: 13px; font-weight: 700; color: var(--tx, #FFFFFF); margin-bottom: 10px; }
.ap-row    { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ap-label  { font-size: 13px; color: var(--tx2, #AAAAAA); }
.ap-input  { width: 64px; height: 36px; border: 1.5px solid var(--bd, rgba(255,255,255,0.08)); border-radius: 8px; text-align: center; font-size: 14px; font-weight: 700; font-family: inherit; }
.ap-unit   { font-size: 12px; color: var(--tx4, #666666); }
.ap-ctrl   { display: flex; align-items: center; gap: 6px; }
.ap-exemplo { background: var(--bg, #000000); border-radius: 8px; padding: 10px; margin-top: 8px; }
.ap-ex-titulo { font-size: 11px; font-weight: 700; color: var(--tx3, #AAAAAA); margin-bottom: 6px; text-transform: uppercase; }
.ap-ex-row { font-size: 13px; color: var(--tx, #FFFFFF); padding: 2px 0; }

/* ── Misc ───────────────────────────────────────────────────────── */
.aviso {
  background: var(--amber-lt, rgba(245,158,11,0.10)); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: #92400E;
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid rgba(245,158,11,0.20); margin-bottom: 10px;
}
.ativo { color: var(--green, #10B981); font-weight: 700; }
.btn-ver-reviews {
  background: none; border: none; color: var(--pr, #00C9B8);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: underline; padding: 4px 0;
}
.pedido-chat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: rgba(0,201,184,.12);
  color: var(--pr, #00C9B8); border: none; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pedido-chat-unread {
  min-width: 18px; height: 18px; background: var(--red, #EF4444);
  color: #fff; font-size: 10px; font-weight: 900; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ════ Checkout Transparente v2 (ck2-*) — Redesign MercadoPago Dark ════ */

#ck2-container {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: flex-end; justify-content: center;
}
.ck2-overlay {
  position: fixed; inset: 0; z-index: 2001;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ck2-fade-in .2s ease;
}
.ck2-modal {
  position: relative; z-index: 2002;
  background: #161616;
  width: 100%; max-width: 480px; max-height: 92dvh;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; overflow: hidden;
  animation: ck2-slide-up .28s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
.ck2-modal::before {
  content: ''; display: block;
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.15);
  margin: 10px auto 0; flex-shrink: 0;
}
@keyframes ck2-slide-up {
  from { transform: translateY(100%); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes ck2-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Header ── */
.ck2-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.ck2-header-titulo {
  font-size: 16px; font-weight: 800; color: #fff; margin: 0;
}
.ck2-header-fechar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: none; cursor: pointer;
  color: #888; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background .15s;
}
.ck2-header-fechar:active { background: rgba(255,255,255,.13); }

/* ── Body ── */
.ck2-body {
  overflow-y: auto; padding: 16px 20px; flex: 1;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ck2-body::-webkit-scrollbar { display: none; }

/* ── Resumo do serviço ── */
.ck2-resumo {
  background: #1E1E1E;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ck2-servico-info {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ck2-servico-icone {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0,201,184,.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ck2-servico-nome {
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.2;
}
.ck2-prestador-nome {
  font-size: 12px; color: #888; margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}

/* ── Info rows ── */
.ck2-info-bloco {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.ck2-info-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: #888; line-height: 1.5;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.ck2-info-row strong { color: #bbb; }
.ck2-info-agendado  { color: #aaa; }
.ck2-info-agendado strong { color: #fff; }
.ck2-info-material  { color: #FCD34D; background: rgba(245,158,11,.05); border-color: rgba(245,158,11,.12); }
.ck2-info-material strong { color: #FDE68A; }
.ck2-info-desc { color: #777; }

/* Valores */
.ck2-valores {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ck2-valor-linha {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #888;
}
.ck2-total {
  font-size: 17px; font-weight: 900; color: #fff; margin-top: 4px;
}
.ck2-divisor { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }
.ck2-aviso-cancel {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 10px; font-size: 12px; color: #FCA5A5; line-height: 1.5;
}
.ck2-aviso-cancel strong { color: #fff; }

/* ── Métodos de pagamento ── */
.ck2-metodos-label {
  font-size: 11px; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: .07em;
  margin: 4px 0 10px;
}
.ck2-metodos { display: flex; gap: 10px; margin-bottom: 16px; }
.ck2-metodos .ck2-metodo {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 14px; background: #1E1E1E !important;
  cursor: pointer; transition: all .2s; text-align: left;
  font-family: inherit; appearance: none; -webkit-appearance: none;
}
.ck2-metodos .ck2-metodo-ativo {
  border-color: #00C9B8 !important;
  background: rgba(0,201,184,.08) !important;
  box-shadow: 0 0 0 1px rgba(0,201,184,.15);
}
.ck2-metodo-icone { flex-shrink: 0; }
.ck2-metodo-nome  { font-size: 14px; font-weight: 700; color: #fff; }
.ck2-metodo-desc  { font-size: 11px; color: #666; margin-top: 1px; }
.ck2-metodo-check { margin-left: auto; flex-shrink: 0; color: #00C9B8; }
.ck2-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Pix steps ── */
.ck2-pix-info { margin-bottom: 8px; }
.ck2-pix-steps {
  background: #1E1E1E;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.ck2-pix-step {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: #aaa;
}
.ck2-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── QR Code área ── */
.ck2-qr-area {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 0;
}
.ck2-qr-wrap {
  border: 2px solid #00C9B8; border-radius: 14px;
  padding: 10px; background: #1E1E1E; display: inline-block;
}
.ck2-pix-timer {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #888;
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px; padding: 6px 14px;
}
.ck2-codigo-wrap {
  width: 100%; background: #1E1E1E;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px;
}
.ck2-codigo-label { font-size: 11px; color: #555; margin-bottom: 4px; }
.ck2-codigo-txt {
  font-size: 11px; color: #888; word-break: break-all; line-height: 1.5;
  font-family: monospace;
}
.ck2-btn-copiar {
  margin-top: 8px; width: 100%; padding: 9px;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #ccc;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; transition: background .15s;
}
.ck2-btn-copiar:active { background: rgba(255,255,255,.1); }

/* ── Cartão ── */
.ck2-campo { margin-bottom: 14px; }
.ck2-label {
  display: block; font-size: 11px; font-weight: 700; color: #666;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.ck2-input {
  width: 100%; padding: 12px 14px;
  background: #1E1E1E; border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px; color: #fff; font-size: 15px; font-family: inherit;
  transition: border-color .15s; box-sizing: border-box;
}
.ck2-input:focus { outline: none; border-color: rgba(0,201,184,.5); }
.ck2-row-2 { display: flex; gap: 10px; }
.ck2-row-2 .ck2-campo { flex: 1; }

/* ── Botão pagar ── */
.ck2-btn-pagar {
  width: 100%; padding: 16px;
  background: #00C9B8; color: #000;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 900;
  cursor: pointer; font-family: inherit;
  transition: opacity .15s, transform .1s;
  margin-top: 8px; margin-bottom: 4px;
  letter-spacing: .01em;
}
.ck2-btn-pagar:hover   { opacity: .92; }
.ck2-btn-pagar:active  { transform: scale(.98); }
.ck2-btn-pagar:disabled { opacity: .4; cursor: not-allowed; }

.ck2-seguro {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; font-size: 12px; color: #444; margin-top: 4px;
  padding-bottom: 4px;
}

/* ── Sucesso ── */
.ck2-sucesso-body { text-align: center; padding: 48px 24px !important; }
.ck2-sucesso-icone { font-size: 64px; margin-bottom: 20px; animation: ck2-bounce .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes ck2-bounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.ck2-sucesso-titulo { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.ck2-sucesso-msg    { font-size: 15px; color: #888; margin-bottom: 32px; line-height: 1.5; }
.ck2-loading        { padding: 60px; text-align: center; font-size: 16px; color: #888; }

/* ════ Modal cancelamento (mcc-*) ════ */
.mcc-box { padding: 20px; }
.mcc-icone { font-size: 40px; text-align: center; margin-bottom: 12px; }
.mcc-titulo { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 6px; color: var(--tx, #FFFFFF); }
.mcc-nome { font-size: 14px; color: var(--tx3, #AAAAAA); text-align: center; margin-bottom: 16px; }
.mcc-aviso { background: rgba(239,68,68,0.10); border-radius: 10px; padding: 12px; margin-bottom: 16px; font-size: 13px; color: var(--red, #EF4444); line-height: 1.5; }
.mcc-acoes { display: flex; gap: 10px; }
.mcc-btn-confirmar { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--pr, #00C9B8); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.mcc-btn-cancelar  { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--bg, #000000); color: var(--tx2, #AAAAAA); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ════ Modal interessados (mi-*) — estilos base; o JS inline tem prioridade ════ */
.mi-box { padding: 0; }
.mi-subtitle { font-size: 13px; color: var(--tx3, #AAAAAA); margin: 0 0 12px; padding: 0 16px; }
.mi-nome { font-size: 15px; font-weight: 700; color: var(--tx, #FFFFFF); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-rating { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mi-stars { color: var(--amber, #F59E0B); font-size: 13px; letter-spacing: 1px; }
.mi-media { font-size: 13px; font-weight: 700; }
.mi-total { font-size: 12px; color: var(--tx3, #AAAAAA); }

/* ════ Penalidade cancelamento (cpen-*) ════ */
.cpen-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cpen-icon { font-size: 36px; flex-shrink: 0; }
.cpen-info { flex: 1; }
.cpen-forte { font-size: 17px; font-weight: 800; color: var(--tx, #FFFFFF); margin-bottom: 4px; }
.cpen-leve { font-size: 14px; color: var(--tx3, #AAAAAA); }
.cpen-summary { background: var(--bg, #000000); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.cpen-details { font-size: 13px; color: var(--tx3, #AAAAAA); line-height: 1.6; }
.cpen-regras { margin-bottom: 12px; }
.cpen-regra { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; color: var(--tx, #FFFFFF); border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08)); }
.cpen-ok { color: var(--green, #10B981); }
.cpen-nota { font-size: 12px; color: var(--tx4, #666666); margin-bottom: 12px; line-height: 1.5; }

/* ════ Pré-visualização financeira (prev-*) ════ */
.prev-intro { font-size: 13px; color: var(--tx3, #AAAAAA); margin-bottom: 10px; }
.prev-lista { margin-bottom: 12px; }
.prev-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08)); font-size: 14px; }
.prev-valor { font-weight: 600; color: var(--tx, #FFFFFF); }
.prev-metodo { background: var(--blue-lt, rgba(75,110,245,0.10)); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--blue, #3B82F6); margin-bottom: 10px; }
.prev-data { font-size: 12px; color: var(--tx4, #666666); margin-bottom: 8px; }
.prev-aviso { background: var(--amber-lt, rgba(245,158,11,0.10)); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #92400E; }

/* ════ pap-* (aguardando pagamento no card prestador) ════ */
.pcc-aguardando-pag { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: rgba(26,158,255,0.08); border-bottom: 1px solid rgba(26,158,255,0.12); }
.pap-icon  { font-size: 24px; flex-shrink: 0; }
.pap-texto { flex: 1; }
.pap-titulo{ font-size: 14px; font-weight: 700; color: var(--pr, #00C9B8); }
.pap-sub   { font-size: 12px; color: var(--tx3, #AAAAAA); margin-top: 2px; }

/* ════ pcc-aviso-confirmar ════ */
.pcc-aviso-confirmar { background: var(--green-lt, #ECFDF5); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 13px; color: var(--green-dk, #059669); display: flex; align-items: center; gap: 8px; border: 1px solid #A7F3D0; }

/* ════ pcc-aviso-pag ════ */
.pcc-aviso-pag { background: var(--amber-lt, rgba(245,158,11,0.10)); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 13px; color: #92400E; display: flex; gap: 8px; align-items: flex-start; }

/* ════ pcc-reagend-aviso / pcc-reagend-limite ════ */
.pcc-reagend-aviso { background: var(--blue-lt, rgba(75,110,245,0.10)); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 13px; color: var(--blue-dk, #2563EB); }
.pcc-reagend-limite { font-size: 13px; color: var(--red, #EF4444); padding: 8px 0; }
.pcc-reagend-prest-aviso { background: var(--amber-lt, rgba(245,158,11,0.10)); border-radius: 10px; padding: 12px; margin: 0 16px 12px; border: 1px solid rgba(245,158,11,0.20); }

/* ════ prp-* (reagendamento prestador) ════ */
.prp-titulo { font-size: 14px; font-weight: 700; color: #92400E; margin-bottom: 6px; }
.prp-data   { font-size: 13px; color: var(--tx2, #AAAAAA); margin-bottom: 10px; }
.prp-acoes  { display: flex; gap: 8px; }
.prp-btn    { flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.prp-aceitar{ background: var(--green, #10B981); color: #fff; }
.prp-recusar{ background: rgba(239,68,68,0.10); color: var(--red, #EF4444); border: 1px solid #FECACA; }

/* ════ nc-* (new card / notif card) ════ */
.nc-icone  { font-size: 36px; margin-bottom: 12px; }
.nc-titulo { font-size: 18px; font-weight: 800; color: var(--tx, #FFFFFF); margin-bottom: 6px; }
.nc-sub    { font-size: 14px; color: var(--tx3, #AAAAAA); margin-bottom: 8px; }
.nc-texto  { font-size: 13px; color: var(--tx2, #AAAAAA); line-height: 1.6; margin-bottom: 10px; }
.nc-dica   { font-size: 12px; color: var(--tx4, #666666); background: var(--bg, #000000); border-radius: 8px; padding: 10px; }
.nc-fechar { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 22px; color: var(--tx3, #AAAAAA); cursor: pointer; }

/* ════ rv-rank / rv-box ════ */
.rv-box { background: var(--bg, #000000); border-radius: var(--r, 14px); padding: 16px; margin: 0 16px 12px; }
.rv-rank-card { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08)); }
.rv-rank-card:last-child { border-bottom: none; }
.rv-rank-pos   { font-size: 18px; font-weight: 900; color: var(--tx3, #AAAAAA); min-width: 28px; }
.rv-rank-info  { flex: 1; min-width: 0; }
.rv-rank-nome  { font-size: 14px; font-weight: 700; color: var(--tx, #FFFFFF); }
.rv-rank-tipo  { font-size: 12px; color: var(--tx3, #AAAAAA); }
.rv-rank-preco { font-size: 13px; color: var(--tx2, #AAAAAA); }
.rv-rank-rating{ font-size: 13px; font-weight: 700; color: var(--amber, #F59E0B); }
.rv-rank-avg   { font-size: 20px; font-weight: 900; color: var(--tx, #FFFFFF); }
.rv-rank-cnt   { font-size: 12px; color: var(--tx4, #666666); }
.rv-rank-stars { color: var(--amber, #F59E0B); }
.rv-anonimo-notice { font-size: 12px; color: var(--tx4, #666666); font-style: italic; margin-top: 6px; }
.rv-modal-box { background: var(--surface, #1A1A1A); border-radius: 20px 20px 0 0; padding: 20px; }

/* ════ KPI metrics (kpi-*) ════ */
.kpi-mini { background: var(--surface, #1A1A1A); border-radius: 10px; padding: 12px; flex: 1; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.kpi-n { font-size: 20px; font-weight: 800; color: var(--tx, #FFFFFF); }
.kpi-l { font-size: 10px; font-weight: 600; color: var(--tx3, #AAAAAA); text-transform: uppercase; margin-top: 2px; }

/* ════ wb-* (wallet box — previsão de liberação) ════ */
.wallet-breakdown { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd, rgba(255,255,255,.08)); }
.wb-titulo    { font-size: 11px; font-weight: 700; color: var(--tx3, #AAAAAA); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.wb-row       { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.wb-row + .wb-row { border-top: 1px solid var(--bd, rgba(255,255,255,.06)); }
.wb-label     { font-size: 12px; color: var(--tx3, #AAAAAA); }
.wb-valor     { font-size: 14px; font-weight: 800; color: var(--tx, #FFFFFF); }
.wb-ver-detalhe { font-size: 12px; color: var(--or, #00C9B8); font-weight: 700; text-decoration: none; cursor: pointer; background: none; border: none; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; margin-top: 10px; padding: 0; }

/* ════ chat image viewer ════ */
.chat-img-wrap { position: relative; display: inline-block; }
.chat-img-error { font-size: 13px; color: var(--tx4, #666666); font-style: italic; }
.chat-img-overlay-close { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-tick { font-size: 11px; opacity: .6; margin-left: 4px; }
.conv-tick { font-size: 11px; color: var(--tx4, #666666); }
.conversa-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.conversa-bottom-row { display: flex; align-items: center; justify-content: space-between; }
.lido { color: var(--blue, #3B82F6); }

/* ════ mc-chat-loading ════ */
.mc-chat-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 12px; }
.mc-chat-loading-text { font-size: 14px; color: var(--tx3, #AAAAAA); }
.mc-typing-dots { display: flex; gap: 5px; }

/* ════ typing-dot-header ════ */
.typing-dot-header { width: 6px; height: 6px; background: rgba(255,255,255,.6); border-radius: 50%; animation: mc-pulse 1.2s ease-in-out infinite; }

/* ════ msucc-agd-icon ════ */
.msucc-agd-icon { font-size: 16px; margin-right: 4px; }

/* ════ fin-row-frete / fin-frete ════ */
.fin-frete { font-size: 13px; color: var(--tx3, #AAAAAA); }
.fin-row-frete { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--tx3, #AAAAAA); }
.fin-fallback  { font-size: 13px; color: var(--tx3, #AAAAAA); }
.fin-frete-gratis { color: var(--green-dk, #059669); font-weight: 600; }

/* ════ lista-avaliacoes ════ */
.lista-avaliacoes { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }

/* ════ pedido-chat-btn / unread ════ */
.pedido-chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(0,201,184,.12); color: var(--pr, #00C9B8); border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pedido-chat-unread { min-width: 18px; height: 18px; background: var(--red, #EF4444); color: #fff; font-size: 10px; font-weight: 900; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ════ Misc final ════ */
.modal-close { background: rgba(255,255,255,.07); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #888; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; transition: background .15s; }
.modal-close::after { content: '✕'; }
.modal-close:active { background: rgba(255,255,255,.13); }
.emoji { font-size: 22px; line-height: 1; }

/* ════ Checkout v1 inline (ck-*) ════ */
.ck-box { background: var(--surface, #1A1A1A); border-radius: var(--r, 14px); overflow: hidden; margin: 0 16px 12px; box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08)); }
.ck-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--bd, rgba(255,255,255,0.08)); }
.ck-row:last-child { border-bottom: none; }
.ck-label { color: var(--tx3, #AAAAAA); }
.ck-val { font-weight: 600; color: var(--tx, #FFFFFF); }
.ck-total-row { background: rgba(0,201,184,.12); }
.ck-total { font-size: 18px; font-weight: 900; color: var(--pr, #00C9B8); }
.ck-resumo { padding: 4px 0; }
.ck-divider { height: 1px; background: var(--bd, rgba(255,255,255,0.08)); margin: 4px 0; }
.ck-servico-nome { font-size: 15px; font-weight: 700; color: var(--tx, #FFFFFF); padding: 12px 16px 4px; }
.ck-prestador { font-size: 13px; color: var(--tx3, #AAAAAA); padding: 0 16px 10px; }
.ck-frete-gratis .ck-val { color: var(--green-dk, #059669); font-weight: 700; }
.ck-seguranca { font-size: 11px; color: var(--tx4, #666666); text-align: center; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ck-btn-pagar { display: block; width: calc(100% - 32px); margin: 0 16px 14px; padding: 15px; background: var(--pr, #00C9B8); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; }
.ck-cancelar-reserva { display: block; width: calc(100% - 32px); margin: 0 16px 12px; padding: 12px; background: none; border: 1.5px solid var(--bd2, rgba(255,255,255,0.12)); border-radius: 10px; font-size: 14px; color: var(--tx3, #AAAAAA); cursor: pointer; font-family: inherit; text-align: center; }
.ck-arrependimento { font-size: 12px; color: var(--tx4, #666666); text-align: center; padding: 0 16px 16px; line-height: 1.5; }
.ck-pix-aviso { background: var(--green-lt, #ECFDF5); border-radius: 10px; padding: 12px; margin: 0 16px 12px; font-size: 13px; color: var(--green-dk, #059669); display: flex; gap: 8px; align-items: flex-start; }
.ck-reserva-wrap { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: rgba(0,201,184,.12); }
.ck-reserva-icon { font-size: 24px; flex-shrink: 0; }
.ck-reserva-txt { font-size: 13px; color: #9A3412; line-height: 1.4; }
.btn-link { background: none; border: none; color: var(--pr, #00C9B8); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; }

/* ════ Remaining micro-classes ════ */
.mcancel-box { padding: 20px; }
.pcc-aguard-box { display: flex; gap: 10px; padding: 12px 16px; background: rgba(26,158,255,0.08); border-bottom: 1px solid rgba(26,158,255,0.12); align-items: center; }
.rv-card-anon { opacity: .7; font-style: italic; }
.ck2-pix-codigo-wrap { background: var(--bg, #000000); border-radius: 10px; padding: 12px; margin: 8px 0; display: flex; gap: 8px; align-items: center; }
.ck2-qr-placeholder { width: 160px; height: 160px; background: var(--bd, rgba(255,255,255,0.08)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tx4, #666666); }

/* ════════════════════════════════════════════════════════════════
   Auth OTP — redesign completo alinhado ao design system Freedom
   Paleta: laranja #00C2FF (marca), fundo escuro azul-marinho,
   card branco com bottom-sheet. Fonte: Plus Jakarta Sans (herda).
   ════════════════════════════════════════════════════════════════ */

/* ── Tela base ─────────────────────────────────────────────────── */
.mc-auth-screen {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #000000;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  animation: mc-auth-in 0.3s ease both;
}

@keyframes mc-auth-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mc-auth-in-back {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Background: preto → cinza escuro ─────────────────────────── */
.mc-auth-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    #1A1A1A 0%,
    #141414 30%,
    #0A0A0A 65%,
    #000000 100%
  );
  z-index: 0;
}

/* Partículas decorativas (círculos de luz) */
.mc-auth-bg::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(26, 158, 255, 0.07);
  filter: blur(70px);
  top: -60px;
  right: -60px;
}

.mc-auth-bg::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(26, 158, 255, 0.04);
  filter: blur(50px);
  bottom: 30%;
  left: -40px;
}


  to   { transform: scale(1.18) translate(10px, 12px); opacity: 1; }
}

/* Sem imagem de fundo — só gradiente */
.mc-auth-gradient { display: none; }

/* ── Topo: botão voltar + logo + marca ─────────────────────────── */
.mc-auth-top {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 24px;
  gap: 8px;
  animation: mc-top-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

@keyframes mc-top-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Botão voltar */
.mc-auth-back {
  position: absolute;
  left: 16px;
  top: 48px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.mc-auth-back:active { background: rgba(255, 255, 255, 0.25); }

/* Logo: quadrado com fundo escuro */
.mc-auth-logo-wrap {
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.12);
}

.mc-auth-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Nome da marca */
.mc-auth-brand {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-top: 6px;
}

.mc-auth-brand-mao   { color: #FFFFFF; }
.mc-auth-brand-certa { color: #AAAAAA; }

/* ── Card (bottom sheet) ─────────────────────────────────────────── */
.mc-auth-card {
  position: relative;
  z-index: 2;
  flex: 1;
  background: #1A1A1A;
  border-radius: 28px 28px 0 0;
  padding: 8px 24px 32px;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  animation: mc-card-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes mc-card-up {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Handle */
.mc-auth-card::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin: 12px auto 24px;
}

/* ── Título e subtítulo ─────────────────────────────────────────── */
.mc-auth-title {
  font-size: 24px;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 4px;
  letter-spacing: -0.4px;
  line-height: 1.15;
}

.mc-auth-subtitle {
  font-size: 14px;
  color: #AAAAAA;
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Campos de formulário ───────────────────────────────────────── */
.mc-field {
  margin-bottom: 16px;
}

.mc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}

.mc-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  background: #2A2A2A;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-sizing: border-box;
}

.mc-input:focus {
  border-color: #1A9EFF;
  box-shadow: 0 0 0 3px rgba(26, 158, 255, 0.12);
  background: #2A2A2A;
}

.mc-input::placeholder { color: rgba(255,255,255,0.25); font-weight: 400; }
select.mc-input { cursor: pointer; }
textarea.mc-input { height: auto; min-height: 88px; padding: 14px 16px; resize: none; }

/* ── Botão primário ─────────────────────────────────────────────── */
.mc-auth-btn {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  background: #00C9B8;
  color: #000;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,201,184,.25);
  transition: transform .12s, box-shadow .12s, background .12s;
  margin-top: 4px;
  letter-spacing: -0.1px;
}

.mc-auth-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0,201,184,.15);
  background: #00B5A5;
}

.mc-auth-btn:disabled {
  background: rgba(255,255,255,.07);
  color: #555;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.mc-auth-btn.loading {
  opacity: 0.85;
  pointer-events: none;
}

/* Spinner dentro do botão */
.mc-btn-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mc-spin 0.65s linear infinite;
  display: none;
  flex-shrink: 0;
}

.mc-auth-btn.loading .mc-btn-spinner { display: block; }
.mc-auth-btn.loading .mc-btn-label   { display: none; }

@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ── Google button ─────────────────────────────────────────────── */
.mc-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: #1A1A1A;
  color: #1A1A1A;
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  margin-top: 4px;
}

.mc-google-btn:active {
  background: #000000;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.mc-google-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Divider "ou" ───────────────────────────────────────────────── */
.mc-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 13px;
  color: #AAAAAA;
  font-weight: 500;
}

.mc-auth-divider::before,
.mc-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Erro ───────────────────────────────────────────────────────── */
.mc-auth-error {
  background:rgba(239,68,68,0.10);
  border: 1.5px solid #FECACA;
  color: #DC2626;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  display: none;
  line-height: 1.5;
  animation: mc-shake 0.3s ease;
}
.mc-auth-error.show { display: block; }

@keyframes mc-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── Termos ─────────────────────────────────────────────────────── */
.otp-termos-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 14px;
  background: #000000;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
}
.otp-termos-cb {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: #00C2FF;
  margin-top: 1px;
  cursor: pointer;
}
.otp-termos-txt {
  font-size: 13px;
  color: #AAAAAA;
  line-height: 1.55;
  user-select: none;
}
.otp-termos-txt a { color: #00C2FF; text-decoration: underline; }
.otp-termos-txt strong { color: #1A1A1A; font-weight: 700; }

/* ── OTP code input ─────────────────────────────────────────────── */
.mc-otp-code-input {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 12px;
  caret-color: #00C2FF;
}

/* ── Notas e hints ──────────────────────────────────────────────── */
.mc-auth-sms-note {
  text-align: center;
  color: #AAAAAA;
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.5;
}

.otp-resend-wrap {
  text-align: center;
  margin-top: 18px;
  min-height: 32px;
}
.otp-timer-text { color: #AAAAAA; font-size: 14px; }
.otp-resend-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #00C2FF;
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: underline;
}
.otp-resend-btn:disabled { color: #AAAAAA; text-decoration: none; cursor: default; }

/* ── Sucesso ────────────────────────────────────────────────────── */
.mc-auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 0;
}
.mc-auth-success-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: mc-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mc-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Links ──────────────────────────────────────────────────────── */
.mc-auth-link {
  color: #00C2FF;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Ajustes responsivos ────────────────────────────────────────── */
@media (max-height: 680px) {
  .mc-auth-top {
    padding: 24px 20px 16px;
  }
  .mc-auth-logo-wrap {
    width: 52px;
    height: 52px;
  }
  .mc-auth-brand { font-size: 22px; }
  .mc-auth-card {
    padding: 6px 20px 20px;
  }
  .mc-auth-card::before { margin: 8px auto 16px; }
  .mc-auth-title { font-size: 20px; }
}

/* ── OTP errors no tema escuro da tela ──────────────────────────── */
#page-otp-email .mc-auth-error,
#page-otp-code .mc-auth-error,
#page-otp-perfil-cliente .mc-auth-error,
#page-otp-perfil-prestador .mc-auth-error {
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .4);
  color: #FCA5A5;
}

/* ── Pendente sair btn ──────────────────────────────────────────── */
.otp-pendente-sair-btn {
  background: #AAAAAA !important;
  margin-top: 24px;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL DE AGENDAMENTO — adicionado para corrigir TypeError agendamento.js
   ══════════════════════════════════════════════════════════════════ */

/* Overlay */
.agd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

/* Caixa do modal (bottom-sheet em mobile) */
.agd-modal-box {
  background: var(--bg,#000000);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
}

/* Cabeçalho */
.agd-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.agd-header-emoji { font-size: 28px; line-height: 1; display:flex; align-items:center; color: var(--pr, #00C9B8); }
.agd-header-info  { flex: 1; }
.agd-header-titulo{ font-size: 16px; font-weight: 700; color: var(--tx, #FFFFFF); }
.agd-header-preco { font-size: 14px; color: var(--pr, #00C9B8); font-weight: 600; margin-top: 2px; }
.agd-modal-close  {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--tx3, #6b7280); padding: 4px 8px; border-radius: 8px;
  line-height: 1;
}
.agd-modal-close:hover { background: var(--bg2, #f3f4f6); }

/* Corpo rolável */
.agd-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.agd-section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx3, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px;
}

/* Cards imediato / agendado */
.agd-tipo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.agd-tipo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 14px;
  cursor: pointer;
  background: var(--bg,#000000);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.agd-tipo-card.selected,
.agd-tipo-card:has(input:checked) {
  border-color: var(--pr, #00C9B8);
  background:#1A1A1A7ed;
}
.agd-tipo-icon { font-size: 24px; line-height: 1; display:flex; align-items:center; color: var(--pr, #00C9B8); }
.agd-tipo-nome { font-size: 14px; font-weight: 700; color: var(--tx, #FFFFFF); }
.agd-tipo-sub  { font-size: 11px; color: var(--tx3, #6b7280); margin-top: 2px; }

/* Lista de dias */
.agd-dias-lista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 18px;
  scrollbar-width: none;
}
.agd-dias-lista::-webkit-scrollbar { display: none; }
.agd-dia-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: var(--bg,#000000);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.agd-dia-btn.selected {
  border-color: var(--pr, #00C9B8);
  background:#1A1A1A7ed;
}
.agd-dia-nome { font-size: 10px; font-weight: 700; color: var(--tx3, #6b7280); text-transform: uppercase; }
.agd-dia-num  { font-size: 18px; font-weight: 800; color: var(--tx, #FFFFFF); }

/* Grid de horários */
.agd-horarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.agd-hora-btn {
  padding: 10px 6px;
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: var(--bg,#000000);
  font-size: 14px;
  font-weight: 600;
  color: var(--tx, #FFFFFF);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.agd-hora-btn.selected {
  border-color: var(--pr, #00C9B8);
  background:#1A1A1A7ed;
  color: var(--pr, #00C9B8);
}
.agd-sem-horario { font-size: 13px; color: var(--tx3, #6b7280); padding: 12px 0; text-align: center; }

/* Resumo */
.agd-resumo-box {
  background: var(--bg2, #f3f4f6);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}
.agd-resumo-servico { font-size: 14px; font-weight: 700; color: var(--tx, #FFFFFF); margin-bottom: 4px; }
.agd-resumo-quando  { font-size: 13px; color: var(--tx2, #AAAAAA); margin-bottom: 4px; }
.agd-resumo-preco   { font-size: 18px; font-weight: 800; color: var(--pr, #00C9B8); font-weight: 800; }

/* ─── CORREÇÕES DE SOBREPOSIÇÃO DE BOTÕES ──────────────────────────────
   Unificadas aqui para não criar arquivo extra.
─────────────────────────────────────────────────────────────────────── */

/* 1. #btn-enviar-pedido — ficava atrás da tabbar
   .section tem padding-bottom:0; o step-detalhes não compensava --tabbar-h */
#step-detalhes .section:last-child,
#step-detalhes > .section {
  padding-bottom: calc(var(--tabbar-h, 60px) + var(--safe-bottom, 16px) + 16px);
}
#btn-enviar-pedido {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 8px;
}

/* 2. .mcc-btn-confirmar — dois estilos conflitantes (app-compat linha 2725
   + JS inline app_patch.js linha 2251). JS usava display:flex, CSS não. */
.mcc-btn-confirmar {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: var(--pr, #00C9B8);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mcc-btn-confirmar:active   { background: var(--pr-dk, #d94e18); }
.mcc-btn-confirmar:disabled { opacity: 0.6; cursor: not-allowed; }
.mcc-btn-confirmar svg      { flex-shrink: 0; }

/* 3. .agd-modal-footer — não tinha CSS algum definido */
.agd-modal-footer {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--safe-bottom, 16px));
  border-top: 1px solid rgba(255,255,255,.1);
  background: var(--bg,#000000);
}

/* 4. .agd-btn-confirmar — só tinha estilo inline no HTML, sem classe CSS */
.agd-btn-confirmar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--pr, #00C9B8);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(0, 201, 184, 0.28);
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.agd-btn-confirmar:active   { background: var(--pr-dk, #d94e18); box-shadow: none; }
.agd-btn-confirmar:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* safe-area no modal-box para iPhone com notch */
.agd-modal-box {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 5. .ep-btn-confirmar — garante display:flex (escolher-prestador.css já define
   a maioria, mas reset externo pode herdar inline) */
.ep-btn-confirmar {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* ── Badge de agendamento nos cards de pedido ─────────────────── */
/* Exibido em pedidos agendados: data e hora do serviço           */
.agd-card-badge,
.agd-pcv3-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin: 6px 0 4px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #FCD34D;
  line-height: 1.3;
}
.agd-card-badge strong,
.agd-pcv3-badge strong { color: #fff; }

/* quando reagendamento está pendente — destaque violeta */
.agd-card-badge.agd-reagend-pendente,
.agd-pcv3-badge.agd-reagend-pendente {
  background: rgba(139,92,246,.08);
  border-color: rgba(139,92,246,.25);
  color: #C4B5FD;
}
.agd-card-badge.agd-reagend-pendente strong,
.agd-pcv3-badge.agd-reagend-pendente strong { color: #fff; }

/* linha secundária: data atual (riscada) */
.agd-card-badge .agd-data-atual,
.agd-pcv3-badge .agd-data-atual {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  text-decoration: line-through;
  margin-top: 2px;
  display: block;
}

/* ── Campo de endereço com GPS no pedido ──────────────────────── */
.p-end-gps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: var(--pr);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.p-end-gps-btn:active { background: var(--pr-dk); }
.p-end-gps-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* estado: localização confirmada — fica verde */
.p-end-gps-btn.gps-ok {
  background: var(--green);
}
.p-end-gps-btn.gps-ok:active { background: var(--green-dk); }

.p-end-gps-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
}
.p-end-gps-status.ok  { background: var(--green-lt); color: var(--green-dk); border: 1px solid #A7F3D0; }
.p-end-gps-status.err { background:rgba(239,68,68,0.10); color: #DC2626; border: 1px solid #FECACA; }
.p-end-gps-status.loading { background: var(--pr-lt); color: var(--pr-dk); border: 1px solid var(--pr-lt2); }

.p-end-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  color: var(--tx4);
  font-size: 12px;
  font-weight: 500;
}
.p-end-divider::before,
.p-end-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* ── Descrição do serviço no step 2 do pedido ─────────────────── */
.wsd-box {
  background: rgba(0,201,184,.12);
  border: 1px solid var(--pr-lt2, #CCF5F2);
  border-left: 3px solid var(--pr, #00C9B8);
  border-radius: var(--r-sm, 10px);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.wsd-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pr, #00C9B8);
  margin-bottom: 5px;
}
.wsd-texto {
  font-size: 13px;
  color: var(--tx2, #AAAAAA);
  line-height: 1.55;
}

/* ── Descrição do catálogo no card de pedido disponível (prestador) */
.pcv3-svc-desc {
  font-size: 12px;
  color: var(--tx3, #AAAAAA);
  line-height: 1.5;
  padding: 7px 10px;
  background: var(--surface2, #141e38);
  border-radius: var(--r-xs, 6px);
  margin-bottom: 8px;
}
.pcv3-svc-desc-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx4, #666666);
  margin-bottom: 3px;
}

/* ── Aviso "Material por conta do cliente" ────────────────────── */
/* Versão cliente: no step 2 do pedido (amarelo/âmbar) */
.wmat-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.20);
  border-left: 3px solid #F59E0B;
  border-radius: var(--r-sm, 10px);
  font-size: 13px;
  color: #92400E;
  line-height: 1.5;
}
.wmat-aviso svg {
  flex-shrink: 0;
  margin-top: 1px;
  stroke: #F59E0B;
}

/* Versão prestador: nos cards de pedido disponível e meus serviços */
.pcv3-material-aviso {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  margin-bottom: 8px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.20);
  border-radius: var(--r-xs, 6px);
  font-size: 12px;
  color: #92400E;
  line-height: 1.4;
}
.pcv3-material-aviso svg { flex-shrink: 0; stroke: #F59E0B; }

/* ── Bloco de informações no checkout ─────────────────────────── */
.ck2-info-bloco {
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck2-info-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--r-sm, 10px);
  font-size: 13px;
  line-height: 1.5;
}
.ck2-info-row .ck2-icon {
  flex-shrink: 0;
  margin-top: 1px;
  width: 15px;
  height: 15px;
  stroke-width: 2;
  fill: none;
  stroke: currentColor;
}
/* Agendamento — azul */
.ck2-info-agendado {
  background: rgba(75,110,245,0.10);
  border: 1px solid rgba(75,110,245,0.25);
  color: #1E40AF;
}
.ck2-info-agendado .ck2-icon { stroke: #3B82F6; }

/* Descrição do serviço — cinza neutro */
.ck2-info-desc {
  background: var(--surface2, #141e38);
  border: 1px solid var(--bd, rgba(255,255,255,0.08));
  color: var(--tx2, #AAAAAA);
}
.ck2-info-desc .ck2-icon { stroke: var(--tx3, #AAAAAA); }

/* Material por conta do cliente — âmbar */
.ck2-info-material {
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.20);
  border-left: 3px solid #F59E0B;
  color: #92400E;
}
.ck2-info-material .ck2-icon { stroke: #F59E0B; }

/* ── [v4] Foto do prestador no card de pedido contratado (cliente) */
.pcc-prest-row { display: flex; align-items: center; gap: 10px; }
.pcc-prest-foto {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--bd, rgba(255,255,255,0.08)); flex-shrink: 0;
}
.pcc-prest-foto-init {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #00C2FF, #CC3D00);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
}
.pcc-prest-info { flex: 1; min-width: 0; }

/* ── Botão "Estou a caminho" ──────────────────────────────────── */
.pcc-btn-acaminho {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 10px 14px;
  background: rgba(26,158,255,0.10); border: 1.5px solid rgba(26,158,255,0.20);
  border-radius: var(--r-sm, 10px);
  font-size: 13px; font-weight: 700; color: #1A9EFF;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
  margin-bottom: 8px;
}
.pcc-btn-acaminho:hover { background: rgba(26,158,255,0.18); }
.pcc-btn-acaminho:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Modal de perfil público do prestador ────────────────────── */
.pp-box { max-height: 85vh; overflow-y: auto; }
.pp-topo { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0 12px; }
.pp-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bd); flex-shrink: 0; }
.pp-foto-init {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #00C2FF, #CC3D00);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
}
.pp-nome { font-size: 17px; font-weight: 800; color: var(--tx); margin-bottom: 3px; }
.pp-loc { font-size: 12px; color: var(--tx3); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.pp-nota { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.pp-nct { font-size: 11px; color: var(--tx3); }
.pp-stats {
  display: flex; gap: 0; border: 1px solid var(--bd);
  border-radius: var(--r-sm); overflow: hidden; margin: 12px 0;
}
.pp-stat { flex: 1; text-align: center; padding: 10px 6px; }
.pp-stat + .pp-stat { border-left: 1px solid var(--bd); }
.pp-stat-n { font-size: 16px; font-weight: 800; color: var(--tx); }
.pp-stat-l { font-size: 10px; color: var(--tx3); margin-top: 2px; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pp-tag {
  padding: 4px 10px; background: rgba(0,201,184,.12);
  border: 1px solid var(--pr-lt2, #CCF5F2); border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--pr, #00C9B8);
}
.pp-svc { font-size: 13px; color: var(--tx2); line-height: 1.5; margin-bottom: 12px; padding: 10px 12px; background: var(--surface2); border-radius: var(--r-sm); }
.pp-avs-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 8px; }
.pp-avs { display: flex; flex-direction: column; gap: 8px; }
.pp-av { padding: 10px 12px; background: var(--surface2); border-radius: var(--r-sm); }
.pp-av-stars { margin-bottom: 4px; }
.pp-av-txt { font-size: 13px; color: var(--tx2); line-height: 1.4; }
.pp-av-resp { font-size: 12px; color: var(--tx3); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--pr); font-style: italic; }

/* ── Dashboard de ganhos ──────────────────────────────────────── */
.dg-box { max-height: 85vh; overflow-y: auto; }
.dg-cards { display: flex; gap: 10px; margin: 12px 0 16px; }
.dg-card {
  flex: 1; padding: 14px 12px; background: var(--surface2);
  border: 1px solid var(--bd); border-radius: var(--r-sm); text-align: center;
}
.dg-card-dest { background: rgba(0,201,184,.12); border-color: var(--pr-lt2, #CCF5F2); }
.dg-card-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 6px; }
.dg-card-val { font-size: 20px; font-weight: 800; color: var(--tx); }
.dg-card-dest .dg-card-val { color: var(--pr, #00C9B8); }
.dg-card-sub { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.dg-tx-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 8px; }
.dg-txs { display: flex; flex-direction: column; gap: 6px; }
.dg-tx { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface2); border-radius: var(--r-sm); font-size: 13px; }
.dg-tx-desc { color: var(--tx2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.dg-tx-val { font-weight: 700; flex-shrink: 0; }

/* ── Carteira 3 colunas (disponivel / reserva / este-mes) ─────── */
.wallet-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.wallet-sub {
  min-width: 0;
}
.wallet-sub-label {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: 9px;
}
.wallet-sub-val {
  font-size: 14px;
}
/* Reserva em cor mais suave — não é dinheiro disponível ainda */
#prest-wallet-reserva {
  color: rgba(255,255,255,0.55) !important;
}

/* ════ Histórico de faturamento — chips de filtro ════ */
.hist-chip {
  background: transparent;
  border: 1.5px solid var(--bd);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx3);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  letter-spacing: .2px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
  line-height: 1;
}
.hist-chip:hover {
  border-color: rgba(255,255,255,.2);
  color: var(--tx2, #CCCCCC);
}
.hist-chip-ativo {
  background: rgba(0,201,184,.12);
  border-color: var(--pr, #00C9B8);
  color: var(--pr, #00C9B8);
  box-shadow: 0 0 0 1px rgba(0,201,184,.15);
}