/* ============================================================ TRACEHOLD — Design System (2026) Tokens · Components · Shell · Legacy compat ============================================================ */ /* ====================== TIPOGRAFÍA (Geist, auto-alojada) ====================== Geist y Geist Mono de Vercel (SIL Open Font License 1.1 → fonts/OFL.txt), fuentes VARIABLES (un fichero cubre 100–900), tomadas tal cual del paquete npm `geist@1.7.2` (dist/fonts//…-Variable.woff2). Se sirven desde /admin (CSP font-src 'self'): nada de Google Fonts ni CDN, un producto DLP no hace llamadas externas para pintar su propia consola. Sin estas reglas los tokens --font-sans/--font-mono nombraban 'Geist' pero caían siempre a la fuente del sistema. font-display:swap = el texto se pinta al momento con la pila de respaldo y cambia a Geist en cuanto carga. */ @font-face { font-family:'Geist'; src:url('fonts/Geist-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face { font-family:'Geist Mono'; src:url('fonts/GeistMono-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } /* ====================== TOKENS ====================== */ /* Claro = valores base; oscuro es el modo por defecto y se declara en [data-theme="dark"]. */ :root, [data-theme="light"] { /* navy */ --navy-950:#070d1a; --navy-900:#0a1326; --navy-850:#0d1830; --navy-800:#101f3f; --navy-700:#192847; --navy-600:#243861; --navy-500:#37507f; --navy-400:#5a72a0; --navy-300:#8ea0c2; /* teal */ --teal-800:#0b5f60; --teal-700:#0e7e80; --teal-600:#10999a; --teal-500:#12b1b0; --teal-450:#19abad; --teal-400:#34c6c5; --teal-300:#6fdcdb; --teal-200:#a9ecec; --teal-100:#d7f6f6; --teal-50:#eefbfb; /* status */ --coral-700:#a3271a; --coral-600:#c8392a; --coral-500:#e85544; --coral-200:#f8c0b8; --coral-100:#fde6e2; --amber-700:#9a5d05; --amber-600:#bd7708; --amber-500:#e8a020; --amber-100:#fcefd4; --green-700:#0c6e44; --green-600:#0f9259; --green-500:#1bb56f; --green-100:#d6f4e4; --blue-600:#2563d6; --blue-500:#3b82f6; --blue-100:#dbe8fe; --violet-600:#6d3fe0; --violet-500:#8456f0; --violet-100:#ece4fd; --pink-500:#e4519b; --orange-500:#f3743a; /* neutral */ --gray-50:#f6f7f9; --gray-100:#eef0f4; --gray-200:#e4e7ee; --gray-300:#d3d8e2; --gray-400:#a6adbd; --gray-500:#717a8c; --gray-600:#515a6e; --gray-700:#39414f; --gray-800:#222936; --gray-900:#10141d; /* semantic · light */ --bg:#f7f7f9; --bg-grid:none; --surface:#ffffff; --surface-2:#f2f2f6; --surface-sunken:#ececf1; --surface-hover:#f2f2f6; --border:#e4e4ea; --border-strong:#d2d2db; --divider:#ececf1; --text:#2e3040; --text-strong:#16171f; --text-muted:#555869; --text-subtle:#666a7c; --text-inverse:#ffffff; --bar-neutral:#d6d7df; --accent:#6d5fd0; --accent-hover:#5f52bd; --accent-strong:#5145a8; --accent-soft:rgba(109,95,208,.12); --accent-softer:rgba(109,95,208,.07); --accent-fg:#ffffff; --accent-rgb:109,95,208; --brand:var(--navy-800); --brand-soft:#eaeef6; --danger:#d0504b; --danger-soft:var(--coral-100); --danger-fg:#8f2217; --warn:#c27a1a; --warn-soft:var(--amber-100); --warn-fg:#855004; --ok:#2f9a5f; --ok-soft:var(--green-100); --ok-fg:#0a6140; --info:var(--blue-500); --info-soft:var(--blue-100); --info-fg:#1f55b8; --violet:var(--violet-500);--violet-soft:var(--violet-100); /* rail: sigue al tema (claro en claro, oscuro en oscuro) */ --rail-bg:#efeff3; --rail-bg-2:#ffffff; --rail-border:#e4e4ea; --rail-text:#555869; --rail-text-dim:#606376; --rail-text-hi:#16171f; --rail-hover:#e6e6ec; --rail-active:#dedee6; --rail-section:#666a7c; /* type */ --font-sans:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13px; --fs-md:14.5px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:23px; --fs-3xl:29px; --fs-4xl:38px; --fs-5xl:52px; /* shape */ --r-xs:5px; --r-sm:4px; --r-md:6px; --r:6px; --r-lg:8px; --r-xl:10px; --r-2xl:24px; --r-pill:999px; /* spacing */ --sp-1:4px; --sp-2:6px; --sp-3:10px; --sp-4:14px; --sp-5:18px; --sp-6:24px; --sp-7:32px; --sp-8:44px; --pad-card:16px; --row-h:36px; /* shadows */ --sh-xs:none; --sh-sm:none; --sh:none; --sh-glow:none; /* solo drawer/popover */ --sh-lg:0 12px 32px rgba(0,0,0,.35); --sh-xl:0 12px 32px rgba(0,0,0,.35); --focus:0 0 0 3px rgba(var(--accent-rgb),.30); --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); } /* ====================== DARK ====================== */ [data-theme="dark"] { --bg:#191b2a; --bg-grid:none; --surface:#1d1f2c; --surface-2:#222433; --surface-sunken:#161923; --surface-hover:#222433; --border:#282a37; --border-strong:#353746; --divider:#282a37; --text:#c9cbd6; --text-strong:#eceef4; --text-muted:#a3a7ba; --text-subtle:#868ba2; --text-inverse:#16171f; --bar-neutral:#3f414d; --accent:#9284d9; --accent-hover:#a095e0; --accent-strong:#b3a8ec; --accent-soft:rgba(146,132,217,.16); --accent-softer:rgba(146,132,217,.08); --accent-fg:#16171f; --accent-rgb:146,132,217; --brand:#9284d9; --brand-soft:rgba(146,132,217,.16); --danger:#e7827e; --warn:#ecb16a; --ok:#6fce96; --danger-soft:rgba(231,130,126,.14); --danger-fg:#e7827e; --warn-soft:rgba(236,177,106,.14); --warn-fg:#ecb16a; --ok-soft:rgba(111,206,150,.14); --ok-fg:#6fce96; --info-soft:rgba(59,130,246,.14); --info-fg:#9cc2fb; --violet-soft:rgba(146,132,217,.16); --rail-bg:#161825; --rail-bg-2:#1d1f2c; --rail-border:#282a37; --rail-text:#a3a7ba; --rail-text-dim:#868ba2; --rail-text-hi:#eceef4; --rail-hover:#222433; --rail-active:#2a2c3d; --rail-section:#868ba2; } /* ====================== DENSIDAD ====================== Esto FUE la perilla `data-density` (comfortable/compact). Nunca llegó a existir: el único bloque escrito era el de "comfortable" —el valor por defecto—, así que elegir "compact" en el panel Apariencia no cambiaba un píxel. El control se retiró (2026-09-20); ver DESIGN.md. Las declaraciones se quedan TAL CUAL y solo cambia el selector, de [data-density="comfortable"] a :root. Son los valores REALMENTE activos hoy (pad-card 20px, row-h 46px, sp-4/5/6 16/22/30px, fs-base 14px) y difieren de los de :root de arriba (16px, 36px, 14/18/24px, 13.5px): borrar el bloque compactaría la consola entera. Misma especificidad (0,1,0) y misma posición en la cascada que antes, y nada entre medias redefine estos tokens, así que el resultado calculado es idéntico. Si algún día se quiere densidad de verdad, se reintroduce con AMBOS valores escritos. */ :root { --pad-card:16px; --row-h:36px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --fs-base:13px; } @media (min-width: 2400px) { :root { --fs-base:14px; --pad-card:20px; --row-h:40px; } } /* ====================== BACKWARD COMPAT ALIASES ====================== */ :root { --text-xs:var(--fs-xs); --text-sm:var(--fs-sm); --text-base:var(--fs-base); --text-md:var(--fs-md); --text-lg:var(--fs-lg); --text-xl:var(--fs-xl); --text-2xl:var(--fs-2xl); --text-3xl:var(--fs-3xl); --text-4xl:var(--fs-4xl); --radius-xs:var(--r-xs); --radius-sm:var(--r-sm); --radius:var(--r); --radius-lg:var(--r-lg); --radius-xl:var(--r-xl); --radius-2xl:var(--r-2xl); --shadow-xs:var(--sh-xs); --shadow-sm:var(--sh-sm); --shadow:var(--sh); --shadow-lg:var(--sh-lg); --shadow-xl:var(--sh-xl); --surface-alt:var(--surface-2); --text-inverted:var(--text-inverse); --gap:var(--sp-4); --gap-xs:var(--sp-2); --gap-sm:var(--sp-3); --gap-lg:var(--sp-6); --gap-xl:var(--sp-7); } /* ====================== BASE ====================== */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'ss01','cv01','tnum' 0; } button,input,textarea,select{font:inherit;color:inherit;} button{background:none;border:0;padding:0;cursor:pointer;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.02em;color:var(--text-strong);} ::selection{background:var(--accent-soft);color:var(--accent-strong);} :focus-visible{outline:none;box-shadow:var(--focus);} .tnum{font-variant-numeric:tabular-nums;} .mono{font-family:var(--font-mono);} /* ====================== SCROLLBAR ====================== */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background:var(--gray-400);background-clip:padding-box;} ::-webkit-scrollbar-track{background:transparent;} /* ====================== ANIMATIONS ====================== */ @keyframes kl-fade-up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @keyframes kl-fade-in{from{opacity:0;}to{opacity:1;}} @keyframes kl-scale-in{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}} @keyframes kl-pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45);}70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0);}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);}} @keyframes kl-pulse-live{0%{box-shadow:0 0 0 0 rgba(27,181,111,.5);}70%{box-shadow:0 0 0 6px rgba(27,181,111,0);}100%{box-shadow:0 0 0 0 rgba(27,181,111,0);}} @keyframes kl-spin{to{transform:rotate(360deg);}} @keyframes kl-shimmer{0%{background-position:-180% 0;}100%{background-position:180% 0;}} @keyframes kl-sweep{from{stroke-dashoffset:var(--dash);}to{stroke-dashoffset:0;}} @keyframes kl-bar-rise{from{transform:scaleY(0);}to{transform:scaleY(1);}} @keyframes kl-flash{0%{background:var(--accent-softer);}100%{background:transparent;}} @keyframes vfsp{to{transform:rotate(360deg)}} @keyframes vfboot{to{transform:rotate(360deg);}} @keyframes kl-pop{from{opacity:0;transform:scale(.96) translateY(-4px);}to{opacity:1;transform:none;}} @keyframes kl-cell-pop{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}} @keyframes kl-dot-pop{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}} @keyframes loginOrbA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(80px,60px) scale(1.15);}} @keyframes loginOrbB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-90px,-50px) scale(1.1);}} @keyframes loginOrbC{0%,100%{transform:translate(0,0) scale(1);opacity:.45;}50%{transform:translate(-60px,70px) scale(1.2);opacity:.7;}} @keyframes loginGridDrift{from{background-position:0 0,0 0;}to{background-position:48px 48px,48px 48px;}} .kl-anim-up{animation:kl-fade-up .5s var(--ease-out) both;} .kl-anim-in{animation:kl-fade-in .4s var(--ease) both;} .kl-anim-scale{animation:kl-scale-in .4s var(--ease-out) both;} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } /* ====================== APP LAYOUT ====================== */ .kl-app{ display:grid; grid-template-columns:var(--rail-w,220px) 1fr; min-height:100vh; background:var(--bg); background-image:none; } .kl-app[data-rail="collapsed"]{--rail-w:56px;} /* legacy .app alias for viewing-tenant class checks */ .kl-app.viewing-tenant .tenant-rw{display:none !important;} /* ====================== UTILS ====================== */ .row{display:flex;align-items:center;gap:var(--sp-3);} .col{display:flex;flex-direction:column;gap:var(--sp-3);} .spread{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);} .grow{flex:1;min-width:0;} .wrap{flex-wrap:wrap;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .muted{color:var(--text-muted);} .subtle{color:var(--text-subtle);} .strong{color:var(--text-strong);font-weight:600;} .center{display:grid;place-items:center;} .hide{display:none !important;} .upper{text-transform:uppercase;letter-spacing:.08em;} .divider-h{height:1px;background:var(--divider);margin:8px 0;} /* ====================== RAIL / SIDEBAR ====================== */ /* Rail de iconos: plegado por defecto (56px) con flyout; desplegado 220px. Sin degradados, brillos ni barras laterales: superficie plana + borde fino. */ .kl-rail{ position:sticky;top:0;height:100vh; background:var(--rail-bg); border-right:1px solid var(--rail-border); display:flex;flex-direction:column; z-index:40;color:var(--rail-text);overflow:hidden; } .kl-app[data-rail="collapsed"] .kl-rail{overflow:visible;} .kl-rail-brand{ display:flex;align-items:center;gap:10px; padding:14px 12px 12px;position:relative; } .kl-rail-brand img.logo-full{height:28px;width:auto;display:block;} .kl-rail-brand img.logo-mark{height:28px;width:auto;display:none;} /* Logo completo por tema (el wordmark del SVG por defecto es claro). Un logo propio (consoleLogoUrl) se muestra tal cual en los dos temas. */ html[data-theme="light"] .kl-rail-brand img.logo-on-dark{display:none;} html:not([data-theme="light"]) .kl-rail-brand img.logo-on-light{display:none;} .kl-app[data-rail="collapsed"] .kl-rail-brand img.logo-full{display:none;} .kl-app[data-rail="collapsed"] .kl-rail-brand img.logo-mark{display:block;} .kl-app[data-rail="collapsed"] .kl-rail-brand{justify-content:center;padding:14px 0 12px;} .kl-rail-nav{flex:1;overflow-y:auto;padding:4px 8px 16px;display:flex;flex-direction:column;gap:2px;} .kl-app[data-rail="collapsed"] .kl-rail-nav{overflow-y:auto;scrollbar-width:none;align-items:center;} .kl-app[data-rail="collapsed"] .kl-rail-nav::-webkit-scrollbar{display:none;} .kl-rail-nav::-webkit-scrollbar{width:6px;} .kl-rail-nav::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill);} .kl-nav-item,.kl-nav-group{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:var(--r-lg); color:var(--rail-text);font-size:13px;font-weight:500;cursor:pointer; position:relative;transition:color .14s,background .14s;white-space:nowrap; } .kl-nav-group{user-select:none;} .kl-nav-item:focus-visible,.kl-nav-group:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .kl-nav-item:hover,.kl-nav-group:hover{color:var(--rail-text-hi);background:var(--rail-hover);} .kl-nav-item .th-ico,.kl-nav-group .th-ico{width:18px;height:18px;flex-shrink:0;} .kl-nav-item .lbl,.kl-nav-group .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;} .kl-nav-item.active,.kl-nav-group.has-active{color:var(--rail-text-hi);background:var(--rail-active);} .kl-nav-group .chev{flex-shrink:0;color:var(--rail-text-dim);transition:transform .2s var(--ease-out);} .kl-nav-grp-wrap.open>.kl-nav-group .chev{transform:rotate(-180deg);} .kl-nav-item .badge-n,.kl-nav-group .badge-n{ margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:600; padding:1px 6px;border-radius:var(--r-pill);background:var(--surface-hover);color:var(--rail-text); min-width:20px;text-align:center; } .kl-nav-group .badge-n{margin-right:6px;} .kl-nav-item .badge-n.danger,.kl-nav-group .badge-n.danger{background:var(--danger);color:var(--bg);} .kl-nav-item .badge-n.live{background:var(--ok-soft);color:var(--ok);} /* "Nuevo" / "Actualizado": marcadores de sección de fase de desarrollo */ /* también dentro de las pestañas de un grupo (.kl-secnav-tab): misma píldora, sin empujar a la derecha */ .kl-secnav-tab .kl-nav-tag{ margin-left:var(--sp-2);flex-shrink:0; font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:1px 6px;border-radius:var(--r-pill);line-height:1.6; } .kl-secnav-tab .kl-nav-tag.new{background:var(--accent-soft);color:var(--accent);} .kl-secnav-tab .kl-nav-tag.updated{background:var(--ok-soft);color:var(--ok);} .kl-nav-item .kl-nav-tag{ margin-left:auto;flex-shrink:0; font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:1px 6px;border-radius:var(--r-pill);line-height:1.6; } .kl-nav-item .kl-nav-tag.new{background:var(--accent-soft);color:var(--accent);} .kl-nav-item .kl-nav-tag.updated{background:var(--ok-soft);color:var(--ok);} /* Punto en cabecera de grupo cuando un hijo está marcado (Nuevo/Actualizado) */ .kl-nav-group .kl-nav-grp-dot{margin-left:auto;margin-right:6px;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent);} .kl-nav-group .badge-n + .kl-nav-grp-dot{margin-left:0;} /* Plegado: solo iconos, casillas de 40×40 */ .kl-app[data-rail="collapsed"] .kl-nav-item, .kl-app[data-rail="collapsed"] .kl-nav-group{width:40px;height:40px;padding:0;justify-content:center;} .kl-app[data-rail="collapsed"] .kl-nav-item .lbl, .kl-app[data-rail="collapsed"] .kl-nav-item .badge-n, .kl-app[data-rail="collapsed"] .kl-nav-item .kl-nav-tag, .kl-app[data-rail="collapsed"] .kl-nav-item .live-dot, .kl-app[data-rail="collapsed"] .kl-nav-group .lbl, .kl-app[data-rail="collapsed"] .kl-nav-group .chev, .kl-app[data-rail="collapsed"] .kl-nav-group .badge-n, .kl-app[data-rail="collapsed"] .kl-nav-group .kl-nav-grp-dot{display:none;} /* Grupos: submenú en acordeón (desplegado) o flyout (plegado) */ .kl-nav-grp-wrap{display:flex;flex-direction:column;} .kl-app[data-rail="collapsed"] .kl-nav-grp-wrap{position:relative;} .kl-nav-sub{ overflow:hidden;transition:max-height .26s var(--ease-out); display:flex;flex-direction:column;gap:1px; margin:1px 0 3px 18px;padding-left:10px; border-left:1px solid var(--rail-border); } .kl-nav-sub .kl-nav-item{padding:7px 10px;font-size:12.5px;} /* Las hojas hijas no llevan icono: solo texto */ .kl-rail .kl-nav-sub .th-ico,.kl-rail .kl-nav-sub .th-glyph{display:none;} .kl-nav-sub.flyout{ display:none;position:fixed;left:64px;top:8px; min-width:220px;max-height:calc(100vh - 16px);overflow-y:auto;margin:0;padding:6px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl); box-shadow:var(--sh-lg);z-index:60; } .kl-nav-grp-wrap.open>.kl-nav-sub.flyout{display:flex;} .kl-nav-sub.flyout .kl-nav-item{width:auto;height:auto;justify-content:flex-start;padding:7px 10px;font-size:13px;color:var(--text);} .kl-nav-sub.flyout .kl-nav-item .lbl{display:block;} .kl-nav-sub.flyout .kl-nav-item:hover{background:var(--surface-hover);color:var(--text-strong);} .kl-nav-sub.flyout .kl-nav-item.active{background:transparent;color:var(--accent);} .kl-nav-sub.flyout .kl-nav-item .badge-n{display:inline-block;} .kl-nav-sub.flyout .kl-nav-item .kl-nav-tag{display:inline-block;} .kl-nav-flyout-title{padding:6px 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);} /* Staff de plataforma: separador y eyebrow (el texto sigue en el DOM; oculto al plegar) */ .kl-nav-grp-wrap.superadmin{margin-top:10px;padding-top:8px;border-top:1px dashed var(--rail-border);} .kl-nav-sa-eyebrow{ display:flex;align-items:center;gap:5px;padding:1px 12px 5px; font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--warn);opacity:.9; } .kl-app[data-rail="collapsed"] .kl-nav-sa-eyebrow{display:none;} .kl-app[data-rail="collapsed"] .kl-nav-grp-wrap.superadmin{margin-top:6px;padding-top:6px;} .kl-rail-foot{border-top:1px solid var(--rail-border);padding:8px;} .kl-rail-toggle{ width:100%;display:flex;align-items:center;gap:8px; padding:6px 9px;border-radius:var(--r-lg); background:transparent;border:1px solid transparent; color:var(--rail-text-dim);font-size:11.5px;font-weight:500;cursor:pointer; transition:background .15s,color .15s; } .kl-rail-toggle:hover{background:var(--rail-hover);color:var(--rail-text);} .kl-app[data-rail="collapsed"] .kl-rail-toggle{width:40px;height:40px;margin:0 auto;padding:0;justify-content:center;} .kl-app[data-rail="collapsed"] .kl-rail-toggle .lbl{display:none;} .kl-avatar{ width:32px;height:32px;border-radius:var(--r-lg);display:grid;place-items:center; background:var(--accent-soft);color:var(--accent); font-size:12px;font-weight:600;flex-shrink:0;letter-spacing:.02em; } .kl-avatar.sm{width:24px;height:24px;font-size:10px;border-radius:var(--r-md);} .kl-avatar.lg{width:40px;height:40px;font-size:14px;border-radius:var(--r-xl);} /* ====================== MAIN + TOPBAR ====================== */ .kl-main{min-width:0;display:flex;flex-direction:column;} .kl-topbar{ position:sticky;top:0;z-index:30; background:var(--bg); border-bottom:1px solid var(--border); padding:0 24px;height:48px;display:flex;align-items:center;gap:14px; } .kl-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);flex-shrink:0;white-space:nowrap;} .kl-crumbs .sep{color:var(--text-subtle);} .kl-crumbs .now{color:var(--text-strong);font-weight:600;} .kl-tenant-wrap{position:relative;} .kl-crumb-tenant{ display:inline-flex;align-items:center;gap:6px;max-width:240px; padding:4px 8px;margin:0 -8px;border-radius:var(--r-md); background:transparent;border:none;color:var(--text-muted);font-size:13px;cursor:pointer; transition:background .14s,color .14s; } .kl-crumb-tenant .truncate{min-width:0;} .kl-crumb-tenant:hover{background:var(--surface-hover);color:var(--text-strong);} .kl-crumb-tenant.static{cursor:default;padding:0;margin:0;} .kl-crumb-tenant.static:hover{background:transparent;color:var(--text-muted);} .kl-crumb-tenant .chev{font-size:10px;color:var(--text-subtle);} .kl-tenant-wrap .tenant-switch-pop{left:0;right:auto;width:300px;top:calc(100% + 6px);} .kl-topbar-actions{margin-left:0;display:flex;align-items:center;gap:6px;flex-shrink:0;} .kl-topbar-link{ display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px; border-radius:var(--r-md);background:transparent;border:none; color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer; transition:background .14s,color .14s; } .kl-topbar-link:hover{background:var(--surface-hover);color:var(--text-strong);} .kl-topbar-link .n{ font-family:var(--font-mono);font-size:10.5px;font-weight:600;line-height:1.5; padding:0 6px;border-radius:var(--r-pill);background:var(--danger);color:var(--bg); } .kl-topbar-searchwrap{flex:1;display:flex;justify-content:center;padding:0 16px;min-width:0;} .kl-topbar-search{ position:relative;width:100%;max-width:360px;height:32px; display:flex;align-items:center;gap:0; padding:0 40px 0 12px; border-radius:var(--r-lg);border:1px solid var(--border); background:var(--surface-sunken);color:var(--text-muted);font-size:13px; cursor:text;text-align:left; transition:border-color .15s,background .15s; } .kl-topbar-search:hover{border-color:var(--border-strong);} .kl-topbar-search:focus-visible{border-color:var(--accent);outline:none;} .kl-topbar-search .ph{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-subtle);} .kl-topbar-search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;} @media(min-width:1920px){.kl-topbar-search{max-width:440px;}} /* ── Search Palette ── */ .sp-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:80px;} .sp-modal{width:100%;max-width:580px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 160px);} .sp-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--divider);} .sp-ico{flex-shrink:0;color:var(--text-muted);} .sp-input{flex:1;background:transparent;border:none;outline:none;font-size:15px;color:var(--text);font-family:inherit;} .sp-input::placeholder{color:var(--text-subtle);} .sp-spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:sp-rotate .6s linear infinite;flex-shrink:0;} @keyframes sp-rotate{to{transform:rotate(360deg)}} .sp-results{overflow-y:auto;padding:8px 0;} .sp-group{padding:0 8px 4px;} .sp-group-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px 4px;} .sp-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--text);font-size:13px;text-align:left;transition:background .1s;} .sp-item:hover,.sp-item.active{background:var(--surface-hover);} .sp-item-ico{flex-shrink:0;color:var(--text-muted);} .sp-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sp-badge{font-size:10px;padding:1px 6px;border-radius:5px;background:var(--surface-2);color:var(--text-muted);white-space:nowrap;flex-shrink:0;} .sp-badge.danger{background:var(--danger-soft,#fde8e8);color:var(--danger,#d0021b);} .sp-badge.muted{opacity:.7;} .sp-hint{padding:28px 16px;text-align:center;color:var(--text-muted);font-size:13px;} .sp-footer{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--divider);font-size:11px;color:var(--text-muted);} .sp-footer kbd{display:inline-block;padding:1px 5px;border:1px solid var(--border);border-radius:4px;font-size:10.5px;font-family:var(--font-mono);background:var(--surface-2);margin-right:3px;} /* lang */ .kl-lang{position:relative;} .kl-lang-btn{ display:flex;align-items:center;gap:6px;height:34px;padding:0 9px; border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer; transition:background .15s,border-color .15s; } .kl-lang-btn:hover,.kl-lang-btn.open{background:var(--surface-hover);border-color:var(--border);} .kl-lang-btn .flag{font-size:15px;line-height:1;} .kl-lang-btn .code{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--text-strong);} .kl-lang-btn .chev{color:var(--text-subtle);transition:transform .2s;} .kl-lang-btn.open .chev{transform:rotate(180deg);} .kl-lang-menu{ position:absolute;top:calc(100% + 8px);right:0;width:188px;z-index:60; background:var(--surface);border:1px solid var(--border);border-radius:13px; box-shadow:0 14px 40px -8px rgba(16,31,63,.28),0 2px 8px rgba(16,31,63,.08); padding:6px;animation:kl-pop .14s ease-out; } .kl-lang-item{ width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px; border:none;background:transparent;font-size:13px;color:var(--text);cursor:pointer;text-align:left; transition:background .12s; } .kl-lang-item .flag{font-size:16px;} .kl-lang-item .lbl{flex:1;} .kl-lang-item .tick{color:var(--accent);} .kl-lang-item:hover{background:var(--surface-hover);} .kl-lang-item.on{color:var(--text-strong);font-weight:600;} /* profile */ .kl-profile{position:relative;} .kl-profile-btn{ display:flex;align-items:center;gap:8px;max-width:200px; padding:3px 8px 3px 4px;border-radius:var(--r-md); background:transparent;border:1px solid transparent;cursor:pointer; transition:background .15s,border-color .15s; } .kl-profile-btn:hover,.kl-profile-btn.open{background:var(--surface-hover);border-color:var(--border);} .kl-profile-btn .who{line-height:1.2;min-width:0;text-align:left;} .kl-profile-btn .who .n{font-size:12.5px;font-weight:600;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;} .kl-profile-btn .who .m{font-size:10.5px;color:var(--text-muted);} .kl-profile-btn .chev{font-size:10px;color:var(--text-subtle);transition:transform .2s;flex-shrink:0;} .kl-profile-btn.open .chev{transform:rotate(180deg);} @media(max-width:1100px){.kl-profile-btn .who{display:none;}} .kl-profile-menu{ position:absolute;top:calc(100% + 8px);right:0;width:248px;z-index:60; background:var(--surface);border:1px solid var(--border);border-radius:13px; box-shadow:0 14px 40px -8px rgba(16,31,63,.28),0 2px 8px rgba(16,31,63,.08); padding:7px;animation:kl-pop .14s ease-out; } .kl-profile-card{display:flex;align-items:center;gap:11px;padding:8px 9px 10px;} .kl-profile-card .pm-n{font-size:13.5px;font-weight:650;color:var(--text-strong);} .kl-profile-card .pm-e{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;} .kl-profile-sep{height:1px;background:var(--divider);margin:4px 2px;} .kl-profile-card .pm-who{min-width:0;} .kl-profile-label{padding:6px 10px 2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);} .kl-lang-inline{display:flex;flex-direction:column;} .kl-profile-item{ width:100%;display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:9px;border:none;background:transparent; font-size:12.5px;font-weight:550;color:var(--text);cursor:pointer;text-align:left; transition:background .12s,color .12s; } .kl-profile-item:hover{background:var(--surface-hover);color:var(--text-strong);} .kl-profile-item svg{color:var(--text-muted);flex-shrink:0;} .kl-profile-item:hover svg{color:var(--accent);} .kl-profile-item.danger{color:var(--coral-600,#d6453a);} .kl-profile-item.danger svg{color:var(--coral-600,#d6453a);} .kl-profile-item.danger:hover{background:color-mix(in srgb,var(--coral-500,#e85544) 12%,transparent);color:var(--coral-600,#d6453a);} .kl-profile-item.danger:hover svg{color:var(--coral-600,#d6453a);} .kl-content{flex:1;min-width:0;padding:24px 26px 64px;} /* page header */ .kl-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;} .kl-page-head h1{font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--text-strong);} .kl-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500;} .kl-page-head .lede{margin-top:5px;font-size:13px;color:var(--text-muted);max-width:62ch;} .kl-page-head .actions{display:flex;gap:8px;flex-wrap:wrap;} /* ====================== BUTTONS ====================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:32px;padding:0 13px;border-radius:var(--r-lg); font-size:13px;font-weight:500;border:1px solid var(--border); background:transparent;color:var(--text);cursor:pointer;white-space:nowrap; transition:background .14s,border-color .14s,color .14s; } .btn:hover{background:var(--surface-2);border-color:var(--border-strong);} /* Estado deshabilitado: sin esta regla un .btn[disabled] se pintaba idéntico a uno activo → parecía pulsable pero el click era un no-op silencioso. Lo atenuamos y neutralizamos el hover; el `title` explica por qué. */ .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;} .btn:disabled:hover,.btn[disabled]:hover{background:transparent;border-color:var(--border);} .btn.accent,.btn.brand,.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:transparent;} .btn.accent:hover,.btn.brand:hover,.btn.primary:hover{background:var(--accent-hover);border-color:transparent;} .btn.accent:disabled:hover,.btn.brand:disabled:hover,.btn.primary:disabled:hover,.btn.accent[disabled]:hover,.btn.brand[disabled]:hover,.btn.primary[disabled]:hover{background:var(--accent);border-color:transparent;} .btn.ghost{background:transparent;border-color:transparent;} .btn.ghost:hover{background:var(--surface-2);} .btn.ghost:disabled:hover,.btn.ghost[disabled]:hover{background:transparent;border-color:transparent;} .btn.danger{color:var(--danger);background:transparent;border-color:var(--danger-soft);} .btn.danger:hover{background:var(--danger-soft);border-color:var(--danger-soft);} .btn.sm{min-height:26px;padding:0 10px;font-size:var(--fs-xs);} .btn.lg{min-height:38px;padding:0 18px;font-size:var(--fs-md);} .btn.block{width:100%;justify-content:center;} /* ── Iconos: solo en el rail (spec 2026-10-01 D7) ─────────────────────── */ .th-ico{display:none;} .kl-rail .th-ico,.th-icons-on .th-ico{display:inline-block;} .th-glyph{display:inline-block;font-size:1.05em;line-height:1;color:currentColor;min-width:.8em;text-align:center;} .kl-rail .th-glyph,.th-icons-on .th-glyph{display:none;} /* Parche hasta el barrido de PR3: un control cuyo UNICO contenido es un icono oculto (iconbtn de papelera, editar, copiar…) mostraria un hueco; enseña su `title` como texto de boton pequeño. (`data-iconly` lo marca app.jsx con window.vfIsIconOnly, que si ve los nodos de texto.) */ :is(button,a,[role=button])[data-iconly]::after{content:attr(title);font-size:13px;font-weight:500;line-height:1;color:var(--text-muted);white-space:nowrap;} :is(button,a,[role=button])[data-iconly]:hover::after{color:var(--text-strong);} .iconbtn[data-iconly]{width:auto;min-width:32px;padding:0 8px;} .ai-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ai-c,var(--text-muted));flex-shrink:0;} /* Contenedores que existian solo para alojar un icono */ .k-ico,.k-ico-lg,.ek-ico,.ph-icon,.op-banner-icon,.ep-cell-ico,.ep-action-ico,.inc-mini-ico,.list-ico{display:none;} /* Detección (eventos, informes de usuarios, incidentes, reglas de correlación) recupera los pictogramas (decisión de Ander, 2026-10-06): `.th-icons-on` en la raíz de esas páginas y de sus detalles revierte D7 SOLO ahí. El ámbito es de CUALQUIER pantalla que lo declare: el kit de listas (`dx-*` de ui.jsx) lo pone en todas sus raíces y `DxPage` lo pone en la de la pantalla (Políticas, Biblioteca, Notificaciones). Ver DESIGN.md → «Kit de listas». */ .th-icons-on :is(.list-ico,.inc-mini-ico,.op-banner-icon){display:grid;} .iconbtn{ width:32px;height:32px;display:inline-grid;place-items:center;border-radius:var(--r-sm); color:var(--text-muted);cursor:pointer;transition:background .14s,color .14s; } .iconbtn:hover{background:var(--surface-sunken);color:var(--text-strong);} .iconbtn.active{background:var(--accent-soft);color:var(--accent-strong);} .seg{display:inline-flex;gap:2px;padding:2px;background:var(--rail-bg);border:1px solid var(--border);border-radius:var(--r-lg);} .seg button{padding:5px 12px;border-radius:var(--r-md);font-size:12px;font-weight:500;color:var(--text-muted);transition:color .14s,background .14s;} .seg button:hover{color:var(--text-strong);} .seg button.on{background:var(--surface-2);color:var(--text-strong);} .seg button:disabled{opacity:.5;cursor:not-allowed;} .seg button:disabled:hover{color:var(--text-muted);} /* ====================== CARD ====================== */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:none;padding:var(--pad-card);position:relative;} .card.flat{box-shadow:none;} .card.raised{box-shadow:var(--sh-sm);} .card.pad-lg{padding:calc(var(--pad-card) + 6px);} .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;} .card-head h3{font-size:15px;font-weight:600;color:var(--text-strong);display:flex;align-items:center;gap:8px;} .card-head .sub{font-size:var(--fs-xs);color:var(--text-muted);} .card-head a:not(.btn),.card-head .link{font-size:13px;color:var(--accent);} .card-title-ico{color:var(--text-subtle);display:inline-grid;place-items:center;} /* ====================== BADGES ====================== */ .badge{ display:inline-flex;align-items:center;gap:5px;padding:2px 8px; font-size:11px;font-weight:500;border-radius:var(--r-sm);line-height:1.5; background:var(--surface-sunken);color:var(--text-muted);border:1px solid transparent; } .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;} .badge.accent{background:var(--accent-soft);color:var(--accent-strong);} .badge.brand{background:var(--accent-soft);color:var(--accent-strong);} .badge.danger{background:var(--danger-soft);color:var(--danger-fg);} .badge.warn{background:var(--warn-soft);color:var(--warn-fg);} .badge.ok{background:var(--ok-soft);color:var(--ok-fg);} .badge.info{background:var(--info-soft);color:var(--info-fg);} .badge.violet{background:var(--violet-soft);color:var(--violet);} .badge.outline{background:transparent;border-color:var(--border-strong);color:var(--text-muted);} .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green-500);animation:kl-pulse-live 2s infinite;flex-shrink:0;} .live-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;border-radius:var(--r-pill);background:var(--ok-soft);color:var(--ok-fg);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;} /* severity chip (new design) */ .sev{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:500;border-radius:var(--r-sm);} .sev-critical{background:var(--danger-soft);color:var(--danger-fg);} .sev-high{background:var(--warn-soft);color:var(--warn-fg);} .sev-medium{background:var(--info-soft);color:var(--info-fg);} .sev-low{background:var(--ok-soft);color:var(--ok-fg);} /* action pill (new design) */ .act{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;font-size:11px;font-weight:500;border-radius:var(--r-sm);} .act-block{background:var(--danger-soft);color:var(--danger-fg);} .act-warn{background:var(--warn-soft);color:var(--warn-fg);} .act-redact{background:var(--accent-soft);color:var(--accent-strong);} .act-allow,.act-log{background:var(--ok-soft);color:var(--ok-fg);} .act-confirm{background:var(--info-soft);color:var(--info-fg);} /* El chip de identidad de la IA: su NOMBRE, monocromo, pegado al de severidad. Un nombre no se confunde nunca; una inicial de color sí (ChatGPT, Claude y Copilot empiezan igual, y eso era justo la queja). */ .ai-chip{flex-shrink:0;padding:1px 6px;border-radius:var(--r-sm); background:var(--surface-sunken);border:1px solid var(--border); font-size:var(--fs-2xs);font-weight:600;color:var(--text-muted); white-space:nowrap;line-height:1.5;} [data-theme="dark"] .ai-chip{background:var(--surface-2);} /* ====================== TABLE ====================== */ .tablewrap{overflow-x:auto;margin:0 calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card));} /* Tarjeta sin relleno (style padding:0): la tabla ancha desplaza DENTRO de la tarjeta, sin márgenes negativos. */ .tablewrap.flush{margin:0;} table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-base);} .tbl thead th{ font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em; color:var(--text-subtle);text-align:left;padding:9px 14px;white-space:nowrap; background:var(--surface);border-bottom:1px solid var(--border); position:sticky;top:0; } .tbl thead th.right{text-align:right;} .tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;} .tbl tbody tr:last-child td{border-bottom:0;} .tbl tbody tr{transition:background .1s;} .tbl tbody tr.clickable,.tbl tbody tr.row-selectable{cursor:pointer;} .tbl tbody tr:hover{background:var(--surface-2);} .tbl td.right{text-align:right;} .tbl td.mono,.tbl .mono{font-family:var(--font-mono);font-size:12.5px;} .tbl .t-strong{color:var(--text-strong);font-weight:600;} .tbl .muted{color:var(--text-muted);} .tbl .nowrap{white-space:nowrap;} .tbl .truncate{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} tfoot td{padding:10px 14px;color:var(--text-muted);font-size:var(--fs-sm);border-top:1px solid var(--border);} .row-new{animation:kl-fade-up .45s var(--ease-out) both;} .row-flash{animation:kl-flash 1.2s var(--ease) both;} /* ====================== FILTER BAR ====================== */ .filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .filter{ display:inline-flex;align-items:center;gap:7px;padding:7px 11px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm); font-size:12.5px;cursor:pointer;transition:all .14s;user-select:none; } .filter:hover{border-color:var(--gray-400);background:var(--surface-hover);} .filter.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);} .filter .lbl{color:var(--text-muted);} .filter.active .lbl{color:var(--accent-strong);} .filter .val{font-weight:600;color:var(--text-strong);} .filter.active .val{color:var(--accent-strong);} .searchbox{ display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:360px; padding:7px 12px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-lg); transition:border-color .14s,box-shadow .14s; } .searchbox:focus-within{border-color:var(--accent);box-shadow:var(--focus);} .searchbox input{border:0;outline:0;flex:1;background:transparent;font-size:12.5px;} .searchbox .ico{color:var(--text-subtle);flex-shrink:0;} .select,.kl-select{ appearance:none;padding:7px 30px 7px 11px;border:1px solid var(--border-strong); border-radius:var(--r-sm);background:var(--surface);font-size:12.5px;color:var(--text);cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397a0b2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 9px center; transition:border-color .14s; } .select:focus,.kl-select:focus{border-color:var(--accent);box-shadow:var(--focus);outline:none;} /* ====================== OPERATION BANNER ====================== */ .op-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-left:3px solid var(--amber-400,#fbbf24);background:var(--amber-50,#fffbeb);} [data-theme="dark"] .op-banner{background:#2a1f08;border-left-color:var(--amber-500,#f59e0b);} /* ====================== KPI ====================== */ .kpi{ background:transparent;border:0;border-radius:0; padding:0 0 22px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden; } .kpi .k-top{display:flex;align-items:center;gap:8px;} .kpi .k-ico{width:28px;height:28px;border-radius:8px;display:none;place-items:center;background:var(--accent-soft);color:var(--accent-strong);flex-shrink:0;} .kpi .k-label{font-size:12px;font-weight:500;color:var(--text-muted);line-height:1.25;display:inline-flex;align-items:center;gap:6px;} .kpi.crit .k-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--danger);flex-shrink:0;} .kpi .k-value{font-size:32px;font-weight:600;color:var(--text-strong)!important;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.02em;} .kpi .k-foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);} .kpi .delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-variant-numeric:tabular-nums;} .kpi .delta.up{color:var(--green-600);} .kpi .delta.down{color:var(--coral-600);} .kpi .delta.flat{color:var(--text-muted);} /* Tendencia como gráfico de FONDO: ocupa la mitad inferior de la tarjeta y queda DETRÁS del contenido (z-index). El degradado se desvanece hacia abajo, así el valor (parte superior) permanece legible. */ .kpi .k-spark{position:absolute;left:0;right:0;bottom:0;height:62px;opacity:.5;pointer-events:none;z-index:0;} .kpi .k-top,.kpi .k-value,.kpi .k-foot{position:relative;z-index:1;} .kpi .k-rail{display:none;} .kpi .k-spark{height:40px;opacity:.45;} /* progress bar (new .bar + compat .progress) */ .bar{height:4px;background:var(--surface-sunken);border-radius:2px;overflow:hidden;} .bar>span{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width 1s var(--ease-out);} .bar.brand>span{background:var(--navy-700);} .bar.danger>span{background:var(--coral-500);} .bar.warn>span{background:var(--amber-500);} .bar.ok>span{background:var(--green-500);} /* ====================== DRAWER (new kl-drawer) ====================== */ .kl-backdrop{position:fixed;inset:0;background:rgba(7,13,26,.5);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s;} .kl-backdrop.open{opacity:1;pointer-events:auto;} .kl-drawer{ position:fixed;top:0;right:0;height:100vh;width:560px;max-width:100vw; background:var(--surface);border-left:1px solid var(--border);z-index:70; transform:translateX(100%);transition:transform .3s var(--ease-out); display:flex;flex-direction:column;box-shadow:var(--sh-xl); } .kl-drawer.open{transform:none;} .kl-drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;} .kl-drawer-body{padding:20px 22px;overflow-y:auto;flex:1;} .kl-drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;} /* ====================== KPI MODAL (centrado) ====================== */ .kl-kpi-modal-bd{position:fixed;inset:0;background:rgba(7,13,26,.55);backdrop-filter:blur(5px);z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;} .kl-kpi-modal{background:var(--surface);border-radius:18px;border:1px solid var(--border);box-shadow:0 24px 64px rgba(7,13,26,.32),0 0 0 1px rgba(123,54,255,.08);width:100%;max-width:600px;max-height:88vh;display:flex;flex-direction:column;animation:kl-modal-in .22s var(--ease-out) both;} @keyframes kl-modal-in{from{opacity:0;transform:scale(.96) translateY(10px);}to{opacity:1;transform:none;}} .kl-kpi-modal-head{padding:22px 26px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;} .kl-kpi-modal-head .k-ico-lg{width:38px;height:38px;border-radius:11px;display:none;place-items:center;background:var(--accent-soft);color:var(--accent);flex-shrink:0;} .kl-kpi-modal-body{padding:22px 26px;overflow-y:auto;flex:1;} .kl-kpi-modal-val{font-size:var(--fs-5xl);font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1;} .kl-kpi-modal-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:var(--fs-sm);} /* ====================== EMPTY / LOADING ====================== */ .empty{text-align:center;padding:40px 20px;color:var(--text-muted);} .empty .ico{display:none;} .skel{background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--surface-hover) 50%,var(--surface-sunken) 75%);background-size:200% 100%;animation:kl-shimmer 1.4s infinite;border-radius:var(--r-sm);} .spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:kl-spin .7s linear infinite;} .kbd{font-family:var(--font-mono);font-size:11px;padding:1px 6px;background:var(--surface-sunken);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;color:var(--text-muted);} .metaline{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-muted);} .metaline .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-subtle);} .sdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;} .sdot.on{background:var(--green-500);box-shadow:0 0 0 3px rgba(27,181,111,.18);} .sdot.idle{background:var(--amber-500);} .sdot.off{background:var(--gray-400);} .sdot.crit{background:var(--coral-500);box-shadow:0 0 0 3px rgba(232,85,68,.18);} .sec-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:9px;} /* ============================================================ LEGACY PAGE COMPONENTS (used by existing pages-*.jsx) ============================================================ */ /* Stats card */ .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;} .stat .label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;} .stat .value{font-size:26px;font-weight:600;letter-spacing:-0.01em;color:var(--text-strong);font-variant-numeric:tabular-nums;} .stat .delta{font-size:var(--text-xs);display:flex;align-items:center;gap:4px;} .stat .delta.up{color:var(--green-600);} .stat .delta.down{color:var(--coral-600);} .stat .delta.neutral{color:var(--text-muted);} .stat .spark{position:absolute;right:12px;bottom:10px;opacity:.9;pointer-events:none;} /* Severity chip (old) */ .chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:500;border-radius:var(--r-sm);} .chip-critical{background:var(--danger-soft);color:var(--danger-fg);} .chip-high{background:var(--warn-soft);color:var(--warn-fg);} .chip-medium{background:var(--info-soft);color:var(--info-fg);} .chip-low{background:var(--ok-soft);color:var(--ok-fg);} /* Action pill (old) */ .action-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;font-size:11px;font-weight:500;border-radius:var(--r-sm);} .action-block{background:var(--danger-soft);color:var(--danger-fg);} .action-warn{background:var(--warn-soft);color:var(--warn-fg);} .action-log,.action-allow{background:var(--ok-soft);color:var(--ok-fg);} .action-confirm,.action-redact,.action-redirect{background:var(--accent-soft);color:var(--accent-strong);} .action-continue{background:var(--info-soft);color:var(--info-fg);} /* Op chips */ .op-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;font-size:11px;font-weight:500;border-radius:var(--r-sm);} .op-chip-coverage{background:var(--warn-soft);color:var(--warn-fg);} .op-chip-shadow{background:var(--danger-soft);color:var(--danger-fg);} .op-chip-lifecycle{background:var(--info-soft);color:var(--info-fg);} .op-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:var(--text-sm);} .op-banner-coverage{background:#fef6ec;border:1px solid #f0c896;color:#8a4d0c;} .op-banner-shadow{background:#fdf0ee;border:1px solid #f4b3a8;color:#93291d;} .op-banner-lifecycle{background:#eef4fe;border:1px solid #b3cdf4;color:#1e40af;} [data-theme="dark"] .op-banner-coverage{background:#271c0e;border-color:#5c4318;color:#fcd34d;} [data-theme="dark"] .op-banner-shadow{background:#2a1513;border-color:#5e2723;color:#fca5a5;} [data-theme="dark"] .op-banner-lifecycle{background:#131d33;border-color:#27395e;color:#93c5fd;} .op-banner-icon{flex-shrink:0;display:none;place-items:center;} .op-banner-body{flex:1;line-height:1.45;} .op-banner-body strong{font-weight:700;} /* Drawer (old .drawer for ui.jsx Drawer component) */ .drawer-backdrop{position:fixed;inset:0;background:rgba(8,12,24,0.45);backdrop-filter:blur(2px);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;} .drawer-backdrop.open{opacity:1;pointer-events:auto;} /* Movimiento: transición (interrumpible: cerrar a mitad de la entrada vuelve desde donde está), curva de cajón tipo iOS al entrar y salida más corta. @starting-style anima también los cajones que se montan ya abiertos (`{open && }`), que antes aparecían de golpe. */ .drawer{position:fixed;top:0;right:0;height:100vh;width:520px;max-width:100vw;background:var(--surface);border-left:1px solid var(--border);z-index:60;transform:translateX(100%);transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--sh-lg);outline:none;} .drawer.open{transform:translateX(0);transition:transform .3s cubic-bezier(.32,.72,0,1);} @starting-style{.drawer.open{transform:translateX(100%);}.drawer-backdrop.open{opacity:0;}} @media (prefers-reduced-motion:reduce){ .drawer{transform:none;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s;} .drawer.open{transform:none;opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s;} @starting-style{.drawer.open{transform:none;opacity:0;}} } .drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;} .drawer-head.has-head{align-items:flex-start;} .drawer-head-rich{flex:1;min-width:0;} .drawer-head h2{margin:0;font-size:var(--text-lg);font-weight:600;color:var(--text-strong);flex:1;} .drawer-body{padding:18px 22px;overflow-y:auto;flex:1;} .drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;} /* Misc */ .spread{display:flex;align-items:center;justify-content:space-between;gap:12px;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .dot-status{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;} .dot-status.active{background:var(--green-500);box-shadow:0 0 0 3px rgba(22,165,101,0.18);} .dot-status.idle{background:var(--amber-500);} .dot-status.offline{background:var(--gray-400);} .dot-status.outdated{background:var(--violet-500);} .dot-status.unenrolled{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-subtle);} /* Charts */ .barchart{display:flex;align-items:stretch;gap:2px;height:130px;} .barchart .bar{flex:1;min-width:0;height:100%;border-radius:2px 2px 0 0;transition:opacity .15s;position:relative;} .barchart .bar:hover{opacity:0.8;} .heat{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;} .heat .cell{aspect-ratio:1.4;border-radius:2px;background:var(--surface-sunken);} .progress{height:6px;background:var(--surface-sunken);border-radius:999px;overflow:hidden;} .progress>span{display:block;height:100%;background:var(--accent);border-radius:999px;} .progress.brand>span{background:var(--brand);} .progress.danger>span{background:var(--coral-500);} .progress.warn>span{background:var(--amber-500);} .progress.ok>span{background:var(--green-500);} /* Input/field */ .field{display:flex;flex-direction:column;gap:4px;} .field-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;} /* Texto de ayuda. `.hint` era la utilidad MÁS usada de la consola (73 elementos) y no tenía ni una regla: 32 de ellos se renderizaban como texto normal, sin distinguirse del contenido. `.field-hint` es su variante bajo un campo, hermana de .field-label/.input. (20-09-2026.) */ .hint{font-size:12px;color:var(--text-muted);line-height:1.45;} .field-hint{font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:6px;} /* Fila de casilla con título y explicación (Restricciones de subida, etc.). */ .check-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin-bottom:14px;} .check-row > input[type="checkbox"]{margin-top:2px;} .check-row-hint{display:block;font-size:12px;color:var(--text-muted);line-height:1.45;} /* Aviso en línea dentro de formularios y diálogos. Sin esto, un error de validación salía como texto negro corriente, indistinguible del resto. */ .alert{padding:9px 11px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.45;} .alert.error{background:var(--danger-soft);color:var(--danger-fg);} .alert.warn{background:var(--warn-soft);color:var(--warn-fg);} .alert.ok{background:var(--ok-soft);color:var(--ok-fg);} .alert.info{background:var(--info-soft);color:var(--info-fg);} /* Contenido redactado por IA: cuadro propio con filo de acento, para que no se confunda con texto escrito por una persona ni con un aviso de estado. */ .alert.ai{display:flex;align-items:flex-start;gap:8px;background:var(--accent-soft);color:var(--accent-strong);border-left:3px solid var(--accent);} .alert.ai > svg{flex:none;margin-top:2px;} /* Aviso suelto entre bloques de página (alarma de deriva de release): deja el hueco de 14px que el resto de tarjetas de la consola ponen con marginBottom. */ .alert.spaced{margin-bottom:14px;} .input{padding:8px 12px;border-radius:var(--r-lg);border:1px solid var(--border);font-size:var(--text-base);background:var(--surface-sunken);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;width:100%;} /* Controles nativos con el acento de la consola (casillas y radios no salen en azul del navegador). */ input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);} /* select.input / select.fe-ctl: flecha propia por tokens (sin icono ni data-URI); el nativo se oculta. */ select.input,select.fe-ctl{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;} /* Lista desplegable nativa de TODO