/* Integrador TECNICO — tema (paleta verde claro da família, igual OMNI) */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"); :root { /* fundo */ --bg: #0b0f14; --bg-soft: #0e1620; --surface: #111722; --surface-2: #1a2230; /* marca verde */ --green: #35d466; --green-2: #24b854; --green-3: #7be0a0; --green-ink: #06210f; /* Versão RGB SEM função (pra usar dentro de rgba()/color-mix) — sobrescrita pelo branding da empresa via _aplicarBrandingHeader() em runtime. */ --green-rgb: 53, 212, 102; /* texto */ --text: #f5f7fa; --muted: #b6c0cc; --border: rgba(255,255,255,.10); /* status */ --red: #ff4d4f; --yellow: #f5c451; --info: #7fa7c5; /* tipografia — Inter (padrão da família) com fallback system */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 14px; --shadow: 0 14px 34px rgba(0,0,0,.32); } /* Modo CLARO — toggle via .theme-light no (default = escuro) */ body.theme-light { --bg: #eef2f7; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #e6ebf3; --text: #0a1020; /* preto-azulado bem escuro pra alto contraste */ --muted: #3b4658; /* cinza ESCURO (antes era #5a6577 muito claro) */ --border: rgba(10, 16, 32, .20); --green: #15a345; /* verde mais escuro pra contrastar com fundo claro */ --green-2: #0d8a39; --green-3: #2dc060; /* RGB do verde claro — precisa existir aqui senão rgba(var(--green-rgb)) cai no valor do tema ESCURO. O branding sobrescreve em runtime (no ). */ --green-rgb: 21, 163, 69; --green-ink: #ffffff; --red: #c81e1e; --shadow: 0 10px 24px rgba(10,16,32,.12); } /* No modo claro, badges/elementos que tinham fundo verde fraco precisam de mais opacidade pra serem lidas */ body.theme-light .badge { font-weight: 800; } body.theme-light .badge.ok { background: rgba(var(--green-rgb),.18); color: var(--green-2); border-color: rgba(var(--green-rgb),.45); } body.theme-light .badge.warn { background: rgba(245,196,81,.30); color: #7a5300; border-color: rgba(245,196,81,.55); } body.theme-light .badge.danger{ background: rgba(200,30,30,.20); color: #b91c1c; border-color: rgba(200,30,30,.50); } body.theme-light .accent { color: var(--green-2); } /* Contadores e badges-tipo no card OS — cores próprias pra modo claro */ body.theme-light .badge-count { background: rgba(10,16,32,.10); color: #3b4658; } body.theme-light .filtro-btn.active .badge-count { background: rgba(var(--green-rgb),.22); color: var(--green-2); } body.theme-light .os-card .tipo { background: rgba(var(--green-rgb),.16); color: var(--green-2); border-color: rgba(var(--green-rgb),.45); } body.theme-light .os-card .tipo.finalizada { background: rgba(10,16,32,.06); color: #5a6577; border-color: rgba(10,16,32,.18); } /* Pino do card "hora" — fundo verde mais sólido no claro */ body.theme-light .os-card .hora { background: rgba(var(--green-rgb),.14); border-color: rgba(var(--green-rgb),.40); color: var(--green-2); } /* Filtro inactive — borda mais visível no claro */ body.theme-light .filtro-btn { border-color: rgba(10,16,32,.20); color: #3b4658; } /* Endereço (muted) já pega var(--muted) atualizada — não precisa override */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; transition: background .15s ease, color .15s ease; } a { color: var(--green); text-decoration: none; } a:hover { text-decoration: underline; } .btn, button.primary, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius); font-weight: 800; font-size: 15px; cursor: pointer; color: var(--green-ink); background: linear-gradient(90deg, var(--green-2), var(--green)); box-shadow: 0 14px 34px rgba(var(--green-rgb),.24); transition: transform .15s ease; font-family: inherit; } .btn:hover, button.primary:hover, .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--radius); font-weight: 700; font-size: 14.5px; background: transparent; color: var(--text); border: 1px solid var(--border); cursor: pointer; font-family: inherit; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .btn-ghost:hover { background: rgba(var(--green-rgb),.06); border-color: rgba(var(--green-rgb),.40); } .btn-ghost:active { transform: scale(.98); } /* Modo claro: ghost com mais contraste (borda mais escura) */ body.theme-light .btn-ghost { border-color: rgba(10,16,32,.30); color: #0a1020; font-weight: 700; } body.theme-light .btn-ghost:hover { background: rgba(var(--green-rgb),.10); border-color: rgba(var(--green-rgb),.55); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .muted { color: var(--muted); } /* Modal genérico (compartilhado entre app/admin) */ .modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9999 !important; background: rgba(0,0,0,.60) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } /* Modal genérico (#modal-dlg = appConfirm/appPrompt/appChoose) deve ficar SEMPRE no topo, inclusive sobre modais fullscreen (mapa, wizard, etc). */ #modal-dlg.modal { z-index: 100000 !important; } /* Modal de assinatura também precisa ficar sobre o diagnóstico/wizard */ #modal-assina-link.modal { z-index: 100001 !important; } /* Modais disparados de DENTRO do Wizard (etapa Ferramentas) — precisam ficar ACIMA do #modal-wf (z-index 9999), senão abrem invisíveis atrás dele. */ #modal-consulta-sinal.modal, #modal-trocar-cxporta.modal, #modal-speedtest.modal, #modal-ia-ajuda.modal, #modal-wifi-diag.modal, #modal-prov-progresso.modal { z-index: 100010 !important; } /* Sub-modais (escolher ONU / escolher porta) precisam ficar AINDA mais acima — eles são abertos POR CIMA do modal-trocar-cxporta e do modal-prov, então tem que vencer no stacking. */ #modal-prov-onu.modal, #modal-prov-porta.modal { z-index: 100020 !important; } .modal[hidden], [hidden] { display: none !important; } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; max-width: 460px; width: 100%; max-height: 92dvh; overflow: auto; box-shadow: var(--shadow); } .modal-title { margin: 0 0 10px; font-size: 18px; } .modal .field-label { display: block; margin-top: 14px; font-size: 12.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .modal input, .modal select, .modal textarea { width: 100%; height: 40px; padding: 0 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; margin-top: 6px; } .modal textarea { height: auto; padding: 8px 12px; } .modal-actions { display: flex; gap: 10px; margin-top: 18px; } .modal-actions .btn-ghost, .modal-actions .btn-primary { flex: 1; height: 44px; border-radius: 12px; } .danger { color: var(--red); } /* wordmark estilo OMNI: "Integrador" branco + "TECNICO" em gradient verde */ .brand-wordmark { font-weight: 900; font-size: 22px; letter-spacing: .02em; } .brand-wordmark .accent { background: linear-gradient(90deg, var(--green), var(--green-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } input, select, textarea { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 15px; padding: 12px 14px; width: 100%; box-sizing: border-box; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb),.18); } /* Sobrescreve o autofill amarelo/branco do Chrome/Edge pra manter o tema escuro */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-soft) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); transition: background-color 600000s 0s, color 600000s 0s; } body.theme-light input:-webkit-autofill, body.theme-light input:-webkit-autofill:hover, body.theme-light input:-webkit-autofill:focus, body.theme-light textarea:-webkit-autofill, body.theme-light select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #0a1020 !important; }