/* Font sizes customizados */
.fs-7 {
  font-size: 0.875rem !important; /* ~14px se root for 16px */
}

.fs-8 {
  font-size: 0.75rem !important; /* ~12px */
}

.fs-9 {
  font-size: 0.625rem !important; /* ~10px */
}

/* Font weights customizados */
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }

/* Reset básico para html e body ocuparem 100% da altura */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Fonte Montserrat e estilo base */
body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* Main configurado com flexbox para preencher altura disponível */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem; /* espaçamento interno */
  max-width: 600px; /* largura máxima para desktops */
  width: 100%; /* largura total até o máximo */
  box-sizing: border-box;
  margin: 0 auto; /* centralizar horizontalmente */
}

/* Container que lista plantões - flex 1 para ocupar o espaço sobrando */
#plantoes {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  margin-top: 1rem;
}

/* Remove estilos de listas, se existirem */
ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

/* Tornar o corpo flex para garantir o main crescer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* RESPONSIVIDADE */

/* Para telas pequenas (celulares) */
@media (max-width: 576px) {
  main {
    padding: 0.5rem;
    max-width: 100%;
  }

  /* Ajustar fontes para serem um pouco menores em telas pequenas */
  .fs-7 {
    font-size: 0.8rem !important; /* ~13px */
  }
  .fs-8 {
    font-size: 0.7rem !important; /* ~11px */
  }
  .fs-9 {
    font-size: 0.55rem !important; /* ~9px */
  }

  /* Botões e inputs maiores e com margem */
  input.form-control,
  .btn {
    font-size: 1rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* Para telas médias (tablets) */
@media (min-width: 577px) and (max-width: 992px) {
  main {
    max-width: 540px;
  }
}