html {
  scroll-behavior: smooth;
}

body {
  padding-top: 56px; /* espacio para la navbar fija */
}

.navbar {
  background-color: #ffffff;
}

/* --- Círculos genéricos --- */
.circle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  margin: 0 auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.circle-card:hover,
.circle-card:focus {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.circle-card i {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.circle-card span {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  padding: 0 0.5rem;
}

/* Círculos grandes (landing, 3 perfiles) */
.circle-lg {
  width: 180px;
  height: 180px;
}

/* Círculos pequeños (páginas de perfil, 8 items) */
.circle-sm {
  width: 130px;
  height: 130px;
  cursor: default;
}

.circle-sm i {
  font-size: 1.6rem;
}

.circle-sm span {
  font-size: 0.8rem;
}

.circle-interactive {
  cursor: pointer;
}

.popover {
  max-width: 260px;
}

/* --- Colores de los 3 perfiles en la landing --- */
.bg-paciente { background-color: #0d6efd; }
.bg-familia  { background-color: #198754; }
.bg-sanitarios { background-color: #fd7e14; }

/* --- Paletas de 8 tonos por sección (claro a oscuro) --- */
.theme-paciente .circle-sm:nth-child(8n+1) { background-color: #cfe2ff; color: #0a3678; }
.theme-paciente .circle-sm:nth-child(8n+2) { background-color: #9ec5fe; color: #0a3678; }
.theme-paciente .circle-sm:nth-child(8n+3) { background-color: #6ea8fe; }
.theme-paciente .circle-sm:nth-child(8n+4) { background-color: #3d8bfd; }
.theme-paciente .circle-sm:nth-child(8n+5) { background-color: #0d6efd; }
.theme-paciente .circle-sm:nth-child(8n+6) { background-color: #0b5ed7; }
.theme-paciente .circle-sm:nth-child(8n+7) { background-color: #0a58ca; }
.theme-paciente .circle-sm:nth-child(8n+8) { background-color: #084298; }

.theme-familia .circle-sm:nth-child(8n+1) { background-color: #d1e7dd; color: #0a3622; }
.theme-familia .circle-sm:nth-child(8n+2) { background-color: #a3cfbb; color: #0a3622; }
.theme-familia .circle-sm:nth-child(8n+3) { background-color: #75b798; }
.theme-familia .circle-sm:nth-child(8n+4) { background-color: #479f76; }
.theme-familia .circle-sm:nth-child(8n+5) { background-color: #198754; }
.theme-familia .circle-sm:nth-child(8n+6) { background-color: #157347; }
.theme-familia .circle-sm:nth-child(8n+7) { background-color: #146c43; }
.theme-familia .circle-sm:nth-child(8n+8) { background-color: #0f5132; }

.theme-sanitarios .circle-sm:nth-child(8n+1) { background-color: #ffe5d0; color: #7d3a05; }
.theme-sanitarios .circle-sm:nth-child(8n+2) { background-color: #fecba1; color: #7d3a05; }
.theme-sanitarios .circle-sm:nth-child(8n+3) { background-color: #feb272; }
.theme-sanitarios .circle-sm:nth-child(8n+4) { background-color: #fd9843; }
.theme-sanitarios .circle-sm:nth-child(8n+5) { background-color: #fd7e14; }
.theme-sanitarios .circle-sm:nth-child(8n+6) { background-color: #ca6510; }
.theme-sanitarios .circle-sm:nth-child(8n+7) { background-color: #a14d08; }
.theme-sanitarios .circle-sm:nth-child(8n+8) { background-color: #7d3a05; }

.profile-header {
  padding: 3rem 0 1rem;
}

.section-text {
  padding: 3rem 0;
}

.back-link {
  display: inline-block;
  margin: 1.5rem 0 0;
}