/* =================================================================== SISTEMA VISUAL DEL CLIENTE Inspirado en el panel de administración de Ágora: claro, sobrio, poco contraste y esquinas casi rectas. El usuario reconoce el terreno. Lo que cambiamos a propósito respecto a Ágora: - El acento es el ROJO de ScanStudio, no su azul: es otro producto. - Hay tema OSCURO de verdad, no solo claro. - Tipografía INTER, empotrada en el propio .exe (lib/InterVariable .woff2): moderna, idéntica en todos los PC, y sin internet ni CDN (el fichero viaja dentro del ejecutable, no se descarga de fuera). TEMA: claro por defecto. Si el usuario lo cambia, su elección manda y se recuerda en el navegador. El atributo 'data-tema' del es quien decide; el CSS solo obedece. =================================================================== */ /* Fuente Inter (variable, un solo fichero para todos los pesos 100-900), empotrada en el .exe y servida como /lib/InterVariable.woff2. */ @font-face { font-family:"Inter"; src:url("/lib/InterVariable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root { /* Marca */ --rojo:#D4232A; --rojo-oscuro:#B01C22; --rojo-tenue:#FDF0F0; /* Superficies: blanco el lienzo, gris muy claro el fondo */ --fondo:#F4F5F7; --papel:#FFFFFF; --papel2:#FAFBFC; --papel3:#F0F1F3; /* Tinta: tres pesos, del titular al dato secundario */ --tinta:#1F2328; --tinta2:#5B6570; --tinta3:#8A929C; /* Líneas: una fina para separar, otra marcada para delimitar */ --linea:#E4E6E9; --linea2:#D3D7DC; /* Estado */ --verde:#1A7F45; --verde-tenue:#EAF6EF; --ambar:#9A6400; --ambar-tenue:#FDF4E3; --rojo-estado:#C42B2B; --azul:#2563EB; --azul-tenue:#EAF1FE; --morado:#7C3AED; /* Tokens de TIPO DE DOCUMENTO (23/8/2026): el maestro G_TipoDocumental guarda el NOMBRE del token (azul, turquesa, naranja, gris) y estas variables deciden la tinta exacta en cada tema. Sobrios a propósito: distinguen, no gritan. El naranja es el complementario del azul — máxima diferencia entre compra y venta de un vistazo. */ --turquesa:#0D7E83; --turquesa-tenue:#E7F4F5; --naranja:#B45A1B; --naranja-tenue:#FBEFE4; /* Sombras: apenas insinuadas. Un panel de gestión no flota. */ --sombra:0 1px 2px rgba(16,24,40,.06); --sombra-menu:0 8px 24px rgba(16,24,40,.12); --r:6px; --r-s:4px; --r-g:8px; --lateral:238px; /* --- ASPECTO DE UN CONTROL NEUTRO, EN UN SOLO SITIO (22/8/2026) ----- Todo lo que sea "un botón que se puede pulsar y no es la acción principal" usa ESTOS DOS tokens, nunca un color suelto. Sirve para '.boton' y también para los controles con forma propia (los del visor, el de tema, el de idioma, el de volver, la tijera del recorte), que NO llevan la clase '.boton' porque tienen su propia geometría. Nace de un fallo real: al dar contraste a '.boton' —que estaba en blanco sobre blanco, 1,45:1 contra el 3:1 que pide la norma— los cinco controles hechos a mano se quedaron atrás y la pantalla apareció a medias, con unos botones grises y otros blancos. Peor que antes de tocar nada. Cambiar el aspecto de los controles tiene que ser tocar UNA línea, no encontrar los seis sitios (REGLA UN SOLO SITIO). Al declararlos aquí, el tema oscuro los hereda solo. */ --control-fondo:var(--papel3); --control-borde:var(--tinta3); --fuente:"Inter",system-ui,"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"Cascadia Mono",Consolas,ui-monospace,monospace; } /* El tema oscuro solo se aplica cuando el usuario lo elige. Por defecto, claro — aunque Windows esté en oscuro. */ :root[data-tema="oscuro"] { --rojo:#F2555C; --rojo-oscuro:#D93A42; --rojo-tenue:#2A1416; --fondo:#14161A; --papel:#1B1E23; --papel2:#20242A; --papel3:#272C33; --tinta:#E9ECEF; --tinta2:#A4ADB8; --tinta3:#79828D; --linea:#2C3138; --linea2:#3A414A; --verde:#4ADE80; --verde-tenue:#132A1D; --ambar:#F0B84B; --ambar-tenue:#2C2312; --rojo-estado:#F2555C; --azul:#7CA5FF; --azul-tenue:#132038; --morado:#A78BFA; --turquesa:#5ED4DA; --turquesa-tenue:#0F2A2C; --naranja:#F5A467; --naranja-tenue:#2E1D10; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-menu:0 10px 28px rgba(0,0,0,.5); } * { box-sizing:border-box; } html, body { height:100%; } body { margin:0; font-family:var(--fuente); font-size:14px; background:var(--fondo); color:var(--tinta); display:grid; grid-template-columns:var(--lateral) 1fr; grid-template-rows:100vh; -webkit-font-smoothing:antialiased; } /* ---------- Barra lateral ---------- */ .lateral { background:var(--papel); border-right:1px solid var(--linea); display:flex; flex-direction:column; min-height:0; } /* Franja BLANCA fija, NUNCA por tema (17/8/2026, pedido explícito): el logo trae texto negro horneado en la imagen — en tema oscuro el panel se oscurece, y sin este fondo propio quedaría ilegible. */ .marca-caja { display:flex; align-items:center; justify-content:center; padding:14px 16px; border-bottom:1px solid var(--linea); background:#fff; } .marca-logo { display:block; width:100%; max-width:220px; height:auto; } nav { padding:10px 8px; flex:1 1 auto; overflow-y:auto; } .nav-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:none; color:var(--tinta2); font:inherit; font-size:13.5px; font-weight:500; padding:8px 10px; border-radius:var(--r); cursor:pointer; margin-bottom:1px; } .nav-item:hover { background:var(--papel3); color:var(--tinta); } /* El activo se marca con una barra a la izquierda, como los paneles de gestión de toda la vida: se ve de un vistazo sin gritar. */ .nav-item.activo { background:var(--rojo-tenue); color:var(--rojo); font-weight:600; box-shadow:inset 2px 0 0 var(--rojo); } .nav-item svg { width:17px; height:17px; flex:0 0 auto; opacity:.85; } /* OJO: 'display:flex' gana al 'hidden' del navegador; sin esto, un botón marcado como oculto se seguiría viendo. */ /* EL ATRIBUTO 'hidden' SIEMPRE OCULTA, pase lo que pase. Trampa conocida: una clase con 'display:grid/flex/inline-flex' (como .estado-lateral o .pastilla) PISA el 'display:none' que trae 'hidden', y el elemento se ve aunque esté marcado como oculto. Con '!important' aquí, poner 'hidden' basta para ocultar cualquier cosa, sin tener que acordarse de añadir una regla por cada componente nuevo. Ya mordió varias veces. */ [hidden] { display:none !important; } .nav-item[hidden] { display:none; } .nav-item .pronto { margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--tinta3); background:var(--papel3); border:1px solid var(--linea); padding:1px 6px; border-radius:20px; text-transform:uppercase; } /* Ficha del equipo: cada dato aparece UNA sola vez en toda la web. */ .ficha-lateral { margin-top:auto; padding:11px 14px 9px; border-top:1px solid var(--linea); display:grid; gap:5px; } .ficha-linea { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:11.5px; color:var(--tinta3); } .ficha-linea b { font-weight:600; color:var(--tinta2); font-size:11.5px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:118px; } .ficha-linea b.mono { font-family:var(--mono); font-size:11px; } /* El Id, en UNA sola línea: etiqueta a la izquierda; a la derecha, la mitad final del Id y el botón para copiarlo entero. */ .ficha-id { align-items:center; } .ficha-id-valor { display:flex; align-items:center; gap:6px; min-width:0; } .ficha-id-valor b { max-width:none; overflow:visible; text-overflow:clip; } .ficha-copiar { flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid transparent; border-radius:var(--r); background:none; color:var(--tinta3); cursor:pointer; transition:color .12s ease, background .12s ease, border-color .12s ease; } .ficha-copiar svg { width:13px; height:13px; } .ficha-copiar:hover { color:var(--tinta); background:var(--papel3); } .ficha-copiar.copiado { color:var(--verde); border-color:var(--verde); } /* Estado de conexiones. El servidor decide; aquí solo se pinta (Regla 4). */ .estado-lateral { padding:10px 14px; border-top:1px solid var(--linea); display:grid; gap:7px; } .estado-linea { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:9px; font-size:12px; color:var(--tinta2); } .estado-linea b { font-weight:600; color:var(--tinta); font-size:11.5px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:108px; } .punto { width:7px; height:7px; border-radius:50%; background:var(--tinta3); } .punto.ok { background:var(--verde); } .punto.mal { background:var(--rojo-estado); } .punto.aviso { background:var(--ambar); } .punto.nada { background:var(--tinta3); opacity:.35; } /* La fecha y hora del servidor, completa: puede ocupar dos líneas en un panel estrecho, así que se deja envolver en vez de recortarse. */ .pie-lateral { padding:10px 14px; border-top:1px solid var(--linea); font-size:11.5px; color:var(--tinta3); line-height:1.45; word-break:break-word; } /* ---------- Zona principal ---------- */ .principal { display:flex; flex-direction:column; min-width:0; min-height:0; } .barra-sup { display:flex; align-items:center; gap:12px; padding:0 22px; height:54px; flex:0 0 auto; border-bottom:1px solid var(--linea); background:var(--papel); } /* 'min-width:0' en los DOS lados, y es lo que evita el defecto nº1 de la REGLA WEB (desplazamiento horizontal de la página entera). Un hijo de flex NO se encoge por debajo de su contenido salvo que se le diga: sin esto, el título empujaba y el bloque de la derecha se salía 83 px en un móvil de 390 — medido, no supuesto. El título cede primero (con puntos suspensivos) porque el nombre de la pantalla ya se ve en el propio contenido; los controles de la derecha no tienen dónde repetirse. */ .titulo-pagina { font-size:16px; font-weight:600; letter-spacing:-.01em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .barra-sup .derecha { margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; flex:0 1 auto; } .pastilla { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid transparent; } .pastilla::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } /* El mismo punto, pero suelto: para cuando algo que NO es una pastilla tiene que ir a juego con ella (las tarjetas de filtro de Gestión Documental, 25/8/2026). El color lo pone quien lo usa, siempre desde el catálogo de tipos — nunca escrito a mano. */ .punto-tipo { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:middle; } .on { color:var(--verde); background:var(--verde-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--verde) 25%, transparent); } .off { color:var(--ambar); background:var(--ambar-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--ambar) 25%, transparent); } .dev { color:var(--rojo); background:var(--rojo-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--rojo) 25%, transparent); } /* Alias semánticos de '.pastilla' para estados genéricos (Scan y cualquier pantalla futura): ok=verde, aviso=ámbar, mal=rojo, info=neutro. Mismas variables que .on/.off/.dev — un solo sistema de color (REGLA COMPONENTES DE INTERFAZ), solo cambian los nombres para que se lean con sentido fuera del contexto "activo/inactivo". */ .p-ok { color:var(--verde); background:var(--verde-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--verde) 25%, transparent); } .p-aviso { color:var(--ambar); background:var(--ambar-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--ambar) 25%, transparent); } .p-mal { color:var(--rojo); background:var(--rojo-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--rojo) 25%, transparent); } .p-info { color:var(--tinta2); background:var(--papel2); border-color:var(--linea2); } .p-azul { color:var(--azul); background:var(--azul-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--azul) 25%, transparent); } /* Pastillas de TIPO DE DOCUMENTO: una clase por token del maestro (G_TipoDocumental.Color) — la web traduce el token a 'p-' en la puerta única ss.pastillaTipo, nunca a mano por pantalla. Ninguno es "bien" ni "mal": solo distinguen tipos entre sí. 'gris' es .p-info. */ .p-turquesa { color:var(--turquesa); background:var(--turquesa-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--turquesa) 25%, transparent); } .p-naranja { color:var(--naranja); background:var(--naranja-tenue); border-color:var(--linea2); border-color:color-mix(in srgb, var(--naranja) 25%, transparent); } /* Parpadeo para los dos CIF a contrastar (leído vs. Ágora, Scan/Resolver): verde+parpadea si coinciden, rojo+parpadea si no — para que se note sin tener que leer y comparar los dígitos a mano. */ /* SIN excepción de 'prefers-reduced-motion' (18/8/2026, pedido explícito): en Windows con "Mostrar animaciones" desactivado, Chrome reporta reduced-motion y apagaba el parpadeo sin que nadie lo notara — el aviso de "tipo obligatorio" tiene que verse siempre, pase lo que pase con esa preferencia del sistema. */ .pastilla-parpadea { animation:pastilla-parpadeo 1.4s ease-in-out infinite; } @keyframes pastilla-parpadeo { 0%,100% { opacity:1; } 50% { opacity:.35; } } /* FICHAS DE SELECCIÓN MÚLTIPLE (26/8/2026, nacen con los destinatarios de Gestión Documental). Cuando hay que marcar VARIOS de una lista corta y conocida — los departamentos que tramitan un documento, y mañana cualquier otra cosa parecida. Por qué así y no un '