@import url("/__assets/9ec0d1edcc8442fd0754661019d164893460ba4e9808ba5d03d8b3b9dec385bd/css/selection-tokens.css");
/* Controles PRO optativos; misma semántica de selección que el recomendador. */
.ac-select { display: inline-flex; min-width: 0; }
.ac-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--qv-surface-border,#e3e9f0); border-radius: 11px; background: var(--card,#fff); color: var(--qv-select-ink); font: inherit; font-size:13px; font-weight:500; cursor: pointer; }
.ac-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-trigger:not(:disabled):hover { background:#f6f9fd; border-color:#c3d6e9; }
.ac-trigger[aria-expanded="true"]:not(:disabled) { background:#f6faff; border-color:var(--qv-surface-border,#e3e9f0); color:var(--brand); box-shadow:none; }
.ac-trigger:disabled { opacity: .5; cursor: default; }
.ac-chevron { width: 7px; height: 7px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); flex-shrink: 0; margin-top: -4px; }
/* Acabado del menú Orden del recomendador; la densidad sigue siendo optativa. */
.ac-popup { position: fixed; z-index: 10010; box-sizing:border-box; overflow-y: auto; padding: 12px; border: 1px solid var(--qv-surface-border,#e3e9f0); border-radius: 14px; background: var(--card,#fff); color:#45556e; font:500 13px/1.3 Inter,sans-serif; box-shadow:0 12px 36px #213a5c18,0 2px 6px #213a5c08; }
.ac-popup :is([role="option"],[role="menuitem"]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; min-height: 36px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ac-popup :is([role="option"],[role="menuitem"]):hover { background:var(--qv-option-hover); }
.ac-popup [aria-selected="true"],
.ac-popup [aria-selected="true"]:hover { background:var(--qv-selection-bg); color:var(--qv-selection-ink); }
.ac-select select[hidden] { display: none; }
.ac-date { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; }
.ac-date input { width: 10.5rem; }
.ac-calendar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--mut); cursor: pointer; }
.ac-calendar svg { width: 18px; height: 18px; }
.ac-trigger:focus-visible, .ac-calendar:focus-visible, .ac-popup button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Densidad optativa: el portal conserva la escala solicitada por su consumidor. */
.ac-popup[data-ac-density="compact"] { font-size: 13px; }
.ac-popup[data-ac-density="compact"] [role="option"] { min-height: 32px; padding: 6px 10px; }
@media (max-width:520px), (pointer: coarse) {
  .ac-popup :is([role="option"],[role="menuitem"]),.ac-popup[data-ac-density="compact"] [role="option"] { min-height: 44px; }
}

.ac-popup .ac-option-label { flex:1; min-width:0; }
.ac-popup :is([role="option"],[role="menuitem"]) > svg { width:16px; height:16px; flex:none; color:inherit; stroke-width:2; }
.ac-popup [role="menuitem"].is-danger { color:var(--err,#dc2626); }
.ac-popup [role="menuitem"].is-danger > svg { color:inherit; }

/* Selector de períodos compacto y compartido; sin campos editables. */
.pro-period-popup { width:288px; max-width:calc(100vw - 24px); padding:12px; overflow:auto; color:var(--ink,#0f172a); user-select:none; -webkit-user-select:none; }
.pp-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line,#e2e8f0); }
.pp-head h2 { margin:0; font-size:14px; font-weight:600; line-height:20px; }
.pro-period-popup .pp-close { display:grid; place-items:center; flex:none; width:28px; min-height:28px; border:0; border-radius:50%; background:var(--qv-neutral-surface,#f3f4f6); color:var(--mut,#475569); cursor:pointer; }
.pp-year-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pp-year-label { font-size:12px; font-weight:500; }
.pp-year-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:96px; min-height:32px; padding:5px 10px; border:1px solid var(--line,#e2e8f0); border-radius:10px; background:#fff; color:var(--pro-control-ink,#475569); font:500 13px/20px Inter,sans-serif; cursor:pointer; }
.pp-year-toggle:hover:not(:disabled),.pp-year-toggle[aria-expanded="true"] { background:var(--qv-neutral-surface,#f3f4f6); }
.pp-year-toggle:disabled { opacity:.5; cursor:default; }
.pp-year-menu { margin-top:12px; padding-top:8px; border-top:1px solid var(--line,#e2e8f0); }
.pp-year-list { max-height:192px; overflow:auto; overscroll-behavior:contain; padding:4px; border:1px solid var(--line,#e2e8f0); border-radius:10px; }
.pro-period-popup .pp-year-choice { min-height:32px; font-size:12px; }
.pp-status { margin:12px 0 0; font-size:12px; line-height:18px; color:var(--pro-control-ink,#475569); }
.pp-status:empty { display:none; }
.pp-options { margin-top:12px; padding-top:8px; border-top:1px solid var(--line,#e2e8f0); }
.pp-year-grid,.pp-month-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 6px; }
.pro-period-popup .pp-option { display:flex; align-items:center; justify-content:center; min-height:32px; padding:6px 2px; border:0; border-radius:8px; background:transparent; color:var(--pro-control-ink,#475569); font:500 12px/18px Inter,sans-serif; cursor:pointer; }
.pro-period-popup .pp-option:hover:not(:disabled) { background:var(--qv-neutral-surface,#f3f4f6); }
.pro-period-popup .pp-option[aria-pressed="true"],
.pro-period-popup .pp-option[aria-pressed="true"]:hover:not(:disabled) { background:var(--qv-selection-bg); color:var(--qv-selection-ink); }
.pro-period-popup .pp-option:disabled { opacity:.35; cursor:default; }
.pp-weeks { display:grid; gap:4px; border-top:1px solid var(--line,#e2e8f0); margin-top:8px; padding-top:8px; }
.pro-period-popup .pp-weeks .pp-option { justify-content:flex-start; padding-inline:8px; }
@media(max-width:900px),(pointer:coarse) { .pro-period-popup .pp-option,.pro-period-popup .pp-close,.pp-year-toggle,.pro-period-popup .pp-year-choice { min-height:44px; }.pro-period-popup .pp-close { width:44px; } }