/* ============================================================================ Vista Partners — sistema de diseño (import desde Claude Design) Crema cálido + teal #0E5F55 + ámbar #E8A33D · Bricolage Grotesque + Instrument Sans Tema claro por defecto; oscuro con . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); :root{ --bg:#F6F3EC;--surface:#FFFFFF;--surface2:#FBF9F3;--ink:#16241F;--muted:#5D6B62;--faint:#8A9389; --border:#E3DCCC;--bsoft:#EDE7D8;--prim:#0E5F55;--prim-h:#0B4C44;--on-prim:#FFFFFF;--prim-soft:#DCEBE8; --accent:#E8A33D;--accent-soft:#F7EBD3;--accent-ink:#96631A; --ok:#2E7D5B;--ok-soft:#E3F0E7;--warn:#B97B1E;--warn-soft:#F7EBD3;--bad:#C24E3A;--bad-soft:#F8E4DD; --side:#0B1A16;--side-ink:#EAF1EB;--side-mut:#8FA79B;--side-bd:#1E362E;--side-act:#12312A; --track:#EDE7D8;--shadow:0 1px 3px rgba(22,36,31,.07),0 6px 20px rgba(22,36,31,.05);--shadow-lg:0 8px 40px rgba(22,36,31,.16); --st-nuevo-bg:#ECE7DA;--st-nuevo-ink:#5D6B62;--st-proc-bg:#F7EBD3;--st-proc-ink:#96631A; --st-radi-bg:#DCEBE8;--st-radi-ink:#0E5F55;--st-apro-bg:#E3F0E7;--st-apro-ink:#2E7D5B;--st-cerr-bg:#16241F;--st-cerr-ink:#F6F3EC; --disp:'Bricolage Grotesque',system-ui,sans-serif; --body:'Instrument Sans',system-ui,-apple-system,sans-serif; } :root[data-theme="oscuro"]{ --bg:#0B1A16;--surface:#12241F;--surface2:#0F1F1A;--ink:#EAF1EB;--muted:#8FA79B;--faint:#6A8177; --border:#1E362E;--bsoft:#1A2F28;--prim:#4CB39A;--prim-h:#5FC4AB;--on-prim:#06231D;--prim-soft:rgba(76,179,154,.14); --accent:#EFB65C;--accent-soft:rgba(232,163,61,.15);--accent-ink:#EFB65C; --ok:#7BCBAE;--ok-soft:rgba(76,179,154,.16);--warn:#EFB65C;--warn-soft:rgba(232,163,61,.15);--bad:#E0705C;--bad-soft:rgba(224,112,92,.14); --side:#081411;--side-ink:#EAF1EB;--side-mut:#8FA79B;--side-bd:#182B25;--side-act:#12312A; --track:#1E362E;--shadow:0 1px 3px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.2);--shadow-lg:0 8px 40px rgba(0,0,0,.5); --st-nuevo-bg:#1C2E28;--st-nuevo-ink:#9DB3A8;--st-proc-bg:rgba(232,163,61,.15);--st-proc-ink:#EFB65C; --st-radi-bg:rgba(76,179,154,.15);--st-radi-ink:#7BCBAE;--st-apro-bg:rgba(76,179,154,.2);--st-apro-ink:#8FD9BC;--st-cerr-bg:#EAF1EB;--st-cerr-ink:#0B1A16; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;-webkit-font-smoothing:antialiased} a{color:var(--prim);text-decoration:none}a:hover{color:var(--prim-h)} ::selection{background:rgba(232,163,61,.35)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-track{background:transparent} input,select,textarea,button{font-family:var(--body)} input::placeholder,textarea::placeholder{color:var(--faint)} :focus-visible{outline:2px solid var(--prim);outline-offset:2px} @keyframes vpFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes vpToast{0%{opacity:0;transform:translate(-50%,12px)}10%{opacity:1;transform:translate(-50%,0)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,6px)}} @keyframes vpPulse{0%,100%{opacity:1}50%{opacity:.45}} @media (prefers-reduced-motion:reduce){*{animation:none!important}} /* ── Tipografía utilitaria ── */ .h1{font:650 24px/1.15 var(--disp);letter-spacing:-.4px;margin:0} .h2{font:650 16.5px var(--disp);letter-spacing:-.2px;margin:0} .h3{font-size:14px;font-weight:700;margin:0} .sub{color:var(--muted);font-size:13px} .tnum{font-variant-numeric:tabular-nums} .disp{font-family:var(--disp)} /* ── Shell ── */ .pv-shell{display:flex;min-height:100vh;align-items:stretch} .pv-side{width:230px;flex:none;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .pv-side .brand{padding:20px 18px 14px;display:flex;align-items:center;gap:10px} .pv-side .brand .wm{font:800 19px var(--disp)} .pv-side .brand .sm{font-size:9.5px;font-weight:600;color:var(--side-mut);letter-spacing:2px;text-transform:uppercase} .pv-roletag{margin:0 14px 14px;padding:9px 11px;border-radius:10px;background:var(--side-act);border:1px solid var(--side-bd)} .pv-roletag .k{font-size:10px;color:var(--side-mut);letter-spacing:1px;text-transform:uppercase;font-weight:600} .pv-roletag .v{font-size:12.5px;font-weight:600;margin-top:2px} .pv-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1} .pv-nav a{display:flex;align-items:center;gap:11px;padding:9.5px 12px;border-radius:9px;background:none;color:var(--side-mut);font-size:13px;font-weight:600;cursor:pointer;text-align:left} .pv-nav a:hover{background:var(--side-act);color:var(--side-ink)} .pv-nav a.active{background:var(--side-act);color:#fff} .pv-nav a.active svg{color:var(--accent)} .pv-nav a .i{width:17px;height:17px;flex:none} .pv-nav .tkbadge{margin-left:auto;background:var(--bad);color:#fff;font-size:10px;font-weight:700;border-radius:99px;padding:1px 6px} .pv-abnote{margin:0 14px 12px;padding:10px 12px;border-radius:10px;background:rgba(232,163,61,.09);border:1px solid rgba(232,163,61,.25);font-size:11px;line-height:1.5;color:var(--side-mut)} .pv-abnote b{color:#EFB65C;font-weight:700} .pv-side-foot{border-top:1px solid var(--side-bd);padding:13px 16px;display:flex;align-items:center;gap:10px} .pv-side-foot .av{width:30px;height:30px;border-radius:99px;background:var(--prim);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none} .pv-side-foot .nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pv-side-foot .cg{font-size:10.5px;color:var(--side-mut)} .pv-side-foot .out{border:none;background:none;color:var(--side-mut);cursor:pointer;padding:4px} .pv-side-foot .out:hover{color:#EAF1EB} .pv-col{flex:1;display:flex;flex-direction:column;min-width:0} .pv-top{height:58px;flex:none;display:flex;align-items:center;gap:14px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40} .pv-top .title{font:650 16.5px var(--disp);letter-spacing:-.2px} .pv-search{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:7px 12px;width:230px} .pv-search input{border:none;background:none;outline:none;color:var(--ink);font-size:12.5px;width:100%} .pv-icon{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative} .pv-icon:hover{border-color:var(--prim);color:var(--prim)} .pv-icon .dotred{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:99px;background:var(--bad);border:2px solid var(--surface)} .pv-main{flex:1;padding:24px 26px 48px;min-width:0} /* ── Botones ── */ .pv-btn{padding:9.5px 15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s} .pv-btn:hover{border-color:var(--prim);color:var(--prim)} .pv-btn-primary{border:none;background:var(--prim);color:var(--on-prim);box-shadow:0 1px 2px rgba(14,95,85,.3)} .pv-btn-primary:hover{background:var(--prim-h);color:var(--on-prim)} .pv-btn-sm{padding:7px 12px;font-size:12px} /* ── Cards ── */ .pv-card{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:18px;box-shadow:var(--shadow);min-width:0} .pv-card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .pv-link{border:none;background:none;color:var(--prim);font-size:12px;font-weight:600;cursor:pointer} .pv-link:hover{text-decoration:underline} /* ── KPI ── */ .pv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px} .pv-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)} .pv-kpi .top{display:flex;justify-content:space-between;align-items:center;gap:6px} .pv-kpi .label{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)} .pv-kpi .val{font:700 22.5px var(--disp);letter-spacing:-.4px;font-variant-numeric:tabular-nums} .pv-kpi .sub{font-size:11.5px;color:var(--muted)} .pv-chip{font-size:10px;font-weight:700;padding:2.5px 7px;border-radius:99px;white-space:nowrap} .chip-ok{color:var(--ok);background:var(--ok-soft)} .chip-warn{color:var(--accent-ink);background:var(--accent-soft)} .chip-bad{color:var(--bad);background:var(--bad-soft)} /* ── Badges de estado ── */ .st{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;text-align:center;white-space:nowrap} .st-nuevo{background:var(--st-nuevo-bg);color:var(--st-nuevo-ink)} .st-en_proceso{background:var(--st-proc-bg);color:var(--st-proc-ink)} .st-radicado{background:var(--st-radi-bg);color:var(--st-radi-ink)} .st-aprobado{background:var(--st-apro-bg);color:var(--st-apro-ink)} .st-cerrado{background:var(--st-cerr-bg);color:var(--st-cerr-ink)} /* ── Prioridad tickets ── */ .prio{font-size:10.5px;font-weight:700;padding:2.5px 8px;border-radius:99px} .prio-normal{color:var(--muted);background:var(--bsoft)} .prio-alta{color:var(--accent-ink);background:var(--accent-soft)} .prio-urgente{color:var(--bad);background:var(--bad-soft)} /* ── Inputs ── */ .pv-in{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:13.5px;outline:none} .pv-in:focus{border-color:var(--prim);box-shadow:0 0 0 3px var(--prim-soft)} .pv-lbl{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px} /* ── Barras / embudo / track ── */ .pv-track{height:9px;border-radius:99px;background:var(--track);overflow:hidden} .pv-track > span{display:block;height:100%;border-radius:99px;background:var(--prim)} /* ── Timeline ── */ .pv-tl{display:flex;gap:11px;padding:8px 2px} .pv-tl .rail{display:flex;flex-direction:column;align-items:center} .pv-tl .dot{width:8px;height:8px;border-radius:99px;margin-top:4px} .pv-tl .line{width:1.5px;flex:1;background:var(--bsoft);margin-top:3px} /* ── Row list (tickets, cola) ── */ .pv-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border:none;border-bottom:1px solid var(--bsoft);background:none;cursor:pointer;text-align:left;width:100%} .pv-row:hover{background:var(--surface2)} .pv-row .sem{width:8px;height:8px;border-radius:99px;flex:none} .pv-row .t{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pv-row .m{font-size:11px;color:var(--muted)} /* ── Toast ── */ .pv-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;z-index:3000;box-shadow:var(--shadow-lg);max-width:90vw;animation:vpToast 3.4s ease forwards} /* ── Responsive ── */ .mq-show{display:none} @media (max-width:920px){ .pv-side{position:fixed;left:-260px;z-index:120;transition:left .2s} .pv-side.open{left:0} .pv-search{display:none} .mq-show{display:inline-flex} .pv-main{padding:16px 14px 90px} .mq-col{flex-direction:column!important} }