/* ============================================================
   FENLORA ULTRA ADMIN — sistema visual de centro de mando
   Base oscura, acentos tecnológicos, superficies de profundidad.
   Tema configurable mediante CSS variables + data attributes.
   ============================================================ */

:root{
  --bg-0:#050a12;
  --bg-1:#071120;
  --bg-2:#0a1728;
  --surface:rgba(12,26,45,.72);
  --surface-2:rgba(9,20,36,.9);
  --surface-3:rgba(16,34,58,.6);
  --line:rgba(90,170,220,.18);
  --line-strong:rgba(110,200,240,.36);
  --text:#e9f4fb;
  --text-2:#9fbdd2;
  --text-3:#6f92ab;
  --accent:#22d3ee; --accent-rgb:34,211,238;
  --accent-2:#3b82f6;
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#f87171;
  --info:#60a5fa;
  --crit:#fb5b5b;
  --glow:0 0 22px rgba(var(--accent-rgb),.28);
  --radius:14px;
  --radius-sm:9px;
  --gap:16px;
  --pad-card:16px;
  --shadow:0 12px 34px rgba(0,0,0,.45);
  --grid-min:270px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --scan:0.035;
}

[data-theme="light"]{
  --bg-0:#eef4fa; --bg-1:#f7fbff; --bg-2:#ffffff;
  --surface:rgba(255,255,255,.86); --surface-2:rgba(240,248,255,.95); --surface-3:rgba(226,240,252,.9);
  --line:rgba(20,90,140,.16); --line-strong:rgba(15,110,170,.4);
  --text:#08243a; --text-2:#31607d; --text-3:#5b86a2;
  --shadow:0 12px 30px rgba(20,70,110,.13);
}
[data-compact="on"]{ --gap:10px; --pad-card:11px; --radius:10px; }
[data-accent="blue"]{ --accent:#60a5fa; --accent-2:#2563eb; --accent-rgb:96,165,250; }
[data-accent="violet"]{ --accent:#a78bfa; --accent-2:#7c3aed; --accent-rgb:167,139,250; }
[data-accent="emerald"]{ --accent:#34d399; --accent-2:#0d9488; --accent-rgb:52,211,153; }
[data-accent="amber"]{ --accent:#fbbf24; --accent-2:#f59e0b; --accent-rgb:251,191,36; }
[data-glow="off"]{ --glow:none; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(var(--accent-rgb),.13), transparent 62%),
    radial-gradient(900px 600px at 8% 100%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 45%,var(--bg-0));
  background-attachment:fixed;
  font-size:14.5px; line-height:1.45; overflow:hidden;
}
body::before{
  /* rejilla técnica sutil del centro de mando */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(90,180,220,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,180,220,.055) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%,#000 10%,transparent 78%);
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(90,180,220,.28);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:.2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- banner de honestidad ---------- */
#honesty-banner{
  position:relative;z-index:5;display:flex;gap:12px;align-items:center;
  padding:8px 14px;background:linear-gradient(90deg,rgba(251,191,36,.16),rgba(var(--accent-rgb),.08));
  border-bottom:1px solid rgba(251,191,36,.34);font-size:12.6px;color:var(--text);
}
#honesty-banner .hb-icon{color:var(--warn);font-size:16px}
#honesty-banner b{color:var(--warn)}
#honesty-banner button{
  margin-left:auto;background:transparent;border:1px solid var(--line-strong);
  border-radius:8px;padding:3px 10px;cursor:pointer;font-size:12px}
.tag-sim,.tag-pend,.tag-real,.tag-demo,.tag-live{
  font-size:10.4px;font-weight:700;letter-spacing:.6px;padding:1.5px 6px;border-radius:5px;
  border:1px solid;white-space:nowrap;font-family:var(--mono)}
.tag-sim{color:#fcd34d;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.tag-pend{color:#a5b4fc;border-color:rgba(129,140,248,.45);background:rgba(129,140,248,.1)}
.tag-real{color:#6ee7b7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.1)}
.tag-demo{color:#7dd3fc;border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.1)}
.tag-live{color:#f9a8d4;border-color:rgba(244,114,182,.45);background:rgba(244,114,182,.1)}

/* ---------- layout ---------- */
.app{
  position:relative;z-index:1;height:calc(100vh - 42px);display:grid;
  grid-template-columns:262px 1fr;grid-template-rows:58px 1fr;
  grid-template-areas:"top top" "side main";
}
body.banner-hidden .app{height:100vh}
body.banner-hidden #honesty-banner{display:none}

/* ---------- topbar ---------- */
.topbar{
  grid-area:top;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:linear-gradient(180deg,rgba(10,22,38,.94),rgba(8,17,30,.8));
  border-bottom:1px solid var(--line);backdrop-filter:blur(12px);
}
.menu-toggle{display:none}
.tb-btn{width:32px;height:32px;flex:none;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;color:var(--text-2);font-size:15px;cursor:pointer;transition:.16s}
.tb-btn:hover{border-color:var(--line-strong);color:var(--text);background:rgba(var(--accent-rgb),.12)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:30px;height:30px;color:var(--accent);filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.5))}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden}
.brand-name{font-weight:700;font-size:13.4px;letter-spacing:1.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16ch}
.brand-sub{font-size:10.2px;color:var(--text-3);letter-spacing:.6px;font-family:var(--mono)}
.global-search{
  flex:1;max-width:520px;display:flex;align-items:center;gap:8px;margin-left:8px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:7px 11px;cursor:text;color:var(--text-3);text-align:left;transition:.2s}
.global-search:hover{border-color:var(--line-strong);box-shadow:var(--glow)}
.global-search kbd{margin-left:auto}
kbd{font-family:var(--mono);font-size:10px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--text-2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.unit-switch{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px}
.us-btn{background:transparent;border:0;padding:4px 10px;border-radius:7px;cursor:pointer;
  font-size:11.8px;color:var(--text-3);letter-spacing:.3px;transition:.18s}
.us-btn.is-active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.08));
  color:#bdf3ff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4)}
.tb-status{display:flex;align-items:center;gap:6px;font-size:11.4px;color:var(--text-3);
  border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--surface-2)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot-warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dot-err{background:var(--err);box-shadow:0 0 8px var(--err)}
.dot-idle{background:var(--text-3)}
.dot-run{background:var(--accent);box-shadow:0 0 9px var(--accent);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.tb-icon{position:relative;width:32px;height:32px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:.18s;font-size:14px}
.tb-icon:hover{border-color:var(--line-strong);color:#c9f5ff}
.badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:9px;
  font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.badge-crit{background:var(--crit);color:#fff;box-shadow:0 0 9px rgba(251,91,91,.7)}
.badge-acc{background:var(--accent);color:#04202a}
.tb-jarvis{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.05));
  border:1px solid rgba(var(--accent-rgb),.45);border-radius:10px;padding:5px 12px;cursor:pointer;
  font-weight:650;font-size:12.4px;letter-spacing:.7px;color:#c9f5ff;transition:.2s}
.tb-jarvis:hover{box-shadow:var(--glow);transform:translateY(-1px)}
.j-orb{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff,var(--accent) 60%,#0891b2);
  box-shadow:0 0 12px var(--accent);animation:orbPulse 2.6s infinite}
@keyframes orbPulse{50%{transform:scale(.78);opacity:.72}}
.tb-clock{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.clock-date{font-size:10px;color:var(--text-3)}
.tb-user{display:flex;align-items:center;gap:8px;background:transparent;border:0;cursor:pointer;padding:2px}
.avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11.6px;font-weight:700;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#03202c}
.user-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.user-meta b{font-size:11.8px}.user-meta small{font-size:10px;color:var(--text-3)}

/* ---------- sidebar ---------- */
.sidebar{grid-area:side;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,rgba(8,18,32,.92),rgba(6,14,26,.86));
  border-right:1px solid var(--line);backdrop-filter:blur(10px)}
.side-search{padding:10px 10px 6px}
.side-search input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;color:var(--text);font-size:12.4px}
.side-scroll{flex:1;overflow-y:auto;padding:4px 8px 10px;scrollbar-width:thin}
.nav-group{margin-top:12px}
.nav-group-title{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-3);
  padding:4px 8px;display:flex;align-items:center;gap:6px}
.nav-group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;
  border-radius:9px;padding:7px 9px;cursor:pointer;text-align:left;font-size:12.9px;color:var(--text-2);
  transition:.15s;position:relative}
.nav-item:hover{background:rgba(var(--accent-rgb),.08);color:var(--text)}
.nav-item.is-active{background:linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.02));color:#d6f9ff}
.nav-item.is-active::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:2.5px;
  border-radius:3px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.nav-item .ni-ico{width:18px;text-align:center;opacity:.85;font-size:13px}
.nav-item .ni-count{margin-left:auto;font-size:10.4px;font-family:var(--mono);color:var(--text-3)}
.nav-item .ni-alert{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--crit);
  box-shadow:0 0 7px var(--crit)}
.side-foot{border-top:1px solid var(--line);padding:8px 10px}
.chip{font-size:11px;border:1px solid var(--line-strong);border-radius:20px;padding:2px 9px;
  background:rgba(var(--accent-rgb),.07);color:var(--text-2);cursor:pointer}
.chip:hover{color:#d6f9ff;background:rgba(var(--accent-rgb),.16)}
.chip.is-active{color:#04101d;background:var(--accent);border-color:var(--accent);font-weight:600}
.role-note{font-size:10.4px;color:var(--text-3)}

/* ---------- main ---------- */
.main{grid-area:main;overflow-y:auto;padding:16px 20px 60px;min-width:0}
.view-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.view-head h1{font-size:21px;letter-spacing:.6px}
.view-head p{margin:2px 0 0;color:var(--text-2);font-size:12.8px}
.view-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:7px 13px;cursor:pointer;font-size:12.6px;color:var(--text);transition:.17s}
.btn:hover{border-color:var(--line-strong);box-shadow:var(--glow);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--accent),#0ea5b7);color:#03222c;border-color:transparent;font-weight:650}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(251,91,91,.5);color:#ffd7d7;background:rgba(251,91,91,.1)}
.btn.small{padding:4px 9px;font-size:11.6px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- grid / cards ---------- */
.grid{display:grid;gap:var(--gap)}
.g-kpi{grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g-side{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
@media (max-width:1180px){.g-side{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad-card);backdrop-filter:blur(9px);box-shadow:var(--shadow);position:relative;min-width:0}
.card.glow{border-color:rgba(var(--accent-rgb),.34);box-shadow:var(--shadow),0 0 26px rgba(var(--accent-rgb),.1)}
.card-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.card-head h3{font-size:13.6px;letter-spacing:.4px}
.card-head .sub{font-size:11px;color:var(--text-3)}
.card-head .right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.section-title{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:12.4px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--text-2)}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.section-title .st-tag{font-size:10px;color:var(--text-3);letter-spacing:.4px;text-transform:none}

/* KPI */
.kpi{overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 60%,rgba(var(--accent-rgb),.06));pointer-events:none}
.kpi .k-label{font-size:11.6px;color:var(--text-2);letter-spacing:.4px;display:flex;gap:6px;align-items:center}
.kpi .k-value{font-size:27px;font-weight:700;font-family:var(--mono);letter-spacing:-.5px;margin:5px 0 2px}
.kpi .k-foot{display:flex;align-items:center;gap:8px;font-size:10.8px;color:var(--text-3);flex-wrap:wrap}
.trend{font-family:var(--mono);font-weight:650;font-size:11.4px}
.trend.up{color:var(--ok)}.trend.down{color:var(--err)}.trend.flat{color:var(--text-3)}
.spark{width:100%;height:26px;margin-top:6px}
.kpi.is-empty .k-value{color:var(--text-3);font-size:19px}
.src{font-size:10.2px;font-family:var(--mono);color:var(--text-3);border:1px dashed var(--line-strong);
  border-radius:6px;padding:1px 6px}

/* tablas */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
table.dt{width:100%;border-collapse:collapse;font-size:12.4px;min-width:640px}
table.dt th{text-align:left;font-size:10.6px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);
  background:rgba(255,255,255,.035);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dt td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt tr:hover td{background:rgba(var(--accent-rgb),.05)}
table.dt td.num{font-family:var(--mono);text-align:right}
.muted{color:var(--text-3)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:20px;
  padding:2px 9px;border:1px solid;white-space:nowrap}
.p-ok{color:#6ee7b7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.p-warn{color:#fcd34d;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12)}
.p-err{color:#fca5a5;border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.13)}
.p-info{color:#93c5fd;border-color:rgba(96,165,250,.45);background:rgba(96,165,250,.12)}
.p-idle{color:var(--text-2);border-color:var(--line);background:rgba(255,255,255,.04)}
.p-violet{color:#c4b5fd;border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.13)}
.p-pink{color:#f9a8d4;border-color:rgba(244,114,182,.45);background:rgba(244,114,182,.12)}

/* filtros */
.filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.filters label{font-size:10.6px;letter-spacing:1px;color:var(--text-3);text-transform:uppercase;display:block;margin-bottom:2px}
select,input[type="text"],input[type="search"],input[type="number"],input[type="date"],textarea{
  background:rgba(5,14,26,.7);border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:6px 9px;font-size:12.3px;font-family:inherit}
textarea{resize:vertical;min-height:64px}
select:focus,input:focus,textarea:focus{border-color:var(--line-strong);outline:none}
[data-theme="light"] select,[data-theme="light"] input,[data-theme="light"] textarea{background:rgba(255,255,255,.8)}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.2px;color:var(--text-2)}
.switch input{appearance:none;width:38px;height:20px;border-radius:12px;background:rgba(255,255,255,.13);
  border:1px solid var(--line);position:relative;cursor:pointer;transition:.2s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-3);transition:.2s}
.switch input:checked{background:rgba(var(--accent-rgb),.3);border-color:var(--accent)}
.switch input:checked::after{left:19px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.bar-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.2px;color:var(--text-2);margin-top:8px}
.bar-legend span{display:flex;align-items:center;gap:5px}
.sq{width:9px;height:9px;border-radius:3px;display:inline-block}

/* semáforo financiero */
.traffic{display:flex;height:9px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.07);margin-top:6px}
.traffic i{display:block;height:100%}
.t-green{background:var(--ok)}.t-yellow{background:var(--warn)}.t-orange{background:#fb923c}
.t-red{background:var(--err)}.t-gray{background:#64748b}

/* tabs */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.tab{background:transparent;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;
  padding:6px 12px;cursor:pointer;font-size:12.2px;color:var(--text-3)}
.tab:hover{color:var(--text)}
.tab.is-active{color:#d6f9ff;background:var(--surface);border-color:var(--line-strong);border-bottom:2px solid var(--accent)}
.tab .n{font-family:var(--mono);font-size:10.4px;color:var(--text-3);margin-left:5px}

/* progreso / steps */
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:10px;align-items:flex-start;padding:7px 9px;border-radius:8px;font-size:12.3px}
.step:hover{background:rgba(var(--accent-rgb),.05)}
.step .s-ico{width:18px;text-align:center;font-size:12px;flex:none;margin-top:1px}
.s-ok .s-ico{color:var(--ok)}.s-fail .s-ico{color:var(--err)}.s-na .s-ico{color:var(--text-3)}
.s-run .s-ico{color:var(--accent)}
.step .s-time{margin-left:auto;font-family:var(--mono);font-size:10.6px;color:var(--text-3);flex:none}
.progress{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .4s}
.meter{display:flex;align-items:center;gap:8px;font-size:11.6px}
.meter .m-bar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;min-width:60px}
.meter .m-bar i{display:block;height:100%;background:var(--accent)}
.meter.warn .m-bar i{background:var(--warn)}.meter.err .m-bar i{background:var(--err)}.meter.ok .m-bar i{background:var(--ok)}

/* estados vacíos */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:26px 14px;color:var(--text-3);text-align:center;border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);background:rgba(255,255,255,.02);font-size:12.2px}
.empty .e-ico{font-size:22px;opacity:.55}
.callout{border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.07);border-radius:0 10px 10px 0;
  padding:10px 13px;font-size:12.4px;color:var(--text-2)}
.callout.warn{border-color:var(--warn);background:rgba(251,191,36,.09)}
.callout.err{border-color:var(--err);background:rgba(248,113,113,.1)}
.callout.ok{border-color:var(--ok);background:rgba(52,211,153,.09)}
.callout b{color:var(--text)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:5px 12px;font-size:12.3px}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;color:var(--text)}
@media(max-width:640px){.kv{grid-template-columns:1fr}.kv dt{color:var(--text-3);font-size:11px;margin-top:5px}}

/* lista */
.list{display:flex;flex-direction:column;gap:8px}
.li{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);font-size:12.4px}
.li:hover{border-color:var(--line-strong)}
.li .li-ico{font-size:14px;flex:none;width:20px;text-align:center}
.li .li-main{min-width:0;flex:1}
.li .li-title{font-weight:600;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.li .li-meta{font-size:11px;color:var(--text-3);margin-top:2px}
.li .li-right{margin-left:auto;text-align:right;flex:none}
.li.crit{border-color:rgba(251,91,91,.45);background:linear-gradient(90deg,rgba(251,91,91,.12),var(--surface-2))}
.li.warn{border-color:rgba(251,191,36,.4);background:linear-gradient(90deg,rgba(251,191,36,.08),var(--surface-2))}

/* mini cards de servicio */
.svc{display:flex;flex-direction:column;gap:8px;min-height:158px}
.svc .svc-top{display:flex;align-items:center;gap:9px}
.svc .svc-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.28),rgba(59,130,246,.16));border:1px solid var(--line-strong)}
.svc h4{font-size:13.2px}
.svc .svc-cat{font-size:10.6px;color:var(--text-3);letter-spacing:.6px}
.svc .svc-dims{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:10.8px;color:var(--text-3)}
.svc .svc-foot{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.dim{display:flex;align-items:center;gap:5px}

/* barras horizontales */
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:150px 1fr 74px;gap:9px;align-items:center;font-size:11.8px}
.bar-row .b-track{height:8px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.bar-row .b-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.bar-row .b-val{text-align:right;font-family:var(--mono);color:var(--text-2)}
@media(max-width:560px){.bar-row{grid-template-columns:100px 1fr 60px}}

/* pipeline kanban */
.kan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}
.kan-col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px;min-width:0}
.kan-col h5{font-size:11.4px;letter-spacing:1px;text-transform:uppercase;color:var(--text-2);display:flex;gap:6px;align-items:center}
.kan-col h5 .n{margin-left:auto;font-family:var(--mono);color:var(--text-3)}
.kan-item{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px;margin-top:8px;font-size:12px}
.kan-item .ki-top{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.kan-item .ki-meta{color:var(--text-3);font-size:10.8px;margin-top:4px;display:flex;gap:6px;flex-wrap:wrap}
.kan-col-head{font-size:11px;color:var(--text-3);margin-top:6px;font-family:var(--mono)}

/* calendario */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .cal-h{font-size:10px;letter-spacing:1px;color:var(--text-3);text-align:center;text-transform:uppercase}
.cal .cal-d{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:5px;font-size:10.6px;
  background:rgba(255,255,255,.02);overflow:hidden}
.cal .cal-d .dnum{color:var(--text-3);font-family:var(--mono);font-size:10px}
.cal .cal-ev{margin-top:3px;border-radius:5px;padding:2px 5px;font-size:10px;border-left:2px solid var(--accent);
  background:rgba(var(--accent-rgb),.09);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .cal-ev.w{border-color:var(--warn);background:rgba(251,191,36,.1)}
.cal .cal-ev.e{border-color:var(--err);background:rgba(248,113,113,.1)}
.cal .cal-ev.g{border-color:var(--ok);background:rgba(52,211,153,.1)}

/* gralelas de estado / matriz */
.matrix{width:100%;border-collapse:collapse;font-size:11.6px}
.matrix th,.matrix td{border:1px solid var(--line);padding:6px 8px;text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left;position:sticky;left:0;background:var(--surface-2)}
.matrix .y{color:var(--ok)}.matrix .n{color:var(--text-3)}.matrix .x{color:var(--err)}

/* flujo automatización */
.flow{display:flex;gap:9px;align-items:stretch;overflow-x:auto;padding:4px 2px 10px}
.node{min-width:170px;border:1px solid var(--line-strong);border-radius:11px;padding:9px 10px;background:var(--surface-2);
  font-size:11.8px;position:relative;flex:none}
.node .nt{font-size:9.8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.node b{display:block;margin:3px 0 2px;font-size:12.4px}
.node small{color:var(--text-3);font-size:10.6px}
.node.trigger{border-color:rgba(96,165,250,.55)}
.node.cond{border-color:rgba(251,191,36,.5)}
.node.action{border-color:rgba(52,211,153,.5)}
.node.approve{border-color:rgba(244,114,182,.5)}
.arrow{align-self:center;color:var(--text-3);font-size:15px;flex:none}

/* ====== NÚCLEO HOLOGRÁFICO ======
   El color y la velocidad del núcleo salen del estado real del proceso:
   --core (severidad/fase) y --spd (velocidad de las capas orbitales). */
.core-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.core-holo{position:relative;width:min(420px,88vw);aspect-ratio:1;display:grid;place-items:center;
  isolation:isolate;--core:var(--accent);--spd:1;border-radius:26px}
.core-holo.is-compact{width:min(210px,62vw)}
.core-holo>*,.core-holo::after{grid-area:1/1}

.core-holo::before,.core-holo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.core-holo::before{background:radial-gradient(circle at 50% 50%,var(--core),transparent 62%);opacity:.13;filter:blur(26px)}
.core-holo::after{inset:auto 6% 2%;height:16%;background:radial-gradient(ellipse at 50% 50%,var(--core),transparent 68%);
  opacity:.22;filter:blur(16px)}

.core-plate{position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 82%,var(--core) 88%,transparent 94%),
    radial-gradient(circle,transparent 58%,rgba(255,255,255,.05) 59%,transparent 61%);
  opacity:.5;filter:blur(.4px);animation:spin calc(26s * var(--spd)) linear infinite}
.core-beam{position:absolute;left:50%;bottom:-4%;width:74%;height:46%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(to top,var(--core),transparent 72%);opacity:.1;filter:blur(16px);
  clip-path:polygon(50% 100%,4% 0,96% 0);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}

/* anillos elípticos en perspectiva: da la profundidad tridimensional */
.core-tilt{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;
  transform:rotateX(74deg) scale(.94);opacity:.75}
.core-tilt .orbit{position:absolute;border:1px solid var(--core);border-radius:50%;opacity:.42;
  left:50%;top:50%;translate:-50% -50%;box-shadow:0 0 18px -6px var(--core)}
.core-tilt .o1{width:86%;height:86%;animation:tiltA calc(15s * var(--spd)) linear infinite}
.core-tilt .o2{width:68%;height:68%;opacity:.3;animation:tiltB calc(21s * var(--spd)) linear infinite}
.core-tilt .o3{width:102%;height:102%;opacity:.2;animation:tiltA calc(32s * var(--spd)) linear infinite reverse}
@keyframes tiltA{to{transform:rotate(360deg)}}
@keyframes tiltB{to{transform:rotate(-360deg) rotateX(14deg)}}

.core-stage{position:relative;width:100%;height:100%;display:grid;place-items:center}
.core-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 7px var(--core))}
body[data-glow="off"] .core-stage svg{filter:none}
body[data-glow="off"] .core-holo::before,body[data-glow="off"] .core-holo::after{opacity:.06}
.core-scan{position:absolute;inset:6%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.3;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 4px);
  -webkit-mask-image:radial-gradient(circle,#000 42%,transparent 72%);mask-image:radial-gradient(circle,#000 42%,transparent 72%);
  animation:scan 7.5s linear infinite}
@keyframes scan{to{background-position:0 120px}}

.core-hud{position:absolute;inset:0;pointer-events:none}
.core-hud .hb{position:absolute;width:17px;height:17px;border:1.5px solid var(--core);opacity:.55}
.core-hud .tl{top:2%;left:2%;border-right:0;border-bottom:0}
.core-hud .tr{top:2%;right:2%;border-left:0;border-bottom:0}
.core-hud .bl{bottom:2%;left:2%;border-right:0;border-top:0}
.core-hud .br{bottom:2%;right:2%;border-left:0;border-top:0}
.core-hud .hud-tag{position:absolute;top:3.4%;font:600 8.6px/1 var(--mono);letter-spacing:1.6px;color:var(--text-3);text-transform:uppercase}
.core-hud .ht-l{left:12%}
.core-hud .ht-r{right:12%;color:var(--core);opacity:.85}
.core-hud .ht-bl{bottom:3.4%;left:12%;opacity:.5}
.core-hud .ht-br{bottom:3.4%;right:12%;opacity:.5}
.core-holo.is-compact .ht-bl,.core-holo.is-compact .ht-br{display:none}

.core-caption{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);text-align:center;pointer-events:none;
  padding:5px 16px 6px;border-radius:12px;border:1px solid var(--core);
  background:rgba(4,11,20,.72);box-shadow:0 0 22px -10px var(--core),inset 0 0 18px -14px var(--core)}
.core-caption .cc-state{font-size:12.6px;letter-spacing:2.4px;text-transform:uppercase;color:#e8fdff;font-weight:650;
  text-shadow:0 0 14px var(--core)}
.core-caption .cc-op{font-size:10.6px;color:var(--text-3);font-family:var(--mono);margin-top:2px}
.core-holo.is-compact .core-caption{padding:3px 9px;border-radius:9px}
.core-holo.is-compact .cc-state{font-size:9.6px;letter-spacing:1.4px}
.core-holo.is-compact .cc-op{display:none}
.core-holo.is-compact .core-hud .hud-tag{display:none}
.core-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px;width:100%;max-width:430px}
.core-info .ci{border:1px solid var(--line);border-radius:9px;padding:6px 8px;background:var(--surface-2);position:relative;overflow:hidden}
.core-info .ci::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--core,var(--accent));opacity:.55}
.core-info .ci b{display:block;font-size:9.6px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3)}
.core-info .ci span{font-size:12px;font-family:var(--mono);color:var(--text)}
.core-state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.cs-btn{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:5px 7px;font-size:11.2px;
  cursor:pointer;color:var(--text-2);text-align:left;transition:.15s;display:flex;align-items:center;gap:6px}
.cs-btn:hover{border-color:var(--line-strong);color:var(--text);transform:translateY(-1px)}
.cs-btn.is-active{background:rgba(var(--accent-rgb),.16);border-color:var(--accent);color:#d6f9ff;box-shadow:0 0 18px -6px var(--accent)}
.cs-btn .sd{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-3)}

.spin{transform-origin:50% 50%;animation:spin linear infinite}
.spin-rev{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.sweep{animation:spin calc(6.5s * var(--spd)) linear infinite}
.sat{animation:satGlow calc(2.6s * var(--spd)) ease-in-out infinite}
@keyframes satGlow{0%,100%{opacity:.35}50%{opacity:1}}
.orb{animation:orbBeat calc(3.4s * var(--spd)) ease-in-out infinite;transform-origin:50% 50%}
.orb-band{animation:spin calc(9s * var(--spd)) linear infinite}
.orb-mesh{animation:spin calc(23s * var(--spd)) linear infinite reverse}
@keyframes orbBeat{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.075);opacity:1}}
.tick{animation:tickFade calc(3.2s * var(--spd)) ease-in-out infinite}
@keyframes tickFade{0%,100%{opacity:.2}50%{opacity:.82}}
.particle{animation:floatUp linear infinite;transform-origin:50% 50%}
@keyframes floatUp{0%{opacity:0;transform:translateY(7px) scale(.4)}22%{opacity:.9}100%{opacity:0;transform:translateY(-30px) scale(1)}}
.core-pulse{opacity:0}
.core-pulse.is-fire{animation:corePulse .95s ease-out}
@keyframes corePulse{0%{opacity:.85;transform:scale(.86)}100%{opacity:0;transform:scale(1.28)}}

/* velocidad e intensidad por estado real */
.core-holo.is-thinking{--spd:.42}
.core-holo.is-listening{--spd:.6}
.core-holo.is-wait{--spd:1.5}
.core-holo.is-error{--spd:1.9}
.core-holo.is-done{--spd:1.1}
.core-holo.is-thinking .core-plate,.core-holo.is-listening .core-plate{opacity:.8}
.core-holo.is-error{animation:flick 1.1s steps(2,end) infinite}
@keyframes flick{0%,100%{opacity:1}48%{opacity:.86}}

[data-motion="off"] .spin,[data-motion="off"] .orb,[data-motion="off"] .tick,[data-motion="off"] .particle,
[data-motion="off"] .j-orb,[data-motion="off"] .dot-run,[data-motion="off"] .core-plate,[data-motion="off"] .core-scan,
[data-motion="off"] .core-tilt .orbit,[data-motion="off"] .sweep,[data-motion="off"] .orb-band,[data-motion="off"] .sat,
[data-motion="off"] .orb-mesh,
[data-motion="off"] .core-holo.is-error{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .spin,.orb,.tick,.particle,.j-orb,.dot-run,.core-plate,.core-scan,.sweep,.orb-band,.orb-mesh,.sat,.core-tilt .orbit{animation:none!important}
  *{transition-duration:.01ms!important}
}
body[data-core="idle"] .core-holo{--core:var(--accent)}
body[data-core="listen"] .core-holo{--core:#60a5fa}
body[data-core="think"] .core-holo{--core:#a78bfa}
body[data-core="wait"] .core-holo{--core:var(--warn)}
body[data-core="ok"] .core-holo{--core:var(--ok)}
body[data-core="error"] .core-holo{--core:var(--err)}

/* ====== CHAT ====== */
.chat{display:flex;flex-direction:column;gap:10px;min-height:0}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px;max-height:56vh}
.msg{display:flex;gap:9px;font-size:12.6px;align-items:flex-start}
.msg .m-av{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700}
.msg.user .m-av{background:rgba(59,130,246,.28);border:1px solid rgba(96,165,250,.45)}
.msg.bot .m-av{background:linear-gradient(140deg,rgba(var(--accent-rgb),.4),rgba(59,130,246,.2));border:1px solid var(--line-strong);color:#d6f9ff}
.msg .m-body{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:8px 11px;min-width:0;flex:1}
.msg.user .m-body{background:rgba(59,130,246,.12);border-color:rgba(96,165,250,.32)}
.msg .m-body .m-meta{font-size:10.2px;color:var(--text-3);margin-top:5px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.m-inline{margin-top:7px;border-top:1px dashed var(--line);padding-top:7px}
.chat-input{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.chat-input textarea{flex:1}
.wave{display:flex;align-items:center;gap:2.5px;height:26px}
.wave i{width:3px;border-radius:3px;background:var(--accent);opacity:.85;transition:height .1s}
.approve-box{border:1px solid rgba(251,191,36,.5);background:rgba(251,191,36,.08);border-radius:10px;padding:10px}
.approve-box .ab-list{font-size:12px;color:var(--text-2);margin:6px 0 8px}
.approve-box .ab-list li{margin-left:16px}
.typing{display:inline-flex;gap:3px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}

/* ====== DRAWER / MODAL / PALETTE ====== */
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(470px,100vw);z-index:60;
  background:linear-gradient(180deg,rgba(8,18,32,.98),rgba(6,13,24,.97));border-left:1px solid var(--line-strong);
  transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.9,.25,1);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.drawer.is-open{transform:none}
.drawer-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:14.6px;letter-spacing:.8px}
.drawer-head button{margin-left:auto}
.drawer-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0}
[hidden]{display:none!important}
.modal-backdrop,.palette-backdrop{position:fixed;inset:0;z-index:80;background:rgba(3,8,15,.72);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.modal{width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--bg-2);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.modal-head button{margin-left:auto}
.modal-body{padding:14px;overflow-y:auto;flex:1}
.modal-foot{padding:11px 14px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.palette{width:min(660px,100%);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:14px;
  overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 16px;font-size:14.6px}
.palette input:focus{outline:none;border-color:var(--line-strong)}
.palette-list{max-height:52vh;overflow-y:auto;padding:6px}
.p-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;font-size:12.8px;cursor:pointer}
.p-item .p-ico{width:20px;text-align:center;color:var(--accent)}
.p-item .p-kind{margin-left:auto;font-size:10px;color:var(--text-3);letter-spacing:1px;text-transform:uppercase}
.p-item.is-sel{background:rgba(var(--accent-rgb),.14);color:#d6f9ff}
.palette-hint{display:flex;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--text-3);flex-wrap:wrap}
.sim-flag{margin-left:auto;color:#fcd34d;font-size:10.4px}

/* ====== TOASTS ====== */
.toast-stack{position:fixed;bottom:16px;right:16px;z-index:95;display:flex;flex-direction:column;gap:8px;max-width:min(420px,90vw)}
.toast{background:var(--surface-2);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:11px;padding:10px 12px;font-size:12.4px;box-shadow:var(--shadow);animation:tin .3s}
.toast.err{border-left-color:var(--err)}.toast.warn{border-left-color:var(--warn)}.toast.ok{border-left-color:var(--ok)}
.toast.crit{border-left-color:var(--crit);background:linear-gradient(90deg,rgba(251,91,91,.16),var(--surface-2))}
.toast b{display:block;font-size:12.6px;margin-bottom:2px}
@keyframes tin{from{transform:translateX(26px);opacity:0}}

/* ====== MÓVIL ====== */
.phone{width:min(340px,92vw);height:640px;margin:0 auto;border:1px solid var(--line-strong);border-radius:28px;
  background:linear-gradient(180deg,#061019,#0a1626);padding:10px;box-shadow:var(--shadow),0 0 30px rgba(var(--accent-rgb),.12);
  overflow:hidden;display:flex;flex-direction:column;gap:8px}
.phone .ph-notch{width:74px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);margin:2px auto 4px}
.phone .ph-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:0 2px}
.phone .ph-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;border-top:1px solid var(--line);padding-top:7px}
.phone .ph-tab{text-align:center;font-size:9.6px;color:var(--text-3);cursor:pointer;border-radius:8px;padding:5px 2px}
.phone .ph-tab.on{color:#d6f9ff;background:rgba(var(--accent-rgb),.14)}
.phone .ph-tab i{display:block;font-size:15px;font-style:normal}
.m-hero{border:1px solid var(--line-strong);border-radius:14px;padding:10px;background:var(--surface-2)}
.big-btn{width:100%;padding:14px;border-radius:14px;border:1px solid var(--accent);background:rgba(var(--accent-rgb),.16);
  color:#d6f9ff;font-size:14px;font-weight:650;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.m-card{border:1px solid var(--line);border-radius:11px;padding:9px;background:var(--surface-2);font-size:11.8px}

/* responsive */
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:58px;left:0;bottom:0;width:272px;z-index:50;transform:translateX(-102%);transition:.25s}
  body.nav-open .sidebar{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.6)}
  .menu-toggle{display:grid}
  .brand-sub,.tb-clock,.user-meta,.tb-status{display:none}
  .main{padding:14px 14px 60px}
}
@media (max-width:680px){
  .global-search .gs-label,.global-search kbd{display:none}
  .global-search{flex:none;width:38px;justify-content:center}
  .unit-switch .us-btn{padding:4px 7px;font-size:10.8px}
  .g-kpi{grid-template-columns:1fr 1fr;--grid-min:0px}
  .kpi .k-value{font-size:21px}
}
/* el flex de la barra superior no envuelve: a anchos muy cortos se desborda
   y arrastra todo el rejilla; se sacrifica el conmutador de unidad (hay otro en Ajustes) */
@media (max-width:760px){
  .topbar{gap:8px;padding:0 10px}
  .unit-switch{display:none}
  .tb-jarvis{padding:5px 9px}
  .topbar-right{gap:6px}
}
.hint{font-size:11.2px;color:var(--text-3);margin-top:6px}
.hr{height:1px;background:var(--line);margin:12px 0}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}
.right{margin-left:auto!important}
.small{font-size:11.4px}
.hidden{display:none!important}

/* ==== clases que usa app.js (mensajes, paleta, formularios, columnas) ==== */
.grid.g-side{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--gap);align-items:start}
@media (max-width:1180px){.grid.g-side{grid-template-columns:1fr}}
.msg{padding:9px 11px;border-radius:var(--radius-sm);font-size:12.6px;line-height:1.5;border:1px solid var(--line)}
.msg.from-assistant{background:var(--surface-2);border-left:2px solid var(--accent)}
.msg.from-user{background:rgba(96,165,250,.1);border-left:2px solid var(--info);margin-left:32px}
.msg .btn{margin:4px 4px 0 0}
.pal-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:9px;
  padding:8px 10px;color:var(--text-2);font:inherit;font-size:12.6px;text-align:left;cursor:pointer}
.pal-item span{min-width:96px;color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.pal-item b{color:var(--text);font-weight:600}
.pal-item:hover,.pal-item.is-active{background:rgba(var(--accent-rgb),.12);color:var(--text)}
.fld{display:flex;flex-direction:column;gap:4px;font-size:11.6px;color:var(--text-3);letter-spacing:.4px}
.fld input,.fld select{font:inherit;font-size:12.6px;padding:7px 9px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--text)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent)}

/* Formulario del registro de aplicaciones (modal) */
.ap-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.ap-row{grid-template-columns:1fr}}
.ap-fld{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.ap-fld>span{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3)}
.ap-fld input,.ap-fld select{font:inherit;font-size:13px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);width:100%}
.ap-fld input:focus,.ap-fld select:focus{outline:none;border-color:var(--accent)}
.ap-fld input[readonly]{opacity:.6;cursor:not-allowed}
.ap-check{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);
  margin:2px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.ap-check input{accent-color:var(--accent);width:16px;height:16px;flex:none}

/* ====== MEJORA VISUAL DEL CENTRO DE MANDO ====== */
.main{background:
  radial-gradient(1200px 520px at 78% -8%,rgba(var(--accent-rgb),.10),transparent 62%),
  radial-gradient(900px 460px at 4% 106%,rgba(59,130,246,.09),transparent 60%)}
.view-head h1{font-size:22px;letter-spacing:.6px;background:linear-gradient(90deg,#e9fdff,var(--accent) 60%,#9fe9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.view-head p{max-width:78ch}

.card{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card::after{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.22;pointer-events:none}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow),0 0 26px -12px var(--accent)}
.card-head h3{display:flex;align-items:center;gap:8px}
.card-head h3::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 10px var(--accent);transform:rotate(45deg);flex:none}
.card.core-hero{border-color:rgba(var(--accent-rgb),.42);
  background:radial-gradient(120% 78% at 50% 0%,rgba(var(--accent-rgb),.13),transparent 62%),var(--surface);
  box-shadow:var(--shadow),0 0 44px -18px var(--accent)}
.card.core-hero::after{opacity:.5}

.grid.g-kpi{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.kpi{padding-bottom:12px}
.kpi .k-value{text-shadow:0 0 22px rgba(var(--accent-rgb),.28)}
.kpi:hover{transform:translateY(-2px)}
.kpi .spark{opacity:.85;transition:opacity .18s}
.kpi:hover .spark{opacity:1}
.kpi .src{opacity:.72;transition:opacity .18s}
.kpi:hover .src{opacity:1}
.kpi.is-empty{border-style:dashed;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.kpi.is-empty .k-value{text-shadow:none}

.svc{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.svc:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 14px 30px -18px #000,0 0 22px -12px var(--accent)}
.svc .svc-logo{box-shadow:0 0 0 1px var(--line) inset,0 0 18px -8px var(--accent)}
.svc h4{letter-spacing:.2px}

.list .li{transition:background .15s ease,border-color .15s ease;position:relative}
.list .li::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:transparent}
.list .li:hover{background:var(--surface-2);border-color:var(--line-strong)}
.list .li.crit::before{background:var(--crit);box-shadow:0 0 12px var(--crit)}
.list .li.warn::before{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.list .li.crit{background:linear-gradient(90deg,rgba(251,91,91,.1),transparent 46%)}

.tab{border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 11px;font-size:11.6px;color:var(--text-2)}
.tab:hover{border-color:var(--line-strong);color:var(--text)}
.tab.is-active{background:linear-gradient(90deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.06));
  border-color:var(--accent);color:#e6fdff;box-shadow:0 0 18px -8px var(--accent)}

.btn{transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35) inset,0 8px 22px -14px var(--accent)}
.btn.primary:hover{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.6) inset,0 10px 26px -10px var(--accent)}
.btn.danger:hover{box-shadow:0 0 22px -10px var(--crit)}

.dt tbody tr{transition:background .14s ease}
.dt tbody tr:hover{background:rgba(var(--accent-rgb),.06)}

.callout{position:relative;overflow:hidden}
.callout::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  animation:sheen 6.5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

.badge-crit{animation:badgePulse 1.9s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(251,91,91,.55)}50%{box-shadow:0 0 0 6px rgba(251,91,91,0)}}
.dot-err,.dot-warn{animation:dotGlow 1.8s ease-in-out infinite}
@keyframes dotGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}

::selection{background:rgba(var(--accent-rgb),.28)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-2),rgba(var(--accent-rgb),.25));border-radius:9px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}
[data-motion="off"] .callout::after,[data-motion="off"] .badge-crit,[data-motion="off"] .dot-err,[data-motion="off"] .dot-warn{animation:none!important}

/* ============================================================
   HERO JARVIS · el asistente preside el centro de mando (§3.1 C · §4)
   ============================================================ */
.hero-jarvis{position:relative;isolation:isolate;overflow:hidden;margin:-16px -20px 22px;padding:26px 26px 16px;
  border:0;border-bottom:1px solid rgba(var(--accent-rgb),.30);border-radius:0 0 24px 24px;
  background:
    radial-gradient(86% 60% at 50% 116%, rgba(var(--accent-rgb),.24), transparent 62%),
    radial-gradient(46% 42% at 50% 40%, rgba(var(--accent-rgb),.10), transparent 72%),
    linear-gradient(180deg,#04101d 0%,#061425 48%,#020a12 100%);
  box-shadow:0 26px 70px -34px #000, inset 0 1px 0 rgba(255,255,255,.05)}
[data-theme="light"] .hero-jarvis{background:
    radial-gradient(86% 60% at 50% 116%, rgba(var(--accent-rgb),.20), transparent 62%),
    linear-gradient(180deg,#eaf5ff 0%,#f4fbff 100%)}
@media (max-width:980px){.hero-jarvis{margin:-14px -14px 20px;padding:20px 16px 14px}}
.hero-jarvis::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}

.hero-floor{position:absolute;left:-26%;right:-26%;bottom:-9%;height:54%;pointer-events:none;z-index:0;opacity:.85;
  transform:perspective(460px) rotateX(74deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.5) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb),.38) 0 1px, transparent 1px 52px);
  -webkit-mask-image:linear-gradient(to top,#000 4%,transparent 86%);
  mask-image:linear-gradient(to top,#000 4%,transparent 86%);
  animation:floorPan 14s linear infinite}
@keyframes floorPan{from{transform:perspective(460px) rotateX(74deg) translateY(0)}
  to{transform:perspective(460px) rotateX(74deg) translateY(-52px)}}
.hero-beams{position:absolute;left:50%;bottom:0;width:80%;height:94%;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:linear-gradient(to top, rgba(var(--accent-rgb),.30), transparent 70%);
  clip-path:polygon(50% 100%,-8% 0,108% 0);filter:blur(9px);
  -webkit-mask-image:linear-gradient(to top,#000 2%,transparent 76%);mask-image:linear-gradient(to top,#000 2%,transparent 76%);
  animation:beamSway 9s ease-in-out infinite alternate}
@keyframes beamSway{from{opacity:.55}to{opacity:.95}}
.hero-noise{position:absolute;inset:0;pointer-events:none;z-index:4;mix-blend-mode:screen;opacity:.13;
  background:repeating-linear-gradient(to bottom, rgba(180,240,255,.14) 0 1px, transparent 1px 3px)}

.hero-head{position:relative;z-index:5;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid rgba(var(--accent-rgb),.16)}
.hero-head>div{min-width:0}
.hero-kicker{font:600 10.2px/1 var(--mono);letter-spacing:3.2px;text-transform:uppercase;color:var(--accent)}
.hero-hi{margin:7px 0 0;font-size:clamp(22px,2.5vw,30px);font-weight:760;letter-spacing:-.5px;line-height:1.08;
  background:linear-gradient(180deg,#ffffff,#8fd6f5);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .hero-hi{background:linear-gradient(180deg,#0b3b57,#1272a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.st-pill{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.3px;
  padding:6px 11px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.08);color:var(--text-2)}
.st-pill.ok{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.1);color:#8ee6b8}
.st-pill.warn{border-color:rgba(245,158,11,.42);background:rgba(245,158,11,.1);color:#f5c97a}
.st-pill.id{border-color:rgba(var(--accent-rgb),.5);color:var(--accent)}
.st-pill.link{cursor:pointer;transition:.15s}
.st-pill.link:hover{background:rgba(var(--accent-rgb),.18);color:#bfe0f5}
[data-theme="light"] .st-pill.ok{color:#0f7a54}[data-theme="light"] .st-pill.warn{color:#8a5a06}
.hero-brief{flex:1 1 320px;margin:0;font-size:12.8px;line-height:1.6;color:var(--text-2);max-width:56ch;align-self:flex-end}
.hero-acts{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}

.hero-inner{position:relative;z-index:5;display:grid;gap:16px;align-items:stretch;
  grid-template-columns:minmax(340px,460px) minmax(0,1fr);grid-template-areas:"core right"}
@media (min-width:1441px){.hero-inner{min-height:clamp(470px,62vh,600px)}}
.hero-core{grid-area:core;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0}
.hero-core>*{width:100%;min-width:0}
.hero-core #hero-core{display:flex;justify-content:center}
.hero-right{grid-area:right;display:grid;gap:14px;align-items:stretch;min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
.hero-watch{grid-area:auto;min-width:0}
.hero-cons{width:100%;min-width:0}
@media (max-width:1560px){.hero-right{grid-template-columns:1fr}}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;grid-template-areas:"core" "right"}}
.hero-jarvis .core-holo{width:min(440px,100%)}
@media (max-width:900px){.hero-jarvis .core-holo{width:min(420px,88vw)}}

.hero-watch{border:1px solid rgba(var(--accent-rgb),.24);border-radius:14px;padding:11px 11px 9px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(4,16,28,.82),rgba(2,10,18,.6));box-shadow:inset 0 0 44px -26px var(--accent)}
[data-theme="light"] .hero-watch{background:rgba(255,255,255,.72)}
.hw-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.hw-head h3{margin:0;font-size:12.6px;letter-spacing:.4px}
.hw-head span{margin-left:auto}
.hw-list{display:flex;flex-direction:column;gap:3px}
.wrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;background:rgba(255,255,255,.025);color:var(--text-2);transition:.15s}
.wrow:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);color:#eafeff}
.wdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-3);box-shadow:0 0 8px currentColor}
.wdot.err{background:var(--err);color:var(--err)} .wdot.warn{background:var(--warn);color:var(--warn)}
.wdot.ok{background:var(--ok);color:var(--ok)} .wdot.pend{background:var(--text-3);color:var(--text-3)}
.wk{font-size:11.8px;line-height:1.3;flex:1;min-width:0}
.wv{font:600 11.4px/1 var(--mono);color:#dff9ff;flex:none;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa{opacity:.35;font-size:12px;flex:none}
.wrow:hover .wa{opacity:1;color:var(--accent)}
.hw-foot{margin-top:auto;padding-top:9px;border-top:1px solid var(--line)}
.hw-line{display:flex;justify-content:space-between;gap:10px;font-size:10.8px;padding:2px 0}
.hw-line b{font:600 9.4px/1.6 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3)}
.hw-line span{font-family:var(--mono);color:#d6f9ff;text-align:right}

.hero-voice{display:flex;align-items:center;gap:11px;width:100%;max-width:520px;
  border:1px solid rgba(var(--accent-rgb),.26);border-radius:13px;padding:8px 12px 8px 8px;
  background:linear-gradient(180deg,rgba(4,16,28,.86),rgba(2,10,18,.66))}
[data-theme="light"] .hero-voice{background:rgba(255,255,255,.75)}
.mic-big{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--accent);cursor:pointer;
  background:radial-gradient(circle at 50% 34%, rgba(var(--accent-rgb),.42), rgba(var(--accent-rgb),.12) 70%);
  color:#eafeff;font-size:19px;display:grid;place-items:center;transition:.16s;box-shadow:0 0 20px -6px var(--accent)}
.mic-big:hover{box-shadow:0 0 26px -4px var(--accent)}
.mic-big.is-on{animation:micPulse 1.6s ease-out infinite}
.hv-txt{min-width:0;flex:1}
.wake{display:flex;align-items:center;gap:7px;font-size:11.6px;color:var(--text-2);cursor:pointer}
.wake input{accent-color:var(--accent);width:14px;height:14px;flex:none;cursor:pointer}
.wake b{color:var(--accent);font-weight:700}
.wake-state{font:11px/1.45 var(--mono);color:var(--text-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hero-cons{border:1px solid rgba(var(--accent-rgb),.26);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,rgba(4,16,28,.88),rgba(2,10,18,.72));box-shadow:inset 0 0 44px -24px var(--accent)}
[data-theme="light"] .hero-cons{background:rgba(255,255,255,.72)}
.hero-cons .chat-log{flex:1 1 auto;min-height:150px;max-height:none}
.hero-cmds{display:flex;flex-wrap:wrap;gap:5px}
.hero-cmd{border:1px solid var(--line);background:rgba(var(--accent-rgb),.07);color:var(--text-2);
  border-radius:20px;padding:4px 11px;font-size:11.2px;cursor:pointer;transition:.16s}
.hero-cmd:hover{border-color:var(--accent);color:#eafeff;background:rgba(var(--accent-rgb),.18)}
.hero-input{display:flex;gap:7px;align-items:stretch}
.hero-input textarea{flex:1;min-width:0;background:rgba(2,9,16,.82);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:inherit;font-size:12.6px;line-height:1.45;padding:8px 10px;resize:vertical}
.hero-input textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
@keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}100%{box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}}

.hero-strip{position:relative;z-index:5;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:9px}
.hs{border-left:2px solid rgba(var(--accent-rgb),.55);padding:1px 0 1px 10px;min-width:0}
.hs b{display:block;font:600 9.2px/1.5 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3)}
.hs span{display:block;font-size:17px;font-weight:680;letter-spacing:-.2px;color:#eafcff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs i{font-style:normal;font-size:10.4px;color:var(--text-3)}
.hs.warn{border-left-color:var(--warn)} .hs.err{border-left-color:var(--err)}
.hs.ok{border-left-color:var(--ok)} .hs.pend{border-left-color:var(--text-3)}

[data-motion="off"] .hero-floor,[data-motion="off"] .hero-beams,[data-motion="off"] .mic-big.is-on{animation:none!important}
@media (prefers-reduced-motion:reduce){.hero-floor,.hero-beams,.mic-big.is-on{animation:none!important}}

.link-btn{border:0;background:none;padding:0;font:inherit;font-size:12.2px;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:#eafeff}
.mail-draft-box{width:100%;margin-top:10px;background:rgba(2,9,16,.8);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:12.4px/1.6 var(--mono);padding:10px 12px;resize:vertical;white-space:pre-wrap}
.mail-draft-box:focus{outline:none;border-color:var(--accent)}

/* ============================================================
   PANTALLA DE ACCESO — replica el centro de mando (imagen IA)
   Es una puerta de prototipo: no autentica contra ningún servidor.
   ============================================================ */
body.is-locked{overflow:hidden}
.login-screen{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:28px 18px; overflow:auto;
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(56,140,220,.20), transparent 60%),
    radial-gradient(900px 620px at 82% 8%, rgba(34,211,238,.10), transparent 55%),
    linear-gradient(180deg,#050b16,#071324 46%,#04070f);
  color:#eaf4fb;
  transition:opacity .45s ease, transform .45s ease;
}
.login-screen::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(90,180,220,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,180,220,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 26%,#000 8%,transparent 74%);
}
.login-screen.is-out{opacity:0; transform:scale(1.02); pointer-events:none}
.login-wrap{position:relative; width:min(440px,100%); display:flex; flex-direction:column; align-items:center; text-align:center}

.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.login-mark{width:30px;height:30px;color:#8fd0f5;filter:drop-shadow(0 0 8px rgba(56,140,220,.5))}
.login-wordmark{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.login-wordmark b{font-size:16px;letter-spacing:2px;color:#eaf4fb}
.login-wordmark span{font-size:9px;letter-spacing:5px;color:#6fa8d6}

.login-hero{display:flex;flex-direction:column;align-items:center;margin:6px 0 22px}
.login-core{display:grid;place-items:center;margin-bottom:2px}
.login-core .core-holo{width:min(210px,58vw)}
#login-title{font-size:26px;font-weight:600;letter-spacing:7px;margin:6px 0 8px;color:#8ecbf2;text-shadow:0 0 22px rgba(56,150,225,.4)}
.login-sub{margin:0;font-size:13px;color:#a7c4da;max-width:340px}

.login-card{width:100%;text-align:left;padding:22px 22px 20px;border-radius:16px;
  background:linear-gradient(180deg, rgba(14,30,52,.92), rgba(9,20,36,.94));
  border:1px solid rgba(110,190,240,.2); box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02)}
.login-card h2{margin:0 0 2px;font-size:18px;font-weight:600}
.login-card-sub{margin:0 0 18px;font-size:12.5px;color:#8fb0c8}

.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f93ad;margin-bottom:6px}
.fld-box{display:flex;align-items:center;gap:9px;padding:0 12px;height:46px;border-radius:11px;
  background:rgba(4,12,22,.7);border:1px solid rgba(110,190,240,.22);transition:border-color .18s, box-shadow .18s}
.fld-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.fld-ic{font-size:14px;opacity:.7;filter:grayscale(.2)}
.fld-box input{flex:1;min-width:0;background:none;border:none;outline:none;color:#eaf4fb;font:inherit;font-size:14px}
.fld-box input::placeholder{color:#5e7f97}
.fld-eye{background:none;border:none;cursor:pointer;font-size:15px;opacity:.6;padding:4px}
.fld-eye:hover,.fld-eye.is-on{opacity:1}

.login-keep{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#a7c4da;margin:2px 0 18px;cursor:pointer}
.login-keep input{accent-color:var(--accent);width:15px;height:15px}

.login-btn{width:100%;height:48px;border:none;border-radius:11px;cursor:pointer;font-size:15px;font-weight:600;letter-spacing:.4px;color:#04121f;
  background:linear-gradient(90deg,#38bdf8,#2f7fe0);box-shadow:0 10px 26px rgba(47,127,224,.4);transition:filter .16s, transform .06s}
.login-btn:hover{filter:brightness(1.08)}
.login-btn:active{transform:translateY(1px)}

.login-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:#5e7f97;font-size:11px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:rgba(110,190,240,.16)}

.login-voice{width:100%;display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;text-align:left;
  border-radius:12px;background:rgba(9,22,40,.7);border:1px solid rgba(110,190,240,.24);color:#dbeefb;transition:border-color .18s, background .18s}
.login-voice:hover{border-color:var(--accent)}
.login-voice.is-on{border-color:var(--accent);background:rgba(20,44,72,.8)}
.lv-orb{position:relative;width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#dff2ff;
  background:radial-gradient(circle at 40% 35%, #5aa9e6, #164a80 60%, #0a2340);box-shadow:0 0 16px rgba(56,150,225,.5)}
.lv-orb::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(120,200,255,.35)}
.login-voice.is-on .lv-orb::after{animation:lvPing 1.1s ease-out infinite}
@keyframes lvPing{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.lv-text{display:flex;flex-direction:column;line-height:1.25}
.lv-text b{font-size:13.5px;font-weight:600}
.lv-text small{font-size:11.5px;color:#8fb0c8}

.login-honest{margin:16px 2px 0;font-size:10.8px;line-height:1.5;color:#6f93ad}
.login-honest b{color:#9fc4de}
.login-demo{margin:-4px 0 14px;font-size:11px;color:#7fa0ba}
.login-demo b{color:#bfe0f5;font-weight:600}
.login-demo.is-real{color:#8ee6b8;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.28);border-radius:9px;padding:7px 11px}
.login-demo.is-real b{color:#c8f7de}
.login-btn.is-busy{filter:brightness(.8);cursor:progress}
.login-btn.is-busy::after{content:" ···";letter-spacing:2px}
.login-forgot{text-align:center;margin:12px 0 0;font-size:12.5px}
.login-forgot a{color:#7fc4f0;text-decoration:none;border-bottom:1px dotted rgba(127,196,240,.5)}
.login-forgot a:hover{color:#bfe4fb}
.login-err{margin:-6px 0 12px;font-size:12px;color:#ffb4b4;background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.35);border-radius:9px;padding:8px 11px}
.login-card.is-shake{animation:loginShake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes loginShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

@media (max-width:420px){
  #login-title{font-size:22px;letter-spacing:5px}
}