/* ═══════════════════════════════════════════════════════════════════ SIGES — Fundamentos visuales ESTE ES EL ÚNICO ARCHIVO CON VALORES DE COLOR Y TIPOGRAFÍA. Para cambiar la apariencia de toda la aplicación, edita las variables de :root. Nada más necesita tocarse. Tiene dos temas — día (gris claro) y noche (gris oscuro) — que se activan poniendo data-tema="dia" o data-tema="noche" en . El botón de la cabecera cambia entre ellos y recuerda la elección. ═══════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────── FUENTES Van dentro del proyecto, no enlazadas desde Google. Dos razones: · La aplicación tiene que verse igual sin señal, y en campo eso es lo normal. Una fuente que no carga cambia el ancho de todo y descuadra la pantalla justo cuando peor viene. · Enlazarlas desde fuera obligaría a abrir la Content Security Policy a otro dominio. Menos puertas, mejor. font-display: swap — se ve el texto de inmediato con la fuente del sistema y se cambia a la buena cuando llega. Nunca hay un hueco en blanco esperando. ─────────────────────────────────────────────────────────────────── */ /* Inter — texto general, botones, formularios */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); } /* Space Grotesk — títulos y cifras grandes */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); } /* JetBrains Mono — IP, MAC, seriales, códigos de UF. Distingue 0 de O y 1 de l, que en este trabajo importa. */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); } /* ─────────────────────────────────────────────────────────────────── PALETA Los valores vienen de la maqueta de rediseño (diseno/…v2.html). El azul genérico anterior se reemplazó por el verde azulado de la marca: además de ser el color del proyecto, no se confunde con los enlaces del navegador ni con los azules de Windows y Android. ─────────────────────────────────────────────────────────────────── */ :root, [data-tema="dia"] { /* ── Superficies ──────────────────────────────────────────────── El fondo es hueso, no blanco puro: al sol, el blanco puro deslumbra y cansa la vista más rápido. */ --fondo: #f6f6f3; --superficie-1: #ffffff; /* barras, encabezados */ --superficie-2: #f0f0ec; /* tarjetas, campos */ --superficie-3: #e7e7e2; /* elementos elevados */ /* ── Bordes ───────────────────────────────────────────────────── Gruesos (2px) en elementos importantes: bajo reflejo solar los bordes finos desaparecen. */ --borde: #dfdfda; --borde-fuerte: #c6c6c0; --borde-sutil: #ececE7; /* ── Texto ────────────────────────────────────────────────────── */ --texto: #131315; /* casi negro, máximo contraste */ --texto-2: #45464b; /* secundario, aún muy legible */ --texto-3: #6c6d72; /* etiquetas, metadatos */ --texto-4: #8a8b90; /* deshabilitado, placeholders */ --texto-5: #c6c6c0; /* apenas visible */ /* ── Color de acción — verde azulado de marca ────────────────── */ --accion: #0b4b5a; --accion-claro: #1c8fa3; --accion-fondo: #e1eff1; --accion-borde: #b9d7dd; } [data-tema="noche"] { /* ── Superficies ──────────────────────────────────────────────── Gris medio-oscuro, no negro. El negro absoluto parece dar contraste, pero cansa: la pupila se abre para el fondo y se cierra de golpe con cada texto claro, y en una jornada larga eso se nota. Con un gris más alto el ojo trabaja menos y las tarjetas se separan del fondo por su propio tono, sin depender del borde —que es lo primero que deja de verse a partir de cierta edad. Es el mismo criterio de las herramientas pensadas para estar horas delante: oscuro para no deslumbrar, nunca apagado. */ --fondo: #1e2126; --superficie-1: #272b31; --superficie-2: #31353c; --superficie-3: #3d424a; /* Bordes visibles. Los finos y apagados desaparecen para quien tiene la vista cansada, y con ellos se pierde la separación entre una tarjeta y la siguiente. */ --borde: #4c525b; --borde-fuerte: #666d78; --borde-sutil: #383d44; /* ── Texto ────────────────────────────────────────────────────── Los cuatro niveles subieron de claridad. El gris apagado que se lee bien a los treinta años deja de leerse a los sesenta, y aquí hay gente de las dos edades usando la misma pantalla. Ninguno baja de una relación de contraste de 4.5:1 contra su fondo, que es el mínimo que recomienda la norma de accesibilidad para texto normal. */ --texto: #f7f8f8; --texto-2: #d3d5d9; /* antes #b6b7bc */ --texto-3: #aeb1b6; /* antes #8a8b90 */ --texto-4: #8d9096; /* antes #6c6d72 */ --texto-5: #63666c; /* El verde azulado se aclara bastante: sobre oscuro, el tono de marca queda demasiado apagado para servir de color de acción. */ --accion: #3fb6cc; --accion-claro: #7ee0f0; --accion-fondo: #1a454f; --accion-borde: #2a7488; } :root { /* ── Colores semánticos ───────────────────────────────────────── Cada tipo de dato tiene un color fijo en toda la app: el técnico aprende a reconocerlos de un vistazo. */ --ip: #6fd2fa; /* direcciones IP */ --ip-fondo: #1c3450; --ip-borde: #27527d; --red: #8ede8e; /* máscara, segmento */ --red-fondo: #1d3320; --red-borde: #1e4d1e; --enlace: #cdb5ff; /* puerta de enlace */ --ok: #3ceeb4; /* operativo, UF, éxito */ --ok-fondo: #163d2f; --ok-borde: #14563c; --alerta: #ffa15f; /* pendiente, novedades */ --alerta-fondo: #3d2716; --alerta-borde: #5c3413; --falla: #ff6b6b; /* en falla, eliminar, error */ --falla-fondo: #3d2020; --falla-borde: #5e2626; --info: #b79dff; /* tipos, categorías */ --info-fondo: #2a2542; --info-borde: #43326e; /* Texto que va ENCIMA de uno de estos colores como fondo. En tema noche los colores son claros, así que encima va negro. */ --sobre-color: #000; } /* ─────────────────────────────────────────────────────────────────── LOS MISMOS COLORES, PARA TEMA CLARO Los de arriba están pensados para fondo oscuro: son brillantes y sus fondos casi negros. Puestos sobre una pantalla blanca, una tarjeta quedaba verde muy oscura y el texto dentro no se leía. Aquí van las mismas ideas con los valores invertidos: el color principal se oscurece para que contraste con el blanco, y el fondo se vuelve un tinte muy claro del mismo tono. ─────────────────────────────────────────────────────────────────── */ [data-tema="dia"] { --ip: #0b6fb8; --ip-fondo: #e8f3fb; --ip-borde: #b6d9f0; --red: #1f7a35; --red-fondo: #ebf7ee; --red-borde: #bfe3c8; --enlace: #6d4bd6; --ok: #0a7c5a; --ok-fondo: #e8f7f1; --ok-borde: #b3e3d1; --alerta: #b35c00; --alerta-fondo: #fff3e8; --alerta-borde: #ffd7b0; --falla: #c62828; --falla-fondo: #fdeded; --falla-borde: #f6c4c4; --info: #6d4bd6; --info-fondo: #f1edfd; --info-borde: #d7cbf7; /* Aquí los colores son oscuros, así que encima va blanco */ --sobre-color: #fff; } /* ─────────────────────────────────────────────────────────────────── MEDIDAS Van en :root y NO dentro de un tema: tipografía, espaciado y radios son iguales de día y de noche. Tenerlas dentro de un tema fue un error que dejó la aplicación sin fuentes ni medidas al cambiar a modo oscuro — se desarmó entera. ─────────────────────────────────────────────────────────────────── */ :root { /* ── Tipografía ───────────────────────────────────────────────── Detrás de cada fuente va siempre la del sistema como respaldo. Si un archivo no llegara a cargar, el texto se sigue leyendo — distinto, pero legible. En campo eso no es negociable. */ /* Texto general, botones, formularios */ --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Títulos y cifras grandes */ --fuente-titulo: 'Space Grotesk', var(--fuente); /* Datos técnicos: IP, MAC, seriales, códigos de UF. Es de ancho fijo y distingue 0 de O, 1 de l — leyendo una IP mal anotada eso ahorra un viaje. */ --fuente-datos: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; /* Escala tipográfica — generosa para lectura en campo */ --txt-xs: 12px; --txt-sm: 13px; --txt-base: 15px; --txt-md: 16px; --txt-lg: 19px; --txt-xl: 22px; --txt-2xl: 30px; --peso-normal: 450; --peso-medio: 550; --peso-fuerte: 700; /* ── Espaciado ────────────────────────────────────────────────── */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; /* ── Bordes redondeados ───────────────────────────────────────── */ --r-sm: 6px; --r: 9px; --r-md: 12px; --r-lg: 16px; --r-full: 999px; /* ── Medidas de estructura ────────────────────────────────────── */ --alto-header: 56px; --alto-nav: 64px; --ancho-lateral: 240px; --seguro-abajo: env(safe-area-inset-bottom, 0px); --seguro-arriba: env(safe-area-inset-top, 0px); /* ── Sombras ──────────────────────────────────────────────────── */ --sombra-sm: 0 2px 8px rgba(0, 0, 0, .4); --sombra: 0 6px 24px rgba(0, 0, 0, .5); --sombra-lg: 0 16px 48px rgba(0, 0, 0, .7); /* ── Transiciones ─────────────────────────────────────────────── */ --t-rapida: .12s ease; --t: .2s cubic-bezier(.4, 0, .2, 1); --t-lenta: .32s cubic-bezier(.4, 0, .2, 1); /* ── Capas (z-index) ──────────────────────────────────────────── Centralizadas para evitar conflictos. */ --capa-base: 1; --capa-header: 100; --capa-nav: 100; --capa-panel: 200; --capa-modal: 300; --capa-aviso: 400; --capa-carga: 500; } /* ═══════════════════════════════════════════════════════════════════ REINICIO ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { height: 100%; font-size: 16px; /* base para rem */ -webkit-text-size-adjust: 100%; /* iOS no reescala al rotar */ } body { height: 100%; overflow: hidden; /* el scroll vive en cada pantalla */ background: var(--fondo); color: var(--texto); font-family: var(--fuente); font-size: var(--txt-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; /* sin rebote elástico */ } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } /* Los checkbox/radio quedan fuera a propósito: ningún formulario de la app les da un aspecto propio (a diferencia de .campo-entrada/ .campo-lista para el resto), así que quitarles el estilo nativo los deja sin ningún indicio visual de que son controles — se ven como texto suelto. `accent-color` los deja legibles en modo claro y oscuro sin tener que dibujarlos a mano. */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { -webkit-appearance: none; appearance: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accion); } /* iOS hace zoom si el input mide menos de 16px */ input, textarea, select { font-size: 16px; } /* Sin esto, el atributo "hidden" no sirve de nada en cualquier elemento que tenga su propio "display" en el CSS del sitio — una regla propia como .nav-boton { display: flex } le gana al valor por defecto del navegador para [hidden] (display: none), aunque ese valor por defecto sea más específico en apariencia, porque el CSS del sitio siempre tiene más peso que la hoja de estilos del navegador. Así estuvo roto el menú lateral: aplicarPermisos() (js/ app.js) ponía "hidden" correctamente en los botones que un rol no debía ver, pero .nav-boton los seguía mostrando de todas formas. El !important es a propósito — es la única forma de que "hidden" gane siempre, sin tener que acordarse de excluirlo en cada clase nueva que use "display". */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } table { border-collapse: collapse; width: 100%; } /* ═══════════════════════════════════════════════════════════════════ BARRAS DE DESPLAZAMIENTO ═══════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--texto-4); } * { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; } /* ═══════════════════════════════════════════════════════════════════ ACCESIBILIDAD ═══════════════════════════════════════════════════════════════════ */ /* Anillo de foco visible al navegar con teclado */ :focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Texto solo para lectores de pantalla */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respeta la preferencia de menos movimiento del sistema */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ═══════════════════════════════════════════════════════════════════ UTILIDADES DE TEXTO Clases mínimas y explícitas — sin framework. ═══════════════════════════════════════════════════════════════════ */ .dato { font-family: var(--fuente-datos); letter-spacing: .2px; } .dato-ip { font-family: var(--fuente-datos); color: var(--ip); } .dato-mac { font-family: var(--fuente-datos); color: var(--accion); } .dato-red { font-family: var(--fuente-datos); color: var(--red); } .dato-enlace { font-family: var(--fuente-datos); color: var(--enlace); } .mayus { text-transform: uppercase; } .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oculto { display: none !important; }