/**
 * VEHYLY - Appointments Styles V2
 * Sistema de citas - Diseño atractivo, simple y funcional
 */

/* ========================================
   VARIABLES
======================================== */
:root {
  --apt-primary: #667eea;
  --apt-primary-dark: #5568d3;
  --apt-success: #007AFF;
  --apt-completed: #34C759;
  --apt-cancelled: #FF3B30;
  --apt-no-show: #FF9500;
  --apt-rescheduled: #5856D6;
  --apt-warning: #ecc94b;
  
  --apt-bg: #f5f5f5;
  --apt-card: linear-gradient(145deg, #ffffff, #f0f0f0);
  --apt-border: rgba(0, 0, 0, 0.1);
  --apt-text: #404040;
  --apt-text-muted: #718096;
  --apt-text-light: #a0aec0;
  
  --apt-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --apt-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1);
  --apt-shadow-md: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1);
  --apt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  --apt-radius: 12px;
  --apt-radius-sm: 8px;
  --apt-radius-lg: 16px;
}

/* ========================================
   CONTENEDORES PRINCIPALES
======================================== */
.appointments-client-view,
.appointments-professional-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
   HEADERS
======================================== */
.client-header,
.professional-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.client-header h2,
.professional-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--apt-text);
  margin: 0;
}

/* ========================================
   TABS
======================================== */
.client-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--apt-border);
  overflow-x: auto;
}

.client-tab {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--apt-text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.client-tab:hover {
  color: var(--apt-text);
  background: rgba(102, 126, 234, 0.05);
}

.client-tab.active {
  color: var(--apt-primary);
  border-bottom-color: var(--apt-primary);
}

/* ========================================
   STATS CARDS
======================================== */
.professional-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--apt-card);
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: var(--apt-shadow-sm);
  transition: all 0.2s;
}

.stat-card:hover {
  box-shadow: var(--apt-shadow-md);
  transform: translateY(-2px);
}

.stat-card.loading {
  justify-content: center;
  color: var(--apt-text-muted);
}

.stat-icon {
  font-size: 32px;
  line-height: 1;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 12px;
  color: var(--apt-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--apt-text);
  margin: 4px 0;
}

.stat-meta {
  font-size: 14px;
  color: var(--apt-text-muted);
}

/* ========================================
   CALENDAR CONTROLS
======================================== */
.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.view-switcher {
  display: flex;
  gap: 4px;
  background: var(--apt-card);
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  padding: 4px;
}

.view-btn {
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: var(--apt-radius-sm);
  color: var(--apt-text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--apt-primary);
}

.view-btn.active {
  background: var(--apt-primary);
  color: white;
}

.date-navigator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--apt-border);
  background: var(--apt-card);
  color: var(--apt-text);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover {
  background: var(--apt-primary);
  color: white;
  border-color: var(--apt-primary);
}

#currentDateLabel {
  min-width: 200px;
  text-align: center;
  font-weight: 600;
  color: var(--apt-text);
}

/* ========================================
   MONTH CALENDAR
======================================== */
.month-calendar {
  background: var(--apt-card);
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 20px;
  margin-bottom: 24px;
}

.month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.weekday-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--apt-text-muted);
  text-transform: uppercase;
  padding: 8px 0;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  aspect-ratio: 1;
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.calendar-day:hover {
  background: rgba(102, 126, 234, 0.05);
  border-color: var(--apt-primary);
}

.calendar-day.empty {
  border: none;
  cursor: default;
}

.calendar-day.today {
  background: var(--apt-primary);
  color: white;
  border-color: var(--apt-primary);
}

.day-number {
  font-weight: 600;
  font-size: 14px;
}

.day-appointments {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.appointment-dot {
  background: var(--apt-primary);
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.loading-dot {
  color: var(--apt-text-light);
  font-size: 8px;
}

/* ========================================
   WEEK CALENDAR
======================================== */
.week-calendar {
  background: var(--apt-card);
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 20px;
  margin-bottom: 24px;
}

.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.week-day-header {
  text-align: center;
  padding: 12px;
  border-radius: var(--apt-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.week-day-header:hover {
  background: rgba(102, 126, 234, 0.05);
}

.week-day-header.today {
  background: var(--apt-primary);
  color: white;
}

.day-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.day-date {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
}

.week-grid {
  min-height: 400px;
}

.week-appointment {
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  border-left: 4px solid;
  border-radius: var(--apt-radius-sm);
  box-shadow: var(--apt-shadow-sm);
}

.apt-time {
  font-weight: 600;
  color: var(--apt-text);
  margin-bottom: 4px;
}

.apt-client {
  font-size: 14px;
  color: var(--apt-text-muted);
}

.apt-service {
  font-size: 12px;
  color: var(--apt-text-light);
}

/* ========================================
   DAY VIEW
======================================== */
.day-view {
  background: var(--apt-card);
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 20px;
  margin-bottom: 24px;
}

.day-header h3 {
  margin: 0;
  color: var(--apt-text);
  font-weight: 600;
}

.day-appointments-list {
  margin-top: 20px;
}

/* ========================================
   APPOINTMENT CARDS
======================================== */
.client-appointments-list,
.appointments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.appointment-card {
  background: var(--apt-card);
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 20px;
  box-shadow: var(--apt-shadow);
  transition: all 0.2s;
  display: grid;
  gap: 16px;
}

.appointment-card:hover {
  box-shadow: var(--apt-shadow-md);
  transform: translateY(-2px);
}

/* Bordes de colores según estado */
.appointment-card.confirmed {
  border-left: 4px solid var(--apt-success);
}

.appointment-card.completed {
  border-left: 4px solid var(--apt-completed);
}

.appointment-card.cancelled,
.appointment-card.cancelled_by_professional,
.appointment-card.cancelled_by_client {
  border-left: 4px solid var(--apt-cancelled);
}

.appointment-card.no-show,
.appointment-card.no_show {
  border-left: 4px solid var(--apt-no-show);
}

.appointment-card.rescheduled {
  border-left: 4px solid var(--apt-rescheduled);
}

.appointment-date-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.appointment-date-badge.today {
  color: var(--apt-primary);
}

.date-day {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--apt-text-muted);
}

.date-time {
  font-size: 16px;
  font-weight: 700;
  color: var(--apt-text);
}

.appointment-time-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--apt-primary);
}

.duration {
  font-size: 12px;
  color: var(--apt-text-muted);
  background: rgba(102, 126, 234, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.appointment-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appointment-service {
  font-size: 18px;
  font-weight: 700;
  color: var(--apt-text);
}

.appointment-professional,
.appointment-client {
  font-size: 14px;
  color: var(--apt-text-muted);
}

.appointment-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--apt-success);
}

.paid-badge,
.deposit-badge {
  font-size: 12px;
  background: rgba(72, 187, 120, 0.1);
  color: var(--apt-success);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
}

.deposit-badge {
  background: rgba(102, 126, 234, 0.1);
  color: var(--apt-primary);
}

.appointment-notes {
  font-size: 14px;
  color: var(--apt-text-muted);
  font-style: italic;
  padding: 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--apt-radius-sm);
}

.appointment-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.status-badge.confirmed {
  background: rgba(0, 122, 255, 0.1);
  color: var(--apt-success);
}

.status-badge.completed {
  background: rgba(52, 199, 89, 0.1);
  color: var(--apt-completed);
}

.status-badge.cancelled,
.status-badge.cancelled_by_professional,
.status-badge.cancelled_by_client {
  background: rgba(255, 59, 48, 0.1);
  color: var(--apt-cancelled);
}

.status-badge.no-show,
.status-badge.no_show {
  background: rgba(255, 149, 0, 0.1);
  color: var(--apt-no-show);
}

.status-badge.rescheduled {
  background: rgba(88, 86, 214, 0.1);
  color: var(--apt-rescheduled);
}

.appointment-rating {
  font-size: 16px;
  color: #f59e0b;
}

.appointment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========================================
   BUTTONS
======================================== */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
  padding: 10px 20px;
  border-radius: var(--apt-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-size: 14px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-primary {
  background: var(--apt-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--apt-primary-dark);
  box-shadow: var(--apt-shadow-md);
}

.btn-secondary {
  background: white;
  color: var(--apt-text);
  border: 1px solid var(--apt-border);
}

.btn-secondary:hover {
  background: var(--apt-bg);
  border-color: var(--apt-primary);
  color: var(--apt-primary);
}

.btn-success {
  background: var(--apt-success);
  color: white;
}

.btn-success:hover {
  background: #38a169;
}

.btn-danger {
  background: var(--apt-cancelled);
  color: white;
}

.btn-danger:hover {
  background: #e53e3e;
}

/* ========================================
   STATES
======================================== */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--apt-text-muted);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  color: var(--apt-text-muted);
  margin-bottom: 20px;
}

.error-state {
  text-align: center;
  padding: 40px;
  color: var(--apt-cancelled);
}

/* ========================================
   MODALS
======================================== */
.ve-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.ve-modal-content {
  background: white;
  border-radius: var(--apt-radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--apt-shadow-lg);
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--apt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: var(--apt-text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--apt-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--apt-text);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--apt-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ========================================
   FORMS
======================================== */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--apt-text);
  font-size: 14px;
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: var(--apt-text-muted);
  font-size: 12px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  font-size: 14px;
  transition: all 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--apt-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ========================================
   SETTINGS MODAL
======================================== */
.settings-modal {
  max-width: 800px;
}

.settings-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--apt-border);
  margin-bottom: 24px;
}

.settings-tab {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--apt-text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-tab:hover {
  color: var(--apt-text);
}

.settings-tab.active {
  color: var(--apt-primary);
  border-bottom-color: var(--apt-primary);
}

.settings-content {
  min-height: 400px;
}

.day-schedule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  margin-bottom: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.time-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-inputs input {
  width: 100px;
}

/* ========================================
   RATING MODAL
======================================== */
.rating-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}

.rating-stars .star {
  font-size: 48px;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
}

.rating-stars .star:hover,
.rating-stars .star.selected {
  color: #f59e0b;
  transform: scale(1.1);
}

.rating-value {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--apt-text);
  margin-top: 16px;
}

/* ========================================
   TIP MODAL
======================================== */
.tip-modal {
  max-width: 500px;
}

.tip-description {
  text-align: center;
  color: var(--apt-text-muted);
  margin-bottom: 24px;
}

.tip-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.tip-option-btn {
  background: white;
  border: 2px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 20px 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.tip-option-btn:hover {
  border-color: var(--apt-primary);
  background: rgba(102, 126, 234, 0.05);
}

.tip-option-btn.selected {
  border-color: var(--apt-primary);
  background: rgba(102, 126, 234, 0.1);
}

.tip-option-btn.recommended {
  border-color: var(--apt-success);
}

.tip-badge {
  position: absolute;
  top: -8px;
  font-size: 10px;
  background: var(--apt-success);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.tip-percentage {
  font-size: 20px;
  font-weight: 700;
  color: var(--apt-text);
}

.tip-amount {
  font-size: 14px;
  color: var(--apt-text-muted);
}

.custom-tip {
  margin-bottom: 24px;
}

.custom-tip label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--apt-text);
}

.custom-tip-input {
  position: relative;
}

.custom-tip-input .currency {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--apt-text-muted);
}

.custom-tip-input input {
  width: 100%;
  padding: 12px 12px 12px 32px;
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  font-size: 16px;
}

.tip-actions {
  display: flex;
  gap: 12px;
}

.skip-tip-btn {
  flex: 1;
  padding: 12px;
  background: white;
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  color: var(--apt-text-muted);
  font-weight: 600;
  cursor: pointer;
}

.confirm-tip-btn {
  flex: 1;
  padding: 12px;
  background: var(--apt-primary);
  border: none;
  border-radius: var(--apt-radius-sm);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .appointments-client-view,
  .appointments-professional-view {
    padding: 12px;
  }

  .professional-stats {
    grid-template-columns: 1fr;
  }

  .calendar-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .month-grid {
    gap: 4px;
  }

  .day-number {
    font-size: 12px;
  }

  .appointment-dot {
    font-size: 9px;
    padding: 1px 6px;
  }

  .appointment-actions {
    flex-direction: column;
  }

  .appointment-actions button {
    width: 100%;
  }

  .tip-options {
    grid-template-columns: 1fr;
  }
}

/* ===== 430px ===== */
@media (max-width: 430px) {
  .client-header h2,
  .professional-header h2 {
    font-size: 22px;
  }
  .modal-header h2 {
    font-size: 20px;
  }
  #currentDateLabel {
    min-width: 140px;
    font-size: 14px;
  }
  .settings-content {
    min-height: auto;
  }
  .time-inputs input {
    width: 80px;
  }
  .day-schedule {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===== 375px ===== */
@media (max-width: 375px) {
  .appointments-client-view,
  .appointments-professional-view {
    padding: 10px;
  }
  .month-calendar,
  .week-calendar,
  .day-view {
    padding: 14px;
  }
  .stat-card {
    padding: 14px;
    gap: 12px;
  }
  .stat-icon {
    font-size: 26px;
  }
  .stat-value {
    font-size: 20px;
  }
  .appointment-card {
    padding: 14px;
  }
  .appointment-service {
    font-size: 16px;
  }
  .time-label {
    font-size: 17px;
  }
  .option-amount {
    font-size: 17px;
  }
  .modal-header {
    padding: 18px;
  }
  .modal-body {
    padding: 18px;
  }
  .rating-stars .star {
    font-size: 36px;
  }
  .tip-option-btn {
    padding: 14px 10px;
  }
  .tip-percentage {
    font-size: 17px;
  }
  #currentDateLabel {
    min-width: 120px;
    font-size: 13px;
  }
  .time-inputs input {
    width: 70px;
    font-size: 13px;
  }
}

/* ===== 320px ===== */
@media (max-width: 320px) {
  .appointments-client-view,
  .appointments-professional-view {
    padding: 8px;
  }
  .client-header h2,
  .professional-header h2 {
    font-size: 18px;
  }
  .month-calendar,
  .week-calendar,
  .day-view {
    padding: 10px;
  }
  .month-header,
  .month-grid {
    gap: 2px;
  }
  .calendar-day {
    padding: 4px;
  }
  .weekday-label {
    font-size: 10px;
  }
  .day-number {
    font-size: 11px;
  }
  .week-day-header {
    padding: 8px 4px;
  }
  .day-date {
    font-size: 16px;
  }
  .day-name {
    font-size: 10px;
  }
  .appointment-card {
    padding: 12px;
  }
  .appointment-service {
    font-size: 15px;
  }
  .stat-card {
    padding: 12px;
    gap: 10px;
  }
  .stat-icon {
    font-size: 22px;
  }
  .stat-value {
    font-size: 18px;
  }
  .stat-label {
    font-size: 11px;
  }
  .view-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  .nav-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .modal-header h2 {
    font-size: 18px;
  }
  .confirm-payment-btn,
  .pay-btn {
    padding: 13px;
    font-size: 15px;
  }
  .tip-option-btn {
    padding: 12px 8px;
  }
  .tip-percentage {
    font-size: 15px;
  }
}

/* ========================================
   PAYMENT MODAL
======================================== */
.appointment-payment-modal {
  max-width: 550px;
}

.appointment-summary {
  background: var(--apt-bg);
  padding: 20px;
  border-radius: var(--apt-radius);
  margin-bottom: 24px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--apt-border);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.total {
  font-weight: 700;
  font-size: 18px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--apt-border);
}

.summary-label {
  color: var(--apt-text-muted);
}

.summary-value {
  color: var(--apt-text);
  font-weight: 600;
}

.payment-options {
  margin-bottom: 24px;
}

.payment-options h3 {
  margin: 0 0 16px 0;
  color: var(--apt-text);
}

.payment-option {
  border: 2px solid var(--apt-border);
  border-radius: var(--apt-radius);
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-option:hover {
  border-color: var(--apt-primary);
  background: rgba(102, 126, 234, 0.02);
}

.payment-option.selected {
  border-color: var(--apt-primary);
  background: rgba(102, 126, 234, 0.05);
}

.payment-option input[type="radio"] {
  display: none;
}

.payment-option label {
  cursor: pointer;
  display: block;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.option-icon {
  font-size: 24px;
}

.option-title {
  font-weight: 700;
  color: var(--apt-text);
  flex: 1;
}

.recommended-badge {
  background: var(--apt-success);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.option-description {
  color: var(--apt-text-muted);
  font-size: 14px;
  margin-bottom: 8px;
}

.option-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--apt-primary);
}

.option-breakdown {
  font-size: 14px;
  color: var(--apt-text-muted);
}

.option-breakdown div {
  margin-top: 4px;
}

.payment-policies {
  background: rgba(102, 126, 234, 0.05);
  padding: 16px;
  border-radius: var(--apt-radius);
  margin-bottom: 24px;
}

.payment-policies h4 {
  margin: 0 0 12px 0;
  color: var(--apt-text);
  font-size: 14px;
}

.payment-policies ul {
  margin: 0;
  padding-left: 20px;
}

.payment-policies li {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--apt-text-muted);
  line-height: 1.5;
}

.confirm-payment-btn {
  width: 100%;
  padding: 16px;
  background: var(--apt-primary);
  color: white;
  border: none;
  border-radius: var(--apt-radius);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.confirm-payment-btn:hover {
  background: var(--apt-primary-dark);
  box-shadow: var(--apt-shadow-md);
}

/* ========================================
   PAYPAL PAYMENT MODAL
======================================== */
.paypal-payment-modal {
  max-width: 500px;
}

.payment-summary {
  background: var(--apt-bg);
  padding: 16px;
  border-radius: var(--apt-radius);
  margin-bottom: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--apt-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  font-weight: 700;
  font-size: 16px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--apt-border);
}

.payment-form {
  margin-bottom: 20px;
}

.paypal-button-container {
  border: 1px solid var(--apt-border);
  border-radius: var(--apt-radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}

.card-errors {
  color: var(--apt-cancelled);
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 20px;
}

.pay-btn {
  width: 100%;
  padding: 16px;
  background: var(--apt-success);
  color: white;
  border: none;
  border-radius: var(--apt-radius);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-btn:hover:not(:disabled) {
  background: #38a169;
  box-shadow: var(--apt-shadow-md);
}

.pay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.secure-notice {
  text-align: center;
  font-size: 13px;
  color: var(--apt-text-muted);
}

/* ========================================
   ANIMATIONS
======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.appointment-card {
  animation: fadeIn 0.3s ease-out;
}

/* ========================================
   UTILITIES
======================================== */
.text-muted {
  color: var(--apt-text-muted);
}

.info-message {
  background: rgba(102, 126, 234, 0.1);
  color: var(--apt-primary);
  padding: 12px 16px;
  border-radius: var(--apt-radius-sm);
  margin-bottom: 20px;
}

.current-services {
  margin-top: 20px;
}

.services-list {
  list-style: none;
  padding: 0;
}

.services-list li {
  padding: 12px;
  background: var(--apt-bg);
  border-radius: var(--apt-radius-sm);
  margin-bottom: 8px;
}

/**********************************
 * ESTILOS METÁLICOS - APPOINTMENTS
 **********************************/

/* Cards metálicas */
.appointment-card, .apt-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1) !important;
}

.appointment-card:hover, .apt-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,1) !important;
  transform: translateY(-2px);
}

/* Botones metálicos */
.apt-btn-primary {
  background: linear-gradient(145deg, #5ab0ff, #2979ff) !important;
  box-shadow: 0 4px 12px rgba(41,121,255,0.3), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

.apt-btn-secondary {
  background: linear-gradient(145deg, #ffffff, #f0f0f0) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Stats cards metálicas */
.stat-card, .professional-stat-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Tabs metálicas */
.client-tab.active {
  background: linear-gradient(145deg, #fafafa, #f0f0f0);
}

/* ============================================================
   REDESIGN v2 — Timeline, Wizard, Services, Availability
   ============================================================ */

/* ---------- View Toggle ---------- */
.view-toggle{display:flex;background:#f1f5f9;border-radius:8px;padding:2px;margin-bottom:16px}
.view-toggle-btn{flex:1;padding:8px 16px;border:none;border-radius:6px;font-weight:600;font-size:13px;background:transparent;color:#64748b;cursor:pointer;transition:all .2s}
.view-toggle-btn.active{background:#fff;color:var(--apt-text);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---------- Day Summary ---------- */
.day-summary{display:flex;gap:16px;padding:14px;background:#f8fafc;border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.day-summary-stat{display:flex;flex-direction:column;align-items:center;flex:1;min-width:70px}
.day-summary-number{font-size:22px;font-weight:700;color:var(--apt-text)}
.day-summary-label{font-size:11px;color:var(--apt-text-muted);margin-top:2px}

/* ---------- Day Timeline ---------- */
.day-timeline{position:relative;margin-top:8px;overflow:visible}
.timeline-hour-row{display:flex;align-items:flex-start;height:60px;border-bottom:1px dashed #e5e7eb;position:relative}
.timeline-hour-label{width:52px;font-size:11px;color:#94a3b8;font-weight:500;padding-top:2px;text-align:right;padding-right:10px;flex-shrink:0}
.timeline-hour-area{flex:1;position:relative;height:100%}
.timeline-now-line{position:absolute;left:52px;right:0;height:2px;background:#ef4444;z-index:5;pointer-events:none}
.timeline-now-dot{position:absolute;left:46px;width:10px;height:10px;border-radius:50%;background:#ef4444;z-index:6;transform:translateY(-4px)}
.timeline-block{position:absolute;left:0;right:4px;border-radius:8px;overflow:hidden;cursor:pointer;z-index:3;transition:box-shadow .2s;min-height:24px}
.timeline-block:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}
.timeline-block.confirmed{background:#dbeafe;border-left:3px solid #2563eb}
.timeline-block.pending{background:#fef3c7;border-left:3px solid #d97706}
.timeline-block.completed{background:#d1fae5;border-left:3px solid #059669}
.timeline-block.cancelled{background:#fee2e2;border-left:3px solid #ef4444}
.timeline-block.blocked{background:#f3f4f6;border-left:3px solid #9ca3af;opacity:.7}
.timeline-block-content{padding:4px 8px;font-size:12px;line-height:1.3}
.timeline-block-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-block-service{color:#555;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-block-time{color:#888;font-size:10px}
.timeline-block-price{font-weight:700;color:var(--apt-primary);font-size:11px;float:right}
.timeline-empty-slot{cursor:pointer;transition:background .15s}
.timeline-empty-slot:hover{background:#f0f7ff}

/* ---------- Week View ---------- */
.week-view-grid{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;border:1px solid #e5e7eb;border-radius:12px}
.week-col{flex:1;min-width:100px;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}
.week-col:last-child{border-right:none}
.week-col-header{text-align:center;padding:8px 4px;font-size:12px;border-bottom:1px solid #e5e7eb;background:#fafbfc}
.week-col-header.today{background:var(--apt-primary);color:#fff;font-weight:700}
.week-col-header .week-day-name{font-weight:600}
.week-col-header .week-day-num{font-size:18px;font-weight:700;line-height:1.2}
.week-col-header .week-day-total{font-size:10px;opacity:.7}
.week-col-body{flex:1;min-height:180px;padding:4px;cursor:pointer}
.week-mini-block{padding:4px 6px;margin-bottom:2px;border-radius:4px;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-mini-block.confirmed{background:#dbeafe;color:#1e40af}
.week-mini-block.pending{background:#fef3c7;color:#92400e}
.week-mini-block.completed{background:#d1fae5;color:#065f46}
.week-mini-block.cancelled{background:#fee2e2;color:#991b1b}
.week-mini-block.blocked{background:#f3f4f6;color:#6b7280}

/* ---------- Month View Enhancements ---------- */
.month-day-dots{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px}
.month-day-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.month-day-dot.dot-confirmed{background:#2563eb}
.month-day-dot.dot-pending{background:#d97706}
.month-day-dot.dot-completed{background:#059669}
.month-day-count{font-size:10px;color:var(--apt-primary);font-weight:700}

/* ---------- Apt Manager Tabs ---------- */
.apt-manager-tabs{display:flex;gap:0;background:#f1f5f9;border-radius:10px;padding:2px;margin-bottom:16px}
.apt-manager-tab{flex:1;padding:10px 8px;border:none;background:transparent;font-size:12px;font-weight:600;color:#64748b;cursor:pointer;border-radius:8px;transition:all .2s;text-align:center}
.apt-manager-tab.active{background:#fff;color:var(--apt-text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- Appointment List ---------- */
.apt-list-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.apt-list-filter{padding:6px 14px;border:1px solid #e5e7eb;border-radius:20px;background:#fff;font-size:12px;font-weight:600;color:#64748b;white-space:nowrap;cursor:pointer}
.apt-list-filter.active{background:var(--apt-primary);color:#fff;border-color:var(--apt-primary)}
.apt-list-card{display:flex;gap:12px;padding:14px;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:8px;background:#fff;cursor:pointer;transition:box-shadow .2s}
.apt-list-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.apt-list-avatar{width:44px;height:44px;border-radius:50%;background:#f1f5f9;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#64748b;font-size:16px}
.apt-list-avatar img{width:100%;height:100%;object-fit:cover}
.apt-list-info{flex:1;min-width:0}
.apt-list-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apt-list-service{font-size:12px;color:#64748b}
.apt-list-datetime{font-size:12px;color:#94a3b8;margin-top:2px}
.apt-list-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.apt-list-price{font-weight:700;color:var(--apt-primary);font-size:14px}
.apt-list-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase}
.apt-list-status.s-pending{background:#fef3c7;color:#92400e}
.apt-list-status.s-confirmed{background:#dbeafe;color:#1e40af}
.apt-list-status.s-completed{background:#d1fae5;color:#065f46}
.apt-list-status.s-cancelled{background:#fee2e2;color:#991b1b}

/* ---------- Appointment Detail Modal ---------- */
.apt-detail-header{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.apt-detail-avatar{width:56px;height:56px;border-radius:50%;background:#f1f5f9;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#64748b}
.apt-detail-avatar img{width:100%;height:100%;object-fit:cover}
.apt-detail-name{font-size:18px;font-weight:700}
.apt-detail-meta{font-size:13px;color:#64748b}
.apt-detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:14px}
.apt-detail-label{color:#64748b}
.apt-detail-value{font-weight:600}
.apt-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.apt-detail-btn{flex:1;min-width:120px;padding:12px;border:none;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;text-align:center}
.apt-detail-btn.confirm{background:#dbeafe;color:#1e40af}
.apt-detail-btn.complete{background:#d1fae5;color:#065f46}
.apt-detail-btn.cancel{background:#fee2e2;color:#991b1b}
.apt-detail-btn.reschedule{background:#f1f5f9;color:#334155}
.apt-detail-btn.call{background:#d1fae5;color:#065f46}
.apt-detail-btn.message{background:#dbeafe;color:#1e40af}

/* ---------- Booking Wizard ---------- */
.booking-wizard{position:fixed;inset:0;z-index:99999;background:#fff;display:flex;flex-direction:column}
.wizard-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #e5e7eb}
.wizard-header-back{border:none;background:none;font-size:22px;cursor:pointer;padding:4px 8px;color:#334155}
.wizard-header-title{flex:1;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wizard-header-close{border:none;background:none;font-size:24px;cursor:pointer;padding:4px 8px;color:#94a3b8}
.wizard-steps{display:flex;gap:4px;padding:12px 16px}
.wizard-step{flex:1;height:4px;border-radius:2px;background:#e5e7eb;transition:background .3s}
.wizard-step.active{background:var(--apt-primary)}
.wizard-step.done{background:var(--apt-success)}
.wizard-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.wizard-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e5e7eb}
.wizard-btn{width:100%;padding:14px;border:none;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer}
.wizard-btn-primary{background:var(--apt-primary);color:#fff}
.wizard-btn-primary:disabled{opacity:.4;cursor:not-allowed}
.wizard-btn-secondary{background:#f1f5f9;color:#334155;margin-top:8px}
.wizard-summary-total{position:sticky;bottom:0;background:#fff;padding:12px 0 0;border-top:1px solid #f1f5f9;margin-top:12px;font-size:14px;font-weight:700;display:flex;justify-content:space-between}

/* ---------- Service Select Cards (Booking) ---------- */
.service-select-card{display:flex;gap:12px;padding:14px;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .2s;margin-bottom:8px;user-select:none}
.service-select-card.selected{border-color:var(--apt-primary);background:#f0f5ff}
.service-select-card:active{transform:scale(.98)}
.service-photo{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#f1f5f9;flex-shrink:0}
.service-info{flex:1;min-width:0}
.service-name{font-weight:700;font-size:15px;margin-bottom:2px}
.service-desc{font-size:12px;color:#64748b;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.service-meta{display:flex;gap:8px;align-items:center;font-size:13px;color:#64748b}
.service-price{font-weight:800;color:var(--apt-primary);font-size:15px}
.service-check{width:24px;height:24px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.service-select-card.selected .service-check{background:var(--apt-primary);border-color:var(--apt-primary);color:#fff}

/* ---------- Service Management Cards (Pro) ---------- */
.service-manage-card{display:flex;gap:12px;padding:14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin-bottom:8px;align-items:center}
.service-manage-card.inactive{opacity:.5}
.service-manage-info{flex:1;min-width:0}
.service-manage-name{font-weight:700;font-size:14px}
.service-manage-meta{font-size:12px;color:#64748b}
.service-manage-actions{display:flex;gap:6px;align-items:center}
.service-manage-btn{border:none;background:#f1f5f9;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;font-weight:600}
.svc-toggle{appearance:none;-webkit-appearance:none;width:44px;height:24px;border-radius:12px;background:#ccc;position:relative;cursor:pointer;transition:background .2s;border:none;flex-shrink:0}
.svc-toggle:checked{background:var(--apt-primary)}
.svc-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.svc-toggle:checked::after{transform:translateX(20px)}

/* ---------- Time Slot Grid ---------- */
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot-period-label{font-size:13px;font-weight:600;color:#64748b;margin:14px 0 8px;grid-column:1/-1}
.slot-btn{padding:12px;border:1px solid #e5e7eb;border-radius:10px;text-align:center;font-weight:600;font-size:14px;background:#fff;cursor:pointer;transition:all .15s}
.slot-btn:hover{border-color:var(--apt-primary);background:#f0f5ff}
.slot-btn.selected{background:var(--apt-primary);color:#fff;border-color:var(--apt-primary)}
.slot-btn:disabled{opacity:.3;cursor:not-allowed;background:#f9fafb}

/* ---------- Success Screen ---------- */
.booking-success{display:flex;flex-direction:column;align-items:center;padding:40px 20px;text-align:center;min-height:100%}
.success-check{width:80px;height:80px;border-radius:50%;background:#d1fae5;display:flex;align-items:center;justify-content:center;font-size:36px;animation:successPop .5s ease;margin-bottom:20px}
@keyframes successPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.success-title{font-size:22px;font-weight:700;margin-bottom:8px}
.success-subtitle{font-size:14px;color:#64748b;margin-bottom:24px}
.success-detail{width:100%;text-align:left;background:#f8fafc;border-radius:12px;padding:16px;margin-bottom:20px}
.success-detail-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.success-detail-label{color:#64748b}
.success-detail-value{font-weight:600}
.success-btn{width:100%;padding:14px;border:none;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;margin-bottom:8px}
.success-btn.calendar{background:#dbeafe;color:#1e40af}
.success-btn.home{background:var(--apt-primary);color:#fff}

/* ---------- Availability Config ---------- */
.avail-day-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.avail-day-name{width:36px;font-weight:700;font-size:13px;color:var(--apt-text);flex-shrink:0}
.avail-toggle{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:11px;background:#ccc;position:relative;cursor:pointer;transition:background .2s;border:none;flex-shrink:0}
.avail-toggle:checked{background:var(--apt-primary)}
.avail-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.avail-toggle:checked::after{transform:translateX(18px)}
.avail-time-input{padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;width:90px;text-align:center}
.avail-break-label{font-size:11px;color:#94a3b8;margin-left:4px}
.avail-section-title{font-size:14px;font-weight:700;margin:16px 0 8px;color:var(--apt-text)}
.blocked-time-card{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:6px;font-size:13px}
.blocked-time-delete{border:none;background:none;color:#ef4444;font-size:18px;cursor:pointer;padding:0 4px}

/* ---------- Quick Create Modal ---------- */
.quick-create-field{margin-bottom:12px}
.quick-create-field label{display:block;font-size:13px;font-weight:600;color:#64748b;margin-bottom:4px}
.quick-create-field input,.quick-create-field select,.quick-create-field textarea{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:14px;font-family:inherit}

/* ---------- Date Navigator ---------- */
.date-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.date-nav-btn{width:34px;height:34px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.date-nav-btn:hover{background:var(--apt-primary);color:#fff;border-color:var(--apt-primary)}
.date-nav-label{flex:1;text-align:center;font-weight:600;font-size:15px;cursor:pointer}
.date-nav-today{padding:6px 14px;border:1px solid var(--apt-primary);border-radius:20px;background:transparent;color:var(--apt-primary);font-size:12px;font-weight:700;cursor:pointer}
.date-nav-today:hover{background:var(--apt-primary);color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:430px){
  .slot-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .slot-btn{padding:10px 6px;font-size:13px}
  .week-col{min-width:80px}
  .day-summary{gap:8px;padding:10px}
  .day-summary-number{font-size:18px}
  .timeline-hour-label{width:42px;font-size:10px}
  .service-select-card{padding:10px;gap:10px}
  .service-photo{width:48px;height:48px}
  .apt-list-card{padding:10px;gap:10px}
  .avail-day-row{gap:6px}
  .avail-time-input{width:75px;font-size:12px;padding:5px 6px}
}