@layer components { /* =========================================================================== erp-select.css — Desplegable propio del ERP (reemplaza al nativo no se puede estilizar por dentro: el navegador dibuja la lista con su propio aspecto (fondo azul plano, sin bordes redondeados, sin sombra). Este componente dibuja la lista con HTML para que combine con el resto del ERP. COMO FUNCIONA (importante) -------------------------- El y dispara su evento "change". Consecuencias: - Los formularios se envian igual (mismo name / value). El PHP no cambia. - El JavaScript que ya escuchaba ese select sigue funcionando. - Si el JS falla o no carga, el usuario ve el select nativo y todo opera. COMO SE USA ----------- Basta agregar la clase js-erp-select. El resto es automatico. COLORES: todo cuelga de --erp-primary y de las variables de superficie (--surface, --text, --border), asi que sigue al color primario y al modo oscuro sin tocar nada aqui. =========================================================================== */ /* --------------------------------------------------------------------------- 1. El select nativo queda oculto pero presente (accesible para el form) --------------------------------------------------------------------------- */ .erp-select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 2. Contenedor + boton disparador --------------------------------------------------------------------------- */ .erp-select { /* Altura: se toma del token del ERP (--control-min-h), que cambia segun la densidad de interfaz definida en . Asi el desplegable mide siempre lo mismo que los inputs de al lado, y si algun dia se cambia la densidad, todo se mueve junto. NO poner un numero fijo aqui. */ --es-h: var(--control-min-h, 36px); /* Radio: si la pantalla define --radius-input (ventas, cotizaciones lo hacen en 8px), se usa ese para que el desplegable no se vea mas redondeado que los inputs de al lado. Si no, 10px. */ --es-radius: var(--radius-input, 10px); --es-border: var(--border-soft, #e2e8f0); --es-bg: var(--surface, #fff); --es-ink: var(--text, #1e293b); --es-muted: var(--muted, #94a3b8); position: relative; display: block; width: 100%; } /* El boton hereda las clases del select original (ver erp-select.js), asi que AQUI solo va la disposicion. El aspecto -- altura, borde, radio, tipografia -- lo pone la pantalla, y por eso el desplegable siempre mide y se ve igual que los inputs que tiene al lado. */ .erp-select-trigger { display: flex; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box; font-family: inherit; text-align: left; cursor: pointer; /* .form-select trae la flecha nativa como imagen de fondo: se quita porque el componente dibuja la suya en SVG (si no, se verian dos). */ background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Solo si el en un .erp-select de ancho completo, el boton de al lado se iba a la linea siguiente (le pasaba al candado de "Vendedor" en Nueva venta). Aqui el contenedor se comporta como lo haria el propio campo: ocupa el espacio sobrante y deja al boton a su derecha. --------------------------------------------------------------------------- */ .input-group > .erp-select { flex: 1 1 auto; width: 1%; min-width: 0; } /* Esquinas unidas: el boton va pegado, sin doble borde redondeado. Las paginas ya traen reglas como "#formVenta .input-group > .form-select", pero exigen que el campo sea HIJO DIRECTO del grupo; como el componente lo envuelve, dejan de alcanzarlo. Por eso la union se define aqui de forma explicita: se cuadran las esquinas del lado que se juntan y se solapa el borde 1px, igual que hace Bootstrap. */ .input-group > .erp-select:not(:last-child) .erp-select-trigger { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .erp-select:not(:first-child) .erp-select-trigger { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Lo que va inmediatamente despues del desplegable se pega a el */ .input-group > .erp-select:not(:last-child) + .btn, .input-group > .erp-select:not(:last-child) + .input-group-text, .input-group > .erp-select:not(:last-child) + button { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } /* Cuando el campo esta bloqueado, el boton pegado toma su mismo tono. Aunque las esquinas ya esten unidas, un campo gris junto a un boton blanco se lee como dos cajas distintas; igualando el fondo se percibe como una sola pieza con el candado al final. El icono se mantiene con color propio para que siga viendose como algo accionable. */ .input-group > .erp-select.is-disabled + .btn, .input-group > .erp-select.is-disabled + button { background-color: var(--surface-3, #eef3f9); border-color: var(--border-soft, #e6edf6); color: var(--text, #1e293b); } .input-group > .erp-select.is-disabled + .btn:hover, .input-group > .erp-select.is-disabled + button:hover { background-color: var(--surface-2, #e6ecf4); } /* Y lo que va inmediatamente antes */ .input-group > *:not(:last-child) + .erp-select .erp-select-trigger { margin-left: -1px; } /* Mismo criterio para el input-group propio del sistema de formularios */ .cf-input-group > .erp-select { flex: 1 1 auto; width: 1%; min-width: 0; } .cf-input-group > .erp-select:not(:last-child) .erp-select-trigger { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } /* --------------------------------------------------------------------------- 3. Panel de opciones position: fixed para que NO lo recorte ningun contenedor con overflow:hidden (tarjetas, tablas). El JS calcula la posicion. --------------------------------------------------------------------------- */ .erp-select-panel { position: fixed; z-index: 1080; /* por encima de modales de Bootstrap (1055) */ min-width: 180px; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--border-soft, #e6eaef); border-radius: 14px; background: var(--surface, #fff); box-shadow: 0 16px 40px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .06); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .13s ease, transform .13s ease; } html[data-theme="dark"] .erp-select-panel { box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); } .erp-select-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Cuando abre hacia arriba, la animacion viene desde abajo */ .erp-select-panel.opens-up { transform: translateY(4px); } .erp-select-panel.opens-up.is-open { transform: translateY(0); } /* Barra de scroll discreta */ .erp-select-panel::-webkit-scrollbar { width: 10px; } .erp-select-panel::-webkit-scrollbar-track { background: transparent; } .erp-select-panel::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border: 3px solid var(--surface, #fff); border-radius: 999px; } /* --------------------------------------------------------------------------- 4. Opciones --------------------------------------------------------------------------- */ .erp-select-option { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.65rem; border-radius: 9px; font-size: 0.85rem; color: var(--es-ink); cursor: pointer; user-select: none; transition: background .1s, color .1s; } .erp-select-option + .erp-select-option { margin-top: 2px; } /* Resaltado por teclado o mouse (un solo estado visual: no confunde) */ .erp-select-option.is-active { background: var(--surface-3, #f1f5f9); } html[data-theme="dark"] .erp-select-option.is-active { background: rgba(148,163,184,.14); } /* Opcion elegida */ .erp-select-option.is-selected { background: var(--erp-primary-soft); color: var(--erp-primary); font-weight: 600; } .erp-select-option.is-selected.is-active { background: var(--erp-primary-soft); filter: brightness(0.97); } html[data-theme="dark"] .erp-select-option.is-selected.is-active { filter: brightness(1.25); } /* Check de la opcion elegida */ .erp-select-check { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0; color: var(--erp-primary); } .erp-select-option.is-selected .erp-select-check { opacity: 1; } .erp-select-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Opcion deshabilitada */ .erp-select-option.is-disabled { color: var(--es-muted); cursor: not-allowed; background: transparent; } /* Separador de */ .erp-select-group { padding: 0.5rem 0.65rem 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--es-muted); } .erp-select-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border-soft, #eef1f6); padding-top: 0.55rem; } /* --------------------------------------------------------------------------- 5. Buscador interno (solo si la lista es larga) --------------------------------------------------------------------------- */ .erp-select-search-wrap { position: relative; padding: 2px 2px 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border-soft, #eef1f6); } .erp-select-search { width: 100%; height: 32px; box-sizing: border-box; padding: 0 0.6rem 0 1.9rem; border: 1px solid var(--border-soft, #e2e8f0); border-radius: 8px; background: var(--surface, #fff); color: var(--es-ink); font-size: 0.82rem; font-family: inherit; } .erp-select-search:focus { outline: none; border-color: var(--erp-primary); box-shadow: 0 0 0 3px var(--erp-primary-ring); } .erp-select-search-wrap > svg { position: absolute; left: 0.6rem; top: calc(50% - 3px); transform: translateY(-50%); width: 13px; height: 13px; color: var(--es-muted); pointer-events: none; } /* Sin resultados */ .erp-select-empty { padding: 0.75rem 0.65rem; text-align: center; font-size: 0.8rem; color: var(--es-muted); } /* --------------------------------------------------------------------------- 6. Accesibilidad: respetar "reducir movimiento" --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .erp-select-panel, .erp-select-arrow, .erp-select-option { transition: none; } } }