deja de expandir al
ancestro y pasa a desplazarse el mismo. */
.main-content > table,
.content-section > table,
.admin-form > table {
display: block;
overflow-x: auto;
max-width: 100%;
}
/* Las celdas no se parten en varias lineas: es preferible desplazar la
tabla que apilar un dato numerico en tres renglones. */
.data-table th,
.data-table td,
.registros-table th,
.registros-table td {
white-space: nowrap;
}
/* Los de diagnostico de la IA y los JSON de payload desbordaban. */
pre, code {
white-space: pre-wrap;
overflow-wrap: break-word;
max-width: 100%;
}
/* Los lienzos de Chart.js necesitan un padre que no crezca con ellos. */
.chart-wrap,
.dash-chart-wrap,
.tend-chart-wrap,
.acum-chart-wrap,
.setpoint-chart-wrap {
max-width: 100%;
overflow: hidden;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
8. OBJETIVOS TACTILES
La guia de interfaz de Apple pide 44x44 px como minimo alcanzable con el
dedo; Material Design pide 48. Medidos 139 de 154 controles por debajo de 44,
y 115 por debajo de 32. Se amplian solo en punteros gruesos (dedo), asi que
el raton en escritorio conserva la densidad actual.
══════════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
button,
.btn,
a.btn,
[role="button"],
input[type="submit"],
input[type="button"],
.nav-item,
.nav-group-toggle,
.mobile-header__grid-btn {
min-height: 44px;
min-width: 44px;
}
/* Los iconos-boton de las tablas (editar, anular) son los mas pequenos y
los mas propensos a un toque erroneo, justo donde mas duele. */
.data-table button,
.registros-table button,
.table-container button {
min-height: 40px;
min-width: 40px;
}
/* Las casillas de seleccion nativas son diminutas en movil. */
input[type="checkbox"],
input[type="radio"] {
min-width: 22px;
min-height: 22px;
}
/* Separacion entre controles contiguos: sin ella, ampliarlos solo consigue
que se toquen entre si. */
.form-actions,
.toolbar-actions,
.aud-field--actions {
gap: 10px;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
9. PANTALLAS GRANDES
No habia ningun tope de ancho ni media query por encima de 1440px: en un
monitor 4K o ultrawide el contenido se estiraba de borde a borde, con
formularios de una sola columna a 3000px y lineas de texto ilegibles.
El tope arranca en 1800px para no alterar ninguna resolucion habitual
(1366, 1440, 1600, 1920 quedan intactas).
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1800px) {
.main-content {
/* OJO: NO usar margin-left/right:auto aqui. .main-content es un flex item
de .main (flex-direction:column), y un margen auto en el eje transversal
DESACTIVA el stretch del cross-axis: la caja se encoge a su ancho de
contenido y se centra, dejando cientos de px muertos a cada lado en TODAS
las secciones (las graficas quedaban a 322px de 1713 disponibles).
align-self:center + width:100% centra igual sin perder el estirado. */
width: 100%;
max-width: 1720px;
align-self: center;
}
}
@media (min-width: 2400px) {
/* En ultrawide de verdad, tambien se limita el formulario para que sus
campos no queden separados por medio metro de vacio. */
.admin-form {
max-width: 1400px;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
10. IMPRESION Y MOVIMIENTO REDUCIDO
admin.css ya cubre @media print y prefers-reduced-motion. Aqui solo se anade
lo que la capa nueva podria haber roto.
══════════════════════════════════════════════════════════════════════════════ */
@media print {
.mobile-header,
.mobile-nav-backdrop {
display: none !important;
}
.main-content {
max-width: none;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
VENTANA DE UN PARAMETRO EN MOVIL
══════════════════════════════════════════════════════════════════════════════
monitoreo.css oculta el panel lateral por debajo de 768 px. Con eso se pierde
la mitad util de la ventana: situarse en un instante y ver como estaba TODO el
equipo en ese momento. En vez de esconderlo, se apila bajo la grafica.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.kpi-modal__body {
flex-direction: column;
}
/* Vuelve a la vista, ahora debajo y con su propio desplazamiento. */
.kpi-modal__params-panel {
display: flex !important;
width: 100%;
max-height: 42%;
border-left: none;
border-top: 1px solid rgba(100, 116, 139, .22);
}
/* La lista es lo unico que se desplaza; la cabecera con la hora se queda. */
.kpi-modal__params-panel .params-panel__list {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* La grafica cede altura al panel, pero conserva un minimo legible. */
.kpi-modal__chart-area {
flex: 1 1 auto;
min-height: 46%;
padding: 8px 10px 10px;
}
.kpi-modal__chart-wrap {
min-height: 180px;
}
}
/* En tableta hay sitio de sobra para el panel al lado, solo algo mas estrecho. */
@media (min-width: 768px) and (max-width: 1024px) {
.kpi-modal__params-panel {
width: 190px;
}
}