/* ============================================================ SGO-UI · camada de refino visual (SOMENTE CSS, sem libs) Ativa apenas com → reversível. Não altera estrutura, dados, login nem permissões. ============================================================ */ .sgo-theme{ --sgo-card:#ffffff; --sgo-line:#e3e9f0; --sgo-ink:#0A2240; --sgo-muted:#62748a; --sgo-ok:#1F7A44; --sgo-okbg:#e7f4ec; --sgo-warn:#B7791F; --sgo-warnbg:#fbf3e2; --sgo-bad:#C0392B; --sgo-badbg:#fbeae8; --sgo-shadow:0 1px 2px rgba(16,34,64,.06), 0 2px 8px rgba(16,34,64,.07); --sgo-shadow-h:0 6px 18px rgba(16,34,64,.13); } /* leve profundidade no fundo (sem custo) */ .sgo-theme{ background:linear-gradient(180deg,#f4f7fb 0, #eef2f6 260px) !important; } /* ---- cartões mais elegantes ---- */ .sgo-theme .tile, .sgo-theme .row, .sgo-theme .stat, .sgo-theme .mural{ box-shadow:var(--sgo-shadow); border-color:var(--sgo-line); transition:box-shadow .18s ease, transform .12s ease, border-color .18s ease; } @media (hover:hover){ .sgo-theme .tile:hover, .sgo-theme .row:hover{ box-shadow:var(--sgo-shadow-h); transform:translateY(-1px); border-color:#d3deea; } } /* hierarquia: título de seção mais definido */ .sgo-theme .sect{ letter-spacing:.3px; opacity:.95; } /* ---- utilitários reutilizáveis (uso novo, opcional) ---- */ .sgo-chip{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px;padding:3px 10px;border-radius:20px;line-height:1.45} .sgo-chip.ok{background:var(--sgo-okbg);color:var(--sgo-ok)} .sgo-chip.warn{background:var(--sgo-warnbg);color:var(--sgo-warn)} .sgo-chip.bad{background:var(--sgo-badbg);color:var(--sgo-bad)} .sgo-bar{height:8px;border-radius:8px;background:#e7ecf2;overflow:hidden} .sgo-bar>i{display:block;height:100%;border-radius:8px;background:var(--sgo-ok);transition:width .5s ease} .sgo-bar.warn>i{background:var(--sgo-warn)} .sgo-bar.bad>i{background:var(--sgo-bad)} .sgo-alert{display:flex;gap:10px;align-items:flex-start;background:var(--sgo-badbg);border:1px solid #f1c9c3;border-left:4px solid var(--sgo-bad);border-radius:12px;padding:12px 14px;color:#7a2018;font-size:13px} .sgo-alert.warn{background:var(--sgo-warnbg);border-color:#ecd7a8;border-left-color:var(--sgo-warn);color:#7a5a12} .sgo-alert .ic{flex:0 0 auto;margin-top:1px} .sgo-kpi{background:var(--sgo-card);border:1px solid var(--sgo-line);border-radius:14px;padding:14px;box-shadow:var(--sgo-shadow);text-align:center} .sgo-kpi .v{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.5px} .sgo-kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--sgo-muted);margin-top:5px;font-weight:700} /* ---- microanimação de entrada (suave; respeita acessibilidade) ---- */ @media (prefers-reduced-motion:no-preference){ .sgo-theme .tile,.sgo-theme .row{animation:sgoIn .26s ease both} @keyframes sgoIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} } /* ============================================================ SGO-UI · camada "MARCANTE" (ainda só CSS, reversível) Reforça contraste, sombra, ícones e cor por tipo de ativo. ============================================================ */ /* sombra e respiro um grau acima nos cards */ .sgo-theme .tile, .sgo-theme .row{ box-shadow:0 2px 4px rgba(16,34,64,.05), 0 8px 20px rgba(16,34,64,.10); border-radius:18px; } .sgo-theme .tile{ padding:16px; } /* títulos de seção com mais presença + traço colorido à esquerda */ .sgo-theme .sect{ font-weight:800; color:#34465c; letter-spacing:.4px; display:flex; align-items:center; gap:8px; } .sgo-theme .sect::before{ content:""; width:4px; height:14px; border-radius:3px; background:#C0392B; display:inline-block; } /* ícones dos cards mais destacados */ .sgo-theme .tin{ font-size:15px; font-weight:800; letter-spacing:-.2px; } .sgo-theme .tile .ico, .sgo-theme .tile [class*="ico"]{ width:42px;height:42px;border-radius:12px; box-shadow:inset 0 0 0 1px rgba(16,34,64,.05); } /* ---- COR POR TIPO DE ATIVO (faixa superior + ícone tonal) ---- */ /* aplica-se a .tile que tenha um data-tipo OU classes utilitárias .t-ext / .t-hid / .t-cb / .t-vlv */ .sgo-theme .tile.t-ext,.sgo-theme .tile[data-tipo="extintor"]{ border-top:3px solid #C0392B; } .sgo-theme .tile.t-ext .ico,.sgo-theme .tile[data-tipo="extintor"] .ico{ background:#fbe9e8; } .sgo-theme .tile.t-hid,.sgo-theme .tile[data-tipo="hidrante"]{ border-top:3px solid #185FA5; } .sgo-theme .tile.t-hid .ico,.sgo-theme .tile[data-tipo="hidrante"] .ico{ background:#e7f0fa; } .sgo-theme .tile.t-cb,.sgo-theme .tile[data-tipo="casa_bomba"]{ border-top:3px solid #1F7A44; } .sgo-theme .tile.t-cb .ico,.sgo-theme .tile[data-tipo="casa_bomba"] .ico{ background:#e7f4ec; } .sgo-theme .tile.t-vlv,.sgo-theme .tile[data-tipo="valvula"]{ border-top:3px solid #B7791F; } .sgo-theme .tile.t-vlv .ico,.sgo-theme .tile[data-tipo="valvula"] .ico{ background:#fbf3e2; } /* linhas de gestão: ícone tonal + chevron mais visível */ .sgo-theme .row .rib, .sgo-theme .row [class*="rib"]{ width:40px;height:40px;border-radius:11px; } .sgo-theme .row .chev{ color:#9fb0c4; font-weight:800; } /* KPIs do topo com mais peso */ .sgo-theme .stat,.sgo-theme .sgo-kpi{ border-radius:14px; } .sgo-theme .stat .v,.sgo-theme .sgo-kpi .v{ font-size:27px; letter-spacing:-.6px; } /* faixa de status colorida nos KPIs (use .is-ok / .is-warn / .is-bad) */ .sgo-theme .stat.is-ok,.sgo-theme .sgo-kpi.is-ok{ box-shadow:inset 0 3px 0 #1F7A44, var(--sgo-shadow); } .sgo-theme .stat.is-warn,.sgo-theme .sgo-kpi.is-warn{ box-shadow:inset 0 3px 0 #B7791F, var(--sgo-shadow); } .sgo-theme .stat.is-bad,.sgo-theme .sgo-kpi.is-bad{ box-shadow:inset 0 3px 0 #C0392B, var(--sgo-shadow); } /* estado de toque mais nítido */ .sgo-theme .tile:active,.sgo-theme .row:active{ transform:scale(.985); } /* ---- barra de cobertura nos cards de ativo (X/Y) ---- */ .tcov{ margin-top:10px } .tcov .tcovl{ font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:#8aa0b8; font-weight:800 } .tcov .tcovn{ font-size:15px; font-weight:800; color:#0A2240; margin-top:1px; letter-spacing:-.3px } .tcov .tcovn small{ font-size:12px; color:#8aa0b8; font-weight:700 } .tcov .tcovbar{ height:7px; border-radius:7px; background:#eef1f5; overflow:hidden; margin-top:6px } .tcov .tcovbar>i{ display:block; height:100%; border-radius:7px; transition:width .5s ease }