/* ════════════════════════════════════════════════════════════════════════════ SEMHYS · Tema — un solo sitio donde vive el color ──────────────────────────────────────────────────────────────────────────── POR QUÉ EXISTE ESTE FICHERO. Medido sobre las páginas del sitio: 8 juegos de variables distintos para 15 páginas 3 familias visuales incompatibles 9 páginas sin ninguna variable, con los colores escritos a pelo El resultado es que el mismo menú de navegación salta entre dos sitios distintos: «Potabilización» abre una página de fondo azul marino #001220 y «PTAR» abre una de fondo blanco. Mismo menú, misma marca, dos identidades. Eso no lo detecta ninguna auditoría de accesibilidad: una página puede sacar 100 sobre 100 en Lighthouse y ser de otro color que su vecina. Son cosas distintas y conviene no confundirlas. ─── CÓMO FUNCIONA ─── Hay UNA paleta. De ella salen dos superficies, clara y oscura, que NO son dos temas: son la misma paleta puesta sobre fondos distintos. Se elige con un atributo en el : documentos, tablas, cálculo portada, catálogo, recreaciones Y por qué dos y no una: en las pantallas densas de números y tablas el fondo claro se lee mejor y cansa menos; en las recreaciones 3D y la portada el fondo oscuro hace que el color del proceso destaque. Es una decisión de legibilidad, no de gusto — pero al salir de la misma paleta, cambiar de superficie no cambia de marca. ─── NOMBRES HEREDADOS ─── Las páginas ya escritas usan nombres distintos para lo mismo: --tinta y --texto, --acento y --cyan, --fondo y --navy. En vez de reescribir quince ficheros de golpe —que es como se rompen las cosas— aquí se declaran todos apuntando al mismo valor. Las páginas siguen funcionando sin tocarlas, y el color pasa a decidirse en un solo sitio. ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── LA PALETA. Estos siete valores son la marca; todo lo demás sale de aquí ── */ --marca-profundo: #001220; /* azul marino de fondo */ --marca-medio: #04202f; --marca-acero: #0a3a5c; --marca-agua: #0a7ea4; /* el acento sobre claro — 4,63:1 sobre blanco */ --marca-agua-viva: #00b4d8; /* el acento sobre oscuro — necesita fondo oscuro */ --marca-tinta: #0f1f29; --marca-papel: #ffffff; /* ── ESTADO. Dos versiones de cada uno: la de RELLENO conserva el color original, la de TEXTO está oscurecida para cumplir 4,5:1 de contraste. Medido, no estimado: el ámbar original daba 2,45:1 sobre blanco. ── */ --ok: #2e9e63; --ok-texto: #1c7a4a; --ok-fondo: #eefaf3; --alerta: #d99a00; --alerta-texto: #8a5d00; --alerta-fondo: #fdf6e3; --urgente: #d0453b; --urgente-texto:#b3352c; --urgente-fondo:#fdeeed; /* Sobre superficie oscura los mismos estados necesitan ir hacia arriba, no hacia abajo: es el fondo el que cambia, no el significado. */ --ok-oscuro: #4fd18d; --alerta-oscuro: #ffc94d; --urgente-oscuro: #ff8a7e; /* ── COLOR DE PROCESO. No es decoración: en un esquema de planta cada corriente tiene su color y siempre el mismo, para poder seguirla con la vista sin leer una leyenda. ── */ --serv-cruda: #6d7b82; --serv-residual: #4aa3c7; --serv-tratada: #2e9e63; --serv-lodo: #8a6b4f; --serv-aire: #7fb5d0; --serv-quimico: #b06fb0; --serv-electrico:#d99a00; /* ── TIPOGRAFÍA Y RITMO, también en un solo sitio ── */ --tipo: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --tipo-mono: ui-monospace, 'SF Mono', Menlo, monospace; --ancho: 1240px; --radio: 12px; --radio-chico: 8px; } /* ═══════════════ LA ÚNICA SUPERFICIE ═══════════════ Se decidió paridad: un solo color en todo el sitio. Dos superficies, aunque salgan de la misma paleta, son dos caras. El visitante pasaba de Potabilización a PTAR y el fondo saltaba de azul marino a blanco sin que nada lo explicara — y eso no se lee como una decisión de legibilidad, se lee como que son dos sitios distintos. La marca es el azul marino: es lo que ya eran la portada, el catálogo, los servicios y el blog, o sea la cara pública. Las herramientas van ahí. El precio de esta decisión, dicho: en pantallas densas de tablas el fondo claro cansa menos. Se compensa con lo que sí se puede controlar — cuerpo de texto por encima del contraste mínimo, filetes suaves entre filas y bloques de datos sobre panel más claro que el fondo, no del mismo tono. */ :root { --fondo: var(--marca-profundo); --fondo-suave: var(--marca-medio); --panel: #062a3d; --texto: #e8f2f7; --tinta: #e8f2f7; --suave: #9fb4c6; /* 7,4:1 sobre el fondo — el gris que se lee */ --suave-fuerte:#c3d3de; --acento: var(--marca-agua-viva); /* #00b4d8 es un cian claro: encima va tinta, no blanco. Con blanco da 2,46:1 y la norma pide 4,5. Con la tinta de marca da 8,9:1. */ --sobre-acento:var(--marca-tinta); --linea: rgba(0,180,216,.24); --sombra: 0 2px 10px rgba(0,0,0,.35); /* Estado sobre fondo oscuro: los colores van hacia ARRIBA en luminosidad. Cambia el fondo, no el significado. */ --ok-texto: var(--ok-oscuro); --alerta-texto: var(--alerta-oscuro); --urgente-texto: var(--urgente-oscuro); --ok-fondo: #10301f; --alerta-fondo: #3a2f10; --urgente-fondo: #3d1f1c; } /* ═══════════════ NOMBRES HEREDADOS ═══════════════ Las páginas ya escritas llaman a lo mismo de formas distintas. Aquí se declaran todas apuntando al valor bueno, para no tener que reescribir cuarenta ficheros de golpe — que es como se rompen las cosas. */ :root { --navy: var(--marca-profundo); --navy-mid: var(--marca-medio); --steel: var(--marca-acero); --panel2: #062a3d; --suavefondo: var(--marca-medio); --cyan: var(--marca-agua-viva); --cyan2: #90e0ef; --cyan-soft: #90e0ef; --white: #e8f2f7; --gray: #9fb4c6; --gray-light: #c3d3de; --ok: var(--ok-oscuro); --ambar: var(--alerta-oscuro); --rojo: var(--urgente-oscuro); --okt: var(--ok-texto); --okf: var(--ok-fondo); --ambart: var(--alerta-texto); --ambarf: var(--alerta-fondo); --rojot: var(--urgente-texto); --rojof: var(--urgente-fondo); --agua: var(--serv-residual); --lodo: var(--serv-lodo); --aire: var(--serv-aire); } /* ═══════════════ LO MÍNIMO COMPARTIDO ═══════════════ Solo lo que de verdad debe ser igual en todas partes. El resto lo pone cada página: este fichero decide el COLOR, no el diseño. */ body { font-family: var(--tipo); } /* Foco visible. Sin esto, quien navega con el teclado no sabe dónde está — y quitarlo «porque se ve feo» es de las cosas que más molestan de un sitio. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; } /* Los enlaces dentro de un párrafo se subrayan. No se distingue un enlace solo por el color: quien no separa el cian del gris no ve que hay algo pinchable. */ p a:not([class]) { text-decoration: underline; text-underline-offset: .18em; } /* Nadie debería tener que aguantar una animación que le marea. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ═══════════════ EL CONMUTADOR DE SUPERFICIE ═══════════════ Un botón de verdad, no un icono decorativo: se enfoca con el teclado, dice su estado con aria-pressed y tiene nombre accesible. */ /* retirado: hay una sola superficie */ .cambia-superficie { font: 700 1rem/1 var(--tipo); cursor: pointer; border: 1px solid var(--linea); background: var(--fondo); /* El glifo va en el color de TEXTO, no en el de acento. El acento está pensado para destacar sobre el fondo, no necesariamente para leerse encima de él: sobre oscuro daba 4,09:1 y hacen falta 4,5. El color de texto contrasta con su fondo por definición, que es lo que hace falta en un botón cuyo contenido es un símbolo pequeño. */ color: var(--texto); border-radius: 7px; padding: .3rem .58rem; transition: border-color .15s, color .15s; } /* retirado: hay una sola superficie */ .cambia-superficie:hover { border-color: var(--acento); } /* retirado: hay una sola superficie */ .cambia-superficie.en-barra { margin-left: auto; } /* retirado: hay una sola superficie */ .cambia-superficie.flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 9000; box-shadow: var(--sombra); } /* ═══════════════ LA BARRA DE HERRAMIENTAS ═══════════════ Se genera de una sola lista (js/navegacion.js). Antes cada página traía la suya escrita a mano, y con doce herramientas eso son 132 enlaces que mantener: bastó olvidar uno para que Potabilización se quedara con CERO salidas y tres herramientas sin que nadie las enlazara. */ .ruta-semhys { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .9rem 0 .4rem; font-size: .76rem; } .ruta-semhys a, .ruta-semhys .aqui { padding: .34rem .6rem; border-radius: 7px; text-decoration: none; font-weight: 700; border: 1px solid var(--linea); color: var(--suave); background: var(--fondo); white-space: nowrap; } .ruta-semhys a:hover { border-color: var(--acento); color: var(--acento); } .ruta-semhys .aqui { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); } .ruta-semhys .ruta-casa { font-weight: 800; letter-spacing: .1em; color: var(--acento); border-color: var(--acento); } /* Los tramos se separan con un filete, para que se lea que el menú sigue el recorrido de un proyecto: agua → aguas residuales → bombeo → cálculo. */ .ruta-semhys .ruta-tramo { display: contents; } /* El nombre de un area cerrada. Se distingue de una herramienta a proposito: no es un destino final, es una puerta. Menos peso visual y sin fondo, para que las herramientas del area abierta sigan siendo lo primero que se lee. */ .ruta-semhys .ruta-area { opacity: .62; font-weight: 600; border-style: dashed; } .ruta-semhys .ruta-area:hover, .ruta-semhys .ruta-area:focus-visible { opacity: 1; border-style: solid; } .ruta-semhys .ruta-tramo + .ruta-tramo::before { content: ''; width: 1px; height: 1.1rem; background: var(--linea); margin: 0 .28rem; display: inline-block; vertical-align: middle; } @media (max-width: 700px) { .ruta-semhys { font-size: .71rem; gap: .25rem; } } /* ═══════════════ SALTAR AL CONTENIDO ═══════════════ Invisible hasta que se enfoca con el teclado, y entonces bien visible. Es lo primero que usa quien navega sin ver la página: si va escondido en un rectángulo de 1×1 px y sin color, sale en el azul por defecto del navegador y no se lee. */ .saltar-contenido { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--acento); color: var(--sobre-acento); padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 800; text-decoration: none; } .saltar-contenido:focus { left: 0; } /* ═══════════════ RED DE SEGURIDAD PARA BOTONES ═══════════════ Varias páginas usan clases de botón que su propio CSS no define —.btn, .btn-primary, .btn-secondary— y salían en el azul por defecto del navegador sobre fondo oscuro: 1,92:1. En company había uno blanco sobre blanco, 1:1, invisible del todo. Esto no sustituye al diseño de cada botón: es el suelo. Si una página define el suyo, gana el suyo por venir después en la cascada. */ :where(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-cta) { display: inline-block; padding: .7rem 1.4rem; border-radius: 8px; font-weight: 700; text-decoration: none; border: 1px solid var(--acento); background: var(--acento); color: var(--sobre-acento); transition: filter .15s; } :where(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-cta):hover { filter: brightness(1.1); } :where(.btn-secondary, .btn-outline) { background: transparent; color: var(--acento); } /* Dentro del bloque de acento se invierten: sobre cian, tinta. */ .cta-section :where(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-cta) { background: transparent; color: var(--sobre-acento); border-color: var(--sobre-acento); } .cta-section :where(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-cta):hover { background: var(--sobre-acento); color: var(--acento); } /* ═══════════════ TARJETAS QUE SON ENLACES ═══════════════ Un que envuelve una tarjeta entera no hereda el color del texto: el navegador le pone su azul por defecto, y sobre fondo oscuro da 2,02:1. Se ve en services, donde los iconos y titulares de las tarjetas salían azules de sistema. */ a.dark-card, a.card, a:has(> h3), .dark-card, .dark-card * { color: var(--texto); } a.dark-card:hover { color: var(--texto); } /* Enlaces del pie sobre fondo profundo */ footer p, footer small, .footer-bottom, .footer-bottom * { color: var(--suave); } /* .btn-ghost dentro del bloque de acento y en general: el navegador le pone su azul por defecto porque ninguna hoja lo define. 3,81:1 sobre el cian. */ :where(.btn-ghost, .btn-ghost-hero, .btn-link, .btn-text) { color: var(--acento); border: 1px solid var(--acento); background: transparent; padding: .7rem 1.4rem; border-radius: 8px; font-weight: 700; text-decoration: none; display: inline-block; } .cta-section :where(.btn-ghost, .btn-ghost-hero, .btn-link, .btn-text) { color: var(--sobre-acento); border-color: var(--sobre-acento); } /* ═══════════════ NADA SCROLLEA EN HORIZONTAL ═══════════════ Un solo elemento mal colocado —un menú fuera de pantalla con `right` negativo, una tabla sin contenedor— mete scroll lateral en TODA la página, y en un móvil eso se nota en cada gesto. Esto es el suelo; lo ancho de verdad (tablas, esquemas) scrollea dentro de su propia caja. */ html, body { overflow-x: hidden; max-width: 100%; } /* Los hijos de una rejilla no encogen por debajo de su contenido a menos que se les diga. Sin esto, un SVG con min-width estira toda la columna. */ :where(.tablero, .grid, .rejilla, .grid-2, .grid-3) > * { min-width: 0; } /* ═══════════════ MÓVIL ═══════════════ Medido a 390 px de ancho, que es un teléfono corriente. Dos cosas salieron mal y las dos son de las que se notan en cada gesto. */ @media (max-width: 720px) { /* 1 · EL MENÚ QUE NO COLAPSA. Varias páginas redefinen .navbar-menu en su propio