/* =====================================================================
   DEMOS animadas en vivo — una "muestra esencial" por programa.
   Se inyectan dentro del modal de cada programa.
   ===================================================================== */

.demo-wrap{margin-bottom:28px}
.demo-wrap h4{
  font-size:.78rem;text-transform:uppercase;letter-spacing:1.6px;font-weight:800;margin-bottom:15px;
  display:flex;align-items:center;gap:8px;
  background:var(--grad-btn);-webkit-background-clip:text;background-clip:text;color:transparent}
.demo{
  position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--linea2);
  background:#0B1020;color:#E6ECF8;min-height:188px;padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.demo *{box-sizing:border-box}
.dm-tag{
  display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:#9FB0D4;margin-bottom:14px}
.dm-live{width:8px;height:8px;border-radius:50%;background:#22D3EE;box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:dmPulse 1.6s infinite}
@keyframes dmPulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}70%{box-shadow:0 0 0 8px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.dm-caret{display:inline-block;width:2px;height:1em;background:#22D3EE;margin-left:1px;vertical-align:-2px;animation:dmBlink 1s steps(1) infinite}
@keyframes dmBlink{50%{opacity:0}}

/* ---------- BALANZA ---------- */
.dm-scale{text-align:center}
.dm-display{
  font-family:"JetBrains Mono","Courier New",monospace;font-weight:700;
  font-size:3.4rem;line-height:1;letter-spacing:2px;color:#22D3EE;
  text-shadow:0 0 18px rgba(34,211,238,.45);font-variant-numeric:tabular-nums;margin:6px 0 4px}
.dm-display small{font-size:1.1rem;color:#7C8AB0;margin-left:8px;letter-spacing:0}
.dm-scale-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.8rem;color:#9FB0D4}
.dm-stable{font-weight:800;padding:4px 12px;border-radius:999px;background:rgba(124,138,176,.18);transition:.3s}
.dm-stable.ok{background:rgba(16,185,129,.2);color:#34D399}
.dm-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:14px}
.dm-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563EB,#22D3EE);border-radius:6px;transition:width .15s linear}

/* ---------- FORMULARIO / FICHA (taller) ---------- */
.dm-form{display:grid;gap:10px}
.dm-field{background:#fff;border:1px solid #E2E5F0;border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:10px;min-height:42px}
.dm-field .lab{font-size:.64rem;text-transform:uppercase;letter-spacing:1px;color:#64748B;font-weight:800;min-width:96px}
.dm-field .val{font-size:.95rem;font-weight:800;color:#0F172A;-webkit-text-fill-color:#0F172A;white-space:nowrap;overflow:hidden}
.dm-stamp{
  margin-top:4px;text-align:center;font-weight:800;letter-spacing:1px;color:#34D399;
  border:2px dashed rgba(52,211,153,.6);border-radius:12px;padding:10px;opacity:0;transform:scale(.9) rotate(-3deg);
  transition:.4s cubic-bezier(.16,1,.3,1)}
.dm-stamp.show{opacity:1;transform:scale(1) rotate(-3deg)}

/* ---------- TICKET / POS / NOTA ---------- */
.dm-pos{display:grid;grid-template-columns:1fr;gap:12px}
.dm-scan{position:relative;height:64px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}
.dm-bars{display:flex;gap:2px;height:38px;align-items:stretch}
.dm-bars>i{width:3px;background:#0B1020}
.dm-bars>i:nth-child(2n){width:2px}
.dm-bars>i:nth-child(3n){width:5px}
.dm-bars>i:nth-child(5n){width:1.5px}
.dm-laser{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#EF4444,transparent);box-shadow:0 0 12px #EF4444;animation:dmLaser 1.6s ease-in-out infinite}
@keyframes dmLaser{0%,100%{top:8px}50%{top:52px}}
.dm-ticket{background:#fff;color:#0F172A;border-radius:10px;padding:14px;font-family:"JetBrains Mono","Courier New",monospace;font-size:.82rem}
.dm-ticket .row{display:flex;justify-content:space-between;padding:3px 0;opacity:0;transform:translateY(6px);transition:.3s}
.dm-ticket .row.show{opacity:1;transform:none}
.dm-ticket .tot{border-top:1px dashed #94A3B8;margin-top:8px;padding-top:8px;font-weight:800;font-size:1rem}
.dm-paid{display:inline-block;margin-top:8px;font-weight:800;color:#fff;background:#10B981;padding:5px 14px;border-radius:999px;opacity:0;transform:scale(.8);transition:.35s}
.dm-paid.show{opacity:1;transform:none}

/* ---------- RECIBO TÉRMICO (caja vecina, envío, etiquetas) ---------- */
.dm-paper-wrap{display:grid;place-items:center;perspective:600px}
.dm-paper{
  width:230px;background:#fff;color:#0F172A;border-radius:6px 6px 10px 10px;padding:16px 16px 22px;
  font-family:"JetBrains Mono","Courier New",monospace;position:relative;
  box-shadow:0 16px 30px rgba(0,0,0,.45);
}
.dm-paper::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:10px;
  background:repeating-linear-gradient(45deg,#fff 0 7px,transparent 7px 14px),repeating-linear-gradient(-45deg,#fff 0 7px,#0B1020 7px 14px);
  filter:saturate(0);}
.dm-printhead{position:absolute;left:-6px;right:-6px;height:10px;background:linear-gradient(#1f2937,#0b1020);border-radius:3px;box-shadow:0 0 14px rgba(34,211,238,.5);top:0;animation:dmHead 2.6s ease-in-out infinite}
@keyframes dmHead{0%{top:8px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:96%;opacity:0}}
.dm-rcpt-h{text-align:center;font-weight:800;font-size:.8rem;border-bottom:1px dashed #94A3B8;padding-bottom:8px;margin-bottom:8px}
.dm-rcpt-op{text-align:center;margin:6px 0}
.dm-rcpt-op .t{font-size:.7rem;letter-spacing:1px;color:#64748B;font-weight:800;text-transform:uppercase}
.dm-rcpt-op .a{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.dm-rcpt-op .a.in{color:#10B981}
.dm-rcpt-op .a.out{color:#EF4444}
.dm-rcpt-line{display:flex;justify-content:space-between;font-size:.74rem;padding:2px 0;color:#334155}
.dm-rcpt-foot{text-align:center;font-size:.66rem;color:#64748B;margin-top:8px;border-top:1px dashed #94A3B8;padding-top:8px}

/* ---------- ETIQUETA (código de barras / insumos) ---------- */
.dm-labels{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dm-label{
  background:#fff;color:#0F172A;border-radius:8px;padding:12px;width:170px;position:relative;overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.4)}
.dm-label .nm{font-weight:800;font-size:.82rem;margin-bottom:2px}
.dm-label .sub{font-size:.64rem;color:#64748B;margin-bottom:8px}
.dm-label .ean{font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:2px;margin-top:4px;font-weight:700}
.dm-label .fmt{position:absolute;top:8px;right:8px;font-size:.56rem;font-weight:800;color:#fff;background:var(--cat,#2563EB);padding:2px 7px;border-radius:999px}
.dm-print{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(34,211,238,.0),rgba(34,211,238,.35));transform:translateY(-100%);animation:dmPrint 3s ease-in-out infinite}
@keyframes dmPrint{0%{transform:translateY(-100%)}40%{transform:translateY(100%)}100%{transform:translateY(100%)}}
.dm-barbars{display:flex;gap:2px;height:34px;align-items:stretch;margin-top:6px}
.dm-barbars>i{flex:1;background:#0F172A;transform:scaleY(0);transform-origin:bottom;animation:dmGrow .5s forwards}
@keyframes dmGrow{to{transform:scaleY(1)}}

/* ---------- STOCK (insumos) ---------- */
.dm-stock{display:grid;gap:8px}
.dm-srow{display:grid;grid-template-columns:1fr 70px auto;gap:10px;align-items:center;font-size:.82rem}
.dm-srow .track{height:9px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.dm-srow .track>i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#10B981,#22D3EE);animation:dmFill 1.4s forwards}
.dm-srow.low .track>i{background:linear-gradient(90deg,#F59E0B,#EF4444)}
@keyframes dmFill{to{width:var(--w,60%)}}
.dm-alert{margin-left:6px;font-size:.66rem;font-weight:800;color:#FCA5A5;opacity:0}
.dm-srow.low .dm-alert{animation:dmBlink2 1s steps(1) infinite}
@keyframes dmBlink2{0%,100%{opacity:1}50%{opacity:.2}}

/* ---------- ESTACIONAMIENTO ---------- */
.dm-park{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.dm-qr{width:96px;height:96px;background:#fff;border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px}
.dm-qr i{background:#0F172A;border-radius:1px;opacity:0;animation:dmQr .5s forwards}
@keyframes dmQr{to{opacity:1}}
.dm-park-info .pl{font-weight:800;font-size:1.1rem;letter-spacing:2px}
.dm-park-info .tm{font-family:"JetBrains Mono",monospace;font-size:1.8rem;font-weight:800;color:#22D3EE;font-variant-numeric:tabular-nums}
.dm-park-info .co{font-size:.85rem;color:#9FB0D4;margin-top:2px}
.dm-park-info .co b{color:#34D399;font-size:1.05rem}

/* ---------- APP COMIDA ---------- */
.dm-track{display:flex;justify-content:space-between;position:relative;margin:6px 4px 16px}
.dm-track::before{content:"";position:absolute;top:13px;left:6%;right:6%;height:3px;background:rgba(255,255,255,.12)}
.dm-track>span{position:relative;z-index:1;text-align:center;font-size:.62rem;color:#7C8AB0;font-weight:700;width:25%}
.dm-track>span .d{width:28px;height:28px;border-radius:50%;background:#1f2937;border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;margin:0 auto 6px;transition:.3s;font-size:.8rem}
.dm-track>span.on{color:#EAF0FF}
.dm-track>span.on .d{background:var(--grad-btn);border-color:transparent;box-shadow:0 0 14px rgba(124,58,237,.6)}
.dm-pizza{position:relative;width:96px;height:96px;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle,#F4C76B 60%,#E0A23C 61%);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.dm-pizza i{position:absolute;width:16px;height:16px;border-radius:50%;background:#C0392B;opacity:0;transform:scale(0);animation:dmPop .4s forwards}
@keyframes dmPop{to{opacity:1;transform:scale(1)}}

/* ---------- GPS ---------- */
.dm-map{position:relative;height:170px;border-radius:12px;overflow:hidden;
  background:#0E1730;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.dm-geo{position:absolute;left:58%;top:40%;width:120px;height:120px;border-radius:50%;border:2px dashed rgba(34,211,238,.5);transform:translate(-50%,-50%)}
.dm-route{position:absolute;inset:0}
.dm-car{position:absolute;width:16px;height:16px;border-radius:50%;background:#22D3EE;box-shadow:0 0 0 5px rgba(34,211,238,.25),0 0 16px #22D3EE;offset-path:path("M20,140 C80,40 180,180 260,60");offset-rotate:0deg;animation:dmDrive 6s linear infinite}
@keyframes dmDrive{to{offset-distance:100%}}
.dm-hud{position:absolute;left:12px;bottom:12px;font-size:.74rem;color:#9FB0D4;font-weight:700;background:rgba(11,16,32,.7);padding:6px 10px;border-radius:8px}
.dm-hud b{color:#22D3EE}

/* ---------- TERMINAL (postformato) ---------- */
.dm-term{font-family:"JetBrains Mono","Courier New",monospace;font-size:.8rem;line-height:1.7}
.dm-term .ln{opacity:0;transform:translateY(4px);transition:.25s}
.dm-term .ln.show{opacity:1;transform:none}
.dm-term .ok{color:#34D399;font-weight:700}
.dm-term .pb{display:inline-block;width:120px;height:9px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;vertical-align:middle;margin:0 8px}
.dm-term .pb>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563EB,#22D3EE);animation:dmProg 1.6s forwards}
@keyframes dmProg{to{width:100%}}
.dm-term .pr{color:#22D3EE}

@media(max-width:520px){
  .demo{padding:16px;min-height:170px}
  .dm-display{font-size:2.6rem}
  .dm-park{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media(max-width:400px){
  .dm-display{font-size:2.1rem}
  .dm-label{width:100%;max-width:220px}
  .dm-paper{width:100%;max-width:215px}
  .dm-field{flex-wrap:wrap;gap:4px 10px}
  .dm-field .lab{min-width:auto}
  .dm-srow{grid-template-columns:1fr 52px auto;gap:8px;font-size:.78rem}
}