/* ═══════════════════════════════════════════════════════════════
   SMART NOVA POS — composición publicitaria del punto de venta
   Recreación del handoff "Smart Nova Hero" como componente del sitio.

   El diseño original es un lienzo fijo de 1920×1080. Acá se dibuja a
   ese tamaño real y se escala con `cqw` para llenar cualquier ancho
   manteniendo 16:9 — así no pierde nitidez como lo haría un PNG.

   Se carga solo en la página que lo usa (ver $PAGE['css']).
   ═══════════════════════════════════════════════════════════════ */

/* El marco y el escalado los aporta .lienzo (smartnova.css).
   Acá viven solo los estilos propios de esta composición. */
.snp{background:#050913;--cyan:#00c8e0;--blue:#4d9bff;--violet:#8b5cf6;}
.snp-canvas{
  width:1920px;height:1080px;
  font-family:"Inter",system-ui,sans-serif;color:#eaf2ff;
}

/* ─────────── Ambiente ─────────── */
.snp-amb{position:absolute;inset:0;pointer-events:none;}
.snp-amb-1{background:radial-gradient(120% 90% at 50% 22%,rgba(30,80,160,.34) 0%,rgba(10,26,55,.22) 32%,rgba(5,9,19,0) 62%);}
.snp-amb-2{left:50%;top:60%;width:1400px;height:900px;inset:auto;position:absolute;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(0,200,224,.22),rgba(0,200,224,0) 70%);filter:blur(20px);}
.snp-amb-3{left:16%;top:30%;width:640px;height:640px;inset:auto;position:absolute;
  background:radial-gradient(closest-side,rgba(77,155,255,.20),rgba(77,155,255,0) 70%);filter:blur(30px);}
.snp-amb-4{right:14%;top:34%;width:600px;height:600px;inset:auto;position:absolute;
  background:radial-gradient(closest-side,rgba(139,92,246,.16),rgba(139,92,246,0) 70%);filter:blur(30px);}
.snp-amb-5{background:radial-gradient(120% 120% at 50% 46%,rgba(5,9,19,0) 55%,rgba(3,6,14,.85) 100%);}

.snp-dot{position:absolute;border-radius:50%;width:2px;height:2px;animation:snpTwinkle 5s ease-in-out infinite;}
@keyframes snpTwinkle{0%,100%{opacity:.15}50%{opacity:.7}}

/* ─────────── Tarjetas flotantes ─────────── */
@keyframes snpFloat0{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes snpFloat1{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes snpFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.snp-float{position:absolute;z-index:15;}
.snp-float-a{animation:snpFloat0 7s ease-in-out infinite;}
.snp-float-b{animation:snpFloat1 8.4s ease-in-out .8s infinite;}
.snp-float-c{animation:snpFloat2 7.6s ease-in-out .4s infinite;}
.snp-float-d{animation:snpFloat0 8s ease-in-out 1s infinite;}
.snp-float-e{animation:snpFloat1 9s ease-in-out .5s infinite;}
.snp-float-f{animation:snpFloat2 8.6s ease-in-out 1.3s infinite;}

.snp-chip{
  display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:16px;
  background:linear-gradient(160deg,rgba(16,24,38,.9),rgba(9,14,24,.82));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.snp-chip-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;}
.snp-chip-t{font-size:14px;font-weight:600;}
.snp-chip-s{font-size:12px;color:#7f93ad;margin-top:2px;}

.snp-metric{
  padding:14px 18px;border-radius:14px;
  background:linear-gradient(160deg,rgba(16,24,38,.88),rgba(9,14,24,.8));
  border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 54px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.snp-metric-l{font-size:12px;color:#7f93ad;display:flex;align-items:center;gap:6px;}
.snp-metric-v{font-size:22px;font-weight:800;margin-top:5px;}
.snp-metric-v small{font-size:13px;color:#5cd68a;font-weight:600;}

/* ─────────── Plataforma ─────────── */
.snp-plat{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;}
.snp-plat-1{top:792px;width:1120px;height:150px;z-index:5;filter:blur(8px);
  background:radial-gradient(closest-side,rgba(0,200,224,.32),rgba(0,140,220,.12) 55%,rgba(0,0,0,0) 78%);}
.snp-plat-2{top:810px;width:940px;height:90px;z-index:6;filter:blur(6px);
  background:radial-gradient(closest-side,rgba(120,220,255,.35),rgba(0,0,0,0) 70%);}
.snp-plat-3{top:834px;width:520px;height:14px;z-index:7;filter:blur(3px);opacity:.85;
  background:linear-gradient(90deg,rgba(0,200,224,0),#8fe6ff,rgba(0,200,224,0));}

/* ─────────── Monitor ─────────── */
.snp-monitor{position:absolute;left:50%;top:200px;transform:translateX(-50%);width:1216px;z-index:12;}
.snp-frame{padding:11px;border-radius:22px;background:linear-gradient(160deg,#1a2436,#0a0f1a 60%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 60px 130px rgba(0,0,0,.7),0 0 0 1px rgba(0,200,224,.08),inset 0 1px 0 rgba(255,255,255,.10);}
.snp-screen{border-radius:14px;overflow:hidden;background:#06080c;border:1px solid rgba(255,255,255,.05);position:relative;}
.snp-sheen{position:absolute;inset:0;pointer-events:none;z-index:40;
  background:linear-gradient(122deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 22%);}

/* ─────────── Barra superior de la app ─────────── */
.snp-top{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);background:#0b0f16;}
.snp-brand{display:flex;align-items:center;gap:10px;}
.snp-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:flex;align-items:center;justify-content:center;}
.snp-mark i{width:8px;height:8px;transform:rotate(45deg);background:#06080c;display:block;}
.snp-brand b{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.snp-brand b span{color:#6f83a0;font-weight:500;}
.snp-tabs{display:flex;gap:2px;margin-left:14px;}
.snp-tabs span{font-size:12px;color:#7f93ad;padding:6px 12px;border-radius:8px;}
.snp-tabs span.on{color:#cfe0f5;background:rgba(255,255,255,.06);}
.snp-topright{display:flex;align-items:center;gap:14px;}
.snp-topsearch{display:flex;align-items:center;gap:8px;font-size:12px;color:#7f93ad;padding:7px 12px;
  border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#0b0f16;}
.snp-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2a3852,#131c2c);
  border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#bcd0ec;}

/* ─────────── Cuerpo ─────────── */
.snp-split{display:grid;grid-template-columns:1fr 396px;height:512px;}
.snp-catalog{padding:18px 20px;overflow:hidden;background:#06080c;}
.snp-search{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;background:#0b0f16;
  border:1px solid rgba(0,200,224,.28);box-shadow:0 0 0 3px rgba(0,200,224,.07);}
.snp-search em{font-style:normal;font-size:14px;color:#dfeaf8;}
.snp-caret{width:1px;height:16px;background:var(--cyan);animation:snpTwinkle 1.1s steps(1) infinite;display:block;}
.snp-count{margin-left:auto;font-size:11px;color:#6f83a0;font-family:"JetBrains Mono",monospace;}

.snp-cats{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap;}
.snp-cats span{font-size:12px;color:#a9bcd6;padding:7px 14px;border-radius:999px;background:#0b0f16;
  border:1px solid rgba(255,255,255,.08);}
.snp-cats span.on{font-weight:600;color:#06080c;background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent;}

.snp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.snp-prod{border-radius:14px;background:#0b0f16;border:1px solid rgba(255,255,255,.08);padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);}
.snp-thumb{height:78px;border-radius:9px;border:1px solid rgba(255,255,255,.05);padding:8px;
  display:flex;align-items:flex-end;justify-content:space-between;
  background:repeating-linear-gradient(135deg,#0f1622,#0f1622 7px,#0c121c 7px,#0c121c 14px);}
.snp-thumb-l{font-size:9px;letter-spacing:.12em;color:#4a5c76;font-family:"JetBrains Mono",monospace;}
.snp-stock{font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;color:#5cd68a;background:rgba(92,214,138,.12);}
.snp-stock.low{color:#f2b955;background:rgba(242,185,85,.12);}
.snp-ref{margin-top:11px;font-size:11px;color:var(--cyan);font-family:"JetBrains Mono",monospace;}
.snp-name{margin-top:4px;font-size:14px;font-weight:600;color:#eaf2ff;line-height:1.3;}
.snp-sku{margin-top:3px;font-size:11px;color:#6f83a0;}
.snp-price{margin-top:10px;display:flex;align-items:center;justify-content:space-between;}
.snp-price b{font-size:16px;font-weight:800;}
.snp-add{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:flex;align-items:center;justify-content:center;}

/* ─────────── Carrito ─────────── */
.snp-cart{border-left:1px solid rgba(255,255,255,.08);background:#0b0f16;display:flex;flex-direction:column;
  padding:18px 18px 16px;}
.snp-cart-h{display:flex;align-items:center;justify-content:space-between;}
.snp-cart-h b{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.snp-cart-h span{font-size:11px;color:#6f83a0;font-family:"JetBrains Mono",monospace;}
.snp-client{margin-top:13px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:#06080c;border:1px solid rgba(255,255,255,.07);}
.snp-client-i{width:28px;height:28px;border-radius:8px;background:rgba(77,155,255,.14);
  display:flex;align-items:center;justify-content:center;flex:none;}
.snp-client-n{font-size:13px;font-weight:600;}
.snp-client-d{font-size:11px;color:#6f83a0;}

.snp-items{margin-top:13px;display:flex;flex-direction:column;gap:9px;flex:1;overflow:hidden;}
.snp-item{display:flex;gap:11px;align-items:center;}
.snp-item-t{width:40px;height:40px;border-radius:8px;flex:none;border:1px solid rgba(255,255,255,.05);
  background:repeating-linear-gradient(135deg,#0f1622,#0f1622 5px,#0c121c 5px,#0c121c 10px);}
.snp-item-c{flex:1;min-width:0;}
.snp-item-n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.snp-item-s{font-size:11px;color:#6f83a0;font-family:"JetBrains Mono",monospace;}
.snp-step{display:flex;align-items:center;gap:6px;}
.snp-step i{width:20px;height:20px;border-radius:6px;background:#141b28;border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#8ea3bf;font-style:normal;}
.snp-step b{font-size:13px;font-weight:600;width:16px;text-align:center;}
.snp-item-p{font-size:13px;font-weight:700;width:78px;text-align:right;}

.snp-pays{display:flex;gap:7px;margin-top:6px;}
.snp-pays span{flex:1;text-align:center;font-size:11px;color:#a9bcd6;padding:8px 0;border-radius:9px;
  background:#06080c;border:1px solid rgba(255,255,255,.08);}
.snp-pays span.on{font-weight:600;color:#06080c;background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent;}

.snp-totals{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:6px;}
.snp-totals div{display:flex;justify-content:space-between;font-size:12px;color:#8ea3bf;}
.snp-totals .ok{color:#5cd68a;}
.snp-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;}
.snp-total span:first-child{font-size:14px;font-weight:600;color:#eaf2ff;}
.snp-total span:last-child{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#eaf2ff;}
.snp-pay{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;
  border-radius:12px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#00c8e0,#3f8bff 55%,#4d9bff);
  box-shadow:0 14px 34px rgba(0,140,220,.42),inset 0 1px 0 rgba(255,255,255,.3);}

/* ─────────── Accesibilidad ─────────── */
@media (prefers-reduced-motion:reduce){
  .snp-float,.snp-dot,.snp-caret{animation:none !important;}
  .snp-dot{opacity:.45;}
}