/** * HI CSelect — estilos del custom select institucional. * Acompaña a public/js/hi-cselect.js. El menú se monta en , así que estas * reglas deben estar disponibles globalmente (intranet y portal-empleo). */ .hi-cselect { position: relative; display: block; width: 100%; } .hi-cselect-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; /* = py-2.5 px-3: misma altura que los inputs del portal */ font-family: inherit; font-size: 1rem; /* text-base: igual al input "Nombre del puesto" */ line-height: 1.5rem; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 0.5rem; cursor: pointer; text-align: left; } .hi-cselect-trigger:focus { outline: none; border-color: #0b4c59; box-shadow: 0 0 0 2px rgba(11, 76, 89, 0.25); } .hi-cselect.is-disabled .hi-cselect-trigger { cursor: not-allowed; background: #f8fafc; color: #94a3b8; } .hi-cselect.is-placeholder .hi-cselect-label { color: #94a3b8; } .hi-cselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hi-cselect-arrow { flex: none; width: 1.1rem; height: 1.1rem; color: #0b4c59; transition: transform 0.15s ease; } .hi-cselect.open .hi-cselect-arrow { transform: rotate(180deg); } /* Menú (montado en , position: fixed vía JS) */ .hi-cselect-menu { position: fixed; z-index: 999999; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); max-height: 260px; overflow-y: auto; font-family: inherit; } .hi-cselect-option { padding: 0.5rem 0.625rem; border-radius: 0.375rem; cursor: pointer; color: #0f172a; font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap; } .hi-cselect-option.is-selected { font-weight: 600; background: #0b4c59; color: #fff; } .hi-cselect-option.is-disabled { color: #cbd5e1; cursor: default; } /* Hover / opción activa: teal institucional (esto es lo que el