/* ═══════════════════════════════════════════════════════════════════════ VM-SELECT — el desplegable propio de VIMEDIA Fase 25 · 2026-09-09 Por qué existe: el menú del `` real NUNCA se va: queda en el DOM como fuente de la verdad, se le escribe el valor y se le dispara `change`. Así los formularios, la validación y el envío siguen sin enterarse de nada. ═══════════════════════════════════════════════════════════════════════ */ .vmsel { position: relative; display: inline-flex; } /* El select real: sigue ahí, invisible pero enfocable por el navegador si algo falla. No se usa `display:none` para no sacarlo del formulario. */ .vmsel > select.vmsel__real { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; } /* El disparador copia la forma del control que reemplaza; el tamaño lo hereda del contenedor, no lo impone. */ .vmsel__btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 34px 0 12px; font: inherit; font-size: .88rem; color: var(--rl-p); background: #fff; border: 1px solid #e8e8ec; border-radius: 10px; cursor: pointer; text-align: left; position: relative; transition: border-color .18s cubic-bezier(.2,.8,.2,1); } .vmsel__btn:hover { border-color: #cfc7e8; } .vmsel__btn:focus-visible { outline: 2px solid var(--rl-s); outline-offset: 2px; } .vmsel__btn[aria-expanded="true"] { border-color: var(--rl-s); } .vmsel__val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vmsel__val--vacio { color: #64748b; } /* La flecha gira al abrir: es el único movimiento del control. */ .vmsel__chev { position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-right: 1.6px solid #64748b; border-bottom: 1.6px solid #64748b; transform: rotate(45deg) translateY(-2px); transition: transform .18s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .vmsel__btn[aria-expanded="true"] .vmsel__chev { transform: rotate(225deg) translateY(-2px); } /* ── El menú ──────────────────────────────────────────────────────────── Cuelga del , no del control: un ancestro con `overflow:hidden` lo recortaría, y varios de estos desplegables viven dentro de pastillas de búsqueda que lo tienen. Se ubica midiendo el botón, no con medidas escritas a mano. Vidrio oscuro, como el menú del login — pero MÁS CERRADO. Con el .34 del login, sobre estas pantallas claras el texto blanco quedaría ilegible. Medido: blanco sobre rgb(26,12,71) compuesto al .96 da 14.8 de contraste, muy por encima del 4.5 exigido. */ .vmsel__menu { position: absolute; z-index: 9999; margin: 0; padding: 6px; list-style: none; min-width: 180px; max-height: 300px; overflow-y: auto; background: rgba(var(--rl-p-rgb), .96); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(17,18,20,.55); color: #fff; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .vmsel__menu { background: rgba(var(--rl-p-rgb), .88); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); } } .vmsel__menu[hidden] { display: none !important; } /* el atributo pierde contra display */ .vmsel__opt { padding: 9px 12px; border-radius: 9px; font-size: .88rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .14s cubic-bezier(.2,.8,.2,1); } .vmsel__opt:hover, .vmsel__opt.is-activa { background: rgba(255,255,255,.12); } .vmsel__opt[aria-selected="true"] { font-weight: 600; } .vmsel__opt[aria-selected="true"]::after { content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--rl-s-luz); flex-shrink: 0; } /* Las opciones entran escalonadas, como en el login. Solo las primeras: en una lista de 22 departamentos el escalonado completo se vuelve espera. */ .vmsel__menu.is-abriendo .vmsel__opt { animation: vmselPieza .22s cubic-bezier(.2,.8,.2,1) both; } @keyframes vmselPieza { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .vmsel__menu.is-abriendo .vmsel__opt:nth-child(1) { animation-delay: 0s } .vmsel__menu.is-abriendo .vmsel__opt:nth-child(2) { animation-delay: .03s } .vmsel__menu.is-abriendo .vmsel__opt:nth-child(3) { animation-delay: .06s } .vmsel__menu.is-abriendo .vmsel__opt:nth-child(4) { animation-delay: .09s } .vmsel__menu.is-abriendo .vmsel__opt:nth-child(5) { animation-delay: .12s } @media (prefers-reduced-motion: reduce) { .vmsel__btn, .vmsel__chev, .vmsel__opt { transition: none; } .vmsel__menu.is-abriendo .vmsel__opt { animation: none; } }