/*
 * compras-almacen.php (Compras y Almacenes de Fisher Platform): lo propio de la página.
 * Se apoya en fisher-ui.css (fn-*), promo.css (pr-*) e isp-page.css (aparición escalonada y cifras).
 * El ciclo de compra es una pieza propia: sin librerías, con teclado y sin movimiento si el usuario lo pide.
 */

/* ===== Ciclo de compra de punta a punta ===== */
.cp-cycle{position:relative;background:#fff;border:1px solid var(--fn-line);border-radius:var(--fn-r-xl,22px);box-shadow:var(--fn-sh,0 18px 40px -22px rgba(11,34,57,.35));padding:34px 28px 26px;}
.cp-cycle__track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;}
.cp-cycle__track:before,.cp-cycle__fill{content:'';position:absolute;top:27px;left:8.333%;height:4px;border-radius:4px;}
.cp-cycle__track:before{right:8.333%;background:var(--fn-line,#e2e8f0);}
.cp-cycle__fill{width:calc(83.333% * var(--cp-prog,0));background:linear-gradient(90deg,var(--pr-teal,#0E9F96),var(--fn-blue,#1C6DA8));transition:width .7s cubic-bezier(.4,0,.2,1);}
.cp-cycle__dot{position:relative;}
.cp-cycle__step.is-on .cp-cycle__dot:after{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(28,109,168,.35);animation:cpPing 2.2s ease-out infinite;}
@keyframes cpPing{from{transform:scale(.85);opacity:.9;}to{transform:scale(1.25);opacity:0;}}
.cp-cycle__step{position:relative;z-index:1;background:none;border:0;padding:0 6px;text-align:center;cursor:pointer;font:inherit;color:inherit;}
.cp-cycle__dot{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid var(--fn-line,#e2e8f0);color:var(--fn-muted,#64748b);font-size:20px;margin-bottom:10px;transition:border-color .3s,color .3s,background .3s,transform .3s;}
.cp-cycle__step.is-past .cp-cycle__dot{border-color:var(--pr-teal,#0E9F96);color:var(--pr-teal,#0E9F96);}
.cp-cycle__step.is-on .cp-cycle__dot{border-color:var(--fn-blue,#1C6DA8);background:var(--fn-blue-50,#eaf1ff);color:var(--fn-blue,#1C6DA8);transform:scale(1.08);}
.cp-cycle__step b{display:block;font-size:15px;color:var(--fn-navy-900,#0b2239);line-height:1.25;}
.cp-cycle__step small{display:block;margin-top:3px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fn-muted,#64748b);}
.cp-cycle__step:focus-visible{outline:3px solid rgba(28,109,168,.45);outline-offset:4px;border-radius:14px;}
.cp-cycle__panels{margin-top:24px;border-top:1px dashed var(--fn-line,#e2e8f0);padding-top:20px;min-height:150px;}
.cp-cycle__panel[hidden]{display:none;}
.cp-cycle__panel{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start;animation:cpPanelIn .45s ease both;}
.cp-cycle__panel h3{margin:0 0 8px;font-size:21px;}
.cp-cycle__panel p{margin:0;color:var(--fn-body,#334155);font-size:16px;}
.cp-cycle__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.cp-cycle__panel li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--fn-navy-800,#12304f);}
.cp-cycle__panel li i{color:var(--pr-teal,#0E9F96);margin-top:4px;}
.cp-cycle__panel a.cp-more{display:inline-block;margin-top:12px;font-weight:700;color:var(--fn-blue,#1C6DA8);}
.cp-cycle__hint{margin:14px 0 0;text-align:center;font-size:13px;color:var(--fn-muted,#64748b);}
@keyframes cpPanelIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ===== Quién interviene (cinta de cuatro actores) ===== */
.cp-actors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.cp-actor{background:#fff;border:1px solid var(--fn-line);border-radius:var(--fn-r-lg,16px);padding:20px 20px 18px;border-top:4px solid var(--pr-teal,#0E9F96);}
.cp-actor:nth-child(2){border-top-color:var(--fn-blue,#1C6DA8);}
.cp-actor:nth-child(3){border-top-color:#F59E0B;}
.cp-actor:nth-child(4){border-top-color:var(--pr-violet,#7C3AED);}
.cp-actor h3{margin:0 0 6px;font-size:17px;}
.cp-actor p{margin:0;font-size:14.5px;color:var(--fn-muted);}

/* ===== Pastillas de pantalla del ERP ===== */
.cp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none;}
.cp-tags li{padding:4px 11px;border-radius:999px;background:var(--fn-blue-50,#eaf1ff);color:var(--fn-blue,#1C6DA8);font-size:12.5px;font-weight:700;}
.cp-tags--teal li{background:var(--pr-teal-50,#e7f7f5);color:var(--pr-teal-600,#0b847d);}

/* ===== Capturas altas o de tabla: se ven enteras ===== */
.cp-wide .fn-frame{max-width:100%;}

@media (max-width:991px){
    .cp-actors{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cp-cycle__panel{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:767px){
    .cp-cycle{padding:22px 16px 18px;}
    .cp-cycle__track{grid-template-columns:1fr;gap:6px;}
    .cp-cycle__track:before,.cp-cycle__fill,    .cp-cycle__step{display:grid;grid-template-columns:54px 1fr;align-items:center;column-gap:14px;text-align:left;padding:6px;border-radius:14px;}
    .cp-cycle__dot{grid-row:1 / span 2;margin:0;}
    .cp-cycle__step.is-on{background:var(--fn-blue-50,#eaf1ff);}
    .cp-actors{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
    .cp-cycle__fill,.cp-cycle__dot{transition:none;}
    .cp-cycle__panel{animation:none;}
    .cp-cycle__step.is-on .cp-cycle__dot:after{animation:none;opacity:.6;}
}