/* ============================================================ Maestro Viabilidade — design inspirado no Linear.app Tema escuro near-black, hairlines, acento indigo + cores por estágio, tipografia Inter e micro-animações. Classes: nome-da-classe. ============================================================ */ :root { --bg: #08090a; --bg-elev: #0f1011; --surface: #141517; --surface-2: #1a1b1e; --surface-hover: #1f2023; --linha: rgba(255,255,255,0.08); --linha-forte: rgba(255,255,255,0.13); --texto: #f7f8f8; --texto-2: #8a8f98; --texto-3: #62666d; --acento: #5e6ad2; --acento-claro: #6e79de; --acento-bg: rgba(94,106,210,0.14); --perigo: #eb5757; --ok: #4cb782; /* cores por estágio */ --pros: #d6a23a; /* Prospecção - âmbar */ --apro: #3aa0d6; /* Aprovação - azul */ --impl: #7b5cd6; /* Implantação - roxo */ --receb: #4cb782; /* Recebimento - verde */ --raio: 10px; --raio-sm: 8px; --raio-lg: 14px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --sombra: 0 2px 4px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.35); --sombra-flutua: 0 12px 32px rgba(0,0,0,0.45); } /* ---------------- Tema claro (data-tema="claro" no ) ---------------- */ html[data-tema="claro"] { --bg: #f4f5f8; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #f0f1f4; --surface-hover: #e8eaef; --linha: rgba(20,24,40,0.10); --linha-forte: rgba(20,24,40,0.18); --texto: #1b1d22; --texto-2: #5a5f6a; --texto-3: #8a8f99; --acento-bg: rgba(94,106,210,0.12); --sombra: 0 2px 4px rgba(25,30,50,0.08), 0 8px 24px rgba(25,30,50,0.10); --sombra-flutua: 0 12px 32px rgba(25,30,50,0.18); } html[data-tema="claro"] body::before { background: radial-gradient(900px 500px at 80% -8%, rgba(94,106,210,0.07), transparent 60%), radial-gradient(700px 500px at 4% 2%, rgba(76,183,130,0.05), transparent 55%); } html[data-tema="claro"] .viab-topbar { background: rgba(255,255,255,0.78); } html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: rgba(20,24,40,0.18); background-clip: padding-box; } html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover { background: rgba(20,24,40,0.3); background-clip: padding-box; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 80% -8%, rgba(94,106,210,0.10), transparent 60%), radial-gradient(700px 500px at 4% 2%, rgba(76,183,130,0.05), transparent 55%); } #app { height: 100%; } a { color: var(--acento-claro); text-decoration: none; } h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 600; margin: 0; } /* O FocusOnNavigate foca o h1 da rota; remove o contorno do foco programatico. */ h1:focus, h2:focus, h3:focus, [tabindex="-1"]:focus { outline: none; } input, select, textarea, button { font-family: inherit; } /* ---------------- Botões ---------------- */ .viab-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, var(--acento-claro), var(--acento)); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--raio-sm); padding: 9px 15px; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 14px rgba(94,106,210,0.32); transition: filter .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease); } .viab-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .viab-btn-primary:active { transform: translateY(0); } .viab-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .viab-btn-primary.pequeno { padding: 6px 11px; font-size: 12.5px; } .viab-btn-primary.pros { background: linear-gradient(180deg, #e0b252, var(--pros)); box-shadow: 0 4px 14px rgba(214,162,58,0.32); } .viab-btn-primary.apro { background: linear-gradient(180deg, #54b1e2, var(--apro)); box-shadow: 0 4px 14px rgba(58,160,214,0.32); } .viab-btn-primary.impl { background: linear-gradient(180deg, #8e72e0, var(--impl)); box-shadow: 0 4px 14px rgba(123,92,214,0.32); } .viab-btn-primary.receb { background: linear-gradient(180deg, #5fc795, var(--receb)); box-shadow: 0 4px 14px rgba(76,183,130,0.32); } .viab-btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); padding: 8px 13px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease); } .viab-btn-ghost:hover { background: var(--surface-hover); border-color: rgba(255,255,255,0.2); } .viab-btn-ghost.pequeno { padding: 5px 10px; font-size: 12.5px; } .viab-btn-ghost:disabled { opacity: .5; cursor: not-allowed; } .viab-btn-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--texto-2); cursor: pointer; border-radius: 6px; width: 28px; height: 28px; font-size: 13px; transition: background .12s var(--ease), color .12s var(--ease); } .viab-btn-icon:hover { background: var(--surface-hover); color: var(--texto); } .viab-btn-icon.perigo:hover { background: rgba(235,87,87,0.14); color: #ff8585; } /* ---------------- Shell / topbar ---------------- */ .viab-shell { display: flex; flex-direction: column; min-height: 100vh; } .viab-topbar { display: flex; align-items: center; gap: 24px; padding: 0 22px; height: 54px; border-bottom: 1px solid var(--linha); background: rgba(8,9,10,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 40; } .viab-topbar-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--texto); } .viab-logo { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--acento-claro), var(--acento)); color: #fff; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 12px rgba(94,106,210,0.4); } .viab-brand-texto strong { font-weight: 600; } .viab-topbar-nav { display: flex; gap: 4px; flex: 1; } .viab-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 7px; color: var(--texto-2); font-size: 13px; font-weight: 500; transition: background .12s var(--ease), color .12s var(--ease); } .viab-nav-link:hover { background: var(--surface-hover); color: var(--texto); } .viab-nav-link.ativo { background: var(--acento-bg); color: var(--texto); } .viab-topbar-user { display: flex; align-items: center; gap: 12px; } .viab-user-nome { color: var(--texto-2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .viab-main { flex: 1; padding: 26px 28px 56px; max-width: 1320px; width: 100%; margin: 0 auto; } /* ---------------- Login ---------------- */ .login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .login-aside { position: relative; display: flex; align-items: center; padding: 48px; background: radial-gradient(700px 500px at 30% 20%, rgba(94,106,210,0.22), transparent 60%), var(--bg-elev); border-right: 1px solid var(--linha); overflow: hidden; } .login-aside::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 400px at 80% 90%, rgba(76,183,130,0.12), transparent 60%); } .login-aside-conteudo { position: relative; max-width: 420px; } .login-aside-logo { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: linear-gradient(180deg, var(--acento-claro), var(--acento)); box-shadow: 0 8px 24px rgba(94,106,210,0.45); margin-bottom: 24px; } .login-aside-conteudo h2 { font-size: 30px; line-height: 1.2; margin-bottom: 14px; } .login-aside-conteudo p { color: var(--texto-2); font-size: 15px; line-height: 1.6; margin-bottom: 26px; } .login-aside-pipeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .login-aside-pipeline li { display: flex; align-items: center; gap: 11px; color: var(--texto); font-weight: 500; } .login-aside-pipeline .ponto { width: 11px; height: 11px; border-radius: 50%; } .ponto.pros { background: var(--pros); box-shadow: 0 0 12px var(--pros); } .ponto.apro { background: var(--apro); box-shadow: 0 0 12px var(--apro); } .ponto.impl { background: var(--impl); box-shadow: 0 0 12px var(--impl); } .ponto.receb { background: var(--receb); box-shadow: 0 0 12px var(--receb); } .login-painel { display: flex; align-items: center; justify-content: center; padding: 40px; } .login-card { width: 100%; max-width: 360px; } .login-titulo { font-size: 24px; } .login-sub { color: var(--texto-2); margin: 8px 0 28px; font-size: 14px; } .login-campo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; background: var(--bg-elev); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); padding: 0 13px; transition: border-color .14s var(--ease), box-shadow .14s var(--ease); } .login-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); } .login-campo i { color: var(--texto-3); font-size: 13px; } .login-input { flex: 1; background: transparent; border: none; outline: none; color: var(--texto); padding: 12px 0; font-size: 14px; } .login-input::placeholder { color: var(--texto-3); } .login-btn { width: 100%; justify-content: center; margin-top: 10px; padding: 12px; } .login-erro { background: rgba(235,87,87,0.12); color: #ff9a9a; border: 1px solid rgba(235,87,87,0.3); border-radius: var(--raio-sm); padding: 10px; margin: 6px 0 12px; font-size: 12.5px; } /* ---------------- Cabeçalho de página ---------------- */ .pagina-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .pagina-titulo { font-size: 22px; display: flex; align-items: center; gap: 11px; } .pagina-titulo i { color: var(--acento-claro); font-size: 19px; } .pagina-sub { color: var(--texto-2); font-size: 13.5px; margin-top: 6px; } /* ---------------- Filtros por estágio ---------------- */ .filtros-estagio { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; } .filtro-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 20px; background: var(--surface); border: 1px solid var(--linha); color: var(--texto-2); cursor: pointer; font-size: 12.5px; font-weight: 500; transition: all .14s var(--ease); } .filtro-chip:hover { background: var(--surface-hover); color: var(--texto); } .filtro-chip.ativo { color: var(--texto); border-color: var(--linha-forte); background: var(--surface-2); } .filtro-chip .filtro-num { font-weight: 700; color: var(--texto); } .filtro-bolinha { width: 9px; height: 9px; border-radius: 50%; } .filtro-bolinha.pros, .filtro-chip.pros.ativo { box-shadow: none; } .filtro-bolinha.pros { background: var(--pros); } .filtro-chip.pros.ativo { border-color: var(--pros); } .filtro-bolinha.apro { background: var(--apro); } .filtro-chip.apro.ativo { border-color: var(--apro); } .filtro-bolinha.impl { background: var(--impl); } .filtro-chip.impl.ativo { border-color: var(--impl); } .filtro-bolinha.receb { background: var(--receb); } .filtro-chip.receb.ativo { border-color: var(--receb); } .filtro-busca { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 240px; background: var(--surface); border: 1px solid var(--linha-forte); border-radius: 20px; padding: 0 14px; } .filtro-busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); } .filtro-busca i { color: var(--texto-3); } .filtro-busca input { flex: 1; background: transparent; border: none; outline: none; color: var(--texto); padding: 9px 0; font-size: 13px; } /* ---------------- Grid de terrenos ---------------- */ .terrenos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .terreno-card { position: relative; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 18px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 12px; transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); } .terreno-card:hover { background: var(--surface-2); border-color: var(--linha-forte); transform: translateY(-3px); box-shadow: var(--sombra); } .terreno-card-faixa { position: absolute; top: 0; left: 0; right: 0; height: 3px; } .terreno-card-faixa.pros { background: var(--pros); } .terreno-card-faixa.apro { background: var(--apro); } .terreno-card-faixa.impl { background: var(--impl); } .terreno-card-faixa.receb { background: var(--receb); } .terreno-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .terreno-tipo { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .terreno-card-nome { font-size: 16px; font-weight: 600; line-height: 1.3; } .terreno-card-local { display: flex; align-items: center; gap: 7px; color: var(--texto-2); font-size: 12.5px; } .terreno-card-local i { color: var(--texto-3); font-size: 11px; } .terreno-mini-pipeline { display: flex; gap: 4px; } .mini-step { height: 4px; flex: 1; border-radius: 3px; background: var(--surface-hover); transition: background .2s var(--ease); } .mini-step.preenchido.pros { background: var(--pros); } .mini-step.preenchido.apro { background: var(--apro); } .mini-step.preenchido.impl { background: var(--impl); } .mini-step.preenchido.receb { background: var(--receb); } .terreno-card-kpis { display: flex; gap: 10px; } .mini-kpi { flex: 1; background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 8px 10px; } .mini-kpi-label { display: block; font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .mini-kpi-valor { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; } /* ---------------- Badge de estágio ---------------- */ .estagio-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 16px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; } .estagio-badge.pros { background: rgba(214,162,58,0.14); color: #e9bd6a; border-color: rgba(214,162,58,0.3); } .estagio-badge.apro { background: rgba(58,160,214,0.14); color: #74bfeb; border-color: rgba(58,160,214,0.3); } .estagio-badge.impl { background: rgba(123,92,214,0.16); color: #a48ce8; border-color: rgba(123,92,214,0.3); } .estagio-badge.receb { background: rgba(76,183,130,0.14); color: #6fd3a3; border-color: rgba(76,183,130,0.3); } /* ---------------- Estado vazio ---------------- */ .estado-vazio { text-align: center; padding: 60px 24px; border-radius: var(--raio-lg); color: var(--texto-2); background: var(--surface); border: 1px solid var(--linha); } .estado-vazio i { font-size: 32px; color: var(--texto-3); display: block; margin-bottom: 14px; } .estado-vazio p { margin: 0 0 18px; font-size: 14px; } /* ---------------- Página do terreno ---------------- */ .voltar-link { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; font-weight: 500; margin-bottom: 16px; } .voltar-link:hover { color: var(--texto); } .terreno-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-radius: var(--raio-lg); border: 1px solid var(--linha); position: relative; overflow: hidden; background: var(--surface); margin-bottom: 16px; } .terreno-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .terreno-header.pros::before { background: var(--pros); } .terreno-header.apro::before { background: var(--apro); } .terreno-header.impl::before { background: var(--impl); } .terreno-header.receb::before { background: var(--receb); } .terreno-header::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; } .terreno-header.pros::after { background: radial-gradient(420px 180px at 100% 0, rgba(214,162,58,0.10), transparent 70%); } .terreno-header.apro::after { background: radial-gradient(420px 180px at 100% 0, rgba(58,160,214,0.10), transparent 70%); } .terreno-header.impl::after { background: radial-gradient(420px 180px at 100% 0, rgba(123,92,214,0.12), transparent 70%); } .terreno-header.receb::after { background: radial-gradient(420px 180px at 100% 0, rgba(76,183,130,0.10), transparent 70%); } .terreno-header-info { position: relative; z-index: 1; } .terreno-header-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .terreno-dias { color: var(--texto-2); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .terreno-titulo { font-size: 26px; line-height: 1.2; } .terreno-local { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; margin-top: 8px; flex-wrap: wrap; } .terreno-area-chip { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: 14px; padding: 2px 10px; font-size: 12px; color: var(--texto); } .terreno-header-acoes { position: relative; z-index: 1; display: flex; gap: 8px; } /* ---------------- Painel genérico ---------------- */ .painel { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 18px 20px; margin-bottom: 16px; } .painel-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 14px; } .painel-titulo > span:first-child { display: inline-flex; align-items: center; gap: 9px; } .painel-titulo i { color: var(--acento-claro); } .painel-ajuda { color: var(--texto-2); font-size: 12.5px; margin: -6px 0 12px; } .painel-vazio { color: var(--texto-2); font-size: 13px; padding: 16px; text-align: center; background: var(--bg-elev); border: 1px dashed var(--linha-forte); border-radius: var(--raio); } .painel-tag { font-size: 11px; padding: 2px 9px; border-radius: 12px; font-weight: 600; } .painel-tag.ok { background: rgba(76,183,130,0.14); color: #6fd3a3; } .painel-pipeline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* ---------------- Pipeline stepper ---------------- */ .pipeline { display: flex; align-items: center; flex: 1; min-width: 280px; } .pipeline-step { display: flex; align-items: center; gap: 11px; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: var(--raio); transition: opacity .14s var(--ease); } .pipeline-step:disabled { cursor: default; } .pipeline-step.futuro { opacity: .5; } .pipeline-step:not(:disabled):hover { opacity: 1; } .pipeline-bolha { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--surface-2); border: 1px solid var(--linha-forte); color: var(--texto-2); transition: all .18s var(--ease); } .pipeline-step.atual .pipeline-bolha.pros { background: var(--pros); color: #1a1407; border-color: var(--pros); box-shadow: 0 0 0 4px rgba(214,162,58,0.18); } .pipeline-step.atual .pipeline-bolha.apro { background: var(--apro); color: #06131c; border-color: var(--apro); box-shadow: 0 0 0 4px rgba(58,160,214,0.18); } .pipeline-step.atual .pipeline-bolha.impl { background: var(--impl); color: #fff; border-color: var(--impl); box-shadow: 0 0 0 4px rgba(123,92,214,0.18); } .pipeline-step.atual .pipeline-bolha.receb { background: var(--receb); color: #04130c; border-color: var(--receb); box-shadow: 0 0 0 4px rgba(76,183,130,0.18); } .pipeline-step.concluido .pipeline-bolha { background: var(--surface-2); color: var(--ok); border-color: rgba(76,183,130,0.4); } .pipeline-rotulo { display: flex; flex-direction: column; text-align: left; } .pipeline-passo { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .pipeline-nome { font-size: 13.5px; font-weight: 600; } .pipeline-conector { flex: 1; height: 2px; background: var(--linha-forte); margin: 0 6px; min-width: 18px; border-radius: 2px; } .pipeline-conector.preenchido { background: linear-gradient(90deg, var(--ok), var(--linha-forte)); } .viab-btn-avancar { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--raio-sm); border: 1px solid var(--linha-forte); background: var(--surface-2); color: var(--texto); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s var(--ease); } .viab-btn-avancar:hover { transform: translateY(-1px); } .viab-btn-avancar.apro:hover { border-color: var(--apro); color: #74bfeb; } .viab-btn-avancar.impl:hover { border-color: var(--impl); color: #a48ce8; } .viab-btn-avancar.receb:hover { border-color: var(--receb); color: #6fd3a3; } /* ---------------- Layout do conteúdo do terreno ---------------- */ .terreno-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; } .terreno-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .terreno-coluna-lateral { position: sticky; top: 70px; } /* ---------------- Bloco de estágio ---------------- */ .estagio-bloco { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 20px 22px; } .estagio-cabecalho { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-left: 14px; position: relative; } .estagio-cabecalho::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 3px; } .estagio-cabecalho.pros::before { background: var(--pros); } .estagio-cabecalho.apro::before { background: var(--apro); } .estagio-cabecalho.impl::before { background: var(--impl); } .estagio-cabecalho.receb::before { background: var(--receb); } .estagio-cabecalho h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; } .estagio-cabecalho.pros h2 i { color: var(--pros); } .estagio-cabecalho.apro h2 i { color: var(--apro); } .estagio-cabecalho.impl h2 i { color: var(--impl); } .estagio-cabecalho.receb h2 i { color: var(--receb); } .estagio-cabecalho p { color: var(--texto-2); font-size: 12.5px; margin-top: 4px; } /* ---------------- KPIs ---------------- */ .kpis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .kpis-cenario { margin-bottom: 16px; } .kpi { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio); padding: 13px 14px; position: relative; overflow: hidden; transition: border-color .14s var(--ease), transform .14s var(--ease); } .kpi:hover { transform: translateY(-2px); border-color: var(--linha-forte); } .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--texto-3); opacity: .6; } .kpi.pros::before { background: var(--pros); } .kpi.apro::before { background: var(--apro); } .kpi.impl::before { background: var(--impl); } .kpi.receb::before { background: var(--receb); } .kpi.ok::before { background: var(--ok); } .kpi.perigo::before { background: var(--perigo); } .kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi-label { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .kpi-icone { color: var(--texto-3); font-size: 12px; } .kpi-valor { font-size: 22px; font-weight: 600; margin-top: 8px; letter-spacing: -0.02em; } .kpi-sub { font-size: 11.5px; color: var(--texto-2); margin-top: 4px; } .kpi-sub.positivo { color: #6fd3a3; } .kpi-sub.negativo { color: #ff8585; } /* ---------------- Gráficos ---------------- */ .graficos-row { display: grid; grid-template-columns: 220px 1fr; gap: 14px; margin-bottom: 20px; } .grafico-card { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; } .grafico-card.cresce { min-width: 0; } .grafico-titulo { display: block; font-size: 11.5px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 10px; } .grafico-card canvas { width: 100% !important; height: 180px !important; } .grafico-gauge { position: relative; height: 160px; display: flex; align-items: center; justify-content: center; } .grafico-gauge canvas { height: 160px !important; } .gauge-centro { position: absolute; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } .gauge-centro.pros { color: #e9bd6a; } .gauge-centro.apro { color: #74bfeb; } .gauge-centro.impl { color: #a48ce8; } .gauge-centro.receb { color: #6fd3a3; } .grafico-fluxo { width: 100% !important; height: 240px !important; margin-bottom: 14px; } /* ---------------- Formulários ---------------- */ .form-estagio { border-top: 1px solid var(--linha); padding-top: 18px; } .form-estagio-titulo { font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; } .campo { display: flex; flex-direction: column; gap: 6px; } .campo.campo-largo { grid-column: 1 / -1; } .campo label { font-size: 11.5px; color: var(--texto-2); font-weight: 500; } .campo input, .campo select, .campo textarea { background: var(--bg); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); color: var(--texto); padding: 9px 11px; font-size: 13.5px; outline: none; width: 100%; transition: border-color .14s var(--ease), box-shadow .14s var(--ease); } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); } .campo textarea { resize: vertical; line-height: 1.5; } .campo select { cursor: pointer; } .grupo-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); font-weight: 600; margin: 16px 0 10px; } .form-estagio-acoes { display: flex; justify-content: flex-end; margin-top: 18px; } input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: var(--surface-hover); padding: 0; } input[type=range].range-nota { background: linear-gradient(90deg, var(--pros), var(--surface-hover)); } input[type=range].range-impl { background: linear-gradient(90deg, var(--impl), var(--surface-hover)); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } /* ---------------- Semáforo (aprovação) ---------------- */ .semaforo-lista { display: flex; flex-direction: column; gap: 8px; } .semaforo-item { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 9px 12px; } .semaforo-nome { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; } .semaforo-nome i { color: var(--texto-3); width: 16px; text-align: center; } .status-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; } .status-pill.ok { background: rgba(76,183,130,0.14); color: #6fd3a3; } .status-pill.analise { background: rgba(58,160,214,0.14); color: #74bfeb; } .status-pill.pendente { background: var(--surface-hover); color: var(--texto-2); } .status-pill.erro { background: rgba(235,87,87,0.14); color: #ff8585; } /* ---------------- Timeline ---------------- */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: flex; gap: 12px; position: relative; padding-bottom: 18px; } .timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--linha-forte); } .timeline-ponto { width: 32px; height: 32px; min-width: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; z-index: 1; border: 1px solid var(--linha-forte); } .timeline-ponto.pros { background: rgba(214,162,58,0.16); color: #e9bd6a; } .timeline-ponto.apro { background: rgba(58,160,214,0.16); color: #74bfeb; } .timeline-ponto.impl { background: rgba(123,92,214,0.18); color: #a48ce8; } .timeline-ponto.receb { background: rgba(76,183,130,0.16); color: #6fd3a3; } .timeline-conteudo { flex: 1; padding-top: 2px; } .timeline-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .timeline-estagio { font-size: 13px; font-weight: 600; } .timeline-estagio.pros { color: #e9bd6a; } .timeline-estagio.apro { color: #74bfeb; } .timeline-estagio.impl { color: #a48ce8; } .timeline-estagio.receb { color: #6fd3a3; } .timeline-data { font-size: 11px; color: var(--texto-3); } .timeline-meta { font-size: 12px; color: var(--texto-2); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; } .timeline-dias { color: var(--texto-3); } .timeline-obs { font-size: 12.5px; color: var(--texto); margin-top: 6px; font-style: italic; background: var(--bg-elev); border-radius: 6px; padding: 6px 9px; } .timeline-autor { font-size: 11px; color: var(--texto-3); margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; } /* ---------------- Mapa ---------------- */ .mapa-terreno { width: 100%; height: 320px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); z-index: 0; } .leaflet-container { background: var(--bg-elev); } /* ---------------- Anexos ---------------- */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 22px; cursor: pointer; color: var(--texto-2); transition: border-color .14s var(--ease), background .14s var(--ease); margin-bottom: 12px; } .dropzone:hover { border-color: var(--acento); background: var(--acento-bg); color: var(--texto); } .dropzone.ocupado { pointer-events: none; opacity: .8; } .dropzone i { font-size: 22px; color: var(--texto-3); } .dropzone small { font-size: 11px; color: var(--texto-3); } .dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; } .anexos-status { font-size: 12px; color: var(--texto-2); margin-bottom: 10px; } .anexos-status.erro { color: #ff8585; } .anexos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .anexo-item { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio-sm); overflow: hidden; display: flex; flex-direction: column; } .anexo-thumb { width: 100%; height: 90px; object-fit: cover; display: block; } .anexo-icone { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--texto-3); } .anexo-rodape { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--linha); } .anexo-nome { font-size: 11px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------- Cenários ---------------- */ .cenario-novo { display: flex; gap: 8px; margin-bottom: 14px; } .cenario-novo .modal-input { flex: 1; } .cenarios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .cenario-card { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; cursor: pointer; position: relative; transition: border-color .14s var(--ease), transform .14s var(--ease), background .14s var(--ease); } .cenario-card:hover { border-color: var(--linha-forte); transform: translateY(-2px); background: var(--surface); } .cenario-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .cenario-nome { font-weight: 600; font-size: 14px; } .cenario-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .cenario-kpis > div { display: flex; flex-direction: column; } .ck-label { font-size: 10px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .ck-valor { font-size: 14px; font-weight: 600; } .ck-valor.positivo { color: #6fd3a3; } .ck-valor.negativo { color: #ff8585; } .cenario-abrir { position: absolute; right: 12px; bottom: 12px; font-size: 11px; color: var(--texto-3); opacity: 0; transition: opacity .14s var(--ease); } .cenario-card:hover .cenario-abrir { opacity: 1; } /* ---------------- Cenário (detalhe) ---------------- */ .cenario-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); } .tabela-fluxo { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tabela-fluxo th { text-align: right; padding: 9px 12px; background: var(--bg-elev); color: var(--texto-3); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; position: sticky; top: 0; } .tabela-fluxo th:first-child, .tabela-fluxo td:first-child { text-align: left; } .tabela-fluxo td { text-align: right; padding: 8px 12px; border-top: 1px solid var(--linha); color: var(--texto); } .tabela-fluxo tbody tr:hover { background: var(--surface-2); } .tabela-fluxo .positivo { color: #6fd3a3; } .tabela-fluxo .negativo { color: #ff8585; } /* ---------------- Modelo V3 (resultado por VGV) ---------------- */ .painel-v3 { margin-top: 18px; } .tabela-tipologias { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tabela-tipologias th { text-align: right; padding: 9px 12px; background: var(--bg-elev); color: var(--texto-3); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; } .tabela-tipologias th:first-child, .tabela-tipologias td:first-child { text-align: left; } .tabela-tipologias td { padding: 6px 8px; border-top: 1px solid var(--linha); color: var(--texto); text-align: right; } .tabela-tipologias tfoot td { font-weight: 600; background: var(--bg-elev); } .tabela-tipologias input { width: 100%; min-width: 70px; text-align: right; } .tabela-tipologias input.tipologia-nome { text-align: left; min-width: 120px; } .tabela-tipologias .celula-vgv { font-weight: 600; } .tabela-tipologias .botao-remover { padding: 4px 8px; color: #ff8585; } /* ---------------- Resumo das 4 fases (página do terreno) ---------------- */ .fases-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .fase-resumo-card { position: relative; display: block; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 14px 16px; cursor: pointer; overflow: hidden; color: var(--texto); transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); } .fase-resumo-card:hover { transform: translateY(-2px); border-color: var(--linha-forte); box-shadow: var(--sombra); } .fase-resumo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .fase-resumo-card.pros::before { background: var(--pros); } .fase-resumo-card.apro::before { background: var(--apro); } .fase-resumo-card.impl::before { background: var(--impl); } .fase-resumo-card.receb::before { background: var(--receb); } .fase-resumo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .fase-resumo-nome { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .fase-resumo-card.pros .fase-resumo-nome i { color: var(--pros); } .fase-resumo-card.apro .fase-resumo-nome i { color: var(--apro); } .fase-resumo-card.impl .fase-resumo-nome i { color: var(--impl); } .fase-resumo-card.receb .fase-resumo-nome i { color: var(--receb); } .fase-resumo-qtd { font-size: 11.5px; color: var(--texto-2); } .fase-resumo-barra { height: 5px; border-radius: 4px; background: var(--surface-hover); overflow: hidden; } .fase-resumo-barra > span { display: block; height: 100%; border-radius: 4px; transition: width .4s var(--ease); } .fase-resumo-card.pros .fase-resumo-barra > span { background: var(--pros); } .fase-resumo-card.apro .fase-resumo-barra > span { background: var(--apro); } .fase-resumo-card.impl .fase-resumo-barra > span { background: var(--impl); } .fase-resumo-card.receb .fase-resumo-barra > span { background: var(--receb); } .fase-resumo-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--texto-3); } /* micro-barras de progresso por fase no card da lista de terrenos */ .terreno-fases-barras { display: flex; gap: 5px; } .fase-micro { flex: 1; cursor: pointer; } .fase-micro-barra { height: 5px; border-radius: 3px; background: var(--surface-hover); overflow: hidden; } .fase-micro-barra > span { display: block; height: 100%; border-radius: 3px; } .fase-micro.pros .fase-micro-barra > span { background: var(--pros); } .fase-micro.apro .fase-micro-barra > span { background: var(--apro); } .fase-micro.impl .fase-micro-barra > span { background: var(--impl); } .fase-micro.receb .fase-micro-barra > span { background: var(--receb); } /* ---------------- Board da fase (listas verticais de etapas) ---------------- */ .fase-board-wrap { overflow-x: auto; padding-bottom: 8px; } .fase-board { display: flex; gap: 14px; align-items: flex-start; min-height: 220px; } .etapa-coluna { min-width: 264px; width: 264px; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-lg); display: flex; flex-direction: column; max-height: 70vh; } .etapa-coluna.status-concluida { opacity: .82; } .etapa-coluna.status-naoaplica { opacity: .55; } .etapa-coluna-header { padding: 12px 14px; border-bottom: 1px solid var(--linha); cursor: pointer; border-radius: var(--raio-lg) var(--raio-lg) 0 0; transition: background .14s var(--ease); } .etapa-coluna-header:hover { background: var(--surface-2); } .etapa-coluna-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .etapa-coluna-nome { font-size: 13px; font-weight: 600; line-height: 1.35; } .etapa-coluna-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; font-size: 11px; color: var(--texto-3); } .etapa-coluna-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 50px; } .etapa-coluna-rodape { padding: 8px 10px; border-top: 1px solid var(--linha); } .etapa-add-item { width: 100%; display: inline-flex; align-items: center; gap: 7px; justify-content: center; background: transparent; border: 1px dashed var(--linha-forte); border-radius: var(--raio-sm); color: var(--texto-3); padding: 7px; font-size: 12px; cursor: pointer; transition: all .14s var(--ease); } .etapa-add-item:hover { color: var(--texto); border-color: var(--acento); background: var(--acento-bg); } .coluna-nova-etapa { min-width: 220px; } /* chips de status de etapa/item */ .status-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 11px; white-space: nowrap; } .status-chip.naoiniciada { background: var(--surface-hover); color: var(--texto-2); } .status-chip.andamento { background: rgba(58,160,214,0.16); color: #4aa8dc; } .status-chip.concluida { background: rgba(76,183,130,0.16); color: #3fae7c; } .status-chip.bloqueada { background: rgba(235,87,87,0.16); color: #e05252; } .status-chip.naoaplica { background: var(--surface-hover); color: var(--texto-3); text-decoration: line-through; } /* card de item (sub-etapa) */ .item-card { background: var(--bg-elev); border: 1px solid var(--linha); border-left-width: 3px; border-radius: var(--raio-sm); padding: 9px 11px; cursor: grab; transition: border-color .14s var(--ease), background .14s var(--ease); } .item-card:hover { border-color: var(--linha-forte); background: var(--surface-2); } .item-card:active { cursor: grabbing; } .item-card.naoiniciada { border-left-color: var(--texto-3); } .item-card.andamento { border-left-color: var(--apro); } .item-card.concluida { border-left-color: var(--ok); } .item-card.bloqueada { border-left-color: var(--perigo); } .item-card.naoaplica { border-left-color: var(--linha-forte); opacity: .6; } .item-card-fantasma { opacity: .35; } .item-card-arrastando { transform: rotate(2deg); box-shadow: var(--sombra-flutua); } .item-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .item-card-nome { font-size: 12.5px; font-weight: 500; line-height: 1.35; } .item-card.concluida .item-card-nome { text-decoration: line-through; color: var(--texto-2); } .item-card-meta { display: flex; align-items: center; gap: 9px; margin-top: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--texto-3); } .item-card-meta i { font-size: 10px; } .item-meta-atrasado { color: #e05252; font-weight: 600; } .item-card-valor { font-weight: 600; color: var(--texto-2); } /* barra de progresso da etapa no header da coluna */ .etapa-progresso { height: 4px; border-radius: 3px; background: var(--surface-hover); overflow: hidden; margin-top: 8px; } .etapa-progresso > span { display: block; height: 100%; border-radius: 3px; transition: width .4s var(--ease); } .etapa-progresso.pros > span { background: var(--pros); } .etapa-progresso.apro > span { background: var(--apro); } .etapa-progresso.impl > span { background: var(--impl); } .etapa-progresso.receb > span { background: var(--receb); } /* dashboard superior da página da fase */ .fase-dash { margin-bottom: 16px; } .fase-dash-colapsavel summary { cursor: pointer; list-style: none; } .fase-dash-colapsavel summary::-webkit-details-marker { display: none; } /* ---------------- Análise de sensibilidade (tornado) ---------------- */ .sens-base { font-size: 12.5px; color: var(--texto-2); margin-bottom: 10px; } .tabela-sensibilidade td:first-child { white-space: nowrap; } .sens-barra-celula { min-width: 180px; } .sens-barra { display: flex; height: 14px; border-radius: 4px; overflow: hidden; } .sens-barra-neg, .sens-barra-pos { flex: 1; position: relative; background: var(--surface-hover); } .sens-barra-neg { border-right: 1px solid var(--linha-forte); display: flex; justify-content: flex-end; } .sens-barra-neg > span { display: block; height: 100%; background: var(--perigo); border-radius: 3px 0 0 3px; } .sens-barra-pos > span { display: block; height: 100%; background: var(--ok); border-radius: 0 3px 3px 0; } /* comparação de cenários */ .tabela-comparacao td.melhor { color: #3fae7c; font-weight: 700; } /* ---------------- Modais ---------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal-card { width: 100%; max-width: 440px; border-radius: var(--raio-lg); padding: 24px; background: var(--surface); border: 1px solid var(--linha-forte); box-shadow: var(--sombra-flutua); } .modal-titulo { font-size: 17px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .modal-titulo.pros i { color: var(--pros); } .modal-titulo.apro i { color: var(--apro); } .modal-titulo.impl i { color: var(--impl); } .modal-titulo.receb i { color: var(--receb); } .modal-texto { color: var(--texto-2); font-size: 13px; line-height: 1.6; margin-bottom: 6px; } .modal-label { display: block; font-size: 11px; color: var(--texto-3); margin: 16px 0 7px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .modal-input { width: 100%; background: var(--bg); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); color: var(--texto); padding: 10px 12px; outline: none; font-size: 14px; transition: border-color .14s var(--ease), box-shadow .14s var(--ease); } .modal-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); } textarea.modal-input { resize: vertical; line-height: 1.5; } .modal-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; } .modal-acoes { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; } /* segmento toggle (tipo) */ .seg-toggle { display: flex; gap: 8px; } .seg-opcao { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); color: var(--texto-2); padding: 10px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .14s var(--ease); } .seg-opcao:hover { color: var(--texto); } .seg-opcao.ativa { background: var(--acento-bg); color: var(--texto); border-color: var(--acento); } /* ---------------- Toast ---------------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--surface-2); border: 1px solid var(--linha-forte); color: var(--texto); border-radius: 12px; padding: 12px 18px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; box-shadow: var(--sombra-flutua); } .toast i { color: var(--ok); } /* ---------------- 404 ---------------- */ .naoencontrado-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .naoencontrado-card { text-align: center; } .naoencontrado-card i { font-size: 40px; color: var(--texto-3); } .naoencontrado-card h1 { font-size: 56px; margin: 12px 0 4px; } .naoencontrado-card p { color: var(--texto-2); margin-bottom: 20px; } /* ---------------- Scrollbars ---------------- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ---------------- Erro Blazor / loading ---------------- */ #blazor-error-ui { background: var(--surface); color: var(--texto); bottom: 0; border-top: 1px solid var(--linha-forte); box-shadow: 0 -2px 12px rgba(0,0,0,0.5); display: none; left: 0; padding: 0.8rem 1.4rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.6rem; } .loading-progress { position: relative; display: block; width: 6rem; height: 6rem; margin: 22vh auto 1rem; } .loading-progress circle { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 0.4rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--acento); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: 500; inset: calc(22vh + 2.5rem) 0 auto 0; color: var(--texto-2); font-size: 13px; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregando"); } /* ---------------- Responsivo ---------------- */ @media (max-width: 1000px) { .terreno-grid { grid-template-columns: 1fr; } .terreno-coluna-lateral { position: static; } .terreno-grid-2 { grid-template-columns: 1fr; } .graficos-row { grid-template-columns: 1fr; } } @media (max-width: 720px) { .login-wrap { grid-template-columns: 1fr; } .login-aside { display: none; } .viab-main { padding: 20px 16px 40px; } .pipeline-rotulo { display: none; } .filtro-busca { margin-left: 0; width: 100%; } }