/* ============================================================
   CONNECT BioZ — DESIGN SYSTEM
   Identidade: sofisticação, confiança, tecnologia, acolhimento.
   Paleta: branco quente / champagne / dourado elegante.
   Fonte visual única: CONNECT_BIOZ_VISUAL_MASTER_V1 (referência oficial).
   ============================================================ */
:root {
  /* ---- Tokens legados (mantidos por compatibilidade com todo o código já
     escrito — NÃO remover, apenas passam a ser alimentados pelos tokens
     --bioz-* abaixo, que são a fonte única de verdade visual). ---- */
  --bg: #FBF8F3;
  --bg-alt: #F8F3EB;
  --card: #FFFFFF;
  --secondary: #EFE5D6;
  --gold: #B88A4A;
  --gold-light: #D6B783;
  --brown: #4D3A2C;
  --text: #302821;
  --muted: #81776E;
  --success: #4D9D69;
  --warning: #D49A40;
  --danger: #C85A5A;
  --border: #E9DFCE;

  /* ---- Tokens do design system anterior (REFERENCE_MASTER_CONNECT_BIOZ) ----
     Mantidos como alias dos --bioz-* para não quebrar CSS já escrito. */
  --color-bg-main: var(--bioz-bg);
  --color-bg-soft: var(--bioz-bg-soft);
  --color-sidebar-bg: var(--bioz-surface-soft);
  --color-surface: var(--bioz-surface);
  --color-gold-primary: var(--bioz-gold);
  --color-gold-secondary: var(--bioz-gold-light);
  --color-gold-soft: var(--bioz-gold-soft);
  --color-text-primary: var(--bioz-text);
  --color-text-secondary: var(--bioz-text-muted);
  --color-border: var(--bioz-border);
  --radius-card: var(--bioz-radius-md);
  --radius-card-lg: var(--bioz-radius-lg);
  --radius-button: var(--bioz-radius-sm);
  --radius-input: var(--bioz-radius-sm);
  --shadow-card: var(--bioz-shadow-soft);
  --shadow-card-lg: 0 16px 40px -20px rgba(120,90,50,0.18);
  --font-display: var(--bioz-font-display);
  --font-body: var(--bioz-font-ui);
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);

  /* ============================================================
     DESIGN SYSTEM GLOBAL — CONNECT_BIOZ_VISUAL_MASTER_V1
     Todos os valores abaixo foram derivados visualmente da referência
     oficial (análise ponto-a-ponto de sidebar, header, cards, login).
     Esta é a ÚNICA fonte de verdade para cor/tipografia/espaçamento/radius
     em todo o sistema — novas telas devem consumir --bioz-* diretamente,
     nunca duplicar valores hardcoded.
     ============================================================ */
  --bioz-bg: #FBF8F3;
  --bioz-bg-soft: #F7F3ED;
  --bioz-surface: #FFFFFF;
  --bioz-surface-soft: #FAF7F2;

  --bioz-gold: #B88A4A;
  --bioz-gold-dark: #9C7239;
  --bioz-gold-light: #D6B783;
  --bioz-gold-soft: rgba(184,138,74,0.12);

  --bioz-text: #2A231E;
  --bioz-text-muted: #81776E;
  --bioz-border: #EAE3D9;

  --bioz-radius-sm: 10px;
  --bioz-radius-md: 16px;
  --bioz-radius-lg: 20px;

  --bioz-shadow-soft: 0 4px 16px rgba(77,58,44,0.045);

  --bioz-font-display: 'Playfair Display', Georgia, serif;
  --bioz-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

.font-serif { font-family: 'Playfair Display', Georgia, serif; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

a { color: inherit; text-decoration: none; }

.bg-card { background: var(--card); }
.bg-secondary { background: var(--secondary); }
.text-gold { color: var(--gold); }
.text-gold-light { color: var(--gold-light); }
.text-brown { color: var(--brown); }
.text-muted-bg { color: var(--muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.border-gold { border-color: var(--gold); }

.btn-gold {
  background: var(--gold);
  color: #FFFFFF;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}
.btn-gold:hover { background: #A17A3D; transform: translateY(-1px); }
.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-danger {
  background: rgba(200, 90, 90, 0.08);
  color: var(--danger);
  border: 1px solid rgba(200, 90, 90, 0.25);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.btn-danger:hover { background: rgba(200, 90, 90, 0.14); }

.card {
  background: var(--color-surface);
  border: 1px solid rgba(233,223,206,0.55);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

/* ---- PageHeader — cabeçalho de página padrão (saudação + ações), usado no
   Dashboard e demais páginas internas para manter hierarquia consistente.
   Spec extraída da CONNECT_BIOZ_VISUAL_MASTER_V1: ~80px altura, saudação em
   serif editorial 24px, subtítulo sans discreto, ações à direita com gap 20px. ---- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  min-height: 56px;
}
.page-header-title {
  font-family: var(--bioz-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--bioz-text);
  line-height: 1.2;
}
.page-header-subtitle {
  font-family: var(--bioz-font-ui);
  font-size: 14px;
  color: var(--bioz-text-muted);
  margin-top: 4px;
}
.page-header-actions {
  display: flex; align-items: center; gap: 20px;
}
.page-header-date {
  font-size: 12px; color: var(--bioz-text-muted); white-space: nowrap;
}
.page-header-icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--bioz-text-muted); font-size: 15px;
  background: transparent; border: none; cursor: pointer; position: relative;
  transition: background 0.15s, color 0.15s;
}
.page-header-icon-btn:hover { background: var(--bioz-gold-soft); color: var(--bioz-gold-dark); }

/* ---- MetricCard — cards de KPI do topo do dashboard, com ícone circular
   suave, número grande, rótulo discreto e microindicador de tendência.
   Spec extraída da referência: altura ~100px, borda #F0E9E2, radius 12px,
   padding 16px, número 24px bold, label 11px, sparkline só no card de receita. ---- */
.metric-card {
  background: var(--bioz-surface);
  border: 1px solid #F0E9E2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--bioz-shadow-soft);
  position: relative;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric-card-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bioz-gold-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.metric-card-value { font-size: 24px; font-weight: 700; color: var(--bioz-text); line-height: 1.15; font-family: var(--bioz-font-ui); }
.metric-card-label { font-size: 11px; color: var(--bioz-text-muted); margin-top: 3px; }
.metric-card-sub { font-size: 11px; margin-top: 6px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ---- SectionCard — bloco de conteúdo com título + link "ver mais", usado em
   'Agenda de hoje', 'Oportunidades para você' e equivalentes. ---- */
.section-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-card-title {
  font-family: var(--bioz-font-display);
  font-weight: 600; font-size: 15px; color: var(--bioz-text);
}
.section-card-link { font-size: 11px; color: #9C7D62; font-weight: 600; }

/* Agenda de hoje — linhas de ~52px, divisor bem sutil, badges pill de status */
.appointment-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 8px 4px; border-bottom: 1px solid #F2ECE6;
  cursor: pointer; border-radius: 8px; transition: background 0.15s;
}
.appointment-row:last-child { border-bottom: none; }
.appointment-row:hover { background: rgba(184,138,74,0.05); }
.appointment-time { font-weight: 600; font-size: 11px; color: var(--bioz-text); min-width: 42px; }

/* Oportunidades — círculos de ícone uniformes em creme/dourado, linhas ~48px */
.opportunity-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 4px; border-bottom: 1px solid #F2ECE6;
  color: inherit; text-decoration: none;
}
.opportunity-row:last-child { border-bottom: none; }
.opportunity-row-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: #F9F4EE;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.input-field {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  width: 100%;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.input-field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,138,74,0.1); }
.input-field::placeholder { color: var(--muted); opacity: 0.7; }
.input-field:disabled { background: var(--bg-alt); color: var(--muted); }

select.input-field { appearance: none; }

label.field-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Priority Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-high { background: rgba(200,90,90,0.1); color: var(--danger); }
.badge-medium { background: rgba(212,154,64,0.12); color: var(--warning); }
.badge-low { background: rgba(129,119,110,0.1); color: var(--muted); }

.badge-open { background: rgba(184,138,74,0.12); color: var(--gold); }
.badge-contacted { background: rgba(212,154,64,0.12); color: var(--warning); }
.badge-responded { background: rgba(77,157,105,0.12); color: var(--success); }
.badge-interested { background: rgba(77,157,105,0.16); color: var(--success); }
.badge-scheduled { background: rgba(120,150,255,0.12); color: #5C6FC7; }
.badge-won { background: rgba(77,157,105,0.2); color: var(--success); }
.badge-lost { background: rgba(200,90,90,0.1); color: var(--danger); }
.badge-postponed { background: rgba(129,119,110,0.1); color: var(--muted); }

.badge-active { background: rgba(77,157,105,0.12); color: var(--success); }
.badge-inactive { background: rgba(129,119,110,0.1); color: var(--muted); }
.badge-lead { background: rgba(120,150,255,0.12); color: #5C6FC7; }
.badge-opportunity { background: rgba(212,154,64,0.12); color: var(--warning); }
.badge-vip { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #FFFFFF; }
.badge-archived { background: rgba(129,119,110,0.1); color: var(--muted); }

/* Badges de status de agendamento — cores extraídas da referência (verde para
   confirmado, dourado suave para aguardando/em atendimento). */
.badge-confirmed { background: #EBF7EE; color: #2E7D32; }
.badge-awaiting { background: #FDF4E9; color: #9C7D62; }
.badge-in_progress { background: #FDF4E9; color: #9C7D62; }
.badge-done { background: #EBF7EE; color: #2E7D32; }
.badge-cancelled { background: rgba(200,90,90,0.1); color: var(--danger); }
.badge-no_show { background: rgba(200,90,90,0.1); color: var(--danger); }

/* ============================================================
   LAYOUT — Sidebar clara/discreta + Topbar + Main content, fiel à
   REFERENCE_MASTER_CONNECT_BIOZ: sidebar em tom creme muito claro, item ativo
   em pílula dourada preenchida, ícones finos, bastante respiro, sem divisores
   pesados. Fundo principal levemente mais frio/claro que a sidebar para criar
   profundidade sutil entre as duas áreas. ---- */
#app-shell { display: flex; min-height: 100vh; position: relative; }

#sidebar {
  width: 198px;
  background: var(--bioz-surface-soft);
  border-right: 1px solid var(--bioz-border);
  padding: 26px 14px;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 25;
}

#main-content {
  margin-left: 198px;
  flex: 1;
  min-height: 100vh;
  padding-bottom: 40px;
  background: var(--color-bg-soft);
  position: relative;
}
/* Ornamento orgânico sutil no canto superior direito do conteúdo principal —
   ecoa as "ondas douradas" da tela de login em todas as páginas internas,
   com opacidade extremamente baixa para não competir com os dados. */
#main-content::before {
  content: '';
  position: fixed;
  top: -12%; right: -8%;
  width: 42vw; height: 30vw;
  max-width: 620px; max-height: 420px;
  border-radius: 50%;
  transform: rotate(-22deg);
  background: radial-gradient(ellipse, rgba(196,153,84,0.09) 0%, rgba(214,183,131,0.04) 50%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
#main-content > * { position: relative; z-index: 1; }

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px 22px;
  margin-bottom: 4px;
}
.sidebar-brand .brand-wordmark { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.sidebar-brand-logo { width: 100%; max-width: 174px; height: auto; display: block; object-fit: contain; }
.sidebar-brand-sub { font-size: 9px; color: var(--bioz-text-muted); margin-top: 3px; letter-spacing: 0.03em; }

/* Item de navegação — leve, discreto, fino, sem "caixinha" no ícone. O ativo
   (aprovado na referência CONNECT_BIOZ_VISUAL_MASTER_V1 — sidebar zoom) usa
   um gradiente dourado metálico preenchido, compacto (altura igual aos
   demais itens), com ícone e texto brancos — não é um "bloco marrom pesado"
   porque a altura/padding permanecem idênticos aos itens inativos. */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  color: #8A7D73;
  font-size: 12.5px;
  font-weight: 400;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  letter-spacing: 0.01em;
}
.sidebar-link:hover { background: rgba(184,138,74,0.06); color: var(--bioz-text); }
.sidebar-link:hover i { color: var(--bioz-gold-dark); }
.sidebar-link.active {
  background: linear-gradient(90deg, #8B5E3C 0%, #B9835A 40%, #E8C398 100%);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 3px 8px -2px rgba(156,114,57,0.35);
}
.sidebar-link.active i { color: #FFFFFF; }
/* Ícone fino, sem fundo/caixinha — apenas alinhado ao texto, discreto. */
.sidebar-link i {
  width: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bioz-gold);
  font-size: 12px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sidebar-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bloco de navegação com scroll independente do wrapper, para acomodar mais
   itens (WhatsApp, Fornecedores, Cursos, Equipe, etc.) sem forçar o sidebar
   a crescer além da altura da tela. */
#sidebar nav { display: flex; flex-direction: column; }
#sidebar nav[hidden], .sidebar-search-empty[hidden], .more-menu-section[hidden], .more-card[hidden], .more-search-empty[hidden] { display: none; }
.sidebar-search, .more-search-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--bioz-surface); border: 1px solid var(--bioz-border);
  border-radius: 9px; padding: 0 10px; color: var(--bioz-gold);
}
.sidebar-search { flex-shrink: 0; min-height: 36px; margin: 0 2px 12px; }
.sidebar-search i, .more-search-field i { font-size: 12px; flex-shrink: 0; }
.sidebar-search input, .more-search-field input {
  width: 100%; min-width: 0; height: 34px; background: transparent;
  border: 0; outline: 0; font: 12px var(--bioz-font-ui); color: var(--bioz-text);
}
.sidebar-search:focus-within, .more-search-field:focus-within { border-color: var(--bioz-gold); }
.sidebar-search input::placeholder, .more-search-field input::placeholder { color: var(--bioz-text-muted); opacity: .85; }
.sidebar-menu-scroll {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: scroll;
  scrollbar-width: thin; scrollbar-color: var(--bioz-gold-light) transparent;
  padding-right: 3px; margin-right: -4px;
}
.sidebar-menu-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-menu-scroll::-webkit-scrollbar-thumb { background: var(--bioz-gold-light); border-radius: 5px; }
.sidebar-menu-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-search-result { width: 100%; border: 0; background: transparent; text-align: left; font-family: var(--bioz-font-ui); }
.sidebar-search-empty { color: var(--bioz-text-muted); font-size: 12px; padding: 8px; }
.sidebar-logout { flex-shrink: 0; margin-top: 9px; border-top: 1px solid var(--bioz-border); border-radius: 0; padding-top: 12px; }
.more-search-field { max-width: 380px; margin: 0 0 18px; }
.more-search-page { width: 100%; }
.more-search-empty { color: var(--bioz-text-muted); font-size: 13px; margin: 10px 0; }
.more-menu-section { margin-bottom: 26px; }
.more-menu-section h3 { font-size: 13px; font-weight: 600; color: var(--bioz-text-muted); margin: 0 0 12px; }
.more-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.more-menu-grid .more-card { border: 1px solid var(--bioz-border); min-height: 88px; font-family: var(--bioz-font-ui); }
.more-mobile-modal { width: min(100%, 430px); max-height: 85vh; max-height: 85dvh; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--bioz-gold-light) transparent; }
.more-mobile-modal::-webkit-scrollbar { width: 5px; }
.more-mobile-modal::-webkit-scrollbar-thumb { background: var(--bioz-gold-light); border-radius: 5px; }
.more-mobile-modal .more-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-mobile-modal .more-menu-grid .more-card { min-height: 76px; }
.more-mobile-modal .more-search-field { max-width: none; }
.more-close-button { border: 0; background: transparent; color: var(--bioz-text-muted); font-size: 24px; cursor: pointer; }
.more-logout { display: flex; width: 100%; border: 0; border-top: 1px solid var(--bioz-border); background: none; text-align: left; padding: 12px; }
@media (max-width: 390px) {
  .more-mobile-modal .more-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.topbar {
  background: transparent;
  height: 80px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-date {
  font-size: 12px;
  color: var(--bioz-text-muted);
  white-space: nowrap;
}
.topbar-icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--bioz-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.topbar-icon-btn:hover { background: var(--bioz-gold-soft); color: var(--bioz-gold-dark); }

#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  z-index: 30;
  justify-content: space-around;
  box-shadow: 0 -2px 12px rgba(77,58,44,0.05);
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  border-radius: 10px;
}
.bottom-nav-item.active { color: var(--gold); }
.bottom-nav-item i { font-size: 17px; }
.bottom-nav-item.bottom-nav-new {
  color: #FFFFFF;
  background: var(--gold);
  border-radius: 50%;
  width: 46px; height: 46px;
  margin-top: -14px;
  box-shadow: 0 4px 12px rgba(184,138,74,0.35);
}
.bottom-nav-item.bottom-nav-new span { display: none; }
.bottom-nav-item.bottom-nav-new i { font-size: 19px; }

.more-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s;
}
.more-card:hover { background: var(--secondary); }
.more-card i { font-size: 18px; color: var(--gold); }

@media (max-width: 900px) {
  #sidebar { display: none; }
  #main-content { margin-left: 0; padding-bottom: 90px; }
  #bottom-nav { display: flex; }
  .topbar { height: auto; padding: 14px 16px; }
  #client-body-grid { grid-template-columns: 1fr !important; }
  #client-plan-sidebar { order: -1; }
  .grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
  /* Dashboard: "Agenda de hoje" + "Oportunidades" empilham em coluna única no
     mobile em vez de espremer lado a lado (Seção 25 — mobile não pode ser só
     o desktop comprimido). */
  .dashboard-lower-grid { grid-template-columns: 1fr !important; }
  .page-header { align-items: flex-start !important; }
}
@media (max-width: 480px) {
  .grid-cols-4 { grid-template-columns: 1fr !important; }
}

.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--secondary);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.spinner {
  border: 3px solid var(--secondary);
  border-top: 3px solid var(--gold);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 14px 20px;
  border-radius: 12px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(77,58,44,0.12);
  animation: toast-in 0.25s ease;
  max-width: 320px;
}
.toast.error { border-color: var(--danger); }
.toast.success { border-color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(48,40,33,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  padding: 20px;
}
.modal-box {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(77,58,44,0.18);
}

.table-row:hover { background: var(--bg-alt); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #FFFFFF;
  flex-shrink: 0;
  background: var(--gold);
}

.kanban-col { min-width: 260px; flex: 1; }

.tab-btn {
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.tab-btn.active { background: var(--secondary); color: var(--gold); }

/* ---- Tabs "underline" — usadas na página de Cliente/Prontuário, fiéis à
   referência (tab ativa com sublinhado dourado fino, sem pílula de fundo). ---- */
.tabs-underline {
  display: flex; gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(233,223,206,0.7);
}
.tab-underline-btn {
  padding: 0 2px 12px; font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-underline-btn:hover { color: var(--brown); }
.tab-underline-btn.active { color: var(--brown); font-weight: 600; border-bottom-color: var(--gold); }

/* ---- Cliente / Prontuário — header, contatos e timeline de tratamento ---- */
.client-header-card { padding: 24px; }
.client-avatar-lg {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  flex-shrink: 0;
}
.client-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--brown); }
.client-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background 0.15s;
}
.contact-icon-btn:hover { background: rgba(184,138,74,0.22); }

.badge-vip-pill { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; }
.badge-active-pill { background: var(--success); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

.info-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.info-row-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--color-gold-soft); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  margin-top: 1px;
}
.info-row-label { font-size: 11px; color: var(--muted); }
.info-row-value { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 1px; }

/* ---- Timeline do plano de tratamento (sidebar direita) ---- */
.treatment-timeline { position: relative; padding-left: 4px; }
.timeline-step { position: relative; display: flex; gap: 12px; padding-bottom: 22px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
  content: ''; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 1px; background: rgba(233,223,206,0.9);
}
.timeline-step:last-child::before { display: none; }
.timeline-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; z-index: 1;
}
.timeline-dot.done { background: var(--success); color: #fff; }
.timeline-dot.current { background: var(--gold); color: #fff; box-shadow: 0 0 0 4px rgba(184,138,74,0.15); }
.timeline-dot.pending { background: var(--secondary); color: var(--muted); }
.timeline-step-title { font-size: 13px; font-weight: 600; color: var(--text); }
.timeline-step-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.recommend-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text); padding: 6px 0; line-height: 1.45; }
.recommend-item i { color: var(--gold); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

.skeleton {
  background: linear-gradient(90deg, var(--secondary) 25%, #F3E9DA 37%, var(--secondary) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Login / Auth — identidade visual oficial CONNECT BioZ ----
   Referência: fundo off-white/creme claro, ondas orgânicas douradas suaves e
   difusas varrendo o canto superior direito (não um "spot" concentrado atrás
   do card), card de login FLUTUANTE, sem borda visível, sombra extremamente
   sutil e difusa, bastante espaço em branco. */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: linear-gradient(122deg, #FCFAF5 0%, #FEFDF9 37%, #F7ECD9 72%, #ECD4B1 100%);
  position: relative;
  overflow: hidden;
}
/* Camadas de arcos champagne e dourado atravessam a parte inferior e a
   lateral direita; elementos ficam atrás do conteúdo e não recebem cliques. */
.auth-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 82% 107% at 84% 135%, transparent 54%, rgba(142,87,31,.6) 54.2%, #E8C898 54.7%, #F6E5C9 62%, rgba(255,255,255,.82) 62.3%, transparent 62.8%),
    radial-gradient(ellipse 95% 127% at 78% 147%, transparent 51%, rgba(169,112,47,.6) 51.2%, #EACCA4 51.8%, #F6E6CB 60%, rgba(255,255,255,.9) 60.3%, transparent 60.8%),
    radial-gradient(ellipse 75% 125% at 130% 18%, transparent 60%, rgba(170,114,50,.66) 60.2%, #F1DCBE 60.6%, #FAF3E5 72%, rgba(255,255,255,.85) 72.4%, transparent 73%);
  pointer-events: none;
}
.auth-shell::after {
  content: '';
  position: absolute;
  right: -26%; bottom: -108%;
  width: 125%; height: 180%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 40px rgba(184,138,74,.09), 0 0 0 42px rgba(255,255,255,.7), 0 0 0 90px rgba(184,138,74,.05);
  pointer-events: none;
}
.auth-brand-side::before { display: none; }
/* Proporção institucional/formulário 58% / 42%, conforme
   CONNECT_BIOZ_VISUAL_MASTER_V1 (Seção 23). */
.auth-brand-side {
  flex: 0 0 58%;
  max-width: 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 40px 24px 0 clamp(40px, 6.5vw, 90px);
}
/* O card de login é um elemento FLUTUANTE inserido na composição — o lado
   direito não deve ter um bloco de fundo sólido/diferenciado ocupando toda
   a coluna (isso lembrava "painel administrativo"). O fundo contínuo
   off-white + ondas douradas do .auth-shell atravessa por trás do card. */
.auth-form-side {
  flex: 0 0 42%;
  max-width: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 24px 4.8vw 24px 27px;
  background: transparent;
}
.auth-card {
  width: 100%;
  max-width: 410px;
  background: rgba(255,255,255,.93);
  border-radius: 12px;
  padding: 24px 32px 23px;
  box-shadow: 0 18px 38px rgba(88,61,32,.16);
  border: 1px solid rgba(255,255,255,.6);
}
.auth-login-card { padding: 28px 32px 27px; transform: translateY(14px); }
.auth-card-title {
  font-size: 24px;
  font-weight: 700;
  color: #261A13;
  margin: 0 0 13px;
  font-family: var(--bioz-font-ui), Arial, sans-serif;
}
.auth-card .input-field {
  height: 39px; padding: 8px 14px 8px 34px;
  background: rgba(255,255,255,.3); border-color: #E6DFD5;
  border-radius: 7px; font-size: 12px;
}
.auth-card .field-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #6E6A63; font-size: 13px; pointer-events: none;
}
.auth-password-toggle {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #6E6A63; padding: 4px;
  cursor: pointer; font-size: 13px;
}
.auth-password-toggle:focus-visible { outline: 2px solid var(--gold); border-radius: 4px; }
.auth-form-options { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 16px 0 15px; font-size: 11px; }
.auth-remember { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #24201C; white-space: nowrap; }
.auth-remember input { margin: 0; width: 15px; height: 15px; accent-color: #A77839; cursor: pointer; }
.auth-signup { margin-top: 14px; text-align: center; color: #6D6964; font-size: 11px; }
.auth-submit { width: 100%; height: 43px; padding: 8px 12px; font-size: 15px; border-radius: 7px; }
.auth-submit-arrow { margin-left: 5px; font-size: 20px; font-weight: 400; line-height: 0; vertical-align: -1px; }
.auth-link-gold { color: #936533; font-weight: 400; text-decoration: underline; text-decoration-color: #936533; white-space: nowrap; }
/* Botão "Entrar" do login: gradiente dourado quente com texto ESCURO (não
   branco), reproduzindo exatamente a referência aprovada — override local
   apenas dentro do card de auth, sem afetar .btn-gold usado em outras telas. */
.auth-card .btn-gold {
  background: linear-gradient(90deg, #B78D5C 0%, #D8AD78 53%, #B98D58 100%);
  color: #FFFFFF;
  font-weight: 700;
}
.auth-card .btn-gold:hover { background: linear-gradient(90deg, #BC9264 0%, #E3B57F 50%, #B57F49 100%); }
.auth-logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Wordmark oficial "CONNECT BioZ" — componente reutilizável (.brand-wordmark)
   usado no login, sidebar e onde mais a marca aparecer. "CONNECT" em serifada
   firme + "BioZ" em itálico dourado com maior presença, como assinatura,
   reproduzindo a hierarquia visual da referência aprovada. */
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700; color: var(--brown);
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
}
.brand-wordmark .brand-bioz {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0;
}
/* O mesmo arquivo da marca oficial aparece no login e no topo do menu. */
.auth-brand-logo {
  display: block;
  width: min(100%, 450px);
  height: auto;
  object-fit: contain;
}
/* Alias de compatibilidade — mantém o nome antigo funcionando */
.auth-logo-text { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--brown); letter-spacing: 0.03em; display: inline-flex; align-items: baseline; gap: 0.16em; }
.auth-logo-text .brand-bioz, .brand-bioz { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--gold); letter-spacing: 0; }
/* Tagline institucional — sentence case (NÃO uppercase), sans-serif regular,
   tracking discreto, conforme medição pixel-a-pixel da referência aprovada. */
.auth-eyebrow {
  font-size: 16px;
  letter-spacing: 0;
  color: #47372D;
  text-transform: none;
  margin-top: 2px;
  font-weight: 400;
  font-family: var(--bioz-font-ui), Arial, sans-serif;
}
.auth-tagline {
  font-size: clamp(39px, 5vw, 54px);
  font-weight: 500;
  color: #322019;
  line-height: 1.1;
  max-width: 500px;
  margin-top: 33px;
  font-family: 'Playfair Display', Georgia, serif;
}
/* Rótulos dentro do card de login — discretos, sem caixa alta pesada, mais
   próximos do padrão "placeholder elegante" da referência. */
.auth-card label.field-label {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6C6862;
  margin-bottom: 5px;
  opacity: 1;
}
.auth-card form .mb-3 { margin-bottom: 12px; }
.auth-card form .mb-2 { margin-bottom: 0; }

/* "Z" decorativo do bloco mobile — símbolo grande em itálico serifado,
   reproduzindo a referência aprovada (aparece só no mobile, acima do
   wordmark completo "CONNECT BioZ"). */
.auth-z-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 84px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.auth-brand-side-mobile { display: flex; flex-direction: column; align-items: center; }
.auth-tagline-mobile { font-size: 37px; margin-top: 30px; text-align: center; line-height: 1.2; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; color: #3A2313; }

/* Badge de posicionamento "01 CLÁSSICO E ELEGANTE" — exibido apenas no login
   desktop, abaixo do headline, conforme referência aprovada (círculo bege
   com número marrom escuro + rótulo uppercase + subtítulo discreto). */
.auth-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 54px;
}
.auth-badge-number {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #E7D6BE;
  color: #2A1F14;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--bioz-font-ui), Arial, sans-serif;
}
.auth-badge-title {
  font-size: 14px;
  font-weight: 500;
  color: #1F1B19;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--bioz-font-ui), Arial, sans-serif;
}
.auth-badge-sub {
  font-size: 13px;
  color: #37302B;
  margin-top: 2px;
  font-family: var(--bioz-font-ui), Arial, sans-serif;
}

@media (max-width: 900px) {
  .auth-shell { flex-direction: column; justify-content: flex-start; padding: 0 20px; gap: 0; overflow: auto; }
  .auth-shell::after { display: none; }
  .auth-brand-side { flex: none; max-width: 100%; width: 100%; text-align: center; align-items: center; padding: 35px 0 0; }
  .auth-brand-logo { width: min(100%, 310px); margin: 0 auto; }
  .auth-eyebrow { font-size: 12px; }
  .auth-tagline-mobile { font-size: clamp(27px, 5vw, 37px); margin-top: 20px; }
  .auth-form-side { flex: none; width: 100%; max-width: 100%; padding: 24px 0 40px; background: transparent; }
  .auth-card { max-width: 420px; padding: 24px; box-shadow: 0 12px 32px -8px rgba(120,90,50,0.14); }
  .auth-login-card { transform: none; }
}
@media (max-width: 480px) {
  .auth-shell { padding: 0 16px; }
  .auth-brand-side { padding-top: 28px; }
  .auth-tagline-mobile { margin-top: 16px; }
  .auth-form-options { font-size: 10px; }
  .auth-card { padding: 22px 20px; }
}

/* Utilitários mínimos usados pelos componentes (substituem parte do Tailwind quando preflight off) */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mb-1{margin-bottom:4px;} .mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;} .mb-6{margin-bottom:24px;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mt-5{margin-top:20px;} .mt-6{margin-top:24px;}
.pt-4{padding-top:16px;}
.py-16{padding-top:64px;padding-bottom:64px;} .py-20{padding-top:80px;padding-bottom:80px;}
.text-center{text-align:center;} .text-left{text-align:left;}
.grid{display:grid;} .grid-cols-2{grid-template-columns:repeat(2,1fr);} .grid-cols-3{grid-template-columns:repeat(3,1fr);} .grid-cols-4{grid-template-columns:repeat(4,1fr);}
.flex-wrap{flex-wrap:wrap;}
.relative{position:relative;}
.hidden{display:none;}
@media (min-width:640px){ .sm\:block{display:block;} }
.w-full{width:100%;}

/* Agenda — apenas estilos do módulo; preserva os tokens e o shell existentes. */
.agenda-page { max-width: 1560px; margin: 0 auto; }
.agenda-heading, .agenda-toolbar, .agenda-filters { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.agenda-heading { margin-bottom:20px; }
.agenda-heading h1 { font:600 27px var(--bioz-font-display); margin:0 0 4px; color:var(--bioz-text); }
.agenda-heading p { color:var(--muted);font-size:13px;margin:0; }
.agenda-heading-actions,.agenda-date-controls,.agenda-view-switch { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.agenda-new-button { white-space:nowrap; min-height:40px; }
.agenda-toolbar { background:#fff;border:1px solid var(--bioz-border);border-radius:14px;padding:12px 16px;margin-bottom:12px; }
.agenda-toolbar .btn-ghost { min-height:36px;padding:7px 11px; }
.agenda-date-controls strong { font-size:13px; color:var(--brown);margin-left:8px; }
.agenda-date-picker { font-size:0; }
.agenda-date-picker input { width:145px;height:36px;padding:6px 8px;font-size:12px; }
.agenda-view-switch { padding:3px;background:var(--bioz-bg-soft);border-radius:10px;gap:2px; }
.agenda-view-switch button { background:transparent;border:0;color:var(--muted);border-radius:8px;padding:8px 13px;font:600 12px var(--bioz-font-ui);cursor:pointer; }
.agenda-view-switch button.active { color:var(--brown);background:#fff;box-shadow:0 1px 5px rgba(77,58,44,.12); }
.agenda-filters { justify-content:flex-start; background:#fff;border:1px solid var(--bioz-border);border-radius:14px;padding:12px 16px;margin-bottom:16px; }
.agenda-filters label { display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11px;flex:1 1 150px; }
.agenda-filters .agenda-search-label { flex:1.4 1 200px; }
.agenda-filters .input-field { height:36px;font-size:12px;padding:7px 10px; }
.agenda-feedback { padding:12px 14px;margin-bottom:12px;background:#FAEDEC;color:#8B3E3E;border-radius:9px;font-size:13px; }
.agenda-week-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;align-items:stretch; }
.agenda-week-day { background:#fff;border:1px solid var(--bioz-border);border-radius:12px;min-height:270px;overflow:hidden; }
.agenda-week-day.is-today { border-color:var(--gold-light); }
.agenda-day-title { width:100%;text-align:left;display:flex;align-items:center;flex-wrap:wrap;gap:5px;background:var(--bioz-bg-soft);border:0;border-bottom:1px solid var(--border);padding:10px;cursor:pointer;font-size:11px;color:var(--brown); }
.agenda-day-title strong { font-size:16px; }
.agenda-day-title small { display:block;width:100%;color:var(--muted);font-size:10px; }
.agenda-day-items { padding:7px; }
.agenda-appointment { border:1px solid var(--bioz-border);border-left:3px solid var(--gold);background:#FFFEFC;border-radius:9px;padding:9px;cursor:pointer;min-width:0;margin-bottom:7px;box-shadow:0 2px 7px rgba(77,58,44,.035); }
.agenda-appointment:hover,.agenda-appointment:focus-visible { outline:0;border-color:var(--gold-light);box-shadow:0 2px 12px rgba(184,138,74,.16); }
.agenda-appointment.status-scheduled { border-left-color:#B8A487; }
.agenda-appointment.status-awaiting { border-left-color:#CEA86B; }
.agenda-appointment.status-in_progress { border-left-color:#987656; }
.agenda-appointment.status-done { border-left-color:#8E9D80; }
.agenda-appointment.status-no_show,.agenda-appointment.status-cancelled { border-left-color:#BDA5A0;opacity:.78; }
.agenda-card-top { display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:6px; }
.agenda-card-top strong { color:var(--brown);font-size:14px; }
.agenda-status { font-size:10px;color:var(--brown);background:#F5F0E8;border-radius:100px;padding:3px 6px; }
.agenda-client-link { display:block;font-size:12px;font-weight:700;color:var(--bioz-text);line-height:1.35;overflow-wrap:anywhere;margin-bottom:3px; }
.agenda-client-link:hover { text-decoration:underline;color:var(--gold); }
.agenda-card-service { font-size:11px;color:var(--brown);line-height:1.35;overflow-wrap:anywhere; }
.agenda-card-footer { color:var(--muted);font-size:10px;display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap;margin-top:7px;overflow-wrap:anywhere; }
.agenda-appointment small { display:block;font-size:10px;color:var(--muted);margin-top:4px; }
.agenda-quick-status { width:100%;margin-top:8px;border:1px solid var(--border);border-radius:6px;background:var(--bioz-bg-soft);color:var(--brown);padding:5px 3px;font-size:11px;cursor:pointer; }
.agenda-empty-slot { border:1px dashed var(--border);color:var(--bioz-gold-dark);background:transparent;border-radius:8px;padding:8px 5px;width:100%;font-size:11px;text-align:center;cursor:pointer;min-height:32px; }
.agenda-empty-slot:hover { background:var(--bioz-gold-soft);border-color:var(--gold-light); }
.agenda-mobile-day { display:none; }
.agenda-day-view { background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px; }
.agenda-day-view h2,.agenda-mobile-day h2 { font:600 18px var(--bioz-font-display);margin:0 0 16px;color:var(--bioz-text); }
.agenda-day-view h2 small { font:400 12px var(--bioz-font-ui);color:var(--muted);margin-left:8px; }
.agenda-timeline-row { display:grid;grid-template-columns:60px minmax(0,1fr);min-height:56px;border-top:1px solid #F1EBE2;padding:6px 0; }
.agenda-timeline-row time { font-weight:600;color:var(--brown);font-size:12px;padding:8px 0; }
.agenda-timeline-content { display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start; }
.agenda-timeline-content .agenda-appointment { min-width:min(100%,220px);max-width:340px;flex:1 1 220px;margin-bottom:0; }
.agenda-timeline-content .agenda-empty-slot { text-align:left;min-height:36px;padding-left:12px; }
.agenda-break-label { color:var(--muted);font-size:12px;padding:8px; }
.agenda-month-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px; }
.agenda-month-weekday { text-align:center;padding:7px;color:var(--muted);font-size:11px; }
.agenda-month-cell,.agenda-month-pad { min-height:105px;border:1px solid var(--border);background:#fff;border-radius:9px;padding:7px;position:relative;min-width:0; }
.agenda-month-cell.is-today { border-color:var(--gold); }
.agenda-month-number { background:none;border:0;color:var(--brown);font-weight:700;cursor:pointer;text-align:left;font-size:13px;padding:0; }
.agenda-month-number small { display:block;color:var(--muted);font-size:10px;font-weight:400; }
.agenda-month-events { margin-top:7px; }
.agenda-month-event,.agenda-more-events { display:block;width:100%;text-align:left;background:var(--bioz-bg-soft);border:0;border-radius:4px;padding:4px;margin:2px 0;font-size:10px;color:var(--brown);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer; }
.agenda-month-add { position:absolute;right:5px;top:5px;background:none;border:0;color:var(--gold);cursor:pointer;font-size:17px; }
.agenda-form-modal { max-width:650px;max-height:min(90vh,900px);overflow-y:auto; }
.agenda-modal-header { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px; }
.agenda-modal-header h2 { font:600 21px var(--bioz-font-display);margin:0;color:var(--brown); }
.agenda-modal-header button { border:0;background:none;color:var(--muted);font-size:25px;cursor:pointer; }
.agenda-field { display:block;margin:12px 0;font-size:11px;color:var(--muted);font-weight:500; }
.agenda-field>.input-field { margin-top:5px; }
.agenda-client-row { display:flex;gap:8px;margin:5px 0; }
.agenda-client-row .input-field { flex:1;min-width:0; }
.agenda-client-row .btn-ghost { white-space:nowrap;font-size:11px;padding:8px; }
.agenda-inline-client { background:var(--bioz-bg-soft);border-radius:10px;padding:12px;margin:10px 0; }
.agenda-inline-client strong { color:var(--brown);font-size:13px; }
.agenda-inline-client p { font-size:12px;color:var(--danger); }
.agenda-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:12px 0; }
.agenda-form-grid label,.agenda-treatment-fields label,.agenda-settings-modal label { display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);font-weight:500;min-width:0; }
.agenda-treatment-fields { display:grid;grid-template-columns:2fr 1fr;gap:12px;margin:12px 0; }
.agenda-form-modal .input-field,.agenda-settings-modal .input-field { height:39px;font-size:13px; }
.agenda-form-modal textarea.input-field { height:auto;min-height:60px; }
.agenda-availability { background:var(--bioz-bg-soft);border-radius:10px;padding:10px;margin:14px 0;font-size:12px;color:var(--brown); }
.agenda-slot-options { display:flex;flex-wrap:wrap;gap:5px;max-height:90px;overflow:auto;margin-top:8px; }
.agenda-slot-options button { border:1px solid var(--gold-light);border-radius:6px;background:#fff;color:var(--brown);padding:6px 8px;cursor:pointer;font-size:11px;min-width:51px; }
.agenda-slot-options button.selected { background:var(--gold);color:#fff; }
.agenda-slot-options button:disabled { border-color:var(--border);color:var(--muted);background:#F2EEE9;cursor:not-allowed;text-decoration:line-through; }
.agenda-recurrence { padding:9px 0;border-block:1px solid var(--border);font-size:12px; }
.agenda-recurrence>label { display:flex;align-items:center;gap:7px;cursor:pointer; }
.agenda-recurrence input[type=checkbox],.agenda-days-settings input { accent-color:var(--gold); }
.agenda-form-error { color:var(--danger);font-size:12px;margin:8px 0; }
.agenda-modal-actions { display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:14px;margin-top:14px; }
.agenda-modal-actions button { min-height:38px;font-size:12px;padding:8px 12px; }
.agenda-history { border-top:1px solid var(--border);margin-top:16px;padding-top:12px;font-size:11px;color:var(--muted); }
.agenda-history h3 { font-size:13px;color:var(--brown);margin:0 0 8px; }
.agenda-history p { margin:7px 0;line-height:1.5; }
.agenda-days-settings { display:flex;flex-wrap:wrap;gap:10px;border:1px solid var(--border);border-radius:9px;padding:12px;margin-top:14px; }
.agenda-days-settings legend { color:var(--brown);font-size:12px; }
.agenda-days-settings label { display:flex;flex-direction:row;align-items:center;gap:3px; }
@media (max-width:1150px) {
  .agenda-week-grid { grid-template-columns:repeat(7,minmax(0,1fr));gap:3px; }
  .agenda-day-items { padding:4px; }
  .agenda-appointment { padding:6px; }
}
@media (max-width:900px) {
  .agenda-page { padding-bottom:24px; }
  .agenda-heading { align-items:flex-start; }
  .agenda-week-grid { display:none; }
  .agenda-mobile-day { display:block;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px; }
  .agenda-week-strip { display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:18px; }
  .agenda-week-strip button { border:0;background:var(--bioz-bg-soft);color:var(--brown);border-radius:8px;padding:8px 0;font-size:10px;cursor:pointer; }
  .agenda-week-strip button.active { background:var(--gold);color:#fff; }
  .agenda-week-strip strong { display:block;font-size:13px;margin-top:3px; }
  .agenda-mobile-day .agenda-appointment { padding:12px; }
  .agenda-mobile-day .agenda-empty-slot { min-height:44px; }
  .agenda-no-items { font-size:13px;color:var(--muted); }
  .agenda-month-cell,.agenda-month-pad { min-height:77px;padding:5px; }
  .agenda-month-event { font-size:9px;padding:3px; }
}
@media (max-width:600px) {
  .agenda-heading h1 { font-size:24px; }
  .agenda-heading p { font-size:11px; }
  .agenda-heading-actions { width:100%; }
  .agenda-new-button { flex:1; }
  .agenda-toolbar,.agenda-filters { padding:10px; }
  .agenda-date-controls { width:100%; }
  .agenda-date-controls strong { order:5;width:100%;margin:4px 0 0; }
  .agenda-view-switch { width:100%;justify-content:space-between; }
  .agenda-view-switch button { flex:1; }
  .agenda-filters label { flex:1 1 calc(50% - 12px); }
  .agenda-filters .agenda-search-label { flex-basis:100%; }
  .agenda-month-cell,.agenda-month-pad { min-height:59px; }
  .agenda-month-number small,.agenda-month-add { display:none; }
  .agenda-month-event { font-size:0; width:7px;height:7px;border-radius:50%;padding:0;background:var(--gold);display:inline-block; }
  .agenda-form-modal { width:100%;max-height:95vh;padding:18px; }
  .agenda-form-grid { gap:9px; }
  .agenda-client-row { flex-wrap:wrap; }
  .agenda-client-row .btn-ghost { min-height:36px; }
  .agenda-modal-actions { justify-content:stretch; }
  .agenda-modal-actions button { flex:1 1 45%; }
}