/* Seletor de período compartilhado (/periodo-presets.js): duas linhas de botões + personalizado. */
.pr-wrap { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.pr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-lbl { width: 64px; flex: none; }
.pr-custom-wrap { position: relative; }
.pr-custom.on { border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.pr-pop {
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 30;
  width: 240px;
  box-sizing: border-box;
  padding: 14px 16px 16px;
  gap: 10px;
}
.pr-pop-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pr-msg { font-size: 12px; color: #a13544; min-height: 0; }
.pr-msg:empty { display: none; }

.pr-range { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-note { font-size: 11.5px; color: var(--muted); padding-left: 74px; }
.pr-note[hidden] { display: none; }

@media (max-width: 640px) {
  .pr-lbl { width: 100%; }
  .pr-note { padding-left: 0; }
  .pr-pop { left: auto; right: 0; }
}