/* ── fuentes, servidas desde aquí ───────────────────────────────────────── ⚠️ NO SE CARGAN DE GOOGLE. Pedirlas a fonts.googleapis.com le entrega la IP de cada visitante a un tercero antes de que nadie haya aceptado nada. Solo el juego latino: cubre el castellano entero (tildes, eñe, ¿ y ¡). Plex Sans es un único fichero variable que sirve los cuatro pesos que se usan. */ @font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap; src:url("fuentes/ibm-plex-sans.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fuentes/ibm-plex-mono-400.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fuentes/ibm-plex-mono-500.woff2") format("woff2"); } @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:300 600; font-display:swap; src:url("fuentes/newsreader.woff2") format("woff2"); } @font-face{ font-family:"Newsreader"; font-style:italic; font-weight:300 400; font-display:swap; src:url("fuentes/newsreader-italic.woff2") format("woff2"); } /* ────────────────────────────────────────────────────────────────────────── Actaria · página de entrada COLOR tinta #0a0e14 · fondo azulado, no gris neutro: el gris puro se lee como no elegido. Papel #eef1ec para el texto, con sesgo cálido. Acento jade #2fa37a, más hondo que el verde de manual. Y dos colores SEMÁNTICOS aparte del acento, porque en esta aplicación significan: ámbar = vence, teja = vencido. TIPO Newsreader (serif editorial, el mundo del boletín oficial) para titulares. IBM Plex Sans para leer. IBM Plex Mono para lo que es dato: expedientes, importes, plazos y artículos. TRAMA Cada bloque lleva SU ANCLAJE LEGAL EN EL MARGEN, como la nota al margen de un expediente. Es información —qué artículo obliga a esto— y no decoración. DOS MODOS, Y EL OSCURO ES LA BASE. Sin elección manda el sistema del visitante; con el botón, lo que elija (tema.js). Los componentes se pintan SOLO con variables: un color escrito a mano en una regla se queda igual en los dos modos y es justo el que acaba ilegible en uno de ellos. ⚠️ La paleta clara NO es la oscura invertida: el verde, el ámbar y el teja se oscurecen, porque sobre papel claro pierden contraste. Medido: todo texto queda por encima de 4,5:1 sobre su fondo. ────────────────────────────────────────────────────────────────────────── */ :root{ color-scheme: dark; --tinta:#0a0e14; --tinta-2:#111823; --alza:#18212e; --alza-2:#1f2a38; --raya:#25303f; --raya-2:#2e3a4a; --papel:#eef1ec; --papel-2:#c3cdd6; --gris:#7f8f9e; --jade:#2fa37a; --jade-2:#4cc494; --jade-sombra:#2fa37a1f; --ambar:#dda43c; --teja:#d7644f; --sobre-jade:#04140d; --barra-fondo:#0a0e14e8; --sombra:#000000dd; --velo:#050709e8; --teja-tinte:#d7644f14; --teja-borde:#d7644f4d; --ambar-tinte:#dda43c26; --jade-borde:#2fa37a55; --ambar-borde:#dda43c55; --serif:"Newsreader", Georgia, "Times New Roman", serif; --sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono:"IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --ancho:74rem; } /* ── el modo claro: papel de expediente, tinta casi negra ──────────────────── Dos bloques con los mismos valores y no uno, porque son dos caminos: el visitante que lo eligió con el botón y el que lo trae de su sistema. */ :root[data-theme="light"]{ color-scheme: light; --tinta:#f6f4ee; --tinta-2:#efece4; --alza:#e7e3d9; --alza-2:#ddd8cc; --raya:#dcd7cc; --raya-2:#c9c3b6; --papel:#141a22; --papel-2:#3a4552; --gris:#5f6b77; --jade:#1f7a58; --jade-2:#17664a; --jade-sombra:#1f7a5814; --ambar:#8a5d0e; --teja:#b44a36; --sobre-jade:#ffffff; --barra-fondo:#f6f4eee6; --sombra:#1a22302e; --velo:#1a2230cc; --teja-tinte:#b44a3614; --teja-borde:#b44a3640; --ambar-tinte:#8a5d0e1f; --jade-borde:#1f7a5840; --ambar-borde:#8a5d0e40; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme: light; --tinta:#f6f4ee; --tinta-2:#efece4; --alza:#e7e3d9; --alza-2:#ddd8cc; --raya:#dcd7cc; --raya-2:#c9c3b6; --papel:#141a22; --papel-2:#3a4552; --gris:#5f6b77; --jade:#1f7a58; --jade-2:#17664a; --jade-sombra:#1f7a5814; --ambar:#8a5d0e; --teja:#b44a36; --sobre-jade:#ffffff; --barra-fondo:#f6f4eee6; --sombra:#1a22302e; --velo:#1a2230cc; --teja-tinte:#b44a3614; --teja-borde:#b44a3640; --ambar-tinte:#8a5d0e1f; --jade-borde:#1f7a5840; --ambar-borde:#8a5d0e40; } } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--tinta); color:var(--papel); font-family:var(--sans); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{ color:inherit; } :focus-visible{ outline:2px solid var(--jade-2); outline-offset:3px; border-radius:.2rem; } .wrap{ max-width:var(--ancho); margin:0 auto; padding:0 1.6rem; } /* ⚠️ EL LADO SE INVIERTE CON `order`, NO REORDENANDO EL MARCADO. El texto va SIEMPRE primero en el HTML: es lo que lee un lector de pantalla y lo que queda arriba cuando las dos columnas se apilan. Colocar la imagen antes en el codigo para verla a la izquierda dejaria la pantalla por delante del titulo que la explica. */ .dos.invertido > :first-child{ order:2; } .dos.invertido > :last-child{ order:1; } @media (max-width:900px){ .dos.invertido > *{ order:0; } } /* ── la nota al margen: el anclaje legal de cada bloque ─────────────────── */ .pliego{ display:grid; grid-template-columns:11rem minmax(0,1fr); gap:0 2.5rem; } .margen{ font-family:var(--mono); font-size:.7rem; line-height:1.7; color:var(--gris); letter-spacing:.02em; padding-top:.5rem; border-right:1px solid var(--raya); padding-right:1.2rem; text-align:right; } .margen b{ display:block; color:var(--jade); font-weight:500; } .margen span{ display:block; margin-top:.15rem; } /* La nota al margen: por qué importa esta sección, en una frase. Letra de leer y no de dato, porque es prosa; y en gris, porque acompaña al texto principal y no compite con él. */ .margen .nota{ margin:1.2rem 0 0; font-family:var(--sans); font-size:.78rem; line-height:1.55; letter-spacing:0; color:var(--gris); } @media (max-width:860px){ /* ⚠️ minmax(0,1fr) Y NO 1fr. El minimo de una pista `1fr` es el CONTENIDO MINIMO, asi que una captura ancha la infla y la pagina entera se desborda a lo ancho. Medido: 402 px de documento en una ventana de 336. Con minmax(0,...) la pista puede encoger y manda el ancho de la caja. */ .pliego{ grid-template-columns:minmax(0,1fr); gap:0; } .margen .nota{ display:none; } .margen{ border-right:0; border-left:2px solid var(--raya); text-align:left; padding:0 0 0 .9rem; margin-bottom:1.4rem; } } /* ── barra ─────────────────────────────────────────────────────────────── */ .barra{ position:sticky; top:0; z-index:40; background:var(--barra-fondo); backdrop-filter:blur(14px); border-bottom:1px solid var(--raya); } .barra .wrap{ display:flex; align-items:center; justify-content:space-between; height:4.6rem; gap:1rem; } .marca{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.55rem; font-weight:500; letter-spacing:-.015em; } .marca em{ font-style:normal; color:var(--jade-2); } /* El isotipo es el LACRE: disco facetado con dos renglones del acta y la rubrica que la cierra. Antes esto era un cuadrado de CSS con tres barras encima —un apano— y ademas no servia de favicon. El color se HEREDA (`currentColor` dentro del SVG) para que la misma pieza valga en jade sobre tinta, en blanco sobre la lateral oscura y en negro sobre papel. */ .marca .sello{ width:1.3em; height:1.3em; flex:none; color:var(--jade); } /* El lema va en letra de datos y en gris: acompaña al nombre, no compite con él. */ .marca .lema{ font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.02em; color:var(--gris); } .menu{ display:flex; align-items:center; gap:1.7rem; font-size:.9rem; color:var(--papel-2); } .menu a{ text-decoration:none; } .menu a:hover{ color:var(--papel); } @media (max-width:880px){ .menu .ocultar{ display:none; } } .bot{ font-family:var(--sans); font-size:.88rem; font-weight:500; padding:.6rem 1.15rem; border-radius:.35rem; border:1px solid transparent; text-decoration:none; display:inline-block; cursor:pointer; white-space:nowrap; transition:background .16s ease, border-color .16s ease, transform .1s ease; } /* En la barra el boton no puede partirse en dos lineas ni montarse sobre la marca. Medido: a 336 px desbordaba la pagina 17 px. Encoger la letra no bastaba, asi que se acorta el TEXTO, que es lo que de verdad sobra. */ .solo-estrecho{ display:none; } @media (max-width:560px){ .barra .bot{ font-size:.8rem; padding:.5rem .75rem; } .marca{ font-size:1.25rem; } } @media (max-width:440px){ .solo-ancho{ display:none; } .solo-estrecho{ display:inline; } .barra .wrap{ padding:0 1rem; } } .bot:active{ transform:translateY(1px); } .bot-1{ background:var(--jade); color:var(--sobre-jade); } .bot-1:hover{ background:var(--jade-2); } .bot-2{ border-color:var(--raya-2); color:var(--papel); } .bot-2:hover{ border-color:var(--gris); background:var(--tinta-2); } /* ── portada ───────────────────────────────────────────────────────────── */ .portada{ padding:5.5rem 0 4rem; position:relative; } .portada::before{ content:""; position:absolute; inset:-18rem 0 auto 0; height:34rem; pointer-events:none; background:radial-gradient(60rem 22rem at 22% 60%, var(--jade-sombra), transparent 70%); } .ceja{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin:0 0 1.6rem; } h1{ font-family:var(--serif); font-size:clamp(2.3rem,4.2vw,3.6rem); line-height:1.05; font-weight:400; letter-spacing:-.02em; margin:0 0 1.4rem; text-wrap:balance; max-width:15ch; } h1 em{ font-style:italic; color:var(--jade-2); } .entradilla{ font-size:1.14rem; color:var(--papel-2); max-width:52ch; margin:0 0 2.2rem; } .acciones{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; } .apunte{ font-size:.85rem; color:var(--gris); margin:1.1rem 0 0; } /* ── marco de pantalla ─────────────────────────────────────────────────── */ .pantalla{ border:1px solid var(--raya); border-radius:.6rem; overflow:hidden; background:var(--tinta-2); box-shadow:0 36px 70px -34px var(--sombra); } .pantalla .cinta{ display:flex; align-items:center; gap:.4rem; padding:.55rem .75rem; background:var(--alza); border-bottom:1px solid var(--raya); } .pantalla .cinta i{ width:.52rem; height:.52rem; border-radius:50%; background:var(--raya-2); } .pantalla .cinta .ruta{ margin-left:.65rem; font-family:var(--mono); font-size:.7rem; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pantalla .lienzo{ padding:1.1rem; } .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; } .kpi{ background:var(--alza); border:1px solid var(--raya); border-radius:.4rem; padding:.8rem .85rem; } .kpi .rot{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); } .kpi .num{ font-family:var(--mono); font-size:1.6rem; font-weight:500; line-height:1.2; margin-top:.2rem; font-variant-numeric:tabular-nums; } .kpi.critico{ border-color:var(--teja-borde); background:var(--teja-tinte); } .kpi.critico .num{ color:var(--teja); } .kpi.bien .num{ color:var(--jade-2); } @media (max-width:620px){ .kpis{ grid-template-columns:repeat(2,1fr); } } .lineas{ display:grid; gap:.4rem; margin-top:.6rem; } .linea{ display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:.4rem; background:var(--alza); border-left:2px solid var(--ambar); font-size:.85rem; } .linea.urge{ border-left-color:var(--teja); } .linea .ref{ font-family:var(--mono); font-size:.74rem; color:var(--gris); } .linea .queda{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--ambar); white-space:nowrap; } .linea.urge .queda{ color:var(--teja); } @media (max-width:760px){ .linea .ref{ display:none; } } /* ── cifras ────────────────────────────────────────────────────────────── */ .cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--raya); } .cifra b{ display:block; font-family:var(--serif); font-size:2.4rem; font-weight:400; line-height:1; font-variant-numeric:tabular-nums; } .cifra span{ display:block; color:var(--gris); font-size:.82rem; margin-top:.5rem; line-height:1.5; max-width:22ch; } @media (max-width:760px){ .cifras{ grid-template-columns:repeat(2,1fr); gap:1.8rem; } } /* ── bloques ───────────────────────────────────────────────────────────── */ .bloque{ padding:5.5rem 0; border-top:1px solid var(--raya); } h2{ font-family:var(--serif); font-size:clamp(1.75rem,3.2vw,2.5rem); font-weight:400; line-height:1.12; letter-spacing:-.015em; margin:0 0 .9rem; text-wrap:balance; max-width:20ch; } .intro{ font-size:1.02rem; color:var(--papel-2); margin:0 0 2.4rem; max-width:56ch; } .coda{ color:var(--gris); font-size:.86rem; margin:1.4rem 0 0; max-width:60ch; } /* módulos */ .mods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:.5rem; } .mod{ display:flex; gap:.7rem; padding:.8rem .85rem; border:1px solid var(--raya); border-radius:.4rem; background:var(--tinta-2); } .mod .llave{ flex:none; width:2rem; height:1.15rem; border-radius:999px; background:var(--jade); position:relative; margin-top:.15rem; } /* La bolita se coloca con transform y no saltando de right a left: una propiedad que cambia de anclaje no se puede animar, y la portada enciende y apaga módulos (portada.js). */ .mod .llave::after{ content:""; position:absolute; top:.15rem; left:.15rem; width:.85rem; height:.85rem; border-radius:50%; background:var(--tinta); transform:translateX(.85rem); transition:transform .35s cubic-bezier(.22,.7,.2,1), background-color .35s ease; } .mod.apagado{ background:transparent; } .mod.apagado .llave{ background:var(--raya-2); } .mod.apagado .llave::after{ transform:none; background:var(--gris); } .mod .llave, .mod b, .mod small{ transition:background-color .35s ease, color .35s ease; } .mod.cambia{ border-color:var(--jade); } /* ⚠️ La entrada al hacer scroll fija su propia transition en las tarjetas y pisaría la del cambio de estado: se repiten aquí las dos para que el fondo y el borde también fundan. */ .mod, .con-entrada .mod[data-entra].dentro{ transition:opacity .62s cubic-bezier(.22,.7,.2,1) var(--d,0s), transform .62s cubic-bezier(.22,.7,.2,1) var(--d,0s), background-color .35s ease, border-color .35s ease; } .mod b{ display:block; font-size:.89rem; font-weight:500; } .mod.apagado b{ color:var(--papel-2); } .mod small{ display:block; color:var(--gris); font-size:.79rem; line-height:1.45; margin-top:.1rem; } /* perfiles */ .perfiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.5rem; } .perfil{ padding:1.2rem; border:1px solid var(--raya); border-radius:.4rem; background:var(--tinta-2); display:flex; flex-direction:column; } .perfil b{ font-family:var(--serif); font-size:1.12rem; font-weight:500; margin-bottom:.45rem; } .perfil small{ color:var(--gris); font-size:.83rem; line-height:1.55; flex:1; } .perfil .regimen{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; margin-top:1rem; padding-top:.7rem; border-top:1px solid var(--raya); color:var(--jade-2); } /* evaluación */ .dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; align-items:center; } @media (max-width:900px){ .dos{ grid-template-columns:minmax(0,1fr); gap:2rem; } .bloque{ padding:3.8rem 0; } } .desliza{ overflow-x:auto; } .tabla{ width:100%; min-width:25rem; border-collapse:collapse; font-size:.84rem; } .tabla th{ text-align:left; font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); font-weight:400; padding:.35rem .55rem; border-bottom:1px solid var(--raya); } .tabla td{ padding:.55rem .55rem; border-bottom:1px solid var(--raya); } .tabla td.cifra-c{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; } .marca-e{ font-family:var(--mono); font-size:.68rem; padding:.12rem .4rem; border-radius:.2rem; white-space:nowrap; } .marca-e.ok{ background:var(--jade-sombra); color:var(--jade-2); } .marca-e.no{ background:var(--teja-tinte); color:var(--teja); } /* capacidades: lista, no tarjetas — no todo es una tarjeta */ .capas{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem; } .capa{ padding:1.4rem 0; border-top:1px solid var(--raya); } .capa h3{ font-family:var(--serif); font-size:1.15rem; font-weight:500; margin:0 0 .35rem; } .capa p{ margin:0; color:var(--gris); font-size:.88rem; line-height:1.6; } @media (max-width:760px){ .capas{ grid-template-columns:1fr; } } /* datos */ .puntos{ display:grid; gap:1.3rem; } .punto{ display:flex; gap:.9rem; } .punto .aspa{ flex:none; font-family:var(--mono); font-size:.8rem; color:var(--jade); margin-top:.2rem; } .punto b{ display:block; font-size:.95rem; font-weight:500; margin-bottom:.15rem; } .punto span{ color:var(--gris); font-size:.87rem; line-height:1.55; } /* cierre */ .cierre{ padding:6.5rem 0; border-top:1px solid var(--raya); position:relative; } .cierre::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(48rem 18rem at 30% 0%, var(--jade-sombra), transparent 70%); } .cierre h2{ max-width:16ch; } footer{ border-top:1px solid var(--raya); padding:2.6rem 0 3rem; background:var(--tinta-2); } footer .filas{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center; } footer .avisos{ display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.84rem; color:var(--gris); } footer .avisos a{ text-decoration:none; } footer .avisos a:hover{ color:var(--papel); } .letra-chica{ color:var(--gris); font-size:.76rem; line-height:1.65; margin:1.6rem 0 0; max-width:78ch; } /* Una captura dentro del marco. `display:block` para que no deje el hueco del descendente de linea, y altura automatica para no deformarla nunca. */ .pantalla img{ display:block; width:100%; height:auto; } .pie{ font-family:var(--mono); font-size:.72rem; color:var(--gris); line-height:1.6; margin:.8rem 0 0; } /* ── capturas en miniatura, y la lupa ──────────────────────────────────── La torre ocupaba media pantalla. Se reducen y se abren al pulsarlas. El disparador es un