/* ============================================================
   BOOKCLIN SAAS — ESTILOS GLOBAIS
   Paleta: Bege quente + Rosa elegante
   Fonte display : Cormorant Garamond (títulos)
   Fonte corpo   : DM Sans (texto geral)
   ============================================================ */

/* ── Importa fontes do Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── Variáveis CSS globais ── */
:root {
  /* Tons de bege */
  --beige-50 : #FEFCF8;
  --beige-100: #FAF3E8;
  --beige-200: #F3E5CE;
  --beige-300: #E5CDB0;
  --beige-400: #D4B490;

  /* tons de verde */
  --green-100: #E8F5E9;
  --green-200: #c9dbcb;

  /* Tons de rosa */
  --rose-100: #FBDCE4;
  --rose-200: #F5BAC8;
  --rose-300: #E892AA;
  --rose-400: #D4708A;
  --rose-500: #B8506E;
  --rose-600: #8C3450;

  /* Texto */
  --text-dark : #2A1E1E;
  --text-mid  : #5A4040;
  --text-light: #9A7878;
  --text-muted: #BFA8A8;

  /* Aliases principais (usados no pricing e componentes gerais) */
  --accent     : #c4748a;
  --accent-dark: #B8506E;
  --text       : #2A1E1E;
  --bg         : #FAF4EC;

  /* Utilitários */
  --white      : #FEFCFA;
  --border     : #EAD8C8;
  --border-dark: #D4B090;
  --bg-page    : #FAF4EC;
  --bg-card    : #FFFFFF;
  

  /* Layout */
  --sidebar-width: 255px;
  --radius       : 14px;
  --radius-sm    : 8px;
  --radius-lg    : 20px;

  /* Sombras */
  --shadow-sm  : 0 2px 10px rgba(100, 50, 50, 0.07);
  --shadow     : 0 4px 20px rgba(100, 50, 50, 0.10);
  --shadow-lg  : 0 10px 40px rgba(100, 50, 50, 0.15);

  /* Animações */
  --transition: all 0.22s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background : var(--bg-page);
  color      : var(--text-dark);
  line-height: 1.55;
  min-height : 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* Scrollbar customizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--beige-100); }
::-webkit-scrollbar-thumb  { background: var(--beige-400); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose-400); }

/* ============================================================
   LAYOUT PRINCIPAL — sidebar + conteúdo
   ============================================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
.sidebar {
  width         : var(--sidebar-width);
  height        : 100vh;
  background    : var(--white);
  border-right  : 1px solid var(--border);
  display       : flex;
  flex-direction: column;
  position      : fixed;
  top: 0; left: 0;
  z-index: 100;
  box-shadow    : 2px 0 20px rgba(100,50,50,0.06);
  overflow      : hidden;
}

/* Logo / nome da clínica na sidebar */
.sidebar-logo {
  padding    : 28px 24px 22px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo .logo-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--rose-300), var(--rose-500));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-size: 22px;
}
.sidebar-logo h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
}
.sidebar-logo span {
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Navegação da sidebar */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}
.sidebar-nav .nav-section-title {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px 6px;
  font-weight: 500;
}
.nav-item {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 10px 12px;
  border-radius: var(--radius-sm);
  color      : var(--text-mid);
  font-size  : 0.9rem;
  font-weight: 400;
  transition : var(--transition);
  margin-bottom: 2px;
}
.nav-item .nav-icon { font-size: 1.1rem; width: 22px; text-align: center; }
.nav-item:hover {
  background: var(--beige-100);
  color     : var(--text-dark);
}
.nav-item.active {
  background: linear-gradient(135deg, var(--rose-100), var(--beige-200));
  color     : var(--rose-600);
  font-weight: 500;
}
.nav-item.active .nav-icon { color: var(--rose-500); }

/* Usuário logado na parte inferior da sidebar */
.sidebar-user {
  padding      : 16px;
  border-top   : 1px solid var(--border);
  display      : flex;
  align-items  : center;
  gap          : 10px;
}
.sidebar-user .user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--beige-300);
  border: 2px solid var(--rose-200);
  /* Fallback caso não haja foto */
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--rose-600); font-weight: 600;
}
.avatar-initials {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-200), var(--rose-400));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: white; font-weight: 600;
  flex-shrink: 0;
}
.sidebar-user .user-info { flex: 1; min-width: 0; }
.sidebar-user .user-name {
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-dark);
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .user-email {
  font-size: 0.7rem; color: var(--text-light);
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-logout {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1rem;
  padding: 4px;
  border-radius: 6px;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-logout:hover { color: var(--rose-500); background: var(--rose-100); }

/* ── CONTEÚDO PRINCIPAL ── */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Cabeçalho de cada página */
.page-header {
  padding    : 28px 36px 0;
  margin-bottom: 0;
}
.page-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 2rem;
  font-weight: 600;
  color      : var(--text-dark);
  margin-bottom: 4px;
}
.page-header .subtitle {
  font-size: 0.85rem;
  color    : var(--text-light);
}

/* Corpo da página */
.page-body {
  padding: 24px 36px 40px;
  flex: 1;
}

/* ============================================================
   COMPONENTES — CARDS
   ============================================================ */
.card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 24px;
  box-shadow   : var(--shadow-sm);
  transition   : var(--transition);
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.15rem;
  font-weight: 600;
  color      : var(--text-dark);
}

/* ============================================================
   COMPONENTES — BOTÕES
   ============================================================ */
.btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 9px 18px;
  border-radius: var(--radius-sm);
  font-size    : 0.875rem;
  font-weight  : 500;
  border       : none;
  transition   : var(--transition);
  line-height  : 1;
  white-space  : nowrap;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Primário — rosa */
.btn-primary {
  background: linear-gradient(135deg, var(--rose-400), var(--rose-500));
  color     : white;
  box-shadow: 0 2px 10px rgba(180, 80, 100, 0.25);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  box-shadow: 0 4px 16px rgba(180, 80, 100, 0.35);
  transform : translateY(-1px);
}

/* Secundário — bege */
.btn-secondary {
  background: var(--beige-200);
  color     : var(--text-mid);
  border    : 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--beige-300);
  color     : var(--text-dark);
}

/* Perigo — vermelho suave */
.btn-danger {
  background: #FDE8E8;
  color     : #B03030;
  border    : 1px solid #F5C0C0;
}
.btn-danger:hover:not(:disabled) {
  background: #F8C8C8;
}

/* Ghost */
.btn-ghost {
  background: var(--green-200);
  color     : var(--text-light);
  border: 1px solid #9FD0A3;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--green-100);
  color     : var(--text-dark);
}

/* Ícone apenas */
.btn-icon {
  padding: 7px;
  aspect-ratio: 1;
  justify-content: center;
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-lg { padding: 12px 24px; font-size: 0.95rem; }

/* ============================================================
   COMPONENTES — FORMULÁRIOS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-group:last-child { margin-bottom: 0; }

label {
  font-size  : 0.82rem;
  font-weight: 500;
  color      : var(--text-mid);
  letter-spacing: 0.01em;
}
label .required { color: var(--rose-500); margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width        : 100%;
  padding      : 10px 14px;
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size    : 0.9rem;
  color        : var(--text-dark);
  background   : var(--white);
  transition   : var(--transition);
  outline      : none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rose-300);
  box-shadow  : 0 0 0 3px rgba(212, 112, 138, 0.12);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
textarea { resize: vertical; min-height: 90px; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A7878' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

/* Grid de dois campos lado a lado */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ============================================================
   COMPONENTES — BADGES / STATUS
   ============================================================ */
.badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  padding      : 3px 10px;
  border-radius: 99px;
  font-size    : 0.72rem;
  font-weight  : 500;
  line-height  : 1;
}
.badge-scheduled  { background: #DBEAFE; color: #1D4ED8; }
.badge-confirmed  { background: #DCFCE7; color: #15803D; }
.badge-done       { background: #F3F4F6; color: #6B7280; }
.badge-cancelled  { background: #FDE8E8; color: #B03030; }
.badge-active     { background: #DCFCE7; color: #15803D; }
.badge-inactive   { background: #F3F4F6; color: #6B7280; }

/* ============================================================
   COMPONENTES — MODAIS
   ============================================================ */
.modal-overlay {
  position  : fixed;
  inset     : 0;
  background: rgba(30, 15, 15, 0.45);
  backdrop-filter: blur(4px);
  z-index   : 1000;
  display   : flex;
  align-items: center;
  justify-content: center;
  padding   : 20px;
  animation : fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }

.modal {
  background   : var(--white);
  border-radius: var(--radius-lg);
  box-shadow   : var(--shadow-lg);
  padding      : 28px;
  width        : 100%;
  max-width    : 60%;
  max-height   : 90vh;
  overflow-y   : auto;
  animation    : slideUp 0.25s ease;
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
}
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.4rem;
  font-weight: 600;
}
.modal-close {
  background: none; border: none;
  font-size : 1.3rem;
  color     : var(--text-light);
  padding   : 2px 6px;
  border-radius: 6px;
  transition: var(--transition);
  line-height: 1;
}
.modal-close:hover { background: var(--beige-200); color: var(--text-dark); }
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   COMPONENTES — TOAST (notificação temporária)
   ============================================================ */
#toast-container {
  position: fixed;
  bottom  : 24px;
  right   : 24px;
  z-index : 9999;
  display : flex;
  flex-direction: column;
  gap     : 8px;
}
.toast {
  padding      : 12px 18px;
  border-radius: var(--radius-sm);
  font-size    : 0.875rem;
  font-weight  : 500;
  box-shadow   : var(--shadow);
  animation    : slideInRight 0.25s ease;
  max-width    : 320px;
  display      : flex;
  align-items  : center;
  gap          : 8px;
}
.toast-success { background: #E8F5E9; color: #1B5E20; border-left: 3px solid #4CAF50; }
.toast-error   { background: #FDE8E8; color: #B71C1C; border-left: 3px solid #F44336; }
.toast-info    { background: var(--beige-100); color: var(--text-dark); border-left: 3px solid var(--rose-400); }
.toast-warning { background: #FFF8E1; color: #7A4F00; border-left: 3px solid #F59E0B; }

/* ============================================================
   COMPONENTES — LOADING SPINNER
   ============================================================ */
.spinner {
  width : 20px; height: 20px;
  border: 2px solid var(--beige-300);
  border-top-color: var(--rose-400);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.page-loader {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; gap: 12px;
  color: var(--text-light); font-size: 0.9rem;
}

/* ============================================================
   COMPONENTES — ESTADO VAZIO
   ============================================================ */
.empty-state {
  text-align: center;
  padding   : 48px 24px;
  color     : var(--text-light);
}
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.6; }
.empty-state h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.2rem;
  font-weight: 500;
  color      : var(--text-mid);
  margin-bottom: 6px;
}
.empty-state p { font-size: 0.85rem; }

/* ============================================================
   DASHBOARD — Lista de consultas próximas
   ============================================================ */
.appointments-list {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.appointment-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 16px 20px;
  display      : flex;
  align-items  : center;
  gap          : 16px;
  transition   : var(--transition);
  box-shadow   : var(--shadow-sm);
}
.appointment-card:hover {
  box-shadow  : var(--shadow);
  border-color: var(--rose-200);
  transform   : translateX(3px);
}

/* Data/hora — coluna esquerda do card */
.appt-datetime {
  min-width  : 70px;
  text-align : center;
  padding    : 10px;
  background : linear-gradient(135deg, var(--rose-100), var(--beige-200));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.appt-datetime .appt-day {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.6rem;
  font-weight: 600;
  color      : var(--rose-600);
  line-height: 1;
}
.appt-datetime .appt-month {
  font-size    : 0.7rem;
  color        : var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.appt-datetime .appt-time {
  font-size  : 0.78rem;
  font-weight: 500;
  color      : var(--text-mid);
  margin-top : 4px;
}

/* Detalhes do agendamento */
.appt-details { flex: 1; min-width: 0; }
.appt-client {
  font-size  : 0.95rem;
  font-weight: 500;
  color      : var(--text-dark);
  margin-bottom: 4px;
}
.appt-procedures {
  font-size: 0.78rem;
  color    : var(--text-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appt-meta {
  display: flex; gap: 10px; align-items: center; margin-top: 6px;
}
.appt-duration, .appt-value {
  font-size: 0.75rem;
  color    : var(--text-light);
  display  : flex; align-items: center; gap: 3px;
}

/* Ações no card de agendamento */
.appt-actions {
  display : flex;
  gap     : 6px;
  flex-shrink: 0;
}

/* Separador de data */
.date-separator {
  font-family  : 'Cormorant Garamond', serif;
  font-size    : 0.95rem;
  font-weight  : 500;
  color        : var(--text-light);
  padding      : 8px 0 4px;
  display      : flex;
  align-items  : center;
  gap          : 10px;
}
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   CALENDÁRIO
   ============================================================ */
.calendar-controls {
  display    : flex;
  align-items: center;
  gap        : 12px;
  margin-bottom: 20px;
  flex-wrap  : wrap;
}
.calendar-controls h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.4rem;
  font-weight: 600;
  min-width  : 200px;
  text-align : center;
}
.view-toggle {
  display: flex;
  background: var(--beige-200);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  padding      : 6px 14px;
  border       : none;
  border-radius: 6px;
  font-size    : 0.8rem;
  font-weight  : 500;
  background   : transparent;
  color        : var(--text-light);
  transition   : var(--transition);
}
.view-toggle button.active {
  background: var(--white);
  color     : var(--rose-500);
  box-shadow: var(--shadow-sm);
}

/* Grade mensal */
.calendar-grid {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  overflow     : hidden;
  box-shadow   : var(--shadow-sm);
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: linear-gradient(135deg, var(--rose-100), var(--beige-200));
}
.calendar-weekday {
  padding   : 10px;
  text-align: center;
  font-size : 0.75rem;
  font-weight: 600;
  color     : var(--rose-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-day {
  min-height: 90px;
  padding   : 6px 8px;
  overflow  : hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
  cursor    : pointer;
}
.calendar-day:hover { background: var(--beige-50); }
.calendar-day.other-month { background: var(--beige-50); opacity: 0.5; }
.calendar-day.today { background: linear-gradient(135deg, #FFF0F3, var(--beige-100)); }
.calendar-day.today .day-number {
  background   : var(--rose-400);
  color        : white;
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.day-number {
  font-size  : 0.82rem;
  font-weight: 500;
  color      : var(--text-mid);
  margin-bottom: 4px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.day-events { display: flex; flex-direction: column; gap: 2px; }
.day-event {
  font-size    : 0.68rem;
  padding      : 2px 5px;
  border-radius: 4px;
  background   : var(--rose-100);
  color        : var(--rose-600);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  font-weight  : 500;
}
.day-event.scheduled { background: #DBEAFE; color: #1D4ED8; }
.day-event.confirmed { background: #DCFCE7; color: #15803D; border-left: 2px solid #16A34A; }
.day-event.done      { background: #F3F4F6; color: #6B7280; }
.day-event.cancelled { background: #FDE8E8; color: #B03030; text-decoration: line-through; }

/* Visão de semana/dia — timeline */
.week-view, .day-view {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  overflow     : auto;
}
.week-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  background: linear-gradient(135deg, var(--rose-100), var(--beige-200));
  position: sticky; top: 0; z-index: 1;
}
.week-header-cell {
  padding   : 10px 6px;
  text-align: center;
  font-size : 0.78rem;
  font-weight: 600;
  color     : var(--rose-600);
}
.week-header-cell .week-day-name { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; }
.week-header-cell .week-day-num  {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 600;
}
.week-header-cell.today .week-day-num {
  background   : var(--rose-400);
  color        : white;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.week-body {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
}
.time-label {
  font-size: 0.68rem;
  color    : var(--text-muted);
  padding  : 0 8px;
  text-align: right;
  height   : 50px;
  display  : flex;
  align-items: flex-start;
  padding-top: 4px;
}
.week-cell {
  height: 50px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--beige-200);
  position: relative;
  transition: var(--transition);
}
.week-cell:hover { background: var(--beige-50); }
.week-event {
  position     : absolute;
  left: 2px; right: 2px;
  background   : linear-gradient(135deg, var(--rose-200), var(--rose-300));
  border-left  : 3px solid var(--rose-500);
  border-radius: 4px;
  padding      : 2px 5px;
  font-size    : 0.68rem;
  font-weight  : 500;
  color        : var(--rose-700, #6C2040);
  overflow     : hidden;
  z-index      : 1;
  cursor       : pointer;
}
.week-event:hover { filter: brightness(1.05); z-index: 4 !important; }

/* Chips de procedimentos no modal de reagendamento */
.reschedule-proc-chip {
  background   : var(--beige-100);
  border       : 1.5px solid var(--border);
  border-radius: 20px;
  padding      : 4px 12px;
  font-size    : 0.78rem;
  cursor       : pointer;
  transition   : var(--transition);
  color        : var(--text-mid);
}
.reschedule-proc-chip:hover   { border-color: var(--rose-300); background: var(--beige-200); }
.reschedule-proc-chip.selected {
  background   : var(--rose-100);
  border-color : var(--rose-400);
  color        : var(--rose-700);
  font-weight  : 600;
}
.week-event.scheduled {
  background : linear-gradient(135deg, #DBEAFE, #BFDBFE);
  border-left-color: #2563EB;
  color      : #1D4ED8;
}
.week-event.confirmed {
  background : linear-gradient(135deg, #DCFCE7, #BBF7D0);
  border-left-color: #16A34A;
  color      : #15803D;
}
.week-event.done {
  background : linear-gradient(135deg, #F3F4F6, #E5E7EB);
  border-left-color: #9CA3AF;
  color      : #6B7280;
}
.week-event.cancelled {
  background : linear-gradient(135deg, #FDE8E8, #FFCDD2);
  border-left-color: #F44336;
  color      : #B71C1C;
  opacity    : 0.7;
}

/* ============================================================
   GRADE DE PROCEDIMENTOS (na tela de agendamento)
   ============================================================ */
.procedures-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap                  : 10px;
}
.procedure-card-select {
  border       : 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding      : 12px 14px;
  cursor       : pointer;
  transition   : var(--transition);
  background   : var(--white);
  user-select  : none;
}
.procedure-card-select:hover {
  border-color: var(--rose-300);
  background  : var(--beige-50);
}
.procedure-card-select.selected {
  border-color: var(--rose-400);
  background  : linear-gradient(135deg, var(--rose-100), var(--beige-200));
}
.procedure-card-select .proc-name {
  font-size  : 0.85rem;
  font-weight: 500;
  color      : var(--text-dark);
  margin-bottom: 4px;
}
.procedure-card-select .proc-info {
  font-size: 0.72rem;
  color    : var(--text-light);
  display  : flex;
  gap      : 8px;
}
.procedure-card-select.selected .proc-name  { color: var(--rose-600); }
.procedure-card-select.selected .proc-info  { color: var(--rose-500); }

/* Resumo do agendamento */
.schedule-summary {
  background   : linear-gradient(135deg, var(--rose-100), var(--beige-200));
  border       : 1px solid var(--rose-200);
  border-radius: var(--radius);
  padding      : 16px 20px;
  display      : flex;
  gap          : 20px;
  align-items  : center;
  flex-wrap    : wrap;
}
.summary-item { font-size: 0.85rem; color: var(--text-mid); }
.summary-item strong { color: var(--rose-600); font-size: 1rem; }

/* ============================================================
   GERENCIAMENTO DE PROCEDIMENTOS (página procedimentos)
   ============================================================ */
.proc-management-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap                  : 14px;
}
.proc-item-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 16px;
  box-shadow   : var(--shadow-sm);
  transition   : var(--transition);
}
.proc-item-card:hover { box-shadow: var(--shadow); }
.proc-item-card .proc-item-name {
  font-size  : 0.95rem;
  font-weight: 500;
  margin-bottom: 8px;
  color      : var(--text-dark);
}
.proc-item-meta {
  display: flex; gap: 10px;
  margin-bottom: 12px;
}
.proc-item-meta span {
  font-size: 0.75rem;
  background: var(--beige-200);
  color    : var(--text-mid);
  padding  : 3px 8px;
  border-radius: 99px;
}
.proc-item-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.proc-btn-grid { flex: 1 1 calc(50% - 3px); justify-content: center; }

/* ============================================================
   CLIENTES
   ============================================================ */
.clients-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap                  : 14px;
}
.client-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 18px;
  box-shadow   : var(--shadow-sm);
  transition   : var(--transition);
}
.client-card:hover { box-shadow: var(--shadow); border-color: var(--rose-200); }
.client-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.client-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-200), var(--rose-400));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 600;
  color: white; flex-shrink: 0;
}
.client-name  { font-weight: 500; font-size: 0.95rem; }
.client-phone { font-size: 0.78rem; color: var(--text-light); }
.client-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.client-btn-grid {
  flex: 1 1 calc(50% - 3px);
  justify-content: center;
}
.client-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--beige-100);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 12px;
}
.stat-item { text-align: center; }
.stat-label { font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 0.95rem; font-weight: 600; color: var(--rose-600); }

/* Histórico do cliente */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item {
  font-size: 0.78rem;
  padding  : 6px 10px;
  background: var(--beige-100);
  border-radius: var(--radius-sm);
  color    : var(--text-mid);
  display  : flex;
  justify-content: space-between;
}

/* ============================================================
   PESQUISA / BUSCA
   ============================================================ */
.search-bar {
  position: relative;
  max-width: 320px;
}
.search-bar input {
  padding-left: 38px;
}
.search-bar .search-icon {
  position : absolute;
  left     : 12px;
  top      : 50%;
  transform: translateY(-50%);
  color    : var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

/* Autocomplete */
.autocomplete-list {
  position   : absolute;
  top        : 100%;
  left       : 0; right: 0;
  background : var(--white);
  border     : 1px solid var(--border);
  border-top : none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow : var(--shadow);
  z-index    : 50;
  max-height : 200px;
  overflow-y : auto;
}
.autocomplete-item {
  padding  : 9px 14px;
  font-size: 0.88rem;
  cursor   : pointer;
  transition: var(--transition);
}
.autocomplete-item:hover { background: var(--beige-100); color: var(--rose-600); }
.autocomplete-item.create-new {
  color      : var(--rose-500);
  font-weight: 500;
  border-top : 1px solid var(--border);
}

/* ============================================================
   STATS RÁPIDOS (cards no topo do dashboard)
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 18px 20px;
  box-shadow   : var(--shadow-sm);
  transition   : var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow); }
.stat-card .sc-label {
  font-size: 0.75rem;
  color    : var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.stat-card .sc-value {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.8rem;
  font-weight: 600;
  color      : var(--rose-600);
  line-height: 1;
}
.stat-card .sc-icon {
  font-size: 1.4rem;
  float: right;
  margin-top: -2px;
  opacity: 0.5;
}

/* ============================================================
   PÁGINA DE LOGIN
   ============================================================ */
.login-page {
  min-height: 100vh;
  display   : flex;
}

.login-banner {
  flex: 1;
  background: linear-gradient(160deg, var(--rose-400) 0%, var(--rose-600) 50%, #5A2030 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  color  : white;
  position: relative;
  overflow: hidden;
}

.login-banner::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.login-banner::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.login-banner .brand-logo {
  font-size: 2.5rem;
  margin-bottom: 32px;
}
.login-banner h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 2.8rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 16px;
}
.login-banner p { opacity: 0.8; font-size: 1rem; max-width: 340px; line-height: 1.6; }
.login-features { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.login-feature  { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; opacity: 0.85; }
.login-feature span { font-size: 1.1rem; }

.login-form-container {
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 56px;
  background: var(--beige-50);
}
.login-form-container h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 2rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.login-form-container .login-subtitle {
  font-size: 0.85rem;
  color    : var(--text-light);
  margin-bottom: 28px;
}

/* Tabs login/register */
.auth-tabs {
  display      : flex;
  gap          : 4px;
  background   : var(--beige-200);
  border-radius: var(--radius-sm);
  padding      : 3px;
  margin-bottom: 24px;
}
.auth-tab {
  flex         : 1;
  padding      : 8px;
  text-align   : center;
  border       : none;
  border-radius: 6px;
  font-size    : 0.85rem;
  font-weight  : 500;
  background   : transparent;
  color        : var(--text-light);
  transition   : var(--transition);
}
.auth-tab.active {
  background: var(--white);
  color     : var(--rose-600);
  box-shadow: var(--shadow-sm);
}

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  font-size: 0.78rem; color: var(--text-muted);
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.btn-google {
  width: 100%;
  background: var(--white);
  border    : 1px solid var(--border);
  color     : var(--text-dark);
  justify-content: center;
  font-size : 0.9rem;
  padding   : 10px;
  gap       : 10px;
  box-shadow: var(--shadow-sm);
}
.btn-google:hover { background: var(--beige-100); border-color: var(--rose-300); }
.btn-google img { width: 18px; height: 18px; }

.btn-full { width: 100%; justify-content: center; padding: 11px; font-size: 0.95rem; }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.hidden  { display: none !important; }
.flex    { display: flex; }
.flex-1  { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.mt-4    { margin-top: 16px; }
.mt-6    { margin-top: 24px; }
.mb-4    { margin-bottom: 16px; }
.text-sm { font-size: 0.85rem; }
.text-muted { color: var(--text-light); }

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Entrada suave dos cards da lista */
.appointment-card, .proc-item-card, .client-card {
  animation: fadeIn 0.3s ease;
}
/* ── Plan badges ──────────────────────────────────────────── */
.plan-badge            { display: inline-block; padding: .15rem .6rem; border-radius: 20px; font-size: .7rem; font-weight: 500; }
.plan-badge-trial      { background: #e8f4f8; color: #1a6985; }
.plan-badge-basic      { background: #e8f5e9; color: #2e7d32; }
.plan-badge-advanced   { background: #f3e5f5; color: #7b1fa2; }
.plan-badge-admin      { background: #fce4ec; color: #880e4f; }
.plan-badge-danger     { background: #fff3e0; color: #e65100; }
.plan-badge-default    { background: #f5f5f5; color: #616161; }

/* ── Trial banner ─────────────────────────────────────────── */
#trial-banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 900; }
.trial-banner-inner { background: #1a1a2e; color: #fff; border-radius: 14px; padding: .7rem 1.2rem; display: flex; align-items: center; gap: 1rem; font-size: .85rem; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.trial-banner-btn   { background: var(--accent); color: #fff; padding: .35rem .9rem; border-radius: 8px; text-decoration: none; font-size: .8rem; white-space: nowrap; }
.trial-banner-close { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; }

/* ============================================================
   RESPONSIVO — Tablet (max 1024px)
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar { width: 200px; }
  .main-content { margin-left: 200px; }
}

/* ============================================================
   RESPONSIVO — Mobile (max 768px)
   Sidebar vira barra inferior estilo app
   ============================================================ */
@media (max-width: 768px) {

  /* ── App layout ── */
  .app-layout {
    display: block !important;
    min-height: 100vh;
  }

  /* ── Sidebar → barra inferior ── */
  .sidebar {
    position: fixed !important;
    bottom: 0 !important; top: auto !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    min-height: unset !important;
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    z-index: 600 !important;
    overflow: hidden !important;
  }

  /* Esconde elementos que não cabem na barra */
  .sidebar-logo,
  .sidebar-user,
  .nav-section-title { display: none !important; }

  /* Nav vira linha horizontal */
  .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }

  .nav-item {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1px !important;
    padding: 4px 2px 3px !important;
    flex: 1 !important;
    min-width: 40px !important;
    max-width: 70px !important;
    border-radius: 0 !important;
    border-left: none !important;
  }

  .nav-item .nav-icon {
    font-size: 1.1rem !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .nav-item span:last-child {
    display: block !important;
    font-size: .52rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .nav-item.active {
    border-bottom: 2px solid var(--accent) !important;
    border-left: none !important;
    background: #fff9f7 !important;
  }

  /* ── Conteúdo principal ── */
  .main-content {
    margin-left: 0 !important;
    padding: 0 0 calc(75px + env(safe-area-inset-bottom, 0px)) 0 !important;
    min-height: 100vh;
  }

  /* ── Page header e body ── */
  .page-header {
    padding: 1.25rem 1rem 0 !important;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .page-body {
    padding: 1rem 1rem 1rem !important;
  }

  .page-header h1, .main-content h1 {
    font-size: 1.5rem !important;
  }

  /* ── Botão Nova Consulta — flutuante ── */
  .btn-nova-consulta {
    position: fixed !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
    border-radius: 50px !important;
    padding: .6rem 1.1rem !important;
    box-shadow: 0 4px 16px rgba(196,116,138,.45) !important;
    z-index: 500 !important;
    font-size: .85rem !important;
  }

  /* ── Stats ── */
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }

  /* ── Tabelas ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 480px; }

  /* ── Forms ── */
  .form-row,
  .form-row.cols-2,
  .form-row.cols-3 { grid-template-columns: 1fr !important; }

  /* ── Grids ── */
  .procedures-grid,
  .professionals-grid { grid-template-columns: 1fr !important; }

  /* ── Calendário ── */
  .calendar-header { flex-wrap: wrap; gap: .5rem; }
  .calendar-day { min-height: 48px !important; font-size: .7rem; }

  /* ── Modais ── */
  .modal-overlay { align-items: flex-end !important; }
  .modal-box,
  .modal-content,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem 1.25rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ── Filtros ── */
  .filters, .filter-row { flex-wrap: wrap; gap: .4rem; }
  .filter-btn { font-size: .75rem; padding: .3rem .7rem; }
  .search-input { width: 100% !important; }

  /* ── Pricing ── */
  .plans-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }

  /* ── Section cards (WhatsApp/Admin) ── */
  .section-card { padding: 1.25rem !important; }
  .cred-actions { flex-direction: column; }
  .cred-actions button { width: 100%; }

  /* ── Trial banner ── */
  #trial-banner { bottom: 65px; left: .5rem; right: .5rem; transform: none; width: auto; }
  .trial-banner-inner { flex-wrap: wrap; font-size: .78rem; }

  /* ── Toast notifications ── */
  #toast-container { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; right: .75rem !important; left: .75rem !important; }
  .toast { font-size: .82rem; }

  /* ── Login ── */
  .login-banner { display: none !important; }
  .login-page { flex-direction: column; }
  .login-form-container {
    width: 100% !important;
    padding: 2.5rem 1.5rem !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
  }

  /* ── Profile modal ── */
  #profile-modal { align-items: flex-end !important; }
  #profile-modal > div {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem 1.25rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ── Appointment cards ── */
  .appointment-card {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .appt-datetime {
    min-width: 58px !important;
    padding: 8px !important;
  }

  .appt-details {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .appt-meta {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .appt-meta span {
    font-size: .72rem !important;
    white-space: nowrap !important;
  }

  .appt-procedures {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Botões de ação ficam em linha cheia abaixo do conteúdo */
  .appt-actions {
    flex: 0 0 100% !important;
    justify-content: flex-end !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
    gap: 8px !important;
  }

  .appt-actions .btn {
    font-size: .78rem !important;
    padding: .3rem .7rem !important;
  }

  /* Modal de ação — ocupa tela cheia na base */
  .modal-overlay .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem 1.25rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── Admin table ── */
  .action-btn { font-size: .72rem; padding: .25rem .55rem; margin-bottom: .25rem; }

  /* Tabela admin com scroll horizontal */
  .admin-table-wrap, .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Stats admin empilha em 2 colunas */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Nav com muitos itens — labels somem em telas pequenas */
  .sidebar-nav { justify-content: space-around; }

  @media (max-width: 480px) {
    .nav-item span:last-child {
      display: none !important;
    }
    .nav-item {
      padding: 10px 6px !important;
      flex: 1 !important;
    }
    .nav-item .nav-icon {
      font-size: 1.4rem !important;
    }
  }

  /* ── Schedule page ── */
  .schedule-grid {
    grid-template-columns: 1fr !important;
  }

  /* Resumo vai para baixo do formulário */
  .schedule-grid > div:last-child { order: 2; }
  .schedule-grid > div:first-child { order: 1; }

  /* Coluna direita (resumo) não é sticky no mobile */
  .schedule-grid > div:last-child {
    position: static !important;
    top: auto !important;
  }

  /* Card-header vira coluna no mobile */
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .2rem !important;
  }

  .card-header span:last-child {
    font-size: .75rem !important;
    color: var(--text-light) !important;
  }

  /* Todos os inputs largura total */
  input, textarea, select {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Data e hora empilham no mobile */
  .form-row {
    grid-template-columns: 1fr !important;
  }

}

/* ============================================================
   MOBILE TOP BAR — Barra superior para celular
   Substitui sidebar-user (oculto no mobile) com
   acesso a perfil, plano e logout
   ============================================================ */
.mobile-top-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
  }

  .mobile-top-bar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-clinic-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent, #c4748a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .mobile-top-bar .plan-badge {
    align-self: flex-start;
    font-size: .62rem;
    padding: .1rem .45rem;
  }

  .mobile-top-bar-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
  }

  .mobile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rose-100, #f3d0d9);
    color: var(--accent, #c4748a);
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mobile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-logout-btn {
    background: none;
    border: 1px solid var(--border, #e8ddd5);
    border-radius: 8px;
    padding: .3rem .5rem;
    cursor: pointer;
    font-size: .95rem;
    color: var(--text-mid, #888);
    line-height: 1;
    flex-shrink: 0;
  }

  .mobile-logout-btn:active {
    background: var(--beige-100, #faf3e8);
  }

  /* Main content precisa de espaço extra no topo para não ficar atrás do sticky bar */
  .main-content {
    padding-top: 0 !important;
  }
}

/* ============================================================
   PÁGINA: SCHEDULE — Marcar Consulta
   ============================================================ */
.prof-select-btn {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border: 1.5px solid var(--border);
  border-radius: 99px; background: white;
  font-size: 0.8rem; cursor: pointer;
  color: var(--text-mid); transition: var(--transition);
}
.prof-select-btn:hover  { border-color: var(--rose-300); color: var(--rose-500); }
.prof-select-btn.active { background: var(--rose-500); border-color: var(--rose-500); color: white; }

/* ============================================================
   PÁGINA: PROFESSIONALS — Profissionais
   ============================================================ */
.prof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.prof-card {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow); transition: var(--transition);
}
.prof-card:hover    { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.prof-card.inactive { opacity: 0.5; }
.prof-card-header   { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.prof-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-300), var(--rose-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: white;
  flex-shrink: 0; overflow: hidden;
}
.prof-avatar img   { width: 100%; height: 100%; object-fit: cover; }
.prof-name         { font-weight: 600; font-size: 1rem; color: var(--text-dark); }
.prof-specialty    { font-size: 0.78rem; color: var(--rose-500); margin-top: 2px; }
.prof-phone        { font-size: 0.78rem; color: var(--text-light); margin-top: 2px; }
.prof-actions      { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Botões 1-4: grade 2x2, cada um com 50% da largura */
.prof-actions .prof-btn-grid {
  flex: 1 1 calc(50% - 3px);
  justify-content: center;
}
/* Botão 5: Agendar — largura total */
.prof-btn-schedule { flex: 0 0 100%; justify-content: center; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1rem; }
.avatar-upload {
  width: 80px; height: 80px; border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
  overflow: hidden; position: relative;
  background: var(--beige-100); margin: 0 auto 16px;
}
.avatar-upload:hover          { border-color: var(--rose-300); }
.avatar-upload img            { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload .upload-hint   { font-size: 0.68rem; color: var(--text-muted); text-align: center; padding: 6px; line-height: 1.3; }
.avatar-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ============================================================
   PÁGINA: WHATSAPP
   ============================================================ */
.wa-status-card     { border-radius: 16px; padding: 24px; display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.wa-status-card.on  { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
.wa-status-card.off { background: #fff; border: 2px solid var(--border); color: var(--text); }
.wa-icon            { font-size: 2.5rem; }
.wa-status-card h3  { font-size: 1.1rem; margin-bottom: 4px; }
.wa-status-card p   { font-size: .85rem; opacity: .85; margin: 0; }

.section-card          { background: #fff; border-radius: 16px; padding: 1.75rem; margin-bottom: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.section-card h2       { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin-bottom: .25rem; }
.section-subtitle      { font-size: .85rem; color: var(--text-light); margin-bottom: 1.25rem; }

.toggle-row            { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.toggle-label          { font-size: .95rem; font-weight: 500; }
.toggle-switch         { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input   { display: none; }
.toggle-slider         { position: absolute; inset: 0; background: #ccc; border-radius: 24px; cursor: pointer; transition: .2s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider              { background: #25D366; }
.toggle-switch input:checked + .toggle-slider::before      { transform: translateX(20px); }

.steps         { display: flex; flex-direction: column; gap: 1rem; }
.step          { display: flex; gap: 1rem; align-items: flex-start; }
.step-num      { width: 28px; height: 28px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; flex-shrink: 0; margin-top: 2px; }
.step-content h4  { font-size: .9rem; font-weight: 500; margin-bottom: .25rem; }
.step-content p   { font-size: .82rem; color: var(--text-light); margin: 0; line-height: 1.6; }
.step-content a   { color: var(--accent); text-decoration: none; }
.step-content code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-size: .78rem; color: var(--text); }

.template-card    { border: 1.5px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.template-header  { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.template-icon    { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.template-title   { font-weight: 500; font-size: .9rem; }
.template-name    { font-size: .75rem; color: var(--text-light); }
.template-preview { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; line-height: 1.6; margin-bottom: .75rem; }
.template-copy    { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.btn-copy         { padding: .3rem .85rem; border: 1.5px solid var(--border); border-radius: 8px; background: #fff; font-size: .78rem; cursor: pointer; color: var(--text); }
.btn-copy:hover   { background: var(--bg); }

.env-card          { background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: .85rem; }
.env-card strong   { display: block; margin-bottom: .5rem; }
.env-var           { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid #fde68a; }
.env-var:last-child { border: none; }
.env-var code      { font-size: .82rem; background: #fff; padding: .2rem .5rem; border-radius: 6px; }

/* ============================================================
   PÁGINA: ADMIN
   ============================================================ */
.stats-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card   { background: #fff; border-radius: 14px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.stat-value  { font-size: 2rem; font-weight: 600; color: var(--accent); line-height: 1; }
.stat-label  { font-size: .78rem; color: var(--text-light); margin-top: .3rem; }

.search-input   { padding: .45rem 1rem; border: 1.5px solid var(--border); border-radius: 20px; font-size: .82rem; outline: none; width: 220px; }
.filters        { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filter-btn     { padding: .45rem 1rem; border: 1.5px solid var(--border); background: #fff; border-radius: 20px; font-size: .82rem; cursor: pointer; transition: all .15s; color: var(--text); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.badge-trialing { background: #e8f4f8; color: #1a6985; }
.badge-blocked  { background: #f5f5f5; color: #616161; }

.action-btn         { padding: .3rem .75rem; border-radius: 8px; border: 1.5px solid var(--border); background: #fff; font-size: .78rem; cursor: pointer; margin-right: .35rem; transition: all .15s; color: var(--text); white-space: nowrap; }
.action-btn:hover         { background: var(--bg); }
.action-btn.danger:hover  { background: #fce4ec; border-color: #f48fb1; color: #c62828; }
.action-btn.success:hover { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }

/* Table improvements */
.table-wrap table { border-collapse: collapse; }
.table-wrap thead tr { border-bottom: 2px solid var(--border); }
.table-wrap tbody tr:hover { background: #fdf8f5; }
.table-wrap td:last-child { white-space: nowrap; }

.modal-box           { background: #fff; border-radius: 20px; padding: 2rem; width: 420px; max-width: 95vw; box-shadow: 0 8px 40px rgba(0,0,0,.15); }
.modal-box h3        { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; margin-bottom: 1rem; }
.modal-field         { margin-bottom: 1rem; }
.modal-field label   { display: block; font-size: .82rem; color: var(--text-light); margin-bottom: .35rem; }
.modal-field select  { width: 100%; padding: .6rem .9rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .9rem; outline: none; background: #fff; }
.modal-actions       { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.btn-cancel          { padding: .6rem 1.2rem; border: 1.5px solid #d4b8a0; border-radius: 10px; background: #fff; cursor: pointer; font-size: .88rem; color: #333; }
.btn-save            { padding: .6rem 1.4rem; border: 2px solid #c4748a; border-radius: 10px; background: #c4748a; color: #fff; cursor: pointer; font-size: .88rem; font-weight: 500; }

.invoices-panel      { background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.05); padding: 1.5rem; margin-top: 1.5rem; }
.invoices-panel h3   { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; margin-bottom: 1rem; }
.invoice-row         { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid #f0ebe4; font-size: .85rem; }
.invoice-row:last-child { border: none; }
.invoice-row a       { color: var(--accent); text-decoration: none; font-size: .8rem; }
.loading             { text-align: center; padding: 3rem; color: var(--text-light); }
.empty               { text-align: center; padding: 3rem; color: var(--text-light); font-size: .9rem; }

/* ============================================================
   PÁGINA: PRICING
   ============================================================ */
.pricing-header        { text-align: center; margin-bottom: 2.5rem; }
.pricing-header h1     { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; color: var(--text); margin-bottom: .5rem; }
.pricing-header p      { color: var(--text-light); font-size: .95rem; }
.paywall-msg           { background: #fff3cd; border: 1px solid #ffc107; border-radius: 12px; padding: .9rem 1.4rem; margin-bottom: 2rem; text-align: center; font-size: .9rem; color: #856404; max-width: 600px; }
.plans-grid            { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 960px; width: 100%; }
.plan-card             { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 4px 24px rgba(0,0,0,.07); border: 2px solid transparent; position: relative; }
.plan-card.featured    { border-color: var(--accent); }
.plan-badge-top        { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .72rem; font-weight: 500; padding: .25rem .9rem; border-radius: 20px; white-space: nowrap; }
.plan-name             { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--text); margin-bottom: .25rem; }
.plan-price            { font-size: 2.2rem; font-weight: 600; color: var(--accent); line-height: 1; margin: .75rem 0 .2rem; }
.plan-price span       { font-size: .9rem; font-weight: 400; color: var(--text-light); }
.plan-trial            { font-size: .8rem; color: var(--text-light); margin-bottom: 1.25rem; }
.plan-features         { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .55rem; }
.plan-features li      { font-size: .88rem; color: var(--text); display: flex; gap: .5rem; align-items: flex-start; }
.plan-features li::before { content: '✓'; color: var(--accent); font-weight: 600; flex-shrink: 0; }
.plan-features li.no::before { content: '✕'; color: #ccc; }
.plan-features li.no   { color: #aaa; }
.btn-checkout          { width: 100%; padding: .85rem; border: none; border-radius: 12px; font-size: .92rem; font-weight: 500; cursor: pointer; transition: all .2s; }
.btn-checkout-basic    { background: var(--bg); border: 1.5px solid var(--border); color: var(--text); }
.btn-checkout-basic:hover    { background: var(--border); }
.btn-checkout-advanced { background: var(--accent); color: #fff; }
.btn-checkout-advanced:hover { background: var(--accent-dark); }
.btn-checkout:disabled { opacity: .6; cursor: not-allowed; }
.manage-link           { text-align: center; margin-top: 1.5rem; font-size: .85rem; color: var(--text-light); }
.manage-link a         { color: var(--accent); cursor: pointer; text-decoration: none; }
.back-link             { margin-top: 2rem; font-size: .85rem; color: var(--text-light); text-align: center; }
.back-link a           { color: var(--accent); text-decoration: none; }

/* Pricing page body layout */
body.pricing-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }

/* Schedule summary column */
.schedule-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.schedule-summary-col { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }

/* ============================================================
   FEATURE 1 — Badge "Confirmado"
   ============================================================ */
.badge-confirmed {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}

/* ============================================================
   FEATURE 4 — Card de aniversariante
   ============================================================ */
.client-card-birthday {
  border-color: var(--rose-300) !important;
  background: linear-gradient(135deg, #fff9fb, #fff0f3) !important;
}

/* ============================================================
   FEATURE 8 — Onboarding guiado
   ============================================================ */
.onboarding-guide {
  padding: 24px 4px;
}
.onboarding-guide h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.onboarding-guide > p {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 20px;
}
.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onboarding-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--white);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}
.onboarding-step:hover {
  border-color: var(--rose-300);
  box-shadow: var(--shadow);
  transform: translateX(3px);
}
.onboarding-step.done {
  border-color: #A5D6A7;
  background: #F1FFF3;
  opacity: 0.75;
}
.onboarding-step.pending {
  border-color: var(--border);
}
.onboarding-step.highlight {
  border-color: var(--rose-400);
  background: linear-gradient(135deg, var(--rose-100), var(--beige-200));
}
.onboarding-step .step-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--beige-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-mid);
  flex-shrink: 0;
}
.onboarding-step.done .step-icon {
  background: #E8F5E9;
}
.onboarding-step.highlight .step-icon {
  background: var(--rose-400);
  color: white;
}
.onboarding-step div strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.onboarding-step div span {
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ============================================================
   FEATURE 9 — Evento no modo dia (timeline absoluta)
   ============================================================ */
.day-timeline-event {
  background  : linear-gradient(135deg, var(--rose-200), var(--rose-300));
  border-left : 3px solid var(--rose-500);
  border-radius: 6px;
  padding     : 4px 8px;
  font-size   : 0.78rem;
  color       : var(--rose-700, #6C2040);
  cursor      : pointer;
  overflow    : hidden;
  transition  : var(--transition);
  box-shadow  : var(--shadow-sm);
}
.day-timeline-event:hover {
  filter   : brightness(1.06);
  z-index  : 4 !important;
  box-shadow: var(--shadow);
}
.day-timeline-event.scheduled {
  background : linear-gradient(135deg, #DBEAFE, #BFDBFE);
  border-color: #2563EB;
  color      : #1D4ED8;
}
.day-timeline-event.confirmed {
  background : linear-gradient(135deg, #DCFCE7, #BBF7D0);
  border-color: #16A34A;
  color      : #15803D;
}
.day-timeline-event.done {
  background : linear-gradient(135deg, #F3F4F6, #E5E7EB);
  border-color: #9CA3AF;
  color      : #6B7280;
}
.day-timeline-event.cancelled {
  background : linear-gradient(135deg, #FDE8E8, #FFCDD2);
  border-color: #F44336;
  color      : #B71C1C;
  opacity    : 0.7;
}

/* ============================================================
   FEATURE 11 — Status colorido nos cards do dashboard
   ============================================================ */
.appt-card-scheduled {
  border-left: 3px solid #2563EB !important;
  background : linear-gradient(to right, #eff6ff, var(--white)) !important;
}
.appt-card-cancelled {
  opacity    : 0.55;
  border-left: 3px solid #F44336 !important;
}
.appt-card-done {
  opacity    : 0.7;
  border-left: 3px solid #9CA3AF !important;
}
.appt-card-today {
  border-left: 3px solid var(--rose-500) !important;
  background : linear-gradient(to right, #fff5f7, var(--white)) !important;
}
/* ============================================================
   FEATURE 1 — Estatísticas por profissional no card
   ============================================================ */
.prof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  background: var(--beige-100);
  border-radius: 8px;
}
.prof-stat-item { text-align: center; }
.prof-stat-label { font-size: 0.68rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.prof-stat-value { font-size: 0.9rem; font-weight: 600; color: var(--text-dark); }

/* ============================================================
   FEATURE 4 — E-mail no card do profissional
   ============================================================ */
.prof-email {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appt-card-confirmed {
  border-left: 3px solid #16A34A !important;
  background : linear-gradient(to right, #f0fdf4, var(--white)) !important;
}
/* ============================================================
   FEATURE: Botão de suporte flutuante
   ============================================================ */
.support-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--rose-400, #c4748a);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(196,116,138,.35);
  text-decoration: none;
  z-index: 999;
  transition: transform .15s, box-shadow .15s;
}
.support-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(196,116,138,.45);
}
/* No mobile, vai para o lado esquerdo para não sobrepor o botão "Nova Consulta" (direita) */
@media (max-width: 768px) {
  .support-float-btn {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    right: auto;
    left: 1rem;
  }
}

/* mobile-bottom-nav removido — a sidebar já vira barra inferior via CSS no mobile */

/* ============================================================
   CORREÇÕES MOBILE ADICIONAIS
   ============================================================ */

/* Fix 1 — Evita zoom automático no iOS ao focar em inputs
   (iOS faz zoom quando font-size < 16px)                     */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Fix 2 — Botões de profissionais: ícone excluir tamanho fixo,
   demais botões quebram em 2 linhas em telas pequenas         */
.prof-actions .btn-danger {
  flex-shrink: 0;
  justify-content: center;
}


/* Fix 2b — Reports: layout mobile                             */
@media (max-width: 768px) {
  /* Grid vira coluna única com largura real contida */
  #reports-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Cards não extrapolam a tela */
  #reports-grid > .card {
    min-width: 0;
    overflow: hidden;
  }
  /* Scroll lateral interno nas divs de tabela */
  #appts-table-wrap,
  #procs-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    display: block !important;
  }
  #appts-table-wrap table,
  #procs-table-wrap table {
    min-width: 480px !important;
    width: max-content !important;
  }
}

/* Fix 4 — Top Clientes: scroll horizontal no mobile */
@media (max-width: 768px) {
  #clients-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    display: block !important;
  }
  #clients-table-wrap table,
  #procs-table-wrap table {
    min-width: 280px !important;
    width: max-content !important;
  }
}

/* Fix 5 — Quantidade por unidade: input touch-friendly no mobile */
@media (max-width: 768px) {
  .proc-qty-wrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .proc-qty-wrap input[type="number"] {
    min-height: 44px !important;
    width: 80px !important;
    font-size: 16px !important;
  }
}

/* Fix 6 — Stat cards: coluna única em telas muito pequenas */
@media (max-width: 380px) {
  .stats-row { grid-template-columns: 1fr !important; }
}

/* Fix 3 — Dropdown de categoria fica contido dentro do modal
   no mobile, sem vazar para fora dos limites da tela         */
@media (max-width: 768px) {
  #category-dropdown {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0ece8 25%, #e8e0d8 50%, #f0ece8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 80px; border-radius: 14px; margin-bottom: 12px; }
.skeleton-stat  { height: 90px; border-radius: 14px; }

/* ============================================================
   STATUS PENDING — Solicitações de Agendamento
   ============================================================ */
.badge-pending { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.appt-card-pending {
  border-left: 3px solid #F59E0B !important;
  background: linear-gradient(to right, #fffbeb, var(--white)) !important;
}
.pending-requests-section { margin-bottom: 20px; }
.pending-request-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--white);
  border: 1.5px solid #FDE68A; border-left: 4px solid #F59E0B;
  border-radius: 12px; margin-bottom: 10px; gap: 12px; flex-wrap: wrap;
}
.pending-request-info { flex: 1; min-width: 0; }
.pending-request-info .client-name { font-weight: 600; font-size: .92rem; color: var(--text-dark); margin-bottom: 3px; }
.pending-request-info .request-details { font-size: .8rem; color: var(--text-mid); }
.pending-request-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem; background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.landing-nav-logo {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600;
  color: var(--text-dark); text-decoration: none;
}
.landing-nav-links { display: flex; align-items: center; gap: 1.2rem; }
.landing-nav-links a { font-size: .88rem; color: var(--text-mid); text-decoration: none; transition: color .2s; }
.landing-nav-links a:hover { color: var(--accent); }
.landing-hero { padding: 5rem 2rem 4rem; text-align: center; max-width: 800px; margin: 0 auto; }
.landing-hero h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600; color: var(--text-dark); line-height: 1.15; margin-bottom: 1.2rem;
}
.landing-hero p { font-size: 1.1rem; color: var(--text-mid); margin-bottom: 2rem; line-height: 1.65; }
.landing-cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.landing-section { padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; }
.landing-section h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; text-align: center; margin-bottom: 2.5rem; color: var(--text-dark); }
.landing-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.landing-feature-card {
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; transition: var(--transition);
}
.landing-feature-card:hover { border-color: var(--rose-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.landing-feature-icon { font-size: 2rem; margin-bottom: .75rem; }
.landing-feature-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; color: var(--text-dark); }
.landing-feature-card p  { font-size: .85rem; color: var(--text-mid); line-height: 1.55; }
.landing-how { background: var(--beige-100); padding: 4rem 2rem; }
.landing-how-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.landing-how h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; margin-bottom: 2.5rem; color: var(--text-dark); }
.landing-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.landing-step { text-align: center; }
.landing-step-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--rose-400); color: #fff;
  font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.landing-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.landing-step p  { font-size: .85rem; color: var(--text-mid); }
.landing-footer {
  background: var(--text-dark); color: var(--beige-200); padding: 2rem;
  text-align: center; font-size: .85rem;
}
.landing-footer a { color: var(--rose-300); text-decoration: none; margin: 0 .5rem; }
.landing-footer a:hover { color: var(--rose-200); }

/* ============================================================
   LANDING PAGE — BUSCA DE CLÍNICAS
   ============================================================ */
.landing-search-wrap {
  background: linear-gradient(135deg, #fdf0f4, #fefcf8);
  padding: 3.5rem 2rem;
  border-top: 1px solid var(--rose-100);
  border-bottom: 1px solid var(--rose-100);
}
.landing-search-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.landing-search-inner h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  color: var(--text-dark);
  margin-bottom: .5rem;
}
.landing-search-inner > p {
  font-size: .92rem;
  color: var(--text-mid);
  margin-bottom: 1.5rem;
}
.landing-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.landing-search-icon {
  position: absolute;
  left: 1rem;
  font-size: 1rem;
  pointer-events: none;
}
#clinic-search-input {
  width: 100%;
  padding: .85rem 1rem .85rem 2.8rem;
  border: 1.5px solid var(--rose-200);
  border-radius: 12px;
  font-size: .95rem;
  background: #fff;
  color: var(--text-dark);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
#clinic-search-input:focus {
  border-color: var(--rose-400);
  box-shadow: 0 0 0 3px rgba(232,116,138,.15);
}
.landing-search-results {
  margin-top: 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cs-empty {
  text-align: center;
  font-size: .88rem;
  color: var(--text-light);
  padding: 1rem 0;
}
.cs-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1.5px solid var(--beige-200);
  border-radius: 12px;
  padding: .85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.cs-card:hover {
  border-color: var(--rose-300);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.cs-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
}
.cs-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-avatar-letter {
  width: 100%;
  height: 100%;
  background: var(--rose-100);
  color: var(--rose-500);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cs-info {
  flex: 1;
  min-width: 0;
}
.cs-info strong {
  display: block;
  font-size: .95rem;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-info span {
  font-size: .8rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.cs-cta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--rose-500);
  white-space: nowrap;
}

/* ============================================================
   LANDING PAGE — RESPONSIVO MOBILE
   ============================================================ */
@media (max-width: 768px) {

  /* Nav: esconde links de texto, mantém só o CTA */
  .landing-nav {
    padding: .9rem 1.25rem;
  }
  .landing-nav-links a:not(.btn) {
    display: none;
  }

  /* Hero: reduz padding e ajusta tipografia */
  .landing-hero {
    padding: 3rem 1.25rem 2.5rem;
  }
  .landing-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.2;
  }
  .landing-hero p {
    font-size: .95rem;
  }
  /* Remove quebra de linha manual no parágrafo do hero */
  .landing-hero p br {
    display: none;
  }

  /* CTA: botões em coluna, largura total */
  .landing-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    max-width: 320px;
    margin: 0 auto;
  }
  .landing-cta-group .btn {
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: .85rem 1rem !important;
  }

  /* Seções: padding menor */
  .landing-section {
    padding: 2.5rem 1.25rem;
  }
  .landing-section h2,
  .landing-how h2 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  /* Features: coluna única */
  .landing-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Como funciona: coluna única */
  .landing-how {
    padding: 2.5rem 1.25rem;
  }
  .landing-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Footer: links em coluna */
  .landing-footer p:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
  }
}

/* ============================================================
   ONBOARDING PAGE
   ============================================================ */
.onboarding-body {
  background: var(--bg-page); min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.onboarding-container { width: 100%; max-width: 560px; }
.onboarding-logo { text-align: center; margin-bottom: 2rem; font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--text-dark); }
.onboarding-progress { display: flex; gap: 6px; margin-bottom: 2rem; }
.onboarding-progress-bar { height: 5px; flex: 1; border-radius: 99px; background: var(--beige-200); transition: background .4s; }
.onboarding-progress-bar.active { background: var(--rose-400); }
.onboarding-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.onboarding-card h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; margin-bottom: .5rem; }
.onboarding-card p  { font-size: .9rem; color: var(--text-mid); margin-bottom: 1.5rem; }
.onboarding-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.onboarding-skip { font-size: .82rem; color: var(--text-light); cursor: pointer; background: none; border: none; text-decoration: underline; }

/* ============================================================
   AGENDAR PAGE — Agendamento Público
   ============================================================ */
.agendar-header {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 1.2rem 2rem; display: flex; align-items: center; gap: 1rem;
}
.agendar-logo {
  width: 48px; height: 48px; border-radius: 50%; background: var(--beige-200);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.agendar-logo img { width: 100%; height: 100%; object-fit: cover; }
.agendar-clinic-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; }
.agendar-main { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
.agendar-steps { display: flex; gap: 6px; margin-bottom: 2rem; }
.agendar-step-bar { height: 4px; flex: 1; border-radius: 99px; background: var(--beige-200); transition: background .3s; }
.agendar-step-bar.active { background: var(--rose-400); }
.agendar-step-bar.done   { background: #16A34A; }
.agendar-step { display: none; }
.agendar-step.visible { display: block; }
.agendar-step h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin-bottom: 1rem; }
.time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin: 1rem 0; }
.time-slot {
  padding: .6rem .8rem; border: 1.5px solid var(--border); border-radius: 10px;
  text-align: center; cursor: pointer; font-size: .88rem; background: var(--white); transition: var(--transition);
}
.time-slot:hover { border-color: var(--rose-300); background: var(--beige-100); }
.time-slot.selected { border-color: var(--rose-500); background: var(--rose-100); font-weight: 600; color: var(--rose-600); }
.agendar-success { text-align: center; padding: 3rem 1rem; }
.agendar-success .success-icon { font-size: 4rem; margin-bottom: 1rem; }
.agendar-success h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; margin-bottom: 1rem; }
.agendar-success p  { color: var(--text-mid); font-size: .95rem; }

/* ============================================================
   MEMBROS PAGE
   ============================================================ */
.member-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.member-info { flex: 1; min-width: 0; }
.member-info .member-name  { font-weight: 600; font-size: .92rem; }
.member-info .member-email { font-size: .8rem; color: var(--text-light); margin-top: 2px; }
.member-role-badge { font-size: .72rem; padding: .2rem .6rem; border-radius: 99px; background: var(--beige-200); color: var(--text-mid); }
.invite-link-box {
  background: var(--beige-100); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 1rem;
}
.invite-link-box input { flex: 1; border: none; background: transparent; font-size: .85rem; color: var(--text-dark); outline: none; min-width: 0; }