/* Desplegables y calendario propios: mismos tokens Simla en todos los temas. */
.app-control { position: relative; display: inline-grid; width: 100%; min-width: 0; vertical-align: middle; }
.app-control > .app-native-control { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; clip-path: inset(50%); overflow: hidden; pointer-events: none; }
.app-select-trigger { display: flex; align-items: center; gap: 16px; padding: 5px 12px 5px 16px; text-align: left; cursor: pointer; }
.app-control-value { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-select-chevron { flex: 0 0 24px; color: var(--muted); }
.app-select-trigger:focus-visible, .app-date-text:focus-visible, .app-calendar-trigger:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-color: var(--blue-500); }
.app-select-trigger:disabled { opacity: 1; background: var(--grey-200); color: var(--muted); cursor: default; }
.app-control-open { anchor-name: --simla-control-anchor; }
.app-control-popover[popover] { position: fixed; position-anchor: --simla-control-anchor; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; inset: auto; margin: 6px 0; padding: 6px; width: max(180px, anchor-size(width)); max-width: calc(100vw - 32px); max-height: min(320px, calc(100dvh - 32px)); overflow: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-8); font-family: var(--font-body); font-size: 14px; line-height: 20px; letter-spacing: -.15px; }
.app-control-popover::backdrop { background: transparent; }
.app-select-list[popover] { padding: 2px 0; }
.app-select-option { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 16px; text-align: left; border: 0; border-radius: 0; color: var(--ink); background: transparent; overflow-wrap: anywhere; font-size: 14px; line-height: 20px; letter-spacing: -.15px; }
.app-select-option::before { content: ''; position: absolute; z-index: -1; inset: 2px 4px; border: 1px solid transparent; border-radius: 6px; }
.app-select-option[aria-selected=true] { color: var(--blue-500); font-weight: 600; }
.app-select-option { padding-right: 40px; }
.app-select-option[aria-selected=true]::before { background: var(--blue-100); }
.app-select-option[aria-selected=true]::after { content: '✓'; position: absolute; right: 16px; font-weight: 700; }
.app-select-option.app-option-active::before { border-color: var(--blue-500); }
.app-select-option:disabled { color: var(--muted); opacity: .55; }
.app-select-group, .app-select-empty { padding: 8px 12px; color: var(--muted); font-size: 12px; line-height: 18px; }
.app-select-group { font-weight: 600; }
.app-date-text { padding-right: 48px; }
.app-calendar-trigger { position: absolute; top: 2px; right: 4px; display: grid; place-content: center; width: 32px; height: 32px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); }
.icon-calendar { --icon-mask: url('/static/assets/omnica-icons/calendar.svg'); }
.app-calendar-popover[popover] { width: min(284px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 16px; border: 0; }
:root[data-theme=dark] .app-calendar-popover { outline: 1px solid var(--line); }
.app-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.app-calendar-month { flex: 1; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--blue-500); text-transform: capitalize; }
.app-calendar-head .app-calendar-nav { width: 36px; min-width: 36px; padding: 5px; }
.app-calendar-glyph { position: relative; display: block; flex: none; width: 20px; height: 20px; color: var(--blue-500); }
.app-calendar-glyph img { display: block; position: absolute; inset: 0; max-width: none; }
.app-calendar-glyph-prev { --calendar-mask: url('/static/assets/omnica-icons/calendar-prev.svg'); }
.app-calendar-glyph-next { --calendar-mask: url('/static/assets/omnica-icons/calendar-next.svg'); }
.app-calendar-glyph-today { --calendar-mask: url('/static/assets/omnica-icons/calendar-today.svg'); position: absolute; width: 4px; height: 4px; left: calc(50% - 2px); bottom: 2px; color: inherit; }
.app-calendar-day:not([aria-pressed=true]) .app-calendar-glyph-today { color: var(--blue-500); }
@supports (mask-image: url('/static/assets/omnica-icons/calendar-prev.svg')) {
  :root[data-theme=dark] .app-calendar-glyph img, .app-calendar-glyph-today img { opacity: 0; }
  :root[data-theme=dark] .app-calendar-glyph::before, .app-calendar-glyph-today::before { content: ''; position: absolute; inset: 0; background: currentColor; mask-image: var(--calendar-mask); mask-mode: alpha; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
.app-calendar-weekdays, .app-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.app-calendar-weekdays { margin-bottom: 4px; text-align: center; color: var(--muted); font-size: 12px; line-height: 14px; }
.app-calendar-day { position: relative; display: block; width: 100%; min-height: 36px; padding: 8px 0; border: 1px solid transparent; border-radius: 4px; color: var(--ink); background: transparent; font-size: 14px; line-height: 18px; font-weight: 500; }
.app-calendar-day.app-day-outside { color: var(--muted); }
.app-calendar-day[aria-current=date] { border-color: var(--blue-500); }
.app-calendar-day[aria-pressed=true] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.app-calendar-day:disabled { color: var(--muted); opacity: .4; cursor: default; }
.app-calendar-day:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.app-calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.app-control-error { display: block; padding-top: 6px; color: var(--red-700); font-size: 12px; line-height: 18px; letter-spacing: 0; }
.app-control-invalid .app-select-trigger, .app-control-invalid .app-date-text { border-color: var(--red-700); }
.pagination .app-control { width: auto; min-width: 82px; }
.pagination .app-select-trigger { width: 100%; padding: 3px 8px 3px 12px; gap: 12px; min-height: 36px; }
@media (hover: hover) {
  .app-select-option:hover:not(:disabled):not([aria-selected=true])::before { background: var(--soft); border-color: var(--grey-600); }
  .app-calendar-day:hover:not(:disabled):not([aria-pressed=true]), .app-calendar-trigger:hover:not(:disabled) { background: var(--soft); }
}
@supports not (position-anchor: --simla-control-anchor) {
  .app-control-popover[popover] { inset: auto 16px 16px; width: min(480px, calc(100vw - 32px)); margin: 0 auto; }
  .app-calendar-popover[popover] { width: min(284px, calc(100vw - 32px)); }
}
@media (max-width: 375px) {
  .app-calendar-popover[popover] { padding: 16px; }
}
@media (pointer: coarse) {
  .app-select-trigger, .app-date-text { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
  .app-calendar-trigger { top: 0; width: 44px; height: 44px; }
  .app-date-text { padding-right: 56px; }
  .app-select-option { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .app-calendar-head .app-calendar-nav { width: 44px; min-width: 44px; min-height: 44px; }
  .app-calendar-day { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
}