/* ===================================================================== estilo.css — Sistema de diseño compartido DIRECCIÓN: "SALA DE MÁQUINAS" --------------------------------------------------------------------- Lo usan las dos páginas del sitio: index.html → la calculadora pública (contexto CLARO: chapa) panel.html → el panel de flota (contexto OSCURO: chasis) IDEA — el sitio está construido como el equipamiento que describe. Chapa de aluminio anodizado, chasis de grafito, señalización amarilla y datos GRABADOS. El resultado no se muestra: se troquela. REGLA DEL ARCHIVO — cero valores mágicos. Todo tamaño, espacio, color y radio sale de un token. Si necesitas un valor que no existe, el problema es el token, no la regla. ===================================================================== */ /* ===================================================================== 0. TIPOGRAFÍAS --------------------------------------------------------------------- Dos familias variables autoalojadas en ./fuentes (90 KB en total). Sin CDN y sin build: funcionan abriendo el archivo con doble clic (comprobado: Chrome carga woff2 desde file:// si están al lado). Subset LATIN para las dos (el español entra entero en U+0000-00FF). LATIN-EXT solo para la mono, que es la única que tiene que pintar el símbolo ₿ (U+20BF) de fmtBTC(). Martian Mono trae dos ejes, wght y wdth, y por eso UNA sola familia cubre los dos registros del sitio: estrecha y pesada en titulares (rótulo industrial), ancha en la cifra protagonista (troquelada) y estrecha otra vez en las tablas densas del panel. ===================================================================== */ @font-face{ font-family:"Martian Mono"; src:url("fuentes/martianmono-latin.woff2") format("woff2"); font-weight:100 800; font-stretch:75% 112.5%; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Martian Mono"; src:url("fuentes/martianmono-latin-ext.woff2") format("woff2"); font-weight:100 800; font-stretch:75% 112.5%; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Public Sans"; src:url("fuentes/publicsans-latin.woff2") format("woff2"); font-weight:300 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } /* ===================================================================== 1. TOKENS ===================================================================== */ :root{ /* ---- PALETA BRUTA ------------------------------------------------- Cada color con su contraste medido. Los que no aparecen aquí, no existen: no hay hex sueltos en ninguna regla del proyecto. */ /* Aluminio anodizado */ --chapa:#D9DCDE; /* fondo de página */ --chapa-honda:#C3C8CB; /* superficies HUNDIDAS: controles, ventana */ --chapa-alta:#EDEEEF; /* superficies ELEVADAS: la placa */ /* Chasis de grafito */ --grafito:#1B1E22; /* chasis, cabecera, barra fija */ --grafito-2:#2A2F35; /* superficies dentro del chasis */ --grafito-3:#3A4046; /* superficies hundidas dentro del chasis */ /* Líneas grabadas */ --grabado:#9AA1A6; /* reglas y separadores (decorativo) */ --grabado-fuerte:#6E767B;/* bordes de CONTROL — 3,98:1 sobre chapa-alta, cumple WCAG 1.4.11 para elementos de UI */ --grabado-luz:#5A6167; /* el equivalente dentro del chasis */ /* Señalización industrial. Amarillo de seguridad, no naranja Bitcoin: está 40° más al verde y mucho más saturado. */ --senal:#EDB200; /* 8,74:1 con grafito → SIEMPRE relleno con tinta oscura encima, NUNCA texto sobre chapa (ahí daría 1,39:1) */ --senal-honda:#A87F00; /* relieve inferior del botón */ --senal-tinte:#F7E4A8; /* fondo suave sobre chapa. 13,2:1 con tinta */ /* Semántica. El signo del dinero es lo ÚNICO que se codifica en color, y tiene dos versiones porque el sitio tiene dos fondos. */ --frio:#17594A; /* margen positivo sobre chapa. 4,86:1 mínimo */ --calor:#96280F; /* pérdida sobre chapa. 4,78:1 mínimo */ --calor-honda:#6E1C08; /* franja oscura del rayado de señalización */ --frio-luz:#4FC79E; /* margen positivo sobre chasis. 7,97:1 */ --calor-luz:#FF7A5E; /* pérdida sobre chasis. 6,53:1 */ /* Tinta */ --tinta:#1B1E22; /* 12,1:1 sobre chapa */ --tinta-2:#4A5257; /* secundario. 4,73:1 sobre chapa-honda, que es el fondo más exigente donde aparece */ --luz:#E9EBEC; /* 13,9:1 sobre grafito */ --luz-2:#A7ADB1; /* 7,38:1 sobre grafito, 5,95:1 sobre grafito-2 */ /* ---- ESPACIADO — base 4, sin excepciones ---- Antes había 41 valores distintos de rem. Ahora hay nueve. */ --e1:.25rem; /* 4px */ --e2:.5rem; /* 8px */ --e3:.75rem; /* 12px */ --e4:1rem; /* 16px */ --e5:1.5rem; /* 24px */ --e6:2rem; /* 32px */ --e7:3rem; /* 48px */ --e8:4rem; /* 64px */ --e9:6rem; /* 96px */ /* ---- ESCALA TIPOGRÁFICA — razón 1,25 desde 16px ---- Antes había ~19 tamaños elegidos a ojo. Ahora hay nueve peldaños. */ --t-xxs:.6875rem; /* 11 — solo micro-etiquetas de la cabecera móvil */ --t-xs:.8125rem; /* 13 — etiquetas grabadas, notas al pie */ --t-s:.875rem; /* 14 — texto secundario, filas de datos */ --t-m:1rem; /* 16 — cuerpo */ --t-l:1.25rem; /* 20 — entradilla, h3 */ --t-xl:1.5625rem; /* 25 — h2, cifras de cinta */ --t-2xl:1.9375rem;/* 31 */ --t-3xl:2.4375rem;/* 39 — cifra troquelada en móvil */ --t-4xl:3.0625rem;/* 49 — cifra troquelada */ --t-5xl:3.8125rem;/* 61 — h1 */ /* ---- RADIOS — TRES, y cada uno con motivo ---- Antes había ocho sin criterio. El metal no se redondea: o es plano, o lleva un chaflán mecanizado. Lo único redondo de una máquina es un piloto. */ --r-plano:0; --r-chaflan:3px; --r-led:999px; /* ---- TIPOGRAFÍAS ---- */ --display:"Martian Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; --cuerpo:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --dato:var(--display); /* ---- SOMBRAS — solo dos, y las dos describen relieve real ---- */ --hundido:inset 0 2px 4px rgba(27,30,34,.16), inset 0 -1px 0 rgba(255,255,255,.65); --elevado:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(27,30,34,.18), 0 2px 4px rgba(27,30,34,.12); } /* ===================================================================== 2. CONTEXTOS — la misma pieza, dos materiales --------------------------------------------------------------------- Aquí está la clave de que un solo archivo vista dos productos. Los componentes NO conocen los colores: usan --sup-*, --tx, --linea y --acento-tx. Lo que cambia es el contexto en el que están metidos. por defecto → CHAPA (calculadora pública) .chasis → GRAFITO (cabecera de las dos páginas, y el panel entero) La placa de aluminio atornillada sobre el chasis oscuro es exactamente como se ve una máquina de verdad. No son dos estéticas: son las dos caras de la misma. ===================================================================== */ :root,.chapa{ --sup-0:var(--chapa); --sup-1:var(--chapa-alta); --sup-2:var(--chapa-honda); --tx:var(--tinta); --tx2:var(--tinta-2); --linea:var(--grabado); --linea-fuerte:var(--grabado-fuerte); --pos:var(--frio); --neg:var(--calor); /* El acento NUNCA es texto sobre chapa: sobre claro solo rellena. */ --acento-tx:var(--tinta); --acento-suave:var(--senal-tinte); --foco:var(--grafito); --relieve:var(--hundido); } .chasis,body.chasis{ --sup-0:var(--grafito); --sup-1:var(--grafito-2); --sup-2:var(--grafito-3); --tx:var(--luz); --tx2:var(--luz-2); --linea:var(--grafito-3); --linea-fuerte:var(--grabado-luz); --pos:var(--frio-luz); --neg:var(--calor-luz); /* Sobre grafito el amarillo SÍ es legible (8,74:1) y hace de acento. */ --acento-tx:var(--senal); --acento-suave:rgba(237,178,0,.14); --foco:var(--senal); --relieve:inset 0 2px 4px rgba(0,0,0,.4); color:var(--tx); background:var(--sup-0); } /* ---- ALIAS HEREDADOS ----------------------------------------------- El panel tiene ~200 reglas escritas contra los nombres antiguos. En vez de reescribirlas una a una, sus nombres apuntan al token contextual que les corresponde: así adoptan la identidad nueva de golpe y sin riesgo. No añadas alias nuevos — esto es deuda heredada, no una API. */ :root{ --bg:var(--sup-0); --panel:var(--sup-1); --panel2:var(--sup-2); --border:var(--linea); --acc:var(--acento-tx); --acc-suave:var(--acento-suave); --ok:var(--pos); --bad:var(--neg); --radius:var(--r-chaflan); --r:var(--r-chaflan); --ambar:var(--senal); --ambar-suave:var(--acento-suave); --verde:var(--pos); --rojo:var(--neg); --serif:var(--display); --sans:var(--cuerpo); --mono:var(--dato); --carbon:var(--sup-0); --carbon2:var(--sup-1); --carbon3:var(--sup-2); --borde:var(--linea); --papel:var(--chapa-alta); --tinta-papel:var(--tinta); } /* ===================================================================== 3. BASE ===================================================================== */ *{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%} body{ background:var(--sup-0); color:var(--tx); font-family:var(--cuerpo); font-size:var(--t-m); line-height:1.55; overflow-x:hidden; /* Aluminio cepillado. Un rayado de 3px, no una textura de stock: a tamaño real no se ve como patrón, solo impide que la superficie se lea como "gris plano de plantilla". */ background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, transparent 1px 3px); } body.chasis{background-image:none} /* ---- TITULARES: rótulo industrial ---- Mono estrecha, pesada, en caja alta y muy apretada. Es la misma familia que las cifras: la voz del sitio es la voz de la máquina. Lo que separa un titular de un dato no es la familia, es el ancho y el peso. */ h1,h2,h3{ font-family:var(--display); font-stretch:75%; line-height:1.02; letter-spacing:-.015em; text-transform:uppercase; text-wrap:balance; } h1{font-weight:800;font-size:clamp(2rem,5.5vw,var(--t-5xl)); margin-bottom:var(--e4);max-width:16ch} h2{font-weight:800;font-size:clamp(1.375rem,3.6vw,var(--t-xl)); margin-bottom:var(--e4)} h3{font-weight:700;font-size:var(--t-m);letter-spacing:.04em; margin-bottom:var(--e2)} p{margin-bottom:var(--e3);max-width:68ch} a{color:var(--tx);text-decoration-color:var(--linea-fuerte); text-underline-offset:3px} a:hover{text-decoration-color:currentColor} strong{font-weight:700;color:var(--tx)} small,.mut,.mini{color:var(--tx2);font-size:var(--t-xs)} .nota,.pista{font-size:var(--t-xs);color:var(--tx2);margin-top:var(--e2); max-width:64ch} .envoltorio{max-width:1080px;margin:0 auto;padding:0 var(--e5)} .seccion{padding:var(--e7) 0} .seccion + .seccion{border-top:1px solid var(--linea)} .pos{color:var(--pos)} .neg{color:var(--neg)} .amb,.naranja{color:var(--acento-tx)} .mb{margin-bottom:var(--e3)} .mt{margin-top:var(--e3)} .derecha{text-align:right} /* ---- RÓTULO DE SECCIÓN ---- Sustituye a los

genéricos cuando la sección es un bloque funcional: número de canal + nombre + regla que llega al borde. Es lo que lleva grabado un panel de verdad, y da ritmo sin pedir más tamaños de fuente. */ .rotulo{display:flex;align-items:center;gap:var(--e3); font-family:var(--display);font-weight:600;font-stretch:78%; font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase; color:var(--tx2);margin-bottom:var(--e3)} .rotulo::after{content:"";flex:1;height:1px;background:var(--linea)} /* ---- REGLA GRABADA ---- Dos líneas de 1px, una oscura y una clara. Es fresado en metal, no un
gris. Sobre chasis solo queda la oscura. */ .grabado,hr{height:2px;border:0;margin:var(--e6) 0; background:linear-gradient(var(--linea) 0 1px, rgba(255,255,255,.8) 1px 2px)} .chasis .grabado,.chasis hr{background:var(--linea)} /* ===================================================================== 4. CHASIS — cabecera y navegación del sitio El marcado se repite en las dos páginas a propósito: son veinte líneas, y así no hay salto visual al cargar ni dependemos de JS para navegar. ===================================================================== */ header{background:var(--grafito);border-bottom:3px solid var(--senal)} header,.chasis{--sup-0:var(--grafito);--sup-1:var(--grafito-2); --sup-2:var(--grafito-3);--tx:var(--luz);--tx2:var(--luz-2); --linea:var(--grafito-3);--linea-fuerte:var(--grabado-luz);--pos:var(--frio-luz); --neg:var(--calor-luz);--acento-tx:var(--senal); --acento-suave:rgba(237,178,0,.14);--foco:var(--senal); color:var(--tx)} .cab{display:flex;align-items:center;gap:var(--e3) var(--e5); flex-wrap:wrap;min-height:56px} .marca{display:flex;align-items:center;gap:var(--e3); font-family:var(--display);font-weight:700;font-stretch:85%; font-size:var(--t-s);letter-spacing:.01em;text-transform:uppercase; color:var(--luz);text-decoration:none; /* Área táctil ≥44px sin mover el diseño */ padding:var(--e2) var(--e2);margin:calc(var(--e2)*-1)} .marca .troquel,.marca span:first-child{ width:26px;height:26px;background:var(--senal);color:var(--grafito); display:grid;place-items:center;flex-shrink:0;border-radius:var(--r-chaflan)} /* El pico ocupa el 66% del troquel: es el aire que necesita una silueta maciza para no parecer que revienta la caja. En porcentaje y no en px para que el troquel de 22px del móvil escale solo. */ .marca .troquel svg,.marca span:first-child svg{width:66%;height:66%;display:block} .marca:hover{color:#fff} /* Etiqueta de "no oficial": es honesto y evita que la web se confunda con la oficial de GoMining, que sería un problema de confianza. */ .no-oficial{font-family:var(--display);font-weight:500;font-stretch:78%; font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em; color:var(--luz-2);border:1px solid #4A5157;border-radius:var(--r-chaflan); padding:var(--e1) var(--e2);white-space:nowrap} .navsitio{display:flex;gap:var(--e1);margin-left:auto} .navsitio a{display:inline-flex;align-items:center;min-height:44px; padding:var(--e2) var(--e3);border-radius:var(--r-chaflan); font-family:var(--display);font-weight:500;font-stretch:82%; font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase; text-decoration:none;color:var(--luz-2)} .navsitio a:hover{color:var(--luz)} .navsitio a[aria-current=page]{background:var(--senal);color:var(--grafito); font-weight:700} /* ---- SELECTOR DE IDIOMA ---- Dos troqueles pegados: el activo se invierte igual que la pestaña activa del panel y que los atajos de la calculadora. Es el mismo gesto en todo el sitio, así que no hay que aprenderlo tres veces. */ .idiomas{display:flex;gap:1px;flex-shrink:0; background:var(--grafito-3);border-radius:var(--r-chaflan);overflow:hidden} /* En la calculadora son (dos archivos: index.html y en.html); en el panel son