/**
 * Belleza — componentes públicos (calendario, CTAs, mapa contacto).
 * Tokens: --color-primary, --color-secondary, --color-accent (public_site_theme.php).
 */

/* —— Calendario de reservas —— */
.calendar-wrapper {
  background: color-mix(in srgb, var(--bg-card) 92%, var(--color-primary) 8%);
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
}

.calendar-nav-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--border-color));
}

.calendar-nav-btn:hover {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  border-color: color-mix(in srgb, var(--color-accent) 50%, var(--border-color));
  transform: scale(1.05);
}

.calendar-month-year,
.calendar-weekdays .weekday {
  color: var(--color-primary);
}

.calendar-day:not(.empty) {
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--bg-card));
  border: 2px solid color-mix(in srgb, var(--color-primary) 16%, var(--border-color));
  color: var(--text-primary);
}

.calendar-day .dot {
  background: var(--color-accent);
}

.calendar-day:hover:not(.empty):not(.past):not(.closed):not(.full):not(.blocked):not(.selected) {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  border-color: var(--color-accent);
  transform: scale(1.04);
}

/* Día seleccionado — sólido color_primary, distinguible del hover */
.calendar-day.selected,
.calendar-day.available-high.selected,
.calendar-day.available-medium.selected,
.calendar-day.available-low.selected,
.calendar-day.day-pending-employee.selected {
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, #ffffff),
    0 4px 14px color-mix(in srgb, var(--color-primary) 38%, transparent);
  font-weight: 700;
  transform: scale(1.07);
  position: relative;
  z-index: 1;
}

.calendar-day.selected .calendar-day-num {
  color: #ffffff;
}

.calendar-day.selected .dot {
  background: #ffffff;
  color: #ffffff;
}

.calendar-day.selected:hover,
.calendar-day.available-high.selected:hover,
.calendar-day.available-medium.selected:hover,
.calendar-day.available-low.selected:hover,
.calendar-day.day-pending-employee.selected:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  transform: scale(1.07);
}

.calendar-day.past {
  background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-card));
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.45;
}

.calendar-day.closed {
  background: color-mix(in srgb, var(--bg-secondary) 85%, var(--bg-card));
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.85;
}

.calendar-day.full {
  background: color-mix(in srgb, var(--bg-secondary) 55%, var(--danger, #c62828) 18%);
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--border-color));
  color: var(--text-muted);
  opacity: 1;
}

.calendar-day.blocked {
  background: color-mix(in srgb, var(--bg-primary) 88%, var(--color-primary) 8%);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.calendar-day.day-pending-employee {
  background: color-mix(in srgb, var(--color-accent) 16%, var(--bg-card));
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--border-color));
  color: var(--color-primary);
}

.calendar-day.available-high {
  background: color-mix(in srgb, var(--color-secondary) 14%, var(--bg-card));
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--border-color));
  color: var(--text-primary);
}

.calendar-day.available-high:hover:not(.empty):not(.past):not(.full):not(.selected) {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  border-color: var(--color-accent);
}

.calendar-day.available-medium {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--color-secondary) 28%, var(--border-color));
  color: var(--text-secondary);
}

.calendar-day.available-medium:hover:not(.empty):not(.past):not(.full):not(.selected) {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  border-color: var(--color-accent);
}

.calendar-day.available-low {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-card));
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
  color: var(--text-muted);
}

.calendar-day.available-low:hover:not(.empty):not(.past):not(.full):not(.selected) {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  border-color: var(--color-accent);
}

.calendar-availability-msg {
  color: var(--color-primary);
}

.form-wrapper {
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--border-color));
}

/* —— CTAs (Reservar cita, enviar, etc.) —— */
button.btn-agendar-cita,
button.btn-reservar,
button.btn-enviar,
button.btn-booking-submit,
button.btn-booking-close-success,
.btn-reservar-seleccion {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 85%, #0f141c),
    color-mix(in srgb, var(--color-secondary) 70%, var(--bg-card))
  );
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--border-color));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: #ffffff;
  font-weight: 600;
  text-shadow: none;
}

button.btn-agendar-cita i,
button.btn-reservar i,
button.btn-enviar i,
button.btn-booking-submit i,
button.btn-booking-close-success i,
.btn-reservar-seleccion i {
  color: #ffffff;
}

button.btn-agendar-cita:hover,
button.btn-reservar:hover,
button.btn-enviar:hover,
button.btn-booking-submit:hover,
button.btn-booking-close-success:hover,
.btn-reservar-seleccion:hover {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 24%, transparent);
  color: #ffffff;
  text-shadow: none;
  filter: none;
}

button.btn-agendar-cita:hover i,
button.btn-reservar:hover i,
button.btn-enviar:hover i,
button.btn-booking-submit:hover i,
button.btn-booking-close-success:hover i,
.btn-reservar-seleccion:hover i {
  color: #ffffff;
}

/* —— Mapa contacto —— */
.map-wrapper {
  background: color-mix(in srgb, var(--bg-card) 92%, var(--color-primary) 8%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--border-color));
}

.map-container {
  position: relative;
  width: 100%;
  min-height: 400px;
  background: color-mix(in srgb, var(--bg-secondary) 80%, var(--bg-card));
  border-radius: 10px;
  overflow: hidden;
}

.map-container iframe {
  display: block;
  width: 100%;
  min-height: 400px;
  height: 400px;
  border: 0;
}

@media (max-width: 968px) {
  .map-container,
  .map-container iframe {
    min-height: 350px;
    height: 350px;
  }
}

@media (max-width: 768px) {
  .map-container,
  .map-container iframe {
    min-height: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .map-container,
  .map-container iframe {
    min-height: 250px;
    height: 250px;
  }
}