/* Zalando Sync — capa premium (overlay sobre style.css El Ganso) */

:root{
  --z-radius:14px; --z-radius-sm:9px;
  --z-shadow:0 1px 2px rgba(13,35,63,.06),0 4px 16px rgba(13,35,63,.06);
  --z-shadow-lg:0 8px 32px rgba(13,35,63,.14);
  --z-grad:linear-gradient(135deg,#0d233f 0%,#1a3558 55%,#216ba5 130%);
  --z-gold:#c2a36b;
}
body{background:var(--bg-primary)}
.container{max-width:1280px;margin:0 auto;padding:22px 26px 60px}

/* ===== Navbar refinement ===== */
.navbar{background:var(--z-grad)!important;box-shadow:0 2px 14px rgba(13,35,63,.25);padding:0 22px;height:56px}
.navbar-brand .brand-title{letter-spacing:.5px}
.navbar-nav a{font-size:.83rem;font-weight:600;letter-spacing:.2px;border-radius:8px;padding:7px 12px;transition:background .15s}
.navbar-nav a:hover{background:rgba(255,255,255,.10)}
.navbar-nav a.active{background:rgba(255,255,255,.16)}
.navbar-nav a.active::after{display:none}

/* ===== Hero ===== */
.zhero{background:var(--z-grad);border-radius:var(--z-radius);padding:20px 24px;color:#fff;box-shadow:var(--z-shadow-lg);position:relative;overflow:hidden;margin-bottom:18px}
.zhero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(194,163,107,.22),transparent 70%);pointer-events:none}
.zhero h1{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.zhero .sub{font-size:.8rem;opacity:.8;margin-top:3px}
.zhero__pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hpill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:4px 12px;font-size:.72rem;backdrop-filter:blur(4px)}
.hpill b{font-weight:700}
.hpill .ok{color:#7ee2a8}.hpill .bad{color:#ff9d9d}
.tag-env{padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:800;letter-spacing:.5px}
.tag-env.sandbox{background:var(--z-gold);color:#2a1d00}
.tag-env.prod{background:#2e7d32;color:#fff}

/* ===== Pipeline ===== */
.pipe{display:flex;align-items:stretch;gap:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--z-radius);padding:18px 10px;box-shadow:var(--z-shadow);overflow-x:auto;margin-bottom:18px}
.pipe__node{flex:1;min-width:120px;text-align:center;position:relative;padding:0 8px}
.pipe__node:not(:last-child)::after{content:"";position:absolute;right:-8px;top:34px;width:16px;height:2px;background:var(--border)}
.pipe__ico{width:46px;height:46px;border-radius:13px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border:1px solid var(--border);color:var(--accent)}
.pipe__ico svg{width:22px;height:22px}
.pipe__node.on .pipe__ico{background:var(--z-grad);color:#fff;border:none;box-shadow:0 4px 12px rgba(33,107,165,.3)}
.pipe__n{font-size:1.5rem;font-weight:800;color:var(--text-primary);line-height:1}
.pipe__l{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.pipe__s{font-size:.66rem;margin-top:3px}

/* ===== KPI tiles ===== */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:18px}
.ktile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--z-radius);padding:16px 18px;box-shadow:var(--z-shadow);transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}
.ktile:hover{transform:translateY(-2px);box-shadow:var(--z-shadow-lg)}
.ktile__top{display:flex;align-items:center;justify-content:space-between}
.ktile__ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(33,107,165,.1);color:var(--accent)}
.ktile__ico svg{width:18px;height:18px}
.ktile__n{font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1;margin-top:10px}
.ktile__l{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:5px}
.ktile.alert .ktile__n{color:var(--warning)}
.ktile.alert .ktile__ico{background:rgba(230,81,0,.12);color:var(--warning)}

/* ===== Panels ===== */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--z-radius);box-shadow:var(--z-shadow);margin-bottom:18px;overflow:hidden}
.panel__h{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border)}
.panel__h h2{margin:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:700}
.panel__b{padding:6px 18px 14px}

/* ===== Task board ===== */
.tboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.trow:first-child{border-top:none}
.trow__l{min-width:0}
.trow__t{font-size:.84rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:7px}
.trow__s{font-size:.7rem;color:var(--text-muted);margin-top:3px}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.dot.ok{background:#2e9e4f}.dot.error{background:#e23d3d}.dot.unknown{background:#b9bcc4}
.runbtn{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);border-radius:8px;padding:6px 12px;font-size:.74rem;cursor:pointer;font-weight:600;transition:all .12s;white-space:nowrap}
.runbtn:hover{border-color:var(--accent);color:#fff;background:var(--accent)}
.runbtn:disabled{opacity:.5;cursor:wait}

/* ===== Pills ===== */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.71rem;font-weight:700;letter-spacing:.2px}
.pill.ok{background:rgba(46,158,79,.13);color:#2e9e4f}
.pill.warn{background:rgba(230,81,0,.13);color:#d2691e}
.pill.err{background:rgba(226,61,61,.13);color:#e23d3d}
.pill.neutral{background:var(--bg-primary);color:var(--text-muted);border:1px solid var(--border)}
.pill.info{background:rgba(33,107,165,.12);color:var(--accent)}

/* ===== Premium table + toolbar ===== */
.tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tbar h1{margin:0;font-size:1.3rem;font-weight:800;color:var(--text-primary)}
.tbar .count{font-size:.78rem;color:var(--text-muted);font-weight:600}
.tbar .spacer{flex:1}
.search{position:relative}
.search input{background:var(--bg-card);border:1px solid var(--border);border-radius:9px;padding:8px 12px 8px 32px;font-size:.8rem;color:var(--text-primary);width:240px;outline:none;transition:border .15s,box-shadow .15s}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(33,107,165,.13)}
.search svg{position:absolute;left:10px;top:9px;width:15px;height:15px;color:var(--text-muted)}
.dtable-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--z-radius);box-shadow:var(--z-shadow);overflow:hidden}
.dtable{width:100%;border-collapse:collapse;font-size:.81rem}
.dtable thead th{position:sticky;top:0;text-align:left;padding:11px 14px;background:var(--bg-primary);color:var(--text-muted);text-transform:uppercase;font-size:.67rem;letter-spacing:.05em;border-bottom:1px solid var(--border);z-index:1;font-weight:700}
.dtable tbody td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text-primary)}
.dtable tbody tr{transition:background .1s}
.dtable tbody tr:hover td{background:var(--bg-primary)}
.dtable tbody tr:last-child td{border-bottom:none}
.dtable a.rowlink{color:var(--accent);font-weight:700;text-decoration:none}
.dtable a.rowlink:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}
.empty{padding:54px 20px;text-align:center;color:var(--text-muted)}
.empty svg{width:42px;height:42px;opacity:.4;margin-bottom:10px}
.empty p{margin:0;font-size:.86rem}

/* ===== Detalle pedido ===== */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
@media(max-width:880px){.detail-grid{grid-template-columns:1fr}}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--border);font-size:.83rem}
.kv:first-child{border-top:none}.kv span{color:var(--text-muted)}.kv b{color:var(--text-primary);text-align:right;word-break:break-word}
.timeline{list-style:none;margin:0;padding:6px 0 0}
.timeline li{position:relative;padding:0 0 16px 24px;font-size:.8rem;color:var(--text-secondary)}
.timeline li::before{content:"";position:absolute;left:4px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--border)}
.timeline li.done::before{background:#2e9e4f}
.timeline li.cur::before{background:var(--accent);box-shadow:0 0 0 4px rgba(33,107,165,.2)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:8px;top:12px;bottom:0;width:1px;background:var(--border)}
.timeline b{color:var(--text-primary)}

/* ===== Login premium ===== */
.zlogin{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--z-grad);padding:20px;position:relative;overflow:hidden}
.zlogin::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(194,163,107,.18),transparent 65%);top:-180px;right:-120px}
.zlogin::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(33,107,165,.25),transparent 65%);bottom:-160px;left:-100px}
.zlogin-card{position:relative;z-index:1;background:rgba(255,255,255,.97);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.4);width:100%;max-width:380px;padding:34px 32px}
.zlogin-card .logo{text-align:center;margin-bottom:6px}
.zlogin-card .logo img{height:34px}
.zlogin-card .title{text-align:center;font-size:1.25rem;font-weight:800;color:#0d233f;letter-spacing:.3px}
.zlogin-card .title span{color:var(--z-gold)}
.zlogin-card .sub{text-align:center;font-size:.76rem;color:#8a8a8a;margin-bottom:22px}
.zlogin-card label{display:block;font-size:.74rem;font-weight:700;color:#555;margin:0 0 5px;text-transform:uppercase;letter-spacing:.04em}
.zlogin-card input{width:100%;padding:11px 13px;border:1px solid #dcdce0;border-radius:10px;font-size:.9rem;margin-bottom:14px;outline:none;transition:border .15s,box-shadow .15s;box-sizing:border-box}
.zlogin-card input:focus{border-color:#216ba5;box-shadow:0 0 0 3px rgba(33,107,165,.14)}
.zlogin-btn{width:100%;padding:12px;border:none;border-radius:10px;background:var(--z-grad);color:#fff;font-size:.92rem;font-weight:700;cursor:pointer;letter-spacing:.3px;box-shadow:0 6px 18px rgba(13,35,63,.3);transition:transform .1s}
.zlogin-btn:hover{transform:translateY(-1px)}
.zlogin-err{background:rgba(226,61,61,.1);color:#c62828;padding:9px 12px;border-radius:8px;font-size:.8rem;text-align:center;margin-bottom:14px}
.zlogin-foot{text-align:center;margin-top:16px}
.zlogin-foot a{color:#999;font-size:.76rem;text-decoration:none}