/* Hero “pill” */
.pill-hero .card-body {
  background: #fff;
  border-radius: 24px !important;
}

/* Botões “pill” da faixa de navegação */
.pill-btn.btn-light {
  border-radius: 999px;
  padding: 10px 22px;
  border: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  font-weight: 600;
}

/* Cards seções (os que vêm dos campos dinâmicos) */
.modal-clean .card {
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(30, 41, 59, 0.04);
}

/* Títulos das seções */
.modal-clean .fw-bold {
  color: #404040;
}

/* Inputs “chipados” */
.modal-clean input[type="date"],
.modal-clean .form-select,
.modal-clean .form-control {
  border-radius: 14px !important;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

/* Radio inline fica mais compacto */
.modal-clean .form-check-inline {
  margin-right: 12px;
}
/* card do cabeçalho */
.pill-card {
  background: #fff;
  border-radius: 16px;
}

/* grid base do header */
.hdr-bar .hdr-item { min-width: 210px; }

/* react-select (dcc.Dropdown) como pílula */
.pill-select .Select-control {
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  min-height: 42px;
}
.pill-select .Select-placeholder,
.pill-select .Select-value-label {
  font-weight: 600;
  color: #111827;
}
.pill-select .Select-input > input { height: 40px; }

/* input date como pílula */
.pill-date input {
  border-radius: 9999px !important;
  border: 1px solid #e5e7eb;
  height: 42px;
  padding: 8px 14px;
  font-weight: 600;
  color: #111827;
  background: #f9fafb;
}

/* chips de leitura */
.chip {
  display: inline-block;
  padding: 8px 14px;
  background: #eef2f7;
  border-radius: 9999px;
  font-size: .85rem;
  color: #4b5563;
  white-space: nowrap;
}

/* responsivo */
@media (max-width: 992px) {
  .hdr-bar .hdr-item { min-width: 180px; }
}