original que select2 deja oculto (clip) conserva su ancho previo
al init; aunque es invisible, ese ancho cuenta para el scroll horizontal de la
página y en móvil provocaba unos px de desbordamiento (visto en informes BI).
El CSS upstream de select2 lo fija a 1px; este build no lo trae. */
.select2-hidden-accessible {
width: 1px !important;
}
/* DataTables cierra su cabecera con un rgba(0,0,0,.3) y lo hace desde un
selector más específico (thead>tr>th) que el genérico de aquí arriba, así que
ganaba él: hay que repetir su forma para que la línea sea la del token. */
table.dataTable thead > tr > th,
table.dataTable thead > tr > td {
border-bottom: 1px solid var(--mt-gray-300);
}
/* Orden de DataTables: UN solo indicador, pegado a la etiqueta.
De serie DataTables pinta dos triángulos (:before ▲ + :after ▼) en absoluto a
la derecha de la celda, lejos del texto, como un glifo suelto en la cabecera.
Aquí el ▲ se retira y el ▼ pasa a flujo normal (position:static) para que
caiga pegado tras el nombre. */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
/* DataTables reserva 26px a la derecha para los triángulos absolutos: ya no
hay nada absoluto que alojar y ese hueco descentraba la etiqueta */
padding-right: 12px;
}
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before {
display: none;
}
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after {
position: static;
display: inline-block;
margin-left: .45em;
/* styles.css legacy los pinta con la FontAwesome v4 a 14px: aquí se rehacen
con la 7 y al tamaño que pide una etiqueta de 12,8px */
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 9px;
line-height: 1;
vertical-align: middle;
opacity: 1;
color: var(--mt-gray-400);
transition: color var(--mt-dur-fast) var(--mt-ease);
}
/* Ordenable pero sin ordenar: doble flecha tenue que se afirma al pasar por encima */
table.dataTable thead > tr > th.sorting:after { content: "\f0dc"; }
table.dataTable thead > tr > th.sorting:hover:after { color: var(--mt-gray-600); }
/* Columna ordenada: es lo único de la cabecera que se tiñe de marca */
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
color: var(--mt-green-700);
}
table.dataTable thead > tr > th.sorting_asc:after {
content: "\f0de";
color: var(--mt-green-700);
}
table.dataTable thead > tr > th.sorting_desc:after {
content: "\f0dd";
color: var(--mt-green-700);
}
/* Columnas numéricas (th.text-end): el indicador pasa DELANTE de la etiqueta
(tokens §5) para que el borde derecho del título coincida con las cifras. */
table.dataTable thead > tr > th.text-end.sorting:after,
table.dataTable thead > tr > th.text-end.sorting_asc:after,
table.dataTable thead > tr > th.text-end.sorting_desc:after {
display: none;
}
table.dataTable thead > tr > th.text-end.sorting:before,
table.dataTable thead > tr > th.text-end.sorting_asc:before,
table.dataTable thead > tr > th.text-end.sorting_desc:before {
display: inline-block;
position: static;
margin-right: .45em;
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 9px;
line-height: 1;
vertical-align: middle;
opacity: 1;
color: var(--mt-gray-400);
transition: color var(--mt-dur-fast) var(--mt-ease);
}
table.dataTable thead > tr > th.text-end.sorting:before { content: "\f0dc"; }
table.dataTable thead > tr > th.text-end.sorting:hover:before { color: var(--mt-gray-600); }
table.dataTable thead > tr > th.text-end.sorting_asc:before { content: "\f0de"; color: var(--mt-green-700); }
table.dataTable thead > tr > th.text-end.sorting_desc:before { content: "\f0dd"; color: var(--mt-green-700); }
/* Control de expandir/colapsar de DataTables Responsive. De serie lo pinta con los
caracteres Unicode ► / ▼ (responsive.dataTables.min.css) al 50% de negro: como no
son un icono sino texto, los renderiza la fuente de texto y quedan toscos y descuadrados.
Aquí se rehacen con chevrons de la FA7, igual que las flechas de ordenación de
arriba. Hay que repetir la forma del selector de la librería (table.dataTable
.dtr-inline.collapsed > tbody > tr > td.dtr-control) porque tiene más
especificidad que un selector corto y ganaría ella. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 11px;
content: "\f054";
color: var(--mt-gray-400);
/* Un único glifo que ROTA al expandir (en vez de cambiar \f054 por \f078 en
seco): el giro con transición hace el despliegue suave. inline-block para
que el transform tenga efecto sobre el pseudoelemento. */
display: inline-block;
transition: color var(--mt-dur-fast) var(--mt-ease),
transform var(--mt-dur-fast) var(--mt-ease);
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
/* Se repite el content: la hoja de Responsive trae su propia regla .parent
con content:"▼" (carácter de texto) a la misma especificidad; sin esto
gana ella y el ▼ girado 90° acaba apuntando a la izquierda. */
content: "\f054";
transform: rotate(90deg);
color: var(--mt-green-700);
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:hover:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:hover:before {
color: var(--mt-green-700);
}
/* Chevron de grupos parent-child (a.dt-chevron-toggle, lo pinta
chevron_function en renders_datatables.js): mismos colores que la flecha de
detalle de Responsive de arriba — gris en reposo, verde al pasar la fila y
con el grupo expandido — porque conviven en los mismos listados (en
gestion_datos incluso en la misma celda) y deben leerse como el mismo
control. El tamaño (11px) va inline en el propio icono. */
table.dataTable a.dt-chevron-toggle { color: var(--mt-gray-400); }
table.dataTable > tbody > tr:hover a.dt-chevron-toggle,
table.dataTable > tbody > tr.parent-shown a.dt-chevron-toggle {
color: var(--mt-green-700);
}
/* El chevron va en el flujo de la celda, así que empuja al contenido que lleva
detrás. Hay que resolverlo distinto según lo que haya en la primera columna:
a) Columna de checkbox (el caso de la mayoría de listados, con bulkbar): el
chevron se ancla a la izquierda, fuera del flujo, y el checkbox queda centrado
en su columna. Si se deja en el flujo, el par chevron+checkbox se centra como
grupo y el checkbox se va ~6px a la derecha del centro de la columna.
b) Columna de texto: el chevron se queda en el flujo (en absoluto se solaparía con
el texto) y es la cabecera la que reserva el mismo hueco con un glifo
invisible, para que la etiqueta caiga alineada con el texto de las filas. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:has(> input[type="checkbox"]) {
position: relative;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:has(> input[type="checkbox"]):before {
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
margin-right: 0;
}
/* Variante con checkbox + fila expandida: el translateY del anclaje y el giro
del despliegue tienen que convivir en el mismo transform. */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:has(> input[type="checkbox"]):before {
transform: translateY(-50%) rotate(90deg);
}
/* Fila de grupo con columnas plegadas en una celda SIN checkbox (/controles): las
dos flechas no caben en la columna (48px) y la segunda se recortaba. Se queda
solo la del grupo, y el clic en la celda abre el grupo (renders_datatables.js);
el detalle de columnas plegadas de un grupo va vacío y no se ofrece. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:has(> a.dt-chevron-toggle):before {
content: none;
}
/* Mismo hueco a la derecha que deja la flecha de Responsive (margin-right de su
:before), para que la del grupo caiga en la misma vertical que las demás filas. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control > a.dt-chevron-toggle {
margin-right: 5.5px;
}
/* Fila entera clicable cuando hay flecha de desplegar (handler en
renders_datatables.js): cursor de mano en filas de grupo (chevron
parent-child) y en filas de tablas con columnas plegadas por Responsive —
incluidos los hijos inyectados de grupo, que despliegan su propio detalle.
Las filas-detalle (tr.child, también la del hijo) no despliegan nada y
quedan fuera. */
table.dataTable > tbody > tr:has(a.dt-chevron-toggle),
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) {
cursor: pointer;
}
/* El contenido del desplegable (fila hija de Responsive) lo inserta DataTables
en el DOM de golpe; un fundido corto acompasado con el giro del chevron hace
el despliegue suave sin animar alturas (que dan tirones con tablas anchas). */
@keyframes mt-dt-child-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
table.dataTable > tbody > tr.child ul.dtr-details {
animation: mt-dt-child-in var(--mt-dur-fast) var(--mt-ease);
}
/* Maquetación del desplegable: de serie la lista es inline-block compacta (y hereda
alineaciones de columna de la tabla). Aquí cada campo es una FILA a todo el ancho:
etiqueta secundaria a la izquierda (gris, ancho fijo para que los valores queden
en columna) y valor al lado, con separador suave entre filas. */
table.dataTable > tbody > tr.child > td.child {
text-align: left;
padding: 8px 16px 8px 48px;
}
table.dataTable > tbody > tr.child ul.dtr-details {
display: block;
width: 100%;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
display: flex;
align-items: baseline;
gap: 16px;
padding: 8px 0;
border-bottom: 0; /* anula el border-bottom #efefef de serie; el separador va arriba */
}
/* Separador entre filas por border-top (y no bottom + :last-child a 0): así una
fila fantasma oculta al final (ver regla de abajo) no deja línea suelta. */
table.dataTable > tbody > tr.child ul.dtr-details > li + li {
border-top: 1px solid var(--mt-gray-100);
}
/* Campo sin etiqueta NI valor (p. ej. la preview de "primer elemento" cuando va
vacía, cuya cabecera además no tiene texto): fuera del desplegable — dejaba
una fila en blanco al final. */
table.dataTable > tbody > tr.child ul.dtr-details > li:has(> span.dtr-title:empty):has(> span.dtr-data:empty) {
display: none;
}
table.dataTable > tbody > tr.child span.dtr-title {
min-width: 160px;
font-weight: 600;
color: var(--mt-gray-600);
}
table.dataTable.dtr-inline.collapsed > thead > tr > th:first-child:before {
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 11px;
content: "\f054";
display: inline-block;
margin-right: .5em;
/* la cabecera lleva letter-spacing y el pseudo lo heredaría, metiendo un pelo de
tracking de más tras el chevron fantasma */
letter-spacing: normal;
visibility: hidden;
}
/* Caso (a): si la cabecera es un checkbox, su chevron de las filas ya no ocupa sitio,
así que aquí tampoco hay que reservarlo */
table.dataTable.dtr-inline.collapsed > thead > tr > th:first-child:has(> input[type="checkbox"]):before {
content: none;
}
/* Los checkboxes de las tablas (columna de selección del bulkbar) van con el
vertical-align:baseline de serie del input: se apoyan en la línea base del texto y
dejan hueco para los descendentes debajo, así que quedan ~2px por encima del centro
de la fila. Al lado del chevron, que sí está centrado, se nota. */
table.dataTable > thead > tr > th > input[type="checkbox"],
table.dataTable > tbody > tr > td > input[type="checkbox"] {
vertical-align: middle;
}
/* Cuando el checkbox es lo único que hay en la celda, se pasa a bloque: así lo centra
la propia celda (el vertical-align:middle del centra el content box dentro del
padding box) en vez de colgarlo de la línea base del texto. Es lo que hace falta
para que coincida con el chevron, que al ser absolute se centra por geometría contra
ese mismo padding box: con vertical-align el checkbox se quedaba ~1px más abajo que
el eje del chevron, porque middle alinea con la mitad de la altura-x de la fuente y
no con el centro real de la caja. El margin auto le devuelve el centrado horizontal
que el text-align de la celda ya no puede darle al ser un bloque. */
table.dataTable > thead > tr > th > input[type="checkbox"]:only-child,
table.dataTable > tbody > tr > td > input[type="checkbox"]:only-child {
display: block;
margin: 0 auto;
}
/* Pista de que la columna se puede ordenar: la celda se marca al pasar por encima */
table.dataTable thead > tr > th.sorting:hover,
table.dataTable thead > tr > th.sorting_asc:hover,
table.dataTable thead > tr > th.sorting_desc:hover {
background-color: var(--mt-gray-200);
}
table.dataTable tbody tr:hover {
background-color: var(--mt-green-50);
}
/* Controles del wrapper de DataTables, discretos */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--mt-gray-300);
border-radius: var(--mt-radius-sm);
padding: .25rem .5rem;
}
.dataTables_wrapper .dataTables_info {
color: var(--mt-gray-500);
}
/* ------------------------------------------------------------------ */
/* 4. LIBRERÍAS YA CARGADAS */
/* ------------------------------------------------------------------ */
/* DataTables 1.13 — selección de filas (por defecto azul #0d6efd) */
:root {
--dt-row-selected: var(--mt-green-700-rgb);
--dt-row-selected-text: 255, 255, 255;
--dt-row-selected-link: 255, 255, 255;
}
/* Marco de tabla — variante T3 «densa con marco» (mockup aprobado 14/07/2026):
marco de borde visible sin sombra, esquinas 10px, filas compactas, celdas
13px. El radio en necesita border-collapse separate y esquinas
redondeadas también en las celdas extremas.
Lo llevan de oficio las tablas de DataTables y, con la clase .mt-table, las
tablas estáticas que quieran el mismo aspecto (p. ej. listados de modales): sin
ella se quedan como una tabla pelada de Bootstrap, sin borde ni esquinas, y
desentonan del resto de la app. */
table.dataTable,
table.mt-table {
font-size: 15px;
border: 1px solid var(--mt-gray-300);
border-collapse: separate !important;
border-spacing: 0;
border-radius: var(--mt-radius-btn);
/* clip y no hidden: recorta igual (fondos de fila sobre las esquinas
redondeadas) pero NO convierte la tabla en contenedor de scroll, que
anulaba el position:sticky de cabeceras dentro de la tabla (visto en la
cabecera fija de /ektor_auditoria). */
overflow: clip;
}
/* styles.css legacy le mete padding-top:6px !important a .dataTable: dejaba una
franja blanca dentro del marco, sobre la cabecera */
table.dataTable {
padding: 0 !important;
}
table.dataTable thead th,
table.dataTable thead td,
table.mt-table thead th,
table.mt-table thead td {
padding: 8px 12px;
}
table.dataTable tbody th,
table.dataTable tbody td,
table.mt-table tbody th,
table.mt-table tbody td {
padding: 7px 12px;
/* Divisor en negro translúcido (no gris opaco): se adapta al fondo de la
fila. Sobre filas blancas queda un gris suave; sobre filas coloreadas
(estados rojo/verde) es una sombra del propio color, en vez de la línea
blanca que cortaba el color. */
border-bottom: 1px solid rgba(0, 0, 0, .18);
/* Bootstrap alinea las celdas arriba (vertical-align: top del .table);
con contenidos de distinta altura en la misma fila (iconos, chips,
texto) cada celda quedaba a una altura distinta */
vertical-align: middle;
}
table.dataTable tbody tr:last-child td,
table.mt-table tbody tr:last-child td { border-bottom: 0; }
table.dataTable thead tr:first-child th:first-child,
table.mt-table thead tr:first-child th:first-child { border-top-left-radius: calc(var(--mt-radius-btn) - 1px); }
table.dataTable thead tr:first-child th:last-child,
table.mt-table thead tr:first-child th:last-child { border-top-right-radius: calc(var(--mt-radius-btn) - 1px); }
table.dataTable tbody tr:last-child td:first-child,
table.mt-table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--mt-radius-btn) - 1px); }
table.dataTable tbody tr:last-child td:last-child,
table.mt-table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--mt-radius-btn) - 1px); }
/* Filtros por columna. La fila vive en el y styles.css la sube bajo la
cabecera con display:table-header-group. Comparte el fondo de la cabecera para
que nombre de columna + su filtro se lean como UNA sola cabecera de columna
(antes eran dos bandas distintas: gris arriba, blanca debajo) con los inputs
embutidos en blanco dentro del gris. */
table.dataTable tr.filter-row td {
position: relative;
/* padding vertical simétrico a propósito: deja el input centrado en la celda,
y así la lupa y la X pueden anclarse con top:50% sin números mágicos */
padding: 4px 8px;
background: var(--mt-gray-100);
border-bottom: 1px solid var(--mt-gray-300);
}
/* La línea de cierre de la cabecera la pone la fila de filtros: sin esto queda
un corte entre la etiqueta y su filtro y vuelven a leerse como dos bandas.
Va por clase y no por :has(tr.filter-row) porque la fila existe en el DOM aunque
esté escondida (datatable-module.js la oculta con 0/1 resultados): en ese caso
:has() seguía casando, la cabecera se quedaba sin borde y no la cerraba nadie, así
que se fundía con la primera fila. La clase la pone ese mismo JS al alternarla. */
table.dataTable.mt-filtros-visibles thead > tr > th {
border-bottom-color: transparent;
}
/* Un filtro de columna puede ser de texto o un desplegable (p. ej. Estado en
/controles): misma caja para los dos, o la fila se ve descuadrada */
table.dataTable tr.filter-row .finput {
width: 100%;
height: 26px;
border: 1px solid var(--mt-gray-200);
border-radius: var(--mt-radius-sm);
background-color: #fff;
font-size: 12px;
font-family: inherit;
color: var(--mt-gray-800);
transition: border-color var(--mt-dur-fast) var(--mt-ease),
background-color var(--mt-dur-fast) var(--mt-ease),
box-shadow var(--mt-dur-fast) var(--mt-ease);
}
table.dataTable tr.filter-row input.search_init {
/* huecos para la lupa (izquierda) y la X de quitar filtro (derecha) */
padding: 0 26px 0 24px;
}
/* El desplegable ya trae su propia flecha (Bootstrap la pinta a la derecha) */
table.dataTable tr.filter-row select.finput {
padding: 0 24px 0 8px;
}
table.dataTable tr.filter-row .finput:hover { border-color: var(--mt-gray-300); }
table.dataTable tr.filter-row .finput:focus {
outline: 0;
border-color: var(--mt-green-300);
box-shadow: var(--mt-focus-ring);
}
/* Lupa: la pinta el , y solo donde hay filtro (hay columnas sin él) */
table.dataTable tr.filter-row td:has(input.search_init)::before {
content: "\f002";
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 10px;
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
color: var(--mt-gray-400);
pointer-events: none;
transition: color var(--mt-dur-fast) var(--mt-ease);
}
/* Filtro relleno = columna acotada. Se tiñe de marca para poder ver de un
vistazo QUÉ columnas están recortando la tabla sin leer sus valores.
El de texto se detecta por el placeholder=" " que pone DataTableComun.php: es
un espacio invisible que existe solo para que :placeholder-shown signifique
"vacío". El desplegable, por que su opción elegida no sea la vacía («Todos»). */
table.dataTable tr.filter-row input.search_init:not(:placeholder-shown),
table.dataTable tr.filter-row select.finput:has(option:checked:not([value=""])) {
background-color: var(--mt-green-50);
border-color: var(--mt-green-200);
color: var(--mt-gray-900);
}
table.dataTable tr.filter-row td:has(input.search_init:not(:placeholder-shown))::before {
color: var(--mt-green-700);
}
/* En un desplegable la X sobra —para quitar el filtro se elige «Todos»— y encima
chocaría con su flecha. Va con !important porque el JS se la pone en línea. */
table.dataTable tr.filter-row td:has(select.finput) .delfilter {
display: none !important;
}
/* La X de quitar filtro: styles.css la deja con un top fijo, descentrada
respecto al input nuevo */
table.dataTable tr.filter-row .delfilter {
top: 50%;
transform: translateY(-50%);
right: 14px;
color: var(--mt-gray-400);
/* centra el glifo dentro de su caja de 16px (sin esto queda alto) */
line-height: 16px;
text-align: center;
font-size: 12px;
transition: color var(--mt-dur-fast) var(--mt-ease);
}
table.dataTable tr.filter-row .delfilter:hover { color: var(--mt-danger); }
/* Iconos de acción solos dentro de un enlace de celda (editar/eliminar…):
sin el margin-right de `.dataTable .fa` (styles.css, pensado para iconos
seguidos de texto). Ese margen ensancha el ancla por la derecha y descentra
la burbuja del tooltip común respecto al glifo. */
.dataTable td a > .fa:only-child,
.dataTable td a > i:only-child {
margin-right: 0;
}
/* Controles del wrapper discretos */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
color: var(--mt-gray-600);
font-size: .85rem;
}
/* Loading tipo skeleton por celda (mockup aprobado): al lanzar cada petición
AJAX, datatable-module.js pinta filas hueso en el tbody respetando las
columnas; el draw las sustituye. La caja "Procesando..." sobra. */
div.dataTables_wrapper div.dataTables_processing { display: none !important; }
.mt-sk-overlay {
position: absolute;
z-index: 5;
background: #fff;
overflow: hidden;
border-radius: 0 0 calc(var(--mt-radius-btn) - 1px) calc(var(--mt-radius-btn) - 1px);
}
.mt-sk-fila {
display: flex;
align-items: center;
height: 39px;
border-bottom: 1px solid var(--mt-gray-200);
}
.mt-sk-fila:last-child { border-bottom: 0; }
.mt-sk-celda {
display: block;
padding: 0 12px;
flex: 0 0 auto;
box-sizing: border-box;
}
.mt-sk {
display: block;
height: 13px;
width: 80%;
border-radius: var(--mt-radius);
background: linear-gradient(90deg,
var(--mt-gray-100) 25%, var(--mt-gray-200) 50%, var(--mt-gray-100) 75%);
background-size: 400% 100%;
animation: mt-shimmer 1.2s ease-in-out infinite;
}
/* Anchos alternos para que parezca contenido y no barras */
.mt-sk-celda:nth-child(2n) .mt-sk { width: 55%; }
.mt-sk-celda:nth-child(3n) .mt-sk { width: 95%; }
@keyframes mt-shimmer {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.mt-sk { animation: none; }
}
/* DataTables — paginación como el mockup T3: cuadraditos limpios sin marco,
hover verde suave y solo la página actual en verde sólido */
.dataTables_wrapper .dataTables_paginate .paginate_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 5px;
margin: 0 2px;
border: 0;
border-radius: var(--mt-radius-sm);
background: transparent;
color: var(--mt-gray-600) !important; /* el CSS de DataTables trae !important */
font-size: 13px;
font-variant-numeric: tabular-nums;
text-decoration: none !important;
}
/* Distribución del wrapper: botones a la izquierda, info y paginación a la
derecha; abajo la paginación repetida, también a la derecha */
.dataTables_wrapper .top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
/* Sticky bajo el navbar fijo (y bajo el banner de soporte si lo hay, ver
support_banner.php): en listados largos la info + paginación siguen a
mano mientras se hace scroll por la tabla. Si la tabla cabe en pantalla
no cambia nada. Va arriba y no abajo para no chocar con la bulkbar
flotante. Funciona porque el scroll horizontal lo lleva .mt-dt-scroll
(solo la tabla), no el wrapper. Fondo opaco para tapar las filas. */
position: sticky;
top: calc(var(--mt-navbar-h, 76px) + var(--mt-soporte-h, 0px));
z-index: var(--mt-z-sticky);
background: var(--bs-body-bg);
padding: 8px 0;
}
/* Opt-out del sticky de la fila .top: para tablas que no paginan (p. ej. la
tabla de elementos de ficha_estructura_control) no aporta nada y choca con
otras barras sticky de la página. Se envuelve el DataTable en este div. */
.mt-dt-top-static .dataTables_wrapper .top {
position: static;
}
/* styles.css legacy reordena con flex order; fijamos el orden completo:
botones · buscador · (hueco) · info · paginación */
.dataTables_wrapper .top .dt-buttons { order: 1; }
.dataTables_wrapper .top .dataTables_filter { order: 2; }
.dataTables_wrapper .top .dataTables_info {
order: 3;
margin-left: auto;
padding-top: 0;
}
.dataTables_wrapper .top .dataTables_paginate { order: 4; }
.dataTables_wrapper .top .clear { order: 5; }
.dataTables_wrapper .bottom {
display: flex;
align-items: center;
/* aire también por abajo y por la derecha: sin él la paginación queda
pegada al borde del contenedor (y a la bulkbar cuando está activa) */
margin-top: 10px;
margin-bottom: 12px;
}
.dataTables_wrapper .bottom .dataTables_paginate {
margin-left: auto;
margin-right: 6px;
}
/* Layouts DataTables SIN fila .bottom (dom:'lrtip' — p. ej. las listas duales de
los modales de proveedores): el paginado cuelga directo del wrapper, no recibe
los márgenes de arriba y quedaba pegado a la tabla y al borde del bloque. Mismo
aire que el estándar. */
.dataTables_wrapper > .dataTables_paginate {
margin-top: 10px;
margin-bottom: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--mt-green-50);
border: 0;
color: var(--mt-green-700) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--mt-green-700);
border: 0;
color: #fff !important;
font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
background: transparent;
color: var(--mt-gray-300) !important;
cursor: default;
}
/* Botones del wrapper (Mostrar/Ocultar columnas, exports) como el mockup:
blancos, borde neutro, radio de botón, hover verde. Los selectores con
elemento delante ganan al CSS de DataTables Buttons (gradientes grises). */
.dataTables_wrapper button.dt-button,
.dataTables_wrapper div.dt-button,
.dataTables_wrapper a.dt-button {
border: 1px solid var(--mt-gray-300);
background: #fff;
color: var(--mt-gray-700);
border-radius: var(--mt-radius-btn);
padding: 6px 14px;
font-size: .85rem;
font-family: inherit;
line-height: 1.4;
}
.dataTables_wrapper button.dt-button:hover:not(.disabled),
.dataTables_wrapper div.dt-button:hover:not(.disabled),
.dataTables_wrapper a.dt-button:hover:not(.disabled) {
border: 1px solid var(--mt-green-300);
background: var(--mt-green-50);
color: var(--mt-green-700);
}
.dataTables_wrapper button.dt-button:focus:not(.disabled) {
background: #fff;
color: var(--mt-gray-700);
border: 1px solid var(--mt-gray-300);
box-shadow: var(--mt-focus-ring);
text-shadow: none;
}
.dataTables_wrapper button.dt-button.active:not(.disabled),
.dataTables_wrapper button.dt-button:active:not(.disabled) {
background: var(--mt-green-50);
color: var(--mt-green-700);
border: 1px solid var(--mt-green-300);
box-shadow: none;
}
/* Desplegable del botón "Mostrar/Ocultar columnas" (colvis). El estilo pill de
los .dt-button del wrapper (arriba) le gana al CSS de DataTables Buttons y se
colaba en los items del desplegable; aquí se restaura el aspecto de dropdown
(tarjeta blanca + items de menú full-width), alineado con el de Select2 (abajo). */
div.dt-button-collection {
width: 220px;
padding: .3rem;
border: 1px solid var(--mt-gray-200);
border-radius: var(--mt-radius);
box-shadow: var(--mt-shadow-lg);
}
.dataTables_wrapper div.dt-button-collection button.dt-button {
display: block;
width: 100%;
margin: 0;
border: 0;
border-radius: var(--mt-radius);
padding: .4rem .75rem;
background: none;
color: var(--mt-gray-700);
text-align: left;
box-shadow: none;
}
/* El ✓ del item activo lo pinta Buttons con :after posicionado a la derecha;
se recupera su hueco (el padding de arriba pisa el del CSS de Buttons). */
.dataTables_wrapper div.dt-button-collection button.dt-button.dt-button-active {
padding-right: 3em;
}
.dataTables_wrapper div.dt-button-collection button.dt-button:hover:not(.disabled),
.dataTables_wrapper div.dt-button-collection button.dt-button:focus:not(.disabled) {
border: 0;
background: var(--mt-green-50);
color: var(--mt-green-700);
box-shadow: none;
}
/* Select2 (tema bootstrap-5, que trae los azules de serie). Los selectores
replican los del tema (compuestos) para ganarle en el cascade. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
background-color: var(--mt-green-50);
color: var(--mt-green-900);
}
/* Seleccionado: verde marca SIEMPRE, aunque select2 lo deje «resaltado» (al quitar
un item re-resalta el primero de la lista y si el resaltado gana se queda con el
color de hover hasta mover el ratón). El :not(.select2-results__message) no excluye
nada relevante: está para IGUALAR la especificidad de la regla azul del tema
([aria-selected=true]:not(--highlighted)) y ganarle por orden de carga. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__message) {
background-color: var(--mt-green-700);
color: #fff;
}
/* Seleccionado con el cursor/teclado encima: un punto más claro como feedback */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected="true"] {
background-color: var(--mt-green-600);
color: #fff;
}
/* El seleccionado lleva ✓ como en los pickers nativos (base-select), solo en
selects simples: en los múltiples el tema ya pinta su propio check */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options:not([aria-multiselectable="true"]) .select2-results__option.select2-results__option--selected::before,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options:not([aria-multiselectable="true"]) .select2-results__option[aria-selected="true"]::before {
content: "✓ ";
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
border-color: var(--mt-green-300);
box-shadow: var(--mt-focus-ring);
}
/* La caja del desplegable, igual que el picker de los selects nativos (arriba):
tarjeta blanca redondeada con aire e items con radio. Se incluyen las variantes
--below/--above porque el tema les quita el radio del lado pegado al control. */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below,
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
border-color: var(--mt-gray-200);
border-radius: var(--mt-radius);
overflow: hidden;
box-shadow: var(--mt-shadow-lg);
padding: .3rem;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
padding: .4rem .75rem;
border-radius: var(--mt-radius);
}
/* Scrollbar ALINEADO al borde del panel: con el padding de .3rem del dropdown, la
barra de scroll de la lista quedaba flotando a ~5px del borde derecho y se veía
descolocada. El margin negativo acerca el borde del contenedor (donde pinta el
navegador la barra) al borde del panel — a medio camino, no pegada del todo
(feedback del usuario) — y el padding-right equivalente mantiene los items con
su aire de siempre respecto a la barra. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options {
margin-right: -.15rem;
padding-right: .15rem;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search.select2-search--dropdown {
padding: 0 0 .3rem;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
border-radius: var(--mt-radius);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
border-color: var(--mt-green-300);
box-shadow: var(--mt-focus-ring);
}
/* ------------------------------------------------------------------ */
/* Movimiento de los desplegables (guía §9): entrada tipo menú de */
/* Google — despliegue con fundido + escala desde el control */
/* ------------------------------------------------------------------ */
/* OJO: usar las propiedades individuales translate/scale, NO transform.
Popper posiciona los .dropdown-menu de Bootstrap con un transform inline
(translate3d) y una animación sobre transform lo pisa mientras dura: el
menú aparece un instante en la esquina superior izquierda y luego salta
a su sitio. translate/scale se COMPONEN con ese transform inline. */
@keyframes mt-dropdown-in {
from { opacity: 0; translate: 0 -8px; scale: .97; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes mt-dropdown-in-up {
from { opacity: 0; translate: 0 8px; scale: .97; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
/* Los .dropdown-menu de Bootstrap, además, no pueden llevar scale. Popper los coloca
ENTERAMENTE con el transform inline (deja top/left a 0), y las propiedades
individuales se componen en el orden translate·rotate·scale·transform: el scale
multiplica también ese vector de posición. Con un menú en translate(1375px, 529px),
un scale de .97 lo desplaza 41px en x y 16px en y, y se ve entrar en diagonal desde
el origen de la página. transform-origin no lo salva, porque el vector de Popper no
depende del origen. Aquí, solo fundido y deslizamiento vertical.
Select2 no tiene este problema: posiciona su desplegable con top/left, no con
transform, así que se queda con la escala de arriba. */
@keyframes mt-dropdown-in-sin-escala {
from { opacity: 0; translate: 0 -8px; }
to { opacity: 1; translate: 0 0; }
}
/* Entrada de los desplegables: select2 y dropdowns de Bootstrap */
.select2-container--bootstrap-5 .select2-dropdown {
animation: mt-dropdown-in var(--mt-dur) var(--mt-ease);
transform-origin: top center;
}
.dropdown-menu.show {
animation: mt-dropdown-in-sin-escala var(--mt-dur) var(--mt-ease);
}
/* Si el desplegable abre hacia arriba, se despliega desde abajo */
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
animation-name: mt-dropdown-in-up;
transform-origin: bottom center;
}
/* Pickers de selects nativos (base-select) */
@supports (appearance: base-select) {
select.form-select::picker(select),
select.form-control::picker(select) {
animation: mt-dropdown-in var(--mt-dur) var(--mt-ease);
transform-origin: top center;
}
}
@media (prefers-reduced-motion: reduce) {
.select2-container--bootstrap-5 .select2-dropdown,
.dropdown-menu.show,
select.form-select::picker(select),
select.form-control::picker(select) {
animation: none;
}
}
/* Pulso del control al ELEGIR una opción (la clase la añade y retira el handler
global de pages/js/helpers.php): anillo verde que se expande y desvanece. El
focus-ring se mantiene como segunda capa para no parpadear mientras anima. */
@keyframes mt-select-pulse {
from { box-shadow: 0 0 0 0 rgba(38, 86, 66, .28), var(--mt-focus-ring); }
to { box-shadow: 0 0 0 .5rem rgba(38, 86, 66, 0), var(--mt-focus-ring); }
}
.mt-select-pulse {
animation: mt-select-pulse .4s var(--mt-ease);
}
@media (prefers-reduced-motion: reduce) {
.mt-select-pulse { animation: none; }
}
/* bootstrap-datepicker 1.10 — día activo/rango (azul con gradiente de serie) */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active {
background-image: none;
background-color: var(--mt-green-700);
border-color: var(--mt-green-800);
color: #fff;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-image: none;
background-color: var(--mt-green-100);
border-color: var(--mt-green-200);
color: var(--mt-green-900);
}
/* Botones del pie del calendario («Hoy» de todayBtn, «Borrar» de clearBtn): de serie
vienen como bloque gris con gradiente tipo btn-default; los dejamos como acción
discreta en verde corporativo, a juego con el hover del addon de fecha. */
.datepicker tfoot tr th.today,
.datepicker tfoot tr th.clear {
background-image: none;
background-color: transparent;
color: var(--mt-green-700);
font-weight: 600;
border-radius: var(--mt-radius-sm);
transition: background-color var(--mt-dur-fast) var(--mt-ease),
color var(--mt-dur-fast) var(--mt-ease);
}
.datepicker tfoot tr th.today:hover,
.datepicker tfoot tr th.clear:hover {
background-image: none;
background-color: var(--mt-green-50);
color: var(--mt-green-800);
}
/* Botón-addon del calendario en los campos de fecha (patrón .input-group.date
del proyecto): al hacer clic abre el datepicker, así que debe comportarse
como botón — cursor de mano y hover, como los addons de los inputs con lupa. */
/* El shim v4 de FA7 pinta `fa fa-calendar` en SOLID (weight 900) y el icono se ve
"en negrita"; con weight 400 el mismo glifo renderiza en su variante REGULAR
(trazo fino, incluida en FA Free). Solo aquí — no tocar .fa global. */
.input-group.date .input-group-text .fa-calendar {
font-weight: 400;
}
/* styles.css legacy (`.date .input-group-text`) lo deja gris, sin borde y sin
radio, y el icono queda como una pieza suelta; lo devolvemos al estándar del
sistema: mismo borde que el input, pegado a él (esquinas rectas en la unión)
y redondeado SOLO por la derecha, para que input+icono se lean como un único
control. */
.input-group.date .input-group-text {
cursor: pointer;
background-color: #fff;
border: 1px solid var(--mt-gray-300);
border-radius: 0 var(--mt-radius-sm) var(--mt-radius-sm) 0;
transition: background-color var(--mt-dur-fast) var(--mt-ease),
color var(--mt-dur-fast) var(--mt-ease);
}
.input-group.date .input-group-text:hover {
background-color: var(--mt-green-50);
color: var(--mt-green-700);
}
/* SweetAlert2 — botón de confirmación (azul #3085d6 de serie; ojo, las vistas
suelen pasar SWEET_ALERT_BTN_CONFIRMAR_COLOR = #e20010 por parámetro, que
gana a este CSS: se corregirá en Constants.php al implementar) */
.swal2-styled.swal2-confirm {
background-color: var(--mt-green-700);
}
.swal2-styled.swal2-confirm:focus {
box-shadow: var(--mt-focus-ring);
}
/* Espaciado de los diálogos: de serie el título, el texto y los botones quedan
muy pegados entre sí. Aire con pasos de la escala (§7: 12/24). */
.swal2-title {
padding-top: 24px;
}
.swal2-html-container {
margin-top: 12px;
line-height: 1.5;
}
.swal2-actions {
margin-top: 24px;
}
.swal2-popup {
padding-bottom: 24px;
}
/* ------------------------------------------------------------------ */
/* 5. COMPONENTES MEATTRACK */
/* ------------------------------------------------------------------ */
/* Resumen de período (n% completado · X/Y registros · incidencias) — compartido
por las vistas diaria/semanal/mensual del calendario. */
.mt-vd-resumen {
font-size: .92rem;
color: var(--mt-gray-600);
background: var(--mt-gray-50);
}
.mt-vd-resumen strong {
font-weight: 400;
color: var(--mt-gray-900);
font-variant-numeric: tabular-nums;
}
.mt-vd-resumen i {
font-size: 1.15rem;
vertical-align: -.12em;
}
/* Skeleton loader — placeholder con shimmer para cargas de página/bloque.
Un bloque = un .mt-skeleton; la composición (filas, columnas, rejilla)
la pone cada vista con utilidades de layout. */
.mt-skeleton {
background: var(--mt-gray-100);
border-radius: var(--mt-radius);
position: relative;
overflow: hidden;
}
.mt-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
animation: mt-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes mt-skeleton-shimmer {
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.mt-skeleton::after { animation: none; }
}
/* Píldora de recuento — nº de hijos de una agrupación en tablas/listas
(sustituye al "(N)" en texto plano). Sin punto de estado: es un contador,
no un veredicto. OJO: no usar .badge (position:absolute legacy). */
.mt-count-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.7em;
/* line-height 1 + padding vertical simétrico: con 1.5 el dígito quedaba
ópticamente descentrado dentro de la píldora (Inter deja más aire bajo
la cifra que sobre ella). */
padding: .3em .55em;
border-radius: var(--mt-radius-pill);
background-color: var(--mt-gray-100);
border: 1px solid var(--mt-gray-200);
color: var(--mt-gray-600);
font-size: .78em;
font-weight: 600;
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Variante de alarma del contador (incidencias pendientes…): misma anatomía,
colores del chip danger. El número ya es la señal — sin icono extra. */
.mt-count-pill.mt-count-pill-danger {
background-color: var(--mt-danger-subtle);
border-color: var(--mt-danger-border);
color: var(--mt-danger-emphasis);
}
/* Selector segmentado (.mt-seg) — grupo de opciones excluyentes de un mismo
nivel (salas del resumen de registro): banda gray-100 con el segmento activo
en blanco elevado. Es el hermano sobre fondo claro del segmentado de cierre
de incidencias (.mt-inc-estado-seg, que vive sobre el pie de color). No es
un tab canónico: se usa como SEGUNDO nivel de navegación bajo unos tabs, o
para alternar vistas equivalentes de un mismo contenido. */
.mt-seg {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: var(--mt-radius);
background-color: var(--mt-gray-100);
border: 1px solid var(--mt-gray-200);
}
.mt-seg-btn {
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
margin: 0;
padding: 6px 14px;
border-radius: calc(var(--mt-radius) - 2px);
background: transparent;
color: var(--mt-gray-600);
font-size: var(--mt-fs-body-sm);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
transition: background-color var(--mt-dur-fast) var(--mt-ease), color var(--mt-dur-fast) var(--mt-ease);
}
.mt-seg-btn:hover {
color: var(--mt-gray-800);
}
.mt-seg-btn.active {
background-color: #fff;
color: var(--mt-gray-900);
box-shadow: var(--mt-shadow-sm);
}
/* Chip de estado — lenguaje único de veredictos/estados en toda la app.
Anatomía: punto de color + texto, pill, fondo subtle + texto emphasis. */
.mt-chip {
display: inline-flex;
align-items: center;
gap: .45em;
padding: .25em .75em;
border-radius: var(--mt-radius-pill);
border: 1px solid transparent;
font-size: .875em;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
.mt-chip::before {
content: "";
flex: none;
width: .55em;
height: .55em;
border-radius: 50%;
background-color: var(--mt-chip-dot, currentColor);
}
/* Aviso operativo destacado (mismo estilo que el pad de detectores de la
tablet): rectángulo redondeado —no pill—, cuerpo grande y negrita, para que
el aviso se vea a la primera entre los botones de la banda. */
.mt-chip-lg {
font-size: 1rem;
font-weight: 700;
padding: .45em 1.1em;
border-radius: var(--mt-radius);
}
/* Naranja: avisos operativos (turno de metales olvidado). A diferencia del
resto de variantes lleva el borde fuerte, porque es un aviso, no un estado. */
.mt-chip-orange {
--mt-chip-dot: var(--mt-orange);
color: var(--mt-orange-emphasis);
background-color: var(--mt-orange-subtle);
border-color: var(--mt-orange);
}
/* El aviso lleva icono propio (reloj), así que va sin el punto de estado. */
.mt-chip-orange::before {
display: none;
}
/* Aviso clicable (enlace): en hover se rellena del naranja fuerte para marcar
que abre el detalle. */
a.mt-chip-orange:hover {
--mt-chip-dot: #fff;
color: #fff;
background-color: var(--mt-orange);
border-color: var(--mt-orange);
}
.mt-chip-success {
--mt-chip-dot: var(--mt-success);
color: var(--mt-success-emphasis);
background-color: var(--mt-success-subtle);
border-color: var(--mt-success-border);
}
.mt-chip-danger {
--mt-chip-dot: var(--mt-danger);
color: var(--mt-danger-emphasis);
background-color: var(--mt-danger-subtle);
border-color: var(--mt-danger-border);
}
.mt-chip-warning {
--mt-chip-dot: var(--mt-warning);
color: var(--mt-warning-emphasis);
background-color: var(--mt-warning-subtle);
border-color: var(--mt-warning-border);
}
/* Chip de veredicto clicable (enlace, p. ej. «Sin verificar» en la ficha del
registro): mismo aspecto que el chip estático; en hover sube un paso el
fondo como pista de que abre el modal de verificación. */
a.mt-chip {
text-decoration: none;
}
a.mt-chip-warning:hover {
background-color: var(--mt-warning-border);
border-color: var(--mt-warning);
}
.mt-chip-info {
--mt-chip-dot: var(--mt-info);
color: var(--mt-info-emphasis);
background-color: var(--mt-info-subtle);
border-color: var(--mt-info-border);
}
.mt-chip-neutral {
--mt-chip-dot: var(--mt-gray-400);
color: var(--mt-gray-700);
background-color: var(--mt-gray-100);
border-color: var(--mt-gray-300);
}
/* Tarea: no es un veredicto, marca el tipo de tarjeta (tareas del calendario)
con el olive histórico de las notas. */
.mt-chip-tarea {
--mt-chip-dot: var(--mt-tarea);
color: var(--mt-tarea-emphasis);
background-color: var(--mt-tarea-subtle);
border-color: var(--mt-tarea-border);
}
.mt-chip-brand {
--mt-chip-dot: var(--mt-green-500);
color: var(--mt-green-900);
background-color: var(--mt-green-50);
border-color: var(--mt-green-200);
}
/* Badge de aviso «!» — puntito ámbar anclado a la esquina superior derecha de
un botón (cambios pendientes en "Actualizar controles", preavisos pendientes...).
El botón anfitrión necesita position:relative (utilidad Bootstrap
.position-relative). Dentro va un , que hereda
el color y el tamaño del badge. */
.mt-badge-aviso {
position: absolute;
top: -8px;
right: -8px;
min-width: 19px;
height: 19px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--mt-radius-pill);
background-color: var(--mt-warning-strong);
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
color: #fff;
font-size: 11px;
line-height: 1;
}
/* Variante roja del badge «!» (aviso bloqueante: productos del detector sin elementos). */
.mt-badge-aviso.mt-badge-aviso-danger {
background-color: var(--mt-danger);
}
/* Variante neutra: lo que indica el badge es solo informativo (p. ej. «Revisión
pendiente» de Ektor detrás del chip de la columna Avisos de /controles). */
.mt-badge-aviso.mt-badge-aviso-neutral {
background-color: var(--mt-gray-500);
}
/* Variante inline: el mismo círculo pero en flujo (junto a un texto de tabla, no anclado
a la esquina de un botón). 18px para no romper la altura de fila. */
.mt-badge-aviso.mt-badge-aviso-inline {
position: relative;
top: -1px;
right: auto;
min-width: 18px;
width: 18px;
height: 18px;
padding: 0;
font-size: 10px;
vertical-align: middle;
}
/* font-size:inherit: dentro de un DataTable, `.dataTable .fa` (styles.css) fija 15px al icono
y el «!» se salía del círculo de 18px. */
.mt-badge-aviso.mt-badge-aviso-inline i { margin: 0; font-size: inherit; line-height: 1; }
/* Caja de registro (vista diaria, B×C): tarjeta blanca con acento de estado
en el borde izquierdo. Sustituye a las cards con fondos de color plenos. */
.mt-card-registro {
background-color: #fff;
border: 1px solid var(--mt-gray-200);
border-left: 4px solid var(--mt-gray-300);
border-radius: var(--mt-radius);
box-shadow: var(--mt-shadow-sm);
transition: box-shadow var(--mt-dur-fast) var(--mt-ease);
}
.mt-card-registro:hover {
box-shadow: var(--mt-shadow-lg);
}
.mt-card-registro.mt-estado-success { border-left-color: var(--mt-success); }
.mt-card-registro.mt-estado-danger { border-left-color: var(--mt-danger); }
.mt-card-registro.mt-estado-warning { border-left-color: var(--mt-warning); }
.mt-card-registro.mt-estado-brand { border-left-color: var(--mt-green-500); }
.mt-card-registro.mt-estado-info { border-left-color: var(--mt-info); }
/* Fila de registro (lista tipo bandeja): la variante SIN caja — filas continuas
dentro de un único panel, separadas por línea fina, con el mismo acento de
estado en el borde izquierdo. Es el formato de la vista diaria. */
.mt-list-row {
background-color: #fff;
border-left: 4px solid var(--mt-gray-300);
border-bottom: 1px solid var(--mt-gray-200);
transition: background-color var(--mt-dur-fast) var(--mt-ease);
}
.mt-list-row:hover {
background-color: var(--mt-green-50);
}
.mt-list-row.mt-estado-success { border-left-color: var(--mt-success); }
.mt-list-row.mt-estado-danger { border-left-color: var(--mt-danger); }
.mt-list-row.mt-estado-warning { border-left-color: var(--mt-warning); }
.mt-list-row.mt-estado-brand { border-left-color: var(--mt-green-500); }
.mt-list-row.mt-estado-info { border-left-color: var(--mt-info); }
/* Las filas reutilizan card-header/card-body del markup existente, pero sin
la piel de card: cabecera transparente y paddings compactos y continuos */
.mt-list-row > .card-header {
background-color: transparent;
border-bottom: 0;
padding: .7rem 1.25rem .1rem;
}
.mt-list-row > .card-body {
padding: .1rem 1.25rem .7rem;
}
/* Hilo de comentarios (modal de comentarios de registro, ILP, proveedores…):
filas continuas dentro de un único marco con scroll propio, separadas por
línea fina —nada de una card por comentario—, cabecera en UNA línea (autor ·
«Tú» · fecha) con las acciones a la derecha, y el texto justo debajo. Los
comentarios propios llevan el lavado green-50 del item activo. Los iconos de
acción son la señal, así que van a 16px en un área táctil de 32px; el rojo
destructivo se reserva al Swal de confirmación (tokens.md §18). */
.mt-comentarios {
border: 1px solid var(--mt-gray-200);
border-radius: var(--mt-radius);
max-height: 340px;
overflow-y: auto;
}
.mt-comentario {
padding: 8px 12px; /* pasos 2 / 3 */
}
.mt-comentario + .mt-comentario {
border-top: 1px solid var(--mt-gray-200);
}
.mt-comentario.mt-comentario-mio {
background-color: var(--mt-green-50);
}
.mt-comentario-cabecera {
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
}
.mt-comentario-autor {
font-weight: 600;
color: var(--mt-gray-900);
}
/* «Tú»: marca de autoría, no un estado — pill pequeña sin punto de color */
.mt-comentario-propio {
display: inline-flex;
align-items: center;
padding: 0 8px;
border: 1px solid var(--mt-gray-300);
border-radius: var(--mt-radius-pill);
background-color: var(--mt-gray-100);
color: var(--mt-gray-600);
font-size: var(--mt-fs-caption);
line-height: 18px;
}
.mt-comentario-fecha {
font-size: var(--mt-fs-body-sm);
color: var(--mt-gray-500);
white-space: nowrap;
}
.mt-comentario-acciones {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.mt-comentario-accion {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
border: 0;
border-radius: var(--mt-radius);
background-color: transparent;
color: var(--mt-gray-500);
font-size: 16px;
line-height: 1;
transition: background-color var(--mt-dur-fast) var(--mt-ease), color var(--mt-dur-fast) var(--mt-ease);
}
.mt-comentario-accion:hover,
.mt-comentario-accion:focus-visible {
background-color: var(--mt-gray-100);
color: var(--mt-green-700);
outline: 0;
}
.mt-comentario-accion.mt-comentario-accion-eliminar:hover,
.mt-comentario-accion.mt-comentario-accion-eliminar:focus-visible {
color: var(--mt-danger-emphasis);
}
/* Los tooltips de las acciones salen a la IZQUIERDA del icono: la lista tiene
overflow-y:auto (recorta también en X) y una burbuja encima o debajo quedaría
cortada en la primera/última fila; a la izquierda siempre hay sitio. */
.mt-comentario-accion.has-tooltip::after {
bottom: auto;
left: auto;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
}
.mt-comentario-accion.has-tooltip::before {
bottom: auto;
left: auto;
right: calc(100% - 2px);
top: 50%;
transform: translateY(-50%);
border-color: transparent transparent transparent var(--mt-gray-900);
}
.mt-comentario-texto {
margin-top: 4px;
color: var(--mt-gray-800);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mt-comentario-editor {
margin-top: 8px;
}
/* ── Hilo de comentarios en formato CHAT (WhatsApp/Telegram) ────────────────
Variante del hilo de comentarios para modales donde el hilo se lee como una
conversación: burbujas, las propias a la derecha con el lavado green-50 y las
de los demás a la izquierda firmadas con el nombre. Ocupa bastante menos que
una fila por comentario porque la hora y las acciones (lápiz / papelera) van
dentro de la burbuja, en su pie. Los botones de acción siguen siendo
.mt-comentario-accion (32px de área táctil, rojo reservado al Swal). Cuando
el hilo no cabe hace scroll y se abre por el final, como un chat.
Hoy lo usan el modal de comentarios de incidencias de planta y el «Comentario
común» de los documentos de proveedor (/ver_documentos y el portal del
proveedor); los demás modales de comentarios siguen con .mt-comentarios. */
.mt-chat {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 340px;
overflow-y: auto;
}
.mt-chat-fila {
display: flex;
}
.mt-chat-fila-mia {
justify-content: flex-end;
}
.mt-chat-burbuja {
/* Como en un chat, la burbuja no llega al borde contrario: se ve de un
vistazo de qué lado es cada mensaje. */
max-width: 82%;
padding: 8px 12px;
border-radius: 12px 12px 12px 2px;
background-color: var(--mt-gray-100);
}
.mt-chat-burbuja-mia {
border-radius: 12px 12px 2px 12px;
background-color: var(--mt-green-50);
}
.mt-chat-autor {
font-size: var(--mt-fs-body-sm);
font-weight: 600;
color: var(--mt-green-700);
}
.mt-chat-texto {
color: var(--mt-gray-900);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mt-chat-pie {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
margin-top: 2px;
}
.mt-chat-hora {
font-size: var(--mt-fs-body-sm);
color: var(--mt-gray-500);
white-space: nowrap;
}
.mt-chat-editor {
margin-top: 8px;
}
/* Aire entre la topbar y el arranque del contenido: los títulos de página
(h2 al inicio de cada vista) quedaban pegados a la barra. Acotado con
[role="main"] porque .custom-container se reutiliza en header y banner. */
.custom-container[role="main"] {
padding-top: .75rem;
}
/* Responsive móvil: .custom-container es width:88% (styles.css), que en un
teléfono de ~390px regala ~47px de márgenes laterales que el contenido
necesita. En pantallas pequeñas el contenedor pasa a ancho completo (el
padding de 12px del container-fluid ya da el aire suficiente). */
@media (max-width: 767.98px) {
.custom-container {
width: 100%;
}
}
/* Buscador compacto (variante A, mockup aprobado 14/07/2026): una card de una
sola fila con labels pequeños en mayúsculas, acciones a la derecha y filtros
secundarios plegados tras «Más filtros» (collapse de Bootstrap). Sustituye a
la card «Buscador» de 3-4 filas; la cabecera verde sí se mantiene
(.mt-buscador-head), igual que la caja de filtros de la tablet. */
.mt-buscador {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: .75rem .75rem;
background-color: #fff;
border: 1px solid var(--mt-gray-200);
border-radius: var(--mt-radius);
box-shadow: var(--mt-shadow-sm);
padding: .875rem 1rem;
}
/* Cabecera «Filtros» de la barra: banda verde a sangre en la parte superior de
la card, misma pieza que la caja de filtros de la tablet (IncidencesScreen:
Green700 + título blanco). Va como primer hijo del flex y ocupa la fila
entera; los márgenes negativos cancelan el padding de la card y el `+ 2rem`
del ancho lo recupera (el 100% del flex mide solo la caja interior, sin el
padding), para que la banda llegue a los dos bordes. El radio se descuenta
1px (el grosor del borde) para que no asome un píxel gris en las esquinas
superiores — el mismo inset de 1dp que hace la Card de la tablet. */
.mt-buscador-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex: 0 0 calc(100% + 2rem);
/* min-height para que la banda mida lo mismo lleve o no la píldora «Más
filtros» (mismo criterio que el heightIn(min = 40.dp) de la tablet) */
min-height: 3rem;
margin: -.875rem -1rem 0;
padding: .5rem 1rem;
background-color: var(--mt-green-700);
border: 0;
border-radius: calc(var(--mt-radius) - 1px) calc(var(--mt-radius) - 1px) 0 0;
color: #fff;
font-family: var(--mt-font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
text-align: left;
}
/* En los buscadores con filtros secundarios la cabecera es el propio disparador
del plegable (un ): toda la banda es pulsable, no solo la píldora. */
button.mt-buscador-head {
cursor: pointer;
transition: background-color var(--mt-dur) var(--mt-ease);
}
button.mt-buscador-head:hover {
background-color: var(--mt-green-800);
}
button.mt-buscador-head:focus-visible {
outline: 2px solid #fff;
outline-offset: -5px;
}
/* Un campo del buscador: label caption arriba + control debajo. El ancho lo
pone cada vista inline (ajuste puntual de layout permitido). */
.mt-buscador-field {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-width: 0;
}
/* Responsive: los campos con control crecen desde su ancho base (inline) hasta
llenar la fila, así la barra usa todo el ancho y, cuando no cabe y salta de
línea, cada fila queda llena en vez de dejar las acciones huérfanas junto a
un hueco (captura consulta incidencias 22/07/2026). El tope evita selects
desproporcionados en pantallas muy anchas, y el :has deja fuera los campos
sin control (botones Hoy/Ayer, checkboxes), que no deben estirarse. */
.mt-buscador-field:has(.form-control) {
flex: 1 1 auto;
max-width: 26rem;
}
/* Contenedores de selects dinámicos (AJAX) vacíos: no dejan hueco */
.mt-buscador-field:empty { display: none; }
/* Botones rápidos junto a las fechas («Hoy»/«Ayer»): el btn-sm queda más bajo
que los inputs; los igualamos a la altura real de estos (40px, fijada por el
legacy `form input.form-control` de styles.css) */
.mt-buscador .btn-group > .btn {
height: 40px;
display: inline-flex;
align-items: center;
}
.mt-buscador label {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--mt-tracking-caps);
color: var(--mt-gray-600);
margin-bottom: .25rem;
}
/* Las vistas load_select_* llegan envueltas en .form-group con margen y
padding legacy (styles.css: form .form-group { padding-bottom: 7px }) —
sin el reset, sus selects quedan 7px más altos que el resto de campos */
.mt-buscador .form-group { margin-bottom: 0; padding-bottom: 0; }
/* Los select2 (también los que se cargan por AJAX) llenan el ancho del campo */
.mt-buscador-field .select2 { width: 100% !important; }
/* Subzonas AJAX (buscador de ficha de estructura): el parcial compartido
load_select_subzonas trae wrappers col-md-* y una cabecera Subzonas
pensados para los .row de los modales. En la barra compacta el select llena
el campo y la cabecera sobra (el select ya lleva su propio label) */
.mt-buscador-field .dev_select_subzona {
width: 100%;
padding: 0;
}
.mt-buscador-field > div:has(> h5) { display: none; }
/* Los labels de checkbox son frase, no caption */
.mt-buscador .form-check-label,
.mt-buscador input[type="checkbox"] + label {
text-transform: none;
letter-spacing: 0;
font-size: .85rem;
font-weight: 400;
color: var(--mt-gray-700);
margin-bottom: 0;
}
.mt-buscador-actions {
display: flex;
align-items: center;
gap: .5rem;
margin-left: auto;
}
/* El .btn legacy (styles.css §10) trae margin-top:15px y margin-right:10px;
hacían la fila de acciones más alta que los campos (el padding superior de
la barra parecía mayor que el inferior). Dentro de la barra el espaciado
lo pone el gap del contenedor. Además su padding 15px deja los botones a
50px: los igualamos a los 40px de los inputs y del grupo Hoy/Ayer para que
toda la fila comparta altura (antes sobresalían 10px por arriba). */
.mt-buscador-actions .btn {
margin-top: 0;
margin-right: 0;
height: 40px;
display: inline-flex;
align-items: center;
}
/* Fila plegable de filtros secundarios: el div .collapse (w-100) anima la
altura; esta fila interior es la que maqueta en flex */
.mt-buscador-mas {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: .75rem .75rem;
padding-top: .375rem;
}
/* Toggle «Más filtros»: botón fantasma con borde para que se vea que es
pulsable (el btn-link plano pasaba desapercibido), sin competir con la
acción primaria (Buscar). Vive junto a los campos, no con las acciones. */
.mt-buscador-toggle {
height: 40px;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: 0 .9rem;
border: 1px solid var(--mt-gray-300);
border-radius: var(--mt-radius);
background: transparent;
color: var(--mt-green-700);
font-weight: 600;
cursor: pointer;
transition: background-color var(--mt-dur) var(--mt-ease), border-color var(--mt-dur) var(--mt-ease);
}
.mt-buscador-toggle:hover,
.mt-buscador-toggle[aria-expanded="true"] {
background: var(--mt-green-50);
border-color: var(--mt-green-300);
color: var(--mt-green-700);
}
/* Dentro de la cabecera verde el toggle es solo la píldora indicadora (un
: quien recibe el clic es la cabecera entera). Blanco sólido para que
destaque sobre la banda y más bajo, para que la cabecera no crezca a la
altura de un control de formulario. */
.mt-buscador-head .mt-buscador-toggle {
height: 32px;
padding: 0 .75rem;
background: #fff;
border-color: #fff;
color: var(--mt-green-700);
font-size: .85rem;
}
.mt-buscador-head:hover .mt-buscador-toggle,
.mt-buscador-head[aria-expanded="true"] .mt-buscador-toggle {
background: var(--mt-green-50);
border-color: var(--mt-green-50);
color: var(--mt-green-700);
}
/* Chevron del botón «Más filtros», girado cuando está desplegado */
.mt-buscador [data-bs-toggle="collapse"] i {
transition: transform var(--mt-dur) var(--mt-ease);
}
.mt-buscador [data-bs-toggle="collapse"][aria-expanded="true"] i {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.mt-buscador [data-bs-toggle="collapse"] i { transition: none; }
}
/* Separación título de página ↔ fila de cabecera con el botón «Volver».
Estos botones anulan el margin-top:15px legacy de .btn con un inline
margin-top:0 (para alinearse entre ellos), lo que dejaba la fila pegada
al . Damos aire desde la fila. El :has(.fa-arrow-left) lo acota a la
fila que realmente lleva el botón de volver, no a cualquier .row tras un h2. */
h2 + .row:has(.fa-arrow-left) {
margin-top: 1.5rem;
}
/* Menú lateral B×C (sidebar oscuro de marca): grupos con cabecera pequeña,
items píldora, activo verde medio. Ver tokens.md §15.
Fondo green-800: el 900 resultó demasiado oscuro (decisión 13/07/2026). */
.mt-sidebar {
background-color: var(--mt-teal-800);
}
.mt-menu-heading {
font-size: .68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--mt-tracking-caps);
color: var(--mt-teal-400);
margin: 1rem 0 .25rem;
padding: 0 .75rem;
}
.mt-menu-link {
display: flex;
align-items: center;
gap: .6rem;
padding: .45rem .75rem;
border-radius: var(--mt-radius-btn);
color: var(--mt-teal-100);
text-decoration: none;
font-weight: 500;
}
.mt-menu-link:hover {
background-color: rgba(255, 255, 255, .08);
color: #fff;
}
.mt-menu-link.active {
background-color: var(--mt-teal-600);
color: #fff;
}
.mt-menu-link .fa {
width: 1.1em;
text-align: center;
color: var(--mt-teal-300);
}
.mt-menu-link:hover .fa,
.mt-menu-link.active .fa {
color: #fff;
}
/* Banner de modo soporte: ámbar sobrio (atención, no catástrofe). Sticky bajo
el navbar fijo. El body lleva padding-top 84px (navbar ~76px + respiro de 8px,
ver header-private); el margin-top negativo cancela ese respiro para que el
banner quede pegado al navbar, y el top sticky (76px = alto del navbar) lo
mantiene ahí al hacer scroll — el navbar (z 1030) queda por encima. */
.mt-banner-soporte {
background-color: var(--mt-warning-subtle);
color: var(--mt-warning-emphasis);
border-bottom: 1px solid var(--mt-warning-border);
border-left: 4px solid var(--mt-warning);
padding: 8px 16px;
position: sticky;
/* Altura REAL del navbar medida por JS (support_banner.php); con el 76px fijo,
en cuanto el navbar no medía exactamente eso (zoom, resolución) el banner
anclaba en un sitio distinto que las barras sticky de página (que miden el
navbar por JS) y quedaba un hueco o solape entre ambos. */
top: var(--mt-navbar-h, 76px);
margin-top: -8px;
/* +1 sobre los stickies normales (1020): el banner de soporte es el más
importante y debe quedar SIEMPRE por encima de cualquier barra sticky de
página (que se stackean debajo sumando --mt-soporte-h a su top, ver
support_banner.php). Sigue por debajo del navbar fijo (1030). */
z-index: calc(var(--mt-z-sticky) + 1);
}
@media (max-width: 767px) {
.mt-banner-soporte { top: var(--mt-navbar-h, 80px); }
}
.mt-banner-soporte .btn-salir-soporte {
background-color: transparent;
border: 1px solid var(--mt-warning-emphasis);
color: var(--mt-warning-emphasis);
/* Compacto como btn-sm pero con el texto al tamaño del banner */
padding: 3px 14px;
font-size: 15px;
/* styles.css legacy mete margin 15px 10px 0 0 a los .btn: desalineaba el
botón y engordaba la fila del banner */
margin: 0;
}
.mt-banner-soporte .btn-salir-soporte:hover {
background-color: var(--mt-warning-emphasis);
color: #fff;
}
/* Loading de página (.page_loading): lo muestran script.js (page_loading())
y el sProcessing de DataTables. Nunca tuvo CSS (el div iba vacío e
invisible); ahora es el spinner corporativo centrado. */
.page_loading {
display: none;
visibility: hidden;
text-align: center;
padding: 1.25rem 0;
}
/* Dentro del "Procesando..." de DataTables el wrapper lo muestra/oculta
DataTables, así que el loading interno va siempre visible */
.dataTables_processing .page_loading {
display: block;
visibility: visible;
padding: 0;
}
/* Overlay de carga estándar: se coloca dentro de un contenedor con
position relative y lo cubre entero con el spinner corporativo. */
.mt-loading-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, .7);
border-radius: inherit;
z-index: 10;
}
/* Overlay de navegación a pantalla completa: feedback al pulsar botones de
acción/navegación pequeños dentro de tablas (donde el spinner dentro del
propio botón queda apretado). script.js lo inyecta al hacer clic y
desaparece al cargar la nueva página. Mismo atenuado que
.mt-loading-overlay pero fijado al viewport. */
.mt-page-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, .7);
z-index: 2000;
}
/* Cifras tabulares para celdas numéricas de tablas (los números alinean) */
.mt-tnum {
font-variant-numeric: tabular-nums;
}
/* ── Piezas de composición (tokens.md §12 y §18 — Refactoring UI) ─────────── */
/* Línea secundaria bajo un valor principal (celdas de tabla, filas de lista,
stats): la jerarquía la dan tamaño y color, no una columna/etiqueta más */
.mt-sub {
display: block;
font-size: var(--mt-fs-body-sm);
line-height: 1.4;
color: var(--mt-gray-500);
}
/* Miniatura de imagen subida por el usuario (fotos de incidencias, imágenes de
elementos) en celdas de tabla y listas: caja fija cuadrada con recorte
(object-fit: cover), nunca al ratio intrínseco (tokens.md §18.7) — así todas
las miniaturas miden lo mismo y la altura de fila no se dispara. El outline
translúcido (pintado ENCIMA de la foto; un box-shadow inset quedaría tapado
por la propia imagen) evita el «sangrado» de fotos con fondo blanco sobre la
celda blanca. */
.mt-thumb {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: var(--mt-radius);
outline: 1px solid rgba(27, 33, 30, .08); /* gray-900 al 8% */
outline-offset: -1px;
cursor: pointer;
}
/* Contador «+N» de imágenes adicionales: overlay DENTRO de la esquina de la
miniatura (el td de DataTables lleva overflow hidden y un badge colgado fuera
del borde se recorta). El contenedor de la miniatura debe llevar
position-relative. */
.mt-thumb-badge {
position: absolute;
bottom: 2px;
right: 2px;
padding: 2px 4px;
background-color: rgba(27, 33, 30, .65); /* gray-900 al 65% */
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 1;
border-radius: 4px;
pointer-events: none;
}
/* Dato con etiqueta: la etiqueta es apoyo (caption uppercase gris) y el valor
manda. Para cabeceras de resumen y paneles de cifras. */
.mt-stat {
display: flex;
flex-direction: column;
gap: .25rem; /* espaciado paso 1 */
}
.mt-stat-label {
font-size: var(--mt-fs-caption);
font-weight: 600;
letter-spacing: var(--mt-tracking-caps);
text-transform: uppercase;
color: var(--mt-gray-600);
}
.mt-stat-value {
font-size: var(--mt-fs-h2);
font-weight: 700;
line-height: 1.2;
color: var(--mt-gray-900);
font-variant-numeric: tabular-nums;
}
/* Variante compacta del valor (H4 16px) para bandas densas de muchos stats. */
.mt-stat-value-sm {
font-size: var(--mt-fs-h4);
font-weight: 600;
line-height: 1.3;
}
/* Cabecera de metadatos de fichas (ficha_estructura_control), estilo «ficha
técnica»: cada par etiqueta-valor como stat vertical (caption encima del
valor) fluyendo en horizontal para aprovechar el ancho de la tarjeta,
agrupados por familias (registro / planificación / extras) con un hairline
vertical entre grupos, y el pie de documento (código / revisión / fecha).
Iteración 24/08/2026: la versión en columna fija etiqueta|valor dejaba
media tarjeta vacía a la derecha. */
.mt-statband-card {
background: #fff;
border: 1px solid var(--mt-gray-200);
border-radius: var(--mt-radius);
box-shadow: var(--mt-shadow-sm);
padding: 20px 24px;
}
.mt-statband-deflist {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 32px;
row-gap: 16px;
}
/* Cada par etiqueta+valor: bloque vertical con la etiqueta caption encima. */
.mt-statband-stat {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
/* Separación entre familias de stats (registro / planificación / extras): el
último stat de cada familia lleva margen extra a la derecha, así el salto de
familia se lee como espacio (32px dentro, 64px entre familias).
Antes había un hairline vertical como elemento propio, pero con valores
largos («Realizan el registro» con 15 usuarios) la fila envolvía y el
hairline caía al principio de la línea siguiente: quedaba una rayita suelta
y el resto de stats sangrados. El margen derecho es invisible cuando el
stat termina la línea, así que no puede descolocar nada. */
.mt-statband-stat--fin-grupo {
margin-right: 32px;
}
.mt-statband-deflist-label {
font-size: var(--mt-fs-caption);
font-weight: 600;
letter-spacing: var(--mt-tracking-caps);
text-transform: uppercase;
color: var(--mt-gray-500);
}
.mt-statband-deflist-value {
font-size: var(--mt-fs-h4);
font-weight: 600;
color: var(--mt-gray-900);
}
.mt-statband-deflist-value .mt-statband-sub {
font-weight: 400;
color: var(--mt-gray-600);
}
/* «X veces al día» con las horas en el tooltip común: subrayado punteado como
pista de hover, y burbuja multilínea (la lista de horas desborda el nowrap
por defecto de .has-tooltip). */
.mt-statband-sub .has-tooltip {
text-decoration: underline dotted;
text-underline-offset: 3px;
cursor: help;
}
.mt-statband-sub .has-tooltip::after {
white-space: normal;
width: max-content;
max-width: 320px;
}
/* En estrecho la fila no cabe: los stats se apilan en columna y la separación
entre familias pasa de horizontal a vertical. */
@media only screen and (max-width: 575px) {
.mt-statband-deflist {
flex-direction: column;
row-gap: 12px;
}
.mt-statband-stat--fin-grupo {
margin-right: 0;
margin-bottom: 8px;
}
}
.mt-statband-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--mt-gray-200);
font-size: var(--mt-fs-body-sm);
color: var(--mt-gray-500);
}
.mt-statband-foot b {
color: var(--mt-gray-700);
font-weight: 600;
}
.mt-statband-dot {
color: var(--mt-gray-300);
}
/* ── Pie de leyenda de las fichas (.mt-ficha-leyenda) ─────────────────────────
Plegada por defecto (una línea con ellipsis) y botón «Ver leyenda» que la
despliega, igual que en la tablet. Nació en la ficha de registro
(ficha_control_calendario) y se comparte con la ficha de estructura. */
.mt-ficha-leyenda {
display: flex;
align-items: baseline;
gap: 12px;
padding: 11px 18px;
border-top: 1px solid var(--mt-gray-200);
background-color: var(--mt-gray-100);
border-radius: 0 0 var(--mt-radius) var(--mt-radius);
font-size: 13.5px;
}
.mt-ficha-leyenda .mt-leyenda-label {
flex: none;
font-size: 12.5px;
color: var(--mt-gray-600);
}
.mt-ficha-leyenda .mt-leyenda-texto {
flex: 1;
min-width: 0;
color: var(--mt-gray-700);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-ficha-leyenda.mt-leyenda-abierta .mt-leyenda-texto {
white-space: normal;
overflow: visible;
}
/* Botón desnudo a propósito: con .btn heredaría el margin 15px 10px del legacy
(styles.css §10) y descuadraría la línea del pie. */
.mt-ficha-leyenda .mt-leyenda-toggle {
flex: none;
background: none;
border: 0;
padding: 0;
font-size: 13px;
font-weight: 600;
color: var(--mt-green-700);
white-space: nowrap;
}
.mt-ficha-leyenda .mt-leyenda-toggle:hover {
text-decoration: underline;
}
/* Dentro de la tarjeta de stats (ficha de estructura): la tarjeta lleva padding
20px 24px, así que el pie sangra en negativo para ocupar el ancho completo. */
.mt-statband-card .mt-ficha-leyenda {
margin: 16px -24px -20px;
}
/* Barra de acciones sticky de las fichas (Volver + Editar/Actualizar/…): al
scrollear queda pegada bajo el navbar fijo (altura medida --mt-navbar-h,
como el resto de stickies + banner de soporte si lo hay), con fondo blanco
para tapar el contenido que pasa por debajo. La barra de revisión de carga
IA (ficha_estructura_control) se apila debajo sumando los ~62px de esta. */
.mt-ficha-actions {
position: sticky;
top: calc(var(--mt-navbar-h, 76px) + var(--mt-soporte-h, 0px));
z-index: var(--mt-z-sticky);
background: #fff;
/* Full-bleed: la superficie de la barra rompe el container (.custom-container,
width 88% centrado) y ocupa todo el ancho del viewport, como el navbar; el
padding horizontal devuelve el contenido a la alineación del container.
100vw incluye el scrollbar, así que sobresale ~7px por cada lado: lo recorta
el overflow-x:clip de (regla de abajo). El sticky no se rompe porque
el overflow se gestiona SOLO en (ver memoria banner soporte). */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 12px calc(50vw - 50%);
transition: box-shadow var(--mt-dur-fast) var(--mt-ease);
}
/* Recorte del desbordamiento horizontal del truco full-bleed (50vw incluye el
ancho del scrollbar). En y con clip, a propósito:
- clip no crea scroll container → los position:sticky siguen anclando al
scroller de la página;
- en (y NO en ): con overflow-x en , el overflow:hidden
que Bootstrap pone en al abrir un modal dejaría de propagarse al
viewport, el body pasaría a ser el scroll container (scroll 0) y las
barras sticky «desaparecerían» mientras el modal está abierto;
- como queda visible, este clip del body se propaga al viewport y
no aparece scrollbar horizontal. Las tablas anchas ya scrollean dentro
de .mt-dt-scroll. */
body {
overflow-x: clip;
}
/* El scroller de la página no re-ancla (scroll anchoring de Chrome): al abrir
un modal, Bootstrap pone overflow:hidden en el body y las barras sticky
full-bleed de las fichas cambian de geometría; el anclaje lo «compensaba»
desplazando el documento (~98px de hueco al principio de la página, visible
detrás del modal de Actualizar controles). Sin anclaje, el scroll se queda
exactamente donde estaba. */
html {
overflow-anchor: none;
}
/* Y el gesto de rueda/trackpad dentro de un modal alto no encadena al
documento al llegar al tope (scroll chaining): la página de detrás se
quedaba desplazada, el mismo hueco de arriba por otra vía. */
.modal {
overscroll-behavior-y: contain;
}
/* Botón de quitar una miniatura (fotos de incidencia…): circulito con scrim
oscuro translúcido y × blanca DENTRO de la esquina de la imagen — ni rojo
(quitar una foto no es destructivo-semántico) ni desbordado (tapaba la
línea de texto de arriba). */
.mt-foto-quitar {
position: absolute;
top: 4px;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(var(--mt-gray-800-rgb), .55);
color: #fff;
font-size: 11px;
line-height: 1;
text-decoration: none;
transition: background var(--mt-dur-fast) var(--mt-ease);
}
.mt-foto-quitar:hover,
.mt-foto-quitar:focus-visible {
background: rgba(var(--mt-gray-800-rgb), .8);
color: #fff;
}
/* Ancho contenido para selects/inputs de nombre de persona (§18.3: el ancho
del control insinúa la longitud del dato; un nombre no necesita la fila
entera cuando la columna se apila). La segunda regla capa también el
contenedor que select2 inserta justo después del original. */
.mt-w-nom {
max-width: 320px;
}
.mt-w-nom + .select2-container {
max-width: 320px;
}
.mt-ficha-actions > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
/* Pegada (is-stuck, JS de la ficha): deja de ser una fila suelta y se lee
como barra — hairline inferior + sombra corta que la separa del contenido
que pasa por debajo. */
.mt-ficha-actions.is-stuck {
border-bottom: 1px solid var(--mt-gray-200);
box-shadow: var(--mt-shadow-sm);
}
/* Hueco de la barra de ficha donde aterrizan las acciones de la cabecera de
sección («Opciones control» / «Añadir elemento») cuando esa cabecera pasa por
debajo, para tenerlas a mano con la lista recorrida (JS de la ficha de
control). Vacío no ocupa: la barra se ve igual que siempre. */
.mt-ficha-actions-slot {
display: inline-flex;
align-items: center;
gap: 8px; /* espaciado paso 2 */
vertical-align: middle;
margin-right: 8px;
}
.mt-ficha-actions-slot:empty {
display: none;
}
/* Dentro de la barra mandan el gap y el alto de la fila, no los márgenes legacy
de .btn (styles.css). */
.mt-ficha-actions-slot .btn {
margin-top: 0;
margin-right: 0;
}
/* Nombre del control dentro de la barra: aparece (is-stuck, JS de la ficha)
solo cuando el título h2 de la página ya no se ve. */
.mt-ficha-actions .mt-ficha-actions-nom {
min-width: 0;
font-size: var(--mt-fs-h4);
font-weight: 600;
color: var(--mt-gray-900);
opacity: 0;
transition: opacity var(--mt-dur-fast) var(--mt-ease);
}
.mt-ficha-actions.is-stuck .mt-ficha-actions-nom {
opacity: 1;
}
/* Barra de acciones de una sección (cabecera de la pestaña Elementos de la
ficha de control: título + «Opciones control» / «Añadir elemento»). Son
acciones del CONTENIDO, no del registro, así que viajan juntas y se pegan
debajo de la barra de ficha en lugar de subir a ella. El top se apila sobre
la altura real de esa barra (--mt-ficha-actions-h, publicada por el JS de la
ficha) y no sobre un alto fijo, que se rompía si la fila hacía wrap. */
.mt-section-actions {
position: sticky;
top: calc(var(--mt-navbar-h, 76px) + var(--mt-soporte-h, 0px) + var(--mt-ficha-actions-h, 62px));
/* Un escalón por debajo de la barra de ficha: al alcanzarla pasa bajo su
sombra en vez de montarse encima. */
z-index: calc(var(--mt-z-sticky) - 1);
background: #fff;
align-items: center;
/* Mismo full-bleed que .mt-ficha-actions (ver arriba): la superficie tapa
todo el ancho y el padding devuelve el contenido a la alineación del
container. */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 10px calc(50vw - 50%);
transition: box-shadow var(--mt-dur-fast) var(--mt-ease),
padding-top var(--mt-dur-fast) var(--mt-ease),
padding-bottom var(--mt-dur-fast) var(--mt-ease);
}
.mt-section-actions > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
/* Las dos barras acaban en el MISMO borde derecho. La regla general de arriba
(«Cabecera de página con la acción a la derecha») solo alcanza al último hijo
cuando es el propio .btn: en la barra de ficha el último es el envoltorio del
menú ⋮ (y en soporte, el form/btn-group de las cargas), así que el
margin-right:10px legacy de styles.css se quedaba dentro y la fila de arriba
terminaba 10px antes que la de abajo. `:last-of-type` y no `:last-child`
porque dentro del envoltorio el botón lleva detrás su