/* onnix-v2 — Forms & buttons reskin (Sneat/OnnixConnect look) Scope: .onnix-v2 (class on ) NO cambia markup, solo piel visual sobre clases Bootstrap 4 / CoreUI existentes. */ /* 1. Botones base */ .onnix-v2 .btn { border-radius: 8px; font-weight: 600; font-size: 0.875rem; padding: 0.55rem 1.1rem; transition: opacity .15s, background-color .15s, border-color .15s; } /* 2. Botón primario / default */ .onnix-v2 .btn-primary, .onnix-v2 .btn-default { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .onnix-v2 .btn-primary:hover, .onnix-v2 .btn-default:hover { opacity: 0.92; } /* 3. Botón danger */ .onnix-v2 .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; } /* 4. Botón success */ .onnix-v2 .btn-success { background: var(--success) !important; border-color: var(--success) !important; } /* 5. Botón outline-secondary / secondary */ .onnix-v2 .btn-outline-secondary, .onnix-v2 .btn-secondary { background: transparent !important; color: var(--text-body) !important; border: 1.5px solid var(--border-color) !important; } .onnix-v2 .btn-outline-secondary:hover, .onnix-v2 .btn-secondary:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--bg-elevated) !important; } /* 6. Fix de foco pegado */ .onnix-v2 .btn:focus, .onnix-v2 .btn:focus:active { outline: 0; box-shadow: none; } .onnix-v2 .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-shadow); } /* 7. Inputs — !important en border: Sneat/core fijan #d9dee3 o transparent y en dark el token viejo (= bg-elevated) dejaba el borde invisible. */ .onnix-v2 .form-control, .onnix-v2 .form-select, .onnix-v2 select.form-control, .onnix-v2 textarea.form-control { background: var(--bg-elevated); border: 1px solid var(--input-border) !important; border-radius: 8px; color: var(--text-body); font-size: 0.875rem; padding: 0.55rem 0.75rem; } .onnix-v2 .form-control:focus, .onnix-v2 .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-shadow); background: var(--bg-surface); } /* 8. Labels */ .onnix-v2 label, .onnix-v2 .form-label { font-size: 0.85rem; font-weight: 600; color: var(--text-label); } /* 9. Select2 — solo piel visual, no toca el JS */ .onnix-v2 .select2-container--default .select2-selection--single { background: var(--bg-elevated); border: 1px solid var(--input-border) !important; border-radius: 8px; height: calc(2.25rem + 2px); } .onnix-v2 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(2.25rem + 2px); color: var(--text-body); } .onnix-v2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(2.25rem + 2px); } /* 9.1. Select2 multiselect (roles/UDN en admin/users, etc.) — markup distinto del single (chips "select2-selection__choice"), no estaba cubierto y quedaba con el blanco/gris por defecto del plugin encima del formulario oscuro. */ .onnix-v2 .select2-container--default .select2-selection--multiple { background: var(--bg-elevated); border: 1px solid var(--input-border) !important; border-radius: 8px; min-height: calc(2.25rem + 2px); } .onnix-v2 .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-shadow); } .onnix-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--primary-tint); border: 1px solid var(--primary-shadow); border-radius: 6px; color: var(--text-body); padding: 2px 6px; } .onnix-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--text-muted); margin-right: 4px; } .onnix-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--danger); } .onnix-v2 .select2-container--default .select2-search--inline .select2-search__field { background: transparent; color: var(--text-body); border: none; outline: none; box-shadow: none; } .onnix-v2 .select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--text-muted); } /* Dropdown de resultados (compartido single/multi) */ .onnix-v2 .select2-dropdown { background: var(--bg-elevated); border: 1px solid var(--input-border); color: var(--text-body); } .onnix-v2 .select2-search--dropdown .select2-search__field { background: var(--bg-surface); border: 1px solid var(--input-border); color: var(--text-body); } .onnix-v2 .select2-results__option { color: var(--text-body); } .onnix-v2 .select2-results__option--highlighted[aria-selected] { background: var(--primary) !important; color: #fff !important; } .onnix-v2 .select2-results__option[aria-selected="true"] { background: var(--primary-tint); } /* 9.5. Bootstrap-Select (selector de producto/UDN en grillas de comprobante) — piel visual, no toca el JS */ .onnix-v2 .bootstrap-select.form-control { padding: 0; border: none; background: transparent; } .onnix-v2 .bootstrap-select > .dropdown-toggle { background: var(--bg-elevated); border: 1px solid var(--input-border) !important; border-radius: 8px; color: var(--text-body); font-size: 0.875rem; padding: 0.55rem 0.75rem; box-shadow: none; } .onnix-v2 .bootstrap-select > .dropdown-toggle:focus, .onnix-v2 .bootstrap-select.open > .dropdown-toggle { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-shadow); outline: 0 !important; } .onnix-v2 .bootstrap-select .dropdown-menu { background: var(--bg-elevated); border: 1px solid var(--input-border); } .onnix-v2 .bootstrap-select .dropdown-menu li a { color: var(--text-body); } .onnix-v2 .bootstrap-select .dropdown-menu li.selected a, .onnix-v2 .bootstrap-select .dropdown-menu li a:hover { background: var(--primary-shadow); color: var(--text-body); } /* 10. Checkbox / radio */ .onnix-v2 .form-check-input { accent-color: var(--primary); } /* 10.1. Input group legacy (BS3 .input-group-addon en buscador cliente/producto del presupuesto) + .input-group-text BS5 */ .onnix-v2 .input-group-addon, .onnix-v2 .input-group-text { background: var(--bg-elevated); border: 1px solid var(--input-border) !important; color: var(--text-body); border-radius: 8px; } /* Input-group: el control y el addon deben compartir borde visible (no transparente / no mismo color que el fondo de la caja alert-secondary). */ .onnix-v2 .input-group > .form-control, .onnix-v2 .input-group > .form-select, .onnix-v2 .input-group > select.form-control { border: 1px solid var(--input-border) !important; } /* CKEditor 4/5 (presupuesto detalle, notas) — chrome claro de plugin */ .onnix-v2 .cke_chrome, .onnix-v2 .cke { border: 1px solid var(--input-border) !important; background: var(--bg-elevated) !important; } .onnix-v2 .cke_top, .onnix-v2 .cke_bottom { background: var(--bg-elevated) !important; border-color: var(--border-color) !important; } .onnix-v2 .cke_contents, .onnix-v2 .cke_wysiwyg_frame, .onnix-v2 .cke_wysiwyg_div { background: var(--bg-surface) !important; } .onnix-v2 .ck.ck-toolbar, .onnix-v2 .ck.ck-editor__main > .ck-editor__editable { border-color: var(--input-border) !important; background: var(--bg-elevated); } .onnix-v2 .ck.ck-editor__main > .ck-editor__editable { background: var(--bg-surface); color: var(--text-body); } /* 10.2. Selects nativos: options del SO/navegador suelen quedar claras */ .onnix-v2 select option { background: var(--bg-surface); color: var(--text-body); } /* 10.3. Readonly / disabled (nombre cliente, descripción producto, etc.) */ .onnix-v2 .form-control[readonly], .onnix-v2 .form-control:disabled, .onnix-v2 .form-select:disabled, .onnix-v2 select.form-control:disabled { background: var(--bg-page); color: var(--text-muted); opacity: 1; border-color: var(--input-border); } /* 10.4. bs-stepper (wizard presupuesto / producto). El HTML sigue en light-style aunque haya html.dark → .light-style .bs-stepper pinta #fff. Se re-skinnea con tokens; especificidad alta para ganar a light-style. */ .onnix-v2 .bs-stepper { background-color: transparent; box-shadow: none; } .onnix-v2 .bs-stepper .bs-stepper-header { border-bottom: 1px solid var(--border-color); } .onnix-v2 .bs-stepper .step-trigger { color: var(--text-muted); } .onnix-v2 .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title { color: var(--text-body); } .onnix-v2 .bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title { color: var(--text-heading); } .onnix-v2 .bs-stepper .bs-stepper-header .line, .onnix-v2 .bs-stepper .bs-stepper-line { color: var(--border-color); background-color: var(--border-color); } .onnix-v2 .bs-stepper .bs-stepper-header .line:before { background-color: var(--border-color); } .onnix-v2 .bs-stepper .bs-stepper-circle { background-color: var(--bg-elevated); color: var(--text-muted); } .onnix-v2 .bs-stepper .bs-stepper-header .step:not(.active) .bs-stepper-circle { background-color: var(--bg-elevated) !important; color: var(--text-muted) !important; } .onnix-v2 .bs-stepper .bs-stepper-header .step.active .bs-stepper-circle { background-color: var(--primary) !important; color: #fff !important; } .onnix-v2 .bs-stepper .bs-stepper-content { color: var(--text-body); } /* 10.5. btn-dark legacy en formularios (comentario presupuesto, etc.): en dark el negro puro choca; se alinea a superficie elevada + borde. */ html.dark .onnix-v2 .btn-dark { background: var(--bg-elevated) !important; border-color: var(--border-color) !important; color: var(--text-heading) !important; } /* 11. Responsive — botones a full width en footers/acciones de formulario en mobile */ @media (max-width: 480px) { .onnix-v2 .modal-footer .btn { width: 100%; } /* .form-actions no existe actualmente en las vistas; dejar regla por si se agrega a futuro */ .onnix-v2 .form-actions .btn { width: 100%; } }