/* =========================================================================
datatables-overrides.css
Overrides para DataTables 1.13 + Bootstrap 4.6 (post-upgrade desde
DT 1.10 / BS 4.0).
Cargado UNA sola vez desde application/views/includes/header.php
DESPUÉS del CSS de DT y BS para ganar la cascada.
Aplica a todas las vistas con `.tablaInterior` (todos los listados).
========================================================================= */
/* -------------------------------------------------------------------------
1) Fila de inputs de búsqueda en thead.
DT 1.13 subió el padding default de th; BS 4.6 además agrega
`.table th { padding: .75rem }`. Combinado con display:block en los
inputs deja la 2da fila en ~60px y se ve como un row vacío entre
los títulos y los inputs.
------------------------------------------------------------------------- */
.tablaInterior table.dataTable thead tr + tr th {
padding-top : 2px !important;
padding-bottom : 2px !important;
}
.tablaInterior table.dataTable thead tr + tr th input {
margin : 0 !important;
padding : 4px 6px !important;
height : auto !important;
line-height : 1.2 !important;
box-sizing : border-box;
}
/* -------------------------------------------------------------------------
2) Hover de fila legible.
El theme de Dercomaq pinta tbody con color:white. El hover default
de DT 1.13 mete fondo gris claro → texto blanco sobre gris claro
queda ilegible.
Forzamos: fondo amarillo suave + texto negro + borde rojo brand.
------------------------------------------------------------------------- */
.tablaInterior table.dataTable tbody tr:hover,
.tablaInterior table.dataTable tbody tr:hover > * {
background-color : #fff3cd !important;
color : #222 !important;
box-shadow : none;
}
.tablaInterior table.dataTable tbody tr:hover > td:first-child {
border-left : 3px solid #c0001b;
}
/* Los de la fila (ej. "Editar") tienen color propio del theme
con más especificidad — el color:#222 de arriba no los alcanza.
Sobre el amarillo del hover quedaban blancos → invisibles.
Forzamos rojo brand + bold + subrayado en hover de fila. */
.tablaInterior table.dataTable tbody tr:hover a,
.tablaInterior table.dataTable tbody tr:hover a:link,
.tablaInterior table.dataTable tbody tr:hover a:visited {
color : #c0001b !important;
font-weight : bold;
text-decoration : underline;
}
.tablaInterior table.dataTable tbody tr:hover a:hover,
.tablaInterior table.dataTable tbody tr:hover a:focus {
color : #ffffff !important;
background : #c0001b;
padding : 2px 6px;
border-radius : 3px;
text-decoration : none;
}
/* -------------------------------------------------------------------------
3) Indicador "Procesando..." visible.
DT 1.13 lo dibuja con fondo transparente; sobre body con bg oscuro
queda invisible. Panel blanco + borde rojo brand + sombra.
Cubre el selector clásico .dataTables_processing Y el nuevo
.dt-processing (DT 2.x) por si en algún momento bumpeás.
------------------------------------------------------------------------- */
.tablaInterior .dataTables_processing,
.tablaInterior .dt-processing,
div.dataTables_processing,
div.dt-processing {
background : #ffffff !important;
color : #222 !important;
border : 2px solid #c0001b !important;
border-radius : 6px;
box-shadow : 0 4px 16px rgba(0, 0, 0, 0.3);
padding : 12px 20px !important;
font-weight : bold;
z-index : 1000;
left : 50% !important;
margin-left : -100px !important;
width : 200px !important;
text-align : center !important;
opacity : 1 !important;
}
/* -------------------------------------------------------------------------
4) Iconos de acción en filas (editar / ver / etc.) muy visibles.
Las celdas de la última columna en los listados renderean cosas como
. Los íconos PNG son
chiquitos (16 px) y de colores claros — sobre el fondo amarillo del
hover (regla 2) casi no se distinguen.
Estrategia: apenas la fila entra en hover, el ícono se convierte en
un BOTÓN ROJO con ícono blanco invertido. Máximo contraste sobre el
amarillo del fondo, no requiere apuntar al ícono con precisión.
- Estado base: ícono normal.
- Hover de la FILA: fondo rojo brand + ícono blanco (filter invert)
+ escala +30 % + sombra. Visible al instante.
- Hover sobre el ÍCONO específico: solo intensificamos (escala +50 %
+ sombra más fuerte) sin volver a cambiar el color, así no hay
"flicker" entre los dos estados.
------------------------------------------------------------------------- */
.tablaInterior table.dataTable tbody tr a > img {
padding : 2px;
border-radius : 4px;
background : transparent;
box-shadow : none;
transition : transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
transform-origin : center;
}
.tablaInterior table.dataTable tbody tr:hover a > img {
transform : scale(1.3);
background : #c0001b;
box-shadow : 0 0 0 2px #c0001b, 0 2px 4px rgba(0, 0, 0, 0.35);
filter : brightness(0) invert(1); /* fuerza el ícono PNG a blanco */
}
.tablaInterior table.dataTable tbody tr a:hover > img,
.tablaInterior table.dataTable tbody tr a:focus > img {
transform : scale(1.5);
box-shadow : 0 0 0 2px #c0001b, 0 4px 10px rgba(0, 0, 0, 0.5);
cursor : pointer;
}
/* -------------------------------------------------------------------------
5) Control "+"/"▼" de DataTables Responsive en pantallas chicas.
El CSS de Responsive 2.2.2 estándar usa selectores que dependen de
`tr[role="row"]`, pero DataTables 1.13 con la config de este proyecto
no agrega ese atributo a las filas del tbody. Sin el control visible,
el usuario mobile no tiene forma de ver las columnas que Responsive
ocultó (Cliente, Vendedor, Concesionario, etc. en /cotizacion/listar).
Reglas sin dependencia de `role="row"`: aplican mientras la tabla
tenga `.dtr-inline.collapsed` (que es lo que setea Responsive).
------------------------------------------------------------------------- */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
position : relative;
padding-left : 30px !important;
cursor : pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
position : absolute;
top : 50%;
left : 6px;
height : 16px;
width : 16px;
margin-top : -10px;
display : block;
color : white;
border : 2px solid white;
border-radius : 16px;
text-align : center;
line-height : 14px;
box-shadow : 0 0 3px #444;
box-sizing : content-box;
background-color : #31b131;
content : '+';
font-weight : bold;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
background-color : #d33333;
content : '-';
}