/* ==========================================================================
   PideFácil — Escenas de Pedidos, Ventas y Cobros
   Origen: 01-pedidos.html, 02-ventas.html, 03-cobros.html (Codex, 2026-08-16).
   Van dentro de los tres paneles de «La respuesta de Pidefacil», en Producto.

   Adaptaciones al sistema del sitio:
   - Fuera el enlace a Google Fonts: heredan Outfit del sitio, y los titulares
     que el original ponía en DM Sans pasan a --h-display, como el resto.
   - Cada escena va acotada bajo su propia raíz (.pf-pedidos, .pf-ventas,
     .pf-cobros). Es obligatorio: las tres definen .row, .alert, .title,
     .shell, .main y .sidebar con reglas distintas, y al convivir en una
     misma página se pisarían entre ellas.
   - Los @keyframes llevan prefijo por escena por el mismo motivo: son
     globales al documento y varios se llamaban igual.
   - Fuera lo que asumía ser una página completa: html/body a pantalla
     completa, .viewport y el fondo propio.
   - El original se escalaba contra el tamaño de la ventana; aquí lo hace
     contra el ancho de su columna (slides.js fija --pf-escala).
   Requiere base.css cargado antes.
   ========================================================================== */

/* --- .pf-pedidos ------------------------------------------------ */
.pf-pedidos{--paper:transparent;--accent:var(--h-accent);--dark:#33451D}
.pf-pedidos .viewport{width:100%;height:100%;display:grid;place-items:center}
.pf-pedidos .scene{width:760px;height:390px;display:flex;align-items:center;justify-content:center;gap:22px;transform-origin:top left}
.pf-pedidos .phone{width:235px;height:365px;background:#eef0e8;border:7px solid var(--dark);border-radius:28px;box-shadow:0 24px 50px rgba(51,69,29,.17);overflow:hidden;position:relative;transform:rotate(-2deg)}
.pf-pedidos .phone:before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:70px;height:16px;background:var(--dark);border-radius:0 0 10px 10px;z-index:3}
.pf-pedidos .phone-top{height:61px;background:var(--dark);color:#fff;display:flex;align-items:center;gap:7px;padding:15px 9px 6px;font-size:8px}
.pf-pedidos .back{font-size:22px}
.pf-pedidos .avatar{width:28px;height:28px;border-radius:50%;background:#d8b46d;display:grid;place-items:center;color:#fff;font-weight:800}
.pf-pedidos .phone-top b{display:block;font-size:9px}
.pf-pedidos .phone-top small{opacity:.7}
.pf-pedidos .more{margin-left:auto}
.pf-pedidos .chat-date{text-align:center;font-size:6px;color:#7a8680;padding:12px 0 5px}
.pf-pedidos .bubble{position:relative;background:#fff;margin:7px 29px 0 8px;padding:9px 10px;border-radius:4px 11px 11px 11px;font-size:8px;line-height:1.4;opacity:0;transform:translateY(8px);box-shadow:0 3px 8px rgba(0,0,0,.04)}
.pf-pedidos .bubble-2{display:flex;align-items:center;gap:6px}
.pf-pedidos .voice-play{width:18px;height:18px;background:var(--accent);color:var(--dark);border-radius:50%;display:grid;place-items:center;font-size:7px}
.pf-pedidos .wave{color:var(--accent);letter-spacing:1px}
.pf-pedidos .bubble small{color:#87918c}
.pf-pedidos .ticks{float:right;color:#4c9cdb;margin-left:4px}
.pf-pedidos .chat-input{position:absolute;bottom:8px;left:8px;right:8px;border-radius:18px;background:#fff;color:#9aa29e;padding:9px 12px;font-size:8px}
.pf-pedidos .chat-input span{float:right;background:var(--accent);color:var(--dark);border-radius:50%;width:19px;height:19px;display:grid;place-items:center;margin-top:-5px}
.pf-pedidos .flow{width:48px;display:flex;gap:7px;position:relative}
.pf-pedidos .flow:before{content:"";position:absolute;height:1px;left:-7px;right:-7px;top:5px;background:#abc5b8}
.pf-pedidos .flow i{width:10px;height:10px;border-radius:50%;background:var(--accent);z-index:1;opacity:.2}
.pf-pedidos .card{width:430px;height:320px;background:#fff;border:1px solid #d8ded5;border-radius:15px;box-shadow:0 25px 65px rgba(30,56,47,.14);position:relative}
.pf-pedidos .window-head{height:49px;border-bottom:1px solid #e8ebe6;padding:0 17px;display:flex;align-items:center;gap:12px;font-size:10px}
.pf-pedidos .window-head>span{display:flex;gap:4px}
.pf-pedidos .window-head>span i{width:6px;height:6px;border-radius:50%;background:#ccd2ca}
.pf-pedidos .window-head b{font-size:11px}
.pf-pedidos .window-head em{margin-left:auto;font-style:normal;color:#7d8983}
.pf-pedidos .client{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid #edf0ec}
.pf-pedidos .client>span{width:32px;height:32px;border-radius:8px;background:#e7efe9;color:var(--dark);display:grid;place-items:center;font-weight:800;font-size:10px}
.pf-pedidos .client div small,.pf-pedidos .client div b{display:block}
.pf-pedidos .client div small{font-size:6px;color:#8a948e;letter-spacing:1px}
.pf-pedidos .client div b{font-size:10px;margin-top:3px}
.pf-pedidos .client strong{margin-left:auto;font-size:7px;color:var(--dark);background:rgba(152,176,106,.22);padding:6px 8px;border-radius:10px}
.pf-pedidos .row{margin:0 17px;padding:15px 4px;border-bottom:1px solid #eef0ed;display:grid;grid-template-columns:28px 1fr auto;font-size:9px;align-items:center}
.pf-pedidos .row span{color:#9da59f}
.pf-pedidos .row em{font-style:normal;color:#55645e}
.pf-pedidos .total{display:flex;justify-content:space-between;margin:15px 20px;font-size:7px;color:#78847e}
.pf-pedidos .total b{color:var(--accent)}
.pf-pedidos .toast{position:absolute;right:-18px;bottom:-24px;background:var(--dark);color:#fff;border-radius:12px;box-shadow:0 17px 35px rgba(51,69,29,.28);padding:12px 18px 12px 48px;min-width:190px;opacity:0;transform:translateY(10px)}
.pf-pedidos .toast>span{position:absolute;left:14px;top:12px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--dark);font-weight:900}
.pf-pedidos .toast b,.pf-pedidos .toast small{display:block}
.pf-pedidos .toast b{font-size:10px}
.pf-pedidos .toast small{font-size:7px;opacity:.65;margin-top:3px}
.pf-pedidos .running .bubble-1{animation:pfped-pop .4s .35s forwards}
.pf-pedidos .running .bubble-2{animation:pfped-pop .4s 1.2s forwards}
.pf-pedidos .running .bubble-3{animation:pfped-pop .4s 2.1s forwards}
.pf-pedidos .running .flow i{animation:pfped-flow 1.4s infinite}
.pf-pedidos .running .flow i:nth-child(2){animation-delay:.25s}
.pf-pedidos .running .flow i:nth-child(3){animation-delay:.5s}
.pf-pedidos .running .toast{animation:pfped-pop .5s 3.2s forwards}
@keyframes pfped-pop{to{opacity:1;transform:none}}
@keyframes pfped-flow{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

/* --- .pf-ventas ------------------------------------------------ */
.pf-ventas{--paper:transparent;--title:var(--h-ink);--accent:var(--h-accent);--dark:#33451D;--red:#e85d4f}
.pf-ventas .viewport{width:100%;height:100%;display:grid;place-items:center}
.pf-ventas .scene{width:760px;height:390px;position:relative;transform-origin:top left}
.pf-ventas .shell{position:absolute;inset:15px 8px 16px;display:flex;border:1px solid #d8ded5;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 24px 65px rgba(29,58,48,.15)}
.pf-ventas .sidebar{width:58px;background:var(--dark);display:flex;align-items:center;flex-direction:column;padding:17px 0;gap:18px}
.pf-ventas .brand{width:20px;height:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-items:end;transform:skew(-7deg);margin-bottom:8px}
.pf-ventas .brand i{border-radius:3px;background:#fff;height:9px}
.pf-ventas .brand i:nth-child(2){height:15px}
.pf-ventas .brand i:nth-child(3){height:20px;background:var(--accent)}
.pf-ventas .sidebar>i{width:17px;height:17px;border:1px solid rgba(255,255,255,.2);border-radius:5px}
.pf-ventas .sidebar>i.selected{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(152,176,106,.12)}
.pf-ventas .sidebar>span:last-child{margin-top:auto;width:25px;height:25px;border-radius:50%;background:var(--accent);color:var(--dark);font-size:7px;display:grid;place-items:center}
.pf-ventas .main{flex:1;padding:22px 26px;background:#fbfcfa}
.pf-ventas .title{display:flex;justify-content:space-between;align-items:center}
.pf-ventas .title small,.pf-ventas .title b{display:block}
.pf-ventas .title small{font-size:7px;color:#87928c;letter-spacing:1.2px}
.pf-ventas .title b{color:var(--title);font:800 20px var(--h-display);margin-top:5px}
.pf-ventas .title>span{border:1px solid #dce1da;padding:7px 10px;border-radius:6px;color:#69756f;font-size:7px}
.pf-ventas .metrics{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:9px;margin:15px 0}
.pf-ventas .metrics>div{border:1px solid #e3e7e1;background:#fff;border-radius:9px;padding:11px 13px;position:relative}
.pf-ventas .metrics small,.pf-ventas .metrics b{display:block}
.pf-ventas .metrics small{font-size:6px;color:#929a96;letter-spacing:.7px}
.pf-ventas .metrics b{font:800 15px var(--h-display);margin-top:5px}
.pf-ventas .metrics em{position:absolute;right:11px;bottom:11px;font-style:normal;font-size:6px;color:var(--dark);background:rgba(152,176,106,.22);padding:3px 5px;border-radius:5px}
.pf-ventas .metrics .risk{border-color:#f0c8c2;background:#fff9f8}
.pf-ventas .metrics .risk em{color:#c8584d;background:#fae5e2}
.pf-ventas .chart{height:205px;border:1px solid #e2e6e0;background:#fff;border-radius:10px;padding:13px}
.pf-ventas .chart-head{display:flex;justify-content:space-between;font-size:6px;color:#737f79}
.pf-ventas .chart-head i{display:inline-block;width:6px;height:6px;border-radius:2px;margin-right:4px}
.pf-ventas .blue{background:#79a898}
.pf-ventas .red{background:var(--red)}
.pf-ventas .area{position:relative;height:165px;margin-top:7px;overflow:hidden}
.pf-ventas .grid{position:absolute;inset:5px 0 22px;display:flex;flex-direction:column;justify-content:space-between}
.pf-ventas .grid i{border-top:1px dashed #e6e9e5}
.pf-ventas .months{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;font-size:5px;color:#929b96}
.pf-ventas .bars{position:absolute;inset:12px 8px 20px;display:flex;align-items:flex-end;justify-content:space-around}
.pf-ventas .bars i{width:9%;background:#e5eeea;border-radius:4px 4px 0 0}
.pf-ventas .bars i:nth-child(1){height:48%}
.pf-ventas .bars i:nth-child(2){height:61%}
.pf-ventas .bars i:nth-child(3){height:68%}
.pf-ventas .bars i:nth-child(4){height:75%}
.pf-ventas .bars i:nth-child(5){height:84%}
.pf-ventas .bars i:nth-child(6){height:92%}
.pf-ventas .line{position:absolute;inset:6px 2% 25px;width:96%;height:135px;overflow:visible}
.pf-ventas .line path{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:800;stroke-dashoffset:800}
.pf-ventas .line circle{fill:#fff;stroke:var(--red);stroke-width:3;opacity:0}
.pf-ventas .drop{position:absolute;right:0;bottom:25px;background:var(--red);color:#fff;border-radius:5px;padding:4px 7px;font-size:7px;font-weight:800;opacity:0}
.pf-ventas .alert{position:absolute;z-index:5;right:-10px;bottom:4px;width:480px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e6c9c3;border-left:4px solid var(--red);border-radius:11px;box-shadow:0 18px 45px rgba(46,60,55,.2);padding:13px 15px;opacity:0;transform:translateY(13px)}
.pf-ventas .alert-icon{width:30px;height:30px;border-radius:8px;background:#fbe8e5;color:var(--red);display:grid;place-items:center;font-weight:900;flex:none}
.pf-ventas .alert div{min-width:0}
.pf-ventas .alert small,.pf-ventas .alert b,.pf-ventas .alert p{display:block;margin:0}
.pf-ventas .alert small{color:var(--red);font-size:6px;font-weight:900;letter-spacing:1px}
.pf-ventas .alert b{font-size:9px;margin:4px 0}
.pf-ventas .alert p{font-size:7px;color:#7c8681}
.pf-ventas .alert button{margin-left:auto;border:0;background:var(--dark);color:#fff;border-radius:7px;padding:8px 10px;font-size:7px;white-space:nowrap}
.pf-ventas .running .line path{animation:pfven-draw 2.1s .4s ease forwards}
.pf-ventas .running .line circle{animation:pfven-fade .3s 2.4s forwards}
.pf-ventas .running .drop{animation:pfven-pop .4s 2.5s forwards}
.pf-ventas .running .alert{animation:pfven-alertIn .55s 3s forwards}
@keyframes pfven-draw{to{stroke-dashoffset:0}}
@keyframes pfven-fade{to{opacity:1}}
@keyframes pfven-pop{to{opacity:1;transform:none}}
@keyframes pfven-alertIn{60%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}

/* --- .pf-cobros ------------------------------------------------ */
.pf-cobros{--paper:transparent;--title:var(--h-ink);--accent:var(--h-accent);--dark:#33451D;--red:#e85d4f}
.pf-cobros .viewport{width:100%;height:100%;display:grid;place-items:center}
.pf-cobros .scene{width:760px;height:390px;position:relative;transform-origin:top left}
.pf-cobros .shell{position:absolute;inset:15px 8px 16px;display:flex;border:1px solid #d8ded5;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 24px 65px rgba(29,58,48,.15)}
.pf-cobros .sidebar{width:58px;background:var(--dark);display:flex;align-items:center;flex-direction:column;padding:17px 0;gap:18px}
.pf-cobros .brand{width:20px;height:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-items:end;transform:skew(-7deg);margin-bottom:8px}
.pf-cobros .brand i{border-radius:3px;background:#fff;height:9px}
.pf-cobros .brand i:nth-child(2){height:15px}
.pf-cobros .brand i:nth-child(3){height:20px;background:var(--accent)}
.pf-cobros .sidebar>i{width:17px;height:17px;border:1px solid rgba(255,255,255,.2);border-radius:5px}
.pf-cobros .sidebar>i.selected{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(152,176,106,.12)}
.pf-cobros .sidebar>span:last-child{margin-top:auto;width:25px;height:25px;border-radius:50%;background:var(--accent);color:var(--dark);font-size:7px;display:grid;place-items:center}
.pf-cobros .main{flex:1;padding:22px 26px;background:#fbfcfa}
.pf-cobros .title{display:flex;justify-content:space-between;align-items:center}
.pf-cobros .title small,.pf-cobros .title b{display:block}
.pf-cobros .title small{font-size:7px;color:#87928c;letter-spacing:1.2px}
.pf-cobros .title b{color:var(--title);font:800 20px var(--h-display);margin-top:5px}
.pf-cobros .title>span{border:1px solid #dce1da;padding:7px 10px;border-radius:6px;color:#69756f;font-size:7px}
.pf-cobros .table{margin-top:25px;border:1px solid #e2e6e0;background:#fff;border-radius:10px;overflow:hidden}
.pf-cobros .row{display:grid;grid-template-columns:.7fr 1.2fr .75fr 1fr 1fr;align-items:center;min-height:48px;padding:0 14px;border-bottom:1px solid #edf0ec;font-size:8px}
.pf-cobros .row:last-child{border:0}
.pf-cobros .head{min-height:33px;background:#f5f7f3;color:#909993;font-size:6px;font-weight:800;letter-spacing:.7px}
.pf-cobros .row em{font-style:normal;color:#4c8068;background:#e9f4ec;padding:5px 7px;border-radius:10px;width:max-content}
.pf-cobros .danger{position:relative;background:#fff8f7;border:1px solid transparent}
.pf-cobros .danger em{color:#c84e42;background:#fae0dc}
.pf-cobros .scan{position:absolute;left:68px;right:8px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 12px var(--accent);top:80px;opacity:0}
.pf-cobros .alert{position:absolute;z-index:5;right:13px;bottom:0;width:510px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e6c9c3;border-left:4px solid var(--red);border-radius:11px;box-shadow:0 18px 45px rgba(46,60,55,.2);padding:13px 15px;opacity:0;transform:translateY(13px)}
.pf-cobros .alert-icon{width:30px;height:30px;border-radius:8px;background:#fbe8e5;color:var(--red);display:grid;place-items:center;font-weight:900;flex:none}
.pf-cobros .alert div{min-width:0}
.pf-cobros .alert small,.pf-cobros .alert b,.pf-cobros .alert p{display:block;margin:0}
.pf-cobros .alert small{color:var(--red);font-size:6px;font-weight:900;letter-spacing:1px}
.pf-cobros .alert b{font-size:9px;margin:4px 0}
.pf-cobros .alert p{font-size:7px;color:#7c8681}
.pf-cobros .alert button{margin-left:auto;border:0;background:var(--dark);color:#fff;border-radius:7px;padding:8px 10px;font-size:7px;white-space:nowrap}
.pf-cobros .running .danger{animation:pfcob-danger 1.2s 1.6s forwards}
.pf-cobros .running .scan{animation:pfcob-scan 2s .4s ease-in-out forwards}
.pf-cobros .running .alert{animation:pfcob-alertIn .55s 3s forwards}
@keyframes pfcob-danger{50%,100%{border-color:#ec8e84;box-shadow:inset 3px 0 0 var(--red)}}
@keyframes pfcob-scan{0%{opacity:0;top:80px}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:290px}}
@keyframes pfcob-alertIn{60%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}


/* --- Envoltorio común -------------------------------------------------- */
/* Va al final a propósito: la escala y el origen deben ganar a los
   .pf-* .scene de arriba, que tienen la misma especificidad. */

.pf-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 390;
}

.pf-slide .scene {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: scale(var(--pf-escala, 1));
}

/* --- Versión móvil (≤620px) --------------------------------------------- */
/* Réplica del tratamiento de la animación de agentes de la Home: encoger el
   lienzo de 760px con --pf-escala dejaba los textos en ~4px, así que cada
   escena se recompone a tamaño de lectura. El transform:none anula la
   escala que slides.js sigue calculando. */
@media(max-width:620px){
.pf-slide{aspect-ratio:auto}
.pf-slide .scene{position:static;transform:none;width:100%}

/* Pedidos: teléfono y ficha del ERP solapados para ganar tamaño. El chat
   necesita el teléfono más alto y márgenes cortos para que el tercer
   bocadillo no quede debajo de la barra de «Mensaje». */
.pf-pedidos .scene{height:300px;gap:0}
.pf-pedidos .phone{width:140px;height:274px;border-width:5px;flex:none;z-index:1;transform:rotate(-2deg) translateY(-6px)}
.pf-pedidos .phone-top{height:52px;font-size:9px}
.pf-pedidos .phone-top b{font-size:10px}
.pf-pedidos .chat-date{font-size:7.5px;padding:8px 0 3px}
.pf-pedidos .bubble{font-size:9.5px;margin:6px 12px 0 8px}
.pf-pedidos .chat-input{font-size:9px}
.pf-pedidos .flow{display:none}
.pf-pedidos .card{width:min(62vw,232px);height:252px;margin-left:-14px;transform:translateY(10px)}
.pf-pedidos .window-head{height:38px;font-size:10px}
.pf-pedidos .window-head b{font-size:11.5px}
.pf-pedidos .client{padding:12px 14px}
.pf-pedidos .client div small{font-size:7.5px}
.pf-pedidos .client div b{font-size:10.5px}
.pf-pedidos .client strong{font-size:8px}
.pf-pedidos .row{margin:0 14px;padding:11px 4px;font-size:10px}
.pf-pedidos .total{margin:11px 14px;font-size:8.5px}
.pf-pedidos .toast{right:0;bottom:-10px;padding:10px 14px 10px 42px;min-width:160px}
.pf-pedidos .toast b{font-size:10.5px}
.pf-pedidos .toast small{font-size:8px}

/* Ventas y Cobros: panel del ERP a todo el alto y letra mayor. La escena
   crece por abajo para que la alerta se apoye bajo el panel en vez de
   taparle media gráfica o la última factura. */
.pf-ventas .scene,.pf-cobros .scene{position:relative;height:352px}
.pf-ventas .shell,.pf-cobros .shell{inset:4px 0 44px}
.pf-ventas .sidebar,.pf-cobros .sidebar{width:36px;gap:14px}
.pf-ventas .main,.pf-cobros .main{padding:14px 12px}
.pf-ventas .title small,.pf-cobros .title small{font-size:8px}
.pf-ventas .title b,.pf-cobros .title b{font-size:16px}
.pf-ventas .title>span,.pf-cobros .title>span{display:none}
.pf-ventas .metrics{grid-template-columns:1fr 1fr;margin:8px 0}
.pf-ventas .metrics>div{padding:8px 10px}
.pf-ventas .metrics>div:first-child{display:none}
.pf-ventas .metrics small{font-size:7.5px}
.pf-ventas .metrics b{font-size:13px;margin-top:3px}
/* En cajas tan estrechas la etiqueta absoluta pisaba la cifra: pasa a flujo */
.pf-ventas .metrics em{position:static;display:inline-block;margin-top:3px;font-size:7px;padding:2px 4px}
.pf-ventas .chart{height:152px;padding:11px}
.pf-ventas .chart-head{font-size:7.5px}
.pf-ventas .area{height:120px}
.pf-ventas .line{height:calc(100% - 31px)}
.pf-ventas .months{font-size:7px}
.pf-ventas .drop{font-size:8.5px}
.pf-cobros .table{margin-top:12px}
.pf-cobros .row{grid-template-columns:.8fr 1.2fr .8fr 1fr;column-gap:6px;min-height:40px;padding:0 11px;font-size:9.5px}
.pf-cobros .head{min-height:30px;font-size:7px;letter-spacing:.4px}
.pf-cobros .row>span{white-space:nowrap}
.pf-cobros .row span:nth-child(4){display:none}
.pf-cobros .scan{left:40px;right:4px}
/* La alerta arranca pasado el menú lateral y solo monta unos px sobre el panel */
.pf-ventas .alert,.pf-cobros .alert{width:calc(100% - 42px);right:0;bottom:0;padding:11px 13px;gap:10px}
.pf-ventas .alert small,.pf-cobros .alert small{font-size:7.5px}
.pf-ventas .alert b,.pf-cobros .alert b{font-size:10.5px}
.pf-ventas .alert p,.pf-cobros .alert p{font-size:8.5px}
.pf-ventas .alert button,.pf-cobros .alert button{display:none}
}