/* ============================================================================ configuracion_modern.css — lo propio de las dos pantallas de Configuración ---------------------------------------------------------------------------- Se carga DESPUES de suizo_modern.css, que es donde vive el rediseño tipografico suizo entero: los tokens, el papel, los dos tipos, la seccion numerada, el campo, el interruptor, la barra de acciones, los botones, el aviso, la tarjeta de resultado y los diecinueve iconos dibujados. TODO va acotado a .ifx-config , que llevan en su
las dos subpantallas del menu: configuracion_variables.php "Monitoreo de variables" configuracion_alertas.php "Mis alertas" Las dos llevan ademas .ifx-form y .ifx-suizo, en ese orden, y de ahi les llega todo lo demas. Aqui solo queda lo que no tiene ninguna otra pantalla: el encabezado el filete grueso con el nombre de la subpantalla la periodicidad el campo con su unidad pegada al lado la tabla los seis rangos, en reja de tres columnas los canales los tres interruptores de "Mis alertas" ---- POR QUE UNA SOLA HOJA PARA LAS DOS PANTALLAS -------------------------- Porque son dos caras de lo mismo: la configuracion del monitoreo. Comparten el encabezado entero y la barra, y lo unico que cambia es que va en medio. Es el mismo criterio de catalogos_modern.css, que viste tres pantallas. ---- LO QUE NO SE TOCO ----------------------------------------------------- Ni un name de campo, ni una validacion, ni una consulta. Las dos pantallas guardan exactamente las mismas columnas que guardaban, con el mismo SQL. Lo que cambio es el marcado de la VISTA: de de maquetacion y .form-horizontal con la etiqueta en col-md-3, a la hoja suiza. ========================================================================== */ /* ========================= LO QUE VA EN MONO AQUI ========================= La lista comun esta en suizo_modern.css. Estas son las lecturas propias de Configuración, y las dos son lo mismo: NUMEROS DE INSTRUMENTO. Los nombres de las variables (He_Level, Coldhead_Ru0) son los identificadores tal como los escupe el equipo, no palabras; y los minutos y los rangos son medidas. Con cifras tabulares las seis filas de rangos se leen en columna, que es justo para lo que sirve una tabla de rangos: comparar de un vistazo. */ .ifx-config .ifx-cf-var, .ifx-config .ifx-cf-tabla .form-control, .ifx-config .ifx-cf-periodo .form-control { font-family: var(--pf-mono); font-variant-numeric: tabular-nums; } /* ============================== EL ENCABEZADO ============================= No hay credencial ni anillo que valga: esto no es la ficha de nadie, es un ajuste del sistema. El encabezado es el membrete de la hoja y nada mas — filete grueso, de que seccion es, como se llama la subpantalla y que hace— con la misma escala tipografica que el de "Mi información" para que las dos se lean como la misma hoja. El

con el engrane que traia el tema ("Configuración" y nada mas) decia menos que el propio menu: no distinguia entre las dos subpantallas, que es lo unico que hacia falta saber al llegar. */ .ifx-config .ifx-cf-cab { padding: 12px 0 16px; border-top: 3px solid var(--pf-tinta); border-bottom: 1px solid var(--pf-linea); } .ifx-config .ifx-cf-seccion { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--pf-gris); } /* Lo unico grande de la pantalla. */ .ifx-config .ifx-cf-titulo { margin: 0; font-size: 33px; font-weight: 600; line-height: 1.06; letter-spacing: -.024em; color: var(--pf-tinta); overflow-wrap: break-word; } .ifx-config .ifx-cf-bajada { margin: 10px 0 0; max-width: 60ch; /* la medida: nunca mas de 60 caracteres por renglon */ font-size: 13px; line-height: 1.5; color: var(--pf-gris); } /* ============================== LA PERIODICIDAD =========================== El campo y su unidad, pegados. La etiqueta vieja se llamaba "Intervalo de alertas de VARIABLES (en minutos):" y metia la unidad DENTRO del nombre del campo, en mayusculas y con dos puntos. La unidad no es parte del nombre: es parte del dato, y va donde se escribe el dato. El ancho del campo tampoco es libre. Un intervalo en minutos son tres o cuatro cifras; una caja de texto de media pantalla para escribir "600" promete un dato que no existe. */ .ifx-config .ifx-cf-periodo { display: grid; grid-template-columns: 130px auto; align-items: center; gap: 10px; } .ifx-config .ifx-cf-unidad { font-size: 12.5px; color: var(--pf-gris); white-space: nowrap; } /* ================================ LA TABLA ================================ Los seis rangos. Antes eran DOCE renglones sueltos, cada uno con su etiqueta repitiendo el nombre de la variable ("He_Level (%) Rango superior:", "He_Level (%) Rango inferior:") y un campo a media pantalla. Para comprobar que un rango tiene sentido habia que leer dos renglones separados y recordar el numero del primero. Aqui son una reja de tres columnas —variable, minimo, maximo— con los encabezados escritos UNA vez arriba. Es la forma de una hoja de especificaciones de equipo, que es exactamente lo que es. El orden cambio a minimo-maximo. En el formulario viejo el superior iba primero: se captura de mayor a menor y se lee de menor a mayor. Los name de los campos NO cambiaron, solo el orden en que salen. ---- LOS FILETES ---------------------------------------------------------- Uno por renglon, y uno mas grueso bajo los encabezados. Es lo unico que separa las filas: ni fondos alternos ni marcos. */ .ifx-config .ifx-cf-tabla { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; } /* Los encabezados. En caja baja y en gris: son rotulos de columna, no titulos, y en versalitas espaciadas pesarian mas que los datos. */ .ifx-config .ifx-cf-th { padding: 0 0 7px; font-size: 12px; font-weight: 500; color: var(--pf-gris); } /* El filete de cabecera es UNA pieza que cruza las tres columnas, y no el borde de cada encabezado: con el borde por celda, el hueco de 18px entre columnas parte la linea en tres trozos y la tabla deja de leerse como una tabla. Las lineas de cada fila ya cruzan enteras —las pone la celda de mensajes, que abarca 1/-1— asi que asi las cuatro son iguales. */ .ifx-config .ifx-cf-regla { grid-column: 1 / -1; border-bottom: 1.5px solid var(--pf-tinta); } /* Cada celda del cuerpo. NO lleva filete: el de la fila lo pone la celda de mensajes, que cruza las tres columnas (ver mas abajo). Si lo llevara cada celda, una fila con error saldria con DOS lineas —la de las celdas y la de abajo del mensaje— separadas por el alto del texto. */ .ifx-config .ifx-cf-td { padding: 12px 0; min-width: 0; } /* El nombre se centra con sus dos campos. La celda es quien centra y no el de dentro: en una reja, la celda se estira al alto de la fila y el span no, asi que centrando el span se centraba dentro de si mismo —o sea, nada— y el nombre quedaba 13px por encima del texto de los campos. */ .ifx-config .ifx-cf-td-var { display: flex; align-items: center; } .ifx-config .ifx-cf-var { display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--pf-tinta); letter-spacing: -.01em; overflow-wrap: anywhere; } /* El mensaje de error de una fila va DEBAJO y cruzando las tres columnas, no dentro de la celda: "El rango superior debe ser mayor que el rango inferior" no cabe en una columna de 150px, y partido en cuatro renglones dentro de la celda descuadra la fila entera. Esta celda es ademas la que CIERRA la fila con su filete, tenga mensaje o no: asi cada fila tiene exactamente una linea abajo, siempre en el mismo sitio. Cuando va vacia se queda sin alto y solo se ve la raya. */ .ifx-config .ifx-cf-td-error { grid-column: 1 / -1; padding: 0 0 12px; border-bottom: 1px solid var(--pf-linea); } .ifx-config .ifx-cf-td-error-vacia { padding: 0; } /* La fila con un dato mal se marca entera con un filete de ladrillo a la izquierda del nombre, en vez de pintar de rojo las tres celdas. */ .ifx-config .ifx-cf-td-mal .ifx-cf-var { box-shadow: inset 3px 0 0 var(--ifx-alerta); padding-left: 11px; } /* ================================ LOS CANALES ============================= Los tres interruptores de "Mis alertas". Se apilan con un filete entre ellos: son tres opciones del mismo grupo, no tres bloques distintos. El marcado viejo eran tres

con un suelto dentro y un margin-top de 8px en linea; el texto iba a tamaño de titulo y la casilla quedaba flotando a su izquierda sin etiqueta asociada, asi que al hacer clic en el texto no pasaba nada. Ahora cada uno es un