/* ==========================================================================
   NOX BOT — Estilo del plugin NOX PRO aplicado a la web.
   Se carga al FINAL de cada página: fondo plano, fuente Manrope, tarjetas
   grises de vidrio y botones 3D en morado de marca, igual que tokens.css,
   tarjetas.css y botones.css del plugin. Sin resplandores ni degradados de
   color: los botones solo llevan su canto oscuro y una sombra negra corta.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope/manrope-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope/manrope-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Tema oscuro del plugin */
  --np-bg: #11100f;
  --np-input: #151312;
  --np-ink: #f3eee9;
  --np-ink-2: #d8d1ca;
  --np-muted: #9a918a;
  --np-line: #2d2926;
  --np-brand: #6b1eff;
  --np-brand-ink: #5a14e0;
  --np-brand-texto: #8b4dff;
  --np-canto: #300d73;
  --np-sombra: 0 7px 8px -2px rgba(0, 0, 0, .35);
  /* Tarjetas de vidrio gris (tarjetas.css) */
  --np-tj-arriba: #1b1b1d;
  --np-tj-abajo: #0a0a0b;
  --np-tj-brillo: rgba(255, 255, 255, .12);
  --np-tj-borde: #2a2a2d;
  /* Opciones sin elegir (botones.css) */
  --np-op-fondo: #26262a;
  --np-op-hover: #303035;
  --np-op-texto: #e6e6ea;
  --np-op-canto: #0e0e10;

  /* Tokens de inicio.css, cuenta.css, compra.css y planes.css */
  --bg: var(--np-bg);
  --panel: var(--np-tj-arriba);
  --slate: var(--np-op-fondo);
  --ring: var(--np-tj-borde);
  --ring-2: #3a3a3f;
  --muted: var(--np-muted);
  --frost: var(--np-ink-2);
  --white: var(--np-ink);
  --brand: var(--np-brand);
  --brand-hover: var(--np-brand-ink);
  --brand-text: var(--np-brand-texto);
  --brand-soft: rgba(107, 30, 255, .2);
  --radius: 14px;
  --radius-card: 20px;
  --radius-panel: 26px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ───────── Fondo plano, sin figuras animadas ───────── */
/* Fondo con puntos (patrón de escannord en Uiverse) en versión oscura */
:root { --np-fondo-puntos: radial-gradient(rgba(255, 255, 255, .11) 10%, transparent 1%) 0 0 / 11px 11px, var(--np-bg); }
html, body { background: var(--np-fondo-puntos) !important; background-attachment: fixed !important; }
body { font-family: var(--font); color: var(--np-muted); }
.bg-motion { display: none !important; }
.hero::before { display: none; }
.site-header { background: color-mix(in srgb, var(--np-bg) 86%, transparent); border-bottom-color: var(--np-tj-borde); }
h1, h2, h3 { font-family: var(--font); }

/* ───────── Tarjetas grises de vidrio ───────── */
.product-panel,
.product-card,
.steps li,
.cta,
.plan-card,
.login-module,
.checkout-payment,
.yape-dialog {
  position: relative;
  border: 1px solid var(--np-tj-borde);
  border-radius: 26px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%),
    linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
}
.product-card:hover { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6); border-color: var(--np-brand); }
/* Dentro de la tarjeta no va otro marco: una sola tarjeta */
.panel-body { border-radius: 0; box-shadow: none; }
.pane-head { padding-left: 4px; padding-right: 4px; }
.yape-dialog { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.yape-dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* ───────── Portada: interfaz de NOX PRO como en CorelDRAW ───────── */
.np-panel {
  min-width: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--np-tj-borde);
  border-radius: 26px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%),
    linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
  color: var(--np-ink-2);
}
.np-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--np-tj-borde); }
.np-top img { height: 26px; width: auto; }
.np-iconos { display: flex; gap: 8px; }
.np-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--np-brand); color: #fff; font-size: 15px;
  box-shadow: 0 3px 0 var(--np-canto), var(--np-sombra);
}
/* Categorías: gris sin elegir, morado al elegir */
.np-cats { display: flex; gap: 5px; padding: 5px 5px 8px; border-radius: 22px; background: rgba(255, 255, 255, .03); }
.np-cats span {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 999px;
  background: var(--np-op-fondo); color: var(--np-op-texto);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 3px 0 var(--np-op-canto);
}
.np-cats span.on { background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
/* Herramientas: icono arriba y nombre abajo, como el menú del plugin */
.np-tools { margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.np-tools span {
  min-height: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border-radius: 16px; border: 1px solid var(--np-tj-borde);
  background: var(--np-input); color: var(--np-ink-2);
  font-size: 12px; font-weight: 700; text-align: center;
}
.np-tools iconify-icon { font-size: 20px; color: var(--np-muted); }
.np-tools span.on { background: var(--np-brand); border-color: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
.np-tools span.on iconify-icon { color: #fff; }
/* Herramienta abierta */
.np-vista {
  margin-top: 14px; padding: 16px;
  border: 1px solid var(--np-tj-borde); border-radius: 20px;
  background: linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
}
.np-head { display: flex; align-items: center; gap: 12px; }
.np-ic {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--np-brand); color: #fff; font-size: 18px;
  box-shadow: 0 3px 0 var(--np-canto);
}
.np-head b { display: block; color: var(--np-ink); font-size: 16px; font-weight: 800; }
.np-head small { display: block; color: var(--np-muted); font-size: 12.5px; }
.np-seg { margin-top: 14px; display: flex; gap: 4px; padding: 4px 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .03); }
.np-seg span {
  flex: 1; padding: 7px 4px; border-radius: 999px; text-align: center;
  background: var(--np-op-fondo); color: var(--np-op-texto);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 3px 0 var(--np-op-canto);
}
.np-seg span.on { background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
.np-datos { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-datos div { padding: 10px 12px; border-radius: 14px; background: var(--np-input); border: 1px solid var(--np-line); }
.np-datos small { display: block; color: var(--np-muted); font-size: 11.5px; font-weight: 600; }
.np-datos b { display: block; margin-top: 2px; color: var(--np-ink); font-size: 17px; font-weight: 800; }
.np-btn {
  margin-top: 14px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 999px;
  background: var(--np-brand); color: #fff;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 0 var(--np-canto), var(--np-sombra);
}
@media (max-width: 560px) {
  .np-cats { flex-wrap: wrap; }
  .np-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* El icono del código promocional no gira al abrirse */
.promo-toggle[aria-expanded="true"] iconify-icon { transform: none; }

/* Simulación del chat dentro del panel */
.chat-list li.is-active { background: var(--np-op-fondo); border-radius: 14px; }
.wa-in { background: var(--np-op-fondo); box-shadow: none; border-radius: 14px; }
.wa-out { background: var(--np-brand); border-radius: 14px; }
.wa-quote { background: rgba(0, 0, 0, .25); }

/* Etiquetas */
.tag,
.checkout-card-brands span {
  background: var(--np-op-fondo);
  box-shadow: none;
  color: var(--np-op-texto);
  border-radius: 999px;
}
.release-pill { background: var(--np-op-fondo); box-shadow: 0 3px 0 var(--np-op-canto); color: var(--np-op-texto); }

/* ───────── Botones 3D (botones.css) ───────── */
.btn,
.plan-btn,
.login-submit,
.checkout-payment > a,
.promo-box button,
.payment-options a,
.payment-options .pay-option,
.yape-send {
  border-radius: 999px;
  font-weight: 700;
  transform: translateY(0);
  transition:
    transform 600ms cubic-bezier(.3, .7, .4, 1),
    box-shadow 600ms cubic-bezier(.3, .7, .4, 1),
    background-color .15s, color .15s, filter 250ms;
}
.btn { padding: 9px 18px; }
.btn-sm { padding: 6px 12px; }

/* Acción principal: morado lleno con canto morado oscuro */
.btn-primary,
.plan-btn,
.login-submit,
.checkout-payment > a,
#izipayForm .kr-payment-button,
#izipayForm button[type="submit"] {
  background: var(--np-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 0 var(--np-canto), var(--np-sombra) !important;
}
.btn-primary:hover,
.plan-btn:hover,
.login-submit:hover,
.checkout-payment > a:hover { background: var(--np-brand) !important; }
#izipayForm .kr-payment-button,
#izipayForm button[type="submit"] { border-radius: 999px !important; border-color: transparent !important; }

/* Secundarios: gris sin elegir, como las opciones del plugin */
.btn-outline,
.promo-box button,
.payment-options a,
.payment-options .pay-option {
  background: var(--np-op-fondo);
  color: var(--np-op-texto);
  box-shadow: 0 4px 0 var(--np-op-canto), var(--np-sombra);
}
.btn-outline:hover,
.promo-box button:hover,
.payment-options a:hover,
.payment-options .pay-option:hover { background: var(--np-op-hover); box-shadow: 0 6px 0 var(--np-op-canto), var(--np-sombra); }
.payment-options a,
.payment-options .pay-option { border-radius: 16px; }
.payment-options a.is-card { box-shadow: 0 4px 0 var(--np-canto), var(--np-sombra); background: var(--np-brand); }

/* Al pasar el mouse sube; al pulsar baja */
.btn:hover,
.plan-btn:hover,
.login-submit:hover,
.checkout-payment > a:hover,
.promo-box button:hover:not(:disabled),
.payment-options a:hover,
.payment-options .pay-option:hover {
  filter: brightness(110%);
  transform: translateY(-2px);
  transition:
    transform 250ms cubic-bezier(.3, .7, .4, 1.5),
    box-shadow 250ms cubic-bezier(.3, .7, .4, 1.5),
    background-color .15s, color .15s, filter 250ms;
}
.btn-primary:hover,
.plan-btn:hover,
.login-submit:hover,
.checkout-payment > a:hover { box-shadow: 0 6px 0 var(--np-canto), var(--np-sombra) !important; }
.btn:active,
.plan-btn:active,
.login-submit:active,
.checkout-payment > a:active,
.promo-box button:active,
.payment-options a:active,
.payment-options .pay-option:active {
  transform: translateY(3px);
  transition: transform 34ms, box-shadow 34ms;
}
.btn-primary:active,
.plan-btn:active,
.login-submit:active { box-shadow: 0 1px 0 var(--np-canto), 0 2px 3px rgba(0, 0, 0, .3) !important; }

/* Iconos redondos de la cabecera */
.nav-ghost { border-radius: 50%; background: var(--np-op-fondo); color: var(--np-op-texto); box-shadow: 0 3px 0 var(--np-op-canto); }
.nav-ghost:hover { color: var(--np-brand-texto); }

/* Botón para copiar el enlace del grupo */
.command {
  border-radius: 999px;
  background: var(--np-input);
  box-shadow: inset 0 0 0 1px var(--np-line);
}
.command:hover { background: var(--np-op-fondo); }

/* ───────── Selector de periodo en planes ───────── */
.plan-tabs { padding: 4px 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .03); box-shadow: none; }
.plan-tabs button { height: 32px; border-radius: 999px; color: var(--np-op-texto); font-weight: 700; }
.plan-indicator { top: 4px; left: 4px; width: calc((100% - 8px) / var(--count)); height: 32px; border-radius: 999px; box-shadow: 0 3px 0 var(--np-canto); }
.plan-tabs button[aria-selected="true"] { color: #fff; }
.plan-footer { border-top-color: var(--np-tj-borde); }

/* ───────── Campos (input-ui del plugin) ───────── */
.login-module input,
.login-module select,
.promo-box input {
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--np-input);
  box-shadow: inset 0 0 0 1px var(--np-line);
  color: var(--np-ink);
}
.login-module input:focus,
.login-module select:focus,
.promo-box input:focus { box-shadow: inset 0 0 0 1px #4a443f; }
.password-toggle { border-radius: 50%; right: 8px; }
.alert, .checkout-error { border-radius: 14px; }

/* ───────── Separadores y textos ───────── */
.section, .site-footer, .login-foot, .checkout-wrap, .checkout-summary .is-total { border-color: var(--np-tj-borde); }
.separator::before, .separator::after { background: var(--np-tj-borde); }
.feature-logo { border-radius: 8px; }

/* ───────── Página CDR version: mismos colores y letra ───────── */
.landing-page {
  --fondo: var(--np-bg);
  --panel: var(--np-tj-arriba);
  --panel2: var(--np-op-fondo);
  --borde: var(--np-tj-borde);
  --texto: var(--np-ink);
  --textoSuave: var(--np-muted);
  --morado: var(--np-brand-texto);
  background: var(--np-bg) !important;
  font-family: var(--font);
}
.landing-page h1, .landing-page h2 { font-family: var(--font); font-style: normal; font-weight: 800; letter-spacing: -0.03em; }
.site-header-bar { background: color-mix(in srgb, var(--np-bg) 90%, transparent); }

/* ==========================================================================
   Mi panel y administrador (dashboard.css, cuerpos .is-user y .is-admin):
   los mismos colores, tarjetas y botones del plugin.
   ========================================================================== */
.is-admin, .is-user {
  --purple: var(--np-brand);
  --purple-dark: var(--np-brand-texto);
  --purple-soft: rgba(107, 30, 255, .2);
  --purple-mid: #3a3a3f;
  --ink: var(--np-ink);
  --muted: var(--np-muted);
  --line: var(--np-tj-borde);
  --surface: var(--np-op-fondo);
  --nx-bg: var(--np-bg);
  --nx-panel: var(--np-tj-arriba);
  --nx-slate: var(--np-op-fondo);
  --nx-ring: var(--np-tj-borde);
  --nx-ring-2: #3a3a3f;
  --nx-brand: var(--np-brand);
  --nx-brand-hover: var(--np-brand-ink);
  --nx-brand-text: var(--np-brand-texto);
  font-family: var(--font);
}
.is-admin, .is-user,
.is-admin .workspace, .is-user .workspace,
.is-admin main, .is-user main,
.is-admin .sidebar, .is-user .sidebar { background: transparent; font-family: var(--font); }
.is-admin .topbar, .is-user .topbar { background: color-mix(in srgb, var(--np-bg) 86%, transparent); }
.is-admin h1, .is-admin h2, .is-admin h3, .is-user h1, .is-user h2, .is-user h3 { font-family: var(--font); }

/* Tarjetas grises de vidrio */
.is-admin :is(.panel, .metric, .tool-card, .download-hero, .plan-mini, .charge-summary > div, .result-item, .nest-side),
.is-user :is(.panel, .metric, .tool-card, .download-hero, .plan-mini, .charge-summary > div, .result-item, .nest-side) {
  border: 1px solid var(--np-tj-borde);
  border-radius: 22px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%),
    linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
}
/* Una tarjeta dentro de otra no lleva su propio marco */
.is-admin :is(.panel, .tool-card, .download-hero) :is(.panel, .metric, .tool-card, .result-item),
.is-user :is(.panel, .tool-card, .download-hero) :is(.panel, .metric, .tool-card, .result-item) {
  border: 0; background: transparent; box-shadow: none;
}
.is-admin .tool-card:hover, .is-user .tool-card:hover { border-color: var(--np-brand); }
.is-admin .nox-dialog, .is-user .nox-dialog,
.is-admin .account-menu, .is-user .account-menu {
  border: 1px solid var(--np-tj-borde);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
}
.is-admin .nox-dialog::backdrop, .is-user .nox-dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* Menú lateral: gris al pasar, morado lleno el elegido, como el plugin */
.is-admin .nav-item, .is-user .nav-item { border-radius: 999px; font-weight: 600; }
.is-admin .nav-item:hover, .is-user .nav-item:hover { background: var(--np-op-fondo); color: var(--np-ink); }
.is-admin .nav-item.active, .is-user .nav-item.active,
.is-admin .nav-item.active:focus, .is-user .nav-item.active:focus {
  background: var(--np-brand); color: #fff;
  box-shadow: 0 3px 0 var(--np-canto);
}
.is-admin .nav-item.active svg, .is-user .nav-item.active svg { color: #fff; }
.is-admin .nav-item.active .nav-badge, .is-user .nav-item.active .nav-badge { background: #fff; color: var(--np-brand); }
.is-admin .sb-profile, .is-user .sb-profile { border-radius: 18px; background: var(--np-op-fondo); border-color: transparent; box-shadow: 0 3px 0 var(--np-op-canto); }
.is-admin .avatar, .is-user .avatar { background: var(--np-brand); color: #fff; }

/* Botones 3D */
.is-admin .button, .is-user .button,
.is-admin .tool-controls .button, .is-user .tool-controls .button {
  border-radius: 999px;
  border-color: transparent;
  background: var(--np-brand);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--np-canto), var(--np-sombra);
  transform: translateY(0);
  transition:
    transform 600ms cubic-bezier(.3, .7, .4, 1),
    box-shadow 600ms cubic-bezier(.3, .7, .4, 1),
    background-color .15s, color .15s, filter 250ms;
}
.is-admin :is(.button-outline, .button-soft, .tool-card .button), .is-user :is(.button-outline, .button-soft, .tool-card .button) {
  background: var(--np-op-fondo); color: var(--np-op-texto);
  box-shadow: 0 4px 0 var(--np-op-canto), var(--np-sombra);
}
.is-admin .button:hover, .is-user .button:hover {
  filter: brightness(110%);
  transform: translateY(-2px);
  transition:
    transform 250ms cubic-bezier(.3, .7, .4, 1.5),
    box-shadow 250ms cubic-bezier(.3, .7, .4, 1.5),
    background-color .15s, color .15s, filter 250ms;
}
.is-admin .button:not(.button-outline):not(.button-soft):hover, .is-user .button:not(.button-outline):not(.button-soft):hover { background: var(--np-brand); }
.is-admin :is(.button-outline, .button-soft):hover, .is-user :is(.button-outline, .button-soft):hover { background: var(--np-op-hover); }
.is-admin .button:active, .is-user .button:active { transform: translateY(3px); transition: transform 34ms, box-shadow 34ms; }
.is-admin .button.button-danger, .is-user .button.button-danger { background: var(--np-op-fondo); color: #ff8a6b; box-shadow: 0 4px 0 var(--np-op-canto), var(--np-sombra); }
.is-admin .button.button-danger-solid, .is-user .button.button-danger-solid { background: #e3122f; color: #fff; box-shadow: 0 4px 0 #7a0618, var(--np-sombra); }
.is-admin .charge-actions button, .is-user .charge-actions button { border-radius: 999px; }

/* Campos en píldora */
.is-admin :is(.search, .field input, .field select, .charge-form input, .charge-form select, .version-form input[type="text"], .url-box input, .secret-input),
.is-user :is(.search, .field input, .field select, .charge-form input, .charge-form select, .version-form input[type="text"], .url-box input, .secret-input) {
  border-radius: 999px;
  background: var(--np-input);
  border-color: var(--np-line);
}
.is-admin .tool-workspace textarea, .is-user .tool-workspace textarea { border-radius: 18px; background: var(--np-input); }

/* Tablas y estados */
.is-admin table tbody tr:hover, .is-user table tbody tr:hover { background: var(--np-op-fondo); }
.is-admin .status, .is-user .status { border-radius: 999px; }
.is-admin .toast, .is-user .toast { border-radius: 16px; background: var(--np-op-fondo); }

/* ───────── Administrador: Equipos NOX PRO ───────── */
.is-admin .eq-metricas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.eq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.eq-chip {
  padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--np-op-fondo); color: var(--np-op-texto);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 0 var(--np-op-canto);
}
.eq-chip:hover { background: var(--np-op-hover); }
.eq-chip.on { background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
.eq-fila { cursor: pointer; }
.eq-fila td .status { display: inline-block; margin-top: 6px; }
.eq-ficha { width: min(640px, calc(100% - 32px)); }
.eq-ficha-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.eq-ficha-head h2 { margin: 0 !important; }
.eq-ficha-head p { margin: 2px 0 0 !important; }
.eq-ficha-ic {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--np-brand); color: #fff;
  box-shadow: 0 3px 0 var(--np-canto);
}
.eq-ficha-ic svg { width: 22px; height: 22px; }
.eq-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eq-datos div { padding: 10px 14px; border-radius: 14px; background: var(--np-input); border: 1px solid var(--np-line); }
.eq-datos small { display: block; color: var(--np-muted); font-size: 11.5px; font-weight: 600; }
.eq-datos b { display: block; margin-top: 2px; color: var(--np-ink); font-size: 14px; font-weight: 700; word-break: break-word; }
.eq-aviso { margin-bottom: 14px !important; padding: 10px 14px; border-radius: 14px; background: var(--np-op-fondo); color: var(--np-ink-2) !important; }
@media (max-width: 900px) { .is-admin .eq-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eq-datos { grid-template-columns: 1fr; } }

/* Equipos en tarjetas */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.eq-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border: 1px solid var(--np-tj-borde); border-radius: 22px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%),
    linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
}
.eq-card.en-uso { border-color: var(--np-brand); }
.eq-card-head { display: flex; align-items: center; gap: 12px; }
.eq-card-head > div { flex: 1; min-width: 0; }
.eq-card-head b { display: block; color: var(--np-ink); font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-card-head small { display: block; color: var(--np-muted); font-size: 12.5px; }
.eq-pc {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--np-op-fondo); color: var(--np-op-texto);
  box-shadow: 0 3px 0 var(--np-op-canto);
}
.eq-card.en-uso .eq-pc { background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
.eq-pc svg { width: 21px; height: 21px; }
.eq-cliente { padding: 10px 14px; border-radius: 14px; background: var(--np-input); border: 1px solid var(--np-line); }
.eq-cliente b { display: block; color: var(--np-ink); font-size: 14px; font-weight: 700; }
.eq-cliente small { display: block; margin-top: 2px; color: var(--np-muted); font-size: 12px; overflow-wrap: anywhere; }
.eq-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eq-specs div { min-width: 0; padding: 9px 12px; border-radius: 14px; background: var(--np-input); border: 1px solid var(--np-line); }
.eq-specs small { display: block; color: var(--np-muted); font-size: 11px; font-weight: 600; }
.eq-specs b { display: block; margin-top: 2px; color: var(--np-ink); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-card-pie { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.eq-card-pie > div small { display: block; color: var(--np-muted); font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.eq-card-pie > div b { color: var(--np-ink); font-size: 13px; }
.eq-card-pie .button { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.eq-card-pie .button svg { width: 17px; height: 17px; }
.eq-vacia { opacity: .75; }
@media (max-width: 600px) { .eq-grid { grid-template-columns: 1fr; } }

/* ───────── Administrador: orden del sistema Alhaux ───────── */
.ax-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ax-stat, .ax-card {
  display: flex; flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--np-tj-borde); border-radius: 22px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%),
    linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
}
.ax-ic {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 18px; margin-bottom: 16px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.ax-lbl { color: var(--np-muted); font-size: 13px; font-weight: 600; }
.ax-val { margin-top: 2px; color: var(--np-ink); font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.ax-val small { color: var(--np-muted); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ax-det { margin-top: 6px; color: var(--np-muted); font-size: 12.5px; }
.ax-graficos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.ax-card { min-height: 290px; }
.ax-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ax-head h6 { margin: 0; color: var(--np-ink); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ax-head small { color: var(--np-muted); font-size: 12.5px; }
/* Dona con leyenda */
.ax-dona { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.ax-dona svg { width: 100%; height: 100%; }
.ax-dona-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ax-dona-centro b { color: var(--np-ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ax-dona-centro span { color: var(--np-muted); font-size: 12px; font-weight: 600; }
.ax-leyenda { display: grid; gap: 6px; }
.ax-leyenda div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--np-ink-2); }
.ax-leyenda i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ax-leyenda b { margin-left: auto; color: var(--np-ink); }
/* Barras */
.ax-barra { padding: 7px 0; }
.ax-barra > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--np-ink-2); }
.ax-barra > div:first-child b { color: var(--np-ink); }
.ax-pista { height: 8px; margin-top: 6px; border-radius: 999px; background: var(--np-op-fondo); overflow: hidden; }
.ax-pista i { display: block; height: 100%; border-radius: 999px; background: var(--np-brand-texto); }
.ax-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 24px; color: var(--np-muted); font-size: 13.5px; text-align: center; }
.ax-vacio i { font-size: 26px; color: var(--np-brand-texto); }
/* Título de sección con filtros a la derecha */
.ax-seccion { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ax-seccion h2 { margin: 0; color: var(--np-ink); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ax-seccion p { margin: 2px 0 0; color: var(--np-muted); font-size: 13px; }
.ax-seccion .eq-chips { margin: 0; }
/* Tarjetas de equipo del mismo alto */
.eq-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: stretch; }
.eq-card { height: 100%; }
@media (max-width: 1200px) { .ax-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax-graficos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ax-stats, .ax-graficos { grid-template-columns: 1fr; } }

/* La licencia sin PC no se estira al alto de las demas tarjetas */
.eq-card.eq-vacia { height: auto; align-self: start; }


/* Equipos: tipos de licencia, alertas y acciones */
.eq-tipos { margin: -4px 0 18px; }
.eq-chip em { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-style: normal; font-size: 11.5px; }
.eq-chip.on em { background: rgba(255, 255, 255, .25); }
.eq-alerta {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 14px;
  background: rgba(227, 18, 47, .14); color: #ff8a6b;
  font-size: 12.5px; font-weight: 700;
}
.eq-card:has(.eq-alerta) { border-color: rgba(227, 18, 47, .55); }
.eq-aviso-reventa {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 16px 18px;
  border: 1px solid rgba(227, 18, 47, .45); border-radius: 22px;
  background: linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
}
.eq-aviso-reventa > i { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #e3122f; color: #fff; font-size: 19px; box-shadow: 0 3px 0 #7a0618; }
.eq-aviso-reventa > div { flex: 1; min-width: 220px; }
.eq-aviso-reventa b { display: block; color: var(--np-ink); font-size: 15px; }
.eq-aviso-reventa span { color: var(--np-muted); font-size: 13px; }
.eq-aviso-reventa .button { display: inline-flex; align-items: center; gap: 8px; }
.eq-acciones { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }
.eq-acciones .button { display: inline-flex; align-items: center; gap: 7px; margin-left: 0 !important; }

/* Barra de desplazamiento gris del plugin (antes azul) */
html { scrollbar-color: #3a3a3f var(--np-bg) !important; }
.is-admin :is(.sidebar, .workspace, .table-wrap), .is-user :is(.sidebar, .workspace, .table-wrap) { scrollbar-color: #3a3a3f transparent !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--np-bg); }
::-webkit-scrollbar-thumb { background: #3a3a3f !important; border-radius: 999px; border: 2px solid var(--np-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--np-brand) !important; }
::-webkit-scrollbar-button { display: none; }
/* Perfil del admin: solo muestra el nombre, sin menú */
.is-admin div.sb-profile { cursor: default; }
/* Botón de admin en el navbar */
.header-action iconify-icon { margin-right: 6px; }

/* Tarjetas sin contorno de color: el aviso va dentro de la tarjeta */
.eq-card.en-uso, .eq-card:has(.eq-alerta) { border-color: var(--np-tj-borde) !important; }
.eq-aviso-reventa { border-color: var(--np-tj-borde) !important; }
/* Licencias de la PC dentro del bloque del cliente */
.eq-lic { display: flex !important; align-items: center; gap: 6px; }
.eq-lic i { color: var(--np-brand-texto); font-size: 11px; }

/* Licencia vencida dentro de la tarjeta */
.eq-lic.vencida { opacity: .6; }
.eq-lic .status { margin-left: 6px; padding: 1px 8px; font-size: 10.5px; }


/* Licencias con clave completa y vencimiento */
.eq-lic { display: block !important; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--np-line); }
.eq-lic-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--np-ink-2); font-size: 12px; font-weight: 600; }
.eq-lic-top i { color: var(--np-brand-texto); font-size: 11px; }
.eq-clave { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.eq-clave code { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 10px; background: var(--np-op-fondo); color: var(--np-ink); font-size: 12px; font-weight: 700; letter-spacing: .03em; overflow-wrap: anywhere; }
.eq-copiar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--np-op-fondo); color: var(--np-op-texto); cursor: pointer; box-shadow: 0 3px 0 var(--np-op-canto); }
.eq-copiar:hover { background: var(--np-brand); color: #fff; }
/* Formulario para generar licencias */
.eq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eq-form label { display: grid; gap: 6px; color: var(--np-ink-2); font-size: 13px; font-weight: 600; }
.eq-form label:first-child, .eq-form .eq-check, .eq-form .eq-resultado, .eq-form .nox-dialog-actions { grid-column: 1 / -1; }
.eq-form input:not([type=checkbox]), .eq-form select { height: 42px; padding: 0 14px; border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-input); color: var(--np-ink); font: inherit; }
.eq-form .eq-check { display: flex; align-items: center; gap: 8px; }
.eq-form .eq-check input { accent-color: var(--np-brand); width: 16px; height: 16px; }
.eq-resultado { padding: 12px 14px; border-radius: 16px; background: var(--np-input); border: 1px solid var(--np-line); }
.eq-resultado b { display: block; color: var(--np-ink); margin-bottom: 4px; }
.admin-head-actions .button i { margin-right: 6px; }

/* Vencimiento destacado */
.eq-vence { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.eq-vence.ok { background: rgba(47, 165, 95, .18); color: #5fd08f; }
.eq-vence.pronto { background: rgba(232, 162, 28, .2); color: #f2c15d; }
.eq-vence.mal { background: rgba(227, 18, 47, .18); color: #ff8a6b; }

/* Menú lateral a la altura de la pantalla: las opciones se desplazan dentro y
   "Ir al inicio" y "Cerrar sesión" quedan siempre visibles abajo. */
@media (min-width: 901px) {
  .is-admin .sidebar, .is-user .sidebar { overflow: hidden; }
  .is-admin #mainNav, .is-user #mainNav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .is-admin .sb-bottom, .is-user .sb-bottom { flex: none; }
}
.is-user div.sb-profile { cursor: default; }

/* Sin contorno de color al pasar el mouse: todas las tarjetas con el mismo borde gris */
.product-card:hover, .is-admin .tool-card:hover, .is-user .tool-card:hover, .plan-card:hover { border-color: var(--np-tj-borde) !important; }


/* Página Plugin: planes de NOX PRO como en el flyer */
.np-planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.np-plan, .np-permanente {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px 22px;
  border: 1px solid var(--np-tj-borde); border-radius: 22px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%),
    linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo));
  color: var(--np-ink);
}
.np-plan.top { background: var(--np-brand); border-color: var(--np-brand); box-shadow: 0 4px 0 var(--np-canto), var(--np-sombra); }
.np-plan-nombre { font-size: 20px; font-weight: 800; }
.np-plan-periodo { margin-top: 2px; color: var(--np-muted); font-size: 13.5px; font-weight: 600; }
.np-plan-precio { display: flex; align-items: flex-start; gap: 4px; margin-top: 18px; font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.np-plan-precio sup { margin-top: 6px; font-size: 18px; color: var(--np-brand-texto); }
.np-plan-precio small { align-self: flex-end; margin: 0 0 6px 6px; color: var(--np-muted); font-size: 14px; letter-spacing: 0; }
.np-plan-mes { margin-top: 8px; color: var(--np-ink-2); font-size: 13.5px; font-weight: 700; }
.np-plan.top .np-plan-periodo, .np-plan.top .np-plan-mes { color: rgba(255, 255, 255, .85); }
.np-plan.top .np-plan-precio sup { color: #fff; }
.np-plan-ahorro { position: absolute; top: -12px; right: 14px; padding: 4px 11px; border-radius: 9px; background: var(--np-brand); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 3px 0 var(--np-canto); }
.np-plan.top .np-plan-ahorro { background: #fff; color: var(--np-brand); }
.np-plan-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; padding: 10px 16px; border-radius: 999px;
  background: var(--np-op-fondo); color: var(--np-op-texto);
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 0 var(--np-op-canto), var(--np-sombra);
}
.np-plan.top .np-plan-btn { background: #fff; color: var(--np-brand); box-shadow: 0 4px 0 #c9b6ff; }
.np-permanente { margin-top: 16px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; }
.np-permanente > div { flex: 1; min-width: 240px; }
.np-permanente .np-plan-precio { margin-top: 0; }
.np-permanente .np-plan-btn { margin-top: 0; background: var(--np-brand); color: #fff; box-shadow: 0 4px 0 var(--np-canto), var(--np-sombra); }
.np-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.np-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-op-texto); font-size: 13px; font-weight: 700; }
.np-chips iconify-icon { color: #5fd08f; }
@media (max-width: 1000px) { .np-planes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .np-planes { grid-template-columns: 1fr; } }

/* Códigos: formulario en tarjeta y planes agrupados */
.ax-card + .ax-card, .ax-stats + .ax-card { margin-top: 16px; }
.ax-head-ic { display: flex; align-items: center; gap: 12px; }
.ax-head-ic .ax-ic { margin: 0; width: 38px; height: 38px; font-size: 16px; flex: none; }
.ax-form-card { min-height: 0; }
.ax-promo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ax-promo label:first-child { grid-column: auto; }
.ax-promo .ax-planes, .ax-promo .nox-dialog-actions { grid-column: 1 / -1; }
.ax-planes { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--np-input); border: 1px solid var(--np-line); }
.ax-planes-t { color: var(--np-ink); font-size: 13.5px; font-weight: 700; }
.ax-planes-t small { margin-left: 6px; color: var(--np-muted); font-weight: 600; }
.ax-grupo { display: grid; gap: 8px; }
.ax-grupo-t { display: flex; align-items: center; gap: 7px; color: var(--np-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ax-grupo-t i { color: var(--np-brand-texto); font-size: 14px; }
.ax-check { position: relative; }
.ax-check input { position: absolute; opacity: 0; pointer-events: none; }
.ax-check:has(input:checked) { background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
.ax-card .table-wrap { margin: 0 -4px; }
.ax-promo .nox-dialog-actions .button { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .ax-promo { grid-template-columns: 1fr 1fr; } }

/* Beneficios de cada plan, como en designreyes.es */
.np-plan-lista { display: grid; gap: 8px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--np-tj-borde); list-style: none; }
.np-plan-lista li { display: flex; align-items: center; gap: 8px; color: var(--np-ink); font-size: 13.5px; font-weight: 700; }
.np-plan-lista iconify-icon { color: var(--np-brand-texto); font-size: 16px; }
.np-plan.top .np-plan-lista { border-top-color: rgba(255, 255, 255, .25); }
.np-plan.top .np-plan-lista iconify-icon { color: #fff; }
.np-plan .np-plan-btn { margin-top: auto; }
.np-plan .np-plan-lista { margin-bottom: 20px; }


/* ───────── Página Plugin: misma información que designreyes.es ───────── */
.np-plugin { max-width: 1180px; margin: 0 auto; padding: 56px 24px 80px; }
.np-hero-plugin { text-align: center; margin-bottom: 36px; }
.np-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-op-texto); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 3px 0 var(--np-op-canto); }
.np-badge iconify-icon { color: var(--np-brand-texto); }
.np-hero-plugin h1 { margin: 18px 0 12px; color: var(--np-ink); font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.np-hero-plugin h1 span { color: var(--np-brand-texto); }
.np-hero-plugin p { max-width: 620px; margin: 0 auto; color: var(--np-ink-2); font-size: 17px; line-height: 1.55; }
.np-dudas { margin: 22px 0 28px; text-align: center; color: var(--np-muted); font-size: 15px; }
.np-dudas a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--np-brand-texto); font-weight: 800; }
.np-info { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.np-caja { padding: 26px; border: 1px solid var(--np-tj-borde); border-radius: 22px; background: radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%), linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo)); color: var(--np-ink); }
.np-caja h2 { margin: 6px 0 8px; color: var(--np-ink); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.np-caja p { color: var(--np-muted); font-size: 14.5px; }
.np-caja-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--np-brand); color: #fff; font-size: 21px; box-shadow: 0 4px 0 var(--np-canto); }
.np-eyebrow { display: block; margin-top: 14px; color: var(--np-brand-texto); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.np-caja > .np-eyebrow:first-child { margin-top: 0; }
.np-prueba { display: flex; flex-direction: column; align-items: center; text-align: center; }
.np-prueba-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--np-brand); color: #fff; box-shadow: 0 5px 0 var(--np-canto), var(--np-sombra); transition: transform .25s, filter .25s; }
.np-prueba-btn:hover { transform: translateY(-2px); filter: brightness(110%); }
.np-prueba-btn iconify-icon { font-size: 26px; }
.np-prueba-btn b { display: block; font-size: 17px; font-weight: 800; text-transform: uppercase; }
.np-prueba-btn small { display: block; font-size: 12.5px; opacity: .85; }
.np-nota { margin-top: 12px; color: var(--np-muted); font-size: 12.5px; }
.np-funciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.np-funciones li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--np-input); border: 1px solid var(--np-line); color: var(--np-ink); font-size: 14px; font-weight: 700; }
.np-funciones iconify-icon { color: var(--np-brand-texto); font-size: 17px; flex: none; }
.np-instalacion { margin-top: 16px; }
.np-instalacion h2 { margin: 16px 0 18px; font-size: clamp(26px, 3vw, 34px); }
.np-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.np-pasos > div { position: relative; padding: 20px; border-radius: 18px; background: var(--np-input); border: 1px solid var(--np-line); }
.np-pasos b { display: block; margin-top: 14px; color: var(--np-ink); font-size: 17px; font-weight: 800; }
.np-pasos p { margin-top: 4px; }
.np-pasos strong { color: var(--np-ink); }
.np-paso-n { position: absolute; top: 12px; right: 18px; color: var(--np-op-fondo); font-size: 34px; font-weight: 800; }
.np-aviso { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 18px; border-radius: 16px; background: rgba(232, 162, 28, .1); border: 1px solid rgba(232, 162, 28, .3); }
.np-aviso iconify-icon { color: #f2c15d; font-size: 22px; flex: none; }
.np-aviso b { display: block; color: #f2c15d; font-size: 14.5px; }
.np-aviso span { color: var(--np-ink-2); font-size: 13.5px; }
@media (max-width: 900px) { .np-info, .np-pasos, .np-funciones { grid-template-columns: 1fr; } }
/* Panel y administrador con el mismo fondo de puntos */
body.is-admin, body.is-user { background: var(--np-fondo-puntos) !important; background-attachment: fixed !important; }
.is-admin .workspace, .is-user .workspace, .is-admin main, .is-user main { background: transparent !important; }
.is-admin .sidebar, .is-user .sidebar { background: rgba(17, 16, 15, .85) !important; backdrop-filter: blur(6px); }


.np-permanente .np-plan-periodo { display: block; margin-top: 2px; }

/* ───────── Portada: solo la presentación (como masterpsd.com) ───────── */
.nx-portada { max-width: 1240px; min-height: calc(100vh - 64px); margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 56px; }
.nx-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--np-brand-texto); }
.nx-texto h1 { margin: 22px 0 18px; color: var(--np-ink); font-size: clamp(40px, 5.2vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.nx-texto h1 span { color: var(--np-brand-texto); }
.nx-texto p { max-width: 580px; color: var(--np-ink-2); font-size: 18px; line-height: 1.6; }
.nx-texto p b { color: var(--np-ink); }
.nx-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.btn iconify-icon { margin-right: 6px; }
.nx-datos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nx-datos div { padding: 12px 20px; border-radius: 18px; border: 1px solid var(--np-tj-borde); background: linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo)); }
.nx-datos b { display: block; color: var(--np-ink); font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.nx-datos span { color: var(--np-muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nx-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 28px; text-align: center; border: 1px solid var(--np-tj-borde); border-radius: 28px; background: radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%), linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.nx-logo { height: 40px; width: auto; }
.nx-tarjeta h2 { margin: 6px 0 0; color: var(--np-ink); font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.nx-tarjeta > p { color: var(--np-muted); font-size: 15px; }
.nx-productos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin: 10px 0 6px; }
.nx-productos a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; border-radius: 20px; background: var(--np-input); border: 1px solid var(--np-line); transition: transform .25s, background-color .2s; }
.nx-productos a:hover { transform: translateY(-3px); background: var(--np-op-fondo); }
.nx-productos b { color: var(--np-ink); font-size: 17px; font-weight: 800; }
.nx-productos small { color: var(--np-muted); font-size: 13px; }
.nx-ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--np-brand); color: #fff; font-size: 23px; box-shadow: 0 4px 0 var(--np-canto); }
.btn-block { width: 100%; padding: 13px; font-size: 15.5px; }
@media (max-width: 960px) { .nx-portada { grid-template-columns: 1fr; min-height: 0; } }

/* Portada sin scroll, con bandas de fondo y carrusel de herramientas */
body.paginaInicio { height: 100vh; overflow: hidden; }
body.paginaInicio .site-footer { display: none; }
.nx-portada { position: relative; height: calc(100vh - 65px); min-height: 0; padding-top: 0; padding-bottom: 0; isolation: isolate; }
.nx-bandas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.nx-bandas path { fill: none; stroke: rgba(107, 30, 255, .16); stroke-width: 110; stroke-linecap: round; }
.nx-bandas path + path { stroke: rgba(107, 30, 255, .09); stroke-width: 80; }
.nx-texto h1 { font-size: clamp(36px, min(5vw, 7.4vh), 72px); margin: 2.2vh 0 1.8vh; }
.nx-texto p { font-size: clamp(15px, 2vh, 18px); }
.nx-acciones { margin-top: 3vh; }
.nx-datos { margin-top: 3vh; }
.nx-tarjeta { gap: 1.4vh; padding: 3vh 26px; overflow: hidden; }
.nx-tarjeta h2 { font-size: clamp(22px, 3vh, 28px); }
.nx-carrusel { width: calc(100% + 56px); margin: 1vh -28px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.nx-pista { display: flex; gap: 12px; width: max-content; animation: nx-desliza 28s linear infinite; }
.nx-carrusel:hover .nx-pista { animation-play-state: paused; }
.nx-tile { width: 132px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2.2vh 10px; border-radius: 20px; background: var(--np-input); border: 1px solid var(--np-line); }
.nx-tile b { color: var(--np-ink); font-size: 14.5px; font-weight: 800; }
.nx-tile small { padding: 2px 9px; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-brand-texto); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.nx-tile .nx-ic { width: 46px; height: 46px; font-size: 21px; }
@keyframes nx-desliza { to { transform: translateX(calc(-50% - 6px)); } }
.nx-vivo { display: inline-flex; align-items: center; gap: 8px; margin-top: .4vh; color: var(--np-muted); font-size: 13.5px; }
.nx-vivo b { color: var(--np-ink); }
.nx-vivo .nx-punto { background: #5fd08f; }
@media (max-width: 960px) { body.paginaInicio { height: auto; overflow: auto; } .nx-portada { height: auto; padding: 32px 20px; } }
@media (prefers-reduced-motion: reduce) { .nx-pista { animation: none; } }

/* ───────── Portada propia: palabra que gira, demo del panel y fondo vivo ───────── */
body.paginaInicio { animation: nx-puntos 60s linear infinite; }
@keyframes nx-puntos { to { background-position: 0 220px, 0 0; } }
.nx-giro { position: relative; display: inline-grid; vertical-align: bottom; height: 1.05em; overflow: hidden; color: var(--np-brand-texto); }
.nx-giro span { grid-area: 1 / 1; transform: translateY(110%); animation: nx-palabra 10s cubic-bezier(.7, 0, .2, 1) infinite; }
.nx-giro span:nth-child(2) { animation-delay: 2.5s; }
.nx-giro span:nth-child(3) { animation-delay: 5s; }
.nx-giro span:nth-child(4) { animation-delay: 7.5s; }
@keyframes nx-palabra { 0% { transform: translateY(110%); } 5%, 25% { transform: translateY(0); } 30%, 100% { transform: translateY(-110%); } }

.nx-demo { position: relative; padding: 2.4vh 22px 2.6vh; border: 1px solid var(--np-tj-borde); border-radius: 28px; background: radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%), linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85); }
.nx-demo-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.6vh; margin-bottom: 1.6vh; border-bottom: 1px solid var(--np-tj-borde); }
.nx-demo-top img { height: 26px; }
.nx-demo-top div { display: flex; gap: 7px; }
.nx-demo-top span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--np-brand); color: #fff; font-size: 14px; box-shadow: 0 3px 0 var(--np-canto); }
.nx-demo-cats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .03); }
.nx-demo-cats span { position: relative; z-index: 1; padding: 8px 0; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-op-texto); font-size: 12.5px; font-weight: 700; text-align: center; box-shadow: 0 3px 0 var(--np-op-canto); }
.nx-demo-cats span:nth-child(2) { animation: nx-cat 9s infinite; }
@keyframes nx-cat { 0%, 6% { background: var(--np-op-fondo); color: var(--np-op-texto); } 10%, 94% { background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); } 100% { background: var(--np-op-fondo); } }
.nx-demo-cats i { display: none; }
.nx-demo-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 1.4vh; }
.nx-demo-tools span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 1.3vh 6px; border-radius: 16px; border: 1px solid var(--np-tj-borde); background: var(--np-input); color: var(--np-ink-2); font-size: 12px; font-weight: 700; }
.nx-demo-tools iconify-icon { font-size: 19px; color: var(--np-muted); }
.nx-demo-tools .nx-elegida { animation: nx-herr 9s infinite; }
.nx-demo-tools .nx-elegida iconify-icon { animation: nx-herr-ic 9s infinite; }
@keyframes nx-herr { 0%, 14% { background: var(--np-input); color: var(--np-ink-2); border-color: var(--np-tj-borde); } 18%, 94% { background: var(--np-brand); color: #fff; border-color: var(--np-brand); box-shadow: 0 3px 0 var(--np-canto); } 100% { background: var(--np-input); } }
@keyframes nx-herr-ic { 0%, 14% { color: var(--np-muted); } 18%, 94% { color: #fff; } }
/* Hoja de tela donde caen las piezas */
.nx-demo-hoja { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1.4fr 1fr; gap: 6px; height: 12vh; margin-top: 1.6vh; padding: 8px; border-radius: 14px; background: #f4f4f6; }
.nx-demo-hoja i { border-radius: 8px 8px 4px 4px; border: 2px solid var(--np-brand); background: rgba(107, 30, 255, .14); transform: scale(0); opacity: 0; animation: nx-pieza 9s infinite; }
.nx-demo-hoja i.m { border-radius: 14px 14px 4px 4px; border-color: #8b4dff; background: rgba(107, 30, 255, .08); }
.nx-demo-hoja { grid-template-columns: repeat(6, 1fr); }
.nx-demo-hoja i:nth-child(-n+4) { grid-column: span 1; }
.nx-demo-hoja i:nth-child(1) { animation-delay: 0s; } .nx-demo-hoja i:nth-child(2) { animation-delay: .25s; } .nx-demo-hoja i:nth-child(3) { animation-delay: .5s; } .nx-demo-hoja i:nth-child(4) { animation-delay: .75s; }
.nx-demo-hoja i:nth-child(5) { animation-delay: 1s; } .nx-demo-hoja i:nth-child(6) { animation-delay: 1.2s; } .nx-demo-hoja i:nth-child(7) { animation-delay: 1.4s; } .nx-demo-hoja i:nth-child(8) { animation-delay: 1.6s; } .nx-demo-hoja i:nth-child(9) { animation-delay: 1.8s; } .nx-demo-hoja i:nth-child(10) { animation-delay: 2s; }
.nx-demo-hoja i:nth-child(-n+4) { grid-row: 1; } .nx-demo-hoja i.m { grid-row: 2; }
.nx-demo-hoja i:nth-child(1) { grid-column: 1 / 3; } .nx-demo-hoja i:nth-child(2) { grid-column: 3 / 5; } .nx-demo-hoja i:nth-child(3) { grid-column: 5 / 7; } .nx-demo-hoja i:nth-child(4) { display: none; }
@keyframes nx-pieza { 0%, 22% { transform: scale(.4) translateY(-30px); opacity: 0; } 30%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.nx-demo-estado { margin-top: 1.6vh; }
.nx-demo-txt { position: relative; display: block; height: 18px; color: var(--np-ink-2); font-size: 13px; font-weight: 700; }
.nx-demo-txt span { position: absolute; inset: 0; opacity: 0; animation: nx-txt 9s infinite; }
.nx-demo-txt span:nth-child(1) { animation-name: nx-txt1; } .nx-demo-txt span:nth-child(2) { animation-name: nx-txt2; } .nx-demo-txt span:nth-child(3) { animation-name: nx-txt3; }
@keyframes nx-txt1 { 0%, 16% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes nx-txt2 { 0%, 19% { opacity: 0; } 22%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes nx-txt3 { 0%, 58% { opacity: 0; } 61%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
.nx-demo-barra { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--np-op-fondo); overflow: hidden; }
.nx-demo-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--np-brand); animation: nx-barra 9s infinite; }
@keyframes nx-barra { 0%, 18% { width: 0; } 72% { width: 100%; } 94% { width: 100%; } 100% { width: 0; } }
.nx-demo-listo { position: absolute; left: 50%; bottom: -22px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; border: 1px solid var(--np-tj-borde); background: var(--np-tj-arriba); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); transform: translate(-50%, 20px) scale(.9); opacity: 0; animation: nx-listo 9s infinite; white-space: nowrap; }
.nx-demo-listo .nx-ic { width: 38px; height: 38px; font-size: 20px; background: #2fa55f; box-shadow: 0 3px 0 #17572f; }
.nx-demo-listo b { display: block; color: var(--np-ink); font-size: 14.5px; }
.nx-demo-listo small { color: var(--np-muted); font-size: 12.5px; }
@keyframes nx-listo { 0%, 74% { opacity: 0; transform: translate(-50%, 20px) scale(.9); } 78%, 93% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 10px) scale(.95); } }
@media (prefers-reduced-motion: reduce) { body.paginaInicio, .nx-giro span, .nx-demo * { animation: none !important; } .nx-giro span:first-child { transform: none; } .nx-demo-hoja i { transform: none; opacity: 1; } }

/* Ajustes de la portada: título en 3 líneas y hoja oscura con cuadrícula */
.nx-texto h1 { font-size: clamp(32px, min(4.3vw, 6.6vh), 62px); }
.nx-demo-hoja { background: linear-gradient(rgba(139, 77, 255, .12) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(139, 77, 255, .12) 1px, transparent 1px) 0 0 / 18px 18px, var(--np-input); border: 1px solid var(--np-line); }
.nx-demo-hoja i { background: rgba(107, 30, 255, .35); }
.nx-demo-hoja i.m { background: rgba(139, 77, 255, .22); }


/* La palabra que gira no corta letras con cola (g, p, q) */
.nx-giro { height: 1.22em; line-height: 1.12; padding-bottom: .06em; vertical-align: -.2em; }

/* ───────── Checkout (estructura de mi-series en Uiverse, en oscuro NOX) ───────── */
.nx-checkout { max-width: 460px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.nx-co-card { border: 1px solid var(--np-tj-borde); border-bottom: 0; border-radius: 22px 22px 0 0; background: radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%), linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo)); }
.nx-co-title { display: flex; align-items: center; gap: 8px; height: 48px; padding-left: 22px; border-bottom: 1px solid var(--np-tj-borde); color: var(--np-ink); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.nx-co-title iconify-icon { color: var(--np-brand-texto); font-size: 16px; }
.nx-co-steps { display: grid; gap: 12px; padding: 20px 22px; }
.nx-co-steps hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--np-tj-borde); }
.nx-co-steps :is(.nx-co-izq, .nx-co-der) > div > span { display: block; margin-bottom: 10px; color: var(--np-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; }
.nx-co-steps p { color: var(--np-ink-2); font-size: 13.5px; }
.nx-co-plan { color: var(--np-ink) !important; font-size: 17px !important; font-weight: 800; }
.nx-co-steps .payment-options { margin: 0; }
.nx-co-steps .promo { margin: 0; }
.nx-co-steps .promo-box { margin-top: 0; }
.nx-co-steps .promo-box button { display: inline-flex; align-items: center; gap: 6px; }
.nx-co-detalle { margin: 0 !important; }
.nx-co-detalle div { padding: 4px 0 !important; font-size: 13.5px !important; }
.nx-co-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 22px; border: 1px solid var(--np-tj-borde); border-radius: 0 0 22px 22px; background: var(--np-op-fondo); }
.nx-co-pie small { display: block; color: var(--np-muted); font-size: 12px; font-weight: 700; }
.nx-co-total { color: var(--np-ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.nx-co-pie .btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; }
.nx-checkout .checkout-trust { justify-content: center; margin-top: 14px; }

/* Formulario de Izipay: esquinas redondeadas como el resto (el contenido lo dibuja Izipay) */
#izipayForm .kr-field-wrapper, #izipayForm .kr-input-field, #izipayForm .kr-select-wrapper, #izipayForm .kr-field, #izipayForm .kr-text-field { border-radius: 12px !important; overflow: hidden; }
#izipayForm .kr-payment-button { border-radius: 999px !important; height: 48px !important; }


/* Ventanas de pago: Yape y PayPal */
.nx-pago { width: min(400px, calc(100vw - 32px)); padding: 22px !important; color: var(--np-ink); }
.nx-pago .yape-close { position: absolute; top: 14px; right: 14px; color: var(--np-muted); background: none; border: 0; cursor: pointer; }
.nx-pago .yape-close:hover { color: var(--np-ink); }
.nx-pago-cab { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; text-align: left; }
.nx-pago-cab h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.nx-pago-cab p { margin: 2px 0 0; color: var(--np-muted); font-size: 13px; font-weight: 600; }
.nx-pago-logo { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--np-op-fondo); box-shadow: 0 3px 0 var(--np-op-canto); }
.nx-pago-logo.is-yape { background: #742284; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 3px 0 #3d0f47; }
.nx-pago-logo.is-paypal { background: #fff; box-shadow: 0 3px 0 #c9c9cf; }
.nx-pago-monto { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--np-op-fondo); }
.nx-pago-monto small { color: var(--np-muted); font-size: 12px; font-weight: 700; }
.nx-pago-monto b { color: var(--np-ink); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.nx-pago-qr { display: grid; justify-items: center; gap: 10px; margin: 14px 0; }
.nx-pago-qr img { width: 200px; height: 200px; padding: 10px; border-radius: 18px; background: #fff; }
.nx-pago-qr p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--np-muted); font-size: 13px; }
.nx-pago-qr p iconify-icon { color: var(--np-brand-texto); }
.nx-pago-qr p b { color: var(--np-ink); }
.nx-pago-pasos { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.nx-pago-pasos li { display: flex; align-items: center; gap: 10px; color: var(--np-ink-2); font-size: 13.5px; line-height: 1.35; text-align: left; }
.nx-pago-pasos iconify-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--np-op-fondo); color: var(--np-brand-texto); }
.nx-pago-pasos b { color: var(--np-ink); }
.nx-pago .yape-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.nx-pago .paypal-summary { margin: 0 0 12px; }
.nx-pago .paypal-note { margin: 12px 0; color: var(--np-muted); font-size: 13px; text-align: left; }
.nx-pago .paypal-buttons { margin-top: 6px; }

/* Formulario de Izipay en oscuro. El texto de los iframes toma el color de la
   página; las cajas internas de Izipay quedan transparentes. Cada campo lleva su
   título arriba y una sola caja, como los campos del plugin. */
#izipayForm :is(.kr-pan, .kr-expiry, .kr-security-code, .kr-card-holder-name, .kr-installment-number, .kr-first-installment-delay) {
  display: block !important; height: auto !important; border: 0 !important; background: transparent !important;
  color: var(--np-ink) !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; filter: none !important;
}
#izipayForm :is(.kr-pan, .kr-expiry, .kr-security-code, .kr-card-holder-name, .kr-installment-number, .kr-first-installment-delay)::before {
  display: block; margin: 0 0 7px 2px; color: var(--np-ink); font-size: 13px; font-weight: 700;
}
#izipayForm .kr-pan::before { content: "Número de tarjeta"; }
#izipayForm .kr-expiry::before { content: "Vencimiento"; }
#izipayForm .kr-security-code::before { content: "Código de seguridad"; }
#izipayForm .kr-card-holder-name::before { content: "Nombre del titular"; }
#izipayForm .kr-installment-number::before { content: "Cuotas"; }
#izipayForm .kr-first-installment-delay::before { content: "Pago diferido"; }
#izipayForm :is(.kr-pan, .kr-expiry, .kr-security-code, .kr-card-holder-name, .kr-installment-number, .kr-first-installment-delay) > .kr-field-wrapper {
  display: flex !important; align-items: center; height: 50px !important; padding: 0 14px !important;
  border: 1px solid var(--np-line) !important; border-radius: 14px !important; background: #141414 !important;
  box-shadow: none !important; overflow: hidden; transition: border-color .15s;
}
#izipayForm :is(.kr-pan, .kr-expiry, .kr-security-code, .kr-card-holder-name, .kr-installment-number, .kr-first-installment-delay) > .kr-field-wrapper:focus-within { border-color: var(--np-brand) !important; }
#izipayForm .kr-field-wrapper *:not(.kr-options):not(.kr-option) {
  border: 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; outline: 0 !important;
}
#izipayForm .kr-field-wrapper :is(.kr-field-component, .kr-select) { flex: 1; height: 100% !important; }
#izipayForm :is(.kr-input-field, input, .kr-select span, .kr-selected-option) { color: var(--np-ink) !important; -webkit-text-fill-color: var(--np-ink) !important; font-family: inherit !important; font-size: 15px !important; }
#izipayForm :is(.kr-input-field, input)::placeholder { color: var(--np-muted) !important; -webkit-text-fill-color: var(--np-muted) !important; }
#izipayForm svg path { fill: var(--np-muted) !important; }
#izipayForm .kr-payment-button svg path { fill: #fff !important; }
#izipayForm .kr-options { background-color: #1b1b1d !important; border: 1px solid var(--np-line) !important; border-radius: 12px !important; }
#izipayForm .kr-option { color: var(--np-ink) !important; background-color: transparent !important; }
#izipayForm .kr-option:hover { background-color: var(--np-op-hover) !important; }
#izipayForm .kr-form-error { color: #ff8a8d !important; background: transparent !important; }
#izipayForm .kr-payment-button { height: 52px !important; font-size: 15px !important; }

/* Tarjeta compacta en dos columnas: número, vencimiento | CVV, titular, cuotas | diferido */
#izipayForm :has(> .kr-pan), #izipayForm:has(> .kr-pan) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 12px; width: 100% !important; }
#izipayForm :has(> .kr-pan) > *, #izipayForm:has(> .kr-pan) > * { grid-column: 1 / -1; width: auto !important; max-width: none !important; margin: 0 !important; }
#izipayForm .kr-pan { order: 1; }
#izipayForm .kr-expiry { order: 2; grid-column: auto !important; }
#izipayForm .kr-security-code { order: 3; grid-column: auto !important; }
#izipayForm .kr-card-holder-name { order: 4; }
#izipayForm .kr-installment-number { order: 5; grid-column: auto !important; }
#izipayForm .kr-first-installment-delay { order: 6; grid-column: auto !important; }
#izipayForm .kr-form-error { order: 7; }
#izipayForm .kr-payment-button { order: 8; margin-top: 4px !important; }
@media (max-width: 380px) { #izipayForm :is(.kr-expiry, .kr-security-code, .kr-installment-number, .kr-first-installment-delay) { grid-column: 1 / -1 !important; } }

/* Izipay copia al iframe el fondo y el color de su campo de referencia: con fondo
   transparente lo rellena de blanco, por eso va el mismo negro de la caja. */
#izipayForm .kr-field-wrapper :is(.kr-input-field, input, input.kr-theme, .kr-field-component, .kr-field-element) {
  background-color: #141414 !important; color: var(--np-ink) !important; -webkit-text-fill-color: var(--np-ink) !important;
}
#izipayForm .kr-field-wrapper iframe { background-color: #141414 !important; color-scheme: normal; }

/* Checkout como ventana: sin barra ni scroll, plan a la izquierda y tarjeta a la derecha */
.checkout-page .site-header, .checkout-page footer, .checkout-page .checkout-wrap { display: none !important; }
.checkout-page .checkout-shell { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px !important; margin: 0 !important; }
.checkout-page .nx-checkout { width: 100%; max-width: 900px !important; margin: 0 auto !important; }
.nx-checkout .nx-co-card { border-bottom: 1px solid var(--np-tj-borde); border-radius: 24px; padding: 18px 22px 22px; }
.nx-co-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nx-co-top .nx-co-title { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.nx-co-volver { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-op-texto); font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 var(--np-op-canto); transition: background .15s, transform .15s; }
.nx-co-volver:hover { background: var(--np-op-hover); transform: translateY(-1px); }
.nx-checkout .nx-co-steps { display: grid !important; grid-template-columns: 1fr 1fr; gap: 26px; padding: 0 !important; }
.nx-co-izq, .nx-co-der { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nx-co-der { padding-left: 26px; border-left: 1px solid var(--np-line); }
.nx-co-izq hr, .nx-co-der hr { margin: 0 !important; }
.nx-co-izq .nx-co-pie { margin-top: auto; border: 0; border-radius: 16px; padding: 14px 18px; background: var(--np-op-fondo); }
.nx-co-der .checkout-trust { margin: 2px 0 0 !important; font-size: 12px; justify-content: flex-start !important; }
.checkout-page .nx-checkout > .checkout-trust { display: none; }
@media (min-width: 821px) and (min-height: 700px) { html:has(.checkout-page), .checkout-page { height: 100%; overflow: hidden; } }
@media (max-width: 820px) {
  .nx-checkout .nx-co-steps { grid-template-columns: 1fr; gap: 14px; }
  .nx-co-der { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--np-line); }
}

/* Izipay pinta sus campos seguros copiando estos campos ocultos de referencia
   (.krFieldRepresentation): aquí va el fondo negro y el texto claro del iframe. */
:is(.krFieldRepresentation, .krFieldRepresentationError, .krFieldRepresentationDisabled),
:is(.krFieldRepresentation, .krFieldRepresentationError, .krFieldRepresentationDisabled) :is(.kr-outer-wrapper, .kr-inner-wrapper, .kr-field-container, .kr-field-relative-wrapper, .kr-input-relative-wrapper) {
  background: #141414 !important; border: 0 !important; box-shadow: none !important; outline: 0 !important;
}
:is(.krFieldRepresentation, .krFieldRepresentationDisabled) input.kr-input-field {
  background: transparent !important; color: #f3eee9 !important; font-family: "Manrope", "Public Sans", sans-serif !important; font-size: 15px !important; font-weight: 500 !important;
}
.krFieldRepresentationError input.kr-input-field { background: transparent !important; color: #ff8a8d !important; font-size: 15px !important; }

/* Texto centrado en la altura de cada campo */
#izipayForm .kr-field-wrapper :is(.kr-field-component, .kr-field-element) { display: flex !important; align-items: center !important; height: 100% !important; }
#izipayForm .kr-field-wrapper iframe { display: block; height: 48px !important; margin: 0 !important; }
#izipayForm .kr-card-holder-name input { height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: normal !important; }
#izipayForm .kr-field-wrapper :is(.kr-icon-wrapper-root, .kr-help-button-wrapper) { display: flex !important; align-items: center !important; height: 100% !important; }

/* El texto del iframe: misma altura que la caja y sin margen, centrado como el titular */
:is(.krFieldRepresentation, .krFieldRepresentationError, .krFieldRepresentationDisabled) :is(.kr-outer-wrapper, .kr-inner-wrapper, .kr-field-container, .kr-field-relative-wrapper, .kr-input-relative-wrapper) { padding: 0 !important; margin: 0 !important; height: 48px !important; }
:is(.krFieldRepresentation, .krFieldRepresentationError, .krFieldRepresentationDisabled) input.kr-input-field { height: 48px !important; line-height: 48px !important; padding: 0 !important; margin: 0 !important; }

/* Confianza en el checkout: ayuda directa, qué recibe y medios aceptados */
.nx-co-top-der { display: flex; align-items: center; gap: 14px; }
.nx-co-ayuda { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-op-texto); font-size: 12.5px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 var(--np-op-canto); transition: background .15s; }
.nx-co-ayuda:hover { background: var(--np-op-hover); }
.nx-co-ayuda iconify-icon { color: #25d366; }
.nx-co-confianza { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.nx-co-confianza li { display: flex; align-items: center; gap: 9px; color: var(--np-ink-2); font-size: 12.5px; }
.nx-co-confianza iconify-icon { flex: none; color: var(--np-brand-texto); font-size: 15px; }
.nx-co-logos { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.nx-co-logos > * { filter: grayscale(1) brightness(1.6); opacity: .55; transition: filter .2s, opacity .2s; }
.nx-co-logos:hover > * { filter: none; opacity: 1; }
.nx-co-logo-yape { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.nx-co-logos:hover .nx-co-logo-yape { color: #c56ad6; }
.nx-co-izq .nx-co-pie { margin-top: auto; }

/* Prueba gratis en /plugin: estado con licencia, reloj y descarga */
button.np-prueba-btn { border: 0; font: inherit; cursor: pointer; text-align: left; }
button.np-prueba-btn:disabled { cursor: wait; filter: brightness(.9); }
.np-prueba-estado { display: grid; gap: 10px; width: 100%; margin-top: 14px; text-align: left; }
.np-prueba-tit { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--np-ink); font-size: 15px; font-weight: 800; }
.np-prueba-tit iconify-icon { color: var(--np-brand-texto); font-size: 18px; }
.np-prueba-txt { margin: 0; color: var(--np-muted); font-size: 13px; line-height: 1.45; }
.np-prueba-txt b { color: var(--np-ink); }
.np-prueba-clave { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--np-op-fondo); }
.np-prueba-clave code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--np-ink); font: 700 13px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.np-prueba-clave button { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--np-brand); color: #fff; font: 700 12.5px inherit; cursor: pointer; box-shadow: 0 3px 0 var(--np-canto); }
.np-prueba-mini { margin-top: 0 !important; padding: 12px !important; border-radius: 14px !important; }
.np-prueba-mini b { font-size: 14px !important; }
.np-prueba-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #ff8a8d; font-size: 13px; }

/* Logo: nunca se encoge ni se deforma; en celular los botones ceden espacio */
.site-brand { flex: none; background: none !important; }
.site-brand img { max-width: none !important; height: 26px; width: auto !important; object-fit: contain; }
@media (max-width: 560px) {
  .header-inner { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .site-brand img { height: 22px; }
  .header-actions { gap: 6px; min-width: 0; }
  .header-actions .nav-ghost { display: none; }
  .header-actions a { padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; white-space: nowrap; }
}

/* Página del bot: qué descarga, herramientas y datos bajo el título */
.bt-bloque { display: grid; gap: 9px; margin-top: 22px; }
.bt-tit { color: var(--np-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--np-op-fondo); color: var(--np-op-texto); font-size: 13.5px; font-weight: 700; box-shadow: 0 3px 0 var(--np-op-canto); }
.bt-chips iconify-icon { color: var(--np-brand-texto); font-size: 15px; }
.bt-herr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 540px; }
.bt-herr div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--np-op-fondo); }
.bt-herr code { color: var(--np-brand-texto); font: 800 14px/1.2 ui-monospace, Consolas, monospace; }
.bt-herr span { color: var(--np-ink-2); font-size: 13px; }
.bt-datos { display: flex; gap: 28px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--np-line); max-width: 540px; }
.bt-datos div { display: grid; gap: 2px; }
.bt-datos b { color: var(--np-ink); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.bt-datos b iconify-icon { color: var(--np-brand-texto); font-size: 22px; }
.bt-datos span { color: var(--np-muted); font-size: 12.5px; font-weight: 600; }
@media (max-width: 560px) { .bt-herr { grid-template-columns: 1fr; } .bt-datos { gap: 18px; } }

/* Loader de espera del bot: cuatro puntos que giran (adaptado de uiverse.io/AbanoubMagdy1) */
.nx-loader { --dim: 1.05rem; position: relative; display: inline-block; flex: none; width: var(--dim); height: var(--dim); margin-right: 9px; vertical-align: -3px; animation: nx-loader-giro 2s linear infinite; }
.nx-loader i { position: absolute; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.nx-loader i:nth-child(1) { top: 0; left: 0; }
.nx-loader i:nth-child(2) { top: 0; right: 0; opacity: .75; }
.nx-loader i:nth-child(3) { bottom: 0; left: 0; opacity: .75; }
.nx-loader i:nth-child(4) { bottom: 0; right: 0; opacity: .5; }
@keyframes nx-loader-giro {
  0% { transform: scale(1) rotate(0); }
  20%, 25% { transform: scale(1.3) rotate(90deg); }
  45%, 50% { transform: scale(1) rotate(180deg); }
  70%, 75% { transform: scale(1.3) rotate(270deg); }
  95%, 100% { transform: scale(1) rotate(360deg); }
}
.download-hero .button:disabled { display: inline-flex; align-items: center; justify-content: center; opacity: 1; cursor: wait; }
@media (prefers-reduced-motion: reduce) { .nx-loader { animation-duration: 6s; } }

/* Mi panel > NOX PRO: tarjeta por licencia con clave, vencimiento y equipos */
.nxl-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.nxl-lista { display: grid; gap: 16px; }
.nxl-card, .nxl-vacio, .nxl-descarga { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--np-tj-borde); border-radius: 22px; background: radial-gradient(140% 120% at 0% 0%, var(--np-tj-brillo), transparent 45%), linear-gradient(180deg, var(--np-tj-arriba), var(--np-tj-abajo)); }
.nxl-card.is-off { opacity: .8; }
.nxl-top { display: flex; align-items: center; gap: 14px; }
.nxl-top > div { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.nxl-top h3, .nxl-vacio h3, .nxl-descarga h3 { margin: 0; color: var(--np-ink); font-size: 17px; font-weight: 800; }
.nxl-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--np-brand); color: #fff; box-shadow: 0 3px 0 var(--np-canto); }
.nxl-ic svg { width: 22px; height: 22px; }
.nxl-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.nxl-chip.ok { background: rgba(52, 199, 120, .14); color: #5fe0a0; }
.nxl-chip.warn { background: rgba(255, 176, 32, .14); color: #ffc35a; }
.nxl-chip.bad { background: rgba(255, 90, 95, .14); color: #ff8a8d; }
.nxl-clave { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--np-op-fondo); }
.nxl-clave code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--np-ink); font: 700 15px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.nxl-clave .button, .nxl-acciones .button { display: inline-flex; align-items: center; gap: 7px; }
.nxl-clave svg, .nxl-acciones svg, .nxl-descarga h3 svg { width: 16px; height: 16px; }
.nxl-equipos { display: grid; gap: 8px; }
.nxl-sub { color: var(--np-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nxl-equipo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--np-op-fondo); }
.nxl-equipo > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nxl-equipo b { color: var(--np-ink); font-size: 14px; }
.nxl-equipo small { color: var(--np-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxl-equipo-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #1b1b1d; color: var(--np-brand-texto); }
.nxl-equipo-ic svg { width: 17px; height: 17px; }
.nxl-ultima { flex: none; }
.nxl-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.nxl-vacio { justify-items: start; }
.nxl-vacio p { margin: 0; color: var(--np-muted); }
.nxl-descarga { position: sticky; top: 20px; gap: 12px; }
.nxl-descarga h3 { display: flex; align-items: center; gap: 8px; }
.nxl-descarga .download-cards { display: grid; gap: 10px; }
.nxl-pasos { margin: 0; color: var(--np-muted); font-size: 13px; line-height: 1.5; }
.nxl-pasos b { color: var(--np-ink); }
@media (max-width: 1000px) { .nxl-pagina { grid-template-columns: 1fr; } .nxl-descarga { position: static; } }
@media (max-width: 560px) { .nxl-top { flex-wrap: wrap; } .nxl-equipo { flex-wrap: wrap; } .nxl-clave { flex-wrap: wrap; } }

/* Panel: colores del plugin en lugar del azul pizarra de la versión anterior */
:root:has(body.is-user), body.is-user {
  --nx-bg: #11100f; --nx-panel: #1b1b1d; --nx-slate: #26262a; --surface: #1b1b1d;
  --nx-ring: #2a2a2d; --nx-ring-2: #3a3a3f; --line: #2a2a2d; --purple-mid: #3a3a3f;
  --ink: #f3eee9; --muted: #9a918a;
}
.is-user .topbar { background: color-mix(in srgb, #11100f 88%, transparent) !important; }
.is-user .processing-overlay { background: rgba(10, 10, 11, .9) !important; }
.is-user .nox-dialog::backdrop, .is-user .result-viewer::backdrop { background: rgba(0, 0, 0, .75) !important; }

/* Resultados: solo la imagen; Ver y Descargar flotan abajo, encima de la imagen */
.tool-view .result-item { position: relative; overflow: hidden; border: 0 !important; border-radius: 16px !important; background: none !important; box-shadow: none !important; transform: none !important; }
.tool-view .result-item > a.ri-media {
  display: grid !important; place-items: center; aspect-ratio: 4 / 5; margin: 0; padding: 0 !important; border-radius: 16px; overflow: hidden;
  background-color: #161618 !important;
  background-image: linear-gradient(45deg, #1f1f22 25%, transparent 25%), linear-gradient(-45deg, #1f1f22 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1f1f22 75%), linear-gradient(-45deg, transparent 75%, #1f1f22 75%) !important;
  background-size: 18px 18px !important; background-position: 0 0, 0 9px, 9px -9px, -9px 0 !important;
}
.tool-view .result-item > a.ri-media img { display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; transition: transform .35s; }
.tool-view .result-item:hover > a.ri-media img { transform: scale(1.03); }
.ri-acc { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 34px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.tool-view .result-item:hover .ri-acc, .tool-view .result-item:focus-within .ri-acc { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .ri-acc { opacity: 1; transform: none; pointer-events: auto; } }
.ri-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(38, 38, 42, .92); color: #e6e6ea !important; box-shadow: 0 3px 0 #0e0e10; transition: transform .15s, background .15s; }
.ri-btn:hover { background: #303035; transform: translateY(-1px); }
.ri-btn.is-main { background: #6b1eff; color: #fff !important; box-shadow: 0 3px 0 #300d73; }
.ri-btn.is-main:hover { background: #6b1eff; filter: brightness(1.1); }
.ri-btn svg { width: 17px; height: 17px; }

/* Visor: solo la imagen, sin marco; Cerrar y Descargar flotan abajo, encima de la imagen */
.is-user .result-viewer { position: relative; max-width: 92vw; max-height: 92vh; padding: 0 !important; border: 0 !important; border-radius: 18px !important; background: transparent !important; overflow: hidden; }
.is-user .result-viewer::backdrop { background: rgba(0, 0, 0, .82) !important; backdrop-filter: blur(6px); }
.is-user .result-viewer img { max-width: 92vw !important; max-height: 92vh !important; margin: 0 !important; border-radius: 18px !important; }
.is-user .result-viewer-actions { position: absolute; left: 0; right: 0; bottom: 0; justify-content: flex-end !important; gap: 8px !important; margin: 0 !important; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }

/* Botones de la tarjeta: encima de la imagen, abajo (gana a la regla antigua de .result-item > div) */
.tool-view .result-item > div.ri-acc { position: absolute !important; left: 0; right: 0; bottom: 0; display: flex !important; justify-content: flex-end !important; gap: 8px; padding: 34px 12px 12px !important; border: 0 !important; background: linear-gradient(transparent, rgba(0, 0, 0, .6)) !important; }
.tool-view .result-item div a.ri-btn { color: #e6e6ea; font-size: 0; }
.tool-view .result-item div a.ri-btn.is-main { color: #fff; }

/* Cuadro de imagen de referencia: no se encoge ni corta el texto */
.tool-view .upload-zone { flex: none !important; min-height: max-content; overflow: visible; }

/* Códigos > Planes donde aplica: una tarjeta por producto en fila, sin marco alrededor */
.ax-planes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.ax-planes .ax-planes-t { grid-column: 1 / -1; }
.ax-planes .ax-grupo { align-content: start; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #1b1b1d, #0f0f10); border: 1px solid #2a2a2d; }
.ax-planes .ax-grupo-t { color: var(--np-ink); font-size: 12.5px; }
.ax-planes .ax-grupo-t i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--np-brand); color: #fff; font-size: 14px; box-shadow: 0 3px 0 var(--np-canto); }
.ax-planes .eq-chips { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 1100px) { .ax-planes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ax-planes { grid-template-columns: 1fr; } }

/* Mi panel: plan del bot de WhatsApp */
.wa-plan:empty { display: none; }
.wa-plan { margin-bottom: 18px; }
.wa-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 18px 20px; border: 1px solid #2a2a2d; border-radius: 20px; background: linear-gradient(180deg, #1b1b1d, #0f0f10); }
.wa-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #1f9d55; color: #fff; box-shadow: 0 3px 0 #0d4f2a; }
.wa-ic svg { width: 22px; height: 22px; }
.wa-info { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.wa-info h3 { margin: 0; color: #f3eee9; font-size: 16px; font-weight: 800; }
.wa-info p { margin: 0; color: #9a918a; font-size: 13px; }
.wa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wa-chips span { padding: 5px 11px; border-radius: 999px; background: #26262a; color: #e6e6ea; font-size: 12px; font-weight: 700; }
.wa-form { display: flex; gap: 8px; flex: 1 1 320px; }
.wa-form[hidden] { display: none; }
.wa-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid #2a2a2d; border-radius: 999px; background: #141414; color: #f3eee9; font: inherit; }
.wa-form input:focus { outline: 0; border-color: #6b1eff; }
.wa-form .button, .wa-card > .button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wa-form .button svg, .wa-card > .button svg { width: 16px; height: 16px; }

/* /plugin sin la tarjeta de prueba gratis: las funciones ocupan todo el ancho */
.np-info.is-solo { grid-template-columns: 1fr !important; }

/* Equipos: los equipos de cada licencia y sus acciones */
.eq-otros { display: grid; gap: 6px; margin-top: 10px; }
.eq-otros small { color: var(--np-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eq-otros > div { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-otros span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #26262a; color: #e6e6ea; font-size: 12px; font-weight: 700; }
.eq-otros span.es-esta { background: rgba(107, 30, 255, .22); color: #fff; }
.eq-otros span.en-uso::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c778; }
.eq-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Admin > Versiones: historial */
.cambios { margin-top: 18px; display: grid; gap: 12px; }
.cambio { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: #1b1b1d; border: 1px solid #2a2a2d; }
.cambio-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cambio-ver { color: #f3eee9; font-weight: 800; }
.cambio-actual { padding: 3px 9px; border-radius: 999px; background: rgba(52, 199, 120, .14); color: #5fe0a0; font-size: 11.5px; font-weight: 800; }
.cambio-hist { padding: 3px 9px; border-radius: 999px; background: #26262a; color: #9a918a; font-size: 11.5px; font-weight: 800; }
.cambio-top small { color: #9a918a; font-size: 12px; }
.cambio input, .cambio textarea { width: 100%; padding: 10px 14px; border: 1px solid #2a2a2d; border-radius: 12px; background: #141414; color: #f3eee9; font: inherit; resize: vertical; }
.cambio input:focus, .cambio textarea:focus { outline: 0; border-color: #6b1eff; }
.cambio-acc { display: flex; gap: 8px; }
.cambio-acc .button { display: inline-flex; align-items: center; gap: 6px; }

/* Mi panel > NOX PRO: actualizaciones */
.nxl-cambios { grid-column: 1 / -1; display: grid; gap: 12px; }
.nxl-cambios h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: #f3eee9; font-size: 17px; font-weight: 800; }
.nxl-cambios h3 svg { width: 18px; height: 18px; }
.nxl-cambio { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid #2a2a2d; border-radius: 18px; background: linear-gradient(180deg, #1b1b1d, #0f0f10); }
.nxl-cambio.is-actual { border-color: #3a2a66; }
.nxl-cambio-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nxl-cambio-top b { color: #f3eee9; font-size: 15px; }
.nxl-cambio-top small { color: #9a918a; font-size: 12px; }
.nxl-cambio-t { margin: 0; color: #c9b8ff; font-weight: 800; font-size: 13.5px; }
.nxl-cambio ul { margin: 0; padding-left: 18px; color: #d8d1ca; font-size: 13.5px; line-height: 1.55; }
.nxl-cambio .button { justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.nxl-cambio .button svg { width: 16px; height: 16px; }
.nxl-cambio-hist { color: #9a918a; font-size: 12px; font-weight: 700; }

/* Tarjeta de equipo compacta: todo en filas cortas */
.eq-card { gap: 10px !important; padding: 16px !important; }
.eq-otros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.eq-otros small { margin-right: 2px; letter-spacing: .06em; }
.eq-otros span { padding: 4px 9px; font-size: 11.5px; }
.eq-resumen { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: #1b1b1d; color: #e6e6ea; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-resumen i { color: var(--np-brand-texto); }
.eq-card-pie { display: grid !important; grid-template-columns: auto 1fr; gap: 6px 14px !important; align-items: center; }
.eq-card-pie > div:nth-child(3) { grid-column: 1 / -1; }
.eq-card-pie > div:nth-child(3) b { font-size: 12px; overflow-wrap: anywhere; }
.eq-card-pie .eq-acciones { grid-column: 1 / -1; flex-wrap: nowrap !important; justify-content: stretch !important; gap: 6px !important; }
.eq-card-pie .eq-acciones .button { flex: 1; justify-content: center; padding: 8px 10px !important; font-size: 12.5px !important; white-space: nowrap; }
.nox-dialog p { white-space: pre-line; }