/* Custom Colors */
:root {
  --rehab-50: #f5f7fa;
  --rehab-100: #eaeef4;
  --rehab-200: #d5deea;
  --rehab-300: #b3c4db;
  --rehab-400: #8aa6c7;
  --rehab-500: #6688b3;
  --rehab-600: #406899;
  --rehab-700: #2d5380;
  --rehab-800: #1e3a5a;
  --rehab-900: #132639;
}

/* Apply Tailwind custom colors */
.bg-rehab-50 { background-color: var(--rehab-50); }
.bg-rehab-100 { background-color: var(--rehab-100); }
.bg-rehab-600 { background-color: var(--rehab-600); }
.bg-rehab-700 { background-color: var(--rehab-700); }
.bg-rehab-800 { background-color: var(--rehab-800); }

.text-rehab-100 { color: var(--rehab-100); }
.text-rehab-300 { color: var(--rehab-300); }
.text-rehab-600 { color: var(--rehab-600); }
.text-rehab-700 { color: var(--rehab-700); }
.text-rehab-800 { color: var(--rehab-800); }

.border-rehab-300 { border-color: var(--rehab-300); }
.border-rehab-600 { border-color: var(--rehab-600); }
.border-rehab-700 { border-color: var(--rehab-700); }

.hover\:bg-rehab-50:hover { background-color: var(--rehab-50); }
.hover\:bg-rehab-700:hover { background-color: var(--rehab-700); }
.hover\:text-rehab-600:hover { color: var(--rehab-600); }
.hover\:text-rehab-800:hover { color: var(--rehab-800); }
.hover\:border-rehab-300:hover { border-color: var(--rehab-300); }

/* Animations */
.animate-fade-up {
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Section Padding */
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Common Section Styles */
.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--rehab-800);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }
}

.section-subtitle {
  font-size: 1.125rem;
  color: #4a5568;
  max-width: 36rem;
  margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .py-20 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Garantir que as abas das unidades fiquem em linha única no desktop */
@media (min-width: 768px) {
  #unit-tabs {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  
  #unit-tabs > li {
    flex: 1;
    white-space: nowrap;
    min-width: auto;
    padding: 0 0.25rem;
  }
  
  #unit-tabs > li button {
    font-size: 0.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
    width: 100%;
  }
}

/* Ajuste para evitar overflow horizontal em telas menores */
@media (max-width: 767px) {
  #unit-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 1rem;
  }
  
  #unit-tabs > li {
    flex: 0 0 auto;
    min-width: 180px;
  }
  
  #unit-tabs > li button {
    white-space: nowrap;
    width: 100%;
  }
}

/* Estilo de botão para as abas das unidades */
#unit-tabs > li button {
  border-radius: 9999px;
  background: #fff !important;
  color: var(--rehab-600) !important;
  box-shadow: 0 2px 8px 0 rgba(64, 104, 153, 0.08);
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border 0.2s;
  font-weight: 600;
}
#unit-tabs > li button:hover {
  background: var(--rehab-50) !important;
  color: var(--rehab-700) !important;
  border-color: var(--rehab-300);
}
#unit-tabs > li button.active,
#unit-tabs > li button[aria-selected="true"] {
  background: var(--rehab-600) !important;
  color: #fff !important;
  border-color: var(--rehab-600);
  box-shadow: 0 4px 16px 0 rgba(64, 104, 153, 0.15);
  cursor: default;
}