/* era7 · sala de demostracion (ORDEN-era7-067). Capa que se anade ENCIMA de * `/era7/css/era7.css`: reutiliza sus variables (--tinta, --acento, --sans...) * y no redeclara tipografias ni paleta. * * REGLAS DE LA CASA QUE ESTE FICHERO CUMPLE (mismas que era7.css) * - Ningun recurso externo, ningun `style=` en el HTML. * - Por defecto (sin JS, o antes de que `sala.js` anada `con-sala` al * ) las DIEZ estaciones se leen en columna, una tras otra: nunca * negro, nunca hueco. La clase `con-sala` es la que las convierte en * pantallas superpuestas, una activa a la vez (patron `con-guion` de * era7.css: JS decide, CSS obedece). * - `prefers-reduced-motion`: sin transiciones, todo visible al instante. */ /* --------------------------------------------------------------- reactor */ .reactor-fondo { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity 900ms ease; pointer-events: none; background: var(--tinta); } .con-sala[data-estacion-activa="1"] .reactor-fondo, .con-sala[data-estacion-activa="10"] .reactor-fondo { opacity: 1; } #lienzo-sala { position: absolute; inset: 0; width: 100%; height: 100%; display: none; } .con-sala.reactor-listo #lienzo-sala { display: block; } .reactor-estatico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.9; transition: opacity 700ms ease; } .con-sala.reactor-listo .reactor-estatico { opacity: 0; } .reactor-svg { width: min(80vmin, 720px); height: auto; } .reactor-velo { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(5,7,10,0) 25%, rgba(5,7,10,0.82) 76%, var(--tinta) 100%); } /* ------------------------------------------------------------- estaciones */ .estaciones { position: relative; z-index: 1; } .estacion { max-width: var(--ancho); margin: 0 auto; padding: 64px clamp(20px, 5vw, 64px) 120px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; border-top: 1px solid var(--tinta-3); } .estacion:first-child { border-top: 0; } .con-sala .estacion { position: fixed; inset: 0; margin: 0; max-width: none; border-top: 0; opacity: 0; visibility: hidden; pointer-events: none; padding: 96px clamp(20px, 6vw, 96px) 140px; align-items: center; text-align: center; transition: opacity 420ms ease; overflow-y: auto; } .con-sala .estacion.activa { opacity: 1; visibility: visible; pointer-events: auto; } .estacion-rotulo { font-family: var(--mono); font-size: clamp(13px, 1.3vw, 16px); letter-spacing: 0.32em; text-transform: uppercase; color: var(--acento); } .estacion-titulo { font-size: clamp(40px, 6vw, 92px); line-height: 1.06; letter-spacing: -0.02em; color: var(--texto); } .acentuado { color: var(--acento); } .estacion-sub { font-size: clamp(20px, 2.1vw, 30px); color: var(--texto-tenue); max-width: 42ch; } .con-sala .estacion-sub { margin: 0 auto; } .estacion-cierre { font-size: clamp(24px, 2.6vw, 38px); color: var(--texto); font-weight: 600; letter-spacing: -0.01em; } .estacion-cta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 12px; } .boton-sala { display: inline-block; text-decoration: none; background: none; cursor: pointer; border: 1px solid var(--acento-hondo); color: var(--acento); font-family: var(--mono); font-size: clamp(13px, 1.3vw, 15px); letter-spacing: 0.22em; text-transform: uppercase; padding: 18px 30px; transition: background 220ms ease, color 220ms ease; } .boton-sala:hover, .boton-sala:focus-visible { background: var(--acento); color: #04121c; } .boton-sala-tenue { border-color: var(--tinta-3); color: var(--texto-tenue); } .boton-sala-tenue:hover, .boton-sala-tenue:focus-visible { background: var(--acento); color: #04121c; border-color: var(--acento); } /* nombres de empleado clicables dentro del texto: botones reales */ .nombre-empleado, .nodo-empleado { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--acento); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--acento-hondo); } .nombre-empleado:hover, .nombre-empleado:focus-visible, .nodo-empleado:hover, .nodo-empleado:focus-visible { text-decoration-color: var(--acento); } /* ------------------------------------------------------- 2 · la cadena -- */ .cadena-factoria { list-style: none; margin: 12px auto 0; padding: 0; max-width: 920px; display: grid; gap: 1px; background: var(--tinta-3); border: 1px solid var(--tinta-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .cadena-factoria li { background: var(--tinta-2); padding: 20px 16px; text-align: left; } .cadena-factoria b { display: block; font-family: var(--mono); font-size: clamp(12px, 1.1vw, 14px); letter-spacing: 0.16em; color: var(--acento); margin-bottom: 8px; } .cadena-factoria span { font-size: clamp(14px, 1.3vw, 17px); color: var(--texto-tenue); } .estacion-equipo { margin-top: 8px; font-family: var(--mono); font-size: clamp(13px, 1.2vw, 15px); letter-spacing: 0.06em; color: var(--texto-debil); max-width: none; } .estacion-equipo .nombre-empleado { font-family: var(--mono); } /* -------------------------------------------------------- 3 · comparacion */ .comparacion { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 8px; } .comparacion-col { background: var(--tinta-2); border: 1px solid var(--tinta-3); padding: 26px 30px; text-align: left; min-width: 220px; } .comparacion-col b { display: block; font-family: var(--mono); letter-spacing: 0.2em; font-size: 14px; margin-bottom: 14px; color: var(--texto-tenue); } .comparacion-col-acento { border-color: var(--acento-hondo); } .comparacion-col-acento b { color: var(--acento); } .comparacion-col ol { margin: 0; padding-left: 20px; color: var(--texto); font-size: clamp(15px, 1.5vw, 19px); display: grid; gap: 6px; } .comparacion-flecha { font-size: 28px; color: var(--texto-debil); } /* ---------------------------------------------------- 5 · coordinacion -- */ .nodos-coordinacion { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; } .nodo-empleado { font-size: clamp(20px, 2vw, 28px); font-weight: 600; border: 1px solid var(--tinta-3); padding: 16px 26px; text-decoration: none; } .nodo-flecha { font-size: 26px; color: var(--texto-debil); } /* ------------------------------------------------- 4/6/7/8/9 · consola -- */ .consola { position: fixed; right: clamp(14px, 3vw, 40px); bottom: 108px; z-index: 4; width: min(560px, 90vw); max-height: 46vh; overflow-y: auto; background: rgba(10, 14, 20, 0.94); border: 1px solid var(--tinta-3); padding: 18px 20px 22px; text-align: left; } .con-sala .consola.visible { display: block; } .con-sala .consola:not(.visible) { display: none; } .consola-simulacion { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--alerta); margin: 0 0 12px; } .consola-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .consola-linea { border-top: 1px solid var(--tinta-3); padding-top: 10px; } .consola-linea:first-child { border-top: 0; padding-top: 0; } .consola-cabecera { display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--texto-debil); } .consola-hora { font-variant-numeric: tabular-nums; } .consola-actor { color: var(--acento); letter-spacing: 0.08em; } .consola-herramienta { color: var(--texto-tenue); } .consola-texto { margin: 6px 0 0; font-size: clamp(15px, 1.4vw, 18px); color: var(--texto); line-height: 1.4; } .consola-estado { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--texto-debil); } .consola-estado.en-espera { color: var(--alerta); } /* --------------------------------------------------- 8 · aprobacion ----- */ .tarjeta-aprobacion { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(460px, 88vw); background: var(--tinta-2); border: 1px solid var(--acento-hondo); padding: 28px 26px; text-align: left; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .tarjeta-titulo { font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); margin: 0 0 16px; } .tarjeta-dato { margin: 10px 0; font-size: 15px; color: var(--texto-tenue); } .tarjeta-dato b { display: block; color: var(--texto-debil); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; } #boton-aprobar { margin-top: 18px; } /* -------------------------------------------------- 9 · transparencia -- */ .transparencia { margin-top: 12px; display: grid; gap: 1px; background: var(--tinta-3); border: 1px solid var(--tinta-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1000px; width: 100%; } .transparencia-col { background: var(--tinta-2); padding: 20px; text-align: left; max-height: 34vh; overflow-y: auto; } .transparencia-col b { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--acento); margin-bottom: 12px; } .transparencia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .transparencia-lista li { font-size: 14px; color: var(--texto-tenue); line-height: 1.4; } .transparencia-lista small { display: block; margin-top: 4px; color: var(--texto-debil); font-family: var(--mono); font-size: 11px; } /* ------------------------------------------------------------- ficha -- */ .ficha-sala { position: fixed; right: 0; top: 0; bottom: 0; z-index: 7; width: min(420px, 92vw); background: var(--tinta-2); border-left: 1px solid var(--tinta-3); padding: 30px 26px; overflow-y: auto; text-align: left; } .ficha-sala-rol { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--acento); text-transform: uppercase; margin: 0; } .ficha-sala-nombre { font-size: 30px; margin: 4px 0 18px; } .ficha-sala-etiqueta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--texto-debil); text-transform: uppercase; margin: 18px 0 8px; } .ficha-sala-dato { margin: 14px 0; font-size: 15px; color: var(--texto-tenue); } .ficha-sala-dato b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-debil); margin-bottom: 4px; } .ficha-sala-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ficha-sala-lista li { font-family: var(--mono); font-size: 12px; padding: 6px 10px; border: 1px solid var(--tinta-3); color: var(--texto-tenue); } .ficha-sala-lista li.con-firma { border-color: var(--acento-hondo); color: var(--acento); } .ficha-sala-estado { margin-top: 18px; font-size: 12.5px; color: var(--texto-debil); } .ficha-sala-cerrar { margin-top: 22px; background: none; border: 1px solid var(--tinta-3); color: var(--texto-tenue); font: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; } .ficha-sala-cerrar:hover, .ficha-sala-cerrar:focus-visible { color: var(--texto); border-color: var(--acento-hondo); } /* --------------------------------------------------------- navegacion -- */ .nav-sala { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 16px clamp(16px, 4vw, 40px); background: linear-gradient(0deg, rgba(5,7,10,0.94), rgba(5,7,10,0)); } .nav-sala-boton { background: none; border: 1px solid var(--tinta-3); color: var(--texto-tenue); cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 16px; } .nav-sala-boton:hover, .nav-sala-boton:focus-visible { color: var(--texto); border-color: var(--acento-hondo); } .puntos { display: flex; gap: 8px; } .punto { width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--tinta-3); border: 1px solid var(--acento-hondo); } .punto.activo { background: var(--acento); border-color: var(--acento); } .posicion-sala { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--texto-debil); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center; } .sin-js-sala { padding: 40px clamp(16px, 5vw, 48px); color: var(--texto-tenue); max-width: var(--ancho); margin: 0 auto; } /* -------------------------------------------------------- responsive -- */ @media (max-width: 860px) { .estacion-titulo { font-size: clamp(32px, 8vw, 60px); } .estacion-sub { font-size: clamp(17px, 3.4vw, 22px); } .consola { left: 12px; right: 12px; width: auto; bottom: 96px; } .ficha-sala { width: 100%; } } /* ============================================= reduced-motion (orden §19) */ @media (prefers-reduced-motion: reduce) { .reactor-fondo, .reactor-estatico, .estacion, .consola-linea { transition-duration: 0.001ms !important; } .con-sala .estacion { position: static; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: none; } .con-sala .estacion.activa { display: flex; } }