/* =====================================================================
   EIK TECHNOLOGY · identidad visual "Voltaje"
   Solo apariencia (colores, formas, tipografía, movimiento). No toca datos.
   Ideas: circuito (cuadrícula de puntos y trazos), energía (degradado
   cian → violeta → magenta), chispa amarilla (el "TECHNOLOGY" del logo).
   ===================================================================== */
:root{
  --eik-cian:#19c3ff; --eik-violeta:#6a2cf0; --eik-magenta:#c02bb4; --eik-chispa:#ffd23f;
  --eik-grad:linear-gradient(120deg,#6a2cf0 0%,#9a2bd0 55%,#c02bb4 100%);
  --eik-grad-vivo:linear-gradient(90deg,#19c3ff 0%,#6a2cf0 50%,#c02bb4 100%);
  --brand:#6a2cf0; --brand-hover:#5a1fc4; --brand-ink:#5a1fc4; --brand-soft:#f1ebff; --brand-line:#dccffc;
  --accent:#19c3ff;
  --bg:#f3f1fa;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --eik-glow:0 8px 22px rgba(106,44,240,.32);
  --nav-bg:#0d0a23; --nav-bg-2:#1a1040;
}
@media (prefers-color-scheme:dark){:root{--brand:#8458ff;--brand-hover:#9670ff;--brand-ink:#b9a4ff;--brand-soft:#241a52;--brand-line:#40307f;--bg:#09071a;--card:#14112b;--sunken:#0e0b22;--accent:#3ccfff}}

/* --- Fondo con circuito: puntos + resplandores en las esquinas --- */
body{background-color:var(--bg)}
.principal{position:relative;min-height:100vh;background:
  radial-gradient(900px 420px at 100% -80px,rgba(106,44,240,.10),transparent 70%),
  radial-gradient(700px 380px at 0% 100%,rgba(25,195,255,.09),transparent 70%),
  radial-gradient(circle,rgba(90,31,196,.13) 1px,transparent 1.3px) 0 0/22px 22px,
  var(--bg)}
@media (prefers-color-scheme:dark){.principal{background:
  radial-gradient(900px 420px at 100% -80px,rgba(132,88,255,.16),transparent 70%),
  radial-gradient(700px 380px at 0% 100%,rgba(60,207,255,.10),transparent 70%),
  radial-gradient(circle,rgba(185,164,255,.10) 1px,transparent 1.3px) 0 0/22px 22px,
  var(--bg)}}

/* --- Tipografía con carácter --- */
h1,h2,h3,.rnum,.gran,.kpi b,.tile-precio,.rtotal,.vp-pago-cab h3,.pos-total,.lg-fina h1,.cabecera b{font-family:var(--font-display);letter-spacing:-.02em}
h3{font-weight:700}
.lista-sec,.kpi small{font-family:var(--font-display);letter-spacing:.14em}
.lista-sec{display:flex;align-items:center;gap:10px;color:var(--brand-ink);font-weight:700}
.lista-sec::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--brand-line),transparent)}
.lista-sec::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--eik-grad);transform:rotate(45deg);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
::selection{background:var(--eik-chispa);color:#1a0f3d}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 45%,transparent) transparent}

/* --- Menú lateral: panel de control oscuro con energía --- */
.menu{background:
  radial-gradient(260px 200px at 0% 0%,rgba(25,195,255,.16),transparent 70%),
  radial-gradient(300px 260px at 100% 100%,rgba(192,43,180,.20),transparent 70%),
  linear-gradient(180deg,var(--nav-bg-2),var(--nav-bg))!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06),8px 0 40px rgba(13,10,35,.25)}
.menu::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.2px) 0 0/18px 18px;mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%)}
.menu>*{position:relative;z-index:1}
.menu .btn{color:var(--nav-text);transition:background .18s,color .18s,transform .18s}
@media (hover:hover){.menu .btn:hover{color:#fff;background:rgba(255,255,255,.07)!important;transform:translateX(3px)}}
.menu .btn.activo{background:linear-gradient(90deg,rgba(106,44,240,.55),rgba(192,43,180,.18))!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--eik-chispa),0 6px 18px rgba(106,44,240,.35);font-weight:700}
.menu .btn .ic,.menu .btn::before{transition:transform .2s}
.menu .btn.activo .ic,.menu .btn.activo::before{filter:drop-shadow(0 0 6px rgba(255,210,63,.7))}
.menu-sub{border-left-color:rgba(25,195,255,.35)}
.menu-sub .btn.activo{box-shadow:inset 2px 0 0 var(--eik-cian)}
.logo-menu{filter:drop-shadow(0 6px 16px rgba(25,195,255,.28));border-radius:10px}
#quien{color:#8ef0c4!important;font-weight:700}
.mbadge{background:var(--eik-chispa)!important;color:#241400!important;font-weight:800;box-shadow:0 0 0 3px rgba(255,210,63,.2)}

/* --- Barra superior: cristal con hilo de energía --- */
.top{position:sticky;box-shadow:0 8px 28px rgba(60,30,140,.07)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--eik-grad-vivo);opacity:.85}
.avatar{background:var(--eik-grad)!important;color:#fff!important;border:0!important;box-shadow:var(--eik-glow)}
.avatar .ic{background:#fff}

/* --- Botones --- */
.btn:not(.ghost):not(.small):not(.gasto-btn):not(.danger),.pos-btn,#vCobrar,.racc-main{background:var(--eik-grad)!important;color:#fff;border:0;box-shadow:var(--eik-glow);transition:transform .15s,box-shadow .2s,filter .2s}
@media (hover:hover){.btn:not(.ghost):not(.small):not(.gasto-btn):not(.danger):hover,.pos-btn:hover,#vCobrar:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 12px 28px rgba(106,44,240,.42)}}
.btn:active{transform:scale(.98)}
.gasto-btn,.btn.ghost{transition:border-color .18s,background .18s,color .18s}
@media (hover:hover){.gasto-btn:hover,.btn.ghost:hover{border-color:var(--brand)!important;color:var(--brand-ink)}}
:focus-visible{outline:2px solid var(--eik-cian);outline-offset:2px;border-radius:8px}
input:focus,select:focus,textarea:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--eik-cian) 28%,transparent)!important;outline:none}

/* --- Tarjetas y paneles: borde con luz al pasar --- */
.card,.pos-card,.pos-panel{border-radius:18px;border-color:color-mix(in srgb,var(--brand) 12%,var(--line));box-shadow:0 1px 2px rgba(60,30,140,.05),0 10px 30px rgba(60,30,140,.07)}
.card.dlg,.pos-card{position:relative}
.card.dlg::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 4px 4px;background:var(--eik-grad-vivo)}
.dlg h3{display:flex;align-items:center;gap:10px}
.dlg h3::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--eik-grad);flex:none}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid color-mix(in srgb,var(--brand) 14%,var(--line));border-radius:16px;padding:14px 14px 14px 18px;box-shadow:var(--sh-sm)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--eik-grad)}
.kpi:nth-child(3n+2)::before{background:linear-gradient(180deg,var(--eik-cian),var(--eik-violeta))}
.kpi:nth-child(3n)::before{background:linear-gradient(180deg,var(--eik-chispa),var(--eik-magenta))}
.kpi b{font-size:1.35rem}

/* --- Catálogo: chips, tarjetas de producto --- */
.chip{border-radius:999px;font-weight:600;transition:all .18s}
.chip.on,.pos-main .chip.on,.pos-chips .chip.on{background:var(--eik-grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--eik-glow)!important}
@media (hover:hover){.chip:not(.on):hover{border-color:var(--brand);color:var(--brand-ink);transform:translateY(-1px)}}
.tile{border-radius:20px;border:1px solid color-mix(in srgb,var(--brand) 10%,var(--line));background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--brand) 3%,var(--card)));transition:transform .18s,box-shadow .22s,border-color .2s;overflow:hidden}
.tile::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--eik-grad-vivo);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
@media (hover:hover){.tile:hover{transform:translateY(-3px);border-color:var(--brand-line);box-shadow:0 14px 34px rgba(106,44,240,.18)}.tile:hover::after{transform:scaleX(1)}}
.tile.sel{border-color:var(--brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--eik-cian) 30%,transparent),0 14px 34px rgba(106,44,240,.22)}
.tile-precio{background:var(--eik-grad)!important;color:#fff!important;font-weight:700;border-radius:14px;box-shadow:0 6px 14px rgba(106,44,240,.28)}
.tile-n{background:var(--eik-chispa)!important;color:#241400!important;font-weight:800}
.tile-nombre{font-weight:650}
.tile.off .tile-precio{background:transparent!important;color:var(--muted)!important;box-shadow:none!important;border:1px dashed var(--line-strong)}
.tile.off::after{display:none}
.tile-stock.agotado{background:var(--danger-soft);color:var(--danger);border-radius:999px;padding:1px 8px;font-weight:700}
.sede-chip{background:linear-gradient(90deg,var(--brand-soft),transparent)!important;border:1px solid var(--brand-line);font-weight:700}

/* --- Tablas y listas --- */
table thead th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:var(--brand-ink);background:color-mix(in srgb,var(--brand) 6%,var(--card))}
table tbody tr{transition:background .15s}
@media (hover:hover){table tbody tr:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}}

/* --- Venta: panel de pago y totales --- */
.vp-tasa-in{border-color:var(--brand-line)}
.vfila.total,.vp-total,.rtotal{color:var(--brand-ink)}
.pos-tile.on,.pos-tile.activo,.pos-tile.sel{border-color:var(--brand)!important;background:linear-gradient(135deg,var(--brand-soft),transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--eik-cian) 22%,transparent)}
.ok-mark{background:var(--eik-grad)!important;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 14%,transparent),var(--eik-glow)}

/* --- EIK (asistente) --- */
.eik-fab,.eik-burbuja{background:var(--card);border:1px solid var(--brand-line);box-shadow:0 12px 34px rgba(106,44,240,.28)}

/* --- Avisos --- */
.toast2{border-radius:16px;border-left:4px solid currentColor}

/* --- Movimiento sutil de identidad --- */
@keyframes eikLatido{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,.55)}60%{box-shadow:0 0 0 7px rgba(255,210,63,0)}}
.mbadge{animation:eikLatido 2.4s infinite}
@media (prefers-reduced-motion:reduce){.mbadge{animation:none}.tile,.chip,.menu .btn{transition:none}}

/* --- Teléfono: más compacto, mismo carácter --- */
@media (max-width:959px){.principal{background-size:auto,auto,18px 18px,auto}.top::after{height:2px}.card,.pos-card{border-radius:16px}}
@media (min-width:960px){.principal{min-height:125vh}}

/* --- Casillas de resumen: fondo suave de color para distinguir cada apartado --- */
.ord-kpis .ord-kpi{--k:106,44,240;background:linear-gradient(135deg,rgba(var(--k),.075),rgba(var(--k),.02) 70%),var(--card);border-color:rgba(var(--k),.16)}
.ord-kpis .ord-kpi:nth-child(8n+2){--k:25,150,230}
.ord-kpis .ord-kpi:nth-child(8n+3){--k:224,140,20}
.ord-kpis .ord-kpi:nth-child(8n+4){--k:20,160,110}
.ord-kpis .ord-kpi:nth-child(8n+5){--k:230,100,40}
.ord-kpis .ord-kpi:nth-child(8n+6){--k:215,60,90}
.ord-kpis .ord-kpi:nth-child(8n+7){--k:30,170,130}
.ord-kpis .ord-kpi:nth-child(8n+8){--k:20,130,170}
.ord-kpis .ord-kpi>i{background:rgba(var(--k),.14);color:rgb(var(--k))}
.ord-kpis .ord-kpi.dest>i{background:rgb(var(--k));color:#fff}
.ord-kpis .ord-kpi.ancho{--k:106,44,240}
.ord-kpis .ord-kpi small em{background:rgba(var(--k),.14);color:rgb(var(--k))}
@media (prefers-color-scheme:dark){.ord-kpis .ord-kpi{background:linear-gradient(135deg,rgba(var(--k),.16),rgba(var(--k),.04) 70%),var(--card)}}

/* --- Tinte suave también en: tarjetas del panel, totales de cuentas, tarjetas de cuenta y resumen financiero --- */
.pan-grid .pan-card,.cf-tot>div,.cf-cuentas .cf-cuenta,.cu-total{--k:106,44,240;background:linear-gradient(135deg,rgba(var(--k),.07),rgba(var(--k),.015) 70%),var(--card);border-color:rgba(var(--k),.16)}
.pan-grid .pan-card:nth-child(4n+2),.cf-tot>div:nth-child(3n+2),.cf-cuentas .cf-cuenta:nth-child(4n+2){--k:25,150,230}
.pan-grid .pan-card:nth-child(4n+3),.cf-tot>div:nth-child(3n),.cf-cuentas .cf-cuenta:nth-child(4n+3){--k:20,160,110}
.pan-grid .pan-card:nth-child(4n),.cf-cuentas .cf-cuenta:nth-child(4n){--k:224,140,20}
.cf-tot>div.cf-gen{--k:106,44,240;background:linear-gradient(135deg,rgba(var(--k),.14),rgba(var(--k),.04)),var(--card)}
.cf-cuentas .cf-cuenta.inactiva{--k:140,140,160}
.pan-graf{--k:106,44,240;background:linear-gradient(135deg,rgba(var(--k),.05),transparent 70%),var(--card)}
.fin-fila{background:linear-gradient(90deg,rgba(106,44,240,.045),transparent 80%)}
.fin-fila.dest{background:linear-gradient(90deg,rgba(106,44,240,.12),rgba(25,195,255,.04))}
.fin-fila.menos{background:linear-gradient(90deg,rgba(215,60,90,.07),transparent 80%)}
@media (prefers-color-scheme:dark){.pan-grid .pan-card,.cf-tot>div,.cf-cuentas .cf-cuenta{background:linear-gradient(135deg,rgba(var(--k),.15),rgba(var(--k),.04) 70%),var(--card)}}