`, o sea * un bloque, así que caía a una línea nueva debajo de la flecha en vez de al * lado. Alcanza con volverlo inline-block para que queden en la misma fila. * * NO usar `display:flex` en el ``: saca la celda del algoritmo de layout * de la tabla (deja de participar del cálculo de ancho de columna). Se probó * en vivo y da exactamente el mismo resultado visual que esto, sin ese riesgo. * * Regla GLOBAL: aplica a todas las DataTables responsive del proyecto. * ------------------------------------------------------------------------ */ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control > .dropdown { display: inline-block; vertical-align: middle; } table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before { vertical-align: middle; } /* ------------------------------------------------------------------------ * Select2 (buscador en selects de datos dinámicos): alinear su alto y tipografía * con los form-control/form-select compactos del proyecto. Regla GLOBAL. * * OJO — gotcha ya pisado una vez (24/07/2026): `public/css/style.css` (NexaDash) * define `.select2-selection__rendered { min-height: 2.813rem }` (~45px) en el * SPAN INTERNO, no en `.select2-selection--single`. Un override que sólo resetea * el contenedor externo (height/min-height/padding) NO alcanza: el hijo con * min-height grande sigue empujando al padre (height:auto) a ~52px. Cualquier * ajuste futuro de alto de Select2 tiene que resetear min-height en AMBOS * niveles (contenedor Y `.select2-selection__rendered`), si no vuelve a pasar. * ------------------------------------------------------------------------ */ .select2-container--default .select2-selection--single { height: auto; min-height: 0; padding: 0.375rem 0.85rem; font-size: 0.8125rem; line-height: 1.4; border: 1px solid #c9ced4; border-radius: 0.5rem; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: #28ACE3; box-shadow: 0 0 0 0.2rem rgba(40, 172, 227, 0.15); } .select2-container--default .select2-selection--single .select2-selection__rendered { min-height: 0; padding: 0; line-height: 1.4; color: inherit; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 4px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8a929b; } /* style.css (NexaDash) oculta el botón "x" de allowClear con display:none * global — se reactiva y se reposiciona a la izquierda de la flecha, que en * este override queda fija en right:4px (ver arriba). */ .select2-container--default .select2-selection--single .select2-selection__clear { display: inline-block; position: absolute; top: 50%; right: 22px; transform: translateY(-50%); margin: 0; font-size: 1rem; color: #8a929b; } .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: #495057; } .select2-container .select2-search--dropdown .select2-search__field { font-size: 0.8125rem; padding: 0.35rem 0.5rem; } .select2-container--default .select2-results__option { font-size: 0.8125rem; } /* El dropdown debe superar el z-index del modal de Bootstrap. */ .select2-container--open { z-index: 1060; } /* -------------------------------------------------------------------------- * Toastr — recupera sus colores propios (verde/rojo/celeste/naranja). * Bootstrap 5 también define un componente ".toast" (no relacionado) con la * misma especificidad; como carga después que toastr.min.css, su * background-color: var(--bs-toast-bg) le gana a .toast-success/.toast-error/ * etc. y todos los toasts terminaban con el mismo azul oscuro de marca en vez * de su color de estado. Se sube la especificidad con el ID del contenedor. * ------------------------------------------------------------------------ */ #toast-container > .toast-success { background-color: #51a351 !important; } #toast-container > .toast-error { background-color: #bd362f !important; } #toast-container > .toast-info { background-color: #2f96b4 !important; } #toast-container > .toast-warning { background-color: #f89406 !important; } /* -------------------------------------------------------------------------- * Spinner de carga en botones (window.AppBtn.loading, ver elements/btn-loading). * El helper reemplaza el HTML del botón por este spinner mientras dura la * llamada AJAX; `currentColor` hace que el spinner tome el color de texto que * ya tenía el botón (funciona igual para btn-primary, btn-outline-*, btn-light, etc.). * ------------------------------------------------------------------------ */ .btn-loading-spinner { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; border: 0.15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-loading-spin 0.75s linear infinite; } @keyframes btn-loading-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------------------------- * Select2 "catálogo editable" (spec 028): la fila fija "Crear X" usa * text-primary sobre fondo blanco, pero el resultado resaltado de Select2 * pinta el fondo con el mismo azul primario (_form-addons-select2.scss) — sin * esta regla el texto queda invisible (azul sobre azul) al recorrer el * dropdown con el teclado o el mouse. * ------------------------------------------------------------------------ */ .select2-results__option--highlighted .select2-resultado-crear { color: #fff !important; }