/* ════════════════════════════════════════════════════════════════
   desktop-shell.css — Escritorio real para Noxara (shell .nxd)
   Convierte el marco de teléfono en una ventana de escritorio:
   sidebar + top bar + home multicolumna. Usa los tokens de acento
   de producción (--acc, --nox-bg-1, --nox-card, --ink-1…), así que
   responde a las 3 direcciones (índigo/naranja/grafito) y claro/oscuro.
   Se activa con html.nxd-on (lo pone desktop-shell.js).
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · DESENMARCAR: de teléfono a ventana completa ── */
html.nxd-on, html.nxd-on body{ width:100%; height:100%; overflow:hidden; background:var(--nox-bg-1); }
html.nxd-on .stage{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  padding:0 !important; margin:0 !important; background:var(--nox-bg-1) !important;
  display:block !important; transform:none !important; max-width:none !important; max-height:none !important;
}
html.nxd-on .device{
  position:absolute !important; inset:0 !important; width:100vw !important; height:100vh !important;
  margin:0 !important; border:none !important; border-radius:0 !important; box-shadow:none !important;
  transform:none !important; background:var(--nox-bg-1) !important; max-width:none !important; max-height:none !important;
}
html.nxd-on .device-screen{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  border-radius:0 !important; overflow:hidden !important; background:var(--nox-bg-1) !important;
}
/* ocultar cromo de teléfono */
html.nxd-on .statusbar,
html.nxd-on .dynamic-island,
html.nxd-on .btn-side,
html.nxd-on .tabbar,
html.nxd-on .cosmos{ display:none !important; }

/* el home viejo (móvil) se oculta; usamos el nuevo .nxd-home */
html.nxd-on .app-root{ display:none !important; }

/* las apps abren en el área principal (a la derecha del sidebar) */
html.nxd-on .app-view{
  left:248px !important; top:0 !important; right:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important; border-radius:0 !important;
  max-width:none !important;
}
html.nxd-on .app-view .av-body{ padding-bottom:32px !important; }

/* launcher y lock cubren toda la ventana */
html.nxd-on .launcher,
html.nxd-on .lock{ left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; border-radius:0 !important; }

/* ════════════════════════════════════════════════════════════════
   2 · SHELL .nxd  (sidebar + top bar + home)
   ════════════════════════════════════════════════════════════════ */
.nxd{
  --r:18px; --r-sm:13px;
  --nxd-soft:rgba(var(--acc-rgb),0.13);
  --nxd-tileline:rgba(var(--acc-rgb),0.20);
  position:absolute; inset:0; z-index:6;
  font-family:var(--font-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  color:var(--ink-1);
  background:
    radial-gradient(90% 60% at 100% -8%, rgba(var(--acc-rgb),0.14) 0%, transparent 46%),
    linear-gradient(180deg, var(--nox-bg-2) 0%, var(--nox-bg-1) 38%, var(--nox-bg-1) 100%);
  display:grid; grid-template-columns:248px 1fr; grid-template-rows:minmax(0,100%); overflow:hidden;
}
.nxd *{ box-sizing:border-box; }
/* cuando hay app/launcher/lock abiertos, el home pasa a segundo plano */
html.nxd-on body.app-open .nxd,
html.nxd-on body.launcher-open .nxd{ z-index:1; }

/* ── SIDEBAR ── */
.nxd-side{ display:flex; flex-direction:column; gap:5px; padding:22px 16px 16px; min-height:0; overflow-y:auto;
  border-right:1px solid var(--nox-border); background:var(--nox-card); position:relative; z-index:30; }
.nxd-brand{ display:flex; align-items:center; gap:10px; padding:2px 8px 18px; }
.nxd-mark{ width:34px; height:34px; border-radius:11px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink);
  box-shadow:0 6px 16px -7px rgba(var(--acc-rgb),0.65); }
.nxd-mark svg{ width:19px; height:19px; }
.nxd-word{ font-size:18px; font-weight:760; letter-spacing:-.4px; }
.nxd-navlbl{ font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--nox-text-3); padding:8px 10px 5px; }
.nxd-nav{ display:flex; align-items:center; gap:11px; padding:9px 11px; min-height:44px; border-radius:11px; cursor:pointer;
  color:var(--nox-text-2); font-size:13.5px; font-weight:600; border:1px solid transparent; position:relative;
  transition:background .15s ease, color .15s ease; }
.nxd-nav svg{ width:19px; height:19px; flex-shrink:0; }
.nxd-nav:hover{ background:var(--nox-card-hi); color:var(--ink-1); }
.nxd-nav.on{ background:var(--nxd-soft); color:var(--acc); border-color:var(--nxd-tileline); }
.nxd-nav .nxd-nbadge{ margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:9px;
  display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#fff; background:#ef4444; }
.nxd-nav .nxd-nbadge.amber{ background:#f59e0b; }
.nxd-side-sp{ flex:1; }
.nxd-acct{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:14px;
  background:var(--nox-card-hi); border:1px solid var(--nox-border); cursor:pointer; }
.nxd-acct:hover{ border-color:var(--nox-border-hi); }
.nxd-acct-av{ width:38px; height:38px; border-radius:11px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink); font-weight:700; font-size:15px; }
.nxd-acct-meta{ min-width:0; flex:1; display:flex; flex-direction:column; }
.nxd-acct-name{ font-size:13px; font-weight:680; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nxd-acct-plan{ font-size:10.5px; color:var(--nox-text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nxd-acct-chev{ color:var(--nox-text-3); display:grid; }
.nxd-acct-chev svg{ width:15px; height:15px; }

/* ── MAIN ── */
.nxd-main{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.nxd-top{ display:flex; align-items:center; gap:14px; height:60px; padding:0 26px;
  border-bottom:1px solid var(--nox-border); background:var(--nox-card); flex-shrink:0; }
.nxd-srch{ flex:1; max-width:440px; display:flex; align-items:center; gap:9px; height:38px; padding:0 14px;
  background:var(--nox-card-hi); border:1px solid var(--nox-border); border-radius:11px; color:var(--nox-text-3); font-size:13px; cursor:text; }
.nxd-srch:hover{ border-color:var(--nox-border-hi); }
.nxd-srch svg{ width:16px; height:16px; color:var(--nox-text-2); flex-shrink:0; }
.nxd-srch span{ flex:1; }
.nxd-kbd{ font-size:11px; font-weight:600; color:var(--nox-text-3); padding:2px 7px; border-radius:6px; background:var(--nox-card); border:1px solid var(--nox-border); }
.nxd-top-sp{ flex:1; }
.nxd-mode{ display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:99px;
  background:var(--nxd-soft); border:1px solid var(--nxd-tileline); color:var(--acc); font-size:12.5px; font-weight:680; }
.nxd-mode i{ width:7px; height:7px; border-radius:50%; background:var(--acc); animation:nxdPulse 1.9s ease-out infinite; }
@keyframes nxdPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--acc-rgb),0.55); } 70%{ box-shadow:0 0 0 6px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.nxd-icbtn{ position:relative; width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:var(--nox-card-hi); border:1px solid var(--nox-border); color:var(--nox-text-2); cursor:pointer; }
.nxd-icbtn:hover{ border-color:var(--nox-border-hi); color:var(--ink-1); }
.nxd-icbtn svg{ width:17px; height:17px; }
.nxd-bdot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:#ef4444; border:1.5px solid var(--nox-card-hi); }

/* ── CANVAS ── */
.nxd-canvas{ flex:1; min-height:0; overflow-y:auto; padding:24px 26px 26px; }
.nxd-canvas::-webkit-scrollbar{ width:9px; }
.nxd-canvas::-webkit-scrollbar-thumb{ background:var(--nox-border-hi); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
/* El toast "Termina de configurar tu negocio" es fixed sobre toda la ventana:
   el Home del shell de escritorio (.nxd-canvas) nunca reservaba espacio para él
   (a diferencia de .av-body/.scroll, que sí lo hacen), así que tapaba Accesos
   rápidos y el resto del fondo del dashboard (QA jul 2026). */
body.has-setup-banner .nxd-canvas{ padding-bottom:150px !important; margin-bottom:90px !important; }

.nxd-greet{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.nxd-g-pre{ font-size:13px; color:var(--nox-text-2); font-weight:500; }
.nxd-g-name{ font-size:30px; font-weight:760; letter-spacing:-.6px; line-height:1.04; margin-top:2px; }
.nxd-g-sub{ font-size:12.5px; color:var(--nox-text-3); margin-top:4px; }
.nxd-g-day{ text-align:right; }
.nxd-g-day b{ display:block; font-size:22px; font-weight:740; letter-spacing:-.3px; }
.nxd-g-day span{ font-size:11.5px; color:var(--nox-text-3); }

.nxd-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start; max-width:1640px; margin-inline:auto; }

/* HERO */
.nxd-hero{ position:relative; overflow:hidden; grid-column:1;
  background:linear-gradient(168deg, rgba(var(--acc-rgb),0.06), var(--nox-card) 52%);
  border:1px solid var(--nox-border); border-radius:var(--r);
  padding:22px 24px; box-shadow:0 1px 2px rgba(var(--shadow),0.4), 0 22px 44px -30px rgba(var(--shadow),0.6); }
.nxd-sheen{ position:absolute; top:0; bottom:0; width:40%; left:-55%;
  background:linear-gradient(105deg, transparent, rgba(var(--acc-rgb),0.13) 50%, transparent);
  transform:skewX(-16deg); animation:nxdSheen 4.8s ease-in-out infinite; pointer-events:none; }
@keyframes nxdSheen{ 0%{ left:-55%; } 58%,100%{ left:140%; } }
.nxd-hero-row{ display:flex; align-items:center; justify-content:space-between; }
.nxd-eyebrow{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--nox-text-2); }
.nxd-live{ width:7px; height:7px; border-radius:50%; background:var(--acc); animation:nxdPulse 1.9s ease-out infinite; }
.nxd-ia{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:680; padding:5px 11px; border-radius:99px;
  background:var(--nxd-soft); color:var(--acc); border:1px solid var(--nxd-tileline); }
.nxd-ia svg{ width:13px; height:13px; }
.nxd-ia.disabled{ background:var(--nxd-soft); color:var(--nox-text-3); border-color:var(--nxd-tileline); opacity:.6; cursor:not-allowed; }
.nxd-ia.disabled svg{ opacity:.7; }
.nxd-headline{ font-size:25px; font-weight:720; line-height:1.18; letter-spacing:-.4px; margin-top:14px; max-width:30ch; text-wrap:pretty; }
.nxd-headline em{ font-style:normal; color:var(--acc); }
.nxd-rail{ position:relative; display:flex; align-items:center; margin:22px 4px 6px; max-width:520px; }
.nxd-stage{ display:flex; flex-direction:column; align-items:center; gap:6px; z-index:1; }
.nxd-stage i{ width:11px; height:11px; border-radius:50%; background:var(--nox-card-hi); border:1.8px solid var(--nox-border-hi); }
.nxd-stage span{ font-size:10px; color:var(--nox-text-3); font-weight:600; }
.nxd-stage.on i{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 4px var(--nxd-soft); }
.nxd-stage.on span{ color:var(--acc); }
.nxd-seg{ flex:1; height:2px; background:var(--nox-border); margin:0 -1px 16px; border-radius:2px; }
.nxd-scan{ position:absolute; top:1px; left:0; width:42px; height:11px; border-radius:99px;
  background:radial-gradient(circle at 50% 50%, rgba(var(--acc-rgb),0.42), transparent 70%);
  animation:nxdScan 3.6s cubic-bezier(.5,0,.5,1) infinite; pointer-events:none; }
@keyframes nxdScan{ 0%{ left:-6%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:98%; opacity:0; } }
.nxd-hero-foot{ display:flex; align-items:center; gap:16px; margin-top:22px; }
.nxd-cta{ display:flex; align-items:center; gap:9px; padding:13px 20px; border-radius:13px; cursor:pointer; border:none;
  background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink); font-size:14.5px; font-weight:700;
  box-shadow:0 10px 24px -10px rgba(var(--acc-rgb),0.6); animation:nxdBreath 3.6s ease-in-out infinite; }
.nxd-cta svg{ width:17px; height:17px; }
@keyframes nxdBreath{ 0%,100%{ box-shadow:0 10px 24px -10px rgba(var(--acc-rgb),0.5); } 50%{ box-shadow:0 12px 30px -10px rgba(var(--acc-rgb),0.72); } }
.nxd-ghost{ padding:13px 18px; border-radius:13px; cursor:pointer; font-size:13.5px; font-weight:650;
  background:var(--nox-card-hi); border:1px solid var(--nox-border); color:var(--nox-text-2); }
.nxd-ghost:hover{ color:var(--ink-1); border-color:var(--nox-border-hi); }

/* CARD base */
.nxd-card{ background:var(--nox-card); border:1px solid var(--nox-border); border-radius:var(--r); padding:18px 20px;
  box-shadow:0 1px 2px rgba(var(--shadow),0.4), 0 18px 38px -32px rgba(var(--shadow),0.6); }
.nxd-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nxd-card-title{ font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.nxd-card-all{ font-size:12px; color:var(--acc); font-weight:650; cursor:pointer; }

/* accesos */
.nxd-accesos{ grid-column:1; margin-top:18px; }
.nxd-grid-tools{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 10px; }
.nxd-tool{ display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; background:none; border:none; }
.nxd-tile{ position:relative; width:62px; height:62px; border-radius:var(--r-icon,28%); display:grid; place-items:center;
  background:rgba(var(--acc-rgb),0.12); border:1px solid var(--nxd-tileline); color:var(--acc); transition:transform .18s ease; }
.nxd-tool:hover .nxd-tile{ transform:translateY(-3px); }
.nxd-tile svg{ width:28px; height:28px; }
.nxd-tool.acc .nxd-tile{ background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink); border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(var(--acc-rgb),0.65); }
.nxd-tb{ position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  display:grid; place-items:center; font-size:11px; font-weight:700; font-style:normal; color:#fff; border:2px solid var(--nox-card); }
.nxd-tb-red{ background:#ef4444; } .nxd-tb-amber{ background:#f59e0b; } .nxd-tb-ac{ background:var(--acc); color:var(--acc-ink); }
.nxd-tlabel{ font-size:12px; font-weight:560; color:var(--nox-text-2); }

/* right column */
.nxd-right{ grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:18px; }
.nxd-risk-amt{ font-size:34px; font-weight:780; letter-spacing:-.8px; line-height:1; font-variant-numeric:tabular-nums; }
.nxd-risk-lbl{ font-size:12px; color:var(--nox-text-3); margin-top:5px; }
.nxd-heat{ height:5px; border-radius:5px; margin:14px 0 16px; background:var(--nox-border); overflow:hidden; }
.nxd-heat i{ display:block; height:100%; width:40%; border-radius:5px; background:linear-gradient(90deg,#f59e0b,#ef4444); animation:nxdHeat 2.8s ease-in-out infinite; }
@keyframes nxdHeat{ 0%,100%{ width:38%; } 50%{ width:82%; } }
.nxd-urg{ display:flex; flex-direction:column; gap:2px; }
.nxd-urow{ display:flex; align-items:center; gap:11px; padding:9px 4px; border-top:1px solid var(--nox-border); cursor:pointer; }
.nxd-urow:first-child{ border-top:none; }
.nxd-urow:hover{ background:var(--nox-card-hi); border-radius:10px; }
.nxd-uav{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:13px; font-weight:700;
  background:var(--nox-card-hi); color:var(--nox-text-2); border:1px solid var(--nox-border); }
.nxd-uinfo{ flex:1; min-width:0; }
.nxd-uname{ font-size:13px; font-weight:650; line-height:1.15; display:block; }
.nxd-umeta{ font-size:11px; color:var(--nox-text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.nxd-utime{ font-size:10.5px; font-weight:650; color:#ef4444; white-space:nowrap; }
.nxd-tl{ display:flex; flex-direction:column; }
.nxd-tlrow{ display:flex; gap:12px; padding:9px 0; }
.nxd-tltime{ font-size:11px; font-weight:680; color:var(--nox-text-2); width:54px; flex-shrink:0; font-variant-numeric:tabular-nums; padding-top:1px; }
.nxd-tlbar{ width:3px; border-radius:3px; background:var(--acc); flex-shrink:0; }
.nxd-tlrow.muted .nxd-tlbar{ background:var(--nox-border-hi); }
.nxd-tlbody{ min-width:0; }
.nxd-tltitle{ font-size:13px; font-weight:650; line-height:1.2; display:block; }
.nxd-tlsub{ font-size:11px; color:var(--nox-text-3); margin-top:2px; display:block; }

/* skeleton: cuenta real recién logueada — evita mostrar "Carlos Méndez" de ejemplo
   o un panel en blanco mientras loadRealHome() trae los datos (QA jul 2026). */
@keyframes nxdSkelPulse{ 0%,100%{ opacity:.45 } 50%{ opacity:.9 } }
.nxd-skel-bar{ display:inline-block; border-radius:6px; background:var(--nox-border); animation:nxdSkelPulse 1.3s ease-in-out infinite; }
.nxd-skel-row{ display:flex; align-items:center; gap:11px; padding:9px 4px; border-top:1px solid var(--nox-border); }
.nxd-skel-row:first-child{ border-top:none; }
.nxd-skel-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }

/* entrada escalonada */
.nxd-greet, .nxd-hero, .nxd-accesos, .nxd-right > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 75ms);
}
.nxd.lit .nxd-greet, .nxd.lit .nxd-hero, .nxd.lit .nxd-accesos, .nxd.lit .nxd-right > *{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .nxd-sheen,.nxd-scan,.nxd-heat i,.nxd-cta,.nxd-live,.nxd-mode i{ animation:none !important; }
  .nxd-greet,.nxd-hero,.nxd-accesos,.nxd-right > *{ opacity:1 !important; transform:none !important; }
}

/* pantallas chicas: el shell de escritorio necesita ancho */
@media (max-width:860px){
  .nxd{ grid-template-columns:1fr; }
  .nxd-side{ display:none; }
  html.nxd-on .app-view{ left:0 !important; }
  .nxd-grid{ grid-template-columns:1fr; }
  .nxd-right{ grid-column:1; grid-row:auto; }
  .nxd-accesos, .nxd-hero{ grid-column:1; }
}

/* ── ROL SETTER (html.role-setter · lo pone role.js) ── */
/* toggle de rol en top bar (demo) */
.nxd-rolepill{
  display:flex; align-items:center; gap:5px; height:36px; padding:0 13px; border-radius:99px;
  background:var(--nox-card-hi); border:1px solid var(--nox-border); cursor:pointer;
  color:var(--nox-text-2); font-size:12px; font-weight:500; white-space:nowrap;
}
.nxd-rolepill b{ color:var(--ink-1); font-weight:680; }
.nxd-rolepill:hover{ border-color:var(--nox-border-hi); color:var(--ink-1); }

/* violeta exclusivo IA (badge del hero + tile Copiloto) */
.nxd-ia.vio{
  background:rgba(124,58,237,0.14); color:#a78bfa; border-color:rgba(124,58,237,0.38);
}
.nxd-tool.ia .nxd-tile{
  background:rgba(124,58,237,0.14); border-color:rgba(124,58,237,0.32); color:#a78bfa;
  box-shadow:0 8px 18px -10px rgba(124,58,237,0.55);
}

/* "Mi actividad hoy" — números en mono */
.nxd-act-num{
  font-family:var(--font-mono,'DM Mono',Menlo,monospace); font-weight:500;
  font-size:34px; letter-spacing:-0.5px; line-height:1; font-variant-numeric:tabular-nums;
}
.nxd-act-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 4px; }
.nxd-act-cell{
  display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:12px;
  background:var(--nox-card-hi); border:1px solid var(--nox-border);
}
.nxd-act-cell b{ font-family:var(--font-mono,'DM Mono',Menlo,monospace); font-weight:500; font-size:18px; line-height:1; font-variant-numeric:tabular-nums; }
.nxd-act-cell span{ font-size:10.5px; color:var(--nox-text-3); line-height:1.3; }
.nxd-sub-head{ margin-top:18px; padding-top:14px; border-top:1px solid var(--nox-border); }

/* Copiloto IA oculto hasta tener la key de Deepgram — 24 jul 2026 */
.nxd-ia.disabled { display: none !important; }

/* ── Selector Mensual / Anual · OCULTO A PROPÓSITO (24 jul 2026) ─────────────
   El front ofrecía "Anual · 2 meses gratis" y mandaba annual:true a
   POST /api/billing/checkout, pero el backend NUNCA lee ese parámetro y solo
   tiene precios mensuales configurados (ONVOPAY_PRICE_ORBITA / _SETTER): quien
   elegía anual terminaba con una suscripción MENSUAL al precio mensual.
   Se oculta por CSS, sin tocar el marcado, para poder revertirlo en 2 líneas.
   El estado inicial de renderPlansScreen() ya es annual=false, así que con el
   selector oculto queda "Mensual" como única opción activa.
   PARA REACTIVAR: crear los precios anuales en el panel de OnvoPay, leer
   `annual` en billing.js (priceForPlan) y borrar esta regla. */
.av-tabs[data-tab-group="plan-bill"]{ display:none; }