/* ============================================================ INMA · Design System (compartido entre pantallas) Tokens + componentes base. Importar en cada pantalla: Atributos en : data-theme(dark|light) data-yellow(acento|medio|atmos) data-font(grotesk|sora|manrope) data-density(compact|regular|comfy) data-chrome(claro|ink) data-width(centrado|amplio|full) ============================================================ */ *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;} body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow:hidden;background:var(--bg-0);color:var(--text-1);} button,input,select,textarea{font-family:inherit;} ::selection{background:color-mix(in srgb,var(--brand) 35%,transparent);} ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;border:2px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background:var(--scroll-h);background-clip:padding-box;} /* ===================== TOKENS ===================== */ :root[data-theme="dark"]{ --bg-0:#0a0a0c; --bg-1:#121214; --bg-2:#171719; --card:#171a1d; --card-2:#1c1f23; --line:rgba(255,255,255,0.07); --line-2:rgba(255,255,255,0.12); --text-1:#f4f5f6; --text-2:rgba(255,255,255,0.62); --text-3:rgba(255,255,255,0.40); --brand:#f4e600; --brand-d:#c9bd00; --on-brand:#0a0a0c; --accent-y:#f4e600; --pos:#34d399; --pos-dim:rgba(52,211,153,0.14); --neg:#f87171; --neg-dim:rgba(248,113,113,0.14); --warn:#fbbf24; --warn-dim:rgba(251,191,36,0.14); --info:#60a5fa; --scroll:rgba(255,255,255,0.12); --scroll-h:rgba(255,255,255,0.22); --el-1:0 1px 2px rgba(0,0,0,0.4); --el-2:0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -8px rgba(0,0,0,0.55); --el-3:0 2px 4px rgba(0,0,0,0.3), 0 24px 48px -12px rgba(0,0,0,0.6); --grid-line:rgba(255,255,255,0.055); --plot-2:#7c8794; --plot-3:#3b4654; } :root[data-theme="light"]{ --bg-0:#eceae4; --bg-1:#f3f2ec; --bg-2:#ffffff; --card:#ffffff; --card-2:#f7f6f2; --line:rgba(20,20,25,0.08); --line-2:rgba(20,20,25,0.14); --text-1:#15151c; --text-2:#5a5a66; --text-3:#8d8d99; --brand:#1a1a1d; --brand-d:#000; --on-brand:#fff; --accent-y:#e4d600; --pos:#0f9d6b; --pos-dim:rgba(15,157,107,0.12); --neg:#dc2626; --neg-dim:rgba(220,38,38,0.10); --warn:#b45309; --warn-dim:rgba(180,83,9,0.12); --info:#2563eb; --scroll:rgba(0,0,0,0.16); --scroll-h:rgba(0,0,0,0.28); --el-1:0 1px 2px rgba(20,20,30,0.06); --el-2:0 1px 3px rgba(20,20,30,0.06), 0 10px 24px -10px rgba(20,20,30,0.18); --el-3:0 2px 6px rgba(20,20,30,0.08), 0 22px 48px -14px rgba(20,20,30,0.22); --grid-line:rgba(20,20,30,0.06); --plot-2:#9aa3ad; --plot-3:#cfd4da; } :root{--accent:var(--brand);--hi:var(--brand);} :root[data-theme="light"]{--accent:#1a1a1d;--hi:var(--accent-y);} /* chrome ink (opcional en claro): vuelve dock/tabs a negro de marca */ :root[data-theme="light"][data-chrome="ink"]{--bg-1:#16161a;} :root[data-theme="light"][data-chrome="ink"] .dock-btn, :root[data-theme="light"][data-chrome="ink"] .tab{color:rgba(255,255,255,.5);} :root[data-theme="light"][data-chrome="ink"] .dock-btn:hover{color:#fff;background:rgba(255,255,255,.08);} :root[data-theme="light"][data-chrome="ink"] .tab:hover{color:rgba(255,255,255,.82);} :root[data-theme="light"][data-chrome="ink"] .searchbox{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5);} /* density + display font + numbers */ :root[data-density="compact"]{--pad:16px;--gap:10px;--card-pad:16px;} :root[data-density="regular"]{--pad:24px;--gap:14px;--card-pad:20px;} :root[data-density="comfy"]{--pad:32px;--gap:18px;--card-pad:26px;} :root[data-font="grotesk"]{--display:'Space Grotesk';} :root[data-font="sora"]{--display:'Sora';} :root[data-font="manrope"]{--display:'Manrope';} .num{font-family:var(--display);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* ===================== SHELL / CHROME ===================== */ .workspace{display:flex;height:100vh;padding:8px;gap:8px;position:relative;z-index:1;} .dock{width:58px;flex-shrink:0;background:var(--bg-1);border:1px solid var(--line);border-radius:16px; display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;z-index:30;} .dock-logo{width:40px;height:40px;border-radius:12px;background:var(--brand);position:relative; display:flex;align-items:center;justify-content:center;margin-bottom:10px;cursor:pointer;overflow:hidden; box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4); animation:breathe 5s ease-in-out infinite;transition:transform .18s cubic-bezier(.2,.9,.3,1.4);} .dock-logo img{width:35px;height:35px;display:block;position:relative;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));transition:transform .18s ease;} .dock-logo::before{content:"";position:absolute;inset:-40%;z-index:3;pointer-events:none; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%); transform:translateX(-120%) rotate(8deg);animation:sheen 6.5s ease-in-out infinite;} @keyframes sheen{0%,72%{transform:translateX(-120%) rotate(8deg);}82%,100%{transform:translateX(120%) rotate(8deg);}} @keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}} .dock-logo:hover{animation:thump .42s cubic-bezier(.3,1.6,.4,1);} @keyframes thump{0%{transform:scale(1);}28%{transform:scale(.9);}55%{transform:scale(1.12);}100%{transform:scale(1);}} .dock-logo:hover img{transform:scale(1.06);} .dock-logo::after{content:"";position:absolute;inset:0;border-radius:12px;z-index:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent);opacity:0;} .dock-logo:hover::after{animation:ring .6s ease-out;} @keyframes ring{0%{opacity:.9;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent);}100%{opacity:0;box-shadow:0 0 0 14px transparent;}} .dock-logo.thinking{animation:breathe 1.4s ease-in-out infinite;} .dock-logo.thinking::after{animation:pulse-ai 1.5s ease-out infinite;} @keyframes pulse-ai{0%{opacity:.8;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent);}100%{opacity:0;box-shadow:0 0 0 16px transparent;}} .dock-sep{width:30px;height:1px;background:var(--line-2);margin:6px 0;} .dock-spacer{flex:1;} .dock-btn{width:42px;height:42px;border-radius:11px;border:none;background:transparent;color:var(--text-3); display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .14s ease;} :root[data-theme="light"] .dock-btn{color:#6b6b76;} .dock-btn:hover{background:var(--bg-2);color:var(--text-1);} .dock-btn.active{background:color-mix(in srgb,var(--hi) 16%,transparent);color:var(--accent);} .dock-btn.active::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent);} .dock-btn::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px); background:var(--bg-2);color:var(--text-1);border:1px solid var(--line-2);font-size:11px;font-weight:600; padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;z-index:200;box-shadow:var(--el-2);transition:opacity .12s,transform .12s;} .dock-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0);} .dock-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--neg);border:1.5px solid var(--bg-1);} .dock-ava{width:36px;height:36px;border-radius:50%;margin-top:6px;cursor:pointer;display:flex;align-items:center;justify-content:center; font-family:var(--display);font-weight:700;font-size:13px;background:linear-gradient(135deg,#3a3f46,#23262b);color:#fff;border:1px solid var(--line-2);} .shell{flex:1;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line); border-radius:16px;overflow:hidden;min-width:0;box-shadow:var(--el-1);position:relative;} .tabbar{display:flex;align-items:center;gap:4px;height:46px;padding:0 10px;background:var(--bg-1); border-bottom:1px solid var(--line);flex-shrink:0;position:relative;z-index:2;} .tab{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:8px;border:none;cursor:pointer; font-size:12px;font-weight:500;color:var(--text-3);background:transparent;white-space:nowrap;transition:all .1s;} .tab:hover{color:var(--text-2);background:color-mix(in srgb,var(--bg-2) 60%,transparent);} .tab.active{background:var(--bg-2);color:var(--text-1);font-weight:600;box-shadow:var(--el-1);} :root[data-theme="light"] .tab.active{background:#fff;} .tab.pinned{padding:0 9px;} .tab.active svg{color:var(--accent);} :root[data-theme="light"][data-chrome="claro"] .tab.active svg{color:#15151c;} .tab svg{opacity:.85;} .tab-x{margin-left:2px;width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-3);opacity:.5;font-size:11px;} .tab-x:hover{opacity:1;background:var(--neg-dim);color:var(--neg);} .tab-new{width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--text-3);cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;} .tab-new:hover{background:color-mix(in srgb,var(--hi) 12%,transparent);color:var(--text-1);} .tabbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;padding-right:4px;} .searchbox{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--text-3);font-size:12px;min-width:200px;} .searchbox kbd{margin-left:auto;font-family:var(--display);font-size:10px;background:var(--card-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--text-3);} .main{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;} /* ===================== TYPE ===================== */ .h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-1px;margin:0;line-height:1.05;} .h-sub{font-size:14px;color:var(--text-2);margin-top:8px;} .sec-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);} .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);} /* ===================== BUTTONS ===================== */ .btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line-2);cursor:pointer; font-family:var(--display);font-weight:600;font-size:13px;background:var(--card);color:var(--text-1);transition:all .12s;} .btn:hover{border-color:var(--text-3);transform:translateY(-1px);} .btn-primary{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 18px;border-radius:10px;border:none;cursor:pointer; font-family:var(--display);font-weight:600;font-size:13px;background:var(--brand);color:var(--on-brand); box-shadow:0 4px 14px -4px color-mix(in srgb,var(--brand) 60%,transparent);transition:transform .12s,box-shadow .12s;} :root[data-theme="light"] .btn-primary{background:#15151c;color:#fff;box-shadow:var(--el-2);} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px -6px color-mix(in srgb,var(--brand) 70%,transparent);} .btn-ghost{background:transparent;border:1px dashed var(--line-2);color:var(--text-2);} .btn-ghost:hover{border-color:var(--accent);color:var(--text-1);} .btn-sm{height:32px;padding:0 12px;font-size:12px;border-radius:8px;} /* ===================== FIELDS ===================== */ .field{display:flex;flex-direction:column;gap:7px;} .field label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);} .input,.select,.textarea{width:100%;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text-1); padding:0 14px;font-size:14px;outline:none;transition:border-color .14s,box-shadow .14s;} .textarea{height:auto;padding:11px 14px;resize:vertical;line-height:1.5;} .input::placeholder,.textarea::placeholder{color:var(--text-3);} .input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);} .select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d8d99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;} /* ===================== CARDS / CHIPS / TABLE ===================== */ .card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--el-1);} .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--card-2);color:var(--text-2);border:1px solid var(--line);} .chip.brand{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--hi);border-color:color-mix(in srgb,var(--brand) 22%,transparent);} :root[data-theme="light"] .chip.brand{color:#7a7100;background:#fffadf;border-color:#ece08f;} .delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;padding:2px 7px;border-radius:7px;font-variant-numeric:tabular-nums;} .delta.up{color:var(--pos);background:var(--pos-dim);} .delta.down{color:var(--neg);background:var(--neg-dim);} .delta.flat{color:var(--warn);background:var(--warn-dim);} .tbl{width:100%;border-collapse:collapse;} .tbl th{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);text-align:left;padding:0 10px 10px;} .tbl td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:middle;} .tbl .num{text-align:right;} /* ===================== AI BADGE ===================== */ .ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--hi);background:color-mix(in srgb,var(--brand) 12%,transparent);padding:3px 9px;border-radius:99px;border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);} :root[data-theme="light"] .ai-badge{color:#7a7100;background:#fffadf;border-color:#ece08f;} /* ===================== BG FX (lienzo vivo) ===================== */ .bgfx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;} :root[data-bg="off"] .bgfx{display:none;} /* ====== RADIOS INDUSTRIALES — esquinas mínimas (industrial, no escolar) ====== */ .dock,.shell,.sheet,.card,.visor,.form-card,.part-card,.totals,.kpi,.ind,.mod-gallery-panel{border-radius:4px !important;} .dock-logo,.dock-logo::after,.btn,.btn-primary,.btn-ghost,.btn-sm,.input,.select,.textarea,.cell,.tab,.tab-new,.searchbox,.kpi-ic,.dock-btn,.drop,.drop-ic,.proc-thumb,.vstage,.vtabs,.vtab,.attn-ic,.av.logo,.seg{border-radius:3px !important;} .chip,.delta,.ai-badge,.pill-live,.seg button,.searchbox kbd,.tab-x,.row-del,.feed-tag,.pstep .pd{border-radius:2px !important;} /* se mantienen circulares: avatares y puntos */ .av,.dock-ava,.team .av,.dock-dot,.donut-c,.donut-c *{border-radius:50% !important;} .av.logo{border-radius:3px !important;} /* width helper for centered canvases */ .canvas{max-width:1180px;margin:0 auto;padding:var(--pad) calc(var(--pad) + 10px) 60px;} :root[data-width="amplio"] .canvas{max-width:1360px;} :root[data-width="full"] .canvas{max-width:none;}