/* ===================================================================== Orden de capas de la cascada Hoy conviven dos generaciones visuales: una base y una capa de retematizado prefijada con body.app-body, que gana por especificidad. Ordenar eso con @layer permite que la precedencia la fije la capa y no la longitud del selector. La migración es incremental. Todo el CSS está de momento en `legacy`, que va la última y por tanto sigue mandando. Sacar un componente a su capa no cambia nada hasta que se borra su gemela de `legacy`: ese es el momento de comprobarlo con bin/ui_reference.php. CUIDADO: una regla normal SIN capa vence a todas las reglas normales dentro de capas. Si añades CSS nuevo, tiene que ir dentro de una capa. ===================================================================== */ @layer reset, tokens, base, componentes, modulos, tema, utilidades, legacy, migrado, accesibilidad; /* ===================================================================== PP Neue Montreal — autoalojada (licencia comercial de Pangram Pangram) Va fuera de @layer a propósito: @font-face no es una regla de estilo, no participa en la cascada y por tanto la advertencia sobre reglas sin capa no le aplica. SOLO EXISTEN TRES PESOS EN ESTILO NORMAL: 400, 500 y 700. La familia no tiene 600 ni 800. Comprobado en navegador: font-weight 600, 700, 800 y 900 renderizan idénticos porque todos caen en el Bold real y el navegador no sintetiza pesos intermedios. Por eso el CSS de la aplicación usa únicamente --fw-regular / --fw-medium / --fw-bold. TAMPOCO HAY EJE DE ANCHURA: font-stretch y font-variation-settings 'wdth' no hacen nada sobre esta familia (medido: 390,40px idéntico de 75% a 125%). La jerarquía de los títulos se construye con tamaño, peso y los tokens --tracking-*, nunca con anchura. Los archivos thin (100) y semibold italic (600i) están en el repositorio pero no se declaran: no hay ningún uso real que los justifique y cada cara declarada es una descarga potencial. Las URL de aquí deben coincidir EXACTAMENTE con las del preload de los layouts. El helper asset() añade ?v=mtime; si el preload lo usara y esto no, el navegador descargaría cada fuente dos veces. ===================================================================== */ @font-face { font-family: "PP Neue Montreal"; src: url("../fonts/neue-montreal/ppneuemontreal-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal"; src: url("../fonts/neue-montreal/ppneuemontreal-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal"; src: url("../fonts/neue-montreal/ppneuemontreal-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal"; src: url("../fonts/neue-montreal/ppneuemontreal-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* ===================================================================== Transiciones de navegación entre páginas Nexo Azul es una aplicación de páginas: cada clic recarga el documento entero y sin esto el usuario ve un parpadeo en blanco. `@view-transition` funde una página con la siguiente sin una línea de JavaScript y sin ninguna dependencia. Donde no esté soportado no pasa nada: se navega como siempre. EL ARMAZÓN NO PARTICIPA, y hubo que aprenderlo por las malas. Darle a `.sidebar` un `view-transition-name` no basta para dejarla quieta: el nombre sólo la saca del grupo raíz, y el navegador sigue animando SU grupo. Como la barra cambia de anchura —108 px con el panel contextual cerrado, 424 px con él abierto— el navegador interpolaba entre las dos instantáneas, es decir, la deformaba. El caso que lo disparaba es el más común de todos: pulsar un enlace DENTRO del submenú abierto. La instantánea vieja lleva el panel desplegado y la nueva lo lleva cerrado, así que el raíl aparecía duplicado a dos tamaños, el logotipo fantasmeaba y las dos páginas se veían superpuestas. La exclusión de verdad son las tres reglas de abajo: anular la animación del GRUPO (que es la que interpola caja y posición) y la de las dos instantáneas, dejando visible sólo la nueva. Con eso la barra y la cabecera se comportan como si la transición no existiera, que es justo lo que se quiere de un armazón persistente. Lo que sí se funde es el contenido, que es lo que de verdad cambia. ===================================================================== */ @view-transition { navigation: auto; } @layer base { /* Nombre propio: los saca del grupo raíz, que es el que se funde. */ .sidebar { view-transition-name: nexo-sidebar; } .topbar { view-transition-name: nexo-topbar; } /* Y aquí se les quita toda animación. Las tres reglas hacen falta: - el GRUPO anima caja y posición (es la que deformaba), - `old` es la instantánea saliente (la que fantasmeaba), - `new` es la entrante, que debe estar visible desde el primer frame. */ ::view-transition-group(nexo-sidebar), ::view-transition-group(nexo-topbar) { animation: none; } ::view-transition-old(nexo-sidebar), ::view-transition-old(nexo-topbar) { animation: none; opacity: 0; } ::view-transition-new(nexo-sidebar), ::view-transition-new(nexo-topbar) { animation: none; opacity: 1; } /* El contenido: fundido con un desplazamiento corto hacia arriba. La entrada dura algo más que la salida para que la página nueva se sienta como el destino y no como un relevo. */ ::view-transition-old(root) { animation: nexo-page-out var(--dur-2) var(--ease) both; } ::view-transition-new(root) { animation: nexo-page-in var(--dur-3) var(--ease-enter) both; } @keyframes nexo-page-out { to { opacity: 0; } } @keyframes nexo-page-in { from { opacity: 0; transform: translateY(var(--sp-3)); } to { opacity: 1; transform: none; } } /* Respeto de la preferencia del sistema. Se apaga entera: quien pide menos movimiento no está pidiendo movimiento más rápido. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Captura determinista del arnés visual (E-4). Sólo la activa bin/ui_reference.php con ?captura=1, y esa página no es una pantalla de la aplicación. Una animación a medio correr en el instante de medir mueve la geometría y produce diferencias que no son regresiones. */ .nexo-sin-motion *, .nexo-sin-motion *::before, .nexo-sin-motion *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } } @layer legacy { /* ===================================================================== Nexus — app.css Hoja común a los tres armazones: aplicación (body.app-body), acceso (body.auth-body) y páginas de error (body.error-body). El sistema original era "glass": tarjetas blancas translúcidas con desenfoque sobre un degradado azul PP→Asturias. La aplicación ya no se pinta así —body.app-body pasa las superficies a opacas y apaga el desenfoque—, y sobrevive solo en el acceso y en las páginas de error, que siguen sobre el azul. Los tokens --on-blue* son de ese sistema. Sin fuentes externas: la familia va autoalojada por CSP. ===================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg { max-width: 100%; display: block; } /* N-25. Lo que era constante en los sesenta SVG de cada pagina —relleno, trazo, ancho y remates— vive aqui una vez en vez de sesenta veces en el HTML. `.ico` la lleva solo el icono servido desde la hoja de simbolos; el que se emite entero conserva sus atributos de presentacion, y los siete con trazo propio lo declaran encima. */ .ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Los dos unicos trazos propios del juego. Van en clase y no en `style=` porque la CSP (`style-src 'self'`) descarta los atributos de estilo. */ .ico--t2 { stroke-width: 2; } .ico--t22 { stroke-width: 2.2; } /* La hoja de simbolos no se ve: sirve de origen para los ``. Sin esto ocupaba 300x150 px al principio del documento —el tamano por defecto de un `` sin dimensiones— y empujaba el primer dato bajo el pliegue. */ .nexo-hoja-iconos { position: absolute; width: 0; height: 0; overflow: hidden; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } /* ---------- Tokens ---------- Toda la paleta sale de aquí. Antes había 407 colores sueltos repartidos por las cuatro hojas; ahora son estos peldaños y todo lo demás los referencia. El azul de marca (--b-500) y la tinta (--b-900) son exactamente los de siempre: lo que se ha corregido es la dispersión y el contraste. */ :root { /* Rampa azul. Un solo tono (H215); de él salen marca, tinta y bordes. */ --b-50: #f3f7fc; --b-100: #e6eef9; --b-200: #c4d7f3; --b-300: #8ab2ea; --b-400: #538fe4; --b-500: #1f6fe0; /* azul de marca, sin tocar */ --b-600: #1a5ebc; --b-700: #154e9d; --b-800: #133b6c; --b-900: #14304e; /* tinta, sin tocar */ /* Extremos profundos de la rampa, para fondos a sangre. */ --b-950: #0d1730; --b-1000: #020b1d; /* Portada de acceso. Va deliberadamente más oscura y más saturada que la rampa: es un fondo a sangre, no un color de texto, y la red neuronal que se dibuja encima solo se lee sobre este azul. */ --auth-deep: #020d20; --auth-1: #020b1d; --auth-2: #031a3d; --auth-3: #052b5e; --auth-alt: #03162f; --auth-alt-1: #02132c; --auth-alt-2: #052c63; --auth-alt-3: #0a579f; /* Versiones claras de los estados: la única forma legible de cada uno sobre fondo oscuro. Son a los estados lo que --gold-ink es al dorado, pero al revés: --x sobre fondo claro, --x-soft sobre fondo oscuro. */ --ok-soft: #c7f4dd; --warn-soft: #ffe2a8; --bad-soft: #ffdbe1; /* Neutros del mismo tono. --n-500 sustituye al antiguo #8094b3, que se quedaba en 3.09 sobre blanco y no llegaba al mínimo legible (AA 4.5). */ --n-50: #f8fafc; --n-100: #eff2f6; --n-200: #dde2e9; --n-300: #bdc6d1; --n-400: #7e90a9; /* iconos y trazos, no texto */ /* P-12. Era #617798, elegido midiendo sobre BLANCO PURO, donde da 4,56. Sobre las superficies tintadas en las que se usa de verdad daba 4,24 en las cabeceras de tabla y 3,70 sobre el fondo rosa de una fila crítica: por debajo de AA en 287 apariciones medidas. El nuevo se ha elegido contra el PEOR de sus ocho fondos reales, con margen (4,73 y no 4,51), para que un ajuste posterior de un tinte no lo devuelva al rojo el mismo día. */ --n-500: #536683; /* texto terciario */ --n-600: #485a7a; /* texto secundario */ /* Tinta */ --ink: var(--b-900); --ink-2: var(--n-600); --ink-3: var(--n-500); /* Superficies. Estos cinco tokens se llamaban --glass* porque nacieron para el sistema translúcido original: tarjetas frosted sobre un degradado azul. Ese sistema ya no se pinta —body.app-body los redefine opacos y apaga el desenfoque con --blur: none— pero el nombre sobrevivió al cambio, de modo que el CSS decía «cristal» donde había blanco sólido. Lo que hacen HOY es nombrar superficies: el fondo de una tarjeta, su versión elevada, su borde y la línea divisoria neutra. Los valores translúcidos de aquí abajo solo los ven las páginas de error, que siguen sobre el fondo azul. --line es la neutra de la familia de líneas de estado, junto a --ok-line, --warn-line, --bad-line, --info-line, --muted-line y --gold-line. */ --surface: rgba(255, 255, 255, .72); --surface-2: rgba(255, 255, 255, .54); --surface-raised: rgba(255, 255, 255, .86); --surface-border: rgba(255, 255, 255, .6); --line: rgba(120, 150, 190, .2); --blur: blur(20px) saturate(150%); /* Texto sobre el fondo azul (fuera de tarjetas) */ --on-blue: #ffffff; --on-blue-2: rgba(255, 255, 255, .84); --on-blue-3: rgba(255, 255, 255, .6); /* Marca */ --brand: var(--b-500); /* El azul de marca COMO TEXTO. Es un escalón más oscuro de la misma rampa, y existe porque #1f6fe0 da 4,06 : 1 sobre los fondos teñidos de los paneles (#e4eefb) y 4,76 : 1 sobre blanco: pasa raspando en uno y no pasa en el otro, y los enlaces «Ver todas» de las cabeceras de panel viven precisamente sobre el teñido. Con --b-600 son 5,32 y 6,23. Se separa en vez de oscurecer --brand porque --brand también es FONDO en veinte reglas, y ahí el azul de marca está marcado «sin tocar». La norma que se incumplía es 1.4.3, que habla de texto; los rellenos y bordes los gobierna 1.4.11 con 3 : 1, y eso ya lo cumplían. Se cambia lo que falla, no todo lo que se parece. */ --brand-texto: var(--b-600); --brand-600: var(--b-600); --brand-700: var(--b-700); --brand-grad: linear-gradient(135deg, var(--b-400), var(--b-500)); --brand-soft: rgba(31, 111, 224, .12); /* Fondo de la aplicación. Es el único degradado que se sale de la rampa a propósito: el salto de tono es lo que le da profundidad al fondo. */ --app-bg: #0a3f86; --app-bg-1: #0a4ea0; --app-bg-2: #1f6fe0; --app-bg-3: #2aa0e0; /* Estados. Los tonos son los de siempre; se ha bajado la luminosidad hasta que cada color es legible sobre su propio tinte, que es como se usan en los badges. El verde y el ámbar no llegaban al mínimo. */ /* P-12. #167c45 daba 4,39 sobre su propio tinte y 3,61 sobre la fila resaltada de un concejo. Al llevar el chip de concejo a los cuatro listados (O-1) ese fallo pasó de anecdótico a estar en cada fila. */ --ok: #126739; --ok-bg: rgba(18, 103, 57, .13); --ok-line: rgba(18, 103, 57, .30); /* P-12. #9b600d daba 4,33 sobre su propio tinte: el caso que la auditoría no había medido y el arnés sí. */ --warn: #935b0c; --warn-bg: rgba(147, 91, 12, .13); --warn-line: rgba(147, 91, 12, .30); /* Tonos oscuros para texto sobre una superficie del MISMO tono. Un `--bad` sobre `--bad-bg` da 4,25 y no llega a AA: el tinte del 13 % se compone sobre la superficie del panel, que ya no es blanca. Lo canto el invariante A-3 en cuanto la galeria pinto la pildora en estado «bad», que el banco de pruebas nunca produce. */ --bad-900: #5e111c; --bad-800: #a81c2e; --warn-800: #7a4b0a; --bad: #c72339; --bad-bg: rgba(199, 35, 57, .13); --bad-line: rgba(199, 35, 57, .30); /* --info es un escalón más oscuro que el azul de marca por lo mismo que --ok y --warn lo son desde P-12: se usa como TEXTO sobre --info-bg, que es ese mismo azul al 12 % sobre blanco (#e4eefb). Con --b-500 daba 4,06 : 1 —la etiqueta «Sin fecha» del próximo movimiento, a 14 px y en negrita— y con --b-600 da 5,32. El tinte y la línea no cambian: siguen derivando del azul de marca, que es lo que se ve como color. */ --info: var(--b-600); --info-bg: rgba(31, 111, 224, .12); --info-line: rgba(31, 111, 224, .30); --muted: var(--n-500); --muted-bg: rgba(83, 102, 131, .12); --muted-line: rgba(83, 102, 131, .26); /* Superficies opacas para avisos persistentes. Los tintes --x-bg de arriba sirven para chips y badges, pero dejan pasar fotografías y degradados. */ --alert-success-bg: #edf8f2; --alert-error-bg: #fff1f3; --alert-warning-bg: #fff8e8; --alert-info-bg: #eef5ff; /* Dorado asturiano: acento institucional, nunca un estado. Va aparte del ámbar de «atención» para que un dorado no se lea como una alerta. --gold es relleno o marca; --gold-ink es el único que vale como texto. */ --gold: #f0b319; /* #8d6809 daba 4,32:1 al componerse sobre --gold-bg. */ --gold-ink: #765600; --gold-bg: rgba(240, 179, 25, .16); --gold-line: rgba(240, 179, 25, .38); /* Categóricos: series de gráfica, circunscripciones y roles. Separados en tono y con luminosidad pareja para que ninguna serie pese más que otra. */ --c-blue: var(--b-500); --c-blue-bg: rgba(31, 111, 224, .14); --c-teal: #20857f; --c-teal-bg: rgba(32, 133, 127, .14); --c-green: #25935a; --c-green-bg: rgba(37, 147, 90, .14); --c-amber: #bc7a1a; --c-amber-bg: rgba(188, 122, 26, .15); --c-rose: #c62f45; --c-rose-bg: rgba(198, 47, 69, .14); --c-violet: #814cbd; --c-violet-bg: rgba(129, 76, 189, .15); /* Violeta oscurecido hasta ser legible como TEXTO sobre su propio tinte; --c-violet es relleno de serie y no llega al mínimo AA. Mismo criterio que --gold / --gold-ink. */ --c-violet-ink: #6a3a9e; --c-violet-line: rgba(129, 76, 189, .3); /* Radios y sombras La escala de radio es PRIMITIVA: no se retematiza. La generación anterior daba a --r/--r-sm/--r-xs un valor aquí (20/14/10) y otro dentro de body.app-body (12/9/7), así que el mismo token valía distinto según el layout. Esa es la razón de fondo por la que había 286 border-radius escritos a mano y solo 38 con token: sustituir un literal por el token le cambiaba el valor, de modo que no se podía. El único consumidor real de la generación de 20px eran las páginas de error (body.error-body), que ahora comparten el radio de la aplicación. auth.css no usaba ningún var(--r*). */ --r-2xs: 4px; --r-xs: 7px; --r-sm: 9px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --r-round: 50%; /* ---------- Altura de control ---------- E-c. Habia tokens de tipo, color y radio, y ninguno de altura: cada componente elegia la suya. Medido con el invariante D-1 sobre las 32 pantallas, los controles computaban DIECIOCHO alturas distintas, y en una sola pantalla convivian un boton de 37 px con tres campos de 38, 46 y 48. Nadie decidio eso; se acumulo. 40 y 32 estan en la rejilla de 4 px y quedan cerca de lo que ya habia, asi que el contrato ordena sin rediseñar. En tactil no mandan estos dos: manda el suelo de 44 px de la capa `accesibilidad`, y esa diferencia de densidad entre raton y dedo es deliberada. */ --control-h: 40px; --control-h-sm: 32px; --shadow: 0 12px 34px -12px rgba(22, 60, 110, .28), 0 3px 10px -4px rgba(22, 60, 110, .12); --shadow-sm: 0 4px 14px -8px rgba(22, 60, 110, .22); --shadow-lg: 0 28px 64px -24px rgba(22, 60, 110, .38), 0 8px 20px -10px rgba(22, 60, 110, .18); --ring: 0 0 0 3px rgba(31, 111, 224, .22); --sans: "PP Neue Montreal", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---------- Pesos ---------- Los tres únicos que la familia dibuja en estilo normal. Antes había quince valores distintos (550, 580, 600, 650, 720, 750, 760, 780, 800, 850, 900, 950…): nadie los eligió, salieron de ajustar a ojo sobre una fuente variable del sistema. Con Neue Montreal los ciento sesenta y tres que pedían un peso inexistente caían todos en el mismo Bold, así que la jerarquía se aplanaba sin avisar. --fw-medium es el énfasis de etiquetas, navegación y cabeceras de tabla; --fw-bold el de títulos, cifras y alertas. */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* ---------- Tracking ---------- Por función, no por peldaño de la escala. Neue Montreal no tiene eje de anchura, así que el aire entre letras es lo único que tensa un título; pero junta las letras, NO estrecha los glifos: no es una condensed y no debe usarse como si lo fuera. Pasado cierto punto empieza a comerse los diacríticos del castellano y el usuario objetivo ronda los 55 años. El tracking es óptico: cuanto mayor es el tamaño, más sobra el aire que la fuente reserva para leerse pequeña. Por eso son cuatro peldaños y no un valor único, y por eso el tope general de -.02em se levanta a -.035em solo a partir de 40px. --tracking-label va en positivo: las mayúsculas pequeñas necesitan aire, no menos. */ --tracking-hero: -.035em; /* 40px y más: portadas, cifras a sangre */ --tracking-display: -.02em; /* 28-34px: cifras de KPI, títulos de portada */ --tracking-heading: -.01em; /* 20-24px: títulos de página y de sección */ --tracking-body: 0; /* cuerpo y todo lo que baje de 20px */ --tracking-label: .06em; /* antetítulos y rótulos en mayúsculas */ /* ---------- Escala tipográfica ---------- Antes había 68 tamaños distintos, muchos de ellos residuos de una conversión mecánica de rem a px: 10px, 11px, 13px, 16px… Nadie eligió esos valores, salieron de una división. Estos peldaños los sustituyen. Cambiar la densidad de toda la aplicación es tocar este bloque. SUELO SUBIDO EL 25/08/2026 (Q-2). La escala estaba impecablemente sistematizada alrededor del número equivocado: 10px en rótulos, 11 en metadatos, 13 en celdas y 15 de cuerpo, para una población que ronda los 55 años y lee desde el móvil, a veces dentro de un coche. Toda la rampa sube un peldaño y el de 10px desaparece: no hay ningún texto funcional que deba leerse a 10px, y mientras el token existiera alguien lo iba a usar. Sus 25 usos pasaron a --fs-xs. --fs-xl sube de 17 a 18 para conservar su distancia con el cuerpo: si se quedaba en 17 con el cuerpo en 16, un título de panel dejaba de leerse como título. NOTA sobre el nombre: el cuerpo del documento es --fs-lg, no --fs-base (ver la regla `body` más abajo). Los nombres vienen de la escala anterior y mienten un poco; renombrarlos tocaría 400 declaraciones para no cambiar nada visible, así que se quedan. */ --fs-xs: 12px; /* antetítulos, metadatos, códigos de tabla */ --fs-sm: 13px; /* etiquetas de formulario, badges */ --fs-md: 14px; /* texto secundario, celdas de tabla */ --fs-base: 15px; /* navegación, controles */ --fs-lg: 16px; /* CUERPO del documento */ --fs-xl: 18px; /* títulos de panel */ --fs-2xl: 20px; /* títulos de sección */ --fs-3xl: 24px; /* título de página */ --fs-4xl: 28px; /* cifras de KPI */ --fs-5xl: 34px; /* cifras heroicas */ /* ---------- Escala de espaciado ---------- Rejilla de 4px con dos medios peldaños abajo, donde el ajuste fino sí se nota (separación icono-texto, altura de badge). Antes convivían 35 valores sueltos —1, 2, 3, 5, 7, 9, 11, 13, 15, 17, 21, 26, 34, 42, 59, 62px…— sin ninguna relación entre ellos. */ --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 48px; --sp-12: 64px; /* ---------- Puntos de ruptura ---------- NO hay escala canónica. Se intentó consolidar los 27 valores en seis y se revirtió: redondear hacia arriba no es conservador (620→760 activa el diseño estrecho 140px de más) y no hay cobertura de regresión visual con la que verificarlo. bin/test_css_normalizado.php congela el inventario: no admite valores nuevos, pero no impone ninguna escala. La consolidación real se hará por componente. Ver docs/SISTEMA-DE-DISENO.md. Una custom property NO puede parametrizar una condición @media (`@media (max-width: var(--bp))` no funciona sin preprocesado). Para adaptar un componente a su contenedor, y no a la ventana, se usa @container, que no necesita punto de ruptura global. */ --content-max: 2040px; /* Motion (ui-animation) — tokens centralizados */ --ease: ease; --ease-enter: cubic-bezier(.22, 1, .36, 1); --ease-move: cubic-bezier(.25, 1, .5, 1); --dur-1: .12s; --dur-2: .2s; --dur-3: .28s; } body { font-family: var(--sans); color: var(--ink); font-size: var(--fs-lg); line-height: 1.5; background-color: var(--app-bg); background-image: radial-gradient(900px 620px at 82% -8%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, var(--app-bg-1) 0%, var(--app-bg-2) 52%, var(--app-bg-3) 100%); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } /* ---------- App shell ---------- */ .app-shell { display: flex; min-height: 100vh; } /* ---------- Llegada crítica desde el acceso ---------- Vive en app.css porque esta hoja ya está cargada y parseada antes de enviar el login. De ese modo el primer frame del documento privado no depende de alcanzar un bloque tardío de campaign.css. */ .login-arrival { position: fixed; inset: 0; z-index: 9999; isolation: isolate; display: grid; place-items: center; overflow: hidden; pointer-events: none; opacity: 1; animation: login-arrival-release .4s var(--ease) .1s both; } .login-arrival.is-preview-held, .login-arrival.is-preview-held .login-arrival__scene { animation-play-state: paused; } .login-arrival__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 47%, rgba(93, 190, 255, .24), transparent 33%), linear-gradient(145deg, rgba(2, 16, 44, .68), rgba(4, 55, 119, .55) 54%, rgba(12, 95, 162, .45)); -webkit-backdrop-filter: blur(14px) saturate(118%) brightness(.94); backdrop-filter: blur(14px) saturate(118%) brightness(.94); } .login-arrival__scene { position: relative; display: grid; place-items: center; width: 188px; height: 188px; transform-origin: center; animation: login-arrival-scene .4s var(--ease) .1s both; } .login-arrival__lens { position: relative; z-index: 2; display: grid; place-items: center; width: 164px; height: 164px; border: 1px solid rgba(226, 246, 255, .38); border-radius: var(--r-round); background: rgba(6, 63, 143, .34); -webkit-backdrop-filter: blur(10px) saturate(118%); backdrop-filter: blur(10px) saturate(118%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 70px -30px rgba(44, 163, 255, .86); } .login-arrival__lens img { display: block; width: 76%; height: auto; filter: drop-shadow(0 3px 7px rgba(2, 26, 63, .22)); } .login-arrival__orbit { position: absolute; border: 1px solid rgba(161, 218, 255, .24); border-radius: var(--r-round); } .login-arrival__orbit--outer { inset: -28px; opacity: .44; } .login-arrival__orbit--inner { inset: -9px; opacity: .7; } .login-arrival__caption { position: absolute; top: calc(100% + 24px); width: max-content; color: rgba(232, 247, 255, .88); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .045em; text-shadow: 0 2px 12px rgba(2, 26, 63, .28); } @keyframes login-arrival-release { from { opacity: 1; } to { opacity: 0; } } @keyframes login-arrival-scene { from { transform: scale(1); } to { transform: scale(.965); } } @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .login-arrival__veil { background: linear-gradient(145deg, rgba(2, 13, 35, .97), rgba(3, 50, 111, .95) 52%, rgba(7, 82, 153, .93)); } .login-arrival__lens { background: rgb(7, 70, 150); } } @media (max-width: 820px) { .login-arrival__veil { -webkit-backdrop-filter: blur(9px) saturate(110%); backdrop-filter: blur(9px) saturate(110%); } .login-arrival__scene { width: 154px; height: 154px; } .login-arrival__lens { width: 138px; height: 138px; } .login-arrival__orbit--outer { inset: -22px; } .login-arrival__orbit--inner { inset: -7px; } .login-arrival__caption { top: calc(100% + 20px); } } @media (prefers-reduced-transparency: reduce) { .login-arrival__veil { background: linear-gradient(145deg, rgb(2, 13, 35), rgb(3, 50, 111) 52%, rgb(7, 82, 153)); -webkit-backdrop-filter: none; backdrop-filter: none; } .login-arrival__lens { background: rgb(7, 70, 150); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .login-arrival { animation: login-arrival-release .01ms linear forwards; } .login-arrival__scene { animation: none; } } .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; } /* ---------- Topbar (controles flotantes glass) ---------- */ .topbar { display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; align-items: center; gap: var(--sp-7); padding: var(--sp-5) var(--sp-9); width: 100%; max-width: var(--content-max); margin-inline: auto; } .topbar__menu { display: none; } .topbar__search { flex: 1; max-width: 520px; margin: 0; display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-6); height: 46px; border-radius: var(--r); background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); } .search-bar { display: flex; gap: var(--sp-4); margin-bottom: 24px; max-width: 640px; } .search-bar input { flex: 1; min-width: 0; padding: 0 var(--sp-6); height: 46px; border-radius: var(--r); border: 1px solid var(--surface-border); background: var(--surface-raised); font-size: var(--fs-base); outline: none; } .search-bar input:focus { box-shadow: var(--ring); border-color: var(--brand); } .topbar__search svg { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; } .topbar__search input { border: 0; background: transparent; flex: 1; min-width: 0; outline: none; font-size: var(--fs-lg); text-overflow: ellipsis; } .topbar__search input::placeholder { color: var(--ink-3); } .topbar__kbd { font-size: var(--fs-xs); color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-4); font-weight: 500; } .topbar__bell { position: relative; width: 44px; height: 44px; border-radius: var(--r); background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--surface-border); display: grid; place-items: center; color: var(--ink-2); text-decoration: none; box-shadow: var(--shadow-sm); } .topbar__bell svg { width: 19px; height: 19px; } .avatar { width: 34px; height: 34px; border-radius: var(--r-round); background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-size: var(--fs-base); font-weight: 700; flex-shrink: 0; } .topbar .btn--ghost { color: var(--on-blue); border-color: rgba(255, 255, 255, .35); } .topbar .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; } .page { padding: var(--sp-5) var(--sp-8) var(--sp-9); max-width: var(--content-max); width: 100%; margin-inline: auto; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-radius: var(--r); border: 1px solid transparent; font-size: var(--fs-base); font-weight: 500; text-decoration: none; line-height: 1; white-space: nowrap; transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .05s; } .btn:active { transform: translateY(1px); } /* A-51. `pointer-events: none` hacia mas de lo que decia. Un boton deshabilitado ya no responde al clic por si mismo —el navegador lo impide—, asi que esto solo servia para dos cosas: impedir que se viera el `title` que explica POR QUE esta deshabilitado, y quitarle el cursor que lo distingue. Justo la ayuda que necesita quien se lo encuentra. `cursor: not-allowed` dice que no se puede pulsar; el `title` dice por que. El clic lo sigue impidiendo el atributo `disabled`, que es de quien era el trabajo. Se conserva en `.is-loading`, que NO es un boton deshabilitado sino uno que ya se pulso: ahi si hay que parar el segundo clic, porque el elemento sigue habilitado. */ .btn:disabled { opacity: .55; cursor: not-allowed; } .btn.is-loading { opacity: .55; pointer-events: none; } .btn--primary { background: var(--brand-grad); color: #fff; border-color: rgba(255, 255, 255, .28); box-shadow: var(--shadow); } .btn--primary:hover { filter: brightness(1.05); } .btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--surface-border); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .btn--secondary:hover { background: #fff; } .btn--ghost { background: transparent; color: var(--ink-2); } .btn--ghost:hover { background: rgba(255, 255, 255, .5); color: var(--ink); } .btn--danger { background: var(--bad); color: #fff; border-color: var(--bad-line); box-shadow: 0 8px 20px -10px rgba(199, 35, 57, .6); } .btn--danger:hover { filter: brightness(1.05); } /* N-17. `justify-content` venia de una segunda definicion en campaign.css que ganaba por orden de carga. Las dos declaraciones del mismo modificador viven ahora donde vive el boton. */ .btn--block { width: 100%; justify-content: center; } /* Formulario que solo envuelve un botón (p. ej. eliminar): el botón participa directamente en el layout flex del contenedor de acciones. */ .inline-form { display: inline-flex; margin: 0; } .btn--sm { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); border-radius: var(--r-sm); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } /* ---------- Formularios ---------- */ .form-field { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: 16px; } /* El rotulo de un GRUPO de controles. No puede ser un

: los fieldset nombran su sección con legend (que es lo correcto y no entra en el orden de encabezados) y los .form-section que son
siguen usando h3. :is() no cambia la especificidad. */ .form-section > :is(legend, h3) { font-size: var(--fs-base); margin-bottom: 16px; color: var(--ink); display: flex; align-items: center; gap: var(--sp-4); padding: 0; float: none; } .form-section > :is(legend, h3)::before { content: ""; width: 3px; height: 15px; border-radius: var(--r-2xs); background: var(--brand); } /* Edición parcial por rol: secciones en solo lectura (fieldset deshabilitado) */ fieldset.form-section { min-width: 0; } .form-section--ro { background: var(--surface-raised); } .form-section input:disabled, .form-section select:disabled, .form-section textarea:disabled { background: var(--muted-bg); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); cursor: not-allowed; opacity: 1; } .form-section--ro .check-line { color: var(--ink-3); cursor: not-allowed; } .ro-tag { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-3); background: var(--muted-bg); border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-4); } .form-note { background: var(--brand-soft); border: 1px solid var(--line); color: var(--ink-2); border-radius: var(--r-sm); padding: var(--sp-5) var(--sp-5); font-size: var(--fs-md); line-height: 1.45; margin-bottom: 16px; } /* Bloque opcional plegable dentro de un formulario (nativo
, sin JS). */ .form-foldout { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 var(--sp-5); margin: 4px 0 2px; background: var(--brand-soft); } .form-foldout > summary { cursor: pointer; padding: var(--sp-5) var(--sp-1); font-weight: 700; font-size: var(--fs-base); color: var(--ink-2); list-style: none; } .form-foldout > summary::-webkit-details-marker { display: none; } .form-foldout > summary::before { content: '\25B8'; margin-right: 8px; color: var(--ink-3); } .form-foldout[open] > summary::before { content: '\25BE'; } .form-foldout[open] > summary { margin-bottom: 4px; } .form-foldout > *:last-child { margin-bottom: 12px; } /* ---------- Paneles (cristal) ---------- */ .panel { background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--surface-border); border-radius: var(--r); padding: var(--sp-7) var(--sp-8); box-shadow: var(--shadow); margin-bottom: 20px; } /* N-32. Panel cuyo unico contenido es explicar que todavia no toca. Se le quita el aire de un panel con datos: mantener la altura completa seria decir con el espacio que ahi hay algo importante. */ .panel--plegado { padding-top: var(--sp-5); padding-bottom: var(--sp-5); } .panel--plegado .empty-state { padding: 0; } .panel > p { margin-bottom: 10px; } .panel > p:last-child { margin-bottom: 0; } .panel--info { position: relative; padding-left: var(--sp-9); } /* ---------- Tablas ---------- */ .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .data-table th, .data-table td { text-align: left; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); } .data-table th { font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr { transition: background .12s; } .data-table tbody tr:hover { background: rgba(255, 255, 255, .45); } .data-table td:last-child { text-align: right; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; border: 1px solid transparent; } .badge--success { background: var(--c-green-bg); color: var(--ok); border-color: rgba(22, 124, 69, .42); } .badge--warning { background: var(--gold-bg); color: var(--warn-800); border-color: rgba(155, 96, 13, .5); } .badge--danger { background: var(--bad-bg); color: var(--bad); border-color: rgba(199, 35, 57, .44); } .badge--info { background: var(--b-200); color: var(--b-700); border-color: rgba(31, 111, 224, .44); } .badge--muted { background: var(--n-200); color: var(--n-600); border-color: rgba(97, 119, 152, .48); } /* ---------- Aviso flotante (N-10) ---------- */ /* Había DOS componentes para esto —`.qa-toast` en campaign.css y `.cal-toast` en calendar.css— con dos aspectos, dos duraciones y dos implementaciones. Ahora hay uno, y vive aquí porque lo usan dos módulos: el sitio de un componente compartido es el armazón, no una de las dos hojas que lo comparten. Es la deuda que describe N-17. Se conserva la variante de tono del calendario y se descarta el fondo oscuro de `.qa-toast`: un aviso que no distingue un acierto de un fallo obliga a leerlo entero para saber si algo fue mal. */ .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300; max-width: min(480px, calc(100vw - 40px)); padding: var(--sp-4) var(--sp-7); border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: var(--fs-md); font-weight: 700; text-align: center; box-shadow: var(--shadow-lg); /* Un acierto no se toca: se lee y se va. Un fallo sí, para cerrarlo. */ pointer-events: none; } .toast--ok { background: var(--c-green-bg); border-color: rgba(22, 124, 69, .4); color: var(--ok); } .toast--error { background: var(--bad-bg); border-color: rgba(199, 35, 57, .44); color: var(--bad); pointer-events: auto; cursor: pointer; } /* ---------- Alertas / flash ---------- */ /* P-10. El boton de deshacer va pegado al final del aviso, antes de la equis de cerrar: se lee despues de saber que ha pasado, que es cuando uno decide si quiere revertirlo. */ .alert__accion { margin-left: auto; flex-shrink: 0; } .alert__accion .btn { white-space: nowrap; } .alert { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-8); border-radius: var(--r); border: 1px solid var(--line); margin-bottom: 10px; font-size: var(--fs-base); font-weight: 500; background: #fff; box-shadow: var(--shadow); --accent: var(--muted); } /* Barra vertical interior del color del estado (separada del canto por padding). */ .alert--success { background: var(--alert-success-bg); border-color: rgba(22, 124, 69, .4); --accent: var(--ok); color: var(--ok); } .alert--error { background: var(--alert-error-bg); border-color: rgba(199, 35, 57, .42); --accent: var(--bad); color: var(--bad); } .alert--warning { background: var(--alert-warning-bg); border-color: rgba(155, 96, 13, .45); --accent: var(--warn); color: var(--warn); } .alert--info { background: var(--alert-info-bg); border-color: rgba(31, 111, 224, .4); --accent: var(--b-500); color: var(--b-700); } .alert__message { flex: 1 1 auto; min-width: 0; line-height: 1.45; } .alert__close { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; font-size: var(--fs-xl); line-height: 1; color: inherit; opacity: .6; } .alert__close:hover { opacity: 1; } .alert.is-fading { opacity: 0; transition: opacity .4s; } /* ---------- Cabecera de página (páginas internas) ---------- */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); margin-bottom: 20px; } .page-header__title { font-size: var(--fs-3xl); font-weight: 700; color: #fff; letter-spacing: var(--tracking-heading); text-shadow: 0 1px 3px rgba(8, 28, 66, .42); } .page-header__subtitle { color: var(--on-blue-2); font-size: var(--fs-base); margin-top: 6px; display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .page-header__actions { display: flex; gap: var(--sp-4); flex-shrink: 0; align-items: center; } /* Cabecera compacta: el Resumen operativo arranca en los indicadores y esa densidad es deliberada. Pero era la única pantalla sin título visible, y en móvil —donde la miga de pan está oculta— eso la dejaba sin nombre ninguno (P-17). Con la variante compacta dice cómo se llama sin robarle sitio a los datos. */ .page-header--compacta { margin-bottom: var(--sp-5); } .page-header--compacta .page-header__title { font-size: var(--fs-2xl); } /* ---------- Páginas de error / acceso comparten el cielo ---------- */ .error-body { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-8); } .error-card { background: var(--surface-raised); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--surface-border); border-radius: var(--r); padding: var(--sp-11); max-width: 460px; text-align: center; box-shadow: var(--shadow); } .error-card__logo { width: 150px; height: auto; margin: 0 auto 24px; } .error-code { font-size: 46px; font-weight: 700; color: var(--brand-texto); letter-spacing: var(--tracking-display); } .error-card h1 { font-size: var(--fs-2xl); margin: 6px 0; } .error-card p { color: var(--ink-2); margin-bottom: 24px; } .error-debug { text-align: left; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); font-size: var(--fs-sm); overflow: auto; margin-bottom: 16px; white-space: pre-wrap; max-height: 340px; } .error-ref { font-size: var(--fs-md); } .error-ref code { background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); } /* ---------- Animación de entrada ---------- Era una entrada escalonada: 0,33s de retardo máximo más 0,55s de duración, así que el contenido no terminaba de asentarse hasta pasados ~0,9s. En una aplicación de recarga completa que se abre decenas de veces al día, eso no se percibe como calidad sino como lentitud, y se paga en cada navegación. Se conserva la aparición, pero corta y sin escalonar: la página se lee entera desde el primer fotograma. N-19. Este comentario decía que las clases .anim-1…6 «siguen existiendo para no tener que tocar las vistas». No existían: se habían retirado al quitar el escalonado, y las vistas seguían emitiéndolas. Ocho atributos que no hacían nada, y un comentario que afirmaba lo contrario, que es peor: el siguiente en pasar por aquí se lo habría creído. Retiradas de dashboard/index.php y my_day/index.php. */ @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .anim { animation: rise .18s var(--ease-enter) both; } } /* ---------- Backdrop sidebar (móvil) ---------- */ .sidebar-backdrop { display: none; } /* ---------- Responsive ---------- El menú se oculta fuera de pantalla y lo devuelve el script. Para quien no tenga JavaScript, el layout imprime un bloque