/* AJM Pisos — propuesta visual (estilo Shopify Admin, moderno y claro) */
:root{
  --bg:#f1f2f4;            /* fondo app */
  --surface:#ffffff;      /* cards */
  --surface-2:#fafbfb;    /* header de tabla / zebra */
  --ink:#1a1c1e;          /* texto principal */
  --ink-2:#5c5f62;        /* texto secundario */
  --ink-3:#8c9196;        /* muted */
  --border:#e3e5e7;
  --border-2:#ebedef;
  --brand:#1e4b8f;        /* azul AJM (logo) */
  --brand-2:#2c6ecb;
  --brand-soft:#eaf1fb;
  --accent:#008060;       /* verde Shopify (éxito/acciones) */
  --accent-soft:#e7f4ef;
  --warn:#b98900; --warn-soft:#fdf3d9;
  --danger:#d72c0d; --danger-soft:#fbeae5;
  --info:#2c6ecb; --info-soft:#eaf1fb;
  --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --shadow:0 1px 2px rgba(26,28,30,.06), 0 1px 3px rgba(26,28,30,.05);
  --shadow-md:0 4px 16px rgba(26,28,30,.10);
  --sidebar-w:248px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;min-width:0;min-height:0}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.scrim{display:none}
.sidebar{background:#12213b;color:#c9d4e5;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.side-brand .logo{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:none}
.side-brand .logo svg{width:22px;height:22px}
.side-brand b{color:#fff;font-size:15px;letter-spacing:.2px}
.side-brand small{display:block;color:#8ea3c4;font-size:11px;font-weight:500}
.side-search{margin:4px 12px 10px;position:relative}
.side-search input{width:100%;background:#1c2f4f;border:1px solid #26406b;color:#dfe8f5;border-radius:8px;padding:8px 10px 8px 30px;font-size:13px}
.side-search svg{position:absolute;left:9px;top:9px;width:15px;height:15px;color:#7f97bd}
.nav{padding:4px 8px 16px;display:flex;flex-direction:column;gap:1px}
.nav-group{color:#6f86ad;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;padding:14px 12px 5px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:8px;color:#c3cfe2;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.nav a svg{width:18px;height:18px;flex:none;opacity:.9}
.nav a:hover{background:#1b2d4d;color:#fff}
.nav a.active{background:#2c6ecb;color:#fff}
.nav a .count{margin-left:auto;background:#26406b;color:#c9d9f2;font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px}
.nav a.active .count{background:rgba(255,255,255,.22);color:#fff}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(241,242,244,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:12px 26px}
.topbar h1{font-size:18px;font-weight:650;margin:0;letter-spacing:-.2px}
.topbar .crumb{color:var(--ink-3);font-size:13px;font-weight:500}
.topbar .sp{flex:1}
.topbar .pill{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:500;box-shadow:var(--shadow);cursor:pointer}
.topbar .pill svg{width:15px;height:15px;color:var(--ink-2)}
.topbar .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2c6ecb,#1e4b8f);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.menu-btn{display:none}
.content{padding:22px 26px 60px;max-width:1320px;width:100%;margin:0 auto}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border-2)}
.card-head h3{margin:0;font-size:14.5px;font-weight:650}
.card-head .sub{color:var(--ink-3);font-size:12.5px;font-weight:500}
.card-body{padding:16px 18px}
.grid{display:grid;gap:16px}
.section-title{font-size:13px;font-weight:650;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;margin:26px 2px 12px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px 40px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.kpi .k-label{color:var(--ink-2);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.kpi .k-label .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-2)}
.kpi .k-label .ic svg{width:15px;height:15px}
.kpi .k-val{font-size:25px;font-weight:720;letter-spacing:-.6px;line-height:1}
.kpi .k-foot{display:flex;align-items:center;gap:8px;font-size:12.5px;position:relative;z-index:1}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:650;padding:1px 7px;border-radius:20px}
.delta.up{color:var(--accent);background:var(--accent-soft)}
.delta.down{color:var(--danger);background:var(--danger-soft)}
.delta svg{width:12px;height:12px}
.k-spark{position:absolute;right:0;bottom:0;left:0;height:34px;opacity:.9}

/* ---------- Tables ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.search{position:relative;flex:1;min-width:180px;max-width:340px}
.search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px 9px 34px;font-size:13.5px;box-shadow:var(--shadow)}
.search svg{position:absolute;left:11px;top:10px;width:16px;height:16px;color:var(--ink-3)}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:3px;box-shadow:var(--shadow)}
.tabs button{border:0;background:transparent;color:var(--ink-2);font-weight:600;font-size:13px;padding:6px 12px;border-radius:7px;cursor:pointer}
.tabs button.active{background:var(--brand-soft);color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;padding:8px 13px;border-radius:9px;cursor:pointer;box-shadow:var(--shadow);transition:background .15s,border-color .15s}
.btn svg{width:15px;height:15px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#00745a}
.btn.brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.brand:hover{background:#173c72}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2)}

.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px}
table.data th{text-align:left;font-weight:600;color:var(--ink-2);background:var(--surface-2);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}
table.data td{padding:11px 14px;border-bottom:1px solid var(--border-2);vertical-align:middle;white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--brand-soft)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.data.wrap td{white-space:normal;vertical-align:top;line-height:1.35}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.cell-strong{font-weight:600;color:var(--ink)}
.cell-sub{color:var(--ink-3);font-size:12px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--accent);background:var(--accent-soft)}
.badge.pend{color:var(--warn);background:var(--warn-soft)}
.badge.age{color:var(--info);background:var(--info-soft)}
.badge.neu{color:var(--ink-2);background:#eef0f2}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);background:#eef0f2;border-radius:7px;padding:3px 8px}

/* ---------- Charts ---------- */
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.chart-legend .lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.chart-legend .dot{width:10px;height:10px;border-radius:3px}
.bar-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.bar-row .bl{width:120px;font-size:13px;color:var(--ink-2);font-weight:500;flex:none}
.bar-track{flex:1;height:10px;background:#eef0f2;border-radius:6px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#2c6ecb,#1e4b8f)}
.bar-val{width:88px;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}

/* ---------- Forms (POS / Factura) ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
.totbox{display:flex;flex-direction:column;gap:8px}
.totrow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2)}
.totrow.big{font-size:18px;font-weight:720;color:var(--ink);border-top:1px solid var(--border);padding-top:10px}

/* ---------- Propuesta ---------- */
.prop-hero{background:linear-gradient(135deg,#12213b,#1e4b8f);color:#fff;border-radius:16px;padding:30px 32px;position:relative;overflow:hidden}
.prop-hero h2{margin:0 0 8px;font-size:26px;letter-spacing:-.4px}
.prop-hero p{margin:0;max-width:640px;color:#cdd9ee;font-size:14.5px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat .card{padding:18px}
.feat .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px}
.feat h4{margin:0 0 6px;font-size:15px}
.feat p{margin:0;color:var(--ink-2);font-size:13px}
.pri-table td .tag{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px}
.tag.q{background:var(--accent-soft);color:var(--accent)}
.tag.m{background:var(--warn-soft);color:var(--warn)}
.tag.h{background:var(--info-soft);color:var(--info)}

.note{background:var(--warn-soft);border:1px solid #f0dfae;color:#7a5b00;border-radius:10px;padding:11px 14px;font-size:13px;display:flex;gap:9px;align-items:flex-start}
.note svg{width:17px;height:17px;flex:none;margin-top:1px}

/* ---------- Responsive ---------- */
@media(max-width:1080px){ .kpis{grid-template-columns:repeat(2,1fr)} .feat{grid-template-columns:1fr 1fr} }
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:82vw;max-width:300px;transform:translateX(-102%);transition:transform .22s;box-shadow:var(--shadow-md)}
  .app.nav-open .sidebar{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(10,16,28,.45);z-index:55;display:none}
  .app.nav-open .scrim{display:block}
  .menu-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer}
  .menu-btn svg{width:19px;height:19px}
  .content{padding:16px 14px 60px}
  .topbar{padding:11px 14px}
  .topbar .crumb{display:none}
  .topbar h1{font-size:16px}
  .form-grid{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  /* colapsar TODAS las grillas de 2+ columnas a 1 en móvil (inline styles → !important) */
  .content .grid{grid-template-columns:1fr!important;gap:14px}
  .content .grid>[style*="span 2"]{grid-column:1!important}
  .card-head{flex-wrap:wrap;row-gap:4px}
  .content .card[style*="grid-column:span 2"]{grid-column:1!important}
}
@media(max-width:560px){ .kpis{grid-template-columns:1fr} }

/* ================= Cockpit del Negocio (inicio full-screen) ================= */
.content.flush{max-width:none;padding:0;margin:0}
/* En Inicio el topbar se funde con el hero: misma banda azul continua */
.main.nav-inicio .topbar{background:linear-gradient(135deg,#0e1b30 0%,#153564 100%);border-bottom-color:transparent;backdrop-filter:none}
.main.nav-inicio .topbar h1{color:#fff}
.main.nav-inicio .topbar .crumb{color:#a9c2e8}
.main.nav-inicio .topbar .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.main.nav-inicio .topbar .pill svg{color:#cddaf0}
.main.nav-inicio .menu-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.proc{--pn-edge:#aeb9c7;display:flex;flex-direction:column;min-height:calc(100vh - 58px)}

/* ---- Hero band (conecta con el sidebar, integra el módulo) ---- */
.proc-hero{background:linear-gradient(135deg,#0e1b30 0%,#173c72 52%,#1e4b8f 100%);color:#fff;padding:20px 26px 22px;position:relative;overflow:hidden}
.proc-hero::after{content:"";position:absolute;right:-80px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(44,110,203,.35),transparent 70%);pointer-events:none}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;position:relative;z-index:1}
.hero-title{display:flex;align-items:center;gap:12px}
.hero-title h2{margin:0;font-size:23px;font-weight:760;letter-spacing:-.4px;color:#fff}
.hero-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#7ef0c2;background:rgba(0,128,96,.22);border:1px solid rgba(126,240,194,.3);padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.hero-live i{width:7px;height:7px;border-radius:50%;background:#3ee08f;box-shadow:0 0 0 0 rgba(62,224,143,.7);animation:hbeat 2s ease-out infinite}
@keyframes hbeat{0%{box-shadow:0 0 0 0 rgba(62,224,143,.6)}70%{box-shadow:0 0 0 6px rgba(62,224,143,0)}100%{box-shadow:0 0 0 0 rgba(62,224,143,0)}}
.hero-switch{display:flex;align-items:center;gap:8px}
.hs-nav{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#dfe8f5;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.hs-nav:hover{background:rgba(255,255,255,.18)}.hs-nav svg{width:17px;height:17px}
.hs-select{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:0 10px;min-width:230px;transition:background .15s}
.hs-select:hover{background:rgba(255,255,255,.16)}
.hs-ic{display:inline-flex;color:#aec6ea}.hs-ic svg{width:16px;height:16px}
.proc-ent{appearance:none;background:transparent;border:0;color:#fff;font-family:inherit;font-size:13.5px;font-weight:650;padding:10px 6px 10px 0;width:100%;cursor:pointer}
.proc-ent option{color:#111}
.hero-sub{position:relative;z-index:1;margin-top:10px;color:#c6d5ec;font-size:13px;max-width:680px}
.hero-sub b{color:#fff}
.hero-kpis{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.hk{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:12px 14px}
.hk-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}
.hk-ic svg{width:19px;height:19px}
.hk--danger .hk-ic{background:linear-gradient(135deg,#f0664b,#d72c0d)}
.hk--warn .hk-ic{background:linear-gradient(135deg,#e6b13c,#b98900)}
.hk--accent .hk-ic{background:linear-gradient(135deg,#12b389,#008060)}
.hk--info .hk-ic{background:linear-gradient(135deg,#4b90ea,#2c6ecb)}
.hk--brand .hk-ic{background:linear-gradient(135deg,#3f6fc0,#1e4b8f)}
.hk-val{font-size:20px;font-weight:760;letter-spacing:-.4px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.hk-lb{font-size:11.5px;color:#b9c9e2;font-weight:600;margin-top:3px}
.hk-sub{font-size:10.5px;color:#93a7c8;margin-top:2px}
.hk-sub.up{color:#6fe3a6}

.proc-summary{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#eef4fe,#f7faff);border-bottom:1px solid var(--border);color:#173c72;padding:11px 26px;font-size:13px;font-weight:600;line-height:1.4}
.sum-ic{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff}
.sum-ic.is-current{background:var(--brand-2)}.sum-ic.is-blocked{background:var(--danger)}.sum-ic svg{width:14px;height:14px}
/* barra: filtros + contexto de vista */
.proc-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border-bottom:1px solid var(--border);padding:11px 26px}
.pb-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-flabel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}.pb-flabel svg{width:16px;height:16px;color:var(--brand-2)}
.pb-sel{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:5px 11px}
.pb-sel>span{font-size:11px;color:var(--ink-3);font-weight:600}
.pb-sel select{appearance:none;border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:650;color:var(--ink);cursor:pointer}
.pb-clear{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer}.pb-clear:hover{background:var(--surface-2)}.pb-clear svg{width:13px;height:13px}
.pb-context{display:flex;align-items:center}
.pb-scope{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);font-weight:600}.pb-scope svg{width:15px;height:15px;color:var(--ink-3)}.pb-scope b{color:var(--ink)}
.pb-client{display:inline-flex;align-items:center;gap:10px}
.pb-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3f6fc0,#1e4b8f);color:#fff;font-weight:700;font-size:16px}
.pb-cinfo{display:flex;flex-direction:column;line-height:1.25;min-width:0}.pb-cinfo b{font-size:13.5px;font-weight:700}.pb-cinfo small{font-size:11.5px;color:var(--ink-3)}
.pb-saldo{color:var(--danger);font-style:normal;font-weight:700}.pb-ok{color:var(--accent);font-style:normal;font-weight:700}

/* ---- Stage (lienzo del mapa, sin hoja flotante) ---- */
.proc-stage{flex:1;display:flex;flex-direction:column;padding:22px 26px 26px;background:linear-gradient(180deg,#eef1f6 0%,#e7ebf2 100%)}
.proc-desk{flex:1;display:flex;align-items:center;justify-content:center}
.proc-mob{display:none;flex:1}
.proc-svg{width:100%;height:auto;display:block;max-width:1180px;font-family:var(--font);filter:drop-shadow(0 10px 24px rgba(20,33,59,.10))}

/* nodos (foreignObject) — tarjetas con chip de color y profundidad */
.pn-card{width:100%;height:100%;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:9px;box-shadow:0 2px 5px rgba(20,33,59,.07),0 1px 2px rgba(20,33,59,.06);overflow:hidden;transition:transform .16s ease-out,box-shadow .16s ease-out}
.pn-chip{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#8b93a0,#69707d);box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.pn-chip svg{width:16px;height:16px}
.pn-main{min-width:0;flex:1}
.pn-row{display:flex;align-items:flex-start;gap:6px}
.pn-label{font-size:11px;font-weight:680;line-height:1.12;color:var(--ink);flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-count{background:#69707d;color:#fff;font-size:11px;font-weight:750;min-width:20px;height:19px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;flex:none;margin-top:1px}
.pn-sub{font-size:9.5px;color:var(--ink-3);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;font-weight:500}
.pn-cap{color:var(--brand-2)}
.pn--clickable .pn-card{cursor:pointer}
.pn--clickable:hover .pn-card{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,33,59,.16)}
.pn--clickable:focus{outline:none}.pn--clickable:focus-visible .pn-card{outline:2px solid var(--brand-2);outline-offset:2px}
/* estados: color en chip + borde + tinte */
.pn--done .pn-card{border-color:#bfe6d7}.pn--done .pn-chip{background:linear-gradient(135deg,#12b389,#008060)}.pn--done .pn-count{background:var(--accent)}
.pn--info .pn-chip{background:linear-gradient(135deg,#7c8797,#5c6472)}.pn--info .pn-count{background:#69707d}
.pn--current .pn-card{border-color:#a9caf6;box-shadow:0 0 0 3px rgba(44,110,203,.16),0 8px 20px rgba(30,75,143,.18);animation:pnPulse 2.2s ease-out infinite}
.pn--current .pn-chip{background:linear-gradient(135deg,#4b90ea,#1e4b8f)}.pn--current .pn-count{background:var(--brand-2)}
.pn--warn .pn-card{border-color:#f0dfae}.pn--warn .pn-chip{background:linear-gradient(135deg,#e6b13c,#b98900)}.pn--warn .pn-count{background:var(--warn)}
.pn--blocked .pn-card{border-color:#f4c4b8}.pn--blocked .pn-chip{background:linear-gradient(135deg,#f0664b,#d72c0d)}.pn--blocked .pn-count{background:var(--danger)}
.pn--gap .pn-card{border-style:dashed;border-color:#c2c9d2;background:#fbfcfd}.pn--gap .pn-chip{background:#eef0f2;color:var(--ink-3);box-shadow:none}
.pn--pending .pn-card{background:#f6f8fa;box-shadow:none}.pn--pending .pn-chip{background:linear-gradient(135deg,#aeb6c1,#98a1ad)}.pn--pending .pn-label{color:var(--ink-2)}
.pn--skip .pn-card{opacity:.42}
@keyframes pnPulse{0%{box-shadow:0 0 0 0 rgba(44,110,203,.28),0 8px 20px rgba(30,75,143,.18)}70%{box-shadow:0 0 0 8px rgba(44,110,203,0),0 8px 20px rgba(30,75,143,.18)}100%{box-shadow:0 0 0 0 rgba(44,110,203,0),0 8px 20px rgba(30,75,143,.18)}}
@media(prefers-reduced-motion:reduce){.pn--current .pn-card,.hero-live i{animation:none}}
/* gateways (rombos) */
.pn--gw polygon{fill:#fff;stroke:var(--brand-2);stroke-width:1.6;filter:drop-shadow(0 3px 7px rgba(20,33,59,.14))}
.pn-gw-ic{display:grid;place-items:center;width:100%;height:100%;color:var(--brand-2)}.pn-gw-ic svg{width:17px;height:17px}
.pn-gw-cap{display:table;margin:0 auto;font-size:11px;font-weight:700;color:var(--brand);background:#fff;border:1px solid #cfe0f7;border-radius:20px;padding:4px 12px;line-height:1.1;box-shadow:0 2px 6px rgba(20,33,59,.08);white-space:nowrap}
/* eventos (círculos) */
.pn--event circle{fill:url(#pmGrid);stroke:none}
.pn--event circle{fill:#1e4b8f}
.pn--done.pn--event circle{fill:#008060}
.pn-ev{display:grid;place-items:center;width:100%;height:100%;color:#fff}.pn-ev svg{width:19px;height:19px}
.pn-ev-label{text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-2)}
/* aristas + anotaciones */
.pn-edge{fill:none;stroke:var(--pn-edge);stroke-width:2}
.pn-elabel{display:table;margin:0 auto;font-size:10px;font-weight:750;color:var(--ink-2);background:#fff;border:1px solid var(--border);text-align:center;border-radius:20px;padding:2px 10px;box-shadow:0 1px 3px rgba(20,33,59,.1)}
.pn-note{display:flex;align-items:flex-start;gap:5px;font-size:9.5px;line-height:1.12;color:#7a5b00;background:var(--warn-soft);border:1px solid #f0dfae;border-radius:7px;padding:5px 7px;box-shadow:0 3px 8px rgba(122,91,0,.12)}
.pn-note svg{width:13px;height:13px;flex:none;margin-top:1px}

/* ---- Leyenda ---- */
.proc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px}
.proc-legend .lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.proc-legend .sw{width:12px;height:12px;border-radius:4px;flex:none}
.proc-legend .sw.done{background:var(--accent)}.proc-legend .sw.current{background:var(--brand-2)}
.proc-legend .sw.warn{background:var(--warn)}.proc-legend .sw.blocked{background:var(--danger)}
.proc-legend .sw.gap{background:#fff;border:1.5px dashed var(--ink-3)}
.lg-hint{margin-left:auto;color:var(--brand-2)!important;font-weight:650}.lg-hint svg{width:15px;height:15px}

/* ---- Stepper (mobile) ---- */
.proc-steps{position:relative;padding-left:4px}
.proc-steps::before{content:"";position:absolute;left:22px;top:24px;bottom:24px;width:2px;background:var(--border)}
.ps-row{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;position:relative;border-radius:12px}
.ps-row.pn--clickable{cursor:pointer;transition:background .15s}
.ps-row.pn--clickable:hover{background:rgba(255,255,255,.7)}
.ps-row.pn--clickable:focus-visible{outline:2px solid var(--brand-2);outline-offset:1px}
.ps-dot{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--ink-3);color:var(--ink-3);z-index:1;box-shadow:0 2px 5px rgba(20,33,59,.08)}
.ps-dot svg{width:16px;height:16px}
.ps-body{flex:1;padding-top:5px;min-width:0}
.ps-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ps-chip{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#8b93a0,#69707d)}
.ps-chip svg{width:16px;height:16px}
.ps-label{font-weight:680;font-size:14px}
.ps-sub{font-size:12px;color:var(--ink-3)}
.ps-go{margin-left:auto;color:var(--ink-3);display:inline-flex}.ps-go svg{width:16px;height:16px}
.ps-cap{font-size:11.5px;color:var(--ink-3);margin-top:3px;padding-left:36px}
.ps-row .pn-count{color:#fff}
.ps-row.pn--done .ps-dot{border-color:var(--accent);background:var(--accent);color:#fff}
.ps-row.pn--done .ps-chip{background:linear-gradient(135deg,#12b389,#008060)}
.ps-row.pn--current .ps-dot{border-color:var(--brand-2);background:var(--brand-2);color:#fff}
.ps-row.pn--current .ps-chip{background:linear-gradient(135deg,#4b90ea,#1e4b8f)}
.ps-row.pn--warn .ps-dot{border-color:var(--warn);background:var(--warn);color:#fff}
.ps-row.pn--warn .ps-chip{background:linear-gradient(135deg,#e6b13c,#b98900)}
.ps-row.pn--blocked .ps-dot{border-color:var(--danger);background:var(--danger);color:#fff}
.ps-row.pn--blocked .ps-chip{background:linear-gradient(135deg,#f0664b,#d72c0d)}
.ps-row.pn--info .ps-dot{border-color:var(--ink-3);color:var(--ink-3)}
.ps-row.pn--info .ps-chip{background:linear-gradient(135deg,#7c8797,#5c6472)}
.ps-row.pn--gap .ps-dot{border-style:dashed}.ps-row.pn--gap .ps-chip{background:#eef0f2;color:var(--ink-3)}
.ps-row.pn--pending{opacity:.82}
.ps-gw{padding-left:8px}
.ps-dot-q{border-color:var(--brand-2);color:var(--brand-2)}
.ps-gw .ps-q{font-weight:750;font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.4px;padding-top:5px}
.ps-branch{display:flex;align-items:center;gap:9px;margin-top:8px;border:1px solid var(--border);border-radius:11px;padding:9px 11px;background:#fff;font-weight:650;font-size:13.5px;box-shadow:0 2px 5px rgba(20,33,59,.06)}
.ps-branch.pn--clickable{cursor:pointer}
.ps-branch.pn--done{border-color:#bfe6d7}.ps-branch.pn--done .ps-chip{background:linear-gradient(135deg,#12b389,#008060)}
.ps-branch.pn--current{border-color:#a9caf6}
.ps-branch.pn--warn{border-color:#f0dfae}
.ps-branch.pn--blocked{border-color:#f4c4b8}
.ps-branch .pn-count{background:#69707d}

/* ---- Drawer de insights por etapa ---- */
.proc-drawer{position:fixed;top:0;right:0;height:100vh;width:400px;max-width:92vw;background:var(--surface);box-shadow:-14px 0 40px rgba(20,33,59,.22);z-index:80;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.proc-drawer.open{transform:none}
.proc-scrim{position:fixed;inset:0;background:rgba(14,27,48,.42);z-index:75;opacity:0;transition:opacity .26s}
.proc-scrim.open{opacity:1}
.dw-head{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--border-2)}
.dw-chip{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#3f6fc0,#1e4b8f)}
.dw-chip svg{width:22px;height:22px}
.dw-head h3{margin:0;font-size:17px;font-weight:720;letter-spacing:-.2px}
.dw-head small{color:var(--ink-3);font-size:12px;font-weight:500}
.dw-x{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.dw-x:hover{background:var(--surface-2)}.dw-x svg{width:17px;height:17px}
.dw-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 20px 8px}
.dw-kpi{background:linear-gradient(180deg,#f7f9fc,#eef2f8);border:1px solid var(--border-2);border-radius:11px;padding:12px 12px}
.dw-kv{font-size:19px;font-weight:760;letter-spacing:-.4px;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.dw-kl{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:5px}
.dw-body{flex:1;overflow-y:auto;padding:12px 20px 20px}
.dw-h{font-size:11.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.4px;margin:16px 0 9px}
.dw-h:first-child{margin-top:4px}
.dw-bars{display:flex;flex-direction:column;gap:9px}
.dw-bar{display:flex;align-items:center;gap:10px}
.dw-bl{width:96px;flex:none;font-size:12.5px;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-bt{flex:1;height:9px;background:#eef0f2;border-radius:6px;overflow:hidden}
.dw-bf{display:block;height:100%;border-radius:6px}
.dw-bv{width:64px;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.dw-list{display:flex;flex-direction:column;gap:2px}
.dw-li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border-2)}
.dw-li:last-child{border-bottom:0}
.dw-li b{font-size:13px;font-weight:650;display:block}
.dw-li small{color:var(--ink-3);font-size:11.5px}
.dw-li span{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dw-li .tag-danger{color:var(--danger)}.dw-li .tag-warn{color:var(--warn)}
.dw-note{background:var(--brand-soft);border:1px solid #cfe0f7;color:#173c72;border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.45;margin-bottom:6px}
.dw-note.gap{background:#f3f4f6;border-color:#e2e5ea;color:var(--ink-2)}
.dw-note.danger{background:var(--danger-soft);border-color:#f4c4b8;color:#8a2410}
.dw-foot{padding:14px 20px;border-top:1px solid var(--border-2)}
.dw-go{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px;font-weight:650;font-size:14px;cursor:pointer;transition:background .15s}
.dw-go:hover{background:#173c72}.dw-go svg{width:17px;height:17px}
.dw-soon{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink-3);font-size:13px;font-weight:600;padding:6px}.dw-soon svg{width:16px;height:16px}

/* ---- Responsive ---- */
@media(max-width:960px){ .hero-kpis{grid-template-columns:repeat(3,1fr)} }
@media(max-width:860px){
  .proc{min-height:calc(100vh - 54px)}
  .proc-desk{display:none}
  .proc-mob{display:block}
  .proc-hero{padding:16px 16px 18px}
  .hero-title h2{font-size:20px}
  .hero-switch{width:100%}.hs-select{flex:1;min-width:0}
  .hero-kpis{grid-template-columns:repeat(2,1fr);gap:9px}
  .hk{padding:10px 11px;gap:9px}.hk-ic{width:34px;height:34px}.hk-val{font-size:18px}
  .proc-stage{padding:16px 14px 22px}
  .proc-summary{padding:11px 16px}
  .proc-bar{padding:10px 14px}
  .pb-context{width:100%;order:-1}
  .pb-filters{width:100%}
  .proc-drawer{width:100%;max-width:100%;height:82vh;top:auto;bottom:0;border-radius:18px 18px 0 0;transform:translateY(102%)}
  .proc-drawer.open{transform:none}
  .lg-hint{margin-left:0;width:100%}
}
@media(max-width:420px){ .hero-kpis{grid-template-columns:1fr 1fr} }

/* ===== Tablas de lista → tarjetas apiladas en móvil (sin scroll lateral) ===== */
@media(max-width:640px){
  .table-wrap:has(table.cards){overflow-x:visible}
  table.data.cards thead{display:none}
  table.data.cards,table.data.cards tbody,table.data.cards tr,table.data.cards td{display:block;width:100%}
  table.data.cards tr{border:1px solid var(--border);border-radius:11px;margin:0 0 10px;padding:6px 12px;background:var(--surface);box-shadow:var(--shadow)}
  table.data.cards tbody tr:hover{background:var(--surface)}
  table.data.cards td{border:0;border-bottom:1px solid var(--border-2);padding:8px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;white-space:normal;text-align:right}
  table.data.cards td:last-child{border-bottom:0}
  table.data.cards td::before{content:attr(data-label);font-weight:600;color:var(--ink-2);font-size:12px;text-align:left;flex:none;max-width:42%;text-transform:none;letter-spacing:0}
  table.data.cards td[data-label=""]{justify-content:flex-end;padding-top:10px}
  table.data.cards td[data-label=""]::before{display:none}
  table.data.cards .row-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
}