/* ─────────────────────────────────────────────────────────────────────────
   Pickers de parâmetro do Report Builder (§54) — FONTE ÚNICA.

   Extraído de `app/static/style.css` em 2026-08-30 pra poder ser servido
   também na bolha do SabeTudo (que não carrega o style.css do app). O markup
   é igualmente único: `app/templates/partials/_report_param_runtime.html`
   ({% include %} no app, injeção server-side no `ui.html`).

   As cores viram canais (`R G B`) pra aceitar alpha em qualquer lugar. A
   paleta default é a ESCURA (pele do app); a bolha clara do SabeTudo
   redefine os mesmos tokens em `.sabe-cmp`, e nada mais precisa mudar.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --rp-accent-rgb: 56 189 248;
  --rp-accent-2-rgb: 14 165 233;
  --rp-accent-3-rgb: 125 211 252;
  --rp-accent-soft-rgb: 186 230 253;
  --rp-accent-deep-rgb: 12 74 110;
  --rp-accent-deep-2-rgb: 7 89 133;
  --rp-accent-btn-rgb: 3 105 161;
  --rp-accent-on-rgb: 240 249 255;
  --rp-text-rgb: 226 232 240;
  --rp-text-2-rgb: 203 213 225;
  --rp-text-strong-rgb: 255 255 255;
  --rp-muted-rgb: 148 163 184;
  --rp-muted-2-rgb: 100 116 139;
  --rp-border-soft-rgb: 71 85 105;
  --rp-border-rgb: 51 65 85;
  --rp-surface-rgb: 30 41 59;
  --rp-sheet-rgb: 15 23 42;
  --rp-deep-rgb: 2 6 23;      /* fundo de campo/menu (combo, lista, inputs) */
  --rp-scrim-rgb: 2 6 23;     /* véu do calendário — NÃO é o fundo do campo */
  --rp-card-alpha: 0.6;       /* o card é translúcido no app; opaco na bolha */
  --rp-fs: 1;                 /* escala de fonte: a bolha do SabeTudo tem a dela */
  --rp-danger-rgb: 225 29 72;
  --rp-danger-2-rgb: 244 63 94;
  --rp-danger-3-rgb: 251 113 133;
  --rp-danger-bg-rgb: 136 19 55;
  --rp-danger-on-rgb: 255 228 230;
  --rp-ok-rgb: 34 197 94;
}

/* Lookup de parâmetro do Report Builder — "carregando…" animado (não texto morto).
   Doc: docs/REPORT-PARAMETERS-DESIGN.md (Runner F1). */
@keyframes paramLookupSpin {
  to { transform: rotate(360deg); }
}
@keyframes paramLookupDots {
  0%, 20% { content: ''; }
  40%     { content: '.'; }
  60%     { content: '..'; }
  80%, 100% { content: '...'; }
}
@keyframes paramLookupBar {
  0%   { opacity: .35; }
  50%  { opacity: .9; }
  100% { opacity: .35; }
}
.param-lookup-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: calc(10px * var(--rp-fs, 1));
  color: rgb(var(--rp-accent-rgb)); /* sky-400 */
}
.param-lookup-loading__spin {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  border: 2px solid rgb(var(--rp-accent-btn-rgb) / 0.45); /* sky-700 */
  border-top-color: rgb(var(--rp-accent-rgb));
  animation: paramLookupSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.param-lookup-loading__dots::after {
  display: inline-block;
  width: 1.15em;
  text-align: left;
  content: '';
  animation: paramLookupDots 1.2s steps(1, end) infinite;
}
.param-lookup-skel {
  height: 1.25rem;
  border-radius: 0.25rem;
  background: rgb(var(--rp-surface-rgb)); /* slate-800 */
  animation: paramLookupBar 1.1s ease-in-out infinite;
}
.param-lookup-skel:nth-child(2) { width: 82%; animation-delay: .12s; }
.param-lookup-skel:nth-child(3) { width: 64%; animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .param-lookup-loading__spin,
  .param-lookup-loading__dots::after,
  .param-lookup-skel { animation: none; }
}

/* Ficha compacta de parâmetros (§54, 2026-08-20).
   Barra de filtros: 2 por linha; lista só no campo aberto; número curto. */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  /* end (user 2026-08-30h): células de altura diferente (data tem chips em
     cima) alinham os CONTROLES na mesma linha de base, não os labels */
  align-items: end;
  overflow: visible;
}
@media (max-width: 767px) {
  .rp-grid { grid-template-columns: 1fr; }
}
.rp-cell {
  min-width: 0;
  overflow: visible;
}
.rp-field:has(.rp-combo.is-open) {
  z-index: 41;
}
.rp-pair-cell {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.rp-pair-cell .rp-field { flex: 1 1 0; min-width: 0; }
.rp-pair-dash {
  color: rgb(var(--rp-border-soft-rgb));
  font-size: calc(11px * var(--rp-fs, 1));
  padding-bottom: 0.45rem;
  flex: 0 0 auto;
}
.rp-field { position: relative; min-width: 0; }
.rp-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: calc(11px * var(--rp-fs, 1));
  font-weight: 600;
  color: rgb(var(--rp-text-rgb));
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.rp-req {
  font-size: calc(9px * var(--rp-fs, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0.35rem;
  border-radius: 0.2rem;
  background: rgb(var(--rp-danger-bg-rgb) / 0.85);
  color: rgb(var(--rp-danger-on-rgb));
}
.rp-combo {
  position: relative;
  width: 100%;
  min-height: 1.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.4rem 0.2rem 0.45rem;
  background: rgb(var(--rp-deep-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.35rem;
  text-align: left;
  cursor: pointer;
  color: rgb(var(--rp-text-rgb));
  font-size: calc(11px * var(--rp-fs, 1));
}
.rp-combo:hover { border-color: rgb(var(--rp-accent-2-rgb) / 0.6); }
.rp-combo:focus-visible {
  outline: 2px solid rgb(var(--rp-accent-rgb));
  outline-offset: 1px;
}
.rp-combo.is-open { border-color: rgb(var(--rp-accent-2-rgb)); }
.rp-combo.is-missing {
  border-color: rgb(var(--rp-danger-rgb));
  box-shadow: 0 0 0 1px rgb(var(--rp-danger-rgb) / 0.45);
}
/* Lista ainda não abastecida: o clique fica no próprio controle.
   pointer-events:none no combo inteiro deixaria o clique cair no campo de baixo. */
.rp-combo.is-loading { cursor: progress; }
.rp-combo.is-loading .rp-combo-body,
.rp-combo.is-loading .rp-combo-caret { visibility: hidden; pointer-events: none; }
.rp-select-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: calc(11px * var(--rp-fs, 1));
  color: rgb(var(--rp-accent-rgb));
  pointer-events: none;
}
.rp-combo-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.rp-combo-caret {
  color: rgb(var(--rp-muted-rgb));
  flex: 0 0 auto;
  font-size: calc(9px * var(--rp-fs, 1));
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
}
.rp-combo-caret:focus-visible {
  outline: 2px solid rgb(var(--rp-accent-rgb));
  outline-offset: 1px;
  border-radius: 0.2rem;
}
.rp-combo.is-search { cursor: text; }
.rp-combo-input {
  flex: 1 1 7rem;
  min-width: 5.5rem;
  border: 0;
  background: transparent;
  color: rgb(var(--rp-text-rgb));
  font: inherit;
  outline: none;
  padding: 0;
  line-height: 1.4;
}
.rp-combo-input::placeholder { color: rgb(var(--rp-muted-2-rgb)); }
.rp-placeholder { color: rgb(var(--rp-muted-2-rgb)); }
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0 0.2rem 0 0.4rem;
  background: rgb(var(--rp-accent-deep-rgb) / 0.55);
  border: 1px solid rgb(var(--rp-accent-deep-2-rgb));
  border-radius: 999px;
  color: rgb(var(--rp-accent-soft-rgb));
  font-size: calc(10px * var(--rp-fs, 1));
  line-height: 1.4;
}
.rp-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.rp-chip-x {
  border: 0;
  background: transparent;
  color: rgb(var(--rp-accent-3-rgb));
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: calc(12px * var(--rp-fs, 1));
  line-height: 1;
}
.rp-chip-x:hover { color: rgb(var(--rp-text-strong-rgb)); }
.rp-more { color: rgb(var(--rp-accent-rgb)); font-size: calc(10px * var(--rp-fs, 1)); }
.rp-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  min-width: 16rem;
  max-height: 16rem;
  display: flex;
  flex-direction: column;
  background: rgb(var(--rp-deep-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.4rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}
.rp-menu-search {
  margin: 0.35rem;
  padding: 0.3rem 0.5rem;
  background: rgb(var(--rp-sheet-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.3rem;
  color: rgb(var(--rp-text-rgb));
  font-size: calc(11px * var(--rp-fs, 1));
}
.rp-menu-search:focus {
  outline: 1px solid rgb(var(--rp-accent-rgb));
  border-color: rgb(var(--rp-accent-2-rgb));
}
.rp-menu-list {
  overflow: auto;
  flex: 1 1 auto;
  border-top: 1px solid rgb(var(--rp-surface-rgb));
}
.rp-menu.is-busy .rp-menu-list {
  position: relative;
  min-height: 4.5rem;
  overflow: hidden;
}
.rp-menu-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: rgb(var(--rp-deep-rgb) / 0.82);
  color: rgb(var(--rp-accent-rgb));
  font-size: calc(11px * var(--rp-fs, 1));
}
.rp-opt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.3rem 0.55rem;
  font-size: calc(11px * var(--rp-fs, 1));
  color: rgb(var(--rp-text-2-rgb));
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.rp-opt:hover, .rp-opt.is-hi { background: rgb(var(--rp-surface-rgb) / 0.8); }
.rp-opt.is-on { color: rgb(var(--rp-accent-soft-rgb)); }
.rp-opt:disabled { cursor: not-allowed; opacity: .4; }
.rp-check { width: 1rem; flex: 0 0 auto; color: rgb(var(--rp-accent-3-rgb)); }
.rp-menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-top: 1px solid rgb(var(--rp-surface-rgb));
  font-size: calc(10px * var(--rp-fs, 1));
  color: rgb(var(--rp-accent-rgb));
}
.rp-menu-foot button {
  background: transparent;
  border: 0;
  color: rgb(var(--rp-muted-rgb));
  font-size: calc(10px * var(--rp-fs, 1));
  cursor: pointer;
}
.rp-menu-foot button:hover { color: rgb(var(--rp-text-rgb)); }
.rp-menu-foot button:disabled { opacity: .4; cursor: not-allowed; }
/* §338 — «Pronto» fecha a seleção múltipla; mesmo peso do «Pronto» do calendário. */
.rp-menu-foot .rp-done {
  margin-left: 0.5rem;
  background: rgb(var(--rp-accent-btn-rgb));
  color: rgb(var(--rp-accent-on-rgb));
  border-radius: 0.35rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
}
.rp-menu-foot .rp-done:hover { color: rgb(var(--rp-accent-on-rgb)); filter: brightness(1.08); }
.rp-num-input,
.rp-date-input,
.rp-text-input {
  background: rgb(var(--rp-deep-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.35rem;
  color: rgb(var(--rp-text-rgb));
  font-size: calc(12px * var(--rp-fs, 1));
  padding: 0.25rem 0.45rem;
  min-height: 1.85rem;
}
.rp-num-input:focus,
.rp-date-input:focus,
.rp-text-input:focus {
  outline: 2px solid rgb(var(--rp-accent-rgb));
  outline-offset: 1px;
}
.rp-num-input.is-missing,
.rp-date-input.is-missing { border-color: rgb(var(--rp-danger-rgb)); }
.rp-num-input {
  width: 7.5rem;
  max-width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rp-date-input {
  width: 8.2rem;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.rp-text-input { width: 100%; }
.rp-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.rp-chip-btn {
  padding: 0.15rem 0.4rem;
  font-size: calc(10px * var(--rp-fs, 1));
  border-radius: 0.25rem;
  background: rgb(var(--rp-surface-rgb));
  color: rgb(var(--rp-text-2-rgb));
  border: 0;
  cursor: pointer;
}
.rp-chip-btn:hover { background: rgb(var(--rp-accent-deep-rgb)); }
.rp-cal {
  padding: 0.2rem 0.4rem;
  background: rgb(var(--rp-surface-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: calc(12px * var(--rp-fs, 1));
}
.rp-cal:hover { background: rgb(var(--rp-accent-deep-rgb)); }
.rp-date-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Calendário de várias datas (§54, 2026-08-20). Overlay + sheet. */
.rp-cal-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgb(var(--rp-scrim-rgb) / 0.58);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.rp-cal-handle {
  width: 2.5rem;
  height: 0.28rem;
  border-radius: 9999px;
  background: rgb(var(--rp-border-soft-rgb));
  margin: 0.35rem auto 0.65rem;
}
.rp-cal-sheet {
  width: 100%;
  max-width: 26rem;
  background: rgb(var(--rp-sheet-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  padding: 0 0.9rem 1.1rem;
  color: rgb(var(--rp-text-rgb));
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.45);
  max-height: min(92vh, 40rem);
  overflow: auto;
  touch-action: pan-y;
}
.rp-cal-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.rp-cal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.7rem;
}
.rp-cal-nav {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.4rem;
  background: rgb(var(--rp-surface-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  color: rgb(var(--rp-text-rgb));
  font-size: calc(1.05rem * var(--rp-fs, 1));
  cursor: pointer;
  flex: 0 0 auto;
}
.rp-cal-nav:hover, .rp-cal-nav:focus-visible {
  background: rgb(var(--rp-accent-deep-rgb));
  outline: 2px solid rgb(var(--rp-accent-rgb));
  outline-offset: 1px;
}
.rp-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: calc(10px * var(--rp-fs, 1));
  letter-spacing: 0.08em;
  color: rgb(var(--rp-muted-rgb));
  margin-bottom: 0.2rem;
}
.rp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  user-select: none;
  touch-action: none;
}
.rp-cal-day {
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: rgb(var(--rp-text-rgb));
  font-size: calc(13px * var(--rp-fs, 1));
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  position: relative;
}
.rp-cal-day.is-out { color: rgb(var(--rp-border-soft-rgb)); }
.rp-cal-day.is-today { box-shadow: inset 0 0 0 1px rgb(var(--rp-accent-rgb) / 0.7); }
.rp-cal-day.is-focus { outline: 2px solid rgb(var(--rp-accent-rgb)); outline-offset: -2px; z-index: 1; }
.rp-cal-day.is-on { color: rgb(var(--rp-sheet-rgb)); font-weight: 650; }
.rp-cal-day.is-single { background: rgb(var(--rp-accent-rgb)); border-radius: 9999px; margin: 0.2rem; }
.rp-cal-day.is-start {
  background: rgb(var(--rp-accent-rgb));
  border-radius: 9999px 0 0 9999px;
  margin: 0.2rem 0;
}
.rp-cal-day.is-end {
  background: rgb(var(--rp-accent-rgb));
  border-radius: 0 9999px 9999px 0;
  margin: 0.2rem 0;
}
.rp-cal-day.is-mid {
  background: rgb(var(--rp-accent-2-rgb) / 0.38);
  color: rgb(var(--rp-accent-on-rgb));
  margin: 0.2rem 0;
}
/* Semana quebra o recorte: arredonda só os miolos na borda da grade. */
.rp-cal-day.is-mid:nth-child(7n+1) {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rp-cal-day.is-mid:nth-child(7n) {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rp-cal-day.is-preview.is-mid { background: rgb(var(--rp-accent-2-rgb) / 0.22); }
.rp-cal-day.is-drag { background: rgb(var(--rp-accent-rgb) / 0.45); color: rgb(var(--rp-sheet-rgb)); }
.rp-cal-hint {
  margin: 0.55rem 0 0.35rem;
  font-size: calc(11px * var(--rp-fs, 1));
  color: rgb(var(--rp-muted-rgb));
  line-height: 1.35;
}
.rp-cal-type {
  width: 100%;
  background: rgb(var(--rp-deep-rgb));
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.35rem;
  color: rgb(var(--rp-text-rgb));
  font-size: calc(12px * var(--rp-fs, 1));
  font-variant-numeric: tabular-nums;
  padding: 0.4rem 0.5rem;
  min-height: 2.25rem;
}
.rp-cal-type:focus {
  outline: 2px solid rgb(var(--rp-accent-rgb));
  outline-offset: 1px;
}
.rp-cal-type::placeholder { color: rgb(var(--rp-muted-2-rgb)); }
.rp-cal-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  font-size: calc(11px * var(--rp-fs, 1));
  color: rgb(var(--rp-muted-rgb));
}
.rp-cal-summary { flex: 1 1 auto; min-width: 0; }
.rp-cal-foot button {
  background: transparent;
  border: 0;
  color: rgb(var(--rp-muted-rgb));
  cursor: pointer;
  font-size: calc(11px * var(--rp-fs, 1));
  padding: 0.35rem 0.45rem;
  /* botão NUNCA redimensiona/quebra palavra ao vivo (user 2026-08-31):
     resumo longo espremia "limpar"→"limp ar" e "Pronto"→"Pron to" */
  flex: 0 0 auto;
  white-space: nowrap;
}
.rp-cal-foot button:hover { color: rgb(var(--rp-text-rgb)); }
/* "＋ juntar período" (2026-10-02): escolher um período TROCA o marcado; somar
   outro recorte é pedido explícito. Ligado = contorno de acento. */
.rp-cal-foot { flex-wrap: wrap; }
.rp-cal-join { border-radius: 0.35rem; }
.rp-cal-foot .rp-cal-join.is-on {
  color: rgb(var(--rp-text-rgb));
  box-shadow: inset 0 0 0 1px rgb(var(--rp-accent-btn-rgb));
}
.rp-cal-done {
  background: rgb(var(--rp-accent-btn-rgb)) !important;
  color: rgb(var(--rp-accent-on-rgb)) !important;
  border-radius: 0.35rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem !important;
}
/* Dois calendários + clique-clique (2026-09-01). Título vira botão (salto de
   meses), slots Início/Fim estilo hotelaria, painéis lado a lado em tela larga. */
.rp-cal-titles {
  flex: 1 1 auto;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}
.rp-cal-title {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: calc(0.92rem * var(--rp-fs, 1));
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0.4rem;
  padding: 0.3rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-cal-title:hover, .rp-cal-title:focus-visible,
.rp-cal-title[aria-expanded="true"] {
  border-color: rgb(var(--rp-border-rgb));
  background: rgb(var(--rp-surface-rgb));
  outline: none;
}
.rp-cal-slots {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
}
.rp-cal-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.45rem;
  background: rgb(var(--rp-deep-rgb));
  cursor: text;
}
.rp-cal-slot.is-active {
  border-color: rgb(var(--rp-accent-rgb));
  box-shadow: 0 0 0 1px rgb(var(--rp-accent-rgb) / 0.55);
}
.rp-cal-slot-k {
  font-size: calc(10px * var(--rp-fs, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--rp-muted-rgb));
}
.rp-cal-slot input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgb(var(--rp-text-rgb));
  font-size: calc(13px * var(--rp-fs, 1));
  font-variant-numeric: tabular-nums;
  outline: none;
}
.rp-cal-slot input::placeholder { color: rgb(var(--rp-muted-2-rgb)); }
.rp-cal-slot-arrow {
  align-self: center;
  color: rgb(var(--rp-muted-rgb));
  flex: 0 0 auto;
}
.rp-cal-panels {
  display: grid;
  grid-template-columns: repeat(var(--rp-cal-cols, 1), minmax(0, 1fr));
  gap: 1.1rem;
}
.rp-cal-panel { min-width: 0; }
/* Em 2 painéis, dia de outro mês fica invisível (evita 31/08 duplicado). */
.rp-cal-sheet.is-wide .rp-cal-day.is-out { visibility: hidden; pointer-events: none; }
.rp-cal-day.is-anchor {
  background: rgb(var(--rp-accent-rgb));
  color: rgb(var(--rp-sheet-rgb));
  border-radius: 9999px;
  margin: 0.2rem;
  font-weight: 650;
}
.rp-cal-day.is-anchor.is-start { border-radius: 9999px 0 0 9999px; margin: 0.2rem 0; }
.rp-cal-months-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.rp-cal-months-year {
  font-weight: 650;
  font-size: calc(1rem * var(--rp-fs, 1));
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: center;
}
.rp-cal-months-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}
.rp-cal-month {
  min-height: 2.75rem;
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.45rem;
  background: rgb(var(--rp-surface-rgb));
  color: rgb(var(--rp-text-rgb));
  cursor: pointer;
  font-size: calc(13px * var(--rp-fs, 1));
  text-transform: capitalize;
}
.rp-cal-month:hover, .rp-cal-month:focus-visible {
  outline: 2px solid rgb(var(--rp-accent-rgb));
  outline-offset: 1px;
}
.rp-cal-month.is-today { box-shadow: inset 0 0 0 1px rgb(var(--rp-accent-rgb) / 0.7); }
.rp-cal-month.is-on { background: rgb(var(--rp-accent-2-rgb) / 0.38); color: rgb(var(--rp-accent-on-rgb)); }
.rp-cal-month.is-current { background: rgb(var(--rp-accent-rgb)); color: rgb(var(--rp-sheet-rgb)); font-weight: 650; }
.rp-cal-hint kbd {
  font: inherit;
  padding: 0 0.3em;
  border: 1px solid rgb(var(--rp-border-rgb));
  border-radius: 0.25rem;
}
@media (min-width: 768px) {
  .rp-cal-overlay { align-items: center; padding: 1.5rem; }
  .rp-cal-sheet {
    border-radius: 0.75rem;
    border-bottom: 1px solid rgb(var(--rp-border-rgb));
    max-width: 24rem;
  }
  .rp-cal-sheet.is-wide { max-width: 46rem; }
  .rp-cal-handle { display: none; }
  .rp-cal-day { min-height: 2.35rem; }
  .rp-cal-nav { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-cal-overlay, .rp-cal-sheet { transition: none; }
}

/* Fonte: `button`/`input`/`select` NÃO herdam família do pai. Sem isto as opções
   do menu saíam em **Arial** enquanto o resto da tela usava Inter — invisível no
   app (o preflight do Tailwind cobria) e escancarado na bolha do SabeTudo. */
.rp-card button, .rp-card input, .rp-card select, .rp-card textarea,
.rp-cal-sheet button, .rp-cal-sheet input, .rp-cal-sheet select {
  font-family: inherit;
}

/* ── classes que substituíram utilitários Tailwind no partial (2026-08-30) ──
   O partial virou fonte única pras duas peles, e a bolha do SabeTudo não
   carrega Tailwind. Sem isto o layout do card sai cru lá. */
.rp-contents { display: contents; }
.rp-card {
  background: rgb(var(--rp-sheet-rgb) / var(--rp-card-alpha));
  border: 1px solid rgb(var(--rp-accent-deep-rgb) / 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.rp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rp-card-ttl { font-size: calc(0.75rem * var(--rp-fs, 1)); color: rgb(var(--rp-accent-3-rgb)); font-weight: 500; }
.rp-card-hint { font-size: calc(0.625rem * var(--rp-fs, 1)); color: rgb(var(--rp-muted-2-rgb)); }
.rp-datefield { display: flex; flex-direction: column; gap: 0.25rem; }
.rp-chip-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.rp-menu-msg { padding: 0.25rem 0.5rem; font-size: calc(0.625rem * var(--rp-fs, 1)); color: rgb(var(--rp-muted-rgb)); }
.rp-menu-msg.is-err { color: rgb(var(--rp-danger-3-rgb)); }
.rp-menu-msg.is-empty { padding: 0.375rem 0.5rem; color: rgb(var(--rp-muted-2-rgb)); }
.rp-more-btn {
  font-size: calc(0.625rem * var(--rp-fs, 1)); color: rgb(var(--rp-accent-rgb));
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: calc(0.625rem * var(--rp-fs, 1));
}
.rp-foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rp-btn {
  padding: 0.375rem 0.75rem; font-size: calc(0.75rem * var(--rp-fs, 1)); border-radius: 0.25rem; cursor: pointer;
  border: 0; font-family: inherit;
  background: rgb(var(--rp-surface-rgb)); color: rgb(var(--rp-text-2-rgb));
}
.rp-btn:hover:not(:disabled) { background: rgb(var(--rp-border-rgb)); }
.rp-btn.is-primary {
  padding: 0.375rem 1rem; font-weight: 500;
  background: rgb(var(--rp-accent-btn-rgb)); color: rgb(var(--rp-accent-on-rgb));
}
.rp-btn.is-primary:hover:not(:disabled) { background: rgb(var(--rp-accent-2-rgb)); }
.rp-btn:disabled {
  background: rgb(var(--rp-border-rgb)); color: rgb(var(--rp-muted-2-rgb)); cursor: not-allowed;
}
.rp-missing-note { font-size: calc(0.6875rem * var(--rp-fs, 1)); color: rgb(var(--rp-danger-3-rgb)); }
.rp-missing-list { font-weight: 500; }
.rp-remote-note {
  font-size: calc(0.625rem * var(--rp-fs, 1)); color: rgb(var(--rp-accent-rgb));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Cabeçalho do recorte — folha Play + bolha (docs/REPORT-LAYOUT-PLAY.md). */
.rpt-masthead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0.65rem 0 1.15rem;
  font-size: calc(11px * var(--rp-fs, 1));
  line-height: 1.4;
}
.rpt-mh-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
}
.rpt-masthead dt {
  margin: 0;
  font-weight: 600;
  opacity: 0.72;
}
.rpt-masthead dd {
  margin: 0;
  word-break: break-word;
}

/* O mount do combo fica fora de .rp-field nas telas sem Alpine. */
.rp-mount { position: relative; display: block; min-width: 0; }
.rp-mount:has(.rp-combo.is-open) { z-index: 41; }
.rp-combo.is-disabled { cursor: not-allowed; opacity: .8; }

/* Pele clara. O :root deste arquivo é a paleta escura do studio.
   Chat e iframes escolares põem .rp-skin no campo. Sem copiar layout. */
.rp-skin{
  --rp-accent-rgb: 15 118 110;
  --rp-accent-2-rgb: 13 148 136;
  --rp-accent-3-rgb: 15 118 110;
  --rp-accent-soft-rgb: 12 74 110;
  --rp-accent-deep-rgb: 178 216 210;
  --rp-accent-deep-2-rgb: 17 94 89;
  --rp-accent-btn-rgb: 15 118 110;
  --rp-accent-on-rgb: 255 255 255;
  --rp-text-rgb: 30 41 59;
  --rp-text-2-rgb: 30 41 59;
  --rp-text-strong-rgb: 15 23 42;
  --rp-muted-rgb: 71 85 105;
  --rp-muted-2-rgb: 100 116 139;
  --rp-border-soft-rgb: 203 213 225;
  --rp-border-rgb: 148 163 184;
  --rp-surface-rgb: 226 232 240;
  --rp-sheet-rgb: 255 255 255;
  --rp-deep-rgb: 255 255 255;
  --rp-scrim-rgb: 15 23 42;
  --rp-card-alpha: 1;
  --rp-fs: calc(var(--sabe-fs, 1) * 1.12);
  --rp-danger-rgb: 190 18 60;
  --rp-danger-2-rgb: 190 18 60;
  --rp-danger-3-rgb: 159 18 57;
  --rp-danger-bg-rgb: 254 226 226;
  --rp-danger-on-rgb: 127 29 29;
  --rp-ok-rgb: 21 128 61;
}
[data-theme="dark"] .rp-skin{
  --rp-deep-rgb: 31 51 43;
  --rp-text-rgb: 226 232 240;
  --rp-text-2-rgb: 203 213 225;
  --rp-text-strong-rgb: 255 255 255;
  --rp-muted-rgb: 148 163 184;
  --rp-muted-2-rgb: 120 135 155;
  --rp-border-soft-rgb: 71 85 105;
  --rp-border-rgb: 71 85 105;
  --rp-surface-rgb: 40 52 70;
  --rp-sheet-rgb: 24 33 48;
  --rp-accent-soft-rgb: 45 90 84;
  --rp-danger-bg-rgb: 90 25 35;
  --rp-danger-on-rgb: 255 228 230;
}

/* O chip da seleção acompanha o acento da marca (--tomate). O verde
   fixo da pele só vale quando a página não tem tema de cliente. */
.rp-skin .rp-chip {
  background: color-mix(in srgb, var(--tomate, #0f766e) 14%, var(--bubble, #fff));
  border-color: color-mix(in srgb, var(--tomate, #0f766e) 46%, transparent);
  color: var(--tomate-deep, var(--tomate, #0c4a6e));
}
.rp-skin .rp-chip-x { color: color-mix(in srgb, var(--tomate, #0f766e) 78%, transparent); }
.rp-skin .rp-chip-x:hover { color: var(--tomate-deep, var(--tomate, #0c4a6e)); }
.rp-skin .rp-select-loading,
.rp-skin .rp-more { color: var(--tomate, #0f766e); }
[data-theme="dark"] .rp-skin .rp-chip {
  background: color-mix(in srgb, var(--tomate, #3fb3a2) 26%, transparent);
  border-color: color-mix(in srgb, var(--tomate-soft, var(--tomate, #3fb3a2)) 55%, transparent);
  color: var(--tomate-soft, var(--paper, #e8f2ec));
}
[data-theme="dark"] .rp-skin .rp-chip-x {
  color: var(--tomate-soft, var(--tomate, #d1fae5));
}

/* §152 — picker cuja fonte não tem nenhum valor: cinza, com o motivo embaixo. */
.rp-combo.is-unavailable { opacity: .55; filter: grayscale(1); }
.rp-combo-why {
  margin-top: .25rem;
  font-size: calc(11px * var(--rp-fs, 1));
  line-height: 1.35;
  color: rgb(var(--rp-muted-rgb));
}