/* Controles customizados — fundação única dos três produtos.
   Contrato: docs/ui-premium/CONTRACT.md. Consome tokens.css; não introduz
   paleta, fonte, raio ou sombra novos, e não é um segundo design system:
   substitui a pintura nativa de checkbox, radio, select, combobox, date e
   time picker pelas mesmas variáveis que app.css já usa.

   Degradação: o controle nativo continua no DOM e é a fonte da verdade do
   formulário. O visual customizado só assume quando o JS marca o wrapper com
   [data-ui-ready]; sem JS (ou com JS quebrado) o usuário vê o nativo intacto.

   Glifos: Hugeicons Stroke Rounded, mesmas paths de web/shared/static/icons/,
   embutidas como mask-image porque são geradas em runtime pelo JS e não
   passam pelo helper {{ icon }} do servidor. */

:root {
  --ctl-box: 22px;            /* caixa do checkbox/radio */
  --ctl-dot: 9px;             /* miolo do radio */
  --ctl-pop-max: 17rem;       /* altura rolável do popover */
  --ctl-opt-h: 40px;          /* opção no desktop */
  --ctl-opt-h-touch: 52px;    /* opção no sheet mobile */
  --ctl-day: 40px;            /* célula de dia no desktop */
  --ctl-z-pop: 40;
  --ctl-z-sheet: 60;

  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'/%3E%3C/svg%3E");
  --ico-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12H18' stroke='%23000' stroke-linecap='round' stroke-width='2.4'/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 13.002C18 13.002 13.5811 19.0019 12 19.002C10.4188 19.002 6 13.002 6 13.002' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
  --ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 2V6M8 2V6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M3 10H21' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 8V12L14 14' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  --ico-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
  --ico-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
  --ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6.00081 17.9992M17.9992 18L6 6.00085' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17 17L21 21' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Glifo por máscara: herda currentColor, então acompanha o estado do controle. */
.ui-ico {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--ui-ico) center / contain no-repeat;
  mask: var(--ui-ico) center / contain no-repeat;
}
.ui-ico-check { --ui-ico: var(--ico-check); }
.ui-ico-chevron { --ui-ico: var(--ico-chevron); }
.ui-ico-calendar { --ui-ico: var(--ico-calendar); }
.ui-ico-clock { --ui-ico: var(--ico-clock); }
.ui-ico-prev { --ui-ico: var(--ico-prev); }
.ui-ico-next { --ui-ico: var(--ico-next); }
.ui-ico-close { --ui-ico: var(--ico-close); }
.ui-ico-search { --ui-ico: var(--ico-search); }

/* --- Checkbox e radio ------------------------------------------------------ */
/* Sem wrapper novo: o próprio input é repintado, então continua sendo o alvo
   de clique, de label[for], de :checked e de preenchimento automático. */

input[type="checkbox"]:not([data-native]),
input[type="radio"]:not([data-native]) {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: var(--ctl-box);
  height: var(--ctl-box);
  min-height: 0;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  background: var(--brand-white);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard),
    box-shadow var(--dur-state) var(--ease-standard);
}
input[type="checkbox"]:not([data-native]) { border-radius: 7px; }
input[type="radio"]:not([data-native]) { border-radius: var(--radius-pill); }

input[type="checkbox"]:not([data-native]):hover,
input[type="radio"]:not([data-native]):hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-2);
}
/* Pressão: o controle afunda de leve, como os botões de app.css. */
input[type="checkbox"]:not([data-native]):active,
input[type="radio"]:not([data-native]):active { transform: scale(0.92); }

/* A marca: máscara Hugeicons no checkbox, miolo sólido no radio. */
input[type="checkbox"]:not([data-native])::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--brand-white);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
  transform: scale(0.4);
  opacity: 0;
  transition: transform var(--dur-state) var(--ease-editorial), opacity var(--dur-press) linear;
}
input[type="checkbox"]:not([data-native]):indeterminate::after {
  -webkit-mask-image: var(--ico-minus);
  mask-image: var(--ico-minus);
}
input[type="radio"]:not([data-native])::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ctl-dot);
  height: var(--ctl-dot);
  border-radius: var(--radius-pill);
  background: var(--brand-orange);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition: transform var(--dur-state) var(--ease-editorial), opacity var(--dur-press) linear;
}
input[type="checkbox"]:not([data-native]):checked,
input[type="checkbox"]:not([data-native]):indeterminate {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
input[type="radio"]:not([data-native]):checked {
  border-color: var(--brand-blue);
  border-width: 2px;
}
input[type="checkbox"]:not([data-native]):checked::after,
input[type="checkbox"]:not([data-native]):indeterminate::after,
input[type="radio"]:not([data-native]):checked::after {
  opacity: 1;
  transform: scale(1);
}
input[type="radio"]:not([data-native]):checked::after { transform: translate(-50%, -50%) scale(1); }

input[type="checkbox"]:not([data-native]):disabled,
input[type="radio"]:not([data-native]):disabled {
  border-style: solid;
  border-color: var(--border-subtle);
  background: var(--surface-sunken);
  box-shadow: none;
  cursor: not-allowed;
}
input[type="checkbox"]:not([data-native]):disabled:checked { background: var(--ink-soft); border-color: var(--ink-soft); }
input[type="radio"]:not([data-native]):disabled::after { background: var(--ink-soft); }

/* --- Grupo de escolha: label vira cartão selecionável --------------------- */
/* Aplica-se ao markup que já existe (`<label><input type=radio> Texto</label>`),
   sem reescrever template. O alvo de toque passa de 22px para a linha inteira.
   `label:not([class])` por construção: quem já tem classe (`.choice` do
   Portfólio) tem cartão próprio e não deve ser sobrescrito daqui. */

label:not([class]):has(> input[type="radio"]:not([data-native])),
label:not([class]):has(> input[type="checkbox"]:not([data-native])) {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-min-height);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--brand-white);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard),
    box-shadow var(--dur-state) var(--ease-standard);
}
label:not([class]):has(> input[type="radio"]:not([data-native])):hover,
label:not([class]):has(> input[type="checkbox"]:not([data-native])):hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}
/* Selecionado: faixa bege quente e borda azul — o mesmo par de app.css. */
label:not([class]):has(> input[type="radio"]:not([data-native]):checked),
label:not([class]):has(> input[type="checkbox"]:not([data-native]):checked) {
  border-color: var(--brand-blue);
  background: var(--surface-warm);
  font-weight: 600;
}
/* Anel no cartão, não no rótulo de campo de texto: o markup
   `<label>E-mail <input></label>` é comum nos três produtos. */
label:not([class]):has(> input[type="radio"]:not([data-native]):focus-visible),
label:not([class]):has(> input[type="checkbox"]:not([data-native]):focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
label:not([class]):has(> input[type="radio"]:not([data-native]):focus-visible) > input,
label:not([class]):has(> input[type="checkbox"]:not([data-native]):focus-visible) > input {
  outline: none;
}
label:not([class]):has(> input:disabled) { color: var(--ink-soft); background: var(--surface-sunken); cursor: not-allowed; }

/* Fieldset de escolha: empilha os cartões em grade em vez de linha corrida. */
fieldset:has(> label > input[type="radio"]),
fieldset:has(> p > label > input[type="radio"]) {
  display: grid;
  gap: var(--space-2);
  border-radius: var(--radius-card);
}
fieldset:has(> label > input[type="radio"]) > label { width: 100%; }
fieldset:has(> p > label > input[type="radio"]) > p { margin: 0; }
@media (min-width: 640px) {
  fieldset:has(> label > input[type="radio"]) { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* Cartões de escolha já existentes no Portfólio continuam, só herdam a caixa. */
.choice, .library-pick .pick-row { cursor: pointer; }

/* --- Select, combobox, datepicker e timepicker ---------------------------- */
/* Wrapper criado pelo JS em volta do controle nativo. O nativo fica por cima
   do gatilho, invisível e sem eventos de ponteiro: continua submetendo,
   validando, respondendo a label[for] e a automação, sem abrir o menu do SO. */

.ui-field { position: relative; display: block; width: 100%; }
.ui-field[data-ui-ready] > select,
.ui-field[data-ui-ready] > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  outline: none;
  pointer-events: none;
}

.ui-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-min-height);
  padding: var(--control-padding-y) var(--control-padding-x);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  background: var(--brand-white);
  color: var(--brand-blue);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  /* O gatilho costuma ficar dentro do <label>, que em alguns produtos é um
     rótulo em caixa alta e espaçado (`.filters label` no Financeiro). Valor de
     campo não é rótulo: a tipografia volta ao normal aqui. */
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-state) var(--ease-standard),
    box-shadow var(--dur-state) var(--ease-standard);
}
.ui-trigger:hover { border-color: var(--ink-soft); background: var(--brand-white); }
.ui-trigger[aria-expanded="true"] { border-color: var(--brand-blue); box-shadow: var(--shadow-2); }
.ui-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-trigger[data-empty="true"] .ui-trigger-label { color: var(--ink-soft); }
.ui-trigger .ui-ico { color: var(--ink-muted); transition: transform var(--dur-state) var(--ease-standard); }
.ui-trigger[aria-expanded="true"] .ui-ico-chevron { transform: rotate(180deg); color: var(--brand-blue); }
.ui-field:has(select:disabled) .ui-trigger,
.ui-field:has(input:disabled) .ui-trigger {
  border-style: dashed;
  background: var(--surface-sunken);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.ui-field:has([aria-invalid="true"]) .ui-trigger { border-color: var(--brand-orange); border-width: 2px; }

/* Painel: desktop ancora no campo; mobile vira sheet (mais abaixo). */
.ui-pop {
  position: absolute;
  z-index: var(--ctl-z-pop);
  top: calc(100% + var(--space-2));
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  max-width: min(22rem, 92vw);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--brand-white);
  box-shadow: var(--shadow-3);
  /* Mesma razão do gatilho: o painel é filho do label em vários formulários. */
  font-size: var(--text-base);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  transform-origin: top center;
  animation: ui-pop-in var(--dur-overlay) var(--ease-standard);
}
.ui-pop[data-drop="up"] { top: auto; bottom: calc(100% + var(--space-2)); transform-origin: bottom center; }
.ui-pop[data-align="right"] { left: auto; right: 0; }
@keyframes ui-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.ui-pop-head { display: none; }
.ui-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.ui-search .ui-ico { color: var(--ink-soft); }
.ui-search input {
  min-height: 32px;
  width: 100%;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  font-size: var(--text-sm);
}
.ui-search input:focus { outline: none; }

.ui-list { overflow-y: auto; max-height: var(--ctl-pop-max); padding: var(--space-2); margin: 0; list-style: none; }
.ui-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--ctl-opt-h);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-badge);
  color: var(--brand-blue);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--dur-press) linear;
}
.ui-opt-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-opt .ui-ico { opacity: 0; color: var(--brand-orange); transition: opacity var(--dur-press) linear; }
.ui-opt[aria-selected="true"] { background: var(--accent-soft); font-weight: 600; }
.ui-opt[aria-selected="true"] .ui-ico { opacity: 1; }
/* Navegação por teclado e ponteiro compartilham um só realce. */
.ui-opt[data-active="true"] { background: var(--surface-sunken); }
.ui-opt[aria-selected="true"][data-active="true"] { background: var(--surface-warm); }
.ui-opt[aria-disabled="true"] { color: var(--ink-soft); cursor: not-allowed; }
.ui-empty { padding: var(--space-4) var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); text-align: center; }

/* --- Calendário ----------------------------------------------------------- */
.ui-cal { padding: var(--space-3); }
.ui-cal-nav { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ui-cal-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.ui-icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-badge);
  background: var(--brand-white);
  color: var(--brand-blue);
  cursor: pointer;
  transition: background-color var(--dur-press) linear, border-color var(--dur-state) var(--ease-standard);
}
.ui-icon-btn:hover { background: var(--surface-warm); border-color: var(--border-strong); }
.ui-cal-week, .ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-cal-week span {
  padding-bottom: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.ui-day {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: var(--ctl-day);
  height: var(--ctl-day);
  padding: 0;
  border: 0;
  border-radius: var(--radius-badge);
  background: none;
  color: var(--brand-blue);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.ui-day:hover { background: var(--surface-sunken); }
.ui-day[data-outside="true"] { color: var(--ink-soft); opacity: 0.55; }
/* Hoje marca com o laranja da marca; selecionado preenche com o azul. */
.ui-day[data-today="true"] { box-shadow: inset 0 -2px 0 var(--brand-orange); font-weight: 600; }
.ui-day[aria-selected="true"] {
  background: var(--brand-blue);
  color: var(--brand-white);
  font-weight: 600;
  box-shadow: none;
}
.ui-day:disabled { color: var(--ink-soft); opacity: 0.4; cursor: not-allowed; background: none; }
.ui-cal-foot {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.ui-cal-foot button {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-badge);
  background: var(--brand-white);
  color: var(--brand-blue);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.ui-cal-foot button:hover { background: var(--surface-warm); border-color: var(--border-strong); }

/* --- Timepicker: duas colunas roláveis, hora e minuto --------------------- */
.ui-time { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-2); }
.ui-time .ui-list { max-height: 13rem; padding: 0 var(--space-1); scroll-snap-type: y proximity; }
.ui-time .ui-opt { justify-content: center; min-height: 36px; font-variant-numeric: tabular-nums; scroll-snap-align: center; }
.ui-time-col { min-width: 0; }
.ui-time-col > p {
  margin: 0 0 var(--space-1);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* --- Mobile: o popover vira bottom sheet ---------------------------------- */
/* Comportamento próprio, não só largura: o painel sai do fluxo do campo,
   ancora na base da tela, ganha alvo de 52px, cabeçalho com título e fechar,
   e respeita a área segura do aparelho. */

@media (max-width: 639px) {
  .ui-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ctl-z-sheet);
    background: color-mix(in srgb, var(--brand-blue) 42%, transparent);
    animation: ui-fade-in var(--dur-overlay) var(--ease-standard);
  }
  .ui-pop[data-sheet="true"] {
    position: fixed;
    z-index: calc(var(--ctl-z-sheet) + 1);
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    max-height: 86vh;
    border: 0;
    border-radius: var(--radius-media) var(--radius-media) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: ui-sheet-in var(--dur-overlay) var(--ease-standard);
  }
  .ui-pop[data-sheet="true"] .ui-pop-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
  }
  /* Puxador: afirma que o painel é arrastável/descartável. */
  .ui-pop[data-sheet="true"] .ui-pop-head::before {
    content: "";
    position: absolute;
    top: var(--space-2);
    left: 50%;
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-subtle);
    transform: translateX(-50%);
  }
  .ui-pop-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
  }
  .ui-pop[data-sheet="true"] .ui-list { max-height: min(58vh, 28rem); padding: var(--space-2) var(--space-3) var(--space-4); }
  .ui-pop[data-sheet="true"] .ui-opt { min-height: var(--ctl-opt-h-touch); font-size: 1rem; }
  .ui-pop[data-sheet="true"] .ui-search { padding: var(--space-3) var(--space-4); }
  .ui-pop[data-sheet="true"] .ui-search input { min-height: var(--control-min-height); }
  .ui-pop[data-sheet="true"] .ui-cal { padding: var(--space-4); }
  .ui-pop[data-sheet="true"] .ui-day { height: 48px; }
  .ui-pop[data-sheet="true"] .ui-cal-foot button,
  .ui-pop[data-sheet="true"] .ui-icon-btn { min-height: var(--control-min-height); }
  .ui-pop[data-sheet="true"] .ui-icon-btn { width: 44px; height: 44px; }
  .ui-pop[data-sheet="true"] .ui-time .ui-list { max-height: 44vh; }
  .ui-pop[data-sheet="true"] .ui-time .ui-opt { min-height: var(--control-min-height); }
  /* Enquanto o sheet está aberto a página não rola atrás dele. */
  body[data-ui-sheet="open"] { overflow: hidden; }

  /* Cartões de escolha ficam em coluna, com alvo maior. */
  label:not([class]):has(> input[type="radio"]:not([data-native])),
  label:not([class]):has(> input[type="checkbox"]:not([data-native])) { padding: var(--space-4); font-size: 1rem; }
}
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-sheet-in {
  from { opacity: 0; transform: translateY(12%); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-pop, .ui-backdrop { animation: none; }
  .ui-trigger .ui-ico,
  input[type="checkbox"]:not([data-native])::after,
  input[type="radio"]:not([data-native])::after { transition: none; }
  input[type="checkbox"]:not([data-native]):active,
  input[type="radio"]:not([data-native]):active { transform: none; }
}