/* =====================================================================
   MTech Nexus - hoja de estilos
   Sustituye a la anterior CONSERVANDO sus nombres: los mismos 27 tokens,
   los mismos selectores y la misma estructura de cada regla. vistas.js
   emite el mismo marcado de siempre y no se toca ni una linea; lo unico
   que cambia son los valores, la tipografia y el comportamiento.
   El tema oscuro sigue colgando de :root[data-tema="oscuro"], como ya lo
   hacia el selector de tema.
   ===================================================================== */

:root{
  --blanco:#ffffff;
  --gris-50:#f6f8fb; --gris-100:#eef2f7; --gris-200:#dfe6ef; --gris-300:#c8d3e0;
  --gris-500:#7a8798; --gris-700:#47566a; --gris-900:#0d1621;
  /* El azul sale del degradado del logo Nexus (#044fa4 -> #13bdcd -> #066e67),
     ajustado para que cada paso pase contraste sobre su propio fondo. */
  --azul-100:#e3eefb; --azul-500:#1d84c9; --azul-700:#0b5fa8; --azul-800:#084b87; --azul-900:#05335c;
  --acento:#0f97ac; --acento-oscuro:#0a6f80;
  --verde:#147a4f; --verde-claro:#e5f4ec;
  --rojo:#d13438; --rojo-claro:#fdecec;
  --ambar:#97741a; --ambar-claro:#fbf5e2;
  --radio:11px;
  --sombra:0 1px 2px rgb(13 22 33/.05), 0 4px 14px -6px rgb(13 22 33/.10);
  --sombra-md:0 2px 5px rgb(13 22 33/.07), 0 14px 34px -12px rgb(13 22 33/.20);
  --fuente:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Agregados. Nada los exige, asi que ningun selector viejo se rompe. */
  --titular:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --cifra:ui-monospace,"Cascadia Mono","Segoe UI Mono","SF Mono",Consolas,monospace;
  --suelo:#eef1f5; --rail:250px; --t:200ms cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

/* Tema oscuro por redefinicion de tokens y no parche por componente: el
   --blanco pasa a ser la superficie y el --gris-900 la tinta clara, de modo
   que toda la hoja se da vuelta sola. */
:root[data-tema="oscuro"]{
  --blanco:#111a24;
  --gris-50:#16202b; --gris-100:#1d2937; --gris-200:#223141; --gris-300:#32475c;
  --gris-500:#6e8097; --gris-700:#9fb1c5; --gris-900:#e8eff7;
  --azul-100:#0c2634; --azul-500:#4fbcdd; --azul-700:#2f9fc4; --azul-800:#5fc1ee; --azul-900:#8ed4f0;
  --acento:#19d6ed; --acento-oscuro:#4fe3f5;
  --verde:#3fc98a; --verde-claro:#0e2e22;
  --rojo:#ff6b6e; --rojo-claro:#351a1c;
  --ambar:#dcb03e; --ambar-claro:#2f2810;
  --sombra:0 1px 2px rgb(0 0 0/.4), 0 4px 16px -6px rgb(0 0 0/.5);
  --sombra-md:0 2px 6px rgb(0 0 0/.45), 0 16px 40px -12px rgb(0 0 0/.65);
  --suelo:#080d13;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--suelo);color:var(--gris-900);font-family:var(--fuente);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--azul-700);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--azul-700);outline-offset:2px;border-radius:5px}
h1,h2,h3,h4{font-family:var(--titular);letter-spacing:-.02em;margin:0}
.oculto{display:none !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ------------------------------------------------------------ acceso */
#acceso{min-height:100%;display:grid;place-items:center;padding:32px 20px;background:var(--suelo)}
.tarjeta-acceso{width:100%;max-width:392px;background:var(--blanco);border:1px solid var(--gris-200);border-radius:16px;padding:34px 32px;box-shadow:var(--sombra-md)}
.logo-acceso{display:block;width:min(240px,74%);height:auto;margin:0 0 20px}
.tarjeta-acceso h1{font-size:25px;font-weight:700;margin-bottom:5px}
.tarjeta-acceso p.sub{margin:0 0 26px;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--acento)}
.error-acceso{background:var(--rojo-claro);color:var(--rojo);border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:16px}

/* ------------------------------------------------------------- campos */
.campo{margin-bottom:15px}
.campo label{display:block;font-size:12.5px;font-weight:500;color:var(--gris-700);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 13px;border-radius:8px;border:1px solid var(--gris-300);background:var(--blanco);transition:border-color var(--t),box-shadow var(--t)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--azul-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--azul-700) 18%,transparent)}
.pista{display:block;margin-top:6px;font-size:11.5px;color:var(--gris-500);line-height:1.45}

/* ------------------------------------------------------------ botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 17px;border-radius:8px;border:1px solid transparent;background:var(--azul-700);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;position:relative;transition:transform var(--t),box-shadow var(--t),background-color var(--t),border-color var(--t),color var(--t)}
.btn:hover{background:var(--azul-800);transform:translateY(-1px);box-shadow:var(--sombra-md)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.secundario{background:var(--gris-100);color:var(--gris-900);border-color:var(--gris-200)}
.btn.secundario:hover{background:var(--gris-200);border-color:var(--gris-300)}
.btn.acento{background:var(--acento);color:#04252b}
.btn.peligro{background:var(--rojo);color:#fff}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.pequeno{padding:6px 12px;font-size:12.5px;border-radius:7px}
:root[data-tema="oscuro"] .btn:not(.secundario){color:#03202e}
:root[data-tema="oscuro"] .btn.peligro{color:#2a0f10}

/* ------------------------------------------------------------ armazon */
#app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
aside{background:var(--blanco);border-right:1px solid var(--gris-200);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;min-width:0}
.marca{display:flex;align-items:center;gap:11px;padding:17px 16px;min-height:66px;border-bottom:1px solid var(--gris-200)}
.marca-logo{flex:none;height:30px;width:auto;display:block}
.marca strong{font-family:var(--titular);font-size:17px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.marca span{display:block;font-size:11px;color:var(--gris-500);letter-spacing:.02em}
nav{flex:1;overflow-y:auto;padding:10px 11px}
nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--gris-700);font-size:13.5px;font-weight:500;position:relative;transition:background-color var(--t),color var(--t)}
nav a:hover{background:var(--gris-100);color:var(--gris-900);text-decoration:none}
nav a.activo{background:var(--azul-100);color:var(--azul-700);font-weight:600}
nav a.activo::before{content:"";position:absolute;left:-11px;top:50%;translate:0 -50%;width:3px;height:19px;border-radius:0 3px 3px 0;background:var(--azul-700)}
nav a .ic{flex:none;opacity:.85;display:inline-flex;transition:transform var(--t),opacity var(--t)}
nav a:hover .ic{opacity:1;transform:scale(1.07)}
nav a.activo .ic{opacity:1}
.pie-lateral{padding:13px 15px;border-top:1px solid var(--gris-200);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pie-lateral .usuario{font-size:13px;font-weight:600}
.pie-lateral .rol{font-size:11.5px;color:var(--gris-500)}
.pie-lateral button{margin-left:auto;padding:6px 12px;border-radius:7px;border:1px solid var(--gris-300);background:transparent;color:var(--gris-700);font-size:12.5px;cursor:pointer;transition:all var(--t)}
.pie-lateral button:hover{border-color:var(--rojo);color:var(--rojo)}
.pie-lateral .version{width:100%;font-size:10.5px;color:var(--gris-500);letter-spacing:.03em}
main{min-width:0}

/* -------------------------------------------------------------- cinta */
header.barra{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--blanco) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--gris-200);padding:15px 24px 12px;min-width:0}
header.barra h1{font-size:19px;font-weight:600}
header.barra p{margin:3px 0 0;font-size:13px;color:var(--gris-500)}
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-top:13px;min-width:0}
.filtros .campo{margin:0}
.filtros .campo label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--gris-500);margin-bottom:4px}
.filtros input,.filtros select{padding:7px 11px;border-radius:100px;border:1px solid var(--gris-300);background:var(--blanco);font-size:12.5px;transition:border-color var(--t)}
.filtros input:hover,.filtros select:hover{border-color:var(--azul-700)}
.atajos{display:flex;gap:6px;flex-wrap:wrap}
.atajos button{padding:6px 12px;border-radius:100px;border:1px solid var(--gris-300);background:var(--blanco);color:var(--gris-700);font-size:12.5px;cursor:pointer;white-space:nowrap;transition:all var(--t)}
.atajos button:hover{border-color:var(--azul-700);color:var(--azul-700);background:var(--azul-100);transform:translateY(-1px)}
.contenido{padding:22px 24px 48px;max-width:1560px;min-width:0}
.cargando{padding:44px;text-align:center;color:var(--gris-500)}

/* ----------------------------------------------------------- selector */
.selector-tema{display:inline-flex;gap:2px;padding:3px;border-radius:100px;background:var(--gris-100);border:1px solid var(--gris-200)}
.selector-tema button{padding:5px 11px;border:0;border-radius:100px;background:transparent;color:var(--gris-500);font-size:12px;cursor:pointer;transition:background-color var(--t),color var(--t)}
.selector-tema button:hover{color:var(--gris-900)}
.selector-tema button.activo{background:var(--blanco);color:var(--azul-700);font-weight:600;box-shadow:var(--sombra)}

/* ------------------------------------------------------------ rejilla */
.rejilla{display:grid;gap:14px}
.k2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.k3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.k4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.panel{background:var(--blanco);border:1px solid var(--gris-200);border-radius:var(--radio);box-shadow:var(--sombra);min-width:0;transition:box-shadow var(--t),border-color var(--t)}
.panel:hover{border-color:var(--gris-300)}
.panel > h2{font-family:var(--titular);font-size:14.5px;font-weight:600;padding:14px 17px;border-bottom:1px solid var(--gris-200);color:var(--gris-900);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel > h2 .nota{font-family:var(--fuente);font-weight:400;font-size:11.5px;color:var(--gris-500);letter-spacing:0}
.panel .cuerpo{padding:15px 17px}
.panel .cuerpo.sin-relleno{padding:0}

/* ---------------------------------------------------------------- kpi */
.kpi{background:var(--blanco);border:1px solid var(--gris-200);border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra);position:relative;min-width:0;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra-md);border-color:var(--gris-300)}
.kpi .nombre{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--gris-500);display:flex;justify-content:space-between;gap:6px;font-weight:600}
.kpi .valor{font-family:var(--cifra);font-size:23px;font-weight:600;color:var(--gris-900);margin-top:7px;letter-spacing:-.03em;line-height:1.1}
.kpi .valor.negativo{color:var(--rojo)}
.kpi .valor.sin-dato{font-family:var(--fuente);font-size:14px;font-weight:500;color:var(--gris-500);font-style:italic;letter-spacing:0}
.kpi .meta{margin-top:6px;font-size:11.5px;color:var(--gris-500);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kpi .detalle-formula{display:none;position:absolute;z-index:40;top:100%;left:0;right:0;background:var(--gris-900);color:var(--blanco);padding:10px 12px;border-radius:9px;box-shadow:var(--sombra-md);font-size:11.5px;line-height:1.5}
.kpi:hover .detalle-formula{display:block}
.kpi .detalle-formula b{color:var(--blanco);display:block;margin-top:5px;font-family:var(--cifra)}
.kpi .detalle-formula b:first-child{margin-top:0}
.delta{font-family:var(--cifra);font-weight:600;font-size:11.5px}
.delta.sube{color:var(--verde)}
.delta.baja{color:var(--rojo)}

/* ----------------------------------------------------------- etiquetas */
.etiqueta{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:100px;white-space:nowrap}
.e-verde{background:var(--verde-claro);color:var(--verde)}
.e-rojo{background:var(--rojo-claro);color:var(--rojo)}
.e-ambar{background:var(--ambar-claro);color:var(--ambar)}
.e-azul{background:var(--azul-100);color:var(--azul-700)}
.e-gris{background:var(--gris-100);color:var(--gris-500)}

/* ------------------------------------------------------------- tablas */
.tabla-scroll{overflow-x:auto;border:1px solid var(--gris-200);border-radius:var(--radio);background:var(--blanco)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-500);font-weight:600;background:var(--gris-50);padding:10px 14px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:2;border-bottom:1px solid var(--gris-200)}
thead th:hover{color:var(--gris-900)}
tbody td{padding:10px 14px;border-bottom:1px solid var(--gris-200);white-space:nowrap}
tbody tr{transition:background-color var(--t)}
tbody tr:hover{background:var(--gris-50)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--cifra);font-variant-numeric:tabular-nums}
td.sin-dato{color:var(--gris-500);font-style:italic}
.barra-tabla{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--gris-200);background:var(--gris-50)}
.barra-tabla input{padding:7px 12px;border-radius:8px;border:1px solid var(--gris-300);background:var(--blanco);font-size:12.5px;min-width:200px}
.barra-tabla .cuenta{margin-left:auto;font-size:11.5px;color:var(--gris-500);font-family:var(--cifra)}
tr.fila-aviso{background:var(--ambar-claro)}

/* ------------------------------------------------------- avisos/alertas */
.aviso{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--radio);border:1px solid var(--gris-200);background:var(--gris-50);font-size:13px;color:var(--gris-700);line-height:1.5}
.aviso b{color:var(--gris-900)}
.aviso.info{border-color:var(--azul-700);background:var(--azul-100);color:var(--azul-800)}
.aviso.alerta{border-color:var(--ambar);background:var(--ambar-claro);color:var(--ambar)}
.aviso.critico{border-color:var(--rojo);background:var(--rojo-claro);color:var(--rojo)}
.aviso.ok{border-color:var(--verde);background:var(--verde-claro);color:var(--verde)}
.lista-alertas{list-style:none;margin:0;padding:0}
.lista-alertas li{padding:11px 0;border-bottom:1px solid var(--gris-200);font-size:13px}
.lista-alertas li:last-child{border-bottom:0}
.alerta{border-left:4px solid var(--gris-300);background:var(--blanco);border-radius:var(--radio);padding:13px 15px;box-shadow:var(--sombra);margin-bottom:10px;transition:transform var(--t),box-shadow var(--t)}
.alerta:hover{transform:translateY(-1px);box-shadow:var(--sombra-md)}
.alerta.alta{border-left-color:var(--rojo)}
.alerta.media{border-left-color:var(--ambar)}
.alerta.baja{border-left-color:var(--azul-700)}
.alerta-titulo{font-weight:600;font-size:14px;margin-bottom:4px}
.alerta-detalle{font-size:13px;color:var(--gris-700);line-height:1.5}
.alerta-pie{margin-top:8px;font-size:11.5px;color:var(--gris-500);display:flex;gap:13px;flex-wrap:wrap}
.estado-ok{color:var(--verde);font-weight:600}
.estado-alerta{color:var(--ambar);font-weight:600}

/* ----------------------------------------------------------- graficos */
.grafico{position:relative;height:250px;min-width:0}
.grafico.alto{height:340px}

/* ----------------------------------------------------------- pestanas */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--gris-200);margin-bottom:16px;flex-wrap:wrap;overflow-x:auto}
.pestanas button{background:none;border:none;border-bottom:2px solid transparent;padding:9px 13px;cursor:pointer;color:var(--gris-500);font-size:13.5px;font-weight:500;white-space:nowrap;margin-bottom:-1px;transition:color var(--t),border-color var(--t)}
.pestanas button:hover{color:var(--gris-900)}
.pestanas button.activo{color:var(--azul-700);border-bottom-color:var(--azul-700);font-weight:600}

/* -------------------------------------------------------------- modal */
.modal-fondo{position:fixed;inset:0;z-index:90;background:rgb(6 11 17/.5);display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.modal{width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--gris-200);border-radius:15px;box-shadow:var(--sombra-md);animation:sube-modal 220ms cubic-bezier(.22,.61,.36,1)}
@keyframes sube-modal{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.modal h3{font-size:16px;font-weight:600;padding:16px 20px;border-bottom:1px solid var(--gris-200);display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal .cuerpo{padding:18px 20px;overflow-y:auto;flex:1}
.modal .pie{padding:14px 20px;border-top:1px solid var(--gris-200);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.cerrar{background:none;border:0;color:var(--gris-500);font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:7px;transition:background-color var(--t),color var(--t)}
.cerrar:hover{background:var(--gris-100);color:var(--gris-900)}

/* --------------------------------------------------------------- otros */
.vacio{padding:36px 20px;text-align:center;color:var(--gris-500);font-size:13.5px}
.procedencia{font-size:11.5px;color:var(--gris-500);padding:10px 16px;border-top:1px solid var(--gris-100);background:var(--gris-50);line-height:1.5}
.procedencia b{color:var(--gris-700)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px;margin:0}
.dl dt{color:var(--gris-500)}
.dl dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--cifra);margin:0}
.barra-progreso{height:7px;background:var(--gris-100);border-radius:4px;overflow:hidden;margin-top:6px}
.barra-progreso span{display:block;height:100%;background:var(--azul-700);border-radius:4px;transition:width 420ms cubic-bezier(.22,.61,.36,1)}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.monoespaciado{font-family:var(--cifra);font-variant-numeric:tabular-nums}
.formulario-ancho{max-width:560px}
.formulario-ancho .campo{margin-bottom:17px}
.mensaje{padding:11px 14px;border-radius:9px;font-size:13px;margin-bottom:14px}
.mensaje.ok{background:var(--verde-claro);color:var(--verde)}
.mensaje.error{background:var(--rojo-claro);color:var(--rojo)}
.codigos-respaldo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.codigos-respaldo li{font-family:var(--cifra);font-size:14px;letter-spacing:.06em;text-align:center;padding:9px;border-radius:8px;background:var(--gris-50);border:1px solid var(--gris-200)}
.qr-mfa{display:block;width:min(212px,100%);height:auto;margin:0 auto;padding:11px;background:#fff;border-radius:11px;border:1px solid var(--gris-200)}

/* ------------------------------------------------------------- movil */
@media (max-width:1000px){
  #app{grid-template-columns:1fr}
  aside{position:fixed;inset:0 auto 0 0;width:270px;z-index:70;transform:translateX(-100%);transition:transform var(--t);box-shadow:var(--sombra-md)}
  aside.abierto{transform:none}
  header.barra{padding-inline:16px}
  .contenido{padding:18px 16px 44px}
}
@media (max-width:560px){
  .k2,.k3,.k4{grid-template-columns:1fr}
  .tarjeta-acceso{padding:26px 22px}
}

/* --------------------------------------------- agregados del armazon nuevo */
/* La malla vive detras de la tarjeta de acceso; la tarjeta sube de capa para
   quedar por encima, y el lienzo no intercepta clics. */
#acceso{position:relative;overflow:hidden}
#malla{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.tarjeta-acceso{position:relative;z-index:1}
.pie-acceso{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--gris-200);font-size:11.5px;color:var(--gris-500)}
/* En pantalla angosta la barra lateral se sale de vista y antes no habia
   manera de volver a abrirla. */
.menu-movil{display:none;position:fixed;top:12px;left:12px;z-index:80;width:38px;height:38px;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--gris-200);background:var(--blanco);color:var(--gris-700);cursor:pointer;box-shadow:var(--sombra);transition:transform var(--t),border-color var(--t)}
.menu-movil:hover{border-color:var(--azul-700);color:var(--azul-700);transform:translateY(-1px)}
@media (max-width:1000px){.menu-movil{display:inline-flex}header.barra{padding-left:62px}}