/* ============================================================ ICE Design System — "ice.css" Fonte única de estilo para todo o dashboard ICE/RB. Claro é o tema padrão; escuro via . Herdado por todas as páginas: ============================================================ */ :root{ --radius:16px; --radius-sm:11px; --pill:999px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace; --ease:cubic-bezier(.22,.61,.36,1); --shadow-1:0 1px 2px rgba(16,20,30,.05),0 10px 26px -14px rgba(16,20,30,.16); --shadow-2:0 18px 50px -18px rgba(16,20,30,.28); --sidebar-w:250px; } /* ---------- TEMA CLARO (padrão) ---------- */ :root,html[data-theme="light"]{ --bg:#f4f5f8; --surface:#ffffff; --surface-hi:#f5f6f9; --border:rgba(17,24,39,.08); --border-hi:rgba(17,24,39,.15); --text:#111827; --text-2:#55606f; --text-3:#8a93a2; --accent:#0071e3; --accent-weak:rgba(0,113,227,.10); --copper:#b7791f; --copper-weak:rgba(183,121,31,.12); --steel:#3b82c4; --steel-weak:rgba(59,130,196,.12); --violet:#7c5cff; --violet-weak:rgba(124,92,255,.12); --pos:#1a9e4b; --pos-weak:rgba(26,158,75,.11); --warn:#b8860b; --warn-weak:rgba(184,134,11,.13); --neg:#d70015; --neg-weak:rgba(215,0,21,.08); --track:rgba(17,24,39,.07); --logo:url("/static/logo-ice-metal-horizontal-v2.png"); color-scheme:light; } /* ---------- TEMA ESCURO ---------- */ html[data-theme="dark"]{ --bg:#0a0c10; --surface:#14171d; --surface-hi:#20242e; --border:rgba(255,255,255,.08); --border-hi:rgba(255,255,255,.15); --text:#f3f5f9; --text-2:#aeb6c4; --text-3:#727d8e; --accent:#3b9eff; --accent-weak:rgba(59,158,255,.15); --copper:#e0a43b; --copper-weak:rgba(224,164,59,.15); --steel:#5aa9ff; --steel-weak:rgba(90,169,255,.15); --violet:#a78bff; --violet-weak:rgba(167,139,255,.16); --pos:#30d158; --pos-weak:rgba(48,209,88,.15); --warn:#ffd426; --warn-weak:rgba(255,212,38,.14); --neg:#ff5a4d; --neg-weak:rgba(255,90,77,.15); --track:rgba(255,255,255,.07); --logo:url("/static/logo-ice-metal-white-horizontal-v3.png"); color-scheme:dark; } /* ---------- base ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font);background:var(--bg);color:var(--text); -webkit-font-smoothing:antialiased;line-height:1.45;min-height:100vh;overflow-x:hidden} a{color:inherit} .tnum{font-variant-numeric:tabular-nums} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:6px} /* ============ SHELL (sidebar + topbar) — injetado por ice-shell.js ============ */ .ice-app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} .ice-side{border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:4px; position:sticky;top:0;height:100vh;background:var(--surface);overflow-y:auto} .ice-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px} .ice-brand .logo{width:108px;height:30px;background:var(--logo) left center/contain no-repeat} .ice-navgroup{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3); padding:16px 12px 6px;display:flex;align-items:center;gap:7px} .ice-navgroup .gdot{width:6px;height:6px;border-radius:2px} .ice-navitem{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm); color:var(--text-2);font-size:13.5px;font-weight:550;text-decoration:none;transition:all .16s var(--ease);position:relative} .ice-navitem .ic{width:18px;text-align:center;opacity:.85;font-size:15px} .ice-navitem:hover{background:var(--surface-hi);color:var(--text)} .ice-navitem.active{background:var(--accent-weak);color:var(--accent)} .ice-navitem.active::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)} .ice-navitem .badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--neg);color:#fff;border-radius:var(--pill);padding:1px 6px} .ice-main{display:flex;flex-direction:column;min-width:0} .ice-topbar{display:flex;align-items:center;gap:14px;padding:16px 30px;border-bottom:1px solid var(--border); position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(20px)} .ice-tbtn.ice-hamb{display:none} .ice-crumb{font-size:12px;color:var(--text-3)} .ice-crumb b{color:var(--text-2);font-weight:600} .ice-title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:1px} .ice-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface); border:1px solid var(--border);border-radius:var(--pill);padding:9px 15px;width:250px;color:var(--text-3);font-size:13px} .ice-tbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface); display:grid;place-items:center;font-size:15px;transition:all .16s var(--ease);flex-shrink:0} .ice-tbtn:hover{background:var(--surface-hi);border-color:var(--border-hi)} .ice-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--violet)); display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;text-decoration:none} .ice-content{padding:26px 30px 70px;max-width:1340px;width:100%} .ice-scrim{display:none} .ice-tabbar{display:none} /* ============ COMPONENTES ============ */ .btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff; padding:9px 16px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-1); transition:all .16s var(--ease);text-decoration:none} .btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)} .btn-ghost{display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--text-2); padding:9px 15px;border:1px solid var(--border);border-radius:12px;font-size:13px;font-weight:600; transition:all .16s var(--ease);text-decoration:none} .btn-ghost:hover{background:var(--surface-hi);border-color:var(--border-hi);color:var(--text)} .seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--pill);padding:3px;gap:2px} .seg button{padding:7px 16px;border-radius:var(--pill);font-size:12.5px;font-weight:600;color:var(--text-2)} .seg button.on{background:var(--accent);color:#fff;box-shadow:var(--shadow-1)} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden} .card-h{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 12px} .card-h h3{font-size:14.5px;font-weight:680;letter-spacing:-.01em;margin:0} .card-h .sub{font-size:11.5px;color:var(--text-3);margin-top:2px} .pill{font-size:11px;font-weight:650;padding:4px 10px;border-radius:var(--pill);background:var(--accent-weak);color:var(--accent)} .pill-mute{background:var(--surface-hi);color:var(--text-2)} /* KPI */ .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px; box-shadow:var(--shadow-1);transition:all .2s var(--ease)} .kpi:hover{transform:translateY(-2px);border-color:var(--border-hi);box-shadow:var(--shadow-2)} .kpi .lbl{font-size:11.5px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:9px} .kpi .lbl .ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:14px} .kpi .val{font-size:28px;font-weight:730;letter-spacing:-.03em;margin:13px 0 8px} .kpi .delta{font-size:12px;font-weight:650;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--pill)} .delta.up{color:var(--pos);background:var(--pos-weak)} .delta.down{color:var(--neg);background:var(--neg-weak)} /* tabela */ .ice-table{width:100%;border-collapse:collapse} .ice-table thead th{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3); text-align:left;padding:11px 20px;background:var(--surface);position:sticky;top:0} .ice-table tbody td{padding:13px 20px;font-size:13px;border-top:1px solid var(--border)} .ice-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--text) 3%,transparent)} .ice-table tbody tr:hover{background:var(--accent-weak)} .ice-table .right{text-align:right} .tag{font-size:11px;font-weight:650;padding:3px 10px;border-radius:var(--pill);display:inline-flex;align-items:center;gap:5px} .tag.ok{background:var(--pos-weak);color:var(--pos)} .tag.wa{background:var(--warn-weak);color:var(--warn)} .tag.bad{background:var(--neg-weak);color:var(--neg)} .section-h{display:flex;align-items:baseline;gap:10px;margin:8px 2px 14px} .section-h h2{font-size:15px;font-weight:660;letter-spacing:-.01em;margin:0} .section-h span{font-size:12px;color:var(--text-3)} /* grids utilitários */ .grid-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} /* tile — cartão-atalho (portal / launchers) */ .tile{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-1);text-decoration:none;color:inherit; transition:all .18s var(--ease)} .tile:hover{transform:translateY(-3px);border-color:var(--border-hi);box-shadow:var(--shadow-2)} .tile .t-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex-shrink:0; background:var(--accent-weak);color:var(--accent)} .tile .t-body{min-width:0;flex:1} .tile .t-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:680;letter-spacing:-.01em} .tile .t-desc{font-size:12.5px;color:var(--text-2);line-height:1.5;margin-top:5px} .tile .t-go{font-size:12px;color:var(--text-3);margin-top:12px;font-weight:600} .badge-chip{font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--pill); background:var(--pos-weak);color:var(--pos);text-transform:uppercase} .badge-chip.warn{background:var(--warn-weak);color:var(--warn)} .badge-chip.info{background:var(--accent-weak);color:var(--accent)} .badge-chip.neg{background:var(--neg-weak);color:var(--neg)} .badge-chip.violet{background:var(--violet-weak);color:var(--violet)} /* hero simples (topo de páginas de landing) */ .ice-hero{display:flex;align-items:center;gap:14px;margin:2px 2px 22px} .ice-hero .status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--pos); background:var(--pos-weak);padding:5px 12px;border-radius:var(--pill)} .ice-hero .status .d{width:8px;height:8px;border-radius:50%;background:var(--pos);animation:ice-pulse 1.8s infinite} @keyframes ice-pulse{0%,100%{opacity:1}50%{opacity:.4}} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:22px 2px 12px} /* ============ RESPONSIVO (iPhone / iPad) ============ */ @media(max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .ice-app{grid-template-columns:1fr} .ice-side{position:fixed;left:0;top:0;z-index:60;width:280px;transform:translateX(-100%);transition:transform .28s var(--ease)} .ice-app.nav-open .ice-side{transform:translateX(0)} .ice-app.nav-open .ice-scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)} .ice-tbtn.ice-hamb{display:grid} .ice-search{display:none} .ice-topbar .btn-primary{display:none} .ice-topbar>div{min-width:0;flex:1} .ice-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ice-content{padding:20px 16px 90px} .ice-topbar{padding:14px 16px} .grid-kpi{grid-template-columns:repeat(2,1fr)} .grid-2,.grid-3{grid-template-columns:1fr} .ice-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40; background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px); border-top:1px solid var(--border);padding:9px 8px 14px;justify-content:space-around} .ice-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--text-3);text-decoration:none} .ice-tabbar a.on{color:var(--accent)} .ice-tabbar a .ic{font-size:19px} } @media(max-width:520px){ .grid-kpi{grid-template-columns:1fr} }