/* ==========================================================================
   PideFácil — Animación principal de los tres agentes (Pedidos/Ventas/Cobros)
   Origen: pidefacil-animacion-principal.html (Codex, 2026-08-16).

   Adaptaciones al sistema del sitio:
   - Fuera el enlace a Google Fonts: el archivo cargaba DM Sans y Outfit, pero
     su CSS solo usaba Outfit (en body), así que hereda la del sitio.
   - Todos los selectores van acotados bajo .pf-main, porque varias de sus
     clases (.pf-erp-card, .active, .track, .bars…) ya existen en el sitio.
   - Se neutraliza lo que asumía ser una página completa: min-height:100vh,
     el padding de página y el fondo propio.
   - --paper pasa a transparent y --title/--accent apuntan a los tokens.
   Requiere base.css cargado antes.
   ========================================================================== */

.pf-main{--ink:#132821;--paper:transparent;--title:var(--h-ink);--accent:var(--h-accent);--dark:#33451D;--red:#e85d4f}
.pf-main button{font:inherit}
.pf-main{overflow:visible;position:relative;padding:0;background:transparent;display:flex;flex-direction:column;justify-content:center}
.pf-main .story{position:relative;width:min(1280px,100%);min-height:390px;margin:0 auto;display:grid;grid-template-columns:minmax(270px,.72fr) minmax(600px,1.55fr);gap:clamp(35px,5vw,85px);align-items:center}
.pf-main .story-copy{padding-left:4px;animation:copyIn .6s cubic-bezier(.2,.7,.2,1) both}
.pf-main .step-eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:2px;margin-bottom:14px}
.pf-main .story-copy h2{color:var(--title);font:900 clamp(31px,3vw,48px)/1.02 var(--h-display);letter-spacing:-1.7px;margin:0 0 17px}
.pf-main .story-copy>p{color:#66726d;font-size:15px;line-height:1.65;margin:0;max-width:450px}
.pf-main .live-status{display:flex;align-items:center;gap:8px;margin-top:27px;color:#6b7771;font-size:11px}
.pf-main .live-status i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(152,176,106,.16);animation:pulse 1.6s infinite}
.pf-main .live-status b{color:var(--accent)}
.pf-main .story-visual{height:390px;position:relative}
.pf-main .scene{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(14px) scale(.99);transition:opacity .45s,transform .45s}
.pf-main .scene.is-running{opacity:1;transform:none}
.pf-main .brand-mark{width:20px;height:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-items:end;transform:skew(-7deg)}
.pf-main .brand-mark i{display:block;border-radius:3px 3px 2px 2px;background:#fff;height:9px}
.pf-main .brand-mark i:nth-child(2){height:15px}
.pf-main .brand-mark i:nth-child(3){height:20px;background:var(--accent)}
.pf-main .orders-scene{display:flex;align-items:center;justify-content:center;gap:22px}
.pf-main .phone{width:235px;height:365px;background:#ece5dd;border:7px solid #2f3b36;border-radius:28px;box-shadow:0 24px 50px rgba(51,69,29,.17);overflow:hidden;position:relative;transform:rotate(-2deg)}
.pf-main .phone:before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:70px;height:16px;background:#2f3b36;border-radius:0 0 10px 10px;z-index:3}
.pf-main .phone-top{height:61px;background:#075e54;color:#fff;display:flex;align-items:center;gap:7px;padding:15px 9px 6px;font-size:8px}
.pf-main .phone-top .back{font-size:22px}
.pf-main .avatar{width:28px;height:28px;border-radius:50%;background:#d8b46d;display:grid;place-items:center;color:#fff;font-weight:800}
.pf-main .phone-top b{display:block;font-size:9px}
.pf-main .phone-top small{opacity:.7}
.pf-main .more{margin-left:auto}
.pf-main .chat-date{width:max-content;margin:12px auto 5px;padding:3px 8px;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:6px;color:#54655e}
.pf-main .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-main .bubble-2{display:flex;align-items:center;gap:6px}
.pf-main .voice-play{width:18px;height:18px;background:#25d366;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:7px}
.pf-main .wave{color:#25d366;letter-spacing:1px}
.pf-main .bubble small{color:#87918c}
.pf-main .ticks{float:right;color:#53bdeb;margin-left:4px}
.pf-main .chat-input{position:absolute;bottom:8px;left:8px;right:8px;border-radius:18px;background:#fff;color:#9aa29e;padding:9px 12px;font-size:8px}
.pf-main .chat-input span{float:right;background:#25d366;color:#fff;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;margin-top:-5px}
.pf-main .is-running .bubble-1{animation:pop .4s .35s forwards}
.pf-main .is-running .bubble-2{animation:pop .4s 1.2s forwards}
.pf-main .is-running .bubble-3{animation:pop .4s 2.1s forwards}
.pf-main .data-flow{width:48px;display:flex;gap:7px;position:relative}
.pf-main .data-flow:before{content:"";position:absolute;height:1px;left:-7px;right:-7px;top:5px;background:#abc5b8}
.pf-main .data-flow i{width:10px;height:10px;border-radius:50%;background:var(--accent);z-index:1;opacity:.2}
.pf-main .is-running .data-flow i{animation:flow 1.4s infinite}
.pf-main .is-running .data-flow i:nth-child(2){animation-delay:.25s}
.pf-main .is-running .data-flow i:nth-child(3){animation-delay:.5s}
.pf-main .pf-erp-card{width:min(480px,52vw);height:320px;background:#fff;border:1px solid #d8ded5;border-radius:15px;box-shadow:0 25px 65px rgba(30,56,47,.14);position:relative;overflow:visible}
.pf-main .window-head{height:49px;border-bottom:1px solid #e8ebe6;padding:0 17px;display:flex;align-items:center;gap:12px;font-size:10px}
.pf-main .window-head>span{display:flex;gap:4px}
.pf-main .window-head>span i{display:block;width:6px;height:6px;border-radius:50%;background:#ccd2ca}
.pf-main .window-head b{font-size:11px}
.pf-main .window-head em{margin-left:auto;font-style:normal;color:#7d8983}
.pf-main .erp-client{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid #edf0ec}
.pf-main .erp-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-main .erp-client div small,.pf-main .erp-client div b{display:block}
.pf-main .erp-client div small{font-size:6px;color:#8a948e;letter-spacing:1px}
.pf-main .erp-client div b{font-size:10px;margin-top:3px}
.pf-main .erp-client strong{margin-left:auto;font-size:7px;color:var(--dark);background:rgba(152,176,106,.22);padding:6px 8px;border-radius:10px}
.pf-main .order-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-main .order-row span{color:#9da59f}
.pf-main .order-row em{font-style:normal;color:#55645e}
.pf-main .erp-total{display:flex;justify-content:space-between;margin:15px 20px;font-size:7px;color:#78847e}
.pf-main .erp-total b{color:var(--accent)}
.pf-main .success-pop{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-main .success-pop>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-main .success-pop b,.pf-main .success-pop small{display:block}
.pf-main .success-pop b{font-size:10px}
.pf-main .success-pop small{font-size:7px;opacity:.65;margin-top:3px}
.pf-main .is-running .success-pop{animation:pop .5s 3.2s forwards}
.pf-main .erp-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-main .erp-sidebar{width:58px;background:var(--dark);display:flex;align-items:center;flex-direction:column;padding:17px 0;gap:18px}
.pf-main .erp-sidebar .brand-mark{margin-bottom:8px}
.pf-main .erp-sidebar>i{display:block;width:17px;height:17px;border:1px solid rgba(255,255,255,.2);border-radius:5px}
.pf-main .erp-sidebar>i.selected{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(152,176,106,.12)}
.pf-main .erp-sidebar>span{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-main .erp-main{flex:1;padding:22px 26px;background:#fbfcfa}
.pf-main .erp-title{display:flex;justify-content:space-between;align-items:center}
.pf-main .erp-title small,.pf-main .erp-title b{display:block}
.pf-main .erp-title small{font-size:7px;color:#87928c;letter-spacing:1.2px}
.pf-main .erp-title b{color:var(--title);font:800 20px var(--h-display);margin-top:5px}
.pf-main .erp-title>span{border:1px solid #dce1da;padding:7px 10px;border-radius:6px;color:#69756f;font-size:7px}
.pf-main .metric-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:9px;margin:15px 0}
.pf-main .metric-row>div{border:1px solid #e3e7e1;background:#fff;border-radius:9px;padding:11px 13px;position:relative}
.pf-main .metric-row small,.pf-main .metric-row b{display:block}
.pf-main .metric-row small{font-size:6px;color:#929a96;letter-spacing:.7px}
.pf-main .metric-row b{font:800 15px var(--h-display);margin-top:5px}
.pf-main .metric-row 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-main .metric-row .risk-metric{border-color:#f0c8c2;background:#fff9f8}
.pf-main .metric-row .risk-metric em{color:#c8584d;background:#fae5e2}
.pf-main .chart-card{height:205px;border:1px solid #e2e6e0;background:#fff;border-radius:10px;padding:13px}
.pf-main .chart-head{display:flex;justify-content:space-between;font-size:6px;color:#737f79}
.pf-main .chart-head i{display:inline-block;width:6px;height:6px;border-radius:2px;margin-right:4px}
.pf-main .dot-blue{background:#79a898}
.pf-main .dot-red{background:var(--red)}
.pf-main .chart-area{position:relative;height:165px;margin-top:7px;overflow:hidden}
.pf-main .grid-lines{position:absolute;inset:5px 0 22px;display:flex;flex-direction:column;justify-content:space-between}
.pf-main .grid-lines i{border-top:1px dashed #e6e9e5}
.pf-main .months{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;font-size:5px;color:#929b96}
.pf-main .bars{position:absolute;inset:12px 8px 20px;display:flex;align-items:flex-end;justify-content:space-around}
.pf-main .bars i{width:9%;background:#e5eeea;border-radius:4px 4px 0 0}
.pf-main .bars i:nth-child(1){height:48%}
.pf-main .bars i:nth-child(2){height:61%}
.pf-main .bars i:nth-child(3){height:68%}
.pf-main .bars i:nth-child(4){height:75%}
.pf-main .bars i:nth-child(5){height:84%}
.pf-main .bars i:nth-child(6){height:92%}
.pf-main .sales-line{position:absolute;inset:6px 2% 25px;width:96%;height:135px;overflow:visible}
.pf-main .sales-line path{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:800;stroke-dashoffset:800}
.pf-main .sales-line circle{fill:#fff;stroke:var(--red);stroke-width:3;opacity:0}
.pf-main .is-running .sales-line path{animation:draw 2.1s .4s ease forwards}
.pf-main .is-running .sales-line circle{animation:fade .3s 2.4s forwards}
.pf-main .drop-tag{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-main .is-running .drop-tag{animation:pop .4s 2.5s forwards}
.pf-main .alert-card{position:absolute;z-index:5;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-main .sales-alert{right:-10px;bottom:4px;width:min(480px,64%)}
.pf-main .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-main .alert-card div{min-width:0}
.pf-main .alert-card small,.pf-main .alert-card b,.pf-main .alert-card p{display:block;margin:0}
.pf-main .alert-card small{color:var(--red);font-size:6px;font-weight:900;letter-spacing:1px}
.pf-main .alert-card b{font-size:9px;margin:4px 0}
.pf-main .alert-card p{font-size:7px;color:#7c8681}
.pf-main .alert-card button{margin-left:auto;border:0;background:var(--dark);color:#fff;border-radius:7px;padding:8px 10px;font-size:7px;white-space:nowrap}
.pf-main .is-running .alert-card{animation:alertIn .55s 3s forwards}
.pf-main .invoice-table{margin-top:25px;border:1px solid #e2e6e0;background:#fff;border-radius:10px;overflow:hidden}
.pf-main .table-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-main .table-row:last-child{border:0}
.pf-main .table-head{min-height:33px!important;background:#f5f7f3;color:#909993;font-size:6px;font-weight:800;letter-spacing:.7px}
.pf-main .table-row em{font-style:normal;color:#4c8068;background:#e9f4ec;padding:5px 7px;border-radius:10px;width:max-content}
.pf-main .danger-row{position:relative;background:#fff8f7;border:1px solid transparent}
.pf-main .danger-row em{color:#c84e42;background:#fae0dc}
.pf-main .is-running .danger-row{animation:danger 1.2s 1.6s forwards}
.pf-main .scan-line{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-main .is-running .scan-line{animation:scan 2s .4s ease-in-out forwards}
.pf-main .invoice-alert{right:13px;bottom:0;width:min(510px,70%)}
.pf-main .timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:min(1280px,100%);margin:30px auto 0}
.pf-main .timeline button{border:0;background:none;padding:0;cursor:pointer;text-align:left;color:#929a96}
.pf-main .track{display:block;height:3px;background:#d6dad1;border-radius:4px;overflow:hidden;margin-bottom:10px}
.pf-main .track i{display:block;height:100%;width:0;background:var(--accent)}
.pf-main .timeline button.done .track i{width:100%}
.pf-main .timeline button.active .track i{animation:progress 7s linear forwards}
.pf-main .step-label{display:flex;align-items:baseline;gap:8px}
.pf-main .step-label b{font-size:9px;color:#a3aaa6}
.pf-main .step-label span{font:700 13px var(--h-display)}
.pf-main .timeline button.active .step-label span{color:var(--title);font-weight:700}
.pf-main .timeline button.active .step-label b{color:var(--accent)}
@keyframes progress{to{width:100%}}
@keyframes copyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes flow{0%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}100%{opacity:.15;transform:scale(.7)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(152,176,106,0)}}
@keyframes alertIn{60%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes danger{50%,100%{border-color:#ec8e84;box-shadow:inset 3px 0 0 var(--red)}}
@keyframes scan{0%{opacity:0;top:80px}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:290px}}
@media(max-width:900px){
.pf-main{padding:20px}
.pf-main .story{grid-template-columns:1fr;gap:18px}
.pf-main .story-copy{text-align:center;max-width:600px;margin:auto}
.pf-main .story-copy>p{margin:auto}
.pf-main .live-status{justify-content:center}
.pf-main .story-visual{height:360px}
.pf-main .pf-erp-card{width:55vw}
.pf-main .timeline{margin-top:22px}
}
@media(max-width:620px){

.pf-main .story{display:block}
.pf-main .story-copy{min-height:190px}
/* La escena crece por abajo para que la alerta se apoye bajo el panel,
   igual que las escenas gemelas de Producto (slides.css). */
.pf-main .story-visual{height:352px}

/* Escena Pedidos: el teléfono y la ficha del ERP se solapan un poco para
   que ambos quepan más grandes; los puntos del data-flow ya no caben.
   El teléfono va más alto y los bocadillos con menos margen para que el
   chat no quede pisado por la barra de mensaje. */
.pf-main .orders-scene{gap:0}
.pf-main .phone{width:140px;height:274px;border-width:5px;flex:none;z-index:1;transform:rotate(-2deg) translateY(-12px)}
.pf-main .phone-top{height:52px;font-size:9px}
.pf-main .phone-top b{font-size:10px}
.pf-main .chat-date{font-size:7.5px;padding:8px 0 3px}
.pf-main .bubble{font-size:9.5px;margin:6px 12px 0 8px}
.pf-main .chat-input{font-size:9px}
.pf-main .pf-erp-card{width:min(62vw,232px);height:252px;margin-left:-14px;transform:translateY(16px)}
.pf-main .window-head{height:38px;font-size:10px}
.pf-main .window-head b{font-size:11.5px}
.pf-main .erp-client{padding:12px 14px}
.pf-main .erp-client div small{font-size:7.5px}
.pf-main .erp-client div b{font-size:10.5px}
.pf-main .erp-client strong{font-size:8px}
.pf-main .order-row{margin:0 14px;padding:11px 4px;font-size:10px}
.pf-main .erp-total{margin:11px 14px;font-size:8.5px}
.pf-main .success-pop{right:0;bottom:-14px;padding:10px 14px 10px 42px;min-width:160px}
.pf-main .success-pop b{font-size:10.5px}
.pf-main .success-pop small{font-size:8px}
.pf-main .data-flow{display:none}

/* Escenas Ventas y Cobros: el panel del ERP aprovecha todo el alto y sube
   el cuerpo de letra; la gráfica se acorta para que no quede recortada. */
.pf-main .erp-shell{inset:4px 0 44px}
.pf-main .erp-sidebar{width:36px;gap:14px}
.pf-main .erp-main{padding:14px 12px}
.pf-main .erp-title small{font-size:8px}
.pf-main .erp-title b{font-size:16px}
.pf-main .erp-title>span{display:none}
.pf-main .metric-row{grid-template-columns:1fr 1fr;margin:8px 0}
.pf-main .metric-row>div{padding:8px 10px}
.pf-main .metric-row>div:first-child{display:none}
.pf-main .metric-row small{font-size:7.5px}
.pf-main .metric-row b{font-size:13px;margin-top:3px}
/* En cajas tan estrechas la etiqueta absoluta pisaba la cifra: pasa a flujo */
.pf-main .metric-row em{position:static;display:inline-block;margin-top:3px;font-size:7px;padding:2px 4px}
.pf-main .chart-card{height:152px;padding:11px}
.pf-main .chart-head{font-size:7.5px}
.pf-main .chart-area{height:120px}
.pf-main .sales-line{height:calc(100% - 31px)}
.pf-main .months{font-size:7px}
.pf-main .drop-tag{font-size:8.5px}
.pf-main .invoice-table{margin-top:12px}
.pf-main .table-row{grid-template-columns:.8fr 1.2fr .8fr 1fr;column-gap:6px;min-height:40px;padding:0 11px;font-size:9.5px}
.pf-main .table-head{font-size:7px;letter-spacing:.4px}
.pf-main .table-row span:nth-child(4),.pf-main .table-head span:nth-child(4){display:none}
.pf-main .table-row>span{white-space:nowrap}
.pf-main .scan-line{left:44px;right:4px}
/* La alerta arranca pasado el menú lateral y solo monta unos px sobre el panel */
.pf-main .sales-alert,.pf-main .invoice-alert{width:calc(100% - 42px);right:0;bottom:0}
.pf-main .alert-card{padding:11px 13px;gap:10px}
.pf-main .alert-card small{font-size:7.5px}
.pf-main .alert-card b{font-size:10.5px}
.pf-main .alert-card p{font-size:8.5px}
.pf-main .alert-card button{display:none}

.pf-main .timeline{gap:8px}
.pf-main .step-label span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
.pf-main .timeline button.active .track i{width:100%}
}