/* ════════════════════════════════════════════════════════════════
   mobile-shell.css — Home premium .nxv para Noxara móvil.
   Reemplaza el home móvil por el layout de la exploración
   (saludo + hero "Ahora mismo" + accesos + tab bar), tematizado con
   los tokens de acento de producción (índigo/naranja/grafito · claro/oscuro).
   Se activa con html.nxv-on (lo pone mobile-shell.js).
   ════════════════════════════════════════════════════════════════ */

/* ocultar el home viejo y la tabbar vieja (los reemplaza .nxv) */
html.nxv-on .app-root{ display:none !important; }
html.nxv-on > body .tabbar{ display:none !important; }

.nxv{
  --r:18px;
  --nxv-soft:rgba(var(--acc-rgb),0.13);
  --nxv-tileline:rgba(var(--acc-rgb),0.20);
  position:absolute; inset:0; z-index:8;
  font-family:var(--font-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  color:var(--ink-1);
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(var(--acc-rgb),0.13) 0%, transparent 46%),
    linear-gradient(180deg, var(--nox-bg-2) 0%, var(--nox-bg-1) 42%, var(--nox-bg-1) 100%);
  overflow:hidden;
}
.nxv *{ box-sizing:border-box; }
/* cuando hay app/launcher/lock, el home pasa atrás */
html.nxv-on body.app-open .nxv,
html.nxv-on body.launcher-open .nxv{ z-index:1; }

.nxv-screen{ position:absolute; inset:0; display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 40px) 16px 0; gap:16px; overflow:hidden; }

/* ── top row ── */
.nxv-top{ display:flex; align-items:center; gap:9px; }
.nxv-srch{ flex:1; display:flex; align-items:center; gap:8px; height:44px; padding:0 14px;
  background:var(--nox-card); border:1px solid var(--nox-border); border-radius:99px;
  color:var(--nox-text-3); font-size:13px; box-shadow:0 1px 2px rgba(var(--shadow),0.3); cursor:text; }
.nxv-srch span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nxv-srch svg{ width:15px; height:15px; color:var(--nox-text-2); flex-shrink:0; }
.nxv-bell{ position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--nox-card); border:1px solid var(--nox-border); color:var(--nox-text-2); box-shadow:0 1px 2px rgba(var(--shadow),0.3); }
.nxv-bell svg{ width:18px; height:18px; }
.nxv-bdot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:#ef4444; border:1.5px solid var(--nox-card); }
.nxv-ava{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink); font-weight:700; font-size:16px;
  box-shadow:0 4px 12px -3px rgba(var(--shadow),0.4); }

/* ── greeting ── */
.nxv-greet{ padding:0 2px; }
.nxv-g-pre{ font-size:13px; color:var(--nox-text-2); font-weight:500; }
.nxv-g-name{ font-size:31px; font-weight:740; letter-spacing:-.5px; line-height:1.05; margin-top:2px; }
.nxv-g-sub{ font-size:12px; color:var(--nox-text-3); margin-top:3px; }

/* ── HERO ── */
.nxv-hero{ position:relative; overflow:hidden;
  background:linear-gradient(172deg, rgba(var(--acc-rgb),0.06), var(--nox-card) 52%);
  border:1px solid var(--nox-border); border-radius:var(--r);
  padding:18px 18px 19px; box-shadow:0 1px 2px rgba(var(--shadow),0.3), 0 14px 30px -20px rgba(var(--shadow),0.6); }
.nxv-sheen{ position:absolute; top:0; bottom:0; width:46%; left:-60%;
  background:linear-gradient(105deg, transparent, rgba(var(--acc-rgb),0.14) 50%, transparent);
  transform:skewX(-16deg); animation:nxvSheen 4.6s ease-in-out infinite; pointer-events:none; }
@keyframes nxvSheen{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
.nxv-hero-row{ display:flex; align-items:center; justify-content:space-between; }
.nxv-eyebrow{ display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--nox-text-2); }
.nxv-live{ width:6px; height:6px; border-radius:50%; background:var(--acc); animation:nxvPulse 1.9s ease-out infinite; }
@keyframes nxvPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--acc-rgb),0.55); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.nxv-ia{ display:flex; align-items:center; gap:5px; white-space:nowrap; font-size:10px; font-weight:650; padding:4px 9px; border-radius:99px;
  background:var(--nxv-soft); color:var(--acc); border:1px solid var(--nxv-tileline); }
.nxv-ia svg{ width:12px; height:12px; }
.nxv-ia.disabled{ background:var(--nxv-soft); color:var(--nox-text-3); border-color:var(--nxv-tileline); opacity:.6; cursor:not-allowed; }
.nxv-ia.disabled svg{ opacity:.7; }
.nxv-headline{ font-size:19.5px; font-weight:680; line-height:1.28; letter-spacing:-.2px; margin-top:11px; text-wrap:pretty; }
.nxv-headline em{ font-style:normal; color:var(--acc); }
.nxv-rail{ position:relative; display:flex; align-items:center; margin:20px 2px 4px; }
.nxv-stage{ display:flex; flex-direction:column; align-items:center; gap:4px; z-index:1; }
.nxv-stage i{ width:9px; height:9px; border-radius:50%; background:var(--nox-card-hi); border:1.6px solid var(--nox-border-hi); }
.nxv-stage span{ font-size:8px; color:var(--nox-text-3); font-weight:600; }
.nxv-stage.on i{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 3px var(--nxv-soft); }
.nxv-stage.on span{ color:var(--acc); }
.nxv-seg{ flex:1; height:2px; background:var(--nox-border); margin:0 -1px 14px; border-radius:2px; }
.nxv-scan{ position:absolute; top:1px; left:0; width:34px; height:9px; border-radius:99px;
  background:radial-gradient(circle at 50% 50%, rgba(var(--acc-rgb),0.45), transparent 70%);
  animation:nxvScan 3.4s cubic-bezier(.5,0,.5,1) infinite; pointer-events:none; }
@keyframes nxvScan{ 0%{ left:-6%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:98%; opacity:0; } }
.nxv-hero-foot{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.nxv-cta{ display:flex; align-items:center; gap:7px; padding:11px 15px; min-height:44px; border-radius:13px; border:none; cursor:pointer;
  background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink); font-size:13px; font-weight:680; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(var(--acc-rgb),0.6); animation:nxvBreath 3.4s ease-in-out infinite; }
.nxv-cta svg{ width:15px; height:15px; }
@keyframes nxvBreath{ 0%,100%{ box-shadow:0 8px 20px -8px rgba(var(--acc-rgb),0.5); } 50%{ box-shadow:0 10px 26px -8px rgba(var(--acc-rgb),0.72); } }
.nxv-risk{ flex:1; min-width:0; text-align:right; }
.nxv-risk-amt{ display:block; font-size:17px; font-weight:760; letter-spacing:-.3px; line-height:1; font-variant-numeric:tabular-nums; }
.nxv-risk-lbl{ display:block; font-size:9.5px; color:var(--nox-text-3); margin-top:3px; white-space:nowrap; }
.nxv-heat{ display:block; height:3px; border-radius:3px; margin-top:6px; background:var(--nox-border); overflow:hidden; }
.nxv-heat i{ display:block; height:100%; width:40%; border-radius:3px; background:linear-gradient(90deg,#f59e0b,#ef4444); animation:nxvHeat 2.8s ease-in-out infinite; }
@keyframes nxvHeat{ 0%,100%{ width:38%; } 50%{ width:82%; } }

/* ── accesos ── */
.nxv-qa-head{ display:flex; align-items:baseline; justify-content:space-between; padding:1px 3px 0; }
.nxv-qa-head>span:first-child{ font-size:13px; font-weight:680; }
.nxv-qa-all{ font-size:11px; color:var(--acc); font-weight:600; }
.nxv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px 4px; padding:4px 0; }
.nxv-tool{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; cursor:pointer; }
.nxv-tile{ position:relative; width:64px; height:64px; border-radius:var(--r-icon,28%); display:grid; place-items:center;
  background:rgba(var(--acc-rgb),0.12); border:1px solid var(--nxv-tileline); color:var(--acc); }
.nxv-tile svg{ width:30px; height:30px; }
.nxv-tool.acc .nxv-tile{ background:linear-gradient(150deg,var(--acc),var(--acc)); color:var(--acc-ink); border-color:transparent;
  box-shadow:0 7px 16px -7px rgba(var(--acc-rgb),0.65); }
/* violeta exclusivo IA (tile Copiloto) */
.nxv-tool.ia .nxv-tile{
  background:rgba(124,58,237,0.14); border-color:rgba(124,58,237,0.32); color:#a78bfa;
  box-shadow:0 7px 16px -8px rgba(124,58,237,0.55);
}
.nxv-tb{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  display:grid; place-items:center; font-size:10px; font-weight:700; font-style:normal; color:#fff; border:1.6px solid var(--nox-bg-1); }
.nxv-tb-red{ background:#ef4444; } .nxv-tb-amber{ background:#f59e0b; } .nxv-tb-ac{ background:var(--acc); color:var(--acc-ink); }
.nxv-tlabel{ font-size:11.5px; font-weight:540; color:var(--nox-text-2); letter-spacing:-.1px; }

.nxv-spacer{ display:none; }
.nxv-qa{ margin-top:auto; }
.nxv-qa-head{ margin-top:auto; }
.nxv-tabbar-wrap-auto{}

/* ── tab bar ── */
.nxv-tabbar{ display:flex; align-items:center; justify-content:space-between; gap:2px;
  margin:auto -3px 0; padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--nox-card); border-top:1px solid var(--nox-border);
  box-shadow:0 -6px 20px -16px rgba(var(--shadow),0.5); }
.nxv-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:44px; gap:3px; padding:5px 2px; border-radius:12px;
  background:none; border:none; cursor:pointer; color:var(--nox-text-3); position:relative; }
.nxv-tic{ position:relative; }
.nxv-tab svg{ width:22px; height:22px; }
.nxv-tab span:last-child{ font-size:9.5px; font-weight:600; }
.nxv-tab.on{ color:var(--acc); }
.nxv-tab.on .nxv-tic::after{ content:""; position:absolute; inset:-5px -9px; border-radius:99px; background:var(--nxv-soft); z-index:-1; }
.nxv-tab-badge{ position:absolute; top:-4px; right:-7px; min-width:14px; height:14px; padding:0 3px; border-radius:7px;
  display:grid; place-items:center; font-size:8.5px; font-weight:700; font-style:normal; color:#fff; background:#ef4444; border:1.4px solid var(--nox-card); }

/* entrada escalonada */
.nxv-greet, .nxv-hero, .nxv-qa-head, .nxv-tool{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 60ms);
}
.nxv.lit .nxv-greet, .nxv.lit .nxv-hero, .nxv.lit .nxv-qa-head, .nxv.lit .nxv-tool{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .nxv-sheen,.nxv-scan,.nxv-heat i,.nxv-cta,.nxv-live{ animation:none !important; }
  .nxv-greet,.nxv-hero,.nxv-qa-head,.nxv-tool{ opacity:1 !important; transform:none !important; }
}

/* Copiloto IA oculto hasta tener la key de Deepgram — 24 jul 2026 */
.nxv-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; }