/* ============================================================ BitV2 IoT Dashboard — BlueShift Design System v1.0 ============================================================ ⚠️ Os TOKENS (cor, tipografia, raio, sombra, motion), o reset de body, a scrollbar, .mono/.eyebrow e a base .ms dos ícones vivem em `blueshift-tokens.css`, carregado ANTES deste arquivo no de app.html e index.html. Não redefinir nada disso aqui: este arquivo é só componente/tela. O que saiu daqui na migração BlueShift: · blocos :root / [data-theme="slate"] / [data-theme="black"] → tokens · .starfield (+ o radial-gradient de fundo do body) → removido pelo DS ("superfícies limpas"); a
também saiu do app.jsx. · o gradiente de --accent-grad → azul chapado ============================================================ */ /* ---------- shared atoms ---------- */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--bs-elevation-2); } #root { position: relative; z-index: 1; min-height: 100%; } /* ============================================================ LOGIN ============================================================ */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; } .login-card { width: 100%; max-width: 400px; padding: 38px 34px 30px; position: relative; z-index: 1; } .login-logo { height: 40px; width: auto; display: block; margin-bottom: 26px; } .login-card h1 { font-family: var(--font-mono); font-size: 16px; margin: 0 0 4px; font-weight: 600; letter-spacing: -0.01em; } .login-card .sub { color: var(--text-3); font-size: 11.5px; margin-bottom: 26px; } .field { margin-bottom: 15px; } .field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 7px; text-transform: uppercase; } .input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 0 14px; min-height: 44px; border-radius: 8px; font-size: 13.5px; outline: none; transition: border-color var(--bs-dur-fast), box-shadow var(--bs-dur-fast); } .input:focus { border-color: var(--accent); box-shadow: var(--bs-focus-ring-soft); } .input::placeholder { color: var(--text-3); } .btn-primary { width: 100%; border: none; background: var(--accent); color: #fff; font-weight: 500; font-size: 14px; line-height: 22px; padding: 12px 20px; min-height: 46px; border-radius: var(--bs-radius-pill); margin-top: 8px; transition: background var(--bs-dur-fast); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { background: var(--accent-deep); } .btn-primary:disabled { background: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; } .login-error { background: var(--crit-soft); border: 1px solid var(--crit); color: var(--crit); font-size: 11.5px; padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; } .login-hint { text-align: center; color: var(--text-3); font-size: 11px; margin-top: 18px; font-family: var(--font-mono); } .login-hint b { color: var(--text-2); font-weight: 500; } /* ============================================================ APP SHELL / TOP NAV ============================================================ */ .app { min-height: 100vh; display: flex; flex-direction: column; } .topnav { display: flex; align-items: center; gap: 26px; padding: 0 22px; height: 58px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; } .topnav .logo { height: 30px; width: auto; } .nav-items { display: flex; align-items: center; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); background: none; border: none; transition: background .15s, color .15s; } .nav-item:hover { background: var(--row-hover); color: var(--text); } .nav-item.active { color: var(--text); background: var(--accent-soft); } .nav-item .ico { color: var(--accent-bright); display: flex; } .nav-spacer { flex: 1; } .nav-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 38%, transparent);} 70%{ box-shadow:0 0 0 6px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} } .user-menu { display: flex; align-items: center; gap: 10px; } .avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; color: #fff; } .icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; /* Mesmo motivo do .btn: `--bg-2` é branco no tema claro e o botão sumia sobre o painel. */ background: var(--btn-face); border: 1px solid var(--btn-edge); color: var(--text-2); transition: color .15s, border-color .15s, background .15s; } .icon-btn:hover { color: var(--text); border-color: #9DC0FF; background: var(--accent-soft); } .icon-btn.danger:hover { color: var(--crit); border-color: var(--crit); } /* ============================================================ OVERVIEW ============================================================ */ .page { padding: 22px; max-width: 1700px; margin: 0 auto; width: 100%; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; } .page-head h1 { font-family: var(--font-mono); font-size: 17.5px; font-weight: 600; margin: 4px 0 2px; letter-spacing: -0.01em; } .page-head .desc { color: var(--text-3); font-size: 11.5px; } /* KPI cards */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; } .kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; } .kpi .kpi-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-bright); } .kpi.is-ok .kpi-ico { background: var(--ok-soft); color: var(--ok); } .kpi.is-idle .kpi-ico { background: color-mix(in srgb, var(--idle) 20%, transparent); color: var(--idle); } .kpi.is-alert .kpi-ico { background: var(--crit-soft); color: var(--crit); } .kpi .kpi-val { font-family: var(--font-mono); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } .kpi .kpi-label { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; } .kpi .kpi-delta { font-size: 11px; color: var(--text-3); margin-top: 2px; } .kpi.is-alert .kpi-val { color: var(--crit); } /* toolbar */ .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .search { display: flex; align-items: center; gap: 9px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; min-width: 260px; flex: 1; max-width: 380px; } .search input { background: none; border: none; outline: none; color: var(--text); font-size: 12px; width: 100%; } .search input::placeholder { color: var(--text-3); } .search svg { color: var(--text-3); flex-shrink: 0; } .seg { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; } .seg button { background: none; border: none; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; padding: 6px 11px; border-radius: 6px; transition: background .15s, color .15s; white-space: nowrap; } .seg button.active { background: var(--panel-hi); color: var(--text); } .seg button .cnt { opacity: 0.6; margin-left: 5px; } /* ---------- dense table ---------- */ .table-wrap { overflow: auto; } table.devices { width: 100%; border-collapse: collapse; font-size: 12px; } table.devices thead th { position: sticky; top: 0; text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 11px 14px; background: var(--panel); border-bottom: 1px solid var(--border); white-space: nowrap; } table.devices thead th.num, table.devices tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } table.devices tbody tr { border-bottom: 1px solid var(--grid-line); cursor: pointer; transition: background .12s; } table.devices tbody tr:hover { background: var(--row-hover); } table.devices tbody tr.alert-row { box-shadow: inset 3px 0 0 var(--crit); } table.devices tbody tr.warn-row { box-shadow: inset 3px 0 0 var(--warn); } table.devices tbody tr.selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } table.devices td { padding: 11px 14px; white-space: nowrap; vertical-align: middle; } .dev-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); display: flex; align-items: center; gap: 9px; } .dev-id .mac { color: var(--text-3); font-size: 11px; } .compact table.devices td { padding: 7px 14px; } .compact table.devices thead th { padding: 8px 14px; } /* status pill */ .status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; } .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot.online { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .dot.offline { background: var(--idle); } .status.online { color: var(--ok); } .status.offline { color: var(--text-3); } /* badges */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; } .badge.neutral { background: color-mix(in srgb, var(--idle) 18%, transparent); color: var(--text-2); border-color: var(--border); } .badge.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); } .badge.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn-fill) 38%, transparent); } .badge.crit { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 38%, transparent); } .badge.dot-lead::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* signal bars */ .signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .signal i { width: 3px; border-radius: 1px; background: var(--text-3); display: block; } .signal i.on { background: var(--accent-bright); } .signal.s-good i.on { background: var(--ok); } .signal.s-weak i.on { background: var(--warn); } .signal.s-bad i.on { background: var(--crit); } /* mini progress */ .mini-bar { width: 78px; height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; display: inline-block; vertical-align: middle; } .mini-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .mini-bar.warn > span { background: var(--warn); } .mini-bar.crit > span { background: var(--crit); } .spark-cell { width: 96px; } .empty { text-align: center; color: var(--text-3); padding: 50px; font-family: var(--font-mono); font-size: 12px; } /* ============================================================ GRID (alternate overview layout) ============================================================ */ .dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .dev-card { padding: 16px; cursor: pointer; transition: border-color .15s, transform .1s; display: flex; flex-direction: column; gap: 13px; } .dev-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .dev-card.alert-row { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit) 38%, transparent); } .dev-card.warn-row { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-fill) 38%, transparent); } .dev-card .dc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .dev-card .dc-id { font-family: var(--font-mono); font-size: 12px; } .dev-card .dc-sub { color: var(--text-3); font-size: 11px; font-family: var(--font-mono); margin-top: 2px; } .dev-card .dc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .dc-metric .k { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .dc-metric .v { font-family: var(--font-mono); font-size: 12.5px; margin-top: 2px; } /* ============================================================ DETAIL DRAWER ============================================================ */ .drawer-scrim { position: fixed; inset: 0; background: rgba(5, 10, 32, 0.45); backdrop-filter: blur(2px); z-index: 40; opacity: 0; animation: fade .2s forwards; } @keyframes fade { to { opacity: 1; } } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); background: var(--bg); border-left: 1px solid var(--border-strong); box-shadow: -30px 0 60px -20px rgba(0,0,0,0.7); z-index: 41; display: flex; flex-direction: column; transform: translateX(100%); animation: slidein .26s cubic-bezier(.22,.7,.3,1) forwards; } @keyframes slidein { to { transform: translateX(0); } } .drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--panel); } .drawer-head .d-id { font-family: var(--font-mono); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .drawer-head .d-sub { color: var(--text-3); font-size: 11px; font-family: var(--font-mono); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; } /* ---- Seções por etiqueta na tela Parque ---- */ .etq-secao { margin-bottom: 14px; } .etq-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 4px; margin-bottom: 8px; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; } .etq-head:hover { color: var(--text-1); } /* A seta é o mesmo `chevron-right`: girada quando a seção está aberta. */ .etq-seta { transition: transform .15s ease; transform: rotate(90deg); } .etq-head.fechada .etq-seta { transform: rotate(0deg); } .etq-nome { flex: 1; text-align: left; } /* Botão/campo da etiqueta no cabeçalho do drawer (EtiquetaField). */ .gb-acoes { display: flex; align-items: center; gap: 8px; } .etq-btn { color: var(--text-3); } .etq-btn.tem { color: var(--text-1); border-color: var(--accent); } .etq-input { padding: 6px 9px; min-width: 150px; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel-2); color: var(--text-1); font-size: 11.5px; outline: none; } .etq-cnt { padding: 1px 8px; border-radius: 10px; background: var(--panel-2); color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; } /* Apelido editável do dispositivo (DeviceNameField em detail.jsx). O sublinhado pontilhado sinaliza que dá para clicar, sem poluir o cabeçalho com um botão. */ .d-nome-edit { cursor: text; border-bottom: 1px dotted var(--text-3); } .d-nome-edit:hover { color: var(--text-1); border-bottom-color: var(--text-1); } .d-nome-input { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; min-width: 150px; color: var(--text-1); background: var(--panel-2); border: 1px solid var(--accent); border-radius: 4px; outline: none; } .drawer-body { overflow-y: auto; padding: 18px 20px 40px; flex: 1; display: flex; flex-direction: column; gap: 18px; } .section { } .section > .s-title { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .section > .s-title .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); } .section > .s-title .ic { color: var(--accent-bright); display: flex; } .section > .s-title .line { flex: 1; height: 1px; background: var(--border); } .card2 { background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; } /* key-value grid */ .kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; } .kv .k { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .kv .v { font-family: var(--font-mono); font-size: 12.5px; margin-top: 3px; word-break: break-all; } .kv .v.accent { color: var(--accent-bright); } /* progress (heap/flash) */ .prog { margin-bottom: 14px; } .prog:last-child { margin-bottom: 0; } .prog .pl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .prog .pl .name { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); } .prog .pl .val { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); } .prog .pl .val small { color: var(--text-3); } .bar { height: 9px; border-radius: 5px; background: var(--bg-2); overflow: hidden; } .bar > span { display: block; height: 100%; border-radius: 5px; background: var(--accent-grad); transition: width .4s; } .bar.warn > span { background: var(--warn-fill); } .bar.crit > span { background: var(--crit); } /* touch grid */ .touch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; } .touch-cell { background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 8px; text-align: center; position: relative; transition: border-color .2s, background .2s; } .touch-cell .tn { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); } .touch-cell .tv { font-family: var(--font-mono); font-size: 14px; font-weight: 600; margin-top: 3px; } .touch-cell .tbar { height: 3px; border-radius: 2px; background: var(--border-strong); margin-top: 7px; overflow: hidden; } .touch-cell .tbar > span { display: block; height: 100%; background: var(--accent); } .touch-cell.active { border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: var(--ok-soft); } .touch-cell.active .tv { color: var(--ok); } .touch-cell.active .tbar > span { background: var(--ok); } /* LED control */ .led-row { display: flex; gap: 16px; align-items: center; } .led-swatch { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--border-strong); flex-shrink: 0; position: relative; overflow: hidden; } .led-swatch.off { background: #0a0d18 !important; box-shadow: none !important; } .led-swatch.off::after { content: "OFF"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .led-info { flex: 1; } .led-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .color-dabs { display: flex; gap: 7px; flex-wrap: wrap; } .color-dab { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; transition: transform .1s; } .color-dab:hover { transform: scale(1.1); } .color-dab.sel { border-color: #fff; } /* Botão SECUNDÁRIO do DS (a variante base). Pill, alvo de toque 44px. * * ⚠️ O fundo é `--btn-face`, NÃO `--panel`. No tema claro `--panel` é branco * puro — o mesmo branco do card em que o botão quase sempre vive —, então um * botão com fundo `--panel` some dentro do painel e sobra só uma borda fina. * `--btn-face` é um degrau de cinza-azulado abaixo da superfície, e a borda * usa `--btn-edge` (mais forte que `--border`) para o contorno fechar mesmo * quando o botão cai sobre um fundo já acinzentado. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; line-height: 18px; padding: 9px 16px; min-height: 38px; border-radius: var(--bs-radius-pill); background: var(--btn-face); border: 1px solid var(--btn-edge); color: var(--text); transition: border-color var(--bs-dur-fast), background var(--bs-dur-fast), color var(--bs-dur-fast); } .btn:hover { border-color: #9DC0FF; background: var(--accent-soft); } .btn:active { background: var(--panel-hi); } /* .accent = botão PRIMÁRIO do DS: azul chapado, texto branco. Um por contexto. */ .btn.accent { background: var(--accent); border-color: transparent; color: #fff; } .btn.accent:hover { background: var(--accent-hover); border-color: transparent; } .btn.accent:active { background: var(--accent-deep); } /* .danger = destrutivo do DS */ .btn.danger { color: #fff; border-color: transparent; background: var(--crit); } .btn.danger:hover { background: var(--bs-error-dark); border-color: transparent; } .btn:disabled { opacity: 1; cursor: not-allowed; background: var(--disabled-bg); color: var(--disabled-fg); border-color: transparent; } /* chart window selector */ .win-sel { display: flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .win-sel button { background: none; border: none; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: 5px; } .win-sel button.active { background: var(--panel-hi); color: var(--text); } .chart-box { margin-top: 4px; } .chart-legend { display: flex; gap: 16px; margin-bottom: 2px; } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); } .chart-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } /* reset timeline */ .timeline { position: relative; padding-left: 18px; } .timeline::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--border); } .tl-item { position: relative; padding: 0 0 14px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -17px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--idle); border: 2px solid var(--bg); } .tl-item.anom::before { background: var(--crit); box-shadow: 0 0 8px var(--crit); } .tl-item .tl-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .tl-item .tl-reason { font-family: var(--font-mono); font-size: 11.5px; } .tl-item .tl-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 3px; } /* raw payload */ .raw { font-family: var(--font-mono); font-size: 11.5px; } .raw-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--grid-line); } .raw-row:last-child { border-bottom: none; } .raw-row .rk { color: var(--text-3); min-width: 150px; max-width: 150px; word-break: break-all; } .raw-row .rv { color: var(--text); word-break: break-all; } .raw-row .rv.bool-true { color: var(--ok); } .raw-row .rv.bool-false { color: var(--text-3); } .raw-row .rv.num { color: var(--accent-bright); } .raw-nest { padding-left: 14px; border-left: 1px solid var(--border); margin: 4px 0 4px 4px; } .raw-unknown { background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn-fill) 38%, transparent); border-radius: 8px; padding: 4px 10px; margin-top: 8px; } .raw-unknown .uhead { font-size: 10px; color: var(--warn); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 0; } .alert-banner { display: flex; gap: 11px; align-items: flex-start; background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 38%, transparent); border-radius: 11px; padding: 13px 15px; } .alert-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-fill) 38%, transparent); } .alert-banner .ab-ico { color: var(--crit); flex-shrink: 0; margin-top: 1px; } .alert-banner.warn .ab-ico { color: var(--warn); } .alert-banner .ab-title { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; margin-bottom: 3px; } .alert-banner .ab-body { font-size: 11.5px; color: var(--text-2); } /* toast */ .toasts { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: flex; flex-direction: column; gap: 9px; } .toast { background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 15px; min-width: 240px; font-family: var(--font-mono); font-size: 11.5px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); animation: toastin .25s cubic-bezier(.22,.7,.3,1); } @keyframes toastin { from { transform: translateX(20px); opacity: 0; } } .toast .t-ico { color: var(--accent-bright); display: flex; } .toast.ok .t-ico { color: var(--ok); } /* ============================================================ Tela Fazenda — auto-gestão pelo agente (fazenda.jsx) Tokens de desfecho, usados em toda a tela: tone-ok = o agente atuou / está tudo certo tone-wait = decidiu esperar (ex.: vem chuva) — NÃO é problema tone-warn = falta configuração (cultura) tone-bad = problema que o agente NÃO resolve sozinho tone-idle = sem novidade ============================================================ */ .farm-screen .card2 { margin-bottom: 14px; } /* ---- Card de culturas (faixas-alvo + o que cada faixa aciona) ---- Somente leitura: a fonte da verdade é Backend/src/farm/culturas.js, que chega pronto em GET /farm/areas. A tabela responde "por que 48% é seco no milho e ok na pastagem?" sem obrigar ninguém a abrir o código. */ .farm-culturas-wrap { overflow-x: auto; margin-top: 10px; } .farm-cult-tab { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 620px; } .farm-cult-tab th { text-align: left; padding: 7px 10px; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); } .farm-cult-tab td { padding: 8px 10px; color: var(--text-2); border-bottom: 1px solid var(--border); } .farm-cult-tab tr:last-child td { border-bottom: 0; } .farm-cult-tab td.num { font-family: var(--font-mono); white-space: nowrap; } .farm-cult-tab td.nota { color: var(--text-3); font-size: 11px; } .farm-cult-nome { color: var(--text); font-weight: 500; } /* Cultura que existe na fazenda agora: o operador olha primeiro para essas. */ .farm-cult-tab tr.plantada { background: var(--accent-soft); } .farm-cult-tab tr.plantada .farm-cult-nome { color: var(--accent-bright); } .farm-cult-aqui { margin-left: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-bright); } .farm-cult-legenda { margin-top: 14px; display: grid; gap: 9px; } .farm-cult-legenda > div { font-size: 11.5px; color: var(--text-2); line-height: 1.6; } .farm-cult-legenda strong { color: var(--text); } .farm-cult-legenda .farm-cult-chave { display: inline-block; min-width: 108px; color: var(--accent-bright); font-family: var(--font-mono); font-size: 11px; } .farm-cult-aviso { margin-top: 12px; padding: 9px 11px; border-radius: 8px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn-fill) 38%, transparent); color: var(--text-2); font-size: 11px; line-height: 1.55; } /* ---- Painel de controle ---- */ .farm-ctl-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .farm-ctl-field { display: flex; flex-direction: column; gap: 4px; } .farm-ctl-field .k { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); } .farm-ctl-hint { margin-top: 10px; font-size: 11px; color: var(--text-3); line-height: 1.5; } .farm-switch { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 9px; padding: 9px 14px; cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; } .farm-switch:hover { border-color: var(--border-strong); } .farm-switch .farm-switch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); } .farm-switch.on { background: var(--ok-soft); border-color: rgba(63,181,107,0.4); color: var(--ok); } .farm-switch.on .farm-switch-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .farm-weather { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); } .farm-weather-next { color: var(--text-3); } /* ---- Faixa de problemas (ação humana) ---- É o bloco de MAIOR prioridade de leitura da tela: são as áreas que o agente não resolve sozinho e que só saem do vermelho com alguém indo lá instalar o atuador que falta. Vermelho claro (não saturado) para chamar atenção sem competir com o texto, mais uma barra lateral que o olho pega na varredura. */ .farm-problemas { border-color: color-mix(in srgb, var(--crit) 38%, transparent); background: color-mix(in srgb, var(--crit) 38%, transparent); border-left: 3px solid var(--crit); /* Dois alfas DIFERENTES de propósito: aro fino discreto + brilho externo mais forte. Igualá-los transforma o aro numa borda dura. */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--crit) 12%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--crit) 45%, transparent); } .farm-problemas .farm-sec-title { color: #ffc4c7; } .farm-problemas .farm-sec-title svg { color: var(--crit); } .farm-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text); } .farm-prob { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--crit) 38%, transparent); } .farm-prob:first-of-type { border-top: none; } .farm-prob-head { display: flex; align-items: center; gap: 8px; font-size: 12px; } .farm-prob-body { color: var(--text-2); font-size: 11.5px; margin-top: 3px; line-height: 1.5; } .farm-prob-fix { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-family: var(--font-mono); font-size: 11px; color: #ffb0b4; } /* ---- Cards por área ---- */ .farm-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-bottom: 14px; } .farm-areas .card2 { margin-bottom: 0; } .farm-area { border-left: 3px solid var(--border); } .farm-area.tone-ok { border-left-color: var(--ok); } .farm-area.tone-wait { border-left-color: var(--accent); } .farm-area.tone-warn { border-left-color: var(--warn); } .farm-area.tone-bad { border-left-color: var(--crit); } .farm-area-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .farm-area-head strong { font-size: 12.5px; } .farm-chip { margin-left: 7px; padding: 2px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); } .farm-chip.vazio { color: var(--text-3); font-style: italic; } .farm-badge { padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; white-space: nowrap; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2); } .farm-badge.sm { font-size: 9.5px; padding: 2px 7px; } .farm-badge.tone-ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(63,181,107,0.35); } .farm-badge.tone-wait { background: var(--accent-soft); color: var(--accent-bright); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .farm-badge.tone-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(230,170,60,0.35); } .farm-badge.tone-bad { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 38%, transparent); } /* Leituras vs. faixa alvo */ .farm-leituras { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .farm-leitura { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); } .farm-leitura.fora { border-color: color-mix(in srgb, var(--crit) 38%, transparent); color: var(--crit); background: var(--crit-soft); } .farm-leitura-k { color: var(--text-3); } .farm-leitura-v { font-weight: 600; color: var(--text); } .farm-leitura.fora .farm-leitura-v { color: var(--crit); } .farm-leitura-alvo { color: var(--text-3); font-size: 10px; } /* Prestação de contas COISA POR COISA — o coração do card. */ .farm-acoes { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; } .farm-acao { display: flex; align-items: baseline; gap: 7px; font-size: 11px; flex-wrap: wrap; } .farm-acao-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--idle); flex: none; } .farm-acao.tone-ok .farm-acao-dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .farm-acao.tone-bad .farm-acao-dot { background: var(--crit); } .farm-acao-nome { color: var(--text); font-family: var(--font-mono); } .farm-acao-estado { color: var(--text-2); font-size: 10.5px; } .farm-acao.tone-ok .farm-acao-estado { color: var(--ok); } .farm-acao.tone-bad .farm-acao-estado { color: var(--crit); } .farm-acao-motivo { color: var(--text-3); font-size: 11px; font-style: italic; } .farm-sem-atuador { display: flex; align-items: center; gap: 6px; margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: var(--crit-soft); color: #ffb0b4; font-size: 11px; } .farm-area-just { color: var(--text-2); font-size: 11.5px; font-style: italic; line-height: 1.5; margin: 8px 0; padding-left: 9px; border-left: 2px solid var(--border); } .farm-area-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); } .farm-area-foot .btn.tiny { margin-left: auto; padding: 4px 9px; font-size: 10.5px; } /* ---- Diário ---- */ .farm-diario-filtros { display: flex; gap: 8px; margin-left: auto; align-items: center; } .farm-diario-filtros .txt-in { font-size: 11px; padding: 4px 8px; } .farm-diario-filtros .btn.tiny { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; font-size: 10.5px; } /* ---- Overlay "agente acionado" ---- Cobre só a área de conteúdo (a .page), NÃO a topnav: dá para navegar para outra tela enquanto o ciclo roda. `position: absolute` + a .page como contexto de posicionamento fazem exatamente esse recorte. */ .farm-screen { position: relative; } .farm-loading { position: absolute; inset: 0; z-index: 20; display: grid; place-items: start center; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: farmfade .18s ease-out; border-radius: 12px; } @keyframes farmfade { from { opacity: 0; } } .farm-loading-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 38px; text-align: center; /* Num ciclo longo a caixa acompanha a rolagem em vez de sumir da tela. */ position: sticky; top: 22vh; margin-top: 18vh; } .farm-loading-logo { position: relative; display: grid; place-items: center; } .farm-loading-logo img { height: 54px; width: auto; position: relative; z-index: 1; animation: farmpulse 1.9s ease-in-out infinite; } @keyframes farmpulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Anel girando atrás da logo — o sinal de "está acontecendo algo". */ .farm-loading-ring { position: absolute; width: 92px; height: 92px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent-bright); border-right-color: color-mix(in srgb, var(--accent) 30%, transparent); animation: farmspin 1.1s linear infinite; } @keyframes farmspin { to { transform: rotate(360deg); } } .farm-loading-titulo { margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-bright); } .farm-loading-etapa { font-size: 12px; color: var(--text-2); min-height: 19px; } /* Barra indeterminada: o backend devolve o ciclo inteiro de uma vez, então não existe progresso real para mostrar — fingir uma porcentagem seria mentira. */ .farm-loading-barra { width: 190px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--bg-2); margin-top: 4px; } .farm-loading-barra span { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); animation: farmslide 1.3s ease-in-out infinite; } @keyframes farmslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* Quem pediu menos animação no sistema recebe o overlay estático — a informação ("o agente foi acionado") não depende do movimento. */ @media (prefers-reduced-motion: reduce) { .farm-loading-logo img, .farm-loading-ring, .farm-loading-barra span { animation: none; } .farm-loading-ring { border-top-color: var(--accent); border-right-color: var(--accent); } .farm-loading-barra span { width: 100%; } } /* ---- Rodapé de paginação do diário ---- A lista abre com 10 ciclos; o resto vem por clique. A contagem fica sempre visível para "10 ciclos" não ser confundido com "só rodou 10 vezes". */ .farm-diario-mais { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); } .farm-diario-conta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-right: auto; } .farm-diario-mais .btn.tiny { padding: 4px 10px; font-size: 10.5px; } /* `ghost` não existe no botão base — definida aqui, no escopo do diário. */ .farm-diario-mais .btn.tiny.ghost { background: transparent; color: var(--text-3); } .farm-diario-mais .btn.tiny.ghost:hover { color: var(--text); border-color: var(--border-strong); } /* ---- Recorte por data (presets + intervalo livre) ---- */ .farm-diario-periodo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; } .farm-diario-periodo .seg button { font-size: 11px; padding: 5px 11px; } .farm-periodo-livre { display: flex; align-items: center; gap: 6px; } .farm-periodo-livre .k { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); } .farm-periodo-livre .txt-in { font-size: 11px; padding: 4px 8px; } /* O ícone nativo do date picker é escuro sobre fundo escuro nos temas dark. */ .farm-periodo-livre input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } .farm-tick { padding: 10px 0; border-top: 1px solid var(--border); } .farm-tick:first-of-type { border-top: none; } .farm-tick-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .farm-tick-head strong { color: var(--text); font-size: 11.5px; } .farm-linha { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 5px 0 5px 10px; border-left: 2px solid var(--border); font-size: 11.5px; margin-bottom: 2px; } .farm-linha.tone-ok { border-left-color: var(--ok); } .farm-linha.tone-wait { border-left-color: var(--accent); } .farm-linha.tone-warn { border-left-color: var(--warn); } .farm-linha.tone-bad { border-left-color: var(--crit); } .farm-linha-dot { display: none; } .farm-linha-area { color: var(--text); font-family: var(--font-mono); font-size: 11px; } .farm-linha-cult { color: var(--text-3); font-size: 11px; } .farm-linha-just { color: var(--text-2); flex: 1 1 260px; line-height: 1.5; font-size: 11.5px; } .farm-linha-acoes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; } .farm-mini { padding: 2px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-3); font-family: var(--font-mono); font-size: 10px; } .farm-mini.tone-ok { color: var(--ok); border-color: rgba(63,181,107,0.3); } .farm-mini.tone-bad { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 38%, transparent); } .farm-vazio { color: var(--text-3); font-size: 11.5px; padding: 14px 0; text-align: center; } /* ---- Erro de conexão com o gêmeo digital ---- */ .farm-erro { display: flex; gap: 12px; align-items: flex-start; color: var(--crit); } .farm-erro-msg { color: var(--text-2); font-size: 11.5px; margin-top: 4px; word-break: break-word; } .farm-erro-hint { color: var(--text-3); font-size: 11px; margin-top: 6px; } .farm-erro code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; } @media (max-width: 820px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } .nav-items { display: none; } .farm-areas { grid-template-columns: 1fr; } .farm-weather { margin-left: 0; } .farm-diario-filtros { margin-left: 0; flex-basis: 100%; } } /* ============================================================ ▼▼▼ GLASS — EFEITO VIDRO (REVERSÍVEL) ▼▼▼ PARA REVERTER: apague deste marcador até o FIM DO ARQUIVO. É um bloco contíguo e aditivo — nenhuma regra acima foi alterada, então remover isto devolve a interface ao estado chapado do DS. ⚠️ Por que existe, se o BlueShift DS proíbe "glass blur pesado": é um pedido explícito do produto, e o efeito aqui é LEVE (blur de 14px, superfície com 78% de tinta no claro). A proibição do DS mira o vidro pesado que come contraste de texto pequeno; abaixo, as superfícies de LEITURA DENSA continuam OPACAS de propósito — tabela, diário, tabela de culturas. Vidro só nas superfícies de moldura. ⚠️ O vidro precisa de algo ATRÁS para borrar. Num `--bg` chapado o backdrop-filter não teria o que fazer e o efeito seria invisível — por isso o body ganha dois radiais suaves na cor da marca. ============================================================ */ body { background-image: radial-gradient(900px 520px at 85% -10%, var(--glass-aura-1), transparent 60%), radial-gradient(760px 460px at -5% 8%, var(--glass-aura-2), transparent 55%); background-attachment: fixed; } /* Superfícies de MOLDURA: recebem vidro. */ .panel, .kpi, .card2, .dev-card, .drawer, .toast, .chat-window, .modal { background: color-mix(in srgb, var(--panel) var(--glass-fill), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* ⚠️ O drawer desliza da BORDA DIREITA e encosta nos quatro cantos: a borda de 1px em volta e a sombra centrada da regra acima não servem para ele. Recupera a borda só à esquerda e a sombra projetada para a esquerda — é o que o separa da página por trás. */ .drawer { border: none; border-left: 1px solid var(--glass-border); box-shadow: -30px 0 60px -20px rgba(5,10,32,.28); } [data-theme="dark"] .drawer { box-shadow: -30px 0 60px -20px rgba(0,0,0,.70); } /* Aresta superior iluminada: é o que faz a superfície parecer vidro em vez de plástico fosco. Só onde há `position` para o ::before ancorar. ⚠️ NUNCA incluir `.drawer`, `.chat-window` ou `.toast` nesta lista: os três já são `position: fixed` (ancorados na viewport) e `relative` os devolveria ao fluxo do documento. Foi exatamente isso que fez o drawer do Parque abrir no canto inferior esquerdo em vez de colado à direita. `fixed` já é um contexto de posicionamento — o ::before deles ancora sozinho. `.modal` É a exceção e entra na lista: ele é `static` dentro do `.modal-scrim` (que é o `fixed`), então sem `relative` o ::before dele escaparia e se esticaria sobre o scrim inteiro. */ .panel, .kpi, .card2, .dev-card, .modal { position: relative; } .panel::before, .kpi::before, .drawer::before, .chat-window::before, .modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-edge) 22%, var(--glass-edge) 78%, transparent); pointer-events: none; border-radius: inherit; } /* ⚠️ LEITURA DENSA fica OPACA. Texto pequeno sobre fundo borrado é exatamente onde glassmorphism falha — e são as telas em que o operador precisa ler número, não admirar efeito. */ .table-wrap, .farm-diario, .farm-culturas, .chat-body, .ota-log { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); } /* Quem pediu menos transparência no sistema recebe superfície opaca. */ @media (prefers-reduced-transparency: reduce) { .panel, .kpi, .card2, .dev-card, .drawer, .toast, .chat-window, .modal { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Navegador sem backdrop-filter: sem o blur, o translúcido vira sujeira ilegível. Melhor opaco. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .panel, .kpi, .card2, .dev-card, .drawer, .toast, .chat-window, .modal { background: var(--panel); } } /* ▲▲▲ FIM DO BLOCO GLASS ▲▲▲ */