/* =========================================================================== app.css -- RTSS Red Sigma v2. La identidad es la de la v1 y las variables son las mismas: tinta casi negra con fondo granate, rojo Red Sigma para lo que manda, mono para los datos. Lo que se fue es la mitad de la hoja de la v1, que vestia un escaner OSINT que en la v2 no existe. Regla que se mantiene de la v1 y conviene no olvidar: [hidden] lleva !important. El atributo oculta con el display de la hoja del navegador y CUALQUIER display que escribamos nosotros le gana; asi es como un panel con su `hidden` puesto aparecia abierto. =========================================================================== */ :root { /* ======================= LOS FONDOS, 05/10/2026 ======================= Oscar pidio la paleta de la maqueta de la landing: fondo mas oscuro para el lienzo, y el acento y el texto mas claros por contraste. De donde salen los valores: son los de `landing.css` -`--ink`, `--ink-2`, `--surf`, `--surf-2`; estaba en `landing/sitio/assets/css/` y desde el 18/10/2026 esta al lado de esta hoja-, que es la misma familia de vino con la saturacion bajada de ~49% a ~10%. El rojo deja de ser el lienzo entero y pasa a ocupar el acento, el borde y lo elegido. SOLO SE MUEVEN LOS FONDOS. El acento, el hueso, los campos claros y las severidades se quedan donde estaban: ver la cabecera de este bloque y los comentarios de cada uno. Bajar el fondo los separa mas, que es justo lo que se buscaba. */ --ink: #171314; --ink-2: #201a1b; --ink-3: #2b2324; --ink-rgb: 23, 19, 20; --ink-3-rgb: 43, 35, 36; --bone: #f7e8ea; --bone-2: #e8c9cd; --rule: rgba(var(--bone-rgb), 0.14); --gold: #ff4a5e; --gold-soft: #ff7e8d; --muted: rgba(247, 232, 234, 0.78); --font-serif: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --max: 1180px; --gutter: clamp(18px, 3.5vw, 48px); --ease: cubic-bezier(.2, .7, .2, 1); --bien: #4caf7d; --aviso: #f5a623; --mal: #ff5c6e; /* LOS CAMPOS DONDE SE ESCRIBE SON CLAROS, y el resto de la pantalla es oscura. Es a proposito: con el campo del mismo color que el fondo no se ve donde hay que escribir y se confunde con un rotulo. FONDO CLARO OBLIGA A TEXTO OSCURO. Los cuatro colores van juntos aqui para que nadie cambie el fondo y deje el texto en hueso, que es como lo escrito se vuelve ilegible. Medidos en el navegador sobre --campo, con los estilos calculados y no a ojo: --campo-texto 15.66:1 lo que se teclea --campo-marca 6.68:1 el marcador de posicion --campo-icono 6.95:1 el icono de la ranura El minimo de WCAG AA para texto es 4.5:1. */ --campo: #f6eef0; --campo-texto: #2a0f12; --campo-marca: #6e4a4f; --campo-icono: #9c1f2d; --campo-borde: rgba(41, 14, 16, .32); --sev-critica: #ff2d44; --sev-alta: #ff5c6e; --sev-media: #f5a623; --sev-baja: #4caf7d; /* LA QUINTA, QUE FALTABA. `Informativo` era la unica severidad sin color propio: su chip caia al gris de `.pg-chip` y se leia como "sin clasificar" en vez de como el escalon mas bajo de la escala. Azul apagado a proposito: tiene que verse DISTINTO de las cuatro que piden accion, no mas suave que la baja. */ --sev-informativo: #6f8fb0; /* Alto de la banda de aplicacion. Es fija, asi que el lienzo tiene que reservarle sitio o el primer titulo nace debajo de ella. */ --banda-alto: 56px; /* Ancho de la barra lateral. Lo usan el lienzo y la banda para apartarse: si cada uno llevara su numero, cambiar la barra descuadraria los otros dos y el fallo se veria como "la pantalla esta torcida". */ --lat-ancho: 244px; /* EL FONDO DEL ITEM ACTIVO de la barra, y es un color SOLIDO a proposito. Antes era rojo translucido al 12-16% sobre el granate de la barra: a esa opacidad el item elegido y el de al lado se parecian demasiado, y aqui equivocarse de fila es lanzar un pentest autorizado contra el objetivo de otro cliente. Un solo valor para la herramienta activa y para la aplicacion activa: si cada uno llevara el suyo, "lo elegido" dejaria de verse igual en los dos grupos de la misma barra. */ --lat-activo: #4a2027; /* ===================== LO QUE EL TEMA INTERCAMBIA ===================== Windows resuelve el tema en el sistema y la app hereda sus recursos; iOS nombra los suyos por funcion. Las dos plataformas hacen lo mismo: el tema es un intercambio de VALORES, no un juego de reglas alternas. Por eso cada token de aqui existe tambien en `[data-tema="claro"]` y ninguna regla de mas abajo pregunta por el tema. LOS VALORES DEL TEMA CLARO NO SON NUEVOS NI SE RECALCULAN AQUI: salen de `landing de pruebas visuales/v3/estilo.css`, que los tiene medidos sobre la superficie en la que de verdad se pintan. */ /* El tinte del HUECO -la caja rehundida dentro de una tarjeta-. Era negro escrito 38 veces con opacidades distintas, y cada opacidad esta medida donde se usa. Cambia el TINTE y no las opacidades: en claro un velo negro al 45% deja un bloque gris oscuro con texto oscuro encima. */ --hueco-rgb: 0, 0, 0; /* El tinte del hueso, para las reglas y las barras de desplazamiento. */ --bone-rgb: 246, 199, 206; /* Capas "subtle fill" de Fluent: el hover no cambia el color del control, le superpone un velo. En oscuro es luz y en claro es sombra, que es la unica forma de que el mismo hover se vea sobre los dos fondos. */ --capa-hover: rgba(255, 255, 255, .05); --capa-hover-2: rgba(255, 255, 255, .07); /* El chasis del chrome: la barra lateral, la banda y los menus flotantes. Es el MARCO de la ventana y no el lienzo, asi que va aparte de --ink. */ --chrome: rgba(10, 8, 9, .94); --chrome-alto: rgba(10, 8, 9, .97); /* El fondo de las tarjetas grandes -consola, selector y la puerta-. En oscuro es un degradado y en claro es blanco plano con una sombra de 1px: en claro la jerarquia se lee por ELEVACION, no por color. */ --panel: linear-gradient(160deg, rgba(var(--ink-3-rgb), .5) 0%, rgba(var(--ink-rgb), .7) 100%); --panel-sombra: none; /* Lo legible ENCIMA del acento, cuando el acento es relleno y no texto. */ --sobre-acento: var(--ink); /* El nombre de la fila elegida de la barra. Blanco puro sobre el granate de --lat-activo; en claro ese fondo sube a casi blanco y el blanco puro desaparece, asi que ahi es el color de texto primario. */ --lat-activo-txt: #fff; /* Mica de Windows 11: el material tine la ventana con el escritorio detras. Se simula con un degradado propio porque aqui no hay wallpaper que muestrear. */ --mica: linear-gradient(160deg, #241d1f 0%, #1b1617 46%, #171314 100%); --fondo-escena: radial-gradient(120% 90% at 18% 0%, #2a2022 0%, #141011 55%, #0d0a0b 100%); --reflejo: rgba(255, 255, 255, .10); --borde-ventana: rgba(0, 0, 0, .55); /* Material translucido de las barras de iOS. La opacidad es alta a proposito: el blur mezcla lo que pase por debajo, y un material demasiado transparente convierte el contraste del rotulo en una loteria. */ --material: rgba(23, 19, 20, .86); --chasis: #0b0909; --chasis-borde: #3a3335; --relleno: rgba(247, 232, 234, .10); /* El gris de sistema de Apple se queda en 2.8:1 sobre el fondo de grupo. Este es el que usa la maqueta para la pestana apagada y los chevrons. */ --tenue: rgba(247, 232, 234, .60); --r-ios: 10px; } /* ===================== EL TEMA CLARO ===================================== Ni Windows 11 ni iOS pintan el claro como un gris plano: el lienzo es gris muy bajo y las tarjetas suben a blanco puro, de modo que la jerarquia se lee por elevacion y no por color. EL ROJO DE MARCA SE OSCURECE PORQUE EL ORIGINAL NO LLEGA. #ff4a5e sobre blanco se queda en 2.4:1 y hasta #d92d42 se queda en 4.27:1 sobre el fondo de grupo -que es donde de verdad se dibuja la mitad de este texto-. #c62233 da 5.1:1 sobre el lienzo y 5.7:1 sobre la tarjeta, asi que el acento ENTERO baja a ese valor y no se parte en dos: en esta consola el acento es texto mucho mas a menudo que relleno, y un token que sirve para una cosa y no para la otra acaba usado en la equivocada. `:root` NO SE TOCA. --gold: #ff4a5e y --ink: #171314 siguen siendo los de la marca; esto es el intercambio de valores del tema, no una paleta nueva. */ [data-tema="claro"] { --ink: #f2f2f7; --ink-2: #ffffff; --ink-3: #ebe6e7; --ink-rgb: 242, 242, 247; --ink-3-rgb: 235, 230, 231; --bone: #1a1416; --bone-2: #463a3d; --bone-rgb: 26, 20, 22; --rule: rgba(26, 20, 22, .14); --muted: rgba(26, 20, 22, .72); --tenue: rgba(26, 20, 22, .78); --gold: #c62233; /* `--gold-soft` SE INVIERTE: en oscuro es un rojo MAS CLARO que el acento -se aleja del fondo subiendo- y en claro tiene que alejarse bajando. No es un matiz: es el color del acento cuando cae sobre un HUECO o sobre una superficie ya tenida de acento, y los huecos de esta hoja se APILAN -una caja dentro de otra dentro de la carpeta del expediente-. Medido en el navegador el 06/10/2026 sobre los colores que de verdad se pintan: el rotulo ACCESO REQUERIDO acaba sobre rgb(217,212,214), donde #c62233 da 3.91:1 y #9b1526 da 5.68:1. */ --gold-soft: #9b1526; --sobre-acento: #ffffff; /* El hueco deja de ser negro y pasa a ser el gris del sistema: al 18% sobre blanco da la caja rehundida de siempre, y al 45% sigue dejando el texto primario por encima de 7:1. */ --hueco-rgb: 170, 160, 163; --capa-hover: rgba(26, 20, 22, .05); --capa-hover-2: rgba(26, 20, 22, .07); --chrome: #f4f0f1; --chrome-alto: #ffffff; --panel: #ffffff; --panel-sombra: 0 1px 2px rgba(0, 0, 0, .06); /* El verde y el ambar puros no pasan sobre blanco: 2.4:1 y 2:1. Estos son los de la maqueta, medidos sobre la tarjeta y sobre el fondo de grupo. */ --bien: #19694a; /* El ambar baja un escalon mas que el de la maqueta -#8a5a00-: alli se media sobre una tarjeta plana y aqui "sin confirmar" cae sobre un hueco tenido de ambar DENTRO de otro hueco, y ahi #8a5a00 se queda en 4.26:1. Un ambar asi de oscuro se lee marron, y es el precio: el aviso de que un hallazgo no se reprodujo tiene que poder leerse, que es justo lo que impide que acabe en un entregable como si estuviera confirmado. */ --aviso: #7a4f00; --mal: #c62233; --sev-critica: #a81128; --sev-alta: #c62233; --sev-media: #8a5a00; --sev-baja: #19694a; --sev-informativo: #3c6381; /* La ranura donde se escribe sigue siendo CLARA, pero en un tema claro un campo blanco sobre tarjeta blanca no se ve: lo que lo distingue aqui es el borde, que sube de .32 a .5, y el hundido interior que ya tenia. */ --campo: #ffffff; --campo-borde: rgba(41, 14, 16, .5); /* La fila elegida de la barra. Solido, como en oscuro, y es el mismo valor para la herramienta activa y para la aplicacion activa. El acento encima da 4.69:1 y el texto primario 14.91:1. */ --lat-activo: #fbe3e6; --lat-activo-txt: var(--bone); --mica: linear-gradient(160deg, #fbf9fa 0%, #f6f3f4 48%, #f1eced 100%); --fondo-escena: radial-gradient(120% 90% at 18% 0%, #d8d2d4 0%, #bdb5b8 55%, #a79ea1 100%); --reflejo: rgba(255, 255, 255, .85); --borde-ventana: rgba(0, 0, 0, .18); --material: rgba(250, 250, 252, .88); --chasis: #d8d2d4; --chasis-borde: #f1eef0; --relleno: rgba(118, 118, 128, .12); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-gutter: stable; } body { font-family: var(--font-sans); background: var(--ink); color: var(--bone); line-height: 1.6; letter-spacing: 0.005em; min-height: 100vh; } /* LO QUE HAY DETRAS DEL APARATO. Era el tinte de marca del lienzo entero; desde que la consola se dibuja dentro de una ventana -o dentro de un telefono- el lienzo es `.lienzo` y esto es el escritorio sobre el que la ventana se apoya. Sigue siendo `fixed`: la ventana se mueve con el scroll de la pagina en la cara estrecha y el fondo no tiene que moverse con ella. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--fondo-escena); } img, svg { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } ::selection { background: var(--gold); color: var(--ink); } :focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(var(--ink-rgb), .6); } ::-webkit-scrollbar-thumb { background: rgba(var(--bone-rgb), .16); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 126, 141, .34); } .shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .mono { font-family: var(--font-mono); } .opcional { opacity: .6; font-weight: 400; } /* ========================================================================= LA BARRA LATERAL Marca, las dos herramientas y los clientes registrados. LO QUE SIGUE AQUI ES EL ASPECTO; EL SITIO LO PONE CADA CARA, al final de esta hoja: columna izquierda de la rejilla de la ventana en la cara de Windows y listas agrupadas dentro del scroll en la de iPhone. Las declaraciones de posicion de abajo son el estado de partida -y el que vale si alguna vez se usa esta barra fuera del aparato-; las dos caras lo sustituyen. ========================================================================= */ .lateral { position: fixed; top: 0; left: 0; bottom: 0; z-index: 210; width: var(--lat-ancho); display: flex; flex-direction: column; gap: 14px; padding: 18px 12px; /* La barra es MAS OSCURA que el lienzo, no mas clara: es el marco, y lo que se mira esta a la derecha. Con el fondo nuevo, `rgba(10, 8, 9, .94)` era mas claro que el lienzo y la barra se adelantaba. */ background: var(--chrome); border-right: 1px solid var(--rule); backdrop-filter: blur(14px); overflow-y: auto; } .lat-marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; border-bottom: 1px solid var(--rule); } .lat-marca img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; } .lat-sigma { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--rule); border-radius: 8px; font-family: var(--font-mono); font-size: 17px; color: var(--gold); } .lat-marca__t { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--bone); line-height: 1.25; } .lat-marca__t em { display: block; font-style: normal; font-size: 9px; letter-spacing: .2em; color: var(--muted); } /* ------------------------------- las dos herramientas ------------------- */ .lat-nav { display: flex; flex-direction: column; gap: 7px; } /* BOTONES DE VERDAD, NO FILAS PLANAS. Oscar, 10/10/2026: "son botones de aplicacion modernos, pero no dejan de ser botones". Mismo bisel que ya llevan `.hz-inf__b`, `.pest__fin` y el resto: degradado de luz arriba a sombra abajo, y una sombra exterior que los levanta del fondo de la barra. En reposo el borde es transparente -la barra ya tiene bastante linea vertical propia- y aparece al pasar el raton o al elegir la fila. */ .hrm { position: relative; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 1px 11px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(0, 0, 0, .1) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .18); transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease); } .hrm:hover { background: linear-gradient(180deg, rgba(255, 94, 108, .12) 0%, rgba(255, 74, 94, .05) 100%); border-color: rgba(255, 74, 94, .22); } /* AL PULSARLA SE HUNDE, igual que cualquier boton solido de esta consola. La fila que YA esta elegida tiene su propio hundimiento permanente mas abajo -`.hrm.activa`-, asi que este es el de la otra, la que se esta eligiendo ahora mismo. */ .hrm:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); } .hrm > i:first-child { grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 15px; } .hrm__t { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); } .hrm__d { font-size: 10.5px; color: var(--muted); line-height: 1.35; padding-right: 14px; } /* Fondo SOLIDO y esquinas redondeadas en todo el ancho del item: es la senal de "aqui estas" y a la opacidad de antes casi no se veia. Y HUNDIDA, NO LEVANTADA -Oscar, 10/10/2026-: la fila elegida es la que esta "presionada" de las dos, asi que lleva la sombra puesta HACIA DENTRO en vez de hacia fuera. El fondo solido NO CAMBIA -sigue siendo `--lat-activo`, el mismo token que ya tiene medido el contraste del texto encima, mas abajo en este comentario- asi que esas medidas se quedan validas; lo unico que cambia es la sombra. */ .hrm.activa { background: var(--lat-activo); border-color: rgba(255, 74, 94, .5); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(0, 0, 0, .18); } /* EL NOMBRE DE LA FILA ACTIVA NO SE TINE DE ACENTO, Y SE MIDIO. Sobre el fondo solido de --lat-activo, el acento da 4.19:1 en oscuro -rgb(74,32,39)-, por debajo del minimo; el color de texto primario da 13.75:1 ahi y 14.91:1 en claro -rgb(251,227,230)-. Aqui habia ademas un #fff fijo, que sobre el tinte claro se quedaba en 1.32:1: es el fallo que destapo el tema claro, y por eso el color va en un token y no escrito a mano. El acento se queda donde NO es texto: el icono, el borde y el filete. Siguen siendo tres senales -fondo solido, filete e icono-, que es lo que esta barra exige: equivocarse de fila aqui es lanzar un pentest autorizado contra el objetivo de otro cliente. */ .hrm.activa > i:first-child { color: var(--gold); } .hrm.activa .hrm__t { color: var(--lat-activo-txt); } /* El candado dice que RTSS necesita un cliente elegido. Se apaga en cuanto lo hay: un candado que sigue cerrado con la puerta abierta deja de significar nada y la proxima vez no se mira. ABAJO Y NO ARRIBA -Oscar, 11/10/2026-: junto al foco, en la esquina superior, quedaba demasiado cerca de el y del titulo. La esquina inferior esta libre salvo por el final de `.hrm__d`, que ya reserva los 14px de la derecha para esto. */ .hrm__candado { position: absolute; bottom: 11px; right: 11px; font-size: 10px; color: var(--muted); cursor: help; padding: 2px; border-radius: 4px; } .hrm__candado:hover { color: var(--gold); } body[data-cliente="puesto"] .hrm__candado { color: var(--bien); } body[data-cliente="puesto"] .hrm__candado::before { content: "\f3c1"; } /* candado abierto */ /* EL FOCO. Rojo mientras no hay cliente elegido -como el candado, pero visible sin acercarse a leer un icono de 10px-, verde en cuanto lo hay. Mismo halo que ya usa `.pest__nuevo` para que lea como una senal de estado y no como un adorno nuevo. */ .hrm__luz { position: absolute; top: 13px; right: 29px; width: 7px; height: 7px; border-radius: 50%; background: var(--mal); box-shadow: 0 0 6px var(--mal); } body[data-cliente="puesto"] .hrm__luz { background: var(--bien); box-shadow: 0 0 6px var(--bien); } /* LA PESTAÑA DE ABAJO dice que, con RTSS elegido, hay una lista de aplicaciones justo debajo y que se puede plegar. Nace oculta: solo `.hrm.activa` la ensena, porque sin RTSS elegido no hay nada que anunciar. Gira 180deg al plegar la lista -`hrm--plegada`, que pone `irA()`- para que la misma pestaña diga "hay mas abajo" o "esto ya esta abierto". */ .hrm__flecha { display: none; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 20px; height: 13px; align-items: center; justify-content: center; font-size: 9px; color: var(--lat-activo-txt); background: var(--lat-activo); border: 1px solid rgba(255, 74, 94, .5); border-top: 0; border-radius: 0 0 7px 7px; transition: transform .2s var(--ease); } .hrm.activa .hrm__flecha { display: flex; } .hrm.activa.hrm--plegada .hrm__flecha { transform: translateX(-50%) rotate(180deg); } /* --------------------------- los grupos de la barra --------------------- El encabezado de cada seccion: tenue, pequeno y SIN icono. No es pulsable y no tiene por que serlo -solo dice de que es este tramo de la barra-, asi que tampoco lleva foco ni :hover. Antes la barra era una pila en la que las dos herramientas, la lista de aplicaciones y tres botones sueltos pesaban igual. Es la misma etiqueta para los dos grupos, Herramientas y Aplicaciones: dos estilos parecidos acabarian separandose. */ .lat-seccion { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding: 0 6px; margin: 0 0 2px; } /* ------------------------------- los clientes --------------------------- */ /* `overflow: hidden` para que la lista no se escape nunca de su contenedor, pase lo que pase con los minimos de dentro. Es la red de seguridad del mismo fallo de arriba. */ .lat-emp { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; } .lat-emp__t { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding: 0 6px; } /* LA LISTA LLENA EL HUECO QUE QUEDA, no un alto fijo. Con `max-height: 46vh` cortaba una fila a media linea -su contador de auditorias quedaba medio tapado- y ademas desperdiciaba sitio en pantallas altas. Creciendo hasta donde empieza el pie, el corte cae donde de verdad se acaba la barra. El relleno de abajo deja ver que hay mas debajo del ultimo. */ .lat-lista { display: flex; flex-direction: column; gap: 4px; /* `min-height: 0` Y NO 120px. Un minimo en pixeles le gana al tope de `max-height: 40vh` del modo icono, asi que en una pantalla baja -o con zoom, que es lo mismo- la lista crecia por encima de su caja y el pie de cuenta se dibujaba encima de las ultimas filas. El `flex: 1 1 auto` ya le da todo el hueco que sobra; el minimo no estaba repartiendo nada, solo impedia encogerse. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; padding-bottom: 4px; border-radius: 10px; scrollbar-gutter: stable; } /* Cuando se pulsa RTSS sin cliente, la lista es donde hay que mirar. */ .lat-lista--pide { outline: 1px dashed rgba(255, 74, 94, .6); outline-offset: 4px; animation: latido 1s ease-in-out 2; } .emp { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; text-align: left; cursor: pointer; padding: 8px 10px 8px 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; /* El filete de la izquierda nace transparente y con su sitio reservado: si apareciera al activarse, la fila se movería 3px al pulsarla. */ border-left: 3px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease); } .emp:hover { background: var(--capa-hover); } /* El monograma de la fila es el MISMO elemento que el de la tarjeta del selector -.mono, con su color derivado del slug- para que una aplicacion se reconozca igual en los dos sitios. Su tamano de aqui lo pone .mono--chico, en el bloque del selector. */ .emp__n { font-size: 12.5px; font-weight: 500; color: var(--bone-2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emp__d { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted); line-height: 1.4; } /* EL ESTADO Y EL CONTEO NO SON LO MISMO Y DEJAN DE PARECERLO. En la misma linea convivian "ejecutando" -lo que pasa ahora- y "1 auditoria" -cuantas hubo-, con la misma letra y el mismo color. Son dos preguntas distintas y el ojo las confundia. El estado va en mayusculas y con mas peso; el conteo se atenua. Cuando hay algo vivo, el estado gana. */ .emp__d--estado { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--bone-2); } .emp__d--conteo { opacity: .62; } .emp__luz--huerfana { background: transparent; border: 2px solid var(--aviso); box-sizing: content-box; width: 5px; height: 5px; flex-basis: 5px; } /* En la tarjeta del selector, lo mismo: si ahi el estado se leyera como un conteo, elegir la aplicacion que ya tiene algo corriendo seria un accidente. */ .selt__aud--estado { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--bone-2); } /* LA FILA ACTIVA, con tres senales a la vez y no solo color: fondo, filete lateral y peso de la letra. Un filete de un pixel en rojo sobre fondo rojo oscuro no lo distingue nadie a las dos de la madrugada, y equivocarse de fila aqui es lanzar un pentest autorizado contra el objetivo de otro. */ .emp--activa { background: var(--lat-activo); border-color: rgba(255, 74, 94, .5); border-left-color: var(--gold); } .emp--activa .emp__n { color: var(--lat-activo-txt); font-weight: 700; } /* El monograma de la fila activa se CERCA, no se repinta. Su color es como se reconoce la aplicacion; cambiarselo justo a la que esta elegida le quitaria esa senal al unico caso en el que importa confirmarla. */ .emp--activa .mono { box-shadow: 0 0 0 2px var(--gold); } .emp--activa .emp__d { color: var(--bone); } /* El punto de actividad. Cada aplicacion tiene su propio hueco de ejecucion, asi que puede haber varias corriendo a la vez y la lista tiene que dejarlo ver sin cambiar de aplicacion. */ .emp__luz { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; } .emp__luz--vivo { background: var(--bien); box-shadow: 0 0 8px var(--bien); animation: latido 1.6s ease-in-out infinite; } .emp__luz--espera { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); animation: latido 1s ease-in-out infinite; } .emp__luz--pausa { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); } /* LOS TRES PUNTOS DE LO QUE YA ACABO, Y NINGUNO LATE. El latido de `--vivo` significa "ahora mismo"; una corrida terminada que parpadeara seguiria diciendo que pasa algo, que es el ruido del que viene huyendo esta pantalla. Solidos y quietos: el color dice como acabo y la quietud dice que acabo. Y EL VERDE DE `--hecho` ES EL MISMO `--bien` QUE EL DE `--vivo` a proposito. No son dos verdes: es el mismo "esto esta bien" en dos momentos, y un segundo verde obligaria a aprenderse cual es cual. */ .emp__luz--hecho { background: var(--bien); } .emp__luz--cortada { background: var(--mal); } .emp__luz--parada { background: var(--aviso); } .lat-vacio { font-size: 11px; color: var(--muted); line-height: 1.5; padding: 6px; } .lat-aviso { font-size: 11px; line-height: 1.55; color: var(--bone-2); padding: 9px 10px; border-radius: 8px; border: 1px solid rgba(255, 74, 94, .4); background: rgba(255, 74, 94, .09); } .lat-alta { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px dashed var(--rule); border-radius: 9px; padding: 9px 11px; cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease); } .lat-alta:hover { color: var(--bone); border-color: var(--gold); } .lat-pie { margin-top: auto; } /* ========================================================================= LA BANDA Se queda aunque la barra nombre al cliente: entre 1000 y 1180 px la barra colapsa a iconos y ahi el nombre no cabe. El cliente activo tiene que estar visible SIEMPRE, en cualquier ancho. Igual que la barra, el SITIO se lo da cada cara al final de esta hoja: fila de arriba de la region de contenido en la ventana de Windows, Large Title dentro del scroll en el telefono. ========================================================================= */ .banda { position: fixed; top: 0; left: var(--lat-ancho); right: 0; z-index: 200; min-height: var(--banda-alto); display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); padding: 0 var(--gutter); background: var(--chrome); border-bottom: 1px solid var(--rule); backdrop-filter: blur(14px); } .banda[data-estado="vacia"] { border-bottom-color: rgba(255, 74, 94, .55); box-shadow: inset 0 -2px 0 rgba(255, 74, 94, .35); } .banda[data-estado="puesta"] { border-bottom-color: rgba(76, 175, 125, .35); box-shadow: inset 0 -2px 0 rgba(76, 175, 125, .28); } .banda__cliente { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } /* En Scan Regular el cliente elegido sigue a la vista, pero atenuado y con la nota de que esa herramienta no lo toca. Dejarlo igual que en RTSS haria creer que el escaneo se guarda en su expediente. */ .banda[data-herramienta="scan"] .banda__cliente { opacity: .55; } .banda__nota { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .banda__etiqueta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; } .banda__cliente strong { font-family: var(--font-serif); font-size: clamp(15px, 2vw, 22px); font-weight: 500; line-height: 1.1; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .banda[data-estado="vacia"] .banda__cliente strong { color: var(--bone); } .banda__cliente code { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); } /* La derecha de la banda: los escaneos que quedan y el semaforo del servicio. En este orden -primero el numero, despues el estado- porque el estado es lo que cambia solo y lo que se mira de reojo, asi que va en el extremo, donde el ojo vuelve. */ .banda__sem { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } /* LOS ESCANEOS, Y SON DE LA CUENTA. El rotulo nombra al usuario a proposito: un numero pegado al nombre de una aplicacion se lee como "los escaneos de esta aplicacion", y el cupo se contrata una vez por cuenta y se gasta entre todos sus proyectos. */ .banda__cuota { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(var(--hueco-rgb), .3); font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .banda__cuota i { font-size: 11px; color: var(--gold-soft); } .banda__cuota b { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bone); } /* Sin cuota, la banda cuenta la MISMA historia que el formulario deshabilitado: si aqui saliera un numero tranquilo con los campos apagados, el operador buscaria el fallo en el sitio equivocado. */ .banda__cuota--off { border-color: rgba(255, 92, 110, .55); background: rgba(255, 92, 110, .12); } .banda__cuota--off i, .banda__cuota--off b { color: var(--mal); } .sem { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .sem__luz { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 9px; } .sem.vivo .sem__luz { background: var(--bien); box-shadow: 0 0 12px var(--bien); animation: latido 1.6s ease-in-out infinite; } .sem.vivo em { color: var(--bien); } .sem.espera .sem__luz { background: var(--aviso); box-shadow: 0 0 12px var(--aviso); animation: latido 1s ease-in-out infinite; } .sem.espera em { color: var(--aviso); } .sem.parado .sem__luz { background: var(--mal); box-shadow: 0 0 12px var(--mal); } .sem.parado em { color: var(--mal); } /* HUERFANA: la solicitud dice ejecutando y no hay proceso vivo detras. Tiene su propio color -ambar con el punto hueco- y NO se parece al verde de "trabajando" ni al rojo de "parada": no es que vaya mal, es que no hay nadie trabajando aunque la pantalla diga que si. El punto no late, que es la mitad del mensaje: eso que parecia moverse no se mueve. */ .sem.huerfana .sem__luz { background: transparent; border: 2px solid var(--aviso); box-sizing: border-box; box-shadow: 0 0 10px rgba(245, 166, 35, .55); } .sem.huerfana em { color: var(--aviso); } /* El tiempo que queda de una espera, al lado del estado. Tabular para que no baile al cambiar de cifra. */ .sem__reloj { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--bone); font-variant-numeric: tabular-nums; } @keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .25; } } .lienzo { margin-left: var(--lat-ancho); padding-top: calc(var(--banda-alto) + 18px); padding-bottom: 60px; } /* ---------------------------------------------------------------- estrecho La barra fija se come la pantalla en un portatil pequeno. Colapsa a iconos: sigue estando entera -marca, herramientas y clientes- pero sin los textos largos. El nombre del cliente activo no se pierde, porque la banda lo lleva. Nada de menu de hamburguesa: esta familia de paginas se hizo sin el. */ @media (max-width: 1180px) and (min-width: 1000px) { :root { --lat-ancho: 68px; } .lateral { padding: 16px 8px; align-items: center; } .lat-marca { padding: 2px 0 12px; justify-content: center; } /* `.lateral .X` Y NO `.X` A SECAS, y es un arreglo del 05/10/2026 con su medicion: `.lat-yo__txt` se vuelve a declarar MAS ABAJO en esta hoja -linea ~2000, `display: flex`- con la misma especificidad 0-1-0, y un media query no suma ninguna, asi que ganaba el de abajo por orden. El nombre de la cuenta NUNCA se escondio a este ancho, y es el que hacia que el pie midiera 204 px dentro de una columna de 68 y se saliera por los dos lados. Se veia al hacer zoom, que es lo mismo que estrechar. Con `.lateral` delante son 0-2-0 y ganan estas, que son las que saben a que ancho estamos. */ .lateral .lat-marca__t, .lateral .hrm__t, .lateral .hrm__d, .lateral .emp__n, .lateral .lat-seccion, .lateral .lat-emp__t, .lateral .lat-aviso, .lateral .lat-yo__txt, .lateral .lat-yo__flecha, .lateral .lat-menu__t, .lateral .lat-menu__b span, .lateral .lat-alta span { display: none; } /* La red de seguridad, para lo que no se haya pensado. `clip` y no `hidden`: en una columna de 68 px una barra de desplazamiento horizontal no sirve para nada y ademas se come 10 de esos 68. */ .lateral { overflow-x: clip; } .lat-pie, .lat-yo, .lat-yo__b, .lat-alta { min-width: 0; max-width: 100%; } /* Del pie de cuenta queda el avatar con las iniciales, y su menu se queda en iconos: a 68px el nombre no cabe, y el avatar sigue diciendo que hay una cuenta detras -el nombre entero se lee en la banda y en el pie de la pagina-. Los dos iconos del menu son distintos y llevan su `title`, que es lo mismo que se hace con los demas botones de la barra a este ancho. */ .lat-yo__b { justify-content: center; padding: 8px 0; } .lat-menu__b { justify-content: center; padding: 9px 0; } .lat-menu__b > i { margin-top: 0; flex: 0 0 auto; } /* El punto de actividad NO se va con el texto: sigue siendo la unica senal de que otro cliente tiene algo corriendo, y a este ancho es cuando mas falta hace, porque el nombre ya no se lee. Pasa a insignia sobre el monograma; el texto se queda sin cuerpo pero el punto no. */ .emp { position: relative; } .emp__d { position: absolute; top: 1px; right: 7px; font-size: 0; gap: 0; } .emp__d .emp__luz { width: 9px; height: 9px; flex-basis: 9px; border: 2px solid var(--chrome); box-sizing: content-box; } .hrm { grid-template-columns: 1fr; justify-items: center; padding: 11px 0; width: 100%; } .hrm > i:first-child { grid-row: auto; font-size: 17px; } .hrm__candado { top: auto; bottom: 5px; right: 5px; } /* Sin sitio para una segunda senal junto al icono solo: el candado ya cambia de color el mismo, y eso basta a este ancho. */ .hrm__luz { display: none; } .emp { grid-template-columns: 1fr; justify-items: center; padding: 5px 0; border-left-width: 0; border-radius: 10px; } .emp .mono { grid-row: auto; width: 34px; height: 34px; flex-basis: 34px; } /* Sin sitio para el filete lateral, la fila activa se marca con el borde entero y el anillo del monograma: siguen siendo dos senales ademas del color. */ .emp--activa { border-color: var(--gold); } .lat-alta { justify-content: center; padding: 9px 0; width: 100%; } .lat-lista { max-height: 40vh; } } /* ------------------------------------------------------------------ movil AQUI ESTABA LA BARRA EN HORIZONTAL, y se fue el 06/10/2026 con el rediseno. El umbral en el que esta pantalla dejaba de ser un escritorio era este; ahora es 999 px, donde empieza la cara de iPhone, y ahi la barra pasa a ser una lista agrupada dentro del scroll en vez de una fila encima del contenido. LO QUE SE QUEDA EN 760 px ES LO QUE VIVE FUERA DEL APARATO: las sub-ventanas. Un no esta dentro de `.pantalla` -se dibuja en la capa superior del navegador- asi que no se encoge con el telefono y sigue viendo el viewport de verdad. Por debajo de 760 px un panel de 620 px con 16 px de margen a cada lado desperdicia el unico sitio que hay: pasa a ocupar la pantalla entera, que es lo que hace una hoja a pantalla completa en iOS. */ @media (max-width: 760px) { /* `[open]` NO ES ADORNO: sube la especificidad a dos clases para ganarle a `.dlg--ancha`, que se declara 1.300 lineas mas abajo con su ancho de 880 px y, a igualdad de peso, ganaba por orden. Y es verdad ademas: estas reglas solo significan algo con la ventana abierta. */ .dlg[open], .dlg--ancha[open] { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; } /* La cabecera pegajosa de la ventana ancha ya existia; a pantalla completa hace mas falta todavia, porque el recorrido es mas largo. */ .dlg--ancha[open] .dlg__cab { margin: -18px -16px 0; padding: 18px 16px 12px; } .dlg__x { flex: 0 0 auto; } } /* ========================= Tipografia de seccion ========================= */ /* LA PORTADA DE SCAN REGULAR, DE FONDO. Pedida el 18/10/2026, mismo criterio que la de la puerta de RTSS: la foto va detras con un degradado oscuro encima para que el texto -que aqui no tiene una caja opaca propia, como si la tiene `.console`- se siga leyendo. `background-attachment: fixed` y no `cover` a secas: esta pantalla tiene formulario, casillas, resultados y el aviso de uso autorizado, asi que es mas alta que una pantalla y una portada que se alargara con el contenido se veria estirada. Fija, la foto se queda del tamano del visor mientras el contenido pasa por encima. */ /* LOS NUMEROS DE ESTE BLOQUE SON LOS LITERALES DE `estilo.css` DE EMAIL BREACH MONITOR, UNO A UNO. Pedido el 20/10/2026: "que no se vean cambios al pasar de una herramienta a otra". Hasta aqui se habia igualado la fuente y el tamano del texto, pero la cabecera seguia siendo translucida (`rgba(10,8,9,.82)` encima de la foto) en vez de solida como `.cab` (`var(--ink-2)` a secas), el degradado de la foto usaba otro tinte (10,8,9 en vez de 23,19,20), y la tarjeta era mas angosta (640px de `--max` propio en vez de los 720px de `.lienzo`). Cada valor de aqui para abajo tiene su par exacto en el otro archivo -ver el comentario de cada regla-. */ #vista-scan { background: linear-gradient(180deg, rgba(23, 19, 20, .80), rgba(23, 19, 20, .93)), url('../img/scan-portada.jpg') center / cover no-repeat fixed; min-height: 100%; display: flex; flex-direction: column; } /* `.shell` ESTIRA PARA LLENAR EL HUECO ENTRE LA CABECERA Y EL PIE, asi el pie se queda abajo del todo incluso cuando el formulario -sin resultados todavia- no llena la pantalla. Con resultados mas largos que el visor, `flex:1` no estorba: el contenido simplemente crece y el pie baja con el, que es lo que ya pasa en cualquier pagina con scroll. */ #vista-scan > .shell--scan { flex: 1; } /* LA CABECERA Y EL PIE DE MARCA. Mismo recurso que usa Email Breach Monitor en su propia pagina (`.cab`/`.pie`), reescrito aqui con nombre propio para no chocar con ninguna clase existente de esta hoja -pero con el MISMO fondo solido (`var(--ink-2)`, pinned a oscuro mas arriba) y el MISMO borde (`#332a2c`, el `--borde` de estilo.css -RTSS no tiene ese token con ese nombre, asi que se escribe literal-), no uno aproximado. */ .scan-cab, .scan-pie { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; flex: none; background: var(--ink-2); } .scan-cab { border-bottom: 1px solid #332a2c; } .scan-pie { padding: 16px 20px; border-top: 1px solid #332a2c; font-size: 11.5px; color: rgba(247, 232, 234, .6); } .scan-pie a { color: var(--gold-soft, #ff7e8d); text-decoration: none; } .scan-pie a:hover { text-decoration: underline; } .scan-cab__marca { font-weight: 600; letter-spacing: .3px; color: #f7e8ea; } .scan-cab__marca em { color: #ff7e8d; font-style: normal; } .scan-cab__pastilla { font-size: 11px; color: #ff7e8d; border: 1px solid #ff7e8d; border-radius: 999px; padding: 2px 10px; flex: none; } /* EL CONSENTIMIENTO, MISMA ESTRUCTURA QUE `.chk` DE EMAIL BREACH CHECKER (`estilo.css`): casilla + parrafo, no una opcion mas de las tres de arriba -por eso no reutiliza `.opt`, que lleva su propio fondo e icono-. */ .scan-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin-top: 16px; } .scan-chk input { margin-top: 3px; flex: none; } .scan-chk a { color: var(--gold-soft); } /* A PANTALLA ENTERA, SIN TIRAS BLANCAS. Pedido el 18/10/2026: la banda y el pie quedaban fuera de `#vista-scan` -son hermanos suyos, no hijos- asi que el degradado de arriba no los alcanzaba y se veian como dos franjas claras partiendo la foto. Mismo criterio que "LA PUERTA DE RTSS" mas abajo en esta hoja: se apagan los dos mientras se ve esta vista -tampoco aqui hay APLICACION ELEGIDA que anunciar, Scan Regular no la necesita- y el padding que `.lienzo` les reservaba se quita con ellos, para que la foto llegue a los dos bordes de verdad. */ body:has(#vista-scan:not([hidden])) #banda, body:has(#vista-scan:not([hidden])) .foot { display: none; } .lienzo:has(> #vista-scan:not([hidden])) { padding-top: 0; padding-bottom: 0; } /* SIEMPRE OSCURO, EN LOS DOS TEMAS -toda la vista, no solo el titulo. Encontrado el 20/10/2026 probando esto mismo en tema claro: la foto y su degradado de arriba no cambian con `[data-tema="claro"]` -son fijos, siempre oscuros-, pero la tarjeta (`.console--scan`, via `--panel`) SI cambiaba a blanco solido, y el titulo -ya fijado a hueso claro por la regla vieja que esto reemplaza- se volvia casi invisible: texto claro sobre tarjeta blanca. LA REGLA ANTERIOR SOLO ARREGLABA EL TITULO. `--bone`, `--gold-soft`, `--panel` y el resto de los tokens que intercambia `[data-tema="claro"]` siguen pintando cualquier otro texto o fondo de esta vista -la tarjeta, los campos, las casillas, el aviso-, y cada uno se habria roto igual con el tema claro puesto. En vez de perseguir elemento por elemento, se re-fijan aqui TODOS los tokens que el tema claro toca, a sus valores de `:root` (oscuro) -la misma lista completa de `[data-tema="claro"]", mas abajo en esta hoja-. Email Breach Monitor resuelve esto mismo siendo una pagina aparte sin selector de tema; aqui, que comparte consola con RTSS y Scan Regular NO es independiente del tema en ningun otro lado, el mismo resultado sale de fijar los tokens solo donde hace falta. */ #vista-scan { --ink: #171314; --ink-2: #201a1b; --ink-3: #2b2324; --ink-rgb: 23, 19, 20; --ink-3-rgb: 43, 35, 36; --bone: #f7e8ea; --bone-2: #e8c9cd; --bone-rgb: 246, 199, 206; --rule: rgba(var(--bone-rgb), 0.14); --gold: #ff4a5e; --gold-soft: #ff7e8d; --muted: rgba(247, 232, 234, 0.78); --tenue: rgba(247, 232, 234, .60); --sobre-acento: var(--ink); --hueco-rgb: 0, 0, 0; --capa-hover: rgba(255, 255, 255, .05); --capa-hover-2: rgba(255, 255, 255, .07); --chrome: rgba(10, 8, 9, .94); --chrome-alto: rgba(10, 8, 9, .97); --panel: linear-gradient(160deg, rgba(var(--ink-3-rgb), .5) 0%, rgba(var(--ink-rgb), .7) 100%); --panel-sombra: none; --bien: #4caf7d; --aviso: #f5a623; --mal: #ff5c6e; --sev-critica: #ff2d44; --sev-alta: #ff5c6e; --sev-media: #f5a623; --sev-baja: #4caf7d; --sev-informativo: #6f8fb0; --campo: #f6eef0; --campo-borde: rgba(41, 14, 16, .32); --lat-activo-txt: #fff; } /* SIN EL HUECO DE ARRIBA. Pedido el 20/10/2026: el `margin-top` de `.section-head` -hasta 64px- existe para separar el titulo de `#banda`, pero en esta vista `#banda` esta apagada (ver mas abajo, "A PANTALLA ENTERA"), asi que ese margen se quedaba como un hueco muerto encima de "Scan Regular" y nada mas. Mismo criterio que Email Breach Checker, que no tiene ese margen porque es una pagina aparte. ACTUALIZADO EL MISMO DIA: el titulo ahora vive DENTRO de `.console` -ver "TITULO Y FORMULARIO, EN UNA SOLA TARJETA" en app.html-, asi que el espacio de arriba ya lo da el padding de la tarjeta. Un margen aparte aqui encima solo duplicaria ese aire. */ #vista-scan .section-head { margin-top: 0; } /* UNA SOLA TARJETA, ANGOSTA Y CENTRADA -A LOS MISMOS 720PX QUE `.lienzo` EN ESTILO.CSS, NI UN PIXEL MAS NI MENOS. Pedido el 20/10/2026, con Email Breach Checker como referencia explicita ("que no se vean cambios al pasar de una herramienta a otra"): `.shell` por omision mide hasta 1180px (`--max`) y su gutter lateral es un `clamp()` que crece con el viewport; alla el ancho y el gutter son numeros fijos (720px, 16px). Angostar SOLO esta vista, sin tocar `--max` ni `--gutter` para el resto de la consola. */ #vista-scan .shell { max-width: 720px; padding-left: 16px; padding-right: 16px; } /* El titulo y el formulario, juntos, en la misma tarjeta -mismo aspecto que la tarjeta unica de Email Breach Checker-. `.section-head` conserva su borde inferior como separador interno entre el titulo y los campos. CADA NUMERO, EL LITERAL DE `.tarjeta` EN ESTILO.CSS: margen superior 28px (el `padding-top` de `.lienzo`, que es donde Email Breach Monitor separa su cabecera de la tarjeta), margen inferior 18px (el `margin-bottom` de `.tarjeta`), relleno 24px fijo (no el `clamp()` de `.console`), fondo solido `var(--ink-2)` -`--panel` en oscuro es un degradado con alfa, que dejaba la foto de fondo asomando A TRAVES de la tarjeta- y borde `#332a2c` -el `--borde` de estilo.css, no el `--rule` translucido de esta hoja-. */ #vista-scan .console--scan { margin-top: 28px; margin-bottom: 18px; padding: 24px; background: var(--ink-2); border-color: #332a2c; } /* MISMA FUENTE, MISMOS TAMANOS QUE EMAIL BREACH CHECKER. Pedido el 20/10/2026: el titulo y el subtitulo de esta tarjeta usaban la tipografia editorial del resto de la consola (`--font-serif`, Space Grotesk, con su propio peso/interlineado/tracking), y la cabecera de marca no llevaba tamano propio -heredaba el de la consola-. Se igualan aqui a los valores literales de `estilo.css` en "Email Breach Monitor/web/assets/css/": la fuente del sistema (Segoe UI/Roboto/system-ui), el h1 a 24px/700 sin tracking negativo, el `.sub` a 14px, y la cabecera de marca sin tamano propio -mismo criterio que alla-, para que las dos pantallas lean como la misma familia tipografica letra por letra, no solo de paleta. */ #vista-scan .scan-cab__marca, #vista-scan .section-head h2, #vista-scan .section-head .sub { font-family: "Segoe UI", Roboto, system-ui, sans-serif; } #vista-scan .section-head h2 { font-weight: 700; font-size: 24px; line-height: normal; letter-spacing: normal; } /* "SCAN REGULAR" ENTERO EN NEGRITAS. Pedido el 20/10/2026. La regla compartida `.section-head h2 em` pone el segundo nombre en peso 400 -normal, mas liviano que el titulo- para el resto de la consola; aqui se pisa SOLO para esta vista, asi "Regular" pesa lo mismo que "Scan" en vez de leerse mas delgado al lado. */ #vista-scan .section-head h2 em { font-weight: 700; } #vista-scan .section-head .sub { font-size: 14px; line-height: normal; } /* EL MENSAJE "Analizando..." NO SE VEIA EN TEMA CLARO -pedido el 20/10/2026 con una captura-. `.ag-estado__fila` no fija su propio color en estilo.css -a diferencia de `.ag-falta`, que si lo hace-, asi que hereda el `color` que ya calculo `body` (oscuro en tema claro, sobre el fondo CLARO general de la consola) en vez de resolver `--ink`/`--bone` otra vez aqui abajo, donde `#vista-scan` ya los re-fijo a sus valores oscuros de siempre. El resultado era texto oscuro sobre el fondo oscuro fijo de esta vista. `#cajaEstado` (la misma clase en el flujo normal de RTSS) no necesita este arreglo porque ahi el fondo SI cambia con el tema. */ #vista-scan .ag-estado__fila { color: var(--bone); } /* SIN TRANSPARENCIAS EN EL PANEL DE RESULTADO. Pedido el 20/10/2026 con una captura: la foto fija de esta vista (`scan-portada.jpg`) y el logo gigante que lleva encima asomaban A TRAVES del veredicto, de los chips y de cada tarjeta de hallazgo, porque esos fondos se mezclan con `transparent` (o no llevan fondo) y eso funciona bien sobre el degradado solido del resto de la consola, pero no sobre una foto grande detras. Mismo criterio que el bloque de arriba: se fija SOLO dentro de esta vista, mezclando cada color contra `--ink-2` (la misma base solida que ya usa `.console--scan`) en vez de contra transparente. */ #vista-scan .vd { background: color-mix(in srgb, var(--vd, var(--gold)) 16%, var(--ink-2)); } #vista-scan .pg-chip, #vista-scan .hz__f { background: var(--ink-2); } #vista-scan .ag-falta { background: color-mix(in srgb, var(--gold) 12%, var(--ink-2)); } #vista-scan .caja__nota { background: var(--ink-2); border-radius: 9px; padding: 12px 14px; border: 1px solid var(--rule); } .section-head { margin: clamp(32px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .section-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 3.2vw, 44px); line-height: 1.0; letter-spacing: -0.02em; color: var(--bone); } .section-head h2 em { font-style: normal; color: var(--gold-soft); font-weight: 400; } .section-head .sub { font-family: var(--font-serif); font-size: clamp(13px, 1.1vw, 17px); line-height: 1.5; color: var(--muted); margin-top: 11px; max-width: 760px; } .section-head code, .sub code { font-family: var(--font-mono); font-size: .86em; color: var(--bone-2); } /* ========================= LA MIGA DE PAN =============================== Encima del titulo: donde estas, en tres pasos. Nombra la APLICACION por tercera vez -banda, barra y aqui- y es a proposito: equivocarse de aplicacion es lanzar un pentest autorizado contra el objetivo de otro. */ .vcab__miga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: clamp(26px, 4vw, 48px); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .vcab__miga i { font-size: 7px; opacity: .6; } .vcab__miga b { color: var(--bone); font-weight: 700; } /* EL NOMBRE DE LA APLICACION ES UN BOTON: es la puerta a lo que es SUYO -su alcance, sus expedientes, sus ajustes-. Que el camino salga de la propia aplicacion es lo que evita la pregunta "de que proyecto es esta lista blanca". Lo del usuario se llega por el pie de la barra, donde esta el usuario. */ .vcab__app { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; cursor: pointer; border: 1px solid var(--rule); border-radius: 999px; background: rgba(var(--hueco-rgb), .25); color: var(--bone-2); font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; max-width: min(46ch, 50vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease); } .vcab__app i { font-size: 10px; opacity: .75; flex: 0 0 auto; } .vcab__app:hover { border-color: var(--gold); color: var(--bone); } .vcab__app:hover i { opacity: 1; color: var(--gold); } /* Sin aplicacion elegida no hay nada suyo que ensenar. No se esconde -dejaria un hueco raro en mitad de la miga- sino que se atenua, y al pulsarla lleva a la lista en vez de no hacer nada. */ .vcab__app--off { opacity: .5; } /* Con la miga encima, el titulo ya no necesita su propio aire de arriba: si lo mantuviera, entre la miga y el titulo quedaria un hueco de dos lineas. */ .vcab__miga + .section-head { margin-top: 12px; } /* ============================= LAS PESTANAS ============================= Tres en la vista de RTSS y cuatro en la sub-ventana del contexto, con la misma hoja: son el mismo control y dos estilos parecidos se separarian. La vista era una sola columna -formulario, progreso, hallazgos, aislamiento y un bloque enorme de contexto, uno debajo de otro- y lo que acababa de pasar quedaba a tres pantallazos de scroll. Con pestanas se ve UNA cosa a la vez. La activa se marca con TRES senales y no solo con color: fondo solido, filete inferior en rojo y letra en negrita. Es la misma regla que la fila de la barra lateral, y por el mismo motivo: un cambio de color de un pixel no lo distingue nadie a las dos de la madrugada. */ /* SE DESPLAZA, NO SE PARTE. Tenia `flex-wrap: wrap` y con cinco pestanas mas los dos botones de accion, al estrechar -o al hacer zoom, que es lo mismo- se partia en dos lineas y la segunda colgaba fuera de la caja, por debajo del filete inferior. Una barra de pestanas en dos filas deja ademas de leerse como una barra: pasa a leerse como una lista, y entonces ya no se entiende que son vistas de la misma cosa. LA BARRA DE DESPLAZAMIENTO SE ESCONDE pero el desplazamiento se queda: con rueda, con gesto tactil y con el teclado al tabular hacia una pestana que no se ve, que es como de verdad se llega a ella. Una barra visible de 10 px debajo de las pestanas, en una fila de 40, se lee como un error de maquetacion. */ .pest { display: flex; gap: 4px; flex-wrap: nowrap; /* `auto hidden` y no `overflow-x: auto` a secas: con el eje vertical sin declarar el navegador lo computa a `auto` igual, y entonces aparece una barra de desplazamiento vertical de un pixel en una fila de 40. Dicho explicito, se queda recortado y sin barra. */ overflow: auto hidden; scrollbar-width: none; border-bottom: 1px solid var(--rule); margin-bottom: clamp(18px, 2.5vw, 26px); } .pest::-webkit-scrollbar { display: none; } /* Sin esto una pestana se encoge hasta que su rotulo se parte en dos renglones, que es la otra forma de que esta fila deje de parecer una barra. */ .pest__b { flex: 0 0 auto; white-space: nowrap; } .pest__b { position: relative; display: flex; align-items: center; gap: 8px; padding: 11px 15px; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 10px 10px 0 0; border-bottom: 0; /* El filete de abajo nace transparente y con su sitio reservado: si apareciera al activarse, la pestana se moveria 2px al pulsarla y la fila entera daria un salto. */ box-shadow: inset 0 -2px 0 transparent; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .08s var(--ease); } .pest__b i { font-size: 12px; } .pest__b:hover:not(:disabled) { color: var(--bone); background: var(--capa-hover); } /* AL PULSARLA, SE HUNDE. Oscar, 10/10/2026: la fila entera se leia plana. Una pestana no se convierte en un boton solido -el filete de abajo ya dice cual esta elegida, y una pestana no es una accion de una vez- pero SI tiene que sentirse pulsable: el mismo hundimiento de 1px que ya llevan los botones de verdad de esta consola, nada mas. */ .pest__b:active:not(:disabled) { transform: translateY(1px); } /* EL FOCO SE VE, y sobre la pestana entera: de un tablist se entra con un solo tabulador y dentro se anda con las flechas, asi que si el foco no se viera no habria forma de saber en que pestana estan las flechas. */ /* `-2px` Y NO `2px`: desde que `.pest` desplaza en horizontal es un contenedor de recorte, y un anillo dibujado por fuera del boton se pierde en la primera pestana -por la izquierda y por arriba- y en la ultima al desplazar hasta el final. Hacia dentro siempre se ve, y es lo que ya hacen `.hzx__id` y `.hzx__re-b` en esta misma hoja. Medido por pixel el 05/10/2026. */ .pest__b:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; } .pest__b--on, .pest__b[aria-selected="true"] { background: var(--lat-activo); border-color: rgba(255, 74, 94, .4); box-shadow: inset 0 -2px 0 var(--gold); color: var(--bone); font-weight: 700; } .pest__b--on i, .pest__b[aria-selected="true"] i { color: var(--gold); } /* Una pestana apagada no ensena un panel vacio: sin aplicacion elegida no hay corrida ni hallazgos, y un panel en blanco se lee como una averia. */ .pest__b:disabled { opacity: .4; cursor: not-allowed; } /* EL PUNTO DE NOVEDAD. Aparece en la pestana que NO esta activa cuando ahi pasa algo -un hallazgo nuevo, la bitacora que crece- y se apaga al entrar. Avisa y espera: no roba el foco, porque robarlo mientras alguien escribe unas credenciales es peor que no avisar. */ .pest__nuevo { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: latido 1.6s ease-in-out infinite; } /* El panel. El `hidden` es lo que lo esconde, como en todo el resto de la pantalla: la hoja le pone !important arriba y no se inventa aqui otra forma. */ .pest-panel:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; } /* EL TEXTO LARGO, AL FINAL DEL PANEL. Esta herramienta explica por que hace cada cosa y eso se queda; lo que cambia es donde. Antes el porque iba delante y habia que leerlo para llegar a los controles. Aqui esta debajo, al alcance de quien lo busque y fuera del camino de quien ya lo sabe. */ .pnl-nota { margin-top: 16px; font-size: 11.5px; line-height: 1.65; color: var(--muted); max-width: 760px; } .pnl-nota b { color: var(--bone-2); } .pnl-nota code { font-family: var(--font-mono); font-size: .9em; color: var(--bone-2); } @media (max-width: 560px) { /* A ancho de movil las tres pestanas no caben en una fila con su texto entero. Se reparten a tercios y se aprieta la letra ANTES que esconderla: un icono solo no dice cual es "En curso" y cual "Hallazgos", y adivinar pestanas es justo lo que esto venia a arreglar. */ .pest__b { flex: 1 1 0; justify-content: center; padding: 10px 5px; font-size: 9px; letter-spacing: .05em; } .pest__b i { font-size: 11px; } /* Las cuatro de la sub-ventana caben a mitades, no a cuartos. */ .pest--dlg .pest__b { flex: 1 1 40%; } } /* ============================== Campos ================================== UNA RANURA HUNDIDA Y CLARA. Antes el campo era del mismo color que el fondo y con un filete de un pixel: no se distinguia de un rotulo y el operador no veia donde escribir. El hundido es `inset` de verdad -la sombra va dentro-, y el fondo claro arrastra los otros tres colores: lo escrito, el marcador de posicion y el cursor. Cambiar el fondo sin cambiarlos deja el texto en hueso sobre blanco, que es ilegible; por eso los cuatro viven juntos en :root con su contraste medido al lado. ======================================================================== */ input[type=text], input[type=password], select, textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--campo-borde); border-radius: 6px; background: var(--campo); color: var(--campo-texto); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; /* La ranura: sombra DENTRO por arriba, para que parezca rehundida en la pantalla, y una linea clara abajo que hace de canto iluminado. */ box-shadow: inset 0 2px 5px rgba(41, 14, 16, .30), inset 0 -1px 0 rgba(255, 255, 255, .55); /* El cursor tambien: en hueso sobre blanco no se ve, y entonces no se sabe si el campo tiene el foco. */ caret-color: var(--campo-texto); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } input::placeholder, textarea::placeholder { color: var(--campo-marca); letter-spacing: .04em; opacity: 1; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); /* Al enfocar, el hundido se mantiene y se le anade un halo: si al enfocar se volviera plano, pareceria que el campo se apaga justo al usarlo. */ box-shadow: inset 0 2px 5px rgba(41, 14, 16, .30), inset 0 -1px 0 rgba(255, 255, 255, .55), 0 0 0 3px rgba(255, 74, 94, .28); } /* DESHABILITADO SIGUE PARECIENDO DESHABILITADO. Vuelve a oscuro, pierde el hundido y el borde se parte: un campo blanco y hundido que no acepta texto es peor que uno apagado, porque invita a escribir en el. */ input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; background: rgba(var(--ink-rgb), .55); color: var(--muted); border-style: dashed; border-color: var(--rule); box-shadow: none; } input:disabled::placeholder { color: rgba(247, 232, 234, .30); } select { cursor: pointer; } select option { background: var(--campo); color: var(--campo-texto); } /* BURBUJA CENTRADA, EN TODAS LAS INTERFACES. Pedido asi: las 31 etiquetas de campo del sitio -el escaneo, el alta, la cuenta, los ajustes- pasan de un rotulo plano alineado a la izquierda a una pastilla centrada sobre su campo. `display: table` y no `inline-block` + `text-align:center` en el padre: la etiqueta ya vive suelta dentro de bloques que no son flex ni tienen su propio text-align, y `table` es el unico display que SE ENCOGE a su contenido y a la vez acepta `margin: 0 auto` para centrarse solo, sin tener que tocar el contenedor de cada uno de los 31 sitios donde aparece. */ .field-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); display: table; margin: 0 auto 10px; padding: 5px 16px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(var(--hueco-rgb), .3); } /* BLANCO Y EN NEGRITA, PERO SOLO EN EL TEMA OSCURO -el de por defecto, sin [data-tema]-. Dentro de la pastilla el `--muted` oscuro (hueso atenuado al 78%) se lee bien sobre el fondo liso de la pagina, pero sobre el propio fondo de la pastilla -un hueco mas claro todavia- pierde el contraste que tenia; blanco solido en negrita lo recupera. En el tema claro `--muted` ya es un gris oscuro que SI tiene contraste contra la pastilla clara, asi que ahi no se toca -ver [data-tema="claro"] mas abajo, donde se revierte-. */ .field-label { color: #ffffff; font-weight: 700; } [data-tema="claro"] .field-label { color: var(--muted); font-weight: 600; } /* El icono de ayuda viaja DENTRO de la pastilla pero no hereda su blanco: si se leyera igual que el rotulo no se distinguiria el texto del signo de interrogacion que lo explica. */ .campo-ayuda { position: relative; margin-left: 6px; font-size: 11px; cursor: help; color: var(--gold-soft, var(--gold)); } .campo-ayuda:hover, .campo-ayuda:focus-visible { color: var(--gold); } /* EL GLOBITO ES PROPIO, NO EL title= DEL NAVEGADOR. La primera version usaba title -el mismo patron que ya usa ".nc" en los hallazgos sin confirmar- pero en la practica Oscar reporto que al pasar el mouse no aparecia nada. La causa real no era el navegador: Font Awesome YA USA ::before en este mismo elemento para dibujar el glyph del icono -por eso es un vacio, todo su contenido visible sale de ese pseudo-elemento-, y una primera version de este globito tambien ponia su "puntita" en ::before. La declaracion de aqui abajo, que carga despues en la hoja, ganaba la cascada y le borraba el contenido al icono -quedaba en `content: ""`, 0x0px, nada que recibiera el mouse-: no es que el tooltip no respondiera al hover, es que no habia icono sobre el que pasar el mouse. Por eso el globito entero vive en ::after -el unico pseudo-elemento que le quedaba libre al icono- y no lleva puntita: una puntita en una tercera capa necesitaria envolver el icono en un propio, y no hacia falta para que el globito se vea y funcione. */ .campo-ayuda::after { content: attr(data-tip); position: absolute; z-index: 60; top: 100%; left: 50%; margin-top: 10px; transform: translateX(-50%) translateY(-4px); width: max-content; max-width: 260px; background: var(--ink-3); color: var(--bone); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.55; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); } .campo-ayuda:hover::after, .campo-ayuda:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* SOLO PARA EL LECTOR DE PANTALLA. El globito de ".campo-ayuda" se dibuja con `content: attr(data-tip)` en un ::after, y el contenido generado por CSS en un pseudo-elemento NO se expone de forma fiable a las tecnologias de asistencia: lo que se ve con el mouse no existe para quien navega por voz. Donde eso solo cuesta una explicacion opcional no pasa nada. Donde el aviso es la unica senal de que un control no hace lo que parece -el desplegable de Ajustes, que administra un proyecto que puede NO ser el que se esta auditando- hace falta un texto de verdad en el arbol de accesibilidad, y este es el que lo lleva. No se usa `display:none` ni `visibility:hidden`: las dos lo sacan tambien del arbol de accesibilidad, que es justo lo contrario de lo que se busca. El patron es el de siempre: un recuadro de 1px, recortado y fuera de la vista, que el lector si anuncia. */ .solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .url-wrap { position: relative; } .url-wrap > i:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); /* Sobre la ranura clara el rojo de la marca se queda en 3:1 y se lee lavado: este es el mismo rojo, oscurecido hasta 5.1:1. */ color: var(--campo-icono); font-size: 12px; pointer-events: none; } .url-wrap input { padding-left: 38px; } .url-wrap--ojo input { padding-right: 44px; } /* El ojito solo cambia el type del campo: el valor no se copia a ningun lado. */ .ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; padding: 8px 10px; /* Va DENTRO de la ranura clara, asi que su color es el del campo y no el del fondo oscuro de la pagina. */ color: var(--campo-marca); font-size: 12px; } .ojo:hover { color: var(--campo-icono); } .url-wrap--off { opacity: .55; } .url-wrap--off input { cursor: not-allowed; } /* Con el campo apagado, el icono y el ojito vuelven al color del fondo oscuro: quedarse en el del campo claro los dejaria ilegibles sobre el apagado. */ .url-wrap--off > i:first-child, .url-wrap--off .ojo { color: var(--muted); } .fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .fila input { flex: 1 1 200px; } /* =============================== Cajas ================================== */ .console { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); padding: clamp(16px, 2.2vw, 26px); } .console--agentico { border-color: rgba(255, 74, 94, 0.28); } /* AQUI ESTABA .rejilla-cliente, la rejilla de tres columnas del contexto plegado: alcance, expedientes y alta, uno al lado del otro al final de la vista. Se fue con el bloque, porque dentro de la sub-ventana cada uno tiene su propia pestana y ya no hay nada que repartir en columnas. */ .caja { border: 1px solid var(--rule); border-radius: 10px; background: rgba(var(--hueco-rgb), .18); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .caja__t { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); } .caja__t i { margin-right: 7px; } .caja__nota { font-size: 11.5px; line-height: 1.6; color: var(--muted); } .caja__nota code { font-family: var(--font-mono); color: var(--bone-2); } .caja__nota.bien { color: var(--bien); } .caja__nota.malo { color: var(--mal); } /* Listas de alcance y de expedientes. Scroll propio: una lista blanca larga no puede empujar fuera de la vista el formulario que esta al lado. */ .alc { max-height: 190px; overflow-y: auto; } .alc__l { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; color: var(--bone-2); word-break: break-all; } .alc__l i { font-size: 9px; flex: 0 0 11px; } .alc__l.si i { color: var(--bien); } .alc__l.no i { color: var(--mal); } .alc__l.no { color: var(--muted); text-decoration: line-through; } .alc__l button { background: transparent; border: 0; color: var(--bone); cursor: pointer; font-family: var(--font-mono); font-size: 10px; padding: 0 4px; } .alc__t { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 8px 0 3px; } .alc__t:first-child { margin-top: 0; } /* EN "GENERALES" LOS HOSTS NO SE PULSAN. Ahi es solo lista -ver el comentario de `alcAjustesCuerpo` en app.html, pulsar un host escribiria el objetivo de la corrida del proyecto elegido para auditar, que puede no ser el que se esta administrando-, asi que el cursor de mano que invita a pulsar se quita: un boton que no hace nada se nota, y el cursor es lo primero que lo delata. */ .alc--solo-lectura .alc__l button { cursor: default; } /* ============================== Botones ================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 24px; border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease); } .btn-primary { background: var(--bone); color: var(--ink); border-color: var(--bone); } .btn-primary:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--ink); } .btn:disabled { opacity: .45; cursor: default; } .btn i { font-size: 11px; } .ag-mini { font-family: var(--font-mono); font-size: 11px; letter-spacing: .6px; color: var(--bone); background: rgba(var(--hueco-rgb), .28); border: 1px solid var(--rule); border-radius: 7px; padding: 9px 14px; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); } .ag-mini:hover:not(:disabled) { background: rgba(var(--hueco-rgb), .5); border-color: var(--bone-2); } .ag-mini:disabled { opacity: .45; cursor: default; } /* SOLO EL HOVER ES ROJO, igual que .hzx__borrar: el boton en reposo no puede gritar que algo va a borrarse cuando lo que hace -archivar- es reversible. */ .ag-mini--peligro:hover:not(:disabled) { color: var(--mal); background: rgba(255, 92, 110, .12); border-color: var(--mal); } .ag-mini i { margin-right: 6px; } /* Rejilla y no flex con wrap: con wrap, el boton que cae solo a la segunda linea se estira a todo el ancho y queda disparejo. */ .ag-botonera { display: grid; gap: 10px; margin-top: 16px; align-items: stretch; grid-template-columns: minmax(200px, 1fr) auto auto auto; } @media (max-width: 860px) { .ag-botonera { grid-template-columns: 1fr 1fr; } .ag-botonera .btn-primary { grid-column: 1 / -1; } } /* El freno no compite en color con el boton principal: es gris hasta que lo necesitas y solo entonces se pone rojo. Un boton de emergencia siempre encendido deja de leerse como emergencia. */ .btn-detener, .btn-2fa, .btn-cerrar { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1px; background: transparent; border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; cursor: pointer; color: var(--muted); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .btn-detener:hover:not(:disabled) { color: #fff; background: #d32f3f; border-color: #d32f3f; } .btn-detener:disabled, .btn-2fa:disabled, .btn-cerrar:disabled { opacity: .5; cursor: default; } .btn-detener i, .btn-2fa i, .btn-cerrar i { margin-right: 7px; } /* El codigo del segundo factor caduca en minutos: el boton se distingue de sus vecinos para encontrarlo de un vistazo, sin competir con DETENER. */ .btn-2fa { color: var(--bone); border-color: var(--bone-2); } .btn-2fa:hover:not(:disabled) { background: var(--capa-hover-2); } .btn-cerrar:hover:not(:disabled) { color: var(--bone); border-color: var(--gold); } /* ======================= EL SELECTOR DE APLICACION ======================= AQUI VIVIA EL VELO: un panel oscuro con un `backdrop-filter` encima del formulario y el cartel "Elige primero la aplicacion". Funcionaba -nadie lanzaba nada sin aplicacion- pero era una pared que decia lo que NO se puede hacer. Lo que hay ahora ocupa el mismo sitio y dice lo que SI se puede: una tarjeta por aplicacion, con imagen y texto. La regla no cambio: el formulario sigue sin poder lanzarse sin aplicacion, los campos siguen deshabilitados y la cerradura de verdad sigue en el servidor. ======================================================================== */ .zona { position: relative; } .sel { border: 1px solid rgba(255, 74, 94, .28); border-radius: 10px; background: var(--panel); padding: clamp(16px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 16px; } .sel__cab { display: flex; gap: 14px; align-items: flex-start; } .sel__cab > i { font-size: 20px; color: var(--gold); margin-top: 3px; } .sel__cab b { display: block; font-family: var(--font-serif); font-size: clamp(16px, 2vw, 21px); font-weight: 500; color: var(--bone); line-height: 1.25; } .sel__cab span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 5px; } /* La vuelta de un pago. En ambar y no en rojo: no es un fallo, es algo que falta por hacer y que se hace eligiendo una tarjeta. */ /* AQUI VIVIA `.sel__off`, el marcador de "sin elegir una, el formulario de la auditoria sigue apagado". Se quito el 04/10/2026 junto con el parrafo largo que sustituia: el operador no quiere ninguna de las dos versiones. La regla no la sostenia este estilo sino `pintarFormulario()`, que ESCONDE el formulario entero y pone la tarjeta del selector en su sitio, asi que no hay campos a la vista que puedan parecer utilizables. La regla se borra de la hoja al borrar lo que la usaba, y no se deja huerfana: una clase que ya no escribe nadie es la siguiente que alguien copia creyendo que hace algo. */ .sel__vuelta { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--bone-2); border: 1px solid rgba(245, 166, 35, .45); background: rgba(245, 166, 35, .09); border-radius: 9px; padding: 11px 13px; } .sel__rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .sel__alta { align-self: flex-start; } .sel__vacio { font-size: 12.5px; color: var(--muted); line-height: 1.6; } /* LA TARJETA. Es un