/* soluciones-anim.css — 3 animaciones interactivas. Solo tokens de site.css (con respaldo). */
.sa{background:var(--card,#0d2238);border:1px solid var(--border,#183552);border-radius:16px;padding:20px;margin:18px 0;color:var(--mu,#cbd5e1)}
.sa h3{margin:0 0 4px;color:var(--ink,#f8fafc);font-size:1.15rem}
.sa-explain{margin:0 0 14px;font-size:.96rem}
.sa-explain b{color:var(--teal,#5cbdb5)}
.sa-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.sa-btn{font:inherit;cursor:pointer;border:1.5px solid var(--teal,#5cbdb5);background:transparent;color:var(--teal,#5cbdb5);border-radius:999px;padding:8px 16px;font-weight:650;transition:transform 240ms var(--spring-soft,ease),background 240ms}
.sa-btn:hover{transform:translateY(-2px)}
.sa-btn:focus-visible{outline:2px solid var(--ac,#00d2b4);outline-offset:2px}
.sa-btn[aria-pressed="true"],.sa-btn.on{background:var(--teal,#5cbdb5);color:#07192d}
.sa-read{min-height:3.2em;color:var(--ink,#f8fafc);font-weight:600}
.sa-note{font-size:.8rem;margin-top:8px;opacity:.85}
.sa input[type=range]{accent-color:var(--teal,#5cbdb5);width:min(280px,100%)}
/* 1 · línea */
.sa-stage{position:relative;display:flex;align-items:center;gap:0;height:96px;background:#051424;border-radius:12px;overflow:hidden;padding:0 12px}
.sa-belt{position:relative;flex:1;height:38px;border-bottom:4px solid var(--border,#183552);overflow:hidden}
.sa-box{position:absolute;bottom:0;left:-40px;width:30px;height:26px;border-radius:5px;background:var(--teal,#5cbdb5);animation:sa-run 4.5s linear infinite}
.sa-box:nth-child(2){animation-delay:-.9s}.sa-box:nth-child(3){animation-delay:-1.8s}.sa-box:nth-child(4){animation-delay:-2.7s}.sa-box:nth-child(5){animation-delay:-3.6s}
.sa-stage.stopped .sa-box{animation-play-state:paused;background:#ef4444}
@keyframes sa-run{to{transform:translateX(520px)}}
.sa-mach{width:84px;height:68px;border-radius:12px;border:2px solid var(--emerald,#34d399);display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--emerald,#34d399);transition:all 300ms}
.sa-mach.warn{border-color:var(--amber,#f59e0b);color:var(--amber,#f59e0b);animation:sa-pulse 1s ease-in-out infinite}
.sa-mach.down{border-color:var(--danger,#ef4444);color:var(--danger,#ef4444)}
@keyframes sa-pulse{50%{box-shadow:0 0 0 8px rgba(245,158,11,.18)}}
.sa-cost{font-size:1.6rem;font-weight:800;color:var(--ink,#f8fafc)}
.sa-cost.bad{color:var(--danger,#ef4444)}
/* 2 · conectar */
.sa-svg{width:100%;max-width:520px;display:block;margin:0 auto}
.sa-edge{stroke:var(--border,#183552);stroke-width:2.5;stroke-dasharray:6 6;fill:none;transition:stroke 300ms}
.sa-svg.linked .sa-edge{stroke:var(--teal,#5cbdb5);stroke-dasharray:none}
.sa-node{cursor:pointer}
.sa-node circle{fill:#0d2238;stroke:var(--teal,#5cbdb5);stroke-width:2.5;transition:fill 240ms}
.sa-node:hover circle,.sa-node:focus-visible circle{fill:#183552}
.sa-node text{fill:var(--ink,#f8fafc);font-size:13px;font-weight:700;text-anchor:middle;pointer-events:none}
.sa-pkt{fill:var(--ac,#00d2b4);opacity:0}
/* 3 · cotización */
.sa-row{margin:10px 0}
.sa-row span{display:block;font-size:.88rem;margin-bottom:4px}
.sa-bar{height:16px;border-radius:99px;background:#051424;overflow:hidden}
.sa-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--teal,#5cbdb5)}
.sa-bar.slow i{background:var(--amber,#f59e0b)}
@media (prefers-reduced-motion:reduce){.sa-box,.sa-mach.warn{animation:none}.sa-btn{transition:none}.sa-box:nth-child(n){left:calc(var(--i,0)*18%)}}
/* 4 · metas de referencia del sector, Six Sigma (DMAIC) y marco metodológico */
.sol-method-badge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(0,210,180,.07);border:1px solid var(--border,#183552);border-left:3px solid var(--teal,#5cbdb5);border-radius:12px;padding:12px 16px;margin:10px 0 16px;font-size:.88rem;color:var(--ink,#f8fafc);line-height:1.5}
.sol-method-badge b{color:var(--teal,#5cbdb5);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}
.sol-method-badge .sol-area-pill{display:inline-block;background:#051424;border:1px solid var(--border,#183552);border-radius:999px;padding:2px 10px;font-size:.78rem;color:var(--teal,#5cbdb5);font-weight:700}
.sol-metric-card .sol-metric-val{font-size:1.32rem;font-weight:800;color:var(--ink,#f8fafc);margin:4px 0 8px;letter-spacing:-.02em}
/* 5 · estimación preliminar para cada área encargada */
.sa-dict{margin:18px 0}
.sa-dict-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.sa-dict-pill{display:inline-block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teal,#5cbdb5);background:rgba(0,210,180,.1);border:1px solid var(--teal,#5cbdb5);border-radius:999px;padding:4px 12px}
.sa-dict-presets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sa-dict-preset-btn{background:#051424;border:1px solid var(--border,#183552);color:var(--mu,#cbd5e1);padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s ease}
.sa-dict-preset-btn:hover{border-color:var(--teal,#5cbdb5);color:#fff}
.sa-dict-preset-btn.is-active{background:rgba(0,210,180,.18);border-color:var(--teal,#5cbdb5);color:var(--teal,#5cbdb5)}
.sa-dict-sel-wrap{margin:0 0 14px;background:#051424;border:1px solid var(--border,#183552);border-radius:12px;padding:12px 14px}
.sa-dict-sel-wrap label{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--teal,#5cbdb5);margin-bottom:6px}
.sa-dict-sel{width:100%;background:var(--card,#0d2238);color:var(--ink,#f8fafc);border:1px solid var(--border,#183552);border-radius:8px;padding:9px 12px;font:inherit;font-size:.92rem;cursor:pointer}
.sa-dict-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:14px 0;background:#051424;border:1px solid var(--border,#183552);border-radius:12px;padding:14px}
.sa-dict-field label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.84rem;color:var(--mu,#cbd5e1);margin-bottom:6px}
.sa-dict-field label b{color:var(--teal,#5cbdb5);font-size:.92rem;white-space:nowrap}
.sa-dict-field input[type=range]{width:100%;accent-color:var(--teal,#5cbdb5);cursor:pointer}
.sa-dict-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.sa-dict-kpi{background:#051424;border:1px solid var(--border,#183552);border-radius:12px;padding:12px 14px}
.sa-dict-kpi small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--teal,#5cbdb5);font-weight:700;margin-bottom:4px}
.sa-dict-kpi strong{display:block;font-size:1.2rem;color:var(--ink,#f8fafc);font-weight:800;line-height:1.25}
.sa-dict-kpi span{display:block;font-size:.8rem;color:var(--mu,#cbd5e1);margin-top:4px}
.sa-dict-out{background:#051424;border:1px solid var(--border,#183552);border-radius:12px;padding:14px 16px;margin:14px 0;font-size:.9rem;line-height:1.55;color:var(--mu,#cbd5e1)}
.sa-dict-out h4{margin:0 0 8px;color:var(--ink,#f8fafc);font-size:.96rem}
.sa-dict-out p{margin:6px 0}
.sa-dict-out b{color:var(--ink,#f8fafc)}
.sa-dict-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
/* 6 · etapas interactivas (cierre, cobranza, reportes, compras, rh, soporte, respaldos) */
.sa-steps-viz{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin:12px 0}
.sa-step-box{background:#051424;border:1.5px solid var(--border,#183552);border-radius:10px;padding:10px 12px;transition:all 260ms}
.sa-step-box b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--teal,#5cbdb5);margin-bottom:4px}
.sa-step-box span{display:block;font-size:.88rem;color:var(--ink,#f8fafc);font-weight:700}
.sa-step-box small{display:block;font-size:.76rem;color:var(--mu,#cbd5e1);margin-top:3px}
.sa-step-box.ok{border-color:var(--emerald,#34d399);background:rgba(52,211,153,.08)}
.sa-step-box.ok b{color:var(--emerald,#34d399)}
.sa-step-box.warn{border-color:var(--amber,#f59e0b);background:rgba(245,158,11,.08)}
.sa-step-box.warn b{color:var(--amber,#f59e0b)}
.sa-step-box.bad{border-color:var(--danger,#ef4444);background:rgba(239,68,68,.08)}
.sa-step-box.bad b{color:var(--danger,#ef4444)}
