/* Estilos específicos da página Salas de Vacinação */
#area-mapa-pontos-salas #mapa-pontos-testagem { min-height: 520px; }

/* select2 removed for this page; kept global styles elsewhere */

.lista-salas-component {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Gap-Padding-Md, 16px);
  flex: 1 0 0;
  border-radius: var(--Corner-radius-MD, 8px);
  border: 1px solid var(--divider-dark-divider-dark-primary, #E6E6E6);
  position: relative; /* para centralizar loader overlay */
}

.salas-list-header {
  display: flex;
  align-items: flex-start;
  gap: var(--Gap-Padding-XXXS, 8px);
  align-self: stretch;
  justify-content: flex-start !important; /* override bootstrap center */
}

.salas-list-title {
  color: var(--Typography-Dark-typo-dark_primary, #008380);
  text-align: center;
  font-family: var(--Font-family-Family, Jost);
  font-size: var(--Font-size-XXL, 22px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-height-6XL, 32px);
}
.salas-total-chip { align-self: center; }
.salas-total-chip .salasLabel { margin-left: 4px; }

.salas-municipios-list {
  display: flex;
  /* height: 672px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  margin-top: 0;
}

/* Loader visível sem absolute (flex) */
.loading-lista-salas {
  display: none; /* padrão: escondido */
  align-self: center; /* centraliza horizontalmente no container flex */
  margin: 12px 0;
}

/* Enquanto carrega, esconda lista e paginação dentro do componente e mostre loader */
.lista-salas-component.loading .salas-municipios-list,
.lista-salas-component.loading .pagination-salas-list {
  display: none;
}
.lista-salas-component.loading .loading-lista-salas {
  display: inline-flex;
}
.sala-municipio-bloco {
  display: flex;
  padding: var(--Gap-Padding-Md, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Gap-Padding-XXXS, 8px);
  align-self: stretch;
  border-radius: var(--Corner-radius-MD, 8px);
  background: var(--Container-container_light-2, #F9F9F9);
}
.sala-municipio-bloco__header {
  display: flex;
  align-items: center;
  gap: var(--Gap-Padding-XXXS, 8px);
  align-self: stretch;
  margin-bottom: 4px;
}
.sala-municipio-bloco__header h4 {
  color: var(--Typography-Dark-typo-dark_tertiary, #262626);
  text-align: center;
  font-family: var(--Font-family-Family, Jost);
  font-size: var(--Font-size-XL, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-height-5XL, 28px);
}
.sala-municipio-chip {
  display: flex;
  height: 24px;
  padding: var(--Gap-Padding-5XS, 4px) var(--Gap-Padding-XS, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--Gap-Padding-5XS, 4px);
  border-radius: var(--Corner-radius-Circular, 9999px);
  background: var(--Disabled-disabled_background, rgba(235, 235, 235, 0.70));
}
.sala-municipio-bloco__cards {
  display: flex;
  padding: var(--Gap-Padding-XXXS, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Gap-Padding-XXXS, 8px);
  align-self: stretch;
  border-radius: var(--Corner-radius-MD, 8px);
}

.sala-card { 
  background: transparent; 
  border: 0; 
  border-radius: 8px; 
  padding: 8px; 
  width: 100%; 
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sala-card__title { font-size: 16px; font-weight: 600; }
.sala-card__unidade { color: var(--fc-dark, #1C1B1F); }
.sala-card__line { display: flex; align-items: center; gap: 8px; color: var(--fc-dark, #1C1B1F); }

/* Tag de tipo de gestão (SUS / Privado) no card */
.sala-card__tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
}
.sala-card__tag.tag-sus { background: #008380; }
.sala-card__tag.tag-privado { background: #6c757d; }

/* Divider entre salas */
.sala-municipio-bloco__cards .sala-card + .sala-card {
  border-top: 1px solid var(--Dividers-Dark-divider-dark_primary, #E6E6E6);
  padding-top: 12px;
  margin-top: 4px;
}

.pagination-salas-list { margin-top: 16px; }

/* Keep vertical stacking on all sizes */

/* ===== Responsividade ===== */
/* Large (>= 992px): alinhar alturas, lista com scroll para acompanhar o mapa */
@media (min-width: 992px) {
  #area-mapa-pontos-salas #mapa-pontos-testagem { min-height: 720px; }
  /* Mantém a lista visualmente no mesmo bloco de altura do mapa */
  .salas-municipios-list {
    max-height: 720px;
    overflow-y: auto;
    padding-right: 2px; /* espaço p/ scroll sem jogar layout */
  }
}

/* Medium e abaixo (< 992px): reduzir alturas e espaçamentos */
@media (max-width: 991.98px) {
  #area-mapa-pontos-salas #mapa-pontos-testagem { min-height: 420px; }
  .lista-salas-component { padding: 16px; }
  .salas-list-header { justify-content: center !important; gap: 8px; }
  .salas-list-title { font-size: 20px; line-height: 28px; text-align: center; }
  .salas-total-chip { margin-top: 2px; }
  .sala-municipio-bloco { padding: 12px; }
  .sala-municipio-bloco__cards { padding: 8px; }
  .sala-card__title { font-size: 15px; }
  .sala-card__line { gap: 6px; }
}

/* Small e abaixo (< 576px): otimizações adicionais para telas muito pequenas */
@media (max-width: 575.98px) {
  #area-mapa-pontos-salas #mapa-pontos-testagem { min-height: 340px; }
  .salas-list-title { font-size: 18px; line-height: 26px; }
  .salas-municipios-list { gap: 12px; }
  .pagination-salas-list { flex-direction: column; align-items: center; gap: 8px; }
  .pagination-salas-numbs { justify-content: center; }
}

/* Skeleton loading styles */
.sala-municipio-bloco.skeleton { background: transparent; border-radius: 8px; padding: 12px; }
.skeleton-title { width: 40%; height: 20px; background: linear-gradient(90deg, #eee, #f5f5f5, #eee); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 6px; }
.skeleton-chip { width: 60px; height: 20px; background: #eee; border-radius: 12px; animation: shimmer 1.2s linear infinite; }
.skeleton-card { padding: 8px 0; }
.skeleton-line { height: 14px; background: #eee; border-radius: 6px; margin: 8px 0; width: 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-line.short { width: 60%; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}