/* Menús desplegables propios (ui/nice-select.js): oscuros, animados y con el estilo de Claudbar */
:root:not([data-theme="light"]) { color-scheme: dark; }
.ns { position: relative; display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; }
.ns-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
.ns-btn { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; max-width: 100%; text-align: left; cursor: pointer; padding-right: 34px !important; position: relative; font: inherit; }
.ns-btn::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .7; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.ns-btn[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.ns-btn[aria-expanded="true"] { border-color: #a78bfa !important; }
.ns-btn:disabled { opacity: .5; cursor: default; }
.ns-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.ns-list { position: fixed; z-index: 100000; max-height: 280px; max-width: min(360px, calc(100vw - 16px)); overflow-y: auto; padding: 5px;
  background: #1f1f2c; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top center; transition: opacity .16s ease, transform .2s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin; scrollbar-color: #3a3a4a transparent; }
.ns-list.up { transform-origin: bottom center; transform: translateY(6px) scale(.97); }
.ns-list.show { opacity: 1; transform: none; }
.ns-opt { position: relative; padding: 9px 30px 9px 12px; border-radius: 8px; color: #e4e4ee; font-size: 13.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s ease; }
.ns-opt:hover { background: rgba(255,255,255,.06); }
.ns-opt[aria-selected="true"] { background: #3b3786; color: #fff; }
.ns-opt[aria-selected="true"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 5px; height: 9px; border-right: 2px solid #d4ceff; border-bottom: 2px solid #d4ceff; transform: translateY(-60%) rotate(45deg); }
.ns-opt[aria-disabled="true"] { opacity: .4; cursor: default; }

:root[data-theme="light"] .ns-list { background: #fff; border-color: #e3e3ea; box-shadow: 0 14px 34px rgba(20,20,50,.15); }
:root[data-theme="light"] .ns-opt { color: #1f1f2b; }
:root[data-theme="light"] .ns-opt:hover { background: #f1f1f6; }
:root[data-theme="light"] .ns-opt[aria-selected="true"] { background: #ece9ff; color: #3b2fa0; }
@media (prefers-reduced-motion: reduce) { .ns-list, .ns-btn::after { transition: none; } }

/* Respaldo si algún menú queda sin cambiar: opciones oscuras y legibles */
:root:not([data-theme="light"]) option { background: #1f1f2c; color: #e4e4ee; }

/* Mismo ancho que tenía el menú original */
.ns > .ns-btn { width: 100% !important; max-width: 100% !important; }
html body .opt-card .opt-row .ns { width: 240px; max-width: 45%; flex: 0 0 auto; }
@media (max-width: 820px) { html body .opt-card .opt-row .ns { width: 100%; max-width: 100%; } }
html body .opt-card .opt-row .ns > .ns-btn, html body .opt-main .ns > .ns-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }