/* Painel EFA — v2. Identidade real EFA (logo + vermelho da marca). Foco: tela inicial que aproxima resumo e prioridades, hierarquia clara e mobile que mostra a 1ª operação rápido. Movimento comunica mudança real e respeita prefers-reduced-motion. */ /* Paleta EFA: azul #3399FF (quadros de indicador), vermelho #ED1C24 (ênfase). Tema controlado por data-tema no : CLARO é o padrão (base :root); ESCURO só quando data-tema="escuro". Não depende de prefers-color-scheme, para abrir em claro quando não houver preferência salva. */ :root { --efa: #ED1C24; --efa-escuro: #C01018; --efa-suave: #FCE7E8; /* vermelho de ênfase */ --azul: #3399FF; --azul-escuro:#1F6FCC; --azul-quadro: #E7F1FE; /* fundo claro dos quadros de indicador (texto escuro) */ --azul-quadro-bd: #BBD8FB; --bg: #F2F5F9; --surface: #FFFFFF; --surface-2: #F7FAFD; --linha: #E2E7EE; --linha-forte: #C8D1DC; --txt: #13181F; --txt-2: #55606D; --txt-3: #869; --txt-3: #8A93A0; --ok:#127A57; --ok-bg:#E3F3ED; --alerta:#A96A10; --alerta-bg:#FBF0DF; --erro:#C4181F; --erro-bg:#FBE6E7; --neutro:#55606D; --neutro-bg:#EBEFF4; --info:#1F6FCC; --info-bg:#E7F1FE; --raio:12px; --raio-sm:8px; --sombra:0 1px 2px rgba(16,20,30,.05), 0 1px 3px rgba(16,20,30,.05); --sombra-fte:0 10px 34px rgba(16,20,30,.16); --dur:.16s; --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --barra-mobile:56px; } :root[data-tema="escuro"] { --efa:#FF5A60; --efa-escuro:#ED1C24; --efa-suave:#3A1618; --azul:#5AB0FF; --azul-escuro:#3399FF; --azul-quadro:#12283F; /* quadro azul escuro; texto claro no dark */ --azul-quadro-bd:#244B70; --bg:#0D1014; --surface:#161A20; --surface-2:#1A1F27; --linha:#242A33; --linha-forte:#333B46; --txt:#EBEDF0; --txt-2:#A6AEB9; --txt-3:#6B7280; --ok:#3FB88C; --ok-bg:#0F2A22; --alerta:#D8A24A; --alerta-bg:#2A2210; --erro:#FF6B6B; --erro-bg:#2B1413; --neutro:#A6AEB9; --neutro-bg:#1D222A; --info:#5AB0FF; --info-bg:#102942; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-fte:0 12px 36px rgba(0,0,0,.55); } * { box-sizing:border-box; } html,body { margin:0; height:100%; } body { font-family:var(--fonte); background:var(--bg); color:var(--txt); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; } button { font-family:inherit; } @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } } .app { display:flex; flex-direction:column; min-height:100%; } /* ---------- topo compacto ---------- */ .topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; padding:8px 16px; background:var(--surface); border-bottom:1px solid var(--linha); } .topbar img.simbolo { height:30px; width:auto; max-width:38px; object-fit:contain; display:block; flex:none; margin-right:2px; } .topbar .marca { display:flex; flex-direction:column; line-height:1.1; } .topbar .marca-nome { font-weight:750; font-size:14px; letter-spacing:.2px; color:var(--txt); } .topbar .marca-sub { font-size:9.5px; font-weight:700; letter-spacing:.9px; color:var(--txt-2); } .ctx { margin-left:10px; font-size:11.5px; color:var(--txt-2); display:flex; align-items:center; gap:6px; min-width:0; } .ctx .dot { width:7px;height:7px;border-radius:50%; background:var(--neutro); flex:none; } .ctx.amostra .dot{ background:var(--info);} .ctx.ok .dot{ background:var(--ok);} .ctx.stale .dot{ background:var(--alerta);} .ctx .sep { color:var(--txt-3); } .ctx .trunc-ctx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar .dir { margin-left:auto; display:flex; align-items:center; gap:8px; } .btn-i { border:1px solid var(--linha); background:var(--surface); color:var(--txt-2); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px; } .btn-i:hover { border-color:var(--linha-forte); color:var(--txt); } /* chip de tempo até encerramento por inatividade */ .inativ-chip { font-size:11px; font-weight:600; color:var(--txt-2); background:var(--surface-2); border:1px solid var(--linha); border-radius:999px; padding:5px 10px; font-variant-numeric:tabular-nums; white-space:nowrap; } .inativ-chip.alerta { color:var(--erro); border-color:color-mix(in srgb,var(--erro) 40%, transparent); background:var(--erro-bg); } /* abas desktop */ .tabs { display:flex; gap:2px; padding:0 12px; background:var(--surface); border-bottom:1px solid var(--linha); position:sticky; top:43px; z-index:20; } .tab { border:0; background:none; color:var(--txt-2); font-weight:600; font-size:13px; padding:11px 14px; cursor:pointer; border-bottom:2px solid transparent; } .tab.active { color:var(--efa); border-bottom-color:var(--efa); } .tab:hover { color:var(--txt); } main { padding:16px; max-width:1440px; width:100%; margin:0 auto; flex:1; padding-bottom:calc(16px + env(safe-area-inset-bottom)); } /* painel de apoio recolhível (detalhes técnicos/definições) */ .apoio { border:1px solid var(--linha); background:var(--surface-2); border-radius:var(--raio-sm); margin-bottom:14px; overflow:hidden; } .apoio > summary { cursor:pointer; padding:9px 12px; font-size:12px; color:var(--txt-2); font-weight:600; list-style:none; display:flex; align-items:center; gap:8px; } .apoio > summary::-webkit-details-marker{ display:none; } .apoio > summary::before { content:'ⓘ'; color:var(--txt-3); } .apoio .conteudo { padding:2px 14px 14px; font-size:12.5px; color:var(--txt-2); } .apoio .conteudo b { color:var(--txt); } .apoio .conteudo div { padding:3px 0; } /* ---------- tela inicial: resumo + prioridades juntos ---------- */ .home-grid { display:grid; grid-template-columns: 340px 1fr; gap:16px; align-items:start; } @media (max-width: 980px){ .home-grid{ grid-template-columns:1fr; } } /* resumo (coluna/estrofe compacta) */ .resumo-titulo { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--txt-2); font-weight:700; margin:2px 0 10px; } .kpi-lista { display:grid; gap:10px; } /* quadros de indicador em AZUL (texto escuro no claro / claro no escuro) */ .kpi { display:flex; align-items:center; gap:12px; background:var(--azul-quadro); border:1px solid var(--azul-quadro-bd); border-radius:var(--raio-sm); padding:12px 14px; cursor:pointer; text-align:left; width:100%; transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur); box-shadow:var(--sombra); } .kpi:hover { border-color:var(--azul); transform:translateY(-1px); box-shadow:var(--sombra-fte); } .kpi:focus-visible { outline:2px solid var(--azul); outline-offset:2px; } .kpi .barra { width:3px; align-self:stretch; border-radius:3px; background:var(--azul); flex:none; } .kpi.k-erro .barra{ background:var(--erro);} .kpi.k-alerta .barra{ background:var(--alerta);} .kpi.k-ok .barra{ background:var(--ok);} .kpi .txtwrap { min-width:0; flex:1; } .kpi .rot { font-size:12px; color:var(--txt); font-weight:650; } /* texto escuro sobre azul claro */ .kpi .sub { font-size:11px; color:var(--txt-2); } .kpi .val { font-size:25px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; margin-left:auto; color:var(--txt); } .kpi.k-erro .val{ color:var(--erro);} .kpi.k-alerta .val{ color:var(--alerta);} .kpi.k-ok .val{ color:var(--ok);} @keyframes pulseNum{ 0%{ color:var(--efa);} 100%{ color:inherit;} } .val.mudou{ animation:pulseNum 1s ease-out; } /* FAIXA de 6 indicadores (topo da Visão geral) — quadros azuis, texto escuro */ .kpi-faixa { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; } .kpiv { display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; width:100%; background:var(--azul-quadro); border:1px solid var(--azul-quadro-bd); border-radius:var(--raio-sm); padding:14px; box-shadow:var(--sombra); transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur); } .kpiv:hover { border-color:var(--azul); transform:translateY(-1px); box-shadow:var(--sombra-fte); } .kpiv:focus-visible { outline:2px solid var(--azul); outline-offset:2px; } .kpiv .rot { font-size:11.5px; font-weight:650; color:var(--txt); text-transform:uppercase; letter-spacing:.3px; } .kpiv .val { font-size:30px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; color:var(--txt); line-height:1.05; } .kpiv .sub { font-size:11px; color:var(--txt-2); } .kpiv.k-erro .val{ color:var(--erro);} .kpiv.k-alerta .val{ color:var(--alerta);} .kpiv.k-ok .val{ color:var(--ok);} @media (max-width: 1100px){ .kpi-faixa{ grid-template-columns:repeat(3,1fr); } } @media (max-width: 560px){ .kpi-faixa{ grid-template-columns:repeat(2,1fr); gap:10px; } .kpiv{ padding:12px; } .kpiv .val{ font-size:26px; } } /* KPI grande de destaque no topo (o que exige atenção) */ .kpi-hero { grid-column:1 / -1; } /* lista de prioridades (coluna direita na home) */ .prio-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .prio-head h2 { font-size:14px; margin:0; } .prio-head .link { font-size:12px; color:var(--efa); font-weight:600; background:none; border:0; cursor:pointer; } .op-lista { display:flex; flex-direction:column; gap:8px; } .op { display:grid; grid-template-columns: 74px 1fr auto; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--linha); border-left:3px solid var(--neutro); border-radius:var(--raio-sm); padding:10px 12px; cursor:pointer; box-shadow:var(--sombra); transition:transform var(--dur), border-color var(--dur); } .op:hover { transform:translateY(-1px); border-color:var(--linha-forte); } .op.alterada { box-shadow:0 0 0 2px color-mix(in srgb,var(--efa) 30%, transparent); } .op.s-erro{ border-left-color:var(--erro);} .op.s-alerta{ border-left-color:var(--alerta);} .op.s-ok{ border-left-color:var(--ok);} .op.s-neutro{ border-left-color:var(--neutro);} .op .id { font-family:var(--mono); font-weight:700; font-size:13px; } .op .id small { display:block; font-weight:500; color:var(--txt-3); font-size:10px; } .op .mid { min-width:0; } .op .cli { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .op .sub { font-size:11.5px; color:var(--txt-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .op .right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .op .prazo { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; } .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:650; white-space:nowrap; } .b-erro{ background:var(--erro-bg); color:var(--erro);} .b-alerta{ background:var(--alerta-bg); color:var(--alerta);} .b-ok{ background:var(--ok-bg); color:var(--ok);} .b-neutro{ background:var(--neutro-bg); color:var(--neutro);} .b-info{ background:var(--info-bg); color:var(--info);} .lacuna { color:var(--txt-3); font-style:italic; } .aviso-inline { font-size:11px; color:var(--alerta); background:var(--alerta-bg); border-radius:6px; padding:1px 6px; } /* ---------- página de prioridades (tabela desktop) ---------- */ .filtros { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 12px; } .filtros input[type=search], .filtros select { border:1px solid var(--linha); background:var(--surface); color:var(--txt); border-radius:8px; padding:8px 10px; font-size:13px; } .chip-filtro { display:inline-flex; align-items:center; gap:6px; background:var(--efa-suave); color:var(--efa-escuro); border:1px solid color-mix(in srgb,var(--efa) 30%, transparent); border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600; } .chip-filtro button { border:0; background:none; color:inherit; cursor:pointer; font-size:14px; line-height:1; } .tabela-wrap { background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); } table.grid { width:100%; border-collapse:collapse; font-size:13px; } table.grid th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--txt-2); padding:10px 12px; border-bottom:1px solid var(--linha); background:var(--surface-2); position:sticky; top:0; } table.grid td { padding:10px 12px; border-bottom:1px solid var(--linha); vertical-align:top; } table.grid tr { cursor:pointer; transition:background var(--dur); } table.grid tbody tr:hover { background:var(--surface-2); } table.grid tr.alterada { background:color-mix(in srgb,var(--efa) 6%, transparent); } .mono { font-family:var(--mono); font-size:12.5px; } .trunc { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* cards (mobile prioridades) reaproveitam .op */ .secao-titulo { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--txt-2); font-weight:700; margin:18px 0 10px; } .cards-mobile { display:none; } /* no desktop, só a tabela */ /* ---------- detalhe (drawer desktop / tela cheia mobile) ---------- */ .overlay { position:fixed; inset:0; background:rgba(10,14,20,.42); opacity:0; pointer-events:none; transition:opacity var(--dur); z-index:40; } .overlay.aberto { opacity:1; pointer-events:auto; } .drawer { position:fixed; top:0; right:0; height:100%; width:min(460px,94vw); background:var(--surface); border-left:1px solid var(--linha); box-shadow:var(--sombra-fte); transform:translateX(100%); transition:transform var(--dur); z-index:41; overflow-y:auto; } .drawer.aberto { transform:translateX(0); } .drawer header { position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--linha); padding:14px 16px; display:flex; align-items:center; gap:10px; } .drawer header .fechar { margin-left:auto; border:0; background:var(--surface-2); border-radius:8px; padding:6px 11px; cursor:pointer; font-size:16px; } .drawer .corpo { padding:4px 16px 24px; } .det-bloco { margin-top:16px; } .det-bloco h4 { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--txt-2); margin:0 0 8px; } .det-linha { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dotted var(--linha); font-size:13px; } .det-linha .k { color:var(--txt-2); } .det-linha .v { text-align:right; font-weight:600; } .det-nota { font-size:11px; color:var(--txt-3); padding:4px 0; } .timeline { list-style:none; margin:0; padding:0; } .timeline li { padding:8px 0 8px 16px; border-left:2px solid var(--linha); position:relative; font-size:12.5px; } .timeline li::before { content:''; position:absolute; left:-5px; top:12px; width:8px;height:8px;border-radius:50%; background:var(--linha-forte); } .timeline li:first-child::before { background:var(--efa); } /* login */ .login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; position:relative; /* fundo: frota EFA + skyline. cover não distorce (mantém proporção, pode recortar). */ /* left top preserva o logotipo EFA (canto sup-esq) no desktop e no celular, onde o cover recorta as laterais. cover mantém a proporção (sem distorção). */ background:#0a1a2f url('assets/login_bg.jpg') left top / cover no-repeat; } /* camada escura leve só para legibilidade do card */ .login-wrap::before { content:''; position:absolute; inset:0; background:rgba(8,14,26,.38); } .login-wrap > .login-card { position:relative; z-index:1; } .login-card { background:var(--surface); border:1px solid var(--linha); border-radius:16px; padding:30px; width:min(360px,92vw); box-shadow:var(--sombra-fte); } .login-card img.logo { height:34px; margin-bottom:18px; } .login-card h1 { font-size:18px; margin:6px 0 4px; } .login-card p { color:var(--txt-2); font-size:13px; margin:0 0 16px; } .login-card label { font-size:12px; color:var(--txt-2); font-weight:600; display:block; margin:12px 0 5px; } .login-card input { width:100%; padding:10px 12px; border:1px solid var(--linha); border-radius:9px; font-size:14px; background:var(--surface-2); color:var(--txt); } .login-card button { width:100%; margin-top:18px; background:var(--efa); color:#fff; border:0; border-radius:9px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; } .login-card button:hover { background:var(--efa-escuro); } .login-erro { color:var(--erro); font-size:12.5px; margin-top:10px; min-height:16px; } /* campo de senha com botão mostrar/ocultar. O wrapper envolve SOMENTE o input; o botão é posicionado em relação a ele. O botão zera explicitamente tudo que o estilo global .login-card button injeta (margin/width/background/padding), evitando deslocamento e o bloco branco. Sem margens negativas nem coordenadas de página. */ .login-card .campo-senha { position:relative; display:block; } .login-card .campo-senha input { padding-right:42px; } /* reserva espaço p/ a senha não ficar sob o botão */ .login-card .campo-senha .olho { position:absolute; top:0; bottom:0; right:0; margin:0 !important; /* ancora à altura do input, centraliza sem depender do label */ width:40px; min-width:0; height:auto; /* área de toque confortável */ display:flex; align-items:center; justify-content:center; background:transparent !important; border:0 !important; border-radius:0 9px 9px 0; color:var(--txt-3); cursor:pointer; padding:0 !important; font:inherit; box-shadow:none; -webkit-appearance:none; appearance:none; } .login-card .campo-senha .olho:hover { color:var(--txt); background:transparent !important; } .login-card .campo-senha .olho:focus-visible { outline:2px solid var(--azul); outline-offset:-2px; } .login-card .campo-senha .olho svg { display:block; width:18px; height:18px; } /* evita o controle de revelação nativo do navegador (dois olhos sobrepostos) */ .login-card .campo-senha input::-ms-reveal, .login-card .campo-senha input::-ms-clear { display:none; } .login-card .link-reset { width:auto; background:none; color:var(--txt-2); border:0; padding:0; margin-top:14px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center; display:block; margin-left:auto; margin-right:auto; } .login-card .link-reset:hover { color:var(--efa); background:none; } .estado { text-align:center; color:var(--txt-2); padding:40px 20px; } .estado .big { font-size:15px; font-weight:600; color:var(--txt); } /* ---------- mapa São Paulo ---------- */ .mapa-box { background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); } .mapa { height:360px; width:100%; background:var(--surface-2); } .mapa-nota { font-size:11.5px; color:var(--txt-2); padding:8px 12px; border-top:1px solid var(--linha); background:var(--surface-2); } .mapa-off { height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--txt-2); text-align:center; padding:20px; } .mapa-off-ic { font-size:34px; opacity:.5; } .mapa-off-sub { font-size:12px; color:var(--txt-3); max-width:360px; } /* garante legibilidade dos controles do Leaflet nos dois temas */ .leaflet-container { background:var(--surface-2)!important; font:inherit; } :root[data-tema="escuro"] .leaflet-tile { filter:brightness(.85) contrast(1.05); } .leaflet-control-attribution { font-size:10px!important; } /* barra de navegação inferior (mobile) */ .navbar-mobile { display:none; } /* ---------- responsivo ---------- */ @media (max-width: 820px){ main { padding:12px 12px calc(var(--barra-mobile) + 12px); } .tabs { display:none; } /* navegação vai para a barra inferior */ .home-grid { gap:12px; } .kpi-lista { grid-template-columns:1fr 1fr; display:grid; } /* resumo compacto 2 col */ .kpi { padding:9px 11px; gap:8px; } .kpi .val { font-size:20px; } .kpi .sub { display:none; } /* economiza altura: 1ª operação sobe */ .prio-head { margin-top:4px; } .tabela-wrap { display:none; } .cards-mobile { display:block; } /* no mobile, cards no lugar da tabela */ .drawer { width:100vw; border-left:0; } .topbar { padding:7px 12px; } .topbar img.logo { height:22px; } /* cabeçalho mobile: mantém origem + período (data), oculta só o frescor redundante ("Amostra") e reduz para caber sem truncar feio */ .topbar { gap:8px; flex-wrap:wrap; } .topbar .marca-sub { display:none; } /* "PAINEL OPERACIONAL" some no mobile p/ ganhar espaço */ .ctx { flex-basis:100%; margin-left:0; order:5; font-size:11px; } .ctx .trunc-ctx { max-width:none; } .ctx > :last-child, .ctx > :nth-last-child(2) { display:none; } /* oculta frescor redundante */ .navbar-mobile { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:35; background:var(--surface); border-top:1px solid var(--linha); padding-bottom:env(safe-area-inset-bottom); } .navbar-mobile button { flex:1; border:0; background:none; color:var(--txt-3); font-size:10.5px; font-weight:600; padding:8px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; } .navbar-mobile button .ic { font-size:17px; line-height:1; } .navbar-mobile button.active { color:var(--efa); } } @media (max-width: 400px){ .kpi-lista{ grid-template-columns:1fr 1fr; } }