/* Desplegable de plataformas (assets/selector.js) */
.sel-oculto { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.big-field.sel-on { z-index: 5; }
.big-field.sel-on .chev { z-index: 2; }

.sel-btn { display: flex; align-items: center; text-align: left; cursor: pointer; }
.sel-valor { display: flex; align-items: center; gap: 10px; min-width: 0; color: #6f6763; font-size: 16px; font-weight: 500; }
.big-field.tiene .sel-valor { color: var(--text); }
.sel-valor .svc-ico { width: 26px; height: 26px; font-size: 10px; border-radius: 7px; }
.big-field.tiene > svg:first-child { opacity: 0; }
.big-field.tiene .sel-btn { padding-left: 16px; }
.sel-btn.pop .sel-valor { animation: selpop .45s var(--spring); }
@keyframes selpop { 40% { transform: scale(1.06); } }

.big-field.abierto .sel-btn { border-color: var(--red); box-shadow: 0 0 0 4px rgba(227, 36, 27, .18); }
.big-field.abierto .chev { color: var(--red); transform: translateY(-50%) rotate(180deg); }
.big-field.falta .sel-btn { border-color: var(--red); animation: shake .4s var(--ease); }

/* Lista */
.sel-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  max-height: min(400px, 62vh); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(20, 20, 20, .97); border: 1px solid var(--border-2); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 59, 48, .08), 0 24px 50px -16px #000, 0 0 40px -18px rgba(227, 36, 27, .6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top center;
  transition: opacity .2s, transform .3s var(--spring), visibility 0s .3s;
}
.big-field.abierto .sel-lista { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .35s var(--spring), visibility 0s; }

.sel-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer;
  transition: background .15s;
}
.big-field.abierto .sel-item { animation: selin .4s var(--spring) both; animation-delay: calc(var(--i) * 40ms + 60ms); }
@keyframes selin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sel-item::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: var(--red); box-shadow: 0 0 10px var(--red); transform: scaleY(0); transition: transform .25s var(--spring);
}
.sel-item.activo { background: var(--hover); }
.sel-item.activo::before { transform: scaleY(1); }
.sel-item .svc-ico { transition: transform .3s var(--spring), box-shadow .3s; }
.sel-item.activo .svc-ico { transform: scale(1.1) rotate(-5deg); box-shadow: 0 6px 16px -6px #000; }
.sel-txt { flex: 1; min-width: 0; line-height: 1.25; }
.sel-txt b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.sel-txt small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--accent);
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--spring); }
.sel-item[aria-selected="true"] .sel-check { opacity: 1; transform: none; }
.sel-item[aria-selected="true"] .sel-txt b { color: var(--red); }

.sel-lista::-webkit-scrollbar { width: 8px; }
.sel-lista::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .sel-lista, .sel-item, .sel-item::before, .sel-check { transition: none; animation: none !important; }
}

/* La tarjeta del formulario no debe recortar la lista */
.pub-card { overflow: visible; z-index: 10; }  /* la lista abierta queda encima de los resultados */
.pub-card::before { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pub-card .progress { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }