/* ============================================================
   Terminal de pago e impresora de tickets (checkout dentro del sitio)
   La arma assets/js/pago.js. Etapas (data-etapa): esperando · procesando · imprimiendo · listo · pendiente
   ============================================================ */
.impresora{
  --imp-cuerpo:#3f142f;--imp-borde:#2a0b1d;--imp-brillo:rgba(255,255,255,.14);--imp-ranura:#150610;
  --imp-lcd:#1a0811;--imp-lcd-txt:#ffd9e4;--imp-lcd-dim:#c493a5;--imp-lcd-acento:#ff9ec1;
  --imp-papel:#fffdf8;--imp-tinta:#2b1a22;--imp-tinta-suave:#6d5560;
  --imp-radio:24px;--imp-inset:12px;--imp-radio-int:calc(var(--imp-radio) - var(--imp-inset));
  --imp-ruido:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.55'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;margin:0 auto;font-family:var(--f-u,'Outfit',system-ui,sans-serif)
}
/* ---- La máquina ---- */
.imp-maquina{
  position:relative;isolation:isolate;width:100%;overflow:hidden;border-radius:var(--imp-radio);padding:var(--imp-inset) var(--imp-inset) 32px;
  background:var(--imp-cuerpo);border:1px solid var(--imp-borde);color:var(--imp-lcd-txt);
  box-shadow:0 20px 36px -20px rgba(42,11,29,.75),0 6px 14px -8px rgba(42,11,29,.45),inset 0 1px 0 var(--imp-brillo),inset 0 -1px 0 rgba(0,0,0,.55)
}
.imp-maquina:before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--imp-ruido);background-size:180px 180px;opacity:.28;mix-blend-mode:multiply;pointer-events:none}
.imp-ranura{position:absolute;left:24px;right:24px;bottom:var(--imp-inset);z-index:4;height:8px;border-radius:4px;background:var(--imp-ranura);border:1px solid #0d0309;box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 var(--imp-brillo)}
/* cabecera: marca + led */
.imp-cab{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 6px 0 8px}
.imp-marca{font-family:var(--f-d,'Fraunces',Georgia,serif);font-weight:700;font-size:17px;color:#ffe3ec;letter-spacing:.01em}
.imp-led{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--imp-lcd-dim);letter-spacing:.06em;text-transform:uppercase}
.imp-led i{width:9px;height:9px;border-radius:50%;background:#f5b62a;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px #f5b62a;animation:imp-led 1.6s ease-in-out infinite}
.impresora[data-etapa=listo] .imp-led i{background:#3fd08a;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px #3fd08a;animation:none}
.impresora[data-etapa=pendiente] .imp-led i{background:#ff9ec1;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px #ff9ec1;animation:none}
.impresora.imp-error .imp-led i{background:#ff4d6d;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px #ff4d6d;animation:none}
@keyframes imp-led{0%,100%{opacity:1}50%{opacity:.45}}
/* pantalla lcd */
.imp-pantalla{position:relative;z-index:1;isolation:isolate;overflow:hidden;border-radius:var(--imp-radio-int);background:var(--imp-lcd);border:1px solid #0d0309;padding:16px 16px 14px;box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
.imp-pantalla:after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 24px 4px rgba(0,0,0,.5);background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.imp-lineas{position:relative;z-index:1;font-family:'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;font-size:13px;line-height:1.55}
.imp-lineas div{display:flex;justify-content:space-between;gap:12px}
.imp-lineas div span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--imp-lcd-dim)}
.imp-lineas div b{font-weight:600;white-space:nowrap;color:var(--imp-lcd-txt)}
.imp-lineas div:first-child span{color:var(--imp-lcd-txt);font-weight:600}
.imp-lineas div:last-child{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,158,193,.35);font-size:15px}
.imp-lineas div:last-child span,.imp-lineas div:last-child b{color:var(--imp-lcd-acento)}
.imp-estado{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:12px;min-height:20px}
.imp-icono{position:relative;width:20px;height:20px;flex:none;display:grid;place-items:center}
.imp-icono svg{position:absolute;inset:0;width:20px;height:20px;transition:opacity .16s,transform .16s cubic-bezier(.23,1,.32,1)}
.imp-icono .imp-giro{color:var(--imp-lcd-dim);animation:imp-spin 1s linear infinite}
.imp-icono .imp-ok{color:#3fd08a;opacity:0;transform:scale(.9)}
.imp-icono .imp-reloj{color:var(--imp-lcd-acento);opacity:0;transform:scale(.9)}
.impresora[data-etapa=listo] .imp-icono .imp-giro,.impresora[data-etapa=pendiente] .imp-icono .imp-giro,.impresora[data-etapa=esperando] .imp-icono .imp-giro{opacity:0;transform:scale(.9)}
.impresora[data-etapa=listo] .imp-icono .imp-ok{opacity:1;transform:scale(1)}
.impresora[data-etapa=pendiente] .imp-icono .imp-reloj,.impresora[data-etapa=esperando] .imp-icono .imp-reloj{opacity:1;transform:scale(1)}
.impresora[data-etapa=esperando] .imp-icono .imp-reloj{animation:imp-parpadeo 1.6s ease-in-out infinite}
@keyframes imp-spin{to{transform:rotate(360deg)}}
@keyframes imp-parpadeo{0%,100%{opacity:1}50%{opacity:.35}}
.imp-estado-txt{font-size:12px;font-weight:500;color:var(--imp-lcd-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:imp-sube .18s cubic-bezier(.23,1,.32,1)}
@keyframes imp-sube{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ---- Panel de pago (dentro de la máquina, bajo la pantalla) ---- */
.imp-teclado{position:relative;z-index:1;margin-top:var(--imp-inset);border-radius:var(--imp-radio-int);background:var(--papel,#fff8f3);color:var(--tinta,#2b1a22);padding:14px;box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.4);max-height:1400px;transition:max-height .55s cubic-bezier(.77,0,.175,1),opacity .3s,padding .45s,margin .45s}
.imp-teclado .btn{width:100%;margin-top:12px;text-align:center}
.imp-teclado .btn:disabled{opacity:.6}
.imp-express{margin-bottom:14px}
.imp-express-btn{min-height:48px;border-radius:10px}
.imp-express.cargando .imp-express-btn{background:linear-gradient(90deg,#efe3e8 25%,#f8eef2 50%,#efe3e8 75%);background-size:200% 100%;animation:imp-shimmer 1.2s linear infinite}
.imp-express.cargando .imp-express-txt,.imp-express.cargando .imp-o{visibility:hidden}
@keyframes imp-shimmer{to{background-position:-200% 0}}
.imp-app-aviso{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#fff4d6;color:#6b4a00;font-size:13.5px;line-height:1.45}
.imp-app-link{display:inline-block;margin-top:4px;font-weight:700;color:#4b1533;text-decoration:underline}
.imp-diag{margin:12px 0 0;padding:10px;border-radius:8px;background:#1a0811;color:#ffd9e4;font:11.5px/1.5 SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.imp-express-txt{margin:8px 0 0;font-size:13px;line-height:1.4;color:#8a6a75;text-align:center}
.imp-o{display:flex;align-items:center;gap:10px;margin:14px 0 2px;color:#a3838e;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.imp-o::before,.imp-o::after{content:"";flex:1;height:1px;background:#f1d6df}
.imp-stripe{min-height:120px}
.imp-cargando{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;color:var(--suave,#8a6a75);font-size:14px}
.imp-cargando i{width:16px;height:16px;border:2px solid var(--linea,#f1d6df);border-top-color:var(--rosa,#d64570);border-radius:50%;animation:imp-spin .8s linear infinite}
.imp-msg{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff3cd;color:#7a5a00;font-size:13px;line-height:1.4}
.imp-msg.ver{display:block}
.imp-seguro{margin:10px 0 0;font-size:11px;color:var(--suave,#8a6a75);text-align:center;line-height:1.4}
.impresora[data-etapa=procesando] .imp-teclado{pointer-events:none;opacity:.55}
.impresora[data-etapa=imprimiendo] .imp-teclado,.impresora[data-etapa=listo] .imp-teclado,.impresora[data-etapa=pendiente] .imp-teclado{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:0;overflow:hidden;pointer-events:none}
/* ---- Salida del papel ---- */
.imp-salida{position:relative;z-index:5;width:calc(80% + 3rem);max-width:100%;margin-top:-16px;padding:0 24px;overflow:hidden;height:0;transition:height .3s}
.imp-sombra{position:absolute;left:24px;right:24px;top:-4px;z-index:2;height:8px;background:rgba(21,6,16,.8);filter:blur(6px);opacity:0;transition:opacity .2s}
.impresora[data-etapa=imprimiendo] .imp-sombra,.impresora[data-etapa=listo] .imp-sombra,.impresora[data-etapa=pendiente] .imp-sombra{opacity:1}
.imp-hoja{position:relative;padding-bottom:20px;transform:translateY(calc(-100% + 2px));filter:drop-shadow(0 8px 22px rgba(75,21,51,.22));will-change:transform}
.impresora[data-etapa=imprimiendo] .imp-hoja{animation:imp-feed 1.75s linear forwards}
.impresora[data-etapa=listo] .imp-hoja,.impresora[data-etapa=pendiente] .imp-hoja{transform:translateY(0)}
/* el papel avanza a tirones, línea por línea, como una impresora térmica */
@keyframes imp-feed{
  0%{transform:translateY(calc(-100% + 2px))}7.5%{transform:translateY(-91%)}10.5%{transform:translateY(-91%)}18%{transform:translateY(-81%)}21%{transform:translateY(-81%)}
  28.5%{transform:translateY(-70%)}31.5%{transform:translateY(-70%)}39%{transform:translateY(-58%)}42%{transform:translateY(-58%)}49.5%{transform:translateY(-45%)}52.5%{transform:translateY(-45%)}
  60%{transform:translateY(-32%)}63%{transform:translateY(-32%)}70.5%{transform:translateY(-20%)}73.5%{transform:translateY(-20%)}81%{transform:translateY(-10%)}84%{transform:translateY(-10%)}
  91.5%{transform:translateY(-3%)}94.5%{transform:translateY(-3%)}100%{transform:translateY(0)}
}
.imp-papel{position:relative;min-height:320px;background:var(--imp-papel);color:var(--imp-tinta);padding:0}
.imp-papel:before{content:"";position:absolute;inset:0;background:var(--imp-ruido);background-size:120px 120px;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.imp-papel>*{position:relative}
/* ---- El ticket (mismo HTML que va por correo, aquí con clases) ---- */
.tk{font-family:'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;font-size:13px;line-height:1.5;color:var(--imp-tinta);padding:26px 20px 30px;text-align:left}
.tk-cab{text-align:center;margin-bottom:10px}
.tk-logo{font-size:30px;line-height:1;margin-bottom:6px}
.tk-sitio{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tk-enc{font-size:11px;color:var(--imp-tinta-suave);white-space:pre-line;margin-top:4px}
.tk-sep{border-top:1px dashed #b9a3ac;height:0;margin:10px 0}
.tk-fila{display:flex;justify-content:space-between;gap:12px}
.tk-fila-i{flex:0 1 auto;white-space:nowrap}
.tk-fila-d{flex:1;min-width:0;text-align:right;overflow-wrap:anywhere}
.tk-chico{font-size:11px;color:var(--imp-tinta-suave)}
.tk-concepto{font-weight:700;margin:2px 0 6px}
.tk-detalle{font-size:11px;color:var(--imp-tinta-suave);font-weight:400;display:block}
.tk-desc{color:var(--ok,#1f8a5b)}
.tk-total{font-size:16px;font-weight:700;margin:2px 0}
.tk-estado{text-align:center;font-weight:700;letter-spacing:.12em;font-size:12px;margin:4px 0}
.tk-link{text-align:center;word-break:break-all}
.tk-link-a{display:block;color:var(--plum,#4b1533);font-weight:700;text-decoration:underline;margin:4px 0}
.tk-pie{text-align:center;font-size:11px;color:var(--imp-tinta-suave);white-space:pre-line;margin-top:6px}
.tk-instr{font-size:12px;white-space:pre-line;background:#fff4f7;border-radius:8px;padding:10px 12px;margin:8px 0}
.tk-barras{height:34px;margin:14px auto 4px;width:78%;background:repeating-linear-gradient(90deg,var(--imp-tinta) 0 2px,transparent 2px 4px,var(--imp-tinta) 4px 5px,transparent 5px 8px,var(--imp-tinta) 8px 11px,transparent 11px 13px)}
.tk-folio{text-align:center;font-size:11px;letter-spacing:.3em;color:var(--imp-tinta-suave)}
/* ---- Acciones al terminar ---- */
.imp-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
.impresora[data-etapa=listo] .imp-acciones,.impresora[data-etapa=pendiente] .imp-acciones{opacity:1;transform:none;pointer-events:auto}
.imp-acciones .btn{padding:11px 18px;font-size:14px}
.imp-nota{width:100%;text-align:center;font-size:13px;color:var(--suave,#8a6a75);margin:4px 0 0}
/* ---- Página pequeña ---- */
@media (max-width:480px){
  .impresora{max-width:none}
  .imp-salida{width:100%;padding:0 10px}
  .imp-sombra{left:10px;right:10px}
  .tk{font-size:12px;padding:22px 14px 26px}
  .tarjeta:has(.impresora){padding:18px 12px}
}
@media (prefers-reduced-motion:reduce){.imp-express.cargando .imp-express-btn{animation:none;background:#f3e7ec}
  .imp-led i,.imp-icono .imp-giro,.imp-icono .imp-reloj,.imp-estado-txt{animation:none}
  .impresora[data-etapa=imprimiendo] .imp-hoja{animation:none;transform:translateY(0)}
  .imp-teclado,.imp-salida,.imp-acciones{transition:none}
}