/* =====================================================================
MTech Nexus - capa v4
Se carga DESPUES de estilos.css y solo ajusta valores o agrega lo que
faltaba. No redefine ningun selector que los doce modulos necesiten
para existir, de modo que quitar la linea de index.html deja la
aplicacion exactamente como estaba.
Etapa 1 de 5: tipografia de cifras, severidad critica y compactado de
la cinta de filtros.
===================================================================== */
/* --- 1. La severidad "critica" no tenia regla ------------------------
vistas.js emite
, pero la hoja solo define
.alta, .media y .baja: las criticas caian al gris por defecto, o sea
que la alerta mas grave se veia menos grave que una media. */
.alerta.critica{border-left-color:var(--rojo);background:var(--blanco)}
.alerta.critica .alerta-titulo{color:var(--rojo)}
/* --- 2. Las cifras de los KPI ---------------------------------------
Estaban en monoespaciada a 23px, que a ese tamano lee como salida de
terminal. La display con cifras tabulares alinea igual en columna y
se lee como un indicador. La monoespaciada se queda en tablas y en
.monoespaciado, donde si hace falta. */
.kpi .valor{
font-family:var(--titular);
font-size:26px;
font-weight:640;
letter-spacing:-.025em;
font-variant-numeric:tabular-nums;
}
.kpi .nombre{letter-spacing:.055em}
/* --- 3. Veinticuatro tarjetas que saltan al pasar el raton -----------
El desplazamiento vertical en cada KPI convierte el tablero en algo
inquieto. Se conserva la sombra como senal de que la tarjeta responde. */
.kpi:hover{transform:none}
/* --- 4. La cinta de filtros ocupaba tres filas antes del primer dato -
Mismo contenido, menos alto: etiquetas mas discretas, campos con el
mismo radio que el resto de la hoja (la pildora de 100px no concordaba
con nada mas) y menos aire vertical. */
header.barra{padding:13px 24px 10px}
.filtros{gap:8px;margin-top:10px;align-items:flex-end}
.filtros .campo label{font-size:11px;letter-spacing:.045em;margin-bottom:3px}
.filtros input,.filtros select{border-radius:8px;padding:6px 11px}
.atajos button{border-radius:8px;padding:6px 11px}
/* --- 5. Jerarquia de titulos ---------------------------------------- */
header.barra h1{letter-spacing:-.018em}
.panel > h2{letter-spacing:-.012em}
/* =====================================================================
ETAPA 2 - pantalla de acceso en dos columnas
Los identificadores siguen siendo los mismos que busca app.js:
#acceso #form-acceso #error-acceso #email #password #campo-codigo
#codigo. Cambia la composicion, no el contrato.
===================================================================== */
:root{
--marca-fondo:#06203a; --marca-ink:#eef6fc;
--brillo:#2fd3d0; --nodo-a:#3fc8e8; --nodo-b:#36d08b;
}
:root[data-tema="oscuro"]{
--marca-fondo:#030b14; --marca-ink:#e4f1fb;
--brillo:#27b8bd; --nodo-a:#35aed0; --nodo-b:#2fb87c;
}
#acceso{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
place-items:stretch;padding:0;overflow:hidden}
.acceso-marca{position:relative;overflow:hidden;display:flex;align-items:center;
justify-content:center;background:var(--marca-fondo);padding:56px 32px}
#malla{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.acceso-marca-txt{position:relative;z-index:1;text-align:center;display:flex;
flex-direction:column;align-items:center;max-width:440px}
.halo{position:relative;display:grid;place-items:center;margin-bottom:26px}
.halo::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle,
color-mix(in srgb,var(--brillo) 26%,transparent) 0%,
color-mix(in srgb,var(--brillo) 9%,transparent) 44%,
transparent 70%);
animation:respira 7s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
/* Isotipo Nexus de 440x417 reales: a 210px de ancho sobra resolucion
incluso en pantalla retina, asi que no se despixela. */
.iso-acceso{position:relative;width:clamp(150px,16vw,210px);height:auto;display:block;
filter:drop-shadow(0 10px 28px rgb(0 0 0/.45))}
.acceso-marca h1{font-family:var(--titular);font-size:clamp(30px,3.7vw,43px);font-weight:650;
letter-spacing:-.028em;color:var(--marca-ink);line-height:1.06;margin:0}
.acceso-marca .lema{margin:14px 0 0;font-size:clamp(12.5px,1.35vw,15px);font-weight:600;
letter-spacing:.055em;text-transform:uppercase;color:var(--acento)}
.acceso-form{display:flex;align-items:center;justify-content:center;
background:var(--blanco);padding:32px 28px}
.tarjeta-acceso{max-width:372px;border:0;border-radius:0;box-shadow:none;
padding:0;background:transparent}
.tarjeta-acceso .logo-acceso{display:none}
.tarjeta-acceso h1{font-size:22px;font-weight:640;margin-bottom:5px}
.tarjeta-acceso p.sub{margin:0 0 24px;font-size:13.5px;color:var(--gris-500);
font-weight:400;letter-spacing:0;text-transform:none}
.tarjeta-acceso .btn{width:100%;padding:12px 16px;font-size:14.5px}
.caja-clave{position:relative;display:flex;align-items:center}
.caja-clave input{padding-right:46px}
.ojo{position:absolute;right:6px;border:0;background:transparent;color:var(--gris-500);
cursor:pointer;padding:7px;border-radius:7px;display:flex;line-height:0}
.ojo:hover{color:var(--gris-700);background:var(--gris-100)}
.pie-acceso{margin-top:24px}
@media (max-width:880px){
#acceso{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.acceso-marca{padding:42px 20px 38px;min-height:280px}
.acceso-marca h1{font-size:29px}
.iso-acceso{width:min(190px,52vw)}
.halo::before{width:250px;height:250px}
.acceso-form{padding:28px 20px 40px}
}
/* ===================================================== ETAPA 3: el menu
De 12 enlaces planos a 5 grupos. El ancho sube de 250 a 275px por una
razon medida, no estetica: "Integraciones y configuracion" ocupa 182px
y en 250px solo cabian 179, asi que se cortaba por 3px.
El ancho movil no se toca: ese cajon es fijo de 270px. */
:root{--rail:275px}
nav{padding:14px 11px 12px}
nav .grupo+.grupo{margin-top:15px}
nav .grupo-tit{margin:0 0 5px;padding:0 11px;font-size:10.5px;font-weight:700;
letter-spacing:.085em;text-transform:uppercase;color:var(--gris-500)}
nav a{padding:8px 11px}
/* Red de seguridad: si algun dia una etiqueta no cabe, puntos suspensivos
en vez de texto cortado a la mitad. */
nav a span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ================================================ ETAPA 4: barra de filtros
Antes: seis campos siempre a la vista, en una fila que en pantallas
normales ocupaba dos lineas. Ahora: el periodo como control segmentado,
los cuatro filtros de entidad dentro de un panel, y lo que este puesto
se ve como ficha que se puede quitar de un clic. */
.filtros{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.filtros .seg{display:flex;background:var(--gris-100);border-radius:9px;padding:3px;gap:2px;
max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtros .seg::-webkit-scrollbar{display:none}
.filtros .seg button{flex:none;border:0;background:transparent;color:var(--gris-700);font-size:12.5px;
padding:6px 11px;border-radius:7px;cursor:pointer;white-space:nowrap;
transition:background var(--t),color var(--t)}
.filtros .seg button:hover{color:var(--gris-900)}
.filtros .seg button[aria-pressed="true"]{background:var(--blanco);color:var(--gris-900);font-weight:620;box-shadow:var(--sombra)}
.filtros .fechas{display:none;gap:7px;align-items:center}
.filtros .fechas.on{display:flex}
.filtros .fechas .a{font-size:12.5px;color:var(--gris-500)}
.filtros .rango{font-size:12.5px;color:var(--gris-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.filtros .rango b{color:var(--gris-700);font-weight:600}
.filtros .sep{width:1px;align-self:stretch;background:var(--gris-200);margin-inline:3px}
.filtros .chip-f{display:inline-flex;align-items:center;gap:6px;max-width:min(270px,70vw);
background:var(--azul-100);color:var(--azul-700);border:1px solid color-mix(in srgb,var(--azul-700) 22%,transparent);
border-radius:8px;padding:4px 6px 4px 10px;font-size:12.5px;font-weight:560}
.filtros .chip-f .k{flex:none;color:var(--gris-500);font-weight:500}
.filtros .chip-f .v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtros .chip-f button{flex:none;border:0;background:transparent;color:inherit;cursor:pointer;
font-size:15px;line-height:1;padding:2px 4px;border-radius:5px;opacity:.7}
.filtros .chip-f button:hover{opacity:1;background:color-mix(in srgb,var(--azul-700) 14%,transparent)}
.filtros .limpiar{border:0;background:transparent;color:var(--gris-500);font-size:12.5px;cursor:pointer;
text-decoration:underline;text-underline-offset:3px;padding:5px 2px}
.filtros .limpiar:hover{color:var(--rojo)}
.filtros .sin-filtro{font-size:12.5px;color:var(--gris-500)}
/* Bloque derecho: boton de filtros y el conjunto de datos. */
.filtros .der{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filtros .menu-pop{position:relative}
.filtros .btn-ac{display:inline-flex;align-items:center;gap:7px;background:var(--blanco);color:var(--gris-700);
border:1px solid var(--gris-200);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:560;
cursor:pointer;box-shadow:var(--sombra);transition:border-color var(--t),color var(--t)}
.filtros .btn-ac:hover{border-color:var(--azul-500);color:var(--azul-700)}
.filtros .cuenta{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--azul-700);
color:var(--btn-ink);font-size:10.5px;font-weight:700;display:grid;place-items:center}
.filtros .panel-f{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(320px,calc(100vw - 32px));
background:var(--blanco);border:1px solid var(--gris-200);border-radius:12px;
box-shadow:0 14px 42px -14px rgb(13 22 33/.38);padding:14px;text-align:left}
.filtros .panel-f[hidden]{display:none}
.filtros .panel-f .cg{margin-bottom:11px}
.filtros .panel-f label{display:block;font-size:11.5px;font-weight:600;color:var(--gris-700);margin-bottom:5px}
.filtros .panel-f select{width:100%;font-size:13px;color:var(--gris-900);background:var(--gris-50);
border:1px solid var(--gris-200);border-radius:8px;padding:8px 10px;cursor:pointer}
.filtros .panel-f .pie{display:flex;justify-content:flex-end;margin-top:4px;padding-top:11px;border-top:1px solid var(--gris-100)}
.filtros .panel-f .pie .pri{background:var(--azul-700);border:1px solid var(--azul-700);color:var(--btn-ink);
font-weight:600;font-size:13px;padding:7px 15px;border-radius:8px;cursor:pointer}
/* El punto cambia de color cuando NO se estan viendo datos reales: es el
aviso de que lo que hay en pantalla incluye demostracion. */
.filtros .modo{display:flex;align-items:center;gap:7px;background:var(--blanco);border:1px solid var(--gris-200);
border-radius:9px;padding:4px 8px 4px 10px;box-shadow:var(--sombra)}
.filtros .modo label{font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;color:var(--gris-500)}
.filtros .modo select{border:0;background:transparent;color:var(--gris-900);font-size:12.5px;font-weight:600;
cursor:pointer;padding:3px 0}
.filtros .modo .punto{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none}
.filtros .modo.otro .punto{background:var(--ambar)}
@media (max-width:760px){
.filtros .der{margin-left:0;width:100%}
.filtros .sep{display:none}
.filtros .rango{width:100%;order:9}
}
/* ===================================================== CELULAR: la cabecera
El problema: header.barra es position:sticky, y con titulo + subtitulo +
la fila de filtros desdoblada en cuatro renglones ocupaba cerca de 260px
de una pantalla de 844px. Al bajar, eso quedaba clavado arriba y el
contenido pasaba por una rendija.
La solucion: en telefono la cabecera pegada se reduce a titulo + un boton
que resume el periodo y cuantos filtros hay puestos. Son ~46px. El bloque
de filtros se abre cuando se necesita y nunca pasa del 58% del alto. */
.ver-filtros{display:none}
@media (max-width:760px){
header.barra{padding:10px 16px 9px 60px}
header.barra h1{font-size:16.5px}
header.barra p#subtitulo-vista{display:none}
.ver-filtros{display:inline-flex;align-items:center;gap:7px;margin-top:7px;
background:var(--blanco);border:1px solid var(--gris-200);border-radius:9px;
padding:6px 11px;font-size:12.5px;font-weight:560;color:var(--gris-700);
cursor:pointer;box-shadow:var(--sombra)}
.ver-filtros .flecha{color:var(--gris-500);transition:rotate var(--t)}
header.barra.filtros-abiertos .ver-filtros .flecha{rotate:180deg}
.ver-filtros .cuenta{min-width:17px;height:17px;padding:0 5px;border-radius:9px;
background:var(--azul-700);color:var(--btn-ink);font-size:10.5px;font-weight:700;
display:grid;place-items:center}
.filtros{display:none}
header.barra.filtros-abiertos .filtros{display:flex;max-height:58vh;overflow-y:auto;padding-bottom:6px}
.filtros .der{margin-left:0;width:100%}
.filtros .sep{display:none}
.filtros .rango{width:100%;order:9}
.filtros .chip-f{max-width:100%}
.filtros .fechas{flex-wrap:wrap}
/* En telefono el panel no flota: se abre en linea para que no se salga. */
.filtros .menu-pop{flex:1 1 auto}
.filtros .btn-ac{width:100%;justify-content:center}
.filtros .panel-f{position:static;width:100%;box-shadow:none;margin-top:8px}
}
/* Pantallas muy angostas: que nada obligue a desplazar de lado. */
@media (max-width:420px){
.contenido{padding:14px 12px 40px}
header.barra{padding-left:58px}
.filtros .modo{width:100%}
.filtros .modo select{flex:1 1 auto}
}
/* ------------------------------------------------------------- arreglo
--btn-ink lo venian usando el contador de filtros y el boton primario
del panel, pero nunca se declaro: la variable no resolvia y el numero
tomaba el color heredado sobre azul, 1.15:1, o sea invisible.
Declarado queda en 6.5:1 en claro y 5.4:1 en oscuro. */
:root{--btn-ink:#ffffff}
:root[data-tema="oscuro"]{--btn-ink:#04222e}
/* ====================================== instalada como app (pantalla completa)
Sin barras del navegador, el contenido queda debajo de la barra de estado
y de la barra de gestos del telefono. env(safe-area-inset-*) vale 0 en
escritorio y en el navegador normal, asi que estas reglas no cambian nada
fuera de ese caso. */
@media (max-width:1000px){
.menu-movil{top:calc(12px + env(safe-area-inset-top,0px))}
aside{padding-top:env(safe-area-inset-top,0px)}
header.barra{padding-top:calc(15px + env(safe-area-inset-top,0px))}
.contenido{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.pie-lateral{padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:760px){
header.barra{padding-top:calc(10px + env(safe-area-inset-top,0px))}
}
/* ------------------------------------------- boton de instalar en el pie
Vive en el pie de la barra lateral. Solo se ve cuando el navegador dice
que la app se puede instalar, y desaparece apenas queda instalada, asi
que en escritorio y en una app ya instalada no ocupa nada.
La regla de abajo pesa mas que ".pie-lateral button" (dos clases contra
una clase y un elemento), por eso hay que repetir el margen. */
.pie-lateral .instalar{flex:1 1 100%;margin-left:0;display:flex;align-items:center;
justify-content:center;gap:7px;background:var(--azul-700);border:1px solid var(--azul-700);
color:var(--btn-ink);font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:8px;
cursor:pointer;transition:background var(--t),border-color var(--t)}
.pie-lateral .instalar:hover{background:var(--azul-800);border-color:var(--azul-800);color:var(--btn-ink)}
.pie-lateral .instalar:disabled{opacity:.6;cursor:default}
/* Sin esto el display:flex de arriba le gana al hidden y el boton se veria
siempre, incluso cuando no hay nada que instalar. */
.pie-lateral .instalar[hidden]{display:none}
.pie-lateral .nota-instalar{flex:1 1 100%;margin:0;font-size:11.5px;line-height:1.45;color:var(--gris-500)}
/* ---- Seguridad de acceso (31-oct-2026) ---- */
.enlace-acceso{display:block;width:100%;margin:12px 0 0;background:none;border:0;color:var(--azul,#1f5fbf);font-size:13px;cursor:pointer;text-align:center;padding:4px}
.enlace-acceso:hover{text-decoration:underline}
.aviso-acceso{background:var(--verde-claro,#e7f6ec);color:var(--verde,#15803d);border-radius:8px;padding:10px 13px;font-size:13px;margin:14px 0 0;line-height:1.45}
#form-recuperar .aviso-acceso{margin:0 0 16px}
.reglas-clave{list-style:none;margin:-6px 0 14px;padding:0;display:grid;gap:4px;font-size:12px;color:var(--gris-500,#64748b)}
.reglas-clave li::before{content:"○";display:inline-block;width:16px}
.reglas-clave li.cumple{color:var(--verde,#15803d)}
.reglas-clave li.cumple::before{content:"✓"}
.casilla{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:6px 0 4px;cursor:pointer}
.casilla input{width:auto}