/* ══════════════════════════════════════════════════════════════
   SISTEMA DE AGENDAMENTO UNIVERSAL — APPLE LUXO EDITION v4.0
   Paleta: Nude · Ouro Velho · Marrom Chocolate
   ── Layered Shadows · Inner Glow Jewel · Chanfro iOS ──
   ══════════════════════════════════════════════════════════════ */

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

/* ══════════════════════════════════════
   TOKENS DE DESIGN — PROFUNDIDADE APPLE
   ══════════════════════════════════════ */
:root {
  /* Paleta */
  --nude:          #e8d5c4;
  --nude-light:    #f5ede3;
  --nude-pale:     #faf6f1;
  --gold:          #b8935a;
  --gold-light:    #d4ad72;
  --gold-pale:     rgba(184,147,90,0.10);
  --gold-glow:     rgba(184,147,90,0.28);
  --brown:         #2a1f1f;
  --brown-mid:     #6b4f4b;
  --brown-light:   #a08080;
  --bg:            #f7f2ed;
  --white-glass:   rgba(255,255,255,0.72);

  /* Border Radius — PADRÃO APPLE LUXO */
  --radius-app:    24px;
  --radius-modal:  28px;
  --radius-pill:   50px;

  /* ── LAYERED SHADOWS (profundidade Apple real) ── */
  --shadow-card:
    0 1px 2px rgba(42,31,31,0.04),
    0 4px 8px rgba(42,31,31,0.06),
    0 12px 28px rgba(42,31,31,0.08),
    0 24px 52px rgba(42,31,31,0.05);
  --shadow-lift:
    0 2px 4px rgba(42,31,31,0.06),
    0 8px 20px rgba(42,31,31,0.10),
    0 22px 50px rgba(42,31,31,0.14),
    0 40px 80px rgba(42,31,31,0.08);
  --shadow-hover:
    0 4px 12px rgba(42,31,31,0.08),
    0 16px 40px rgba(42,31,31,0.12),
    0 32px 64px rgba(42,31,31,0.08);
  --shadow-gold:
    0 2px 6px rgba(184,147,90,0.20),
    0 8px 24px rgba(184,147,90,0.30),
    0 20px 50px rgba(184,147,90,0.18);
  --shadow-deep:
    0 4px 8px rgba(42,31,31,0.06),
    0 16px 32px rgba(42,31,31,0.12),
    0 32px 72px rgba(42,31,31,0.10);

  /* ── INNER GLOW JOIA — Ouro Velho ── */
  --glow-inner-jewel:
    inset 0 0 16px rgba(184,147,90,0.25),
    inset 0 0 40px rgba(212,173,114,0.12),
    inset 0 -2px 8px rgba(184,147,90,0.15);
  --glow-gold-outer:
    0 0 20px rgba(184,147,90,0.40),
    0 0 40px rgba(184,147,90,0.20);

  /* ── CHANFRO iOS — reflexo de luz nas quinas ── */
  --border-chanfro:        0.5px solid rgba(255,255,255,0.30);
  --border-chanfro-bright: 0.5px solid rgba(255,255,255,0.50);

  /* Transição Apple — cubic-bezier premium */
  --ease-apple:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration:      0.4s;
}

/* ══════════════════════════════════════
   RESET GLOBAL
   ══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, input, select, button,
p, span, div, h1, h2, h3, h4, h5, h6, a, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════
   1. VIEWPORT APP NATIVO
   ══════════════════════════════════════ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  background: var(--bg) !important;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(184,147,90,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(232,213,196,0.18) 0%, transparent 50%) !important;
}

#root {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Área scrollável interna */
.main-scroll-area,
.agenda-scroll,
[data-scroll="true"],
.overflow-y-auto,
.overflow-auto {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── Scrollbar elegante ── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(184,147,90,0.28); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(184,147,90,0.50); }

/* ── Gold gradient utilitário ── */
.gold-gradient {
  background: linear-gradient(135deg, #b8935a 0%, #d4ad72 50%, #c9a060 100%);
}

/* ══════════════════════════════════════
   ANIMAÇÕES GLOBAIS
   ══════════════════════════════════════ */

.modal-wrap        { animation: overlayIn .25s ease forwards; }
.modal-box-center  { animation: cardIn .38s var(--ease-spring) forwards; }
.modal-sheet       { animation: sheetIn .40s cubic-bezier(.32,.72,0,1) forwards; }

@keyframes overlayIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(12px); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(32px) scale(.93); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes pillIn {
  from { opacity: 0; transform: scale(.90) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-enter { animation: viewIn .34s var(--ease-spring) forwards; }
@keyframes dotIn {
  from { opacity: 0; transform: translateX(-50%) scaleX(0); }
  to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes emptyIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.empty-state { animation: emptyIn .4s ease forwards; }
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card-enter { animation: cardSlideIn .32s var(--ease-spring) both; }

/* ══════════════════════════════════════
   AUTH GATE — animações da tela de ativamento
   ══════════════════════════════════════ */
@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-10px); }
  30%     { transform: translateX(9px); }
  45%     { transform: translateX(-7px); }
  60%     { transform: translateX(6px); }
  75%     { transform: translateX(-4px); }
  90%     { transform: translateX(3px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 32px rgba(184,147,90,0.40); }
  50%       { transform: scale(1.10); box-shadow: 0 12px 48px rgba(184,147,90,0.60); }
}

/* Sidebar glow pulse sutil */
@keyframes sidebarGlow {
  0%,100% {
    box-shadow:
      2px 0 8px rgba(42,31,31,0.05),
      4px 0 24px rgba(42,31,31,0.07),
      8px 0 48px rgba(42,31,31,0.05),
      1px 0 0 rgba(184,147,90,0.10);
  }
  50% {
    box-shadow:
      2px 0 12px rgba(42,31,31,0.07),
      4px 0 32px rgba(42,31,31,0.09),
      8px 0 56px rgba(42,31,31,0.07),
      2px 0 0 rgba(184,147,90,0.18);
  }
}

/* GLOW pulse para nav ativa */
@keyframes navGlowPulse {
  0%,100% {
    box-shadow:
      var(--glow-inner-jewel),
      0 0 18px rgba(184,147,90,0.25),
      0 4px 16px rgba(184,147,90,0.15);
  }
  50% {
    box-shadow:
      var(--glow-inner-jewel),
      0 0 28px rgba(184,147,90,0.40),
      0 6px 22px rgba(184,147,90,0.22);
  }
}


/* ══════════════════════════════════════
   TRANSIÇÃO BASE OBRIGATÓRIA
   ══════════════════════════════════════ */
.appt-pill,
.app-card,
.upcoming-card,
.nav-item,
.btn-pill,
.btn-pill-gold,
.btn-pill-outline,
.btn-pill-danger,
.status-chip,
.wa-btn {
  transition: all var(--duration) var(--ease-apple) !important;
}


/* ══════════════════════════════════════
   APPOINTMENT PILL (Calendário)
   ══════════════════════════════════════ */
.appt-pill {
  animation: pillIn .30s var(--ease-spring) forwards;
  will-change: transform, box-shadow;
  border-radius: var(--radius-app) !important;
  box-shadow: var(--shadow-card) !important;
  border-top:    var(--border-chanfro-bright) !important;
  border-right:  var(--border-chanfro) !important;
  border-bottom: var(--border-chanfro) !important;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  background: rgba(255,255,255,0.92);
}
.appt-pill:hover {
  transform: scale(1.03) translateY(-2px) !important;
  box-shadow:
    var(--shadow-hover),
    var(--glow-inner-jewel) !important;
  border-color: rgba(184,147,90,0.20) !important;
  z-index: 2;
}
.appt-pill:active {
  transform: scale(.97) !important;
  opacity: .92;
}

/* Proteção de overflow: impede que nomes/procedimentos longos
   vazem ou empurrem ícones para fora da célula do calendário */
.appt-pill > div {
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


/* ══════════════════════════════════════
   VARIANTES RADIO (Manutenção) — BLINDADO
   ══════════════════════════════════════ */
.variant-radio-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 70px !important;
}
.variant-radio-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ══════════════════════════════════════
   TABELA DE SERVIÇOS
   ══════════════════════════════════════ */
.svc-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: 8px;
}
.svc-actions-group button {
  flex-shrink: 0 !important;
  /* Área de toque confortável no mobile (iOS) */
  min-width: 32px !important;
  min-height: 32px !important;
  touch-action: manipulation;
}
@media (max-width: 767px) {
  .svc-actions-group button {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}
.svc-name-ellipsis {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px;
}


/* ══════════════════════════════════════
   CALENDAR GRID — GLOW LUXO
   ══════════════════════════════════════ */
.slot-cell {
  transition:
    background   var(--duration) var(--ease-apple),
    box-shadow   var(--duration) var(--ease-apple) !important;
}
.slot-cell:hover {
  background: rgba(184,147,90,0.12) !important;
  box-shadow: inset 6px 0 20px -4px rgba(184,147,90,0.45) !important;
}
.slot-cell:active {
  background: rgba(184,147,90,0.22) !important;
}

/* Grade nude — borda acende */
.cal-grid-cell {
  border-left: 1px solid rgba(196,164,132,0.6) !important;
  border-top:  1px solid rgba(196,164,132,0.6) !important;
  transition:
    border-color var(--duration) var(--ease-apple),
    box-shadow   var(--duration) var(--ease-apple) !important;
}
.cal-grid-cell:hover {
  border-left-color: #D2B48C !important;
  border-top-color:  #D2B48C !important;
  box-shadow: inset 6px 0 20px -4px rgba(184,147,90,0.45) !important;
}
.cal-grid-cell-today {
  border-left: 1px solid rgba(196,164,132,0.5) !important;
  border-top:  1px solid rgba(196,164,132,0.5) !important;
  transition:
    border-color var(--duration) var(--ease-apple),
    box-shadow   var(--duration) var(--ease-apple) !important;
}
.cal-grid-cell-today:hover {
  border-left-color: #D2B48C !important;
  border-top-color:  #D2B48C !important;
  box-shadow: inset 6px 0 20px -4px rgba(184,147,90,0.45) !important;
}
.cal-day-col-header {
  border-left: 1px solid rgba(196,164,132,0.55) !important;
  transition:
    box-shadow   var(--duration) var(--ease-apple),
    background   var(--duration) var(--ease-apple) !important;
}
.cal-day-col-header:hover {
  box-shadow: inset 6px 0 20px -4px rgba(184,147,90,0.55) !important;
  background: rgba(184,147,90,0.12) !important;
}
.cal-day-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(196,164,132,0.60) !important;
}


/* ══════════════════════════════════════
   4. SIDEBAR — GLASSMORPHISM AVANÇADO
   100% blur · layered shadow · chanfro iOS
   ══════════════════════════════════════ */
aside.app-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 220px !important;
  z-index: 20;
  display: flex;
  flex-direction: column;

  /* GLASS — transparência para respirar a luz */
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(30px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.9) !important;

  /* Chanfro iOS — reflexo de luz na quina */
  border-right: var(--border-chanfro) !important;
  border-top: var(--border-chanfro-bright) !important;
  border-left: none !important;

  /* Layered shadow profunda */
  box-shadow:
    2px 0 8px rgba(42,31,31,0.05),
    4px 0 24px rgba(42,31,31,0.08),
    8px 0 48px rgba(42,31,31,0.06),
    1px 0 0 rgba(184,147,90,0.12),
    inset -1px 0 0 rgba(255,255,255,0.45) !important;

  /* Glow animado suave */
  animation: sidebarGlow 6s ease-in-out infinite;

  /* Contexto de empilhamento isolado — permite sub-shadows */
  isolation: isolate;
}


/* ══════════════════════════════════════
   SIDEBAR NAV ITEMS — LUXO MÁXIMO
   Inner Glow Joia + Chanfro + Volumetria
   ══════════════════════════════════════ */
.nav-item {
  transition:
    transform    var(--duration) var(--ease-apple),
    background   var(--duration) var(--ease-apple),
    box-shadow   var(--duration) var(--ease-apple),
    border-color var(--duration) var(--ease-apple) !important;
  position: relative !important;
  border-radius: 14px;
  /* Chanfro sutil no estado de repouso */
  border: 1.5px solid transparent !important;
  border-top: var(--border-chanfro) !important;
  border-left: var(--border-chanfro) !important;
}

/* HOVER: Inner Glow joia + borda iluminada (usa cor dinâmica) */
.nav-item:hover {
  transform: scale(1.05) translateX(4px) !important;
  background: var(--gold-pale) !important;
  box-shadow:
    var(--glow-inner-jewel),
    0 0 18px var(--gold-glow),
    0 4px 20px var(--gold-pale) !important;
  border-color: var(--gold-glow) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  border-left-color: rgba(255,255,255,0.55) !important;
}
.nav-item:active {
  transform: scale(.96) translateX(2px) !important;
  opacity: 0.85 !important;
}

/* ATIVO: inner glow contínuo + pulse sutil */
.nav-item-active {
  background: var(--gold-pale) !important;
  box-shadow:
    var(--glow-inner-jewel),
    0 0 22px var(--gold-glow),
    0 6px 24px var(--gold-pale) !important;
  border-color: var(--gold-glow) !important;
  border-top-color: rgba(255,255,255,0.45) !important;
  border-left-color: rgba(255,255,255,0.45) !important;
  border-radius: 18px !important;
}

/* Barra lateral — indicador ativo (usa cor dinâmica) */
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px; height: 65%;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  transition: transform var(--duration) var(--ease-apple);
  box-shadow:
    2px 0 10px var(--gold-glow),
    4px 0 20px var(--gold-pale) !important;
}
.nav-item-active::before {
  transform: translateY(-50%) scaleY(1);
}


/* ══════════════════════════════════════
   ÍCONES DA SIDEBAR — VOLUMETRIA 3D APPLE
   drop-shadow multicamada = relevo REAL
   ══════════════════════════════════════ */

/* Estado inativo: volumetria sutil */
.nav-item i {
  color: #a08080 !important;
  opacity: 0.75;
  filter:
    drop-shadow(0 1px 1px rgba(42,31,31,0.12))
    drop-shadow(0 2px 5px rgba(42,31,31,0.20))
    drop-shadow(0 4px 10px rgba(42,31,31,0.08)) !important;
  transition:
    color      var(--duration) var(--ease-apple),
    opacity    var(--duration) var(--ease-apple),
    filter     var(--duration) var(--ease-apple),
    transform  var(--duration) var(--ease-apple) !important;
}

/* Hover: opacidade total + halo dourado */
.nav-item:hover i {
  opacity: 1 !important;
  color: #8a6a5a !important;
  filter:
    drop-shadow(0 1px 2px rgba(42,31,31,0.14))
    drop-shadow(0 3px 8px rgba(42,31,31,0.20))
    drop-shadow(0 0 14px rgba(184,147,90,0.35)) !important;
}

/* Ativo: glow dourado joia + elevação (usa cor dinâmica) */
.nav-item-active i {
  color: var(--gold) !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 6px var(--gold-glow))
    drop-shadow(0 0 16px var(--gold-pale))
    drop-shadow(0 2px 4px rgba(42,31,31,0.18)) !important;
  transform: translateY(-1px) scale(1.12) !important;
}

/* Sidebar oculta em mobile */
@media (max-width: 767px) {
  aside.app-sidebar { display: none !important; }
}


/* ══════════════════════════════════════
   HEADER — Glass Fixo + Chanfro + Safe-Area iOS
   ══════════════════════════════════════ */
header.app-header {
  /* Glass premium */
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(28px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.9) !important;
  box-shadow:
    0 1px 0 rgba(184,147,90,0.12),
    0 2px 8px rgba(0,0,0,0.03),
    0 4px 24px rgba(0,0,0,0.04) !important;
  border-bottom: var(--border-chanfro-bright) !important;

  /* ── Safe-Area iPhone X+ ──
     padding-top empurra o conteúdo abaixo do notch/relógio.
     Fallback 20px para dispositivos sem safe-area. */
  padding-top: env(safe-area-inset-top, 20px) !important;

  /* ── Altura fixa: 64px de conteúdo + safe-area ──
     Garante simetria perfeita entre título e logotipo. */
  height: calc(env(safe-area-inset-top, 20px) + 64px) !important;
  min-height: calc(env(safe-area-inset-top, 20px) + 64px) !important;

  /* ── Alinhamento vertical nativo Apple ── */
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════
   RADII GLOBAIS
   ══════════════════════════════════════ */
.modal-box-center,
.modal-sheet,
[class*="modal"],
[class*="sheet"],
[class*="dialog"],
[class*="popup"],
[class*="dropdown"],
[class*="panel"],
[class*="card"],
[class*="block"],
[class*="section"] {
  border-radius: var(--radius-app) !important;
}

/* ══════════════════════════════════════
   MODAL SHEET — Safe-Area iOS Completo
   Componente nativo: respeita notch + barra home
   ══════════════════════════════════════ */
.modal-sheet {
  /* ── Topo: empurra conteúdo abaixo do relógio/notch ── */
  padding-top: env(safe-area-inset-top, 20px) !important;

  /* ── Rodapé: respiro elegante acima da barra de gestos ── */
  padding-bottom: env(safe-area-inset-bottom, 20px) !important;

  /* ── Scroll interno: todos os horários acessíveis ── */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 90vh !important;

  /* Garante box-model correto */
  box-sizing: border-box !important;
}

/* ── Cabeçalho da modal: título afastado do sistema ── */
.modal-sheet > *:first-child {
  /* Margem superior adicional caso padding-top seja insuficiente */
  padding-top: max(env(safe-area-inset-top, 20px), 16px) !important;
}

/* ── Título da modal: centralizado, estilo nativo iOS ── */
.modal-sheet h2,
.modal-sheet [data-modal-title],
.modal-sheet .modal-title {
  text-align: center !important;
  margin-top: 4px !important;
}

/* ── Rodapé / botão Confirmar: respiro seguro ── */
.modal-sheet > :last-child {
  padding-bottom: max(env(safe-area-inset-bottom, 20px), 16px) !important;
}

/* ── Grade de horários: gap reduzido para caber mais opções ── */
.modal-sheet [class*="grid"],
.modal-sheet .time-grid {
  gap: 6px !important;
}


/* ══════════════════════════════════════
   APP CARD — Layered + Chanfro + Inner Glow
   ══════════════════════════════════════ */
.app-card {
  border-radius: var(--radius-app) !important;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  /* Chanfro iOS */
  border: var(--border-chanfro) !important;
  border-top: var(--border-chanfro-bright) !important;
  border-left: var(--border-chanfro-bright) !important;
  box-shadow: var(--shadow-card) !important;
  /* will-change apenas em hover — evita camadas de compositing desnecessárias */
  contain: layout style;
}
.app-card:hover {
  transform: scale(1.03) translateY(-4px) !important;
  box-shadow:
    var(--shadow-lift),
    var(--glow-inner-jewel),
    var(--glow-gold-outer) !important;
  border-color: rgba(184,147,90,0.30) !important;
}
.app-card:active {
  transform: scale(.98) !important;
}


/* ══════════════════════════════════════
   UPCOMING CARD — Layered + Chanfro + Inner Glow
   ══════════════════════════════════════ */
.upcoming-card {
  border-radius: var(--radius-app) !important;
  background: rgba(255,255,255,0.87);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  /* Chanfro iOS */
  border: var(--border-chanfro) !important;
  border-top: var(--border-chanfro-bright) !important;
  border-left: var(--border-chanfro-bright) !important;
  box-shadow: var(--shadow-card) !important;
  cursor: pointer;
  /* will-change apenas quando necessário — não usar permanentemente */
  contain: layout style;
}
.upcoming-card:hover {
  transform: scale(1.03) translateY(-4px) !important;
  box-shadow:
    var(--shadow-lift),
    var(--glow-inner-jewel),
    var(--glow-gold-outer) !important;
  border-color: rgba(184,147,90,0.30) !important;
}
.upcoming-card:active { transform: scale(.97) !important; }


/* ══════════════════════════════════════
   PILL BUTTONS — Chanfro + Inner Glow
   ══════════════════════════════════════ */
.btn-pill {
  border-radius: var(--radius-pill) !important;
  border: var(--border-chanfro) !important;
}
.btn-pill:hover {
  box-shadow: var(--glow-inner-jewel) !important;
}
.btn-pill:active:not(:disabled) {
  opacity: 0.72 !important;
  transform: scale(.93) !important;
}

.btn-pill-gold {
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(135deg, #b8935a, #d4ad72) !important;
  color: #fff !important;
  box-shadow: var(--shadow-gold) !important;
  border-top: var(--border-chanfro-bright) !important;
  border-left: var(--border-chanfro-bright) !important;
}
.btn-pill-gold:hover {
  opacity: .90;
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow:
    var(--glow-inner-jewel),
    0 8px 28px rgba(184,147,90,0.55),
    0 18px 50px rgba(184,147,90,0.30) !important;
}
.btn-pill-gold:active  { opacity: .72 !important; transform: scale(.93) !important; }
.btn-pill-gold:disabled { opacity: .36 !important; }

.btn-pill-outline {
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid rgba(184,147,90,0.35) !important;
  color: var(--gold) !important;
  background: transparent !important;
}
.btn-pill-outline:hover {
  background: rgba(184,147,90,0.09) !important;
  border-color: rgba(184,147,90,0.55) !important;
  transform: scale(1.03) translateY(-1px) !important;
  box-shadow: var(--glow-gold-outer) !important;
}
.btn-pill-outline:active { opacity: .70 !important; transform: scale(.93) !important; }

.btn-pill-danger {
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid rgba(185,80,80,0.28) !important;
  color: #c07070 !important;
  background: transparent !important;
}
.btn-pill-danger:hover {
  background: rgba(185,80,80,0.08) !important;
  border-color: rgba(185,80,80,0.48) !important;
  transform: scale(1.03) translateY(-1px) !important;
}
.btn-pill-danger:active { opacity: .70 !important; transform: scale(.93) !important; }






/* ══════════════════════════════════════
   BUTTONS & INPUTS
   ══════════════════════════════════════ */
button {
  transition: all var(--duration) var(--ease-apple) !important;
}
button:active:not(:disabled) { transform: scale(.95); }

input:focus, select:focus { outline: none; }
input, select {
  transition:
    box-shadow   var(--duration) var(--ease-apple),
    background   0.3s var(--ease-apple),
    border-color var(--duration) var(--ease-apple);
}

.input-premium {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(184,147,90,0.14);
  border-top: var(--border-chanfro-bright) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.03), 0 1px 2px rgba(255,255,255,0.85);
  border-radius: var(--radius-app) !important;
}
.input-premium:focus {
  border-color: rgba(184,147,90,0.50) !important;
  box-shadow:
    0 0 0 5px rgba(184,147,90,0.14),
    var(--glow-inner-jewel) !important;
}


/* ══════════════════════════════════════
   BOTTOM NAV (Mobile)
   ══════════════════════════════════════ */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(28px) saturate(1.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.9);
  background: rgba(255,255,255,0.84) !important;
  border-top: var(--border-chanfro-bright) !important;
  box-shadow: 0 -4px 24px rgba(42,31,31,0.06) !important;
}
.bottom-nav button {
  transition: all var(--duration) var(--ease-apple) !important;
  position: relative;
  /* Apple HIG: área de toque mínima 44px — 52px garante conforto no iPhone */
  min-height: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav button:active { transform: scale(.84); }

.nav-dot {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #b8935a, #d4ad72);
  animation: dotIn .26s var(--ease-spring) forwards;
  box-shadow: 0 0 9px rgba(184,147,90,0.44);
}


/* ══════════════════════════════════════
   STATUS CHIPS
   ══════════════════════════════════════ */
.status-chip {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--radius-pill) !important;
}
.status-chip:active { transform: scale(.90); opacity: .78; }


/* ══════════════════════════════════════
   WHATSAPP BUTTON — BLINDADO
   ══════════════════════════════════════ */
.wa-btn {
  box-shadow:
    0 1px 3px rgba(22,163,74,0.18),
    0 4px 12px rgba(22,163,74,0.22),
    0 8px 24px rgba(22,163,74,0.12) !important;
  border-radius: 50% !important;
  border-top: var(--border-chanfro-bright) !important;
}
.wa-btn:hover {
  background: #16a34a !important;
  box-shadow:
    0 6px 20px rgba(22,163,74,.45),
    inset 0 0 12px rgba(255,255,255,0.15) !important;
  transform: scale(1.12) !important;
}
.wa-btn:active { transform: scale(.87) !important; opacity: .78; }


/* ══════════════════════════════════════
   GOLD SHIMMER TEXT
   ══════════════════════════════════════ */
.gold-shimmer {
  background: linear-gradient(
    90deg,
    #b8935a 0%, #e8d5b0 25%, #d4ad72 50%, #e8d5b0 75%, #b8935a 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 4.2s linear infinite;
}


/* ══════════════════════════════════════
   GLASS PANEL — Layered + Chanfro
   ══════════════════════════════════════ */
.glass-panel {
  background: rgba(255,255,255,0.62);
  /* Blur reduzido para 18px — melhora performance iOS sem perda visual */
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: var(--border-chanfro) !important;
  border-top: var(--border-chanfro-bright) !important;
  border-left: var(--border-chanfro-bright) !important;
  border-radius: var(--radius-app) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.03),
    0 8px 22px rgba(0,0,0,0.05),
    0 20px 52px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.93);
}

/* Calendar header glass */
.cal-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(253,250,246,0.86));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* necessário para Safari/iOS */
}


/* ══════════════════════════════════════
   ELLIPSIS UTILITÁRIOS — Apple Style
   Evita quebra de layout com textos longos
   ══════════════════════════════════════ */

/* Nomes de clientes nos cards */
.client-name-ellipsis {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
}

/* Accordion — evita repaint durante animação — gerenciado pelo bloco ACCORDION abaixo */


/* ══════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════ */
h1, h2, h3        { letter-spacing: -0.02em; }
label             { letter-spacing: 0.07em; text-transform: uppercase; }
.name-bold        { font-weight: 800; letter-spacing: -0.01em; }
.service-muted    { color: #a08080; font-size: 12px; font-weight: 400; }

/* ══════════════════════════════════════
   DAY VIEW & CALENDAR
   ══════════════════════════════════════ */
.hour-row { transition: background var(--duration) var(--ease-apple); }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { opacity: .4; cursor: pointer; }


/* ══════════════════════════════════════
   MOBILE BELL BUTTON — Lembrete no DayView
   Exclusivo mobile, invisível no desktop
   ══════════════════════════════════════ */
.mobile-bell-btn {
  display: none; /* oculto por padrão (desktop) */
}

@media (max-width: 767px) {
  .mobile-bell-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(184,147,90,0.10);
    border: 1.5px solid rgba(184,147,90,0.22);
    color: #b8935a;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(184,147,90,0.12);
    /* Padding de toque — área mínima 44x44 via padding */
    padding: 0;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-bell-btn:active {
    transform: scale(0.88);
    opacity: 0.75;
    background: rgba(184,147,90,0.22);
  }

  .mobile-bell-btn i {
    font-size: 14px;
    color: #b8935a;
    pointer-events: none;
  }
}


/* ══════════════════════════════════════
   PREFER-REDUCED-MOTION — PWA Mobile
   Protege iPhones contra animações infinitas
   que consomem bateria e podem causar
   stuttering em dispositivos mais antigos
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Mantém apenas transições essenciais de UI */
  .btn-pill-gold,
  .app-card,
  .appt-pill,
  .nav-item {
    transition: opacity 0.15s ease !important;
    will-change: auto !important;
  }

  /* Paralisa animações infinitas */
  aside.app-sidebar { animation: none !important; }
  .gold-shimmer     { animation: none !important; }
  .nav-item-active  { animation: none !important; }
}


/* ══════════════════════════════════════
   MOBILE VIEWPORT — safe-area iPhone X+
   ══════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
  }
}

/* Fix iOS: backdrop-filter fallback */
@supports not (backdrop-filter: blur(1px)) {
  aside.app-sidebar,
  header.app-header,
  .bottom-nav,
  .modal-sheet,
  .modal-box-center {
    background: rgba(247,242,237,0.97) !important;
  }
}


/* ══════════════════════════════════════
   FIX SAFARI iOS — COLUNA DE AGENDA
   Cirúrgico: afeta APENAS filhos diretos
   de .cal-day-row. Não vaza para o resto.
   ══════════════════════════════════════ */

/* Força largura total em cada linha */
.cal-day-row {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Coluna de horário — filho direto com w-16 OU primeiro div */
.cal-day-row > div:first-child {
  flex: 0 0 70px !important;
  -webkit-flex: 0 0 70px !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  box-sizing: border-box !important;
}

/* Área de conteúdo — filho direto, segundo div */
.cal-day-row > div:last-child {
  flex: 1 1 0% !important;
  -webkit-flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════
   FIX SAFARI iOS — BOTTOM NAV
   Botões distribuídos igualmente
   ══════════════════════════════════════ */
.bottom-nav > button {
  flex: 1 1 0% !important;
  -webkit-flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
}


/* ══════════════════════════════════════
   FIX DESKTOP — RESPIRO DE SCROLL FINAL
   Garante visibilidade do último item
   (horário 20:30, último card de serviço,
   última despesa) sem tocar no mobile.
   Isolado estritamente em min-width: 768px.
   ══════════════════════════════════════ */
@media (min-width: 768px) {

  /* Todas as views scrolláveis no desktop:
     Dashboard, Agenda (WeekCalendar), Serviços,
     Clientes, Finanças, Configurações */
  .flex-1.overflow-y-auto {
    padding-bottom: 80px !important;
  }

  /* Grade semanal (WeekCalendar usa .overflow-auto) */
  .flex-1.overflow-auto {
    padding-bottom: 120px !important;
    scroll-padding-bottom: 120px;
  }
}

/* ══════════════════════════════════════
   ACCORDION — Settings Blocks
   Slide-down/up Apple-style animation
   ══════════════════════════════════════ */

/* Container collapsível */
.acc-body {
  overflow: hidden;
  /* contain melhora performance iOS ao isolar o repaint do accordion */
  contain: layout style;
  transition:
    max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity    0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-body.acc-open   { max-height: 2000px; opacity: 1; }
.acc-body.acc-closed { max-height: 0px;    opacity: 0; }

/* Chevron — rota 180° quando aberto */
.acc-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 1px solid var(--gold-glow);
  flex-shrink: 0;
  transition:
    background   0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform    0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}
.acc-chevron i {
  font-size: 11px;
  color: var(--gold);
  transition:
    color     0.3s ease,
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
}
.acc-chevron:hover {
  background: rgba(184,147,90,0.18);
  border-color: var(--gold);
}

/* Header do accordion */
.acc-header {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}
.acc-header:active { opacity: 0.78; }

/* Título muda para --gold quando bloco está aberto */
.acc-header.acc-active .acc-title-text {
  color: var(--gold) !important;
}

/* Chevron girado quando aberto */
.acc-header.acc-active .acc-chevron i {
  transform: rotate(180deg);
}
.acc-header.acc-active .acc-chevron {
  background: var(--gold-pale);
  border-color: var(--gold);
}