/* ================================================
   MãoCerta - Estilos Mobile-First
   Fonte: Nunito (arredondada, amigável, moderna)
   Cor principal: #FF5A1F (laranja vibrante)
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --primary:     #FF5A1F;
  --primary-dk:  #E04510;
  --primary-lt:  #FFF0EB;
  --surface:     #FFFFFF;
  --bg:          #F5F6FA;
  --text:        #1A1A2E;
  --text-soft:   #6B7280;
  --border:      #E5E7EB;
  --success:     #10B981;
  --warning:     #F59E0B;
  --danger:      #EF4444;
  --info:        #3B82F6;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 4px 20px rgba(0,0,0,0.08);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.12);
  --transition:  0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;  /* prevent horizontal scroll on narrow viewports */
}

/* ── LAYOUT WRAPPER ─────────────────────────── */
.app-wrapper {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;  /* contain all child elements */
}

/* ── PAGES ──────────────────────────────────── */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ── TOP BAR ────────────────────────────────── */
.topbar {
  background: var(--surface);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.topbar-logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.5px;
}
.topbar-logo span { color: var(--text); }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
}
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

/* ── HERO / WELCOME ─────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, #FF8C42 100%);
  color: #fff;
  padding: 40px 24px 56px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -20px; right: -20px;
  height: 60px;
  background: var(--bg);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero-tag {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hero h1 { font-size: 28px; font-weight: 900; line-height: 1.2; margin-bottom: 8px; }
.hero p  { font-size: 14px; opacity: 0.9; }
.hero-bubbles {
  position: absolute;
  top: 10px; right: 20px;
  font-size: 48px;
  opacity: 0.15;
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── CARDS ──────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary-lt);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.card-title  { font-size: 16px; font-weight: 800; color: var(--text); }
.card-subtitle { font-size: 13px; color: var(--text-soft); margin-top: 2px; }

/* ── SECTION ────────────────────────────────── */
.section { padding: 20px; }
.section-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .emoji { font-size: 20px; }

/* ── FORMS ──────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-control {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(255,90,31,0.12);
}
.form-control::placeholder { color: #C4C9D4; font-weight: 400; }
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
textarea.form-control { resize: none; min-height: 90px; }

/* ── BUTTONS ────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 52px;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #FF8C42 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,90,31,0.35);
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(255,90,31,0.45); }
.btn-secondary {
  background: var(--primary-lt);
  color: var(--primary);
}
.btn-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}
.btn-danger {
  background: #FEF2F2;
  color: var(--danger);
}
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  box-shadow: none;
}
.btn-sm { padding: 10px 16px; font-size: 13px; min-height: 40px; width: auto; }
.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}
.btn:disabled { opacity: 0.55; pointer-events: none; }

/* ── BOTTOM TAB BAR ─────────────────────────── */
.tabbar {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  transition: color var(--transition);
  border: none;
  background: none;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tab-icon { font-size: 22px; line-height: 1; }
.tab-item.active { color: var(--primary); }
.tab-item.active .tab-icon { animation: tab-pop 0.2s ease; }
@keyframes tab-pop { 0%{transform:scale(0.8)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* ── STATUS BADGES ──────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-solicitado  { background: #EEF2FF; color: var(--info); }
.badge-aceito      { background: #ECFDF5; color: var(--success); }
.badge-em_andamento{ background: #FEF3C7; color: var(--warning); }
.badge-finalizado  { background: #F0FDF4; color: #166534; }
.badge-recusado    { background: #FEF2F2; color: var(--danger); }

/* ── PEDIDO CARD ────────────────────────────── */
.pedido-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
  transition: border-color var(--transition);
}
.pedido-card.solicitado   { border-left-color: var(--info); }
.pedido-card.aceito       { border-left-color: var(--success); }
.pedido-card.em_andamento { border-left-color: var(--warning); }
.pedido-card.finalizado   { border-left-color: #166534; }

.pedido-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pedido-tipo { font-size: 15px; font-weight: 800; }
.pedido-desc { font-size: 13px; color: var(--text-soft); margin-bottom: 6px; }
.pedido-local { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 4px; }
.pedido-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── AUTH PAGES ─────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--primary) 0%, #FF8C42 45%, var(--bg) 45%);
}
.auth-top {
  padding: 60px 24px 30px;
  color: #fff;
}
.auth-logo { font-size: 32px; font-weight: 900; letter-spacing: -1px; margin-bottom: 6px; }
.auth-logo span { opacity: 0.7; }
.auth-tagline { font-size: 15px; opacity: 0.85; font-weight: 600; }
.auth-card {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 40px;
  flex: 1;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
}
.auth-title { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.auth-subtitle { font-size: 14px; color: var(--text-soft); margin-bottom: 24px; }
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-soft);
}
.auth-switch a { color: var(--primary); font-weight: 800; text-decoration: none; }
.tipo-selector { display: flex; gap: 10px; margin-bottom: 16px; }
.tipo-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.tipo-btn.active {
  border-color: var(--primary);
  background: var(--primary-lt);
  color: var(--primary);
}

/* ── LOADING / TOAST ────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
  display: none;
}
.loading-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 36px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--primary-lt);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; font-weight: 700; color: var(--text-soft); }

.toast {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  z-index: 9000;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  max-width: 90%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }

/* ── EMPTY STATE ────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-soft);
}
.empty-icon { font-size: 56px; margin-bottom: 12px; }
.empty-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.empty-sub { font-size: 14px; }

/* ── SCROLLABLE CONTENT ─────────────────────── */
.page-content { padding-bottom: 90px; }

/* ── DIVIDER ────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  color: var(--text-soft); font-size: 13px; font-weight: 600;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── PROFILE CARD ───────────────────────────── */
.profile-header {
  background: linear-gradient(135deg, var(--primary), #FF8C42);
  padding: 32px 24px 24px;
  color: #fff;
  text-align: center;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900;
  margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,0.5);
}
.profile-name { font-size: 22px; font-weight: 900; }
.profile-role { font-size: 13px; opacity: 0.8; margin-top: 4px; font-weight: 600; }

/* ── QUICK CATEGORIES ───────────────────────── */
.categories { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; }
.categories::-webkit-scrollbar { display: none; }
.category-chip {
  flex-shrink: 0;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all var(--transition);
  white-space: nowrap;
}
.category-chip:active, .category-chip.active {
  background: var(--primary-lt);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── STATS ROW ──────────────────────────────── */
.stats-row { display: flex; gap: 10px; margin-bottom: 20px; }
.stat-card {
  flex: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-value { font-size: 28px; font-weight: 900; color: var(--primary); }
.stat-label { font-size: 11px; color: var(--text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── RESPONSIVE ─────────────────────────────── */
@media (min-width: 480px) {
  .app-wrapper { box-shadow: 0 0 40px rgba(0,0,0,0.12); }
}

/* ── NOTIFICAÇÕES - PAINEL LATERAL ──────────────── */
.notif-panel {
  position: fixed;
  top: 0; right: -100%;
  width: min(100%, 400px);
  height: 100vh;
  background: var(--surface);
  z-index: 500;
  transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.notif-panel.open { right: 0; }

.notif-panel-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.notif-panel-title {
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}
.notif-panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background var(--transition);
}
.btn-icon:hover { background: var(--border); }

.notif-list { overflow-y: auto; flex: 1; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
  background: #FFFBF9;
}
.notif-item.lida { background: var(--surface); }
.notif-item:hover { background: var(--bg); }
.notif-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-lt);
  border-radius: 50%;
}
.notif-item.lida .notif-icon { background: var(--bg); }
.notif-body { flex: 1; min-width: 0; }
.notif-titulo { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.notif-msg { font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text-soft); margin-top: 4px; font-weight: 600; }
.notif-dot {
  width: 10px; height: 10px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── BADGE no ícone ──────────────────────────────── */
.notif-btn-wrap {
  position: relative;
  display: inline-flex;
}
.notif-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--surface);
  line-height: 1;
}

/* Badge na tab bar */
.tab-badge {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--surface);
}
.tab-item { position: relative; }

/* ── OVERLAY notificações ────────────────────────── */
.notif-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 499;
  display: none;
  backdrop-filter: blur(2px);
}
.notif-overlay.show { display: block; }

/* ── IN-APP NOTIFICATION BANNER ──────────────────── */
.in-app-notif {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 440px;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  z-index: 9999;
  transition: top 0.4s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.in-app-notif.show { top: 12px; }
.ian-icon { font-size: 24px; flex-shrink: 0; }
.ian-content { flex: 1; }
.ian-title { font-size: 14px; font-weight: 800; margin-bottom: 2px; }
.ian-msg { font-size: 12px; opacity: 0.8; line-height: 1.3; }

/* ── INDICADOR TEMPO REAL ────────────────────────── */
.realtime-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  padding: 4px 10px;
  background: #ECFDF5;
  border-radius: 20px;
}
.pulse-dot {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-anim 1.5s ease-in-out infinite;
  display: inline-block;
}
@keyframes pulse-anim {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ── CARD NOVO (animação entrada) ────────────────── */
.card-novo {
  animation: card-enter 0.5s cubic-bezier(0.34,1.56,0.64,1);
  border: 2px solid var(--success) !important;
}
@keyframes card-enter {
  from { transform: translateY(-20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── STATUS BAR ──────────────────────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 700;
}

/* ── TOPBAR COM NOTIF ────────────────────────────── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── REFRESH BTN ─────────────────────────────────── */
.btn-refresh {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform var(--transition);
}
.btn-refresh:active { transform: rotate(180deg); }

/* ── CONN STATUS ─────────────────────────────────── */
.conn-status {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  z-index: 300;
  display: none;
}
.conn-status.show { display: block; }

/* ═══════════════════════════════════════════════════════
   UX v3 — Conversão + Velocidade
   ═══════════════════════════════════════════════════════ */

/* ── DEMO LOGIN BUTTONS ──────────────────────────────── */
.demo-logins { display: flex; flex-direction: column; gap: 8px; }
.demo-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition); text-align: left;
  font-family: 'Nunito', sans-serif;
}
.demo-btn:active { background: var(--primary-lt); border-color: var(--primary); }
.demo-icon { font-size: 22px; }
.demo-role { font-size: 13px; font-weight: 800; color: var(--text); }
.demo-email { font-size: 12px; color: var(--text-soft); }
.demo-arrow { margin-left: auto; color: var(--text-soft); font-size: 16px; }

/* ── PASSWORD TOGGLE ─────────────────────────────────── */
.input-password-wrap { position: relative; }
.input-password-wrap .form-control { padding-right: 48px; }
.toggle-senha {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 18px;
  padding: 4px; color: var(--text-soft); line-height: 1;
}

/* ── WIZARD — CLIENTE ────────────────────────────────── */
.wizard-step { animation: fadeSlideIn 0.25s ease; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.wizard-hero {
  background: linear-gradient(135deg, var(--primary) 0%, #FF8C42 100%);
  padding: 28px 24px 20px;
  color: #fff;
}
.wizard-greeting { font-size: 14px; font-weight: 700; opacity: 0.85; margin-bottom: 4px; }
.wizard-title { font-size: 24px; font-weight: 900; line-height: 1.2; margin-bottom: 4px; }
.wizard-sub { font-size: 13px; opacity: 0.8; }

/* Social proof bar */
.social-proof-bar {
  background: #FFF3ED;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  border-bottom: 1px solid #FFE0D0;
}
.sp-dot {
  width: 8px; height: 8px; background: var(--success); border-radius: 50%;
  animation: pulse-anim 1.5s infinite;
  flex-shrink: 0;
}

/* Service grid — 4 colunas, tiles grandes e tocáveis */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px;
}
.service-tile {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;        /* prevent content spill */
  min-width: 0;            /* allow shrink in grid */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service-tile:active {
  transform: scale(0.92);
  border-color: var(--primary);
  background: var(--primary-lt);
}
.service-tile.selected {
  border-color: var(--primary);
  background: var(--primary-lt);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.15);
}
.service-tile-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.service-tile-name { font-size: 11px; font-weight: 800; color: var(--text); line-height: 1.2; }

/* Categoria sections — catálogo expandido */
.cat-section {
  margin-bottom: 4px;
}
.cat-section-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px 4px;
}
.cat-section .service-grid {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Wizard step 2 */
.wizard-back-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 61px; z-index: 50;
}
.btn-back {
  background: none; border: none; cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--primary);
  padding: 6px 0;
}
.wizard-servico-badge {
  background: var(--primary-lt); color: var(--primary);
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 800;
}

.wizard-progress { padding: 12px 16px 0; }
.progress-bar {
  height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 6px;
}
.progress-fill {
  height: 100%; background: var(--primary); border-radius: 3px;
  transition: width 0.4s ease;
}
.progress-label { font-size: 12px; color: var(--text-soft); font-weight: 700; }

/* Quick description chips */
.quick-desc-chips {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px;
}
.qdchip {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: 'Nunito', sans-serif; color: var(--text);
  transition: all var(--transition);
}
.qdchip:active { background: var(--primary-lt); border-color: var(--primary); color: var(--primary); }

/* Char counter */
.char-counter { text-align: right; font-size: 11px; color: var(--text-soft); margin-top: 4px; font-weight: 600; }
.char-counter.over { color: var(--danger); }

/* Input with icon prefix */
.input-icon-wrap { position: relative; }
.input-prefix-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; pointer-events: none; z-index: 1;
}
.input-with-icon { padding-left: 40px !important; }

/* Urgency box */
.urgency-box {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #FFF3ED, #FFF8F5);
  border: 1.5px solid #FFD5C2;
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 16px;
}
.urgency-icon { font-size: 24px; flex-shrink: 0; }
.urgency-title { font-size: 14px; font-weight: 800; color: var(--primary); }
.urgency-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* Big CTA button */
.btn-grande { font-size: 17px; min-height: 58px; border-radius: 14px; letter-spacing: 0.3px; }

.form-hint {
  text-align: center; font-size: 12px; color: var(--text-soft);
  margin-top: 10px; font-weight: 600;
}

/* ── MODAL SUCESSO ───────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-box {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 40px;
  width: 100%; max-width: 480px;
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal-icon-big { font-size: 56px; text-align: center; margin-bottom: 12px; }
.modal-title { font-size: 24px; font-weight: 900; text-align: center; margin-bottom: 6px; }
.modal-subtitle { font-size: 14px; color: var(--text-soft); text-align: center; margin-bottom: 20px; }

.modal-info-row {
  display: flex; gap: 12px; margin-bottom: 20px;
}
.modal-info-item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 12px;
}
.modal-info-icon { font-size: 20px; flex-shrink: 0; }
.modal-info-label { font-size: 11px; color: var(--text-soft); font-weight: 700; text-transform: uppercase; }
.modal-info-value { font-size: 14px; font-weight: 800; }

.modal-status-anim { margin-bottom: 20px; }
.modal-status-track {
  height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 8px;
}
.modal-status-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #FF8C42);
  border-radius: 4px;
  width: 0%;
  transition: width 3s ease-out;
}
.modal-status-label { font-size: 12px; color: var(--text-soft); font-weight: 700; text-align: center; }

/* Confetti particles */
.modal-confetti {
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  pointer-events: none; overflow: hidden; border-radius: 24px 24px 0 0;
}
.confetti-piece {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  animation: confettiFall 1.2s ease-out forwards;
  top: -10px;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(80px) rotate(540deg); opacity: 0; }
}

/* ── MODAL ACEITE RÁPIDO (PRESTADOR) ─────────────────── */
.modal-aceite-box {
  border-radius: 24px 24px 0 0;
  padding: 20px 20px 36px;
}
.modal-aceite-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.modal-aceite-emoji {
  font-size: 36px; flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.modal-aceite-tipo { font-size: 18px; font-weight: 900; }
.modal-aceite-novo {
  font-size: 12px; font-weight: 700; color: var(--success);
  margin-top: 2px;
}
.modal-close-x {
  margin-left: auto; background: var(--bg); border: none;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.modal-aceite-desc {
  font-size: 15px; color: var(--text);
  background: var(--bg); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 14px;
  font-weight: 600; line-height: 1.5;
}
.modal-aceite-meta {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.aceite-meta-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-soft); font-weight: 600;
}
.aceite-tempo { color: var(--success); font-weight: 700; }
.modal-aceite-actions { display: flex; gap: 10px; align-items: stretch; }

/* ── PRESTADOR HERO COMPACTO ─────────────────────────── */
.prest-hero {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  padding: 20px 20px 16px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
}
.prest-greeting { font-size: 14px; font-weight: 700; opacity: 0.85; margin-bottom: 4px; }
.prest-status-row { display: flex; gap: 8px; align-items: center; }
.prest-status-online {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; opacity: 0.9;
}
.prest-hero-counter {
  text-align: center;
  background: rgba(255,255,255,0.15);
  border-radius: 14px; padding: 10px 20px;
}
.prest-counter-num { font-size: 36px; font-weight: 900; line-height: 1; }
.prest-counter-label { font-size: 11px; opacity: 0.8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── CARD PEDIDO v3 (prestador) ──────────────────────── */
.pedido-card-v3 {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  border: 1.5px solid var(--border);
  transition: box-shadow var(--transition);
}
.pedido-card-v3.novo { border-color: var(--success); animation: card-enter 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.pedido-card-v3:active { box-shadow: none; }

/* Topo colorido: emoji grande + tipo + urgência */
.pcv3-top {
  padding: 14px 16px 12px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.pcv3-emoji {
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--primary-lt); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.pcv3-titulo { flex: 1; }
.pcv3-tipo { font-size: 16px; font-weight: 900; }
.pcv3-urgencia { font-size: 11px; color: var(--success); font-weight: 700; margin-top: 2px; }
.pcv3-tempo {
  font-size: 12px; font-weight: 700; color: var(--text-soft);
  white-space: nowrap;
}
.pcv3-tempo.recente { color: var(--success); }

/* Corpo do card */
.pcv3-body { padding: 12px 16px; }
/* pcv3-card layout fix */
.pcv3-card { overflow: hidden; width: 100%; box-sizing: border-box; }
.pcv3-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

.pcv3-desc {
  font-size: 14px; color: var(--text); font-weight: 600;
  margin-bottom: 8px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcv3-meta {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
}
.pcv3-meta-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-soft); font-weight: 600;
}

/* Botão aceitar — full width, grande, verde */
.pcv3-aceitar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 32px);
  margin: 0 16px 14px;
  padding: 15px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff; border: none; border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-size: 16px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16,185,129,0.35);
  transition: all var(--transition);
  min-height: 52px;
}
.pcv3-aceitar:active { transform: scale(0.97); box-shadow: none; }
.pcv3-aceitar:disabled { opacity: 0.55; pointer-events: none; }

/* ── CARD PEDIDO CLIENTE v3 ──────────────────────────── */
.pedido-card-cliente {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  border-left: 4px solid transparent;
}
.pedido-card-cliente.solicitado   { border-left-color: var(--info); }
.pedido-card-cliente.aceito       { border-left-color: var(--success); }
.pedido-card-cliente.em_andamento { border-left-color: var(--warning); }
.pedido-card-cliente.finalizado   { border-left-color: #166534; }

.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: var(--text-soft); margin-bottom: 6px; }
.pcc-local { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 4px; }
.pcc-prestador {
  margin-top: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, #ECFDF5, #F0FFF4);
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-sm);
}
.pcc-prest-name { font-size: 14px; font-weight: 800; color: #065F46; }
.pcc-prest-tel { font-size: 12px; color: #047857; margin-top: 2px; }
.pcc-prest-action {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
}
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 6px;
  background: #25D366; color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
}
.pcc-time { font-size: 11px; color: var(--text-soft); margin-top: 6px; font-weight: 600; }

/* Status pill de progresso */
/* ── STEPPER DE STATUS ── */
.status-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 16px 0 8px;
  padding: 0 2px;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.status-progress::-webkit-scrollbar { display: none; }

/* Linha de fundo (cinza) */
.status-progress::before {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(10% + 4px);
  right: calc(10% + 4px);
  height: 3px;
  background: var(--border, #E5E7EB);
  border-radius: 2px;
  z-index: 0;
}

/* Linha de progresso animada (preenchida) */
.status-progress::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(10% + 4px);
  height: 3px;
  border-radius: 2px;
  z-index: 1;
  background: linear-gradient(90deg, #10B981, var(--primary, #FF5A1F));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* largura controlada via CSS custom property --sp-fill */
  width: var(--sp-fill, 0%);
}

.sp-step {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-weight: 600;
  color: #9CA3AF;
  transition: color 0.3s ease;
}

.sp-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--border, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #9CA3AF;
  position: relative;
  z-index: 2;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
}

/* ── done (verde) */
.sp-step.done { color: #059669; }
.sp-step.done .sp-step-dot {
  background: #10B981;
  border-color: #10B981;
  color: #fff;
  font-size: 12px;
}

/* ── current (laranja) */
.sp-step.current { color: var(--primary, #FF5A1F); font-weight: 700; }
.sp-step.current .sp-step-dot {
  background: var(--primary, #FF5A1F);
  border-color: var(--primary, #FF5A1F);
  color: #fff;
  transform: scale(1.22);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.18);
}

/* ── pending (cinza padrão já definido acima) */

.sp-step span {
  text-align: center;
  line-height: 1.2;
  max-width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── MEUS SERVIÇOS — card prestador ──────────────────── */
.servico-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.sc-header {
  padding: 14px 16px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.sc-tipo { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sc-body { padding: 10px 16px 14px; }
.sc-cliente {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sc-nome { font-size: 14px; font-weight: 700; }
.sc-tel a {
  color: var(--success); font-size: 13px; font-weight: 700;
  text-decoration: none; display: flex; align-items: center; gap: 4px;
}
.sc-desc { font-size: 13px; color: var(--text-soft); margin-bottom: 10px; }
.sc-local { font-size: 12px; color: var(--text-soft); margin-bottom: 12px; }
.sc-actions { display: flex; gap: 8px; }

/* Botão de status com progress fill */
.btn-status-iniciar {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px;
  background: var(--primary-lt); color: var(--primary);
  border: 2px solid var(--primary); border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: all var(--transition); min-height: 48px;
}
.btn-status-iniciar:active { background: var(--primary); color: #fff; }

.btn-status-finalizar {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px;
  background: linear-gradient(135deg, #10B981, #059669); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800;
  cursor: pointer; box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  min-height: 48px;
}
.btn-status-finalizar:disabled { opacity: 0.55; pointer-events: none; }

/* ── EMPTY STATE PRESTADOR ─────────────────────────── */
.empty-monit {
  text-align: center; padding: 48px 24px;
}
.empty-monit-icon { font-size: 52px; margin-bottom: 12px; }
.empty-monit-title { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.empty-monit-sub { font-size: 14px; color: var(--text-soft); margin-bottom: 20px; }
.empty-monit-pulse {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ECFDF5; color: var(--success);
  padding: 10px 20px; border-radius: 50px;
  font-size: 13px; font-weight: 800;
}

/* ═══════════════════════════════════════════════════════
   CHAT — estilo iMessage/WhatsApp
   ═══════════════════════════════════════════════════════ */

/* ── Chat page: ocupa tela inteira ─────────────────── */
.chat-page {
  position: fixed !important;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  min-height: 0 !important;   /* cancela min-height:100vh herdado de .page */
  height: 100%;                /* altura total do viewport */
  z-index: 800;
  background: #F0F2F5;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-page.active {
  display: flex !important;
}

/* ── Header ─────────────────────────────────────────── */
.chat-header {
  background: var(--surface);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  min-height: 62px;
}
.chat-back {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--primary);
  padding: 4px 8px 4px 0;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-header-avatar.prestador { background: var(--success); }
.chat-header-nome {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-sub {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-status {
  flex-shrink: 0;
}
.chat-online-dot {
  width: 9px; height: 9px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-anim 2s infinite;
}

/* ── Mensagens ──────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Data separador */
.chat-date-sep {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  margin: 10px 0 6px;
  position: relative;
}
.chat-date-sep::before, .chat-date-sep::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--border);
}
.chat-date-sep::before { left: 0; }
.chat-date-sep::after  { right: 0; }

/* Bubble wrapper */
.chat-msg-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  animation: msgEntry 0.18s ease-out;
}
@keyframes msgEntry {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg-wrap.me  { align-self: flex-end; align-items: flex-end; }
.chat-msg-wrap.out { align-self: flex-start; align-items: flex-start; }

/* Bubble */
.chat-bubble {
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  word-break: break-word;
  position: relative;
}
/* Eu — direita, laranja */
.chat-msg-wrap.me .chat-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 5px;
}
/* Outro — esquerda, branco */
.chat-msg-wrap.out .chat-bubble {
  background: var(--surface);
  color: var(--text);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Agrupamento — reduz gap entre msgs da mesma pessoa */
.chat-msg-wrap.me + .chat-msg-wrap.me,
.chat-msg-wrap.out + .chat-msg-wrap.out {
  margin-top: 1px;
}
.chat-msg-wrap.me + .chat-msg-wrap.me .chat-bubble {
  border-bottom-right-radius: 18px;
  border-top-right-radius: 5px;
}
.chat-msg-wrap.out + .chat-msg-wrap.out .chat-bubble {
  border-bottom-left-radius: 18px;
  border-top-left-radius: 5px;
}

/* Hora */
.chat-msg-time {
  font-size: 10px;
  color: var(--text-soft);
  margin-top: 2px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-tick { color: var(--text-soft); font-size: 11px; }
.chat-tick.lida { color: var(--info); }

/* Mensagem de sistema */
.chat-system-msg {
  align-self: center;
  background: rgba(0,0,0,0.06);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  max-width: 80%;
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  display: none;
  padding: 8px 14px;
  background: var(--surface);
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  gap: 4px;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 4px;
}
.chat-typing.show { display: flex; }
.typing-dot {
  width: 7px; height: 7px;
  background: var(--text-soft);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-5px); }
}

/* Estado vazio no chat */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-soft);
  text-align: center;
  padding: 24px;
}
.chat-empty-icon { font-size: 48px; margin-bottom: 4px; }
.chat-empty-title { font-size: 17px; font-weight: 800; color: var(--text); }
.chat-empty-sub { font-size: 13px; max-width: 240px; }
.chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Input bar ───────────────────────────────────── */
.chat-input-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.chat-input-bar.blocked {
  background: var(--bg);
  pointer-events: none;
  opacity: 0.6;
}
.chat-input-wrap {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 9px 16px;
  transition: border-color var(--transition);
}
.chat-input-wrap:focus-within {
  border-color: var(--primary);
}
.chat-textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  resize: none;
  max-height: 100px;
  overflow-y: auto;
  line-height: 1.4;
  display: block;
}
.chat-textarea::placeholder { color: #C4C9D4; }

.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(255,90,31,0.35);
}
.chat-send-btn:disabled {
  background: var(--border);
  box-shadow: none;
  cursor: default;
}
.chat-send-btn:not(:disabled):active {
  transform: scale(0.92);
}

/* ── Lista de conversas ─────────────────────────────── */
.conversa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  border-radius: 0;
  position: relative;
}
.conversa-item:active { background: var(--bg); border-radius: var(--radius-sm); }
.conversa-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.conversa-avatar.prestador-av { background: var(--success); }
.conversa-body { flex: 1; min-width: 0; }
.conversa-nome {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversa-preview {
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.conversa-preview.unread {
  color: var(--text);
  font-weight: 700;
}
.conversa-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.conversa-hora {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
}
.conversa-unread-badge {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.conversa-servico-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  margin-bottom: 3px;
}
.conversa-servico-chip.chip-green {
  background: #ECFDF5;
  color: var(--success);
}

/* Status chip dentro do card de pedido (cliente) */
.pedido-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.pedido-chat-btn:active { transform: scale(0.96); }
.pedido-chat-unread {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* Blocked message banner */
.chat-blocked-bar {
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 700;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Scroll to bottom button */
.scroll-down-btn {
  position: fixed;
  bottom: 80px;
  right: calc(50% - 224px);   /* alinha dentro do chat (max-width 480px) */
  width: 36px; height: 36px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 850;
}
.scroll-down-btn.show { display: flex; }
/* Em telas menores que 480px vai para a borda direita */
@media (max-width: 480px) {
  .scroll-down-btn { right: 16px; }
}

/* ════════════════════════════════════════════════════════════
   MãoCerta — chat_whatsapp.css
   Cole este bloco no FINAL do style.css existente
   (ele sobrescreve os seletores antigos pelo efeito cascade)
   ════════════════════════════════════════════════════════════ */

/* ── Variáveis extras ─────────────────────────────────────── */
:root {
  --chat-bg:        #ECE5DD;     /* fundo do chat — tom clássico */
  --bubble-me:      #DCF8C6;     /* meu balão — verde WhatsApp */
  --bubble-me-dk:   #C8EEA8;
  --bubble-out:     #FFFFFF;     /* balão do outro */
  --tick-sent:      #8696A0;     /* ✓  (enviado) — cinza */
  --tick-read:      #53BDEB;     /* ✓✓ (lido)    — azul */
  --header-chat:    #075E54;     /* header verde WhatsApp */
  --header-text:    #FFFFFF;
  --sep-chip:       rgba(255,255,255,0.85);
  --input-bar-bg:   #F0F2F5;
}

/* ── PAGE-CHAT: fundo texturizado ─────────────────────────── */
#page-chat.chat-page {
  background: var(--chat-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4b9a8' fill-opacity='0.18'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Header (verde escuro estilo WA) ──────────────────────── */
.chat-header {
  background: var(--header-chat);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
  min-height: 64px;
  padding: 10px 16px;
}
.chat-back {
  color: #fff;
  font-size: 20px;
  opacity: 0.9;
}
.chat-back:hover { opacity: 1; }

.chat-header-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #128C7E;
  border: 2px solid rgba(255,255,255,0.25);
  font-size: 17px;
}
.chat-header-avatar.prestador { background: #25D366; }

.chat-header-nome {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.chat-header-sub {
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Status dot no sub-header */
.chat-status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #25D366;
}
.chat-status-dot.typing-dot-header {
  background: #FFD700;
  animation: typingBounce 1s infinite;
}

/* ── Chat messages área ───────────────────────────────────── */
.chat-messages {
  padding: 12px 10px 6px;
  gap: 2px;
  background: transparent;
}

/* ── Separador de data (chip estilizado) ──────────────────── */
.chat-date-sep {
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
}
.chat-date-sep::before, .chat-date-sep::after { display: none; }
.chat-date-sep span {
  background: var(--sep-chip);
  color: #54656F;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  letter-spacing: 0.02em;
}

/* ── Bubble (refatorado) ──────────────────────────────────── */
.chat-msg-wrap {
  display: flex;
  flex-direction: column;
  max-width: min(80%, 420px);
  animation: msgEntry 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.1);
}
@keyframes msgEntry {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-msg-wrap.me  { align-self: flex-end;   align-items: flex-end; }
.chat-msg-wrap.out { align-self: flex-start; align-items: flex-start; }

/* Espaçamento entre grupos */
.chat-msg-wrap + .chat-msg-wrap { margin-top: 3px; }
.chat-msg-wrap.grouped { margin-top: 1px; }

/* Animação sutil ao mudar status */
@keyframes statusFlash {
  0%   { opacity: 1; }
  40%  { opacity: 0.5; }
  100% { opacity: 1; }
}
.chat-msg-wrap.status-changed .chat-msg-tick {
  animation: statusFlash 0.4s ease;
}

/* Bubble principal */
.chat-bubble {
  padding: 7px 12px 4px;
  border-radius: 12px;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Bubble "meu" — verde, cauda direita */
.chat-msg-wrap.me .chat-bubble {
  background: var(--bubble-me);
  border-bottom-right-radius: 4px;
}
.chat-msg-wrap.me.grouped .chat-bubble {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Bubble "outro" — branco, cauda esquerda */
.chat-msg-wrap.out .chat-bubble {
  background: var(--bubble-out);
  border-bottom-left-radius: 4px;
}
.chat-msg-wrap.out.grouped .chat-bubble {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* Texto + meta dentro do bubble */
.chat-bubble-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: #111B21;
  font-weight: 500;
}
.chat-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
}
.chat-msg-time {
  font-size: 10.5px;
  color: #667781;
  font-weight: 500;
  white-space: nowrap;
}
.chat-link {
  color: #007AFF;
  text-decoration: underline;
  word-break: break-all;
}

/* ── Ticks (SVG inline) ───────────────────────────────────── */
.chat-msg-tick {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.chat-tick { vertical-align: middle; }
.chat-tick.enviado   { color: var(--tick-sent); }
.chat-tick.entregue  { color: var(--tick-sent); }
.chat-tick.lido      { /* cor já no SVG stroke="#4FC3F7" */ }
.chat-tick.sending   { color: var(--tick-sent); opacity: 0.6; }

/* ── Typing indicator (bolinhas dentro do chat) ───────────── */
#chat-typing-indicator.chat-typing-bubble {
  display: none;
  align-self: flex-start;
  background: #fff;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  margin: 2px 0 4px;
  gap: 4px;
  align-items: center;
  animation: msgEntry 0.16s ease-out;
}
#chat-typing-indicator.chat-typing-bubble.show { display: flex; }

.typing-dot {
  width: 7px; height: 7px;
  background: #8696A0;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0) scale(1); }
  30%          { transform: translateY(-5px) scale(1.1); }
}

/* ── Loading dots (substituição do spinner no chat) ──────── */
.chat-loading-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-loading-dots span {
  width: 9px; height: 9px;
  background: #128C7E;
  border-radius: 50%;
  animation: typingBounce 1s infinite ease-in-out;
  opacity: 0.7;
}
.chat-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-loading-dots span:nth-child(3) { animation-delay: 0.30s; }

/* ── Input bar ────────────────────────────────────────────── */
.chat-input-bar {
  background: var(--input-bar-bg);
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}
.chat-input-wrap {
  background: #fff;
  border: none;
  border-radius: 24px;
  padding: 8px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
.chat-input-wrap:focus-within {
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
.chat-textarea {
  font-size: 15px;
  color: #111B21;
}
.chat-textarea::placeholder { color: #ADB5BD; }

.chat-send-btn {
  width: 48px; height: 48px;
  background: #128C7E;
  box-shadow: 0 2px 8px rgba(18,140,126,0.4);
  transition: all 0.2s;
}
.chat-send-btn:not(:disabled):hover { background: #0d7a6e; }
.chat-send-btn.sending {
  animation: sendPulse 0.6s ease infinite alternate;
}
@keyframes sendPulse {
  from { transform: scale(1); box-shadow: 0 2px 8px rgba(18,140,126,0.4); }
  to   { transform: scale(1.06); box-shadow: 0 4px 14px rgba(18,140,126,0.55); }
}
.chat-send-btn:disabled { background: #B0BEC5; box-shadow: none; }

/* ── Mensagem de sistema ──────────────────────────────────── */
.chat-system-msg {
  background: rgba(255,255,255,0.78);
  color: #54656F;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ── Blocked bar ──────────────────────────────────────────── */
.chat-blocked-bar {
  background: #FFF3CD;
  color: #856404;
  border-top: 1px solid #FFEEBA;
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 16px;
  text-align: center;
}

/* ── Scroll-to-bottom + badge de novas msgs ──────────────── */
.scroll-down-btn {
  bottom: 80px;
  right: calc(50% - 220px);
  width: 42px; height: 42px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 14px rgba(0,0,0,0.18);
  font-size: 18px;
  color: #128C7E;
  position: relative;
  flex-direction: column;
  gap: 0;
}
.scroll-down-btn.show { display: flex; }
.scroll-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #25D366;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
}
@media (max-width: 480px) {
  .scroll-down-btn { right: 14px; }
}

/* ── Lista de conversas (refatorada) ──────────────────────── */
.chat-list-loading {
  display: flex;
  justify-content: center;
  padding: 32px;
}
.conversa-item {
  padding: 13px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: 12px;
  border-radius: 0;
  transition: background 0.15s;
}
.conversa-item:active { background: rgba(0,0,0,0.04); }

.conversa-avatar {
  width: 52px; height: 52px;
  font-size: 21px;
  background: #128C7E;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.conversa-avatar.prestador-av { background: #25D366; }

.conv-unread-dot {
  position: absolute;
  top: -3px; right: -3px;
  background: #25D366;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  padding: 0 3px;
}

.conversa-body { flex: 1; min-width: 0; gap: 0; }

.conversa-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.conversa-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.conversa-nome {
  font-size: 15px;
  font-weight: 700;
  color: #111B21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversa-hora {
  font-size: 11px;
  color: #8696A0;
  font-weight: 500;
  flex-shrink: 0;
}
.conversa-hora.unread-hora { color: #25D366; font-weight: 700; }

.conversa-preview {
  font-size: 13px;
  color: #667781;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 400;
}
.conversa-preview.unread { color: #111B21; font-weight: 600; }

/* Ticks na lista */
.conv-tick { display: inline-flex; align-items: center; flex-shrink: 0; }
.conv-tick svg { vertical-align: middle; }

.conversa-unread-badge {
  background: #25D366;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

.conversa-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.conversa-chip.chip-green { background: #E8F5E9; color: #2E7D32; }
.conversa-chip:not(.chip-green) { background: #F3F4F6; color: #6B7280; }

/* Remove estilos antigos sobrepostos */
.conversa-servico-chip { display: none !important; }
.conversa-right        { display: none !important; }

/* ── Botão de anexo (imagem) no chat ─────────────────────── */
.chat-attach-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; flex-shrink: 0;
  color: #8696A0;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.chat-attach-btn:active { color: #128C7E; }

/* ── Lightbox imagem ────────────────────────────────────── */
.chat-img-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
}
.chat-img-overlay img { max-width: 95vw; max-height: 90vh; border-radius: 4px; }
.chat-img-overlay-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.15); border: none;
  color: #fff; font-size: 22px; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-img { max-width: 220px; max-height: 260px; border-radius: 8px; cursor: pointer; display: block; }
.chat-img-error { font-size: 12px; opacity: 0.6; padding: 8px; }

/* ══════════════════════════════════════════════════════════
   SISTEMA DE AVALIAÇÕES — MãoCerta
   ══════════════════════════════════════════════════════════ */

/* Modal avaliação */
.modal-av-box {
  max-width: 380px;
}
.modal-av-header { text-align: center; margin-bottom: 20px; }
.modal-av-emoji  { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.modal-av-titulo { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--text); }
.modal-av-sub    { font-size: 13px; color: var(--text-soft); margin: 0; }

/* Estrelas interativas */
.star-rating {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 6px;
}
.star-btn {
  background: none; border: none; font-size: 42px; cursor: pointer;
  color: #D1D5DB; transition: color .15s, transform .12s;
  padding: 0; line-height: 1; -webkit-tap-highlight-color: transparent;
}
.star-btn.active { color: #F59E0B; }
.star-btn:hover  { transform: scale(1.18); color: #F59E0B; }
.star-label {
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--text-soft); margin: 0 0 16px; min-height: 20px;
  transition: color .15s;
}

/* Resumo de avaliações — perfil do prestador */
.rating-summary {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1.5px solid #FCD34D;
  border-radius: 16px; padding: 20px 20px 14px;
  margin-bottom: 12px; text-align: center;
}
.rating-avg-num {
  font-size: 52px; font-weight: 900; color: #92400E;
  line-height: 1; letter-spacing: -1px;
}
.rating-stars-display {
  font-size: 22px; margin: 4px 0 2px; color: #F59E0B; letter-spacing: 3px;
}
.rating-total { font-size: 12px; color: #78716C; margin-bottom: 16px; }

/* Barras por nota */
.rating-bar-list { text-align: left; }
.rating-bar-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #78716C; margin-bottom: 5px;
}
.rating-bar-row span:first-child { min-width: 22px; text-align: right; }
.rating-bar-row span:last-child  { min-width: 12px; }
.rating-bar-track {
  flex: 1; height: 7px; background: #E5E7EB; 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);
}

/* Lista de avaliações individuais */
.av-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 16px 0 8px; padding: 0 4px;
}
.av-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 8px;
}
.av-card-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 5px;
}
.av-card-nome { font-weight: 700; font-size: 14px; color: var(--text); }
.av-card-estrelas { color: #F59E0B; font-size: 14px; letter-spacing: 1px; }
.av-card-comentario {
  font-size: 13px; color: var(--text-soft); line-height: 1.5;
  font-style: italic;
}
.av-card-data { font-size: 11px; color: var(--text-soft); margin-top: 5px; }

/* Botões de avaliar nos cards do cliente */
.btn-avaliar {
  width: 100%; margin-top: 10px; padding: 11px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff; border: none; border-radius: 10px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(217,119,6,.3);
  transition: opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-avaliar:active { transform: scale(.97); opacity: .9; }
.btn-avaliar:disabled { opacity: .6; cursor: default; }

.btn-avaliado {
  width: 100%; margin-top: 10px; padding: 10px;
  background: #ECFDF5; color: var(--success);
  border: 1.5px solid var(--success); border-radius: 10px;
  font-weight: 700; font-size: 13px; text-align: center;
  letter-spacing: .01em;
}

/* Badge de rating inline em cards de prestador */
.rating-badge-inline {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FEF3C7; color: #92400E;
  border-radius: 20px; padding: 2px 10px;
  font-size: 12px; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   REVIEWS SYSTEM — MãoCerta
   ══════════════════════════════════════════════════════════ */

/* ── Modal Review ── */
.rv-modal-box {
  background: var(--card-bg, #fff);
  border-radius: 24px;
  padding: 28px 24px 24px;
  width: min(92vw, 400px);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  animation: rv-slide-up .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rv-slide-up {
  from { opacity:0; transform: translateY(32px) scale(.97); }
  to   { opacity:1; transform: translateY(0)   scale(1); }
}
.rv-modal-header { text-align:center; margin-bottom:20px; }
.rv-modal-emoji  { font-size:40px; line-height:1; margin-bottom:8px; }
.rv-modal-title  { font-size:20px; font-weight:800; margin:0 0 4px; color:var(--text,#111); }
.rv-modal-sub    { font-size:13px; color:var(--text-soft,#6B7280); margin:0; }

/* ── Star picker ── */
.rv-star-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 8px;
}
.rv-star {
  background: none;
  border: none;
  font-size: 36px;
  color: #D1D5DB;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color .15s, transform .15s;
  touch-action: manipulation;
}
.rv-star:hover, .rv-star.active {
  color: #F59E0B;
  transform: scale(1.2);
}
.rv-star-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft,#6B7280);
  margin: 0 0 16px;
  min-height: 20px;
}

/* ── Review card (lista) ── */
.rv-card {
  background: var(--card-bg,#fff);
  border: 1px solid var(--border,#E5E7EB);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}
.rv-card.rv-positive {
  border-left: 3px solid #10B981;
  background: linear-gradient(135deg, #F0FDF4 0%, #fff 60%);
}
.rv-card.rv-negative {
  border-left: 3px solid #EF4444;
  background: linear-gradient(135deg, #FEF2F2 0%, #fff 60%);
}
.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(--text,#111); }
.rv-card-stars { font-size: 15px; letter-spacing: 1px; }
.rv-card-cmt   { font-size: 13px; color: var(--text-soft,#6B7280); font-style: italic; margin-bottom: 6px; line-height: 1.5; }
.rv-card-data  { font-size: 11px; color: #9CA3AF; }

/* ── Summary box (perfil prestador) ── */
.rv-summary-wrap { margin-bottom: 16px; }
.rv-loading-placeholder { text-align:center; padding:24px 0; }
.rv-empty { text-align:center; color:var(--text-soft,#6B7280); font-size:13px; padding:20px 0; }

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

.rv-media {
  background: linear-gradient(135deg, #FEF9C3, #FFF);
  border: 1px solid #FDE68A;
  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(--text-soft,#6B7280); 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(--text-soft,#6B7280); text-align:right; }
.rv-bar-n { text-align:right; }
.rv-bar-track {
  height: 6px;
  background: #F3F4F6;
  border-radius: 4px;
  overflow: hidden;
}
.rv-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Inline badge nos cards de prestador ── */
.rv-inline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}
.rv-badge-total { color: var(--text-soft,#6B7280); font-weight: 400; }
.rv-badge-new   { color: #9CA3AF; 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;
}

/* ── RANKING — removido: elementos de ranking não são exibidos ── */

.rv-loading { text-align:center; padding:32px; }


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

/* ── Cliente: preço simples ── */
.fin-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.fin-total {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.fin-selos {
  font-size: 11px;
  color: var(--success);
  font-weight: 700;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Prestador: breakdown completo ── */
.fin-prestador {
  background: #F9FAFB;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  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-label {
  color: var(--text-soft);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-val {
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
}
.fin-row-taxa .fin-label { color: #9CA3AF; }
.fin-taxa { color: #EF4444; font-weight: 700; }
.fin-row-liquido {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 2px;
}
.fin-row-liquido .fin-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--success);
}
.fin-liquido {
  font-size: 16px;
  font-weight: 900;
  color: var(--success);
}

/* fallback pedidos antigos sem financeiro */
.fin-fallback .fin-base {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

/* ── Aviso de horário agendado no card do prestador ── */
.pcc-agend-aviso {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #92400E;
  margin-bottom: 8px;
}
.pcc-agend-falta {
  font-size: 12px;
  font-weight: 400;
  color: #B45309;
}

/* ── Frete / Deslocamento ── */
.fin-row-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}
.fin-label-sm { color: var(--text-soft, #6B7280); font-size: 12px; }
.fin-frete-row { color: #92400E; }
.fin-frete-val { font-weight: 700; color: #B45309; }
.fin-total-row { border-top: 1px solid var(--border, #E5E7EB); margin-top: 4px; padding-top: 4px; }
.fin-selos-sm  { font-size: 11px; display: block; margin-top: 4px; }
.fin-row-frete { font-size: 13px; }
.fin-frete-positivo { color: #059669; font-weight: 700; }
.fin-frete-gratis   { color: var(--text-soft, #6B7280); font-size: 12px; font-style: italic; }

/* ── No modal de aceite ── */
#aceite-financeiro .fin-prestador {
  margin: 12px 0 0;
  border-color: rgba(16,185,129,0.25);
  background: #F0FDF4;
}

/* ══════════════════════════════════════════════════
   ADMIN PANEL — estilos
   ══════════════════════════════════════════════════ */

/* ── Layout admin ── */
.admin-content { padding-bottom: 80px; }
.admin-view { display: none; }
.admin-view.active { display: block; }

.admin-badge {
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,90,31,0.3);
}

/* ── Demo login admin ── */
.demo-btn-admin {
  border-color: rgba(255,90,31,0.3);
  background: var(--primary-lt);
}
.demo-btn-admin .demo-role { color: var(--primary); }

/* ── Métricas ── */
.admin-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.metric-card.metric-green  { border-top: 3px solid var(--success); }
.metric-card.metric-blue   { border-top: 3px solid #3B82F6; }
.metric-card.metric-orange { border-top: 3px solid var(--primary); }
.metric-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}
.metric-label {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Config taxa ── */
.admin-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-config-label { font-weight: 800; font-size: 15px; }
.admin-config-sub   { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.admin-config-ctrl  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.admin-taxa-input   { width: 70px; text-align: center; font-size: 18px; font-weight: 800; }
.admin-taxa-pct     { font-size: 20px; font-weight: 900; color: var(--text-soft); }

/* ── Serviços header / filtros ── */
.admin-servicos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-filtros {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-filtro-select { font-size: 13px; flex: 1; }

/* ── Categoria group ── */
.admin-cat-group { margin-bottom: 8px; }
.admin-cat-header {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-cat-count {
  background: var(--border);
  color: var(--text-soft);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Serviço card ── */
.admin-svc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.admin-svc-inativo {
  border-left-color: #D1D5DB;
  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(--text);
  flex: 1;
}
.admin-svc-desc {
  font-size: 12px;
  color: var(--text-soft);
  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(--text);
}
.admin-preco-liq {
  font-size: 11px;
  color: var(--success);
  font-weight: 700;
  display: block;
}
.admin-svc-preco { line-height: 1.3; }
.admin-svc-dur { font-size: 12px; color: var(--text-soft); font-weight: 600; }

/* ── Status badges admin ── */
.admin-badge-ativo {
  background: #ECFDF5; color: var(--success);
  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: #F3F4F6; color: #6B7280;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid #E5E7EB;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Ações serviço ── */
.admin-svc-actions { display: flex; gap: 8px; }
.admin-btn-edit   { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.admin-btn-desat  { background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; }
.admin-btn-ativar { background: #ECFDF5; color: var(--success); border: 1px solid #BBF7D0; }
.btn-sm { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; }

/* ── Modal admin ── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
}
.admin-hint { font-size: 11px; color: var(--text-soft); margin-top: 3px; }
.admin-preco-preview {
  font-size: 11px;
  color: var(--success);
  font-weight: 700;
  margin-top: 3px;
  min-height: 14px;
}

/* ── Toggle ativo ── */
.admin-toggle-wrap { display: flex; align-items: center; gap: 10px; }
.admin-toggle { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.admin-toggle input { opacity: 0; width: 0; height: 0; }
.admin-toggle-slider {
  position: absolute; inset: 0;
  background: #D1D5DB;
  border-radius: 13px;
  transition: 0.25s;
}
.admin-toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.admin-toggle input:checked + .admin-toggle-slider { background: var(--success); }
.admin-toggle input:checked + .admin-toggle-slider::before { transform: translateX(20px); }
.admin-toggle-label { font-weight: 700; font-size: 14px; color: var(--text); }

/* ── Usuários ── */
.admin-total-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  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);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.admin-user-avatar {
  width: 36px; height: 36px;
  background: var(--primary-lt);
  color: var(--primary);
  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(--text-soft); 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: #EEF2FF; color: #4F46E5; }
.tipo-prestador  { background: #ECFDF5; color: var(--success); }
.admin-badge-mini {
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ── Loading state ── */
.admin-loading { text-align: center; padding: 32px; color: var(--text-soft); font-size: 14px; }

/* ══════════════════════════════════════════════════
   TRANSPARÊNCIA DE PREÇOS — MãoCerta
   ══════════════════════════════════════════════════ */

/* ── Tile do catálogo (cliente) — badge de preço ── */
.service-tile { flex-direction: column; align-items: center; }
.service-tile-preco {
  font-size: 10px;
  font-weight: 900;
  color: var(--primary);
  background: var(--primary-lt);
  border-radius: 20px;
  padding: 2px 6px;
  margin-top: 4px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.service-tile-duracao {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 1px;
}

/* ── Modal de preço do serviço (antes de criar pedido) ── */
.mps-box {
  text-align: center;
  padding: 28px 24px 20px;
  max-width: 340px;
}
.mps-emoji-row { margin-bottom: 8px; }
.mps-emoji { font-size: 44px; line-height: 1; }
.mps-nome {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 20px;
}
.mps-preco-destaque {
  background: var(--primary-lt);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.mps-preco-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.mps-preco-valor {
  font-size: 36px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.mps-dur {
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 6px;
  font-weight: 600;
}
.mps-selos {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mps-selo {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 20px;
  padding: 4px 12px;
}
.mps-aviso {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 20px;
  line-height: 1.5;
}
.mps-actions {
  display: flex;
  gap: 10px;
}

/* ── Preço no modal de sucesso (pós-criação) ── */
.msucc-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--primary-lt);
  border: 1.5px solid rgba(255,90,31,.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 12px 0;
  gap: 4px;
}
.msucc-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.msucc-valor {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.msucc-selos {
  font-size: 11px;
  color: var(--success);
  font-weight: 700;
}

/* ── Banner de preço no step 2 (antes de confirmar) ── */
/* Preço em destaque no topo do step 2 */
#wizard-preco-resumo {
  margin: 0 0 4px;
}
.wizard-preco-box {
  background: var(--primary-lt);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  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(--primary);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.wpr-valor {
  font-size: 32px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  word-break: break-all;
}
.wpr-duracao {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
}
.wpr-selos {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
}

/* ══════════════════════════════════════════════════
   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(--radius);
  cursor: pointer;
  transition: all .18s;
  overflow: hidden;
  word-break: break-word;
  text-align: center;
}
.cat-tile:active, .cat-tile.selected {
  border-color: var(--primary);
  background: var(--primary-lt);
  transform: scale(.97);
}
.cat-tile .service-tile-icon { font-size: 34px; margin-bottom: 8px; }
.cat-tile .service-tile-name { font-size: 13px; font-weight: 800; }
.cat-tile-count {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 4px;
  font-weight: 600;
}

/* Etapa 2: lista de serviços da categoria */
.servicos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 24px;
  width: 100%;
  box-sizing: border-box;
}
.servico-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.servico-item:active, .servico-item.selected {
  border-color: var(--primary);
  background: var(--primary-lt);
}
.si-left  { flex: 1; min-width: 0; }
.si-nome  { font-size: 14px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-dur   { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.si-right { text-align: right; flex-shrink: 0; }
.si-preco {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  white-space: nowrap;
}
.si-selos {
  font-size: 10px;
  color: var(--success);
  font-weight: 700;
  margin-top: 2px;
}
.si-arrow {
  font-size: 22px;
  color: var(--text-soft);
  font-weight: 300;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   PERFIS COMPLETOS — Cliente & Prestador
   ══════════════════════════════════════════════════ */

/* Avatar com dot de online */
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.profile-online-dot {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* Info row (email no header) */
.profile-info-row {
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.profile-info-item { font-weight: 600; }

/* Tag do serviço no header prestador */
.profile-service-tag {
  display: inline-block;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
}

/* Rating no header */
.profile-header-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  opacity: .95;
}

/* Stats bar */
.profile-stats-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.pstat {
  flex: 1;
  text-align: center;
}
.pstat-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  margin-bottom: 3px;
}
.pstat-label {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pstat-divider {
  width: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Profile body */
.profile-body {
  padding: 0 16px;
  padding-bottom: 20px;
}
.profile-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 20px 0 8px;
}

/* Profile card */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Profile field (read-only) */
.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.profile-field:last-child { border-bottom: none; }
.pf-label {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 600;
  flex-shrink: 0;
}
.pf-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 65%;
}

/* Profile action button (menu-row) */
.profile-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
}
.profile-action-btn:active { background: var(--bg); }
.pab-arrow {
  font-size: 20px;
  color: var(--text-soft);
  font-weight: 300;
}

/* Profile card forms */
.profile-card .form-group:last-of-type { margin-bottom: 0; }
.profile-card form { padding: 16px; }

/* rv-empty */
.rv-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   AGENDAMENTO — Modal Estilo Uber/iFood
   Mobile-first, touch-friendly, botões mín. 44px
   ══════════════════════════════════════════════════════════════ */

/* Modal principal */
.agd-modal {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: agdSlideUp 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes agdSlideUp {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* Header do modal */
.agd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border, #eee);
  position: sticky;
  top: 0;
  background: var(--bg-card, #fff);
  z-index: 1;
  border-radius: 20px 20px 0 0;
}

.agd-emoji {
  font-size: 32px;
  flex-shrink: 0;
}

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

.agd-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agd-preco {
  font-size: 15px;
  color: var(--primary, #7c3aed);
  font-weight: 600;
  margin-top: 2px;
}

.agd-fechar {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg, #f5f5f5);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft, #666);
  flex-shrink: 0;
  line-height: 1;
}

/* Step container */
.agd-step {
  padding: 16px 20px 24px;
}

.agd-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Opções imediato / agendar */
.agd-tipo-opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

.agd-tipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 14px;
  cursor: pointer;
  background: var(--bg-card, #fff);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  min-height: 100px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.agd-tipo-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.agd-tipo-card.selected {
  border-color: var(--primary, #7c3aed);
  background: var(--primary-bg, #f5f0ff);
}

.agd-tipo-card:active {
  transform: scale(0.97);
}

.agd-tipo-icon {
  font-size: 28px;
}

.agd-tipo-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111);
}

.agd-tipo-sub {
  font-size: 11px;
  color: var(--text-soft, #888);
  line-height: 1.3;
}

/* Lista de dias */
.agd-dias-lista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.agd-dias-lista::-webkit-scrollbar { display: none; }

.agd-dia-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 70px;
  min-height: 60px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--bg-card, #fff);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.agd-dia-btn.selected {
  border-color: var(--primary, #7c3aed);
  background: var(--primary-bg, #f5f0ff);
}

.agd-dia-btn:active, .agd-dia-btn.agd-tap {
  transform: scale(0.95);
}

.agd-dia-nome {
  font-size: 12px;
  color: var(--text-soft, #888);
  font-weight: 600;
}

.agd-dia-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111);
}

.agd-dia-btn.selected .agd-dia-nome,
.agd-dia-btn.selected .agd-dia-num {
  color: var(--primary, #7c3aed);
}

/* Grid de horários */
.agd-horarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.agd-hora-btn {
  padding: 14px 8px;
  min-height: 50px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--bg-card, #fff);
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #111);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.agd-hora-btn.selected {
  border-color: var(--primary, #7c3aed);
  background: var(--primary, #7c3aed);
  color: #fff;
}

.agd-hora-btn:active, .agd-hora-btn.agd-tap {
  transform: scale(0.94);
}

.agd-sem-horario {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-soft, #888);
  font-size: 14px;
  line-height: 1.5;
}

/* Resumo */
.agd-resumo {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg, #f8f8f8);
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
}

.agd-resumo-enter {
  animation: agdFadeIn 0.3s ease;
}

@keyframes agdFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agd-resumo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 4px 0;
  color: var(--text-soft, #666);
}

.agd-resumo-row span:last-child {
  font-weight: 600;
  color: var(--text, #111);
  text-align: right;
}

.agd-resumo-preco {
  border-top: 1px solid var(--border, #eee);
  margin-top: 6px;
  padding-top: 10px;
}

.agd-resumo-badge {
  margin-top: 10px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Botão confirmar */
.agd-btn-confirmar {
  width: 100%;
  margin-top: 20px;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 14px;
  transition: opacity 0.15s, transform 0.1s;
}

.agd-btn-confirmar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.agd-btn-confirmar:not(:disabled):active {
  transform: scale(0.98);
}

/* Badge agendamento no card do cliente */
.agd-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-bg, #f5f0ff);
  color: var(--primary, #7c3aed);
  border: 1px solid var(--primary-light, #c4b5fd);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Badge agendamento no card do prestador */
.agd-pcv3-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  margin: 4px 0 8px;
}

/* Badge penalidade no modal de cancelamento */
.agd-penalidade-badge {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  margin-bottom: 14px;
  font-size: 13px;
}

.agd-penalidade-badge > span {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Badge extra no modal de sucesso para agendamento */
.msucc-agd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f0fdf4;
  border-radius: 8px;
  font-size: 14px;
  color: #166534;
}

.msucc-agd-icon {
  font-size: 18px;
}

/* Desktop: modal centralizado */
@media (min-width: 600px) {
  .agd-modal {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    animation: agdZoomIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
  }

  @keyframes agdZoomIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
  }

  .agd-header {
    border-radius: 20px 20px 0 0;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PENALIDADE — Exibição para cliente e prestador
   ══════════════════════════════════════════════════════════════════ */

/* ── No modal de agendamento (resumo) ────────────────────────────── */
.agd-pen-info {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
}

.agd-pen-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.agd-pen-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.agd-pen-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.agd-pen-row div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.agd-pen-row strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.agd-pen-row span {
  font-size: 11px;
  line-height: 1.4;
}

.agd-pen-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

.agd-pen-ok    { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.agd-pen-leve  { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.agd-pen-forte { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ── No modal de cancelamento ──────────────────────────────────────  */
.cpen-header {
  font-size: 13px;
  color: var(--text-soft, #64748b);
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg, #f8fafc);
  border-radius: 8px;
  text-align: left;
}

.cpen-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  margin-bottom: 12px;
  text-align: left;
}

.cpen-info div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cpen-info strong { font-size: 14px; font-weight: 700; line-height: 1.3; }
.cpen-info span   { font-size: 12px; line-height: 1.4; }
.cpen-icon        { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.cpen-ok    { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.cpen-leve  { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.cpen-forte { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Details / summary (tabela colapsável) */
.cpen-details {
  margin-bottom: 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.cpen-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #64748b);
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg, #f8fafc);
}

.cpen-summary::-webkit-details-marker { display: none; }
.cpen-summary::before { content: '▸ '; }
.cpen-details[open] .cpen-summary::before { content: '▾ '; }

.cpen-regras {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card, #fff);
}

.cpen-regra {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  text-align: left;
  border: 1px solid transparent;
}

.cpen-regra span:first-child { font-size: 13px; flex-shrink: 0; }
.cpen-regra div { display: flex; flex-direction: column; gap: 1px; }
.cpen-regra strong { font-size: 12px; font-weight: 700; }
.cpen-regra span:last-child { font-size: 11px; }

.cpen-regra.cpen-ok    { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.cpen-regra.cpen-leve  { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.cpen-regra.cpen-forte { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.cpen-nota {
  font-size: 11px;
  color: var(--text-soft, #94a3b8);
  margin: 6px 0 0;
  text-align: left;
  line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════
   REAGENDAMENTO — MãoCerta
   ══════════════════════════════════════════════════════════════ */

/* ── Aviso no card do CLIENTE ── */
.pcc-reagend-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  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(--text-soft);
  text-align: center;
  padding: 4px 0 8px;
}

.pcc-btn-info {
  background: #EFF6FF;
  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: linear-gradient(135deg, #FFF7ED, #FFFBEB);
  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;
}
.prp-aceitar {
  background: #10B981;
  color: #fff;
}
.prp-recusar {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
}
.prp-btn:active { opacity: 0.8; }

/* ── 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(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  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(--text-soft);
  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-dias::-webkit-scrollbar { display: none; }
.mreag-dia-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.mreag-dia-btn.selected,
.mreag-dia-btn:active {
  border-color: var(--primary);
  background: var(--primary-bg, #FFF0EB);
  color: var(--primary);
}
.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(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.mreag-hora-btn.selected {
  border-color: var(--primary);
  background: var(--primary-bg, #FFF0EB);
  color: var(--primary);
}
.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: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #92400E;
  margin-top: 10px;
}
.mreag-acoes {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.mreag-acoes .btn { flex: 1; min-height: 50px; }
/* ═══════════════════════════════════════════════════════════════
   CHECKOUT — Modal de pagamento
   ═══════════════════════════════════════════════════════════════ */
.ck-box {
  max-width: 400px;
  width: 92%;
  padding: 24px;
  /* [FIX-LOW1] Garante que o modal de checkout não ultrapasse a tela em celulares pequenos */
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ck-resumo {
  background: var(--bg-secondary, #F9FAFB);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.ck-servico-nome {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #111827);
  margin-bottom: 4px;
}
.ck-prestador {
  font-size: 14px;
  color: var(--text-soft, #6B7280);
  margin-bottom: 12px;
}
.ck-divider {
  height: 1px;
  background: var(--border, #E5E7EB);
  margin: 10px 0;
}
.ck-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}
.ck-label { color: var(--text-soft, #6B7280); }
.ck-val   { font-weight: 600; }
.ck-frete-gratis .ck-val { color: var(--success, #10B981); }
.ck-total-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #E5E7EB);
}
.ck-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary, #2563EB);
}
.ck-reserva-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #92400E;
}
.ck-reserva-icon { font-size: 18px; }
.ck-btn-pagar {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
}
.ck-seguranca {
  text-align: center;
  font-size: 12px;
  color: var(--text-soft, #9CA3AF);
  margin: 8px 0 12px;
}
.ck-cancelar-reserva {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-soft, #9CA3AF);
  font-size: 13px;
  padding: 8px;
  cursor: pointer;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   CARTEIRA DO PRESTADOR
   ═══════════════════════════════════════════════════════════════ */
.wallet-card { padding: 0; overflow: hidden; }
.wallet-row {
  display: flex;
  align-items: stretch;
}
.wallet-col {
  flex: 1;
  padding: 16px;
  text-align: center;
}
.wallet-divider {
  width: 1px;
  background: var(--border, #E5E7EB);
}
.wallet-label {
  font-size: 12px;
  color: var(--text-soft, #6B7280);
  margin-bottom: 4px;
}
.wallet-val {
  font-size: 20px;
  font-weight: 800;
}
.wallet-val-disp { color: #059669; }
.wallet-val-pend { color: #F59E0B; }
.wallet-btn-sacar {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  min-height: 48px;
  font-weight: 700;
}
.wallet-hint {
  font-size: 11px;
  color: var(--text-soft, #9CA3AF);
  text-align: center;
  padding: 0 16px 12px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL SAQUE
   ═══════════════════════════════════════════════════════════════ */
.saque-box { max-width: 380px; width: 92%; padding: 24px; }
.saque-form { margin: 16px 0; }
.saque-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #374151);
  margin: 12px 0 4px;
}
.saque-input, .saque-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #D1D5DB);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}
.saque-acoes {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.saque-acoes .btn { flex: 1; min-height: 48px; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN — métricas financeiras e novas configs
   ═══════════════════════════════════════════════════════════════ */
.admin-metrics-fin {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 480px) {
  .admin-metrics-fin { grid-template-columns: repeat(2, 1fr); }
}

/* fin-destaque: destaca o "Você receberá" no card do prestador */
.fin-destaque {
  background: linear-gradient(90deg, #ECFDF5, #D1FAE5);
  border-radius: 8px;
  padding: 8px 12px !important;
  margin-top: 6px;
}
.fin-destaque .fin-liquido {
  font-size: 18px;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   CARD PRESTADOR — Aguardando pagamento do cliente
   ═══════════════════════════════════════════════════════════════ */
.pcc-aguardando-pag {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #FFFBEB, #FEF3C7);
  border: 1px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 0;
}
.pap-icon { font-size: 24px; }
.pap-titulo {
  font-size: 14px;
  font-weight: 700;
  color: #92400E;
}
.pap-sub {
  font-size: 12px;
  color: #B45309;
  margin-top: 2px;
}

/* ── Aviso de arrependimento no checkout ── */
.ck-arrependimento {
  font-size: 11px;
  color: var(--text-soft, #9CA3AF);
  text-align: center;
  padding: 0 4px 8px;
  margin: 0;
  line-height: 1.5;
}

/* [FIX-A2] touch-action: manipulation em botões — previne double-tap zoom
   sem bloquear zoom de acessibilidade no viewport */
button, .btn, .tab-item, .service-tile, .pcv3-aceitar,
.faq-q, .profile-action-btn, .ck-btn-pagar, .wallet-btn-sacar {
  touch-action: manipulation;
}

/* [FIX-MOBILE] Scroll automático ao focar input em iOS — evita teclado cobrir o campo */
input:focus, textarea:focus, select:focus {
  scroll-margin-bottom: 80px;
}

/* [FIX-M2] Botão de carregar mensagens antigas no chat */
.chat-load-more {
  display: block;
  text-align: center;
  padding: 8px 16px;
  margin: 8px auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #6B7280);
  background: var(--color-background-secondary, #F9FAFB);
  border-radius: 99px;
  cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary);
  width: fit-content;
  transition: background 0.15s;
}
.chat-load-more:hover { background: var(--color-background-tertiary); }

/* [FIX-LOW3] Aviso quando prestador finalizou e cliente precisa confirmar */
.pcc-aviso-confirmar {
  background: var(--color-background-info, #EFF6FF);
  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;
}
.pcc-aviso-confirmar p { margin: 0 0 4px; }
.pcc-aviso-confirmar p:last-child { margin: 0; }

/* [FIX-MOBILE] Modal de interessados e outros modais: max-height para telas pequenas */
.modal-interessados .modal-box,
#modal-interessados .modal-box,
.mcc-box {
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* [FIX-MOBILE] visualViewport: scroll-margin para inputs em iOS */
@supports (height: 100dvh) {
  .chat-input-bar {
    position: sticky;
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0);
  }
}

/* [FIX] Avatar do prestador no modal de interessados */
.mi-card { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--border, #E5E7EB); }
.mi-card:last-child { border-bottom: none; }
.mi-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--color-background-info, #EFF6FF); display: flex; align-items: center; justify-content: center; }
.mi-avatar-img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.mi-avatar-ini { width: 44px; height: 44px; border-radius: 50%; background: var(--color-background-info); color: var(--color-text-info); font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.mi-info { flex: 1; min-width: 0; }
.mi-nome { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }

/* ══════════════════════════════════════════════════════════════
   MODAL DE SAQUE / DADOS BANCÁRIOS — redesign completo
   ══════════════════════════════════════════════════════════════ */

.saque-box {
  max-width: 420px;
  width: 95%;
  padding: 0;
  border-radius: var(--border-radius-xl, 16px);
  overflow: hidden;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
}

.saque-box .modal-header {
  padding: 18px 20px 16px;
  border-bottom: 0.5px solid var(--color-border-tertiary, #F3F4F6);
  flex-shrink: 0;
}

/* ── Box informativo de titularidade ── */
.saque-info-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 20px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border-bottom: 0.5px solid #BFDBFE;
}

.sib-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.sib-texto { flex: 1; }

.sib-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1E40AF;
  margin-bottom: 4px;
}

.sib-desc {
  font-size: 12px;
  color: #374151;
  line-height: 1.5;
  margin: 0 0 3px;
}

.sib-aviso {
  font-size: 11px;
  color: #B45309;
  font-weight: 500;
  margin-top: 4px;
}

/* ── Formulário scrollável ── */
#saque-form-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

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

.saque-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

/* ── Valor com símbolo R$ ── */
.saque-valor-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border-secondary, #E5E7EB);
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-background-primary, #fff);
  overflow: hidden;
  transition: border-color .15s;
}
.saque-valor-wrap:focus-within { border-color: var(--primary, #3B82F6); }

.saque-moeda {
  padding: 0 10px 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B7280);
  flex-shrink: 0;
}

.saque-input-valor {
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 14px 12px 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary, #111827) !important;
  flex: 1;
  width: 100%;
  background: transparent;
}
.saque-input-valor:focus { outline: none; box-shadow: none; }

.saque-saldo-hint {
  font-size: 12px;
  color: var(--color-text-tertiary, #9CA3AF);
  margin-top: 5px;
}

/* ── Botões de tipo de chave ── */
.saque-tipo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

@media (max-width: 380px) {
  .saque-tipo-grid { grid-template-columns: repeat(3, 1fr); }
}

.saque-tipo-btn {
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1.5px solid var(--color-border-tertiary, #E5E7EB);
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-background-primary, #fff);
  color: var(--color-text-secondary, #6B7280);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  touch-action: manipulation;
}
.saque-tipo-btn:hover { border-color: var(--primary, #3B82F6); color: var(--primary, #3B82F6); }
.saque-tipo-btn.active {
  border-color: var(--primary, #3B82F6);
  background: var(--primary, #3B82F6);
  color: #fff;
  font-weight: 600;
}

/* ── Input de chave ── */
.saque-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  border: 1.5px solid var(--color-border-secondary, #E5E7EB);
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-background-primary, #fff);
  color: var(--color-text-primary, #111827);
  transition: border-color .15s;
  -webkit-appearance: none;
}
.saque-input:focus {
  outline: none;
  border-color: var(--primary, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.saque-chave-dica {
  font-size: 11px;
  color: var(--color-text-tertiary, #9CA3AF);
  margin-top: 5px;
  line-height: 1.4;
}

/* ── Indicador de validação ── */
.saque-validacao {
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  min-height: 28px;
  transition: all .2s;
}
.sv-ok    { background: #F0FDF4; color: #15803D; }
.sv-erro  { background: #FEF2F2; color: #DC2626; }
.sv-aviso { background: #FFFBEB; color: #B45309; }
.sv-neutro{ background: transparent; color: transparent; }

/* ── Área de revisão manual ── */
.saque-revisao-wrap {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 12px;
  margin-top: 4px;
}
.saque-revisao-wrap .saque-label { color: #92400E; }
.saque-revisao-wrap .saque-chave-dica { color: #92400E; }

/* ── Ações ── */
.saque-acoes {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 0.5px solid var(--color-border-tertiary, #F3F4F6);
  flex-shrink: 0;
  background: var(--color-background-primary, #fff);
}
.saque-acoes .btn { flex: 1; }
.saque-acoes .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Remove o saque-box antigo ── */
.saque-form { display: none; } /* sobrescrito — a nova UI usa #saque-form-body */

/* ══════════════════════════════════════════════════════════════
   PRAZOS FINANCEIROS — Wallet breakdown + Admin prazos
   ══════════════════════════════════════════════════════════════ */

/* ── Breakdown de saldo no card do prestador ── */
.wallet-breakdown {
  margin: 10px 0 8px;
  border-radius: 10px;
  border: .5px solid var(--color-border-tertiary, #E5E7EB);
  overflow: hidden;
}

.wb-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-secondary, #6B7280);
  padding: 8px 12px 4px;
}

.wb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-top: .5px solid var(--color-border-tertiary, #F3F4F6);
  font-size: 13px;
}

.wb-label { color: var(--color-text-secondary, #374151); }
.wb-valor { font-weight: 600; color: var(--color-text-primary, #111827); }

.wb-hoje   .wb-valor { color: #16A34A; }
.wb-amanha .wb-valor { color: #CA8A04; }
.wb-futuro .wb-valor { color: #2563EB; }

.wb-ver-detalhe {
  display: block;
  width: 100%;
  padding: 8px;
  background: none;
  border: none;
  border-top: .5px solid var(--color-border-tertiary);
  color: var(--primary, #3B82F6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}
.wb-ver-detalhe:hover { background: var(--color-background-secondary); }

/* ── Modal de previsões detalhadas ── */
.prev-intro {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 8px 0 12px;
  line-height: 1.5;
}
.prev-lista { border-radius: 8px; border: .5px solid var(--color-border-tertiary); overflow: hidden; }
.prev-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: .5px solid var(--color-border-tertiary);
  font-size: 13px;
}
.prev-row:last-child { border-bottom: none; }
.prev-data   { font-weight: 600; color: var(--color-text-primary); }
.prev-metodo { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.prev-valor  { font-weight: 600; color: #2563EB; }
.prev-aviso  {
  font-size: 11px;
  color: var(--color-text-tertiary, #9CA3AF);
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

/* ── Admin: Painel de prazos ── */
.admin-prazos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  .admin-prazos-grid { grid-template-columns: 1fr; }
}

.ap-group {
  background: var(--color-background-secondary, #F9FAFB);
  border-radius: 10px;
  padding: 12px;
}

.ap-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}

.ap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ap-row:last-child { margin-bottom: 0; }

.ap-label {
  font-size: 12px;
  color: var(--color-text-secondary, #374151);
  flex: 1;
}

.ap-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ap-input {
  width: 52px;
  padding: 5px 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: 1.5px solid var(--color-border-secondary, #E5E7EB);
  border-radius: 6px;
  background: var(--color-background-primary, #fff);
  color: var(--color-text-primary);
  -webkit-appearance: none;
}
.ap-input:focus {
  outline: none;
  border-color: var(--primary, #3B82F6);
}

.ap-unit {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ap-exemplo {
  background: #EFF6FF;
  border: .5px solid #BFDBFE;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.ap-ex-titulo {
  font-size: 11px;
  font-weight: 700;
  color: #1E40AF;
  margin-bottom: 6px;
}

.ap-ex-row {
  font-size: 12px;
  color: #374151;
  line-height: 1.8;
}
.ap-ex-row strong { color: #1E40AF; }

/* ══════════════════════════════════════════════════════════════
   WEBVIEW APP — Adaptações críticas para Android/iOS WebView
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Reset global WebView ── */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}

/* Texto e inputs: sem callout de seleção indesejado */
input, textarea, select, button {
  -webkit-user-select: text;
  user-select: text;
}

/* Conteúdo estático: sem seleção acidental */
.page, .card, .tab-item, .btn, .modal-box,
.service-tile, .pcc-body, .tabbar {
  -webkit-user-select: none;
  user-select: none;
}

/* ── 2. Sem overscroll bounce (Android/iOS) ── */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto; /* previne momentum scroll duplo */
}

/* ── 3. Substituir 100vh por 100dvh onde aplicável ── */
/* 100vh no iOS Safari dentro de WebView = viewport com barra → usa dvh */
.page,
.mc-screen,
#page-prestador-home,
#page-cliente-home,
#page-admin-home,
.chat-screen,
.auth-screen {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

/* ── 4. Safe area — notch iPhone X+ e câmera dinâmica Android ── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

.topbar {
  padding-top: max(12px, calc(12px + var(--safe-top)));
}

.tabbar,
#tabbar-cliente,
#tabbar-prestador,
#tabbar-admin {
  padding-bottom: max(8px, calc(8px + var(--safe-bottom)));
  height: auto;
  min-height: calc(60px + var(--safe-bottom));
}

/* ── 5. Touch targets mínimo 44×44px (Apple HIG / Material) ── */
.tab-item {
  min-height: 48px;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
}

.btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-sm {
  min-height: 36px; /* ações secundárias podem ser menores */
}

/* Botão fechar modal: mínimo 44×44 */
.modal-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  touch-action: manipulation;
}

/* ── 6. Inputs: sem zoom automático (iOS faz zoom em font-size < 16px) ── */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* previne zoom automático iOS */
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}

/* ── 7. Scroll containers: momentum nativo ── */
.page-content,
.section,
.admin-content,
#saque-form-body,
.chat-messages,
#historico-lista,
#admin-servicos-lista,
#admin-usuarios-lista,
#admin-saques-lista,
#admin-aprovacoes-lista {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── 8. Links externos — abrir no browser nativo ── */
a[href^="http"],
a[href^="https"],
a[href^="mailto"],
a[href^="tel"],
a[href^="whatsapp"] {
  touch-action: manipulation;
}

/* ── 9. Imagens: sem arrastar no WebView ── */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* evita "segurar para salvar" */
}

/* Exceto imagens clicáveis */
img.clickable,
.mi-avatar-img,
.avatar img {
  pointer-events: auto;
}

/* ── 10. Transições de página suaves ── */
.page {
  will-change: opacity;
  transition: opacity 0.2s ease;
}

.page.entering {
  animation: page-enter 0.22s ease forwards;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 11. Modal: safe scroll + trava de fundo ── */
.modal-overlay {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-box {
  max-height: calc(92dvh - var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Quando modal está aberto: trava scroll do body */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── 12. Teclado virtual: scroll para o input ── */
input:focus,
textarea:focus {
  scroll-margin-bottom: 80px;
  scroll-margin-top: 20px;
}

/* ── 13. Performance: reduz repaints em listas longas ── */
.pcv3-card,
.pcc-card,
.pcc-body,
.notif-item,
.mi-card {
  contain: layout style;
  will-change: auto;
}

/* ── 14. Skeleton loading (placeholder enquanto carrega) ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease infinite;
  border-radius: 6px;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-line  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 80px; border-radius: 10px; margin-bottom: 10px; }

/* ── 15. Pull-to-refresh visual (preparação) ── */
.ptr-indicator {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: top 0.2s ease;
}

/* ── 16. Selects nativos no Android ── */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── 17. Foco visível para acessibilidade (mas discreto no app) ── */
:focus-visible {
  outline: 2px solid var(--primary, #3B82F6);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── 18. Cursor pointer em todos os elementos clicáveis ── */
[onclick],
[role="button"],
.tab-item,
.btn,
.faq-q,
.service-tile,
.saque-tipo-btn,
.modal-close {
  cursor: pointer;
}

/* ── 19. Animação de loading global (spinner) ── */
.webview-loading {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.webview-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: var(--primary, #FF5A1F);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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