/* ============================================================ GLOBAL.CSS — WCR · OEM Reset, variáveis de tema e componentes compartilhados. Tema padrão do site público: CLARO (papel e tinta). Dashboards (body.modo-painel) permanecem escuros. ============================================================ */ /* ---------- RESET ---------- */ * { -webkit-font-smoothing: antialiased; } /* ---------- VARIÁVEIS: SITE PÚBLICO (Azul Claro/Hidro) ---------- */ :root { --wcr-papel: #F4F8FB; /* branco gelado suave */ --wcr-papel-2: #EAF2F8; /* fundo alternado */ --wcr-card: #FFFFFF; --wcr-tinta: #1C2833; /* texto principal (azul quase preto) */ --wcr-tinta-2: #566573; /* texto secundário */ --wcr-linha: #D4E6F1; /* bordas (cinza azulado claro) */ /* AZUIS CLAROS */ --wcr-verde: #163E50; /* Azul Hidro Principal (Claro e vibrante) */ --wcr-verde-2: #102E3D; /* Azul Hidro Hover (um pouquinho mais escuro) */ --wcr-verde-soft: #EBF5FB; /* Azul Hidro Suave (fundo de chips/badges) */ --wcr-agua: #1A8FBF; /* azul-água secundário */ --wcr-barro: #B25A2B; --wcr-barro-2: #97491F; --wcr-areia: #E1EEF6; --wcr-erro: #C0392B; --wcr-idioma: #6C4FD9; /* roxo — só pros botões de idioma no cabeçalho */ --wcr-laranja-fixo: #E8720C; /* laranja — FAQ e engrenagem, igual nos dois temas */ --wcr-sombra: 0 1px 2px rgba(28, 40, 51, 0.06); /* Legado dashboard (não mexer) */ --bg-base: #0A0E17; --bg-sidebar: #0d1326; --bg-card: #131a2e; --bg-card-hover: #1a2240; --bg-header: rgba(10, 15, 30, 0.85); --border: #1f2942; --border-hover: #2a3656; --text-primary: #FFFFFF; --text-secondary: #9CA3AF; --text-muted: #5a6485; --accent-blue: #3FB8B3; --status-green: #10B981; --alert-amber: #F59E0B; --ai-purple: #C07A3A; color-scheme: light; } /* ---------- TEMA ESCURO (Azul Claro) ---------- */ html[data-tema="escuro"] { --wcr-papel: #0E1E17; --wcr-papel-2: #142A20; --wcr-card: #17302A; --wcr-tinta: #E8F0F5; --wcr-tinta-2: #94B0A8; --wcr-linha: #2A4A3E; /* Azul petróleo sobre o verde escuro */ --wcr-verde: #163E50; /* Azul petróleo, mais profundo */ --wcr-verde-2: #1F5468; /* Azul petróleo Hover */ --wcr-verde-soft: #16332B; /* Verde Escuro Suave */ --wcr-agua: #3FD6BD; /* Turquesa — cor única de destaque no escuro (contrasta bem com o card escuro) */ --wcr-barro: #D9814F; --wcr-barro-2: #C9713F; --wcr-areia: #17302A; --wcr-idioma: #B8A6FF; /* roxo mais claro, pra contrastar no fundo escuro */ --wcr-erro: #E74C3C; --wcr-sombra: 0 1px 2px rgba(0, 0, 0, 0.4); color-scheme: dark; /* legado — dashboard/portal continuam azuis no escuro também (pedido explícito do usuário: nada de verde nas telas de dashboard, cliente ou operador, em nenhum tema — só o site público muda pra verde). */ --bg-base: #0A0E17; --bg-sidebar: #0d1326; --bg-card: #131a2e; --bg-card-hover: #1a2240; --bg-header: rgba(10, 15, 30, 0.85); --border: #1f2942; --border-hover: #2a3656; --text-primary: #FFFFFF; --text-secondary: #9CA3AF; --text-muted: #5a6485; } /* Seções "fundo-cobalto" no escuro: azul petróleo em vez do cobalto puro, pra combinar com o verde do tema */ html[data-tema="escuro"] .fundo-cobalto { background: linear-gradient(165deg, #1B4356, #0F2C3A); } /* Ícones do site público (fora do painel) usavam --wcr-verde (azul petróleo escuro, #163E50) sobre fundos igualmente escuros (--wcr-verde-soft, --wcr-papel) — ficavam quase invisíveis. Usa o turquesa já reservado como destaque único do tema escuro (--wcr-agua). */ html[data-tema="escuro"] .card-icone:not(.barro), html[data-tema="escuro"] .canal-icone, html[data-tema="escuro"] .usina-meta svg, html[data-tema="escuro"] .faq-q svg, html[data-tema="escuro"] .aviso-linha svg { color: var(--wcr-agua); } html[data-tema="escuro"] .header-tema-btn:hover, html[data-tema="escuro"] .header-tema-btn.is-active { color: var(--wcr-agua); border-color: var(--wcr-agua); } html[data-tema="escuro"] .header-tema-btn.is-active { background: color-mix(in srgb, var(--wcr-agua) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wcr-agua) 35%, transparent); } /* Botão "Conheça mais" do card CONECTA: preenchido igual ao "Acesso da Equipe" (wcr-btn-solido), em vez de contornado (que sumia em cima do --wcr-verde-soft escuro). */ html[data-tema="escuro"] .bloco-conecta .wcr-btn-contorno { background: var(--wcr-verde); border-color: var(--wcr-verde); color: #fff; } html[data-tema="escuro"] .bloco-conecta .wcr-btn-contorno:hover { background: var(--wcr-verde-2); border-color: var(--wcr-verde-2); color: #fff; } /* Daqui pra baixo: mesmo problema (--wcr-verde escuro sobre fundo escuro) se repete em vários elementos do site público — barrinha e texto do eyebrow, chips, links com seta, iniciais de depoimento, breadcrumb e botões contornado/fantasma. Troca tudo pelo turquesa (--wcr-agua) no tema escuro, o mesmo já usado no "WCR + CONECTA" e nos ícones. */ html[data-tema="escuro"] .chip, html[data-tema="escuro"] .link-seta, html[data-tema="escuro"] .link-seta:hover, html[data-tema="escuro"] .depo-autor .avatar, html[data-tema="escuro"] .wcr-btn-contorno, html[data-tema="escuro"] .wcr-btn-fantasma, html[data-tema="escuro"] .trust-logo-text:hover, html[data-tema="escuro"] .back-to-top { color: var(--wcr-agua); } html[data-tema="escuro"] .back-to-top:hover { border-color: var(--wcr-agua); } /* !important pq um dos eyebrows (WCR + CONECTA) tem cor fixada via style="" inline no HTML */ html[data-tema="escuro"] .eyebrow { color: var(--wcr-agua) !important; } /* Números grandes de "Resultados em números" (12, 8 anos, 17, 14 MW) — mesmo problema, cor fixada via style="" inline no HTML */ html[data-tema="escuro"] [data-counter] { color: var(--wcr-agua) !important; } /* Link "Fale pelo WhatsApp" no CTA dos depoimentos — mesmo problema, cor fixada inline */ html[data-tema="escuro"] a[data-i18n="xt035"] { color: var(--wcr-agua) !important; } html[data-tema="escuro"] .eyebrow::before { background: var(--wcr-agua); } html[data-tema="escuro"] .chip, html[data-tema="escuro"] .depo-autor .avatar { background: color-mix(in srgb, var(--wcr-agua) 14%, transparent); } html[data-tema="escuro"] .wcr-btn-contorno { border-color: var(--wcr-agua); } html[data-tema="escuro"] .wcr-btn-contorno:hover { background: color-mix(in srgb, var(--wcr-agua) 16%, transparent); } /* Exceções que já têm fundo sólido e texto branco combinando (header + Conheça mais) — não devem virar ciano. */ html[data-tema="escuro"] #siteHeader .wcr-btn-contorno, html[data-tema="escuro"] .bloco-conecta .wcr-btn-contorno { color: #fff; border-color: var(--wcr-verde); } html[data-tema="escuro"] #siteHeader .wcr-btn-contorno:hover, html[data-tema="escuro"] .bloco-conecta .wcr-btn-contorno:hover { border-color: var(--wcr-verde-2); } /* ---------- TEMA ALTO CONTRASTE ---------- */ html[data-tema="contraste"] { --wcr-papel: #000000; --wcr-papel-2: #000000; --wcr-card: #000000; --wcr-tinta: #FFFFFF; --wcr-tinta-2: #F1F1F1; --wcr-linha: #FFFFFF; --wcr-verde: #FFD60A; --wcr-verde-2: #FFE14D; --wcr-verde-soft: #1A1A00; --wcr-agua: #FFD60A; --wcr-barro: #FFD60A; --wcr-barro-2: #FFD60A; --wcr-areia: #000000; --wcr-erro: #FF8A7A; --wcr-sombra: none; color-scheme: dark; } html[data-tema="contraste"] a { text-decoration: underline; } html[data-tema="contraste"] .site-card, html[data-tema="contraste"] .wcr-btn, html[data-tema="contraste"] .galeria-carrossel { border: 2px solid #fff !important; } html[data-tema="contraste"] .galeria-info-col { --gi-azul: #FFD60A; --gi-azul-soft: rgba(255, 214, 10, .18); } html[data-tema="contraste"] .galeria-info-col .galeria-usina-link, html[data-tema="contraste"] .galeria-info-col .galeria-info-icone, html[data-tema="contraste"] .galeria-info-col .galeria-info-meta { border-color: #FFD60A !important; color: #FFD60A !important; } html[data-tema="contraste"] .galeria-info-col .galeria-usina-link { background-color: transparent !important; } html[data-tema="contraste"] .galeria-info-col .galeria-dot.is-active { background-color: #FFD60A !important; } html[data-tema="contraste"] .galeria-info-col { background: #000 !important; border-color: #fff !important; } html[data-tema="contraste"] .galeria-info-col::before { display: none !important; } /* Seções "fundo-cobalto" (azuis) viram preto/amarelo no contraste — o azul fica só nos outros temas */ html[data-tema="contraste"] .fundo-cobalto { background: #000 !important; } html[data-tema="contraste"] .fundo-cobalto .eyebrow { color: #FFD60A !important; } html[data-tema="contraste"] .fundo-cobalto .eyebrow::before { background: #FFD60A !important; } html[data-tema="contraste"] .fundo-cobalto .section-head h2, html[data-tema="contraste"] .fundo-cobalto .grade-dashboard-explica h2 { color: #fff !important; } html[data-tema="contraste"] .fundo-cobalto .section-head p, html[data-tema="contraste"] .fundo-cobalto .grade-dashboard-explica > div:first-child p { color: #F1F1F1 !important; } html[data-tema="contraste"] .fundo-cobalto .grade-dashboard-explica > div:first-child strong { color: #fff !important; } html[data-tema="contraste"] .fundo-cobalto .grade-dashboard-explica > div:first-child .wcr-btn-contorno { border-color: #FFD60A !important; color: #FFD60A !important; } /* ---------- DASHBOARDS: MESMA PALETA DO SITE PÚBLICO ---------- O dashboard usa as mesmas variáveis --wcr- do site (definidas em :root e nos blocos html[data-tema] acima) — claro, escuro e alto contraste já trocam sozinhos, sem precisar de uma paleta própria pro dashboard. As variáveis --bg, --border e --text (legado) são só um apelido pras mesmas cores, porque boa parte do CSS/HTML do dashboard foi escrita usando esses nomes antigos. */ body.modo-painel { --bg-base: var(--wcr-papel); --bg-sidebar: var(--wcr-card); --bg-card: var(--wcr-card); --bg-card-hover: var(--wcr-papel-2); --bg-header: color-mix(in srgb, var(--wcr-card) 90%, transparent); --border: var(--wcr-linha); --border-hover: var(--wcr-verde); --text-primary: var(--wcr-tinta); --text-secondary: var(--wcr-tinta-2); --text-muted: var(--wcr-tinta-2); background: var(--wcr-papel); color: var(--wcr-tinta); } /* Pedido do usuário: "modo claro, cores claras" — o painel (dashboard/ portal do cliente) agora segue o tema escolhido de verdade, em vez de ficar sempre escuro/azul travado. No tema claro ele usa as variáveis claras normais do :root (--wcr-papel/--wcr-card/--wcr-tinta, já pensadas pra fundo branco); só o tema escuro continua caindo aqui, pra manter a paleta azul-petróleo específica do painel escuro (mais escura que o --wcr-papel padrão do tema escuro do site). Tema contraste continua com sua própria regra, mais abaixo. */ html[data-tema="escuro"] body.modo-painel { --wcr-verde: #3FD6BD; --wcr-verde-2: #6BE3CF; --wcr-agua: #3FD6BD; /* --wcr-tinta/-2 do tema claro são escuros (pensados pra fundo claro) — sem redefinir aqui também, o texto do painel ficaria escuro sobre o fundo escuro forçado abaixo, ilegível. No tema escuro isso não era necessário porque o próprio html[data-tema="escuro"] já deixa essas variáveis claras lá em cima; aqui reafirma os mesmos valores pros dois casos, sem depender de qual tema disparou essa regra. */ --wcr-tinta: #E8F0F5; --wcr-tinta-2: #94B0A8; /* Sem isso, o dashboard/portal herdava --wcr-papel/--wcr-card (cor do SITE PÚBLICO) da regra "body.modo-painel" logo acima — pedido explícito do usuário: dashboard, cliente e operador ficam sempre azuis, em qualquer tema; só o site público muda de cor. */ --bg-base: #0A0E17; --bg-sidebar: #0d1326; --bg-card: #131a2e; --bg-card-hover: #1a2240; --bg-header: rgba(10, 15, 30, 0.85); --border: #1f2942; --border-hover: #2a3656; background: #0A0E17; /* Isso sozinho não bastava: um monte de regra em dashboard.css usa "var(--wcr-card)"/"var(--wcr-papel)" direto (a cor do SITE PÚBLICO) em vez de "var(--bg-card)" (a de cima, já corrigida) — cards, dropdowns, painel de logout etc. continuavam com a cor do site por baixo do pano. Redefinindo a própria variável aqui, tudo que lê ela dentro do dashboard/portal vira azul-escuro de uma vez só. */ --wcr-papel: #0A0E17; --wcr-papel-2: #1a2240; --wcr-card: #131a2e; --wcr-linha: #1f2942; } html[data-tema="contraste"] body.modo-painel * { border-color: #fff !important; } /* Ícones do painel (Tailwind text-slate-4/5/600) ficavam escuros demais sobre o fundo escuro forçado — só faz sentido no tema escuro agora; no claro o painel é claro de verdade, e essas classes slate já são feitas pra fundo branco (não precisam de ajuste). */ html[data-tema="escuro"] body.modo-painel svg[class*="text-slate-4"], html[data-tema="escuro"] body.modo-painel svg[class*="text-slate-5"], html[data-tema="escuro"] body.modo-painel svg[class*="text-slate-6"], html[data-tema="escuro"] body.modo-painel svg[class*="text-slate-7"], html[data-tema="escuro"] body.modo-painel i[data-lucide][class*="text-slate-4"], html[data-tema="escuro"] body.modo-painel i[data-lucide][class*="text-slate-5"], html[data-tema="escuro"] body.modo-painel i[data-lucide][class*="text-slate-6"], html[data-tema="escuro"] body.modo-painel i[data-lucide][class*="text-slate-7"] { color: #A9C4BD !important; } /* ============================================================ BASE ============================================================ */ body { font-family: 'Archivo', 'Inter', sans-serif; background: var(--wcr-papel); color: var(--wcr-tinta); overflow-x: hidden; margin: 0; line-height: 1.6; transition: opacity .15s ease; /* ADICIONAR ESTA LINHA */ } body.wcr-trocando-idioma { opacity: .35; } /* ADICIONAR ESTA REGRA NOVA */ /* Redução geral de fonte (o dashboard foi dimensionado assim originalmente) */ html { font-size: 85%; } /* No dashboard (operador e cliente) isso deixava tudo pequeno e apertado — volta ao tamanho normal */ html.modo-painel-html { font-size: 100%; } .mono { font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; } ::selection { background: var(--wcr-verde); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--wcr-papel-2); } ::-webkit-scrollbar-thumb { background: var(--wcr-linha); border-radius: 6px; border: 2px solid var(--wcr-papel-2); } ::-webkit-scrollbar-thumb:hover { background: var(--wcr-tinta-2); } html { scroll-behavior: smooth; } /* Slide de entrada da página nova (ver wcrSlideEntrada em app.js). Só transform, sem opacity, e sem fill-mode: termina sempre em "none". */ @keyframes wcrSlideDir { from { transform: translateX(28vw); } to { transform: none; } } @keyframes wcrSlideEsq { from { transform: translateX(-28vw); } to { transform: none; } } .wcr-slide-in-dir { animation: wcrSlideDir .6s cubic-bezier(.22, 1, .36, 1); } .wcr-slide-in-esq { animation: wcrSlideEsq .6s cubic-bezier(.22, 1, .36, 1); } /* corta só o estouro lateral durante o deslize (sem virar container de rolagem) */ #app.wcr-slide-ativo { overflow-x: clip; } /* Slide da TELA INTEIRA entre páginas públicas (document.startViewTransition, ver loadView em app.js). O navegador tira uma "foto" da tela atual e da nova e desliza as duas de lado como um carrossel — só existe durante a animação (não deixa nada preso/invisível) e vale só pra viewport, não pra página inteira. Cabeçalho e botão do WhatsApp têm nome próprio pra ficarem parados enquanto o resto desliza. */ html[data-wcr-fixo] #siteHeader { view-transition-name: wcr-cabecalho; } html[data-wcr-fixo] #whatsappFloat { view-transition-name: wcr-whatsapp; } @keyframes wcrVtSaiEsq { to { transform: translateX(-100%); } } @keyframes wcrVtEntraDir { from { transform: translateX(100%); } } @keyframes wcrVtSaiDir { to { transform: translateX(100%); } } @keyframes wcrVtEntraEsq { from { transform: translateX(-100%); } } html[data-wcr-slide]::view-transition-old(root), html[data-wcr-slide]::view-transition-new(root) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-fill-mode: both; mix-blend-mode: normal; } html[data-wcr-slide="dir"]::view-transition-old(root) { animation-name: wcrVtSaiEsq; } html[data-wcr-slide="dir"]::view-transition-new(root) { animation-name: wcrVtEntraDir; } html[data-wcr-slide="esq"]::view-transition-old(root) { animation-name: wcrVtSaiDir; } html[data-wcr-slide="esq"]::view-transition-new(root) { animation-name: wcrVtEntraEsq; } /* Botão que desce até uma seção da própria página: slide na vertical */ @keyframes wcrVtSaiCima { to { transform: translateY(-100%); } } @keyframes wcrVtEntraBaixo { from { transform: translateY(100%); } } @keyframes wcrVtSaiBaixo { to { transform: translateY(100%); } } @keyframes wcrVtEntraCima { from { transform: translateY(-100%); } } html[data-wcr-slide="baixo"]::view-transition-old(root), html[data-wcr-slide="baixo"]::view-transition-new(root), html[data-wcr-slide="cima"]::view-transition-old(root), html[data-wcr-slide="cima"]::view-transition-new(root) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-fill-mode: both; mix-blend-mode: normal; } html[data-wcr-slide="baixo"]::view-transition-old(root) { animation-name: wcrVtSaiCima; } html[data-wcr-slide="baixo"]::view-transition-new(root) { animation-name: wcrVtEntraBaixo; } html[data-wcr-slide="cima"]::view-transition-old(root) { animation-name: wcrVtSaiBaixo; } html[data-wcr-slide="cima"]::view-transition-new(root) { animation-name: wcrVtEntraCima; } /* Troca de tema instantânea: por 2 frames (ver aplicarTema/wcrDefinirTema), desliga toda "transition" da página — sem isso, centenas de elementos com "transition: all .2s" tentam animar cor/fundo ao mesmo tempo assim que data-tema muda, e esse recálculo (medido em ~50-100ms aqui, pode ser bem mais em PC mais fraco) trava/engasga a tela no instante da troca. */ html.wcr-trocando-tema, html.wcr-trocando-tema *, html.wcr-trocando-tema *::before, html.wcr-trocando-tema *::after { transition: none !important; } /* ============================================================ COMPONENTES COMPARTILHADOS COM O DASHBOARD (legado) ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.2s ease, transform 0.2s ease; } .card:hover { border-color: var(--border-hover); } /* .glow-blue: efeito de brilho removido a pedido (deixava cara de gerado por IA) — a classe fica só pra não quebrar onde ainda é referenciada no HTML. */ .glow-blue {} .line-blue { border-left: 3px solid var(--wcr-verde); } /* ---------- TOAST ---------- */ .toast { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--wcr-card); color: var(--wcr-tinta); border: 1px solid var(--wcr-linha); padding: 14px 20px; border-radius: 10px; transform: translateX(420px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 12px 30px rgba(30, 42, 38, 0.18); max-width: 360px; } .toast.show { transform: translateX(0); } /* Dentro do painel/portal, o balão flutuante "Deixar opinião" (fixed bottom-5 right-5, ~56px de altura) fica bem em cima do canto onde o toast aparece — sem isso, o toast (z-index mais baixo) ficava parcialmente escondido atrás do botão, com o texto cortado. */ body.modo-painel .toast { bottom: 92px; } /* ---------- MODAL ---------- */ /* ============================================================ TELA INICIAL (logo fixa) — cobre a tela inteira (menos o cabeçalho, que fica por cima já que ele mesmo tem z-index maior). Primeira coisa que a pessoa vê ao entrar no painel/portal; NÃO é uma seção dentro do menu (não mexe em Visão Geral nem em nenhuma outra tela) — é uma camada à parte, sempre acessível clicando na logo do cabeçalho. Clicar na logo grande toca a animação do rotor (ver wcrTocarRotor em app.js), que ao terminar volta a mostrar a logo parada, sem sair da tela. Clicar fora da logo fecha e deixa navegar pelo menu normalmente. ============================================================ */ .wcr-rotor-splash { position: fixed; inset: 0; z-index: 300; /* Fundo liso, igual ao fundo do painel por trás — sem gradiente/brilho "aparecendo do nada" quando abre, pra não parecer uma troca de tema nem uma animação fantasma em cima da tela. */ background: var(--bg-base); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 0; pointer-events: none; transition: opacity .12s linear; } .wcr-rotor-splash.wcr-rotor-splash--show { opacity: 1; pointer-events: auto; } /* Barra do topo da splash — cópia da barra real do painel (menu, marca, início/tema/alarmes/perfil), sempre visível por cima da animação. */ .wcr-rotor-topbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-header); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); cursor: default; } .wcr-rotor-topbar-esq { display: flex; align-items: center; gap: 12px; min-width: 0; } .wcr-rotor-topbar-logo { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; } .wcr-rotor-topbar-marca { display: inline-block; font-size: 14px; letter-spacing: .01em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wcr-rotor-topbar-dir { display: flex; align-items: center; gap: 8px; } /* Nome ao lado do avatar no cabeçalho — só a partir de telas médias (768px), senão espreme demais em mobile. Era "hidden md:inline" do Tailwind, mas "md:inline" não existe no build pré-compilado (Css/tailwind-output.css), então o nome nunca aparecia em tela nenhuma — nem no desktop. */ .wcr-header-perfil-nome { display: none; } @media (min-width: 768px) { .wcr-header-perfil-nome { display: inline; } } .wcr-rotor-topbar-icone { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 999px; color: var(--text-secondary); cursor: pointer; transition: background .15s ease, color .15s ease; } .wcr-rotor-topbar-icone:hover { background: var(--bg-card-hover); color: var(--text-primary); } /* Cores próprias por ícone (config/início/tema/alarmes), mesmo padrão de "chip colorido" já usado nos cards do painel — cada um destaca com sua cor, em vez de todos ficarem no mesmo cinza neutro. */ .wcr-rotor-topbar-icone[aria-label*="cessibilidade"], .wcr-rotor-topbar-icone[aria-label*="onfigura"] { background: rgba(148, 163, 184, .16); color: #cbd5e1; } .wcr-rotor-topbar-icone[aria-label="Início"] { background: rgba(96, 165, 250, .16); color: #60a5fa; } .wcr-rotor-topbar-icone[aria-label*="tema" i] { background: rgba(167, 139, 250, .16); color: #a78bfa; } .wcr-rotor-topbar-icone[aria-label*="larmes"] { background: rgba(251, 146, 60, .16); color: #fb923c; } .wcr-rotor-topbar-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--wcr-erro); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; } .wcr-rotor-topbar-perfil { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; margin-left: 4px; border: none; border-radius: 999px; background: var(--bg-card-hover); color: var(--text-primary); cursor: pointer; } .wcr-rotor-topbar-avatar { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--accent-blue); color: #fff; flex-shrink: 0; } .wcr-rotor-topbar-nome { font-size: 13px; font-weight: 600; } .wcr-rotor-topbar-icone-wrap { position: relative; } /* Bolinha de status de conexão do cabeçalho (substitui o selo "VPN Online" fixo que ficava no canto da tela — ver #wcrStatusConexao em app.js). */ /* Ícone de servidor DENTRO de uma bolinha preenchida — tipo "(S)" com o fundo inteiro colorido (verde piscando quando conectado, vermelho fixo sem conexão) e o ícone numa cor escura por cima, que destaca mais em cima do verde/vermelho claro do que branco destacava. */ .wcr-status-conexao { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; box-sizing: border-box; } .wcr-status-conexao-icone { width: 14px; height: 14px; flex-shrink: 0; } .wcr-status-conexao--online { background: #22c55e; animation: wcrStatusConexaoPisca 3.2s ease-in-out infinite; } .wcr-status-conexao--online .wcr-status-conexao-icone { color: #052e16; } .wcr-status-conexao--offline { background: #f87171; animation: none; } .wcr-status-conexao--offline .wcr-status-conexao-icone { color: #450a0a; } @keyframes wcrStatusConexaoPisca { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Cabeçalho real do painel (dashboard/client-dashboard) — mesma altura fixa (60px) e mesmos botões de ação da barra da splash, em qualquer tela, pra nunca "pular" de tamanho trocando de seção. */ .wcr-header-slim { height: 60px; padding: 0 20px; gap: 12px; } @media (max-width: 420px) { .wcr-rotor-topbar { padding: 0 10px; gap: 6px; } .wcr-rotor-topbar-esq { gap: 8px; } .wcr-rotor-topbar-dir { gap: 2px; } .wcr-rotor-topbar-icone { width: 30px; height: 30px; } .wcr-rotor-topbar-nome { display: none; } .wcr-rotor-topbar-perfil { padding: 4px; margin-left: 0; } .wcr-rotor-dropdown { width: calc(100vw - 20px); right: -6px; } /* Com a bolinha de status somada aos ícones da direita, não sobra espaço suficiente pra esquerda nessa largura — o texto "WCR · OEM" (.wcr-rotor-topbar-marca) ficava espremido pelo overflow/ellipsis a ponto de sumir quase todo (uma faixa de ~5px, só um pedaço da letra), e aí reaparecer no tamanho normal assim que o menu abre por cima — isso é o que parecia "a logo/texto crescendo" na tela de splash. Some com o texto aqui (a logo sozinha já basta nessa largura), igual já era feito com .wcr-rotor-topbar-nome acima — em vez de deixar ele espremer pra um tamanho ilegível. */ .wcr-rotor-topbar-marca { display: none; } } /* Dropdowns da barra (notificações / perfil) — mesmo padrão dos cards do painel */ .wcr-rotor-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; max-height: 70vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); z-index: 5; cursor: default; } .wcr-rotor-notif-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text-primary); } .wcr-rotor-notif-cab span { display: flex; align-items: center; gap: 6px; } .wcr-rotor-notif-cab button { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; } .wcr-rotor-notif-lista { padding: 4px; } .wcr-rotor-notif-item { display: block; padding: 10px 12px; margin: 2px; border-left: 3px solid var(--wcr-erro); border-radius: 6px; background: var(--bg-card-hover); } .wcr-rotor-notif-item + .wcr-rotor-notif-item { margin-top: 6px; } .wcr-rotor-notif-usina { font-size: 12.5px; font-weight: 700; color: var(--text-primary); } .wcr-rotor-notif-msg { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; } .wcr-rotor-notif-hora { font-size: 10.5px; color: var(--accent-blue); margin-top: 3px; } .wcr-rotor-notif-vazio { padding: 24px 14px; text-align: center; font-size: 12.5px; color: var(--text-secondary); } .wcr-rotor-perfil-dropdown { width: 260px; padding: 6px; } .wcr-rotor-perfil-cab { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .wcr-rotor-perfil-avatar-grande { width: 38px; height: 38px; flex-shrink: 0; } .wcr-rotor-perfil-nome { font-size: 13.5px; font-weight: 700; color: var(--text-primary); } .wcr-rotor-perfil-email { font-size: 11px; color: var(--text-secondary); } .wcr-rotor-perfil-cargo { font-size: 10.5px; color: var(--accent-blue); margin-top: 1px; } .wcr-rotor-perfil-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: 8px; color: var(--text-primary); font-size: 12.5px; text-align: left; cursor: pointer; } .wcr-rotor-perfil-item:hover { background: var(--bg-card-hover); } .wcr-rotor-perfil-sair { color: var(--wcr-erro); } .wcr-tema-dropdown { width: 160px; padding: 6px; } .wcr-tema-opcao.active { background: var(--bg-card-hover); color: var(--accent-blue); } /* Menu real (a .sidebar de sempre) aberto por cima da splash da logo — ver wcrAbrirMenuSplash em app.js. Some o clique no hambúrguer não fecha mais a splash direto: abre o menu de verdade, com as categorias de sempre, pra pessoa escolher a tela dela. */ .sidebar.wcr-sidebar-sobre-splash { z-index: 301 !important; transform: translateX(0) !important; /* Começa ABAIXO da barra de cima (60px), não por cima dela — a gaveta cobria o hambúrguer/X (mesmo z-index mais alto), escondendo o botão de verdade atrás dela; um clique de mouse de verdade acertava a gaveta, não o botão (só um .click() via JS, que ignora sobreposição visual, "funcionava"). Assim a barra de cima — com o botão — fica sempre visível e clicável por cima da gaveta. */ top: 60px !important; height: calc(100% - 60px) !important; /* Sem transição nesse estado — a sidebar tem "transition: transform .3s, width .3s" (dashboard.css) pro caso normal de abrir/fechar, mas aqui ela pula direto de "fora da tela" pra "z-index 301 por cima de tudo"; animar isso fazia parecer que a logo/X/hambúrguer cresciam ou pulavam de lugar durante a troca. Abre e fecha na hora, sem animação. */ transition: none !important; box-shadow: 8px 0 30px rgba(0, 0, 0, .45); /* A sidebar normal usa uma cor sólida opaca (--bg-sidebar), mas a barra de cima da splash é semi-transparente com blur (--bg-header, 85%) — tokens diferentes. Lado a lado nessa tela composta (menu aberto por cima da splash), a diferença de opacidade criava um degrau de cor visível bem na emenda das duas. Iguala só aqui. */ background: var(--bg-header) !important; backdrop-filter: blur(12px); /* .sidebar (dashboard.css) tem padding-top:16px fixo — sem cancelar isso aqui, o X ficava 16px mais baixo que a posição do hambúrguer que ele substitui, parecendo "descer" na troca. */ padding-top: 0 !important; } .wcr-rotor-splash-clicavel { position: relative; width: min(300px, 55vw); height: min(300px, 55vw); cursor: pointer; transition: transform .2s ease; } .wcr-rotor-splash-clicavel:hover { transform: scale(1.03); } .wcr-rotor-splash-img, .wcr-rotor-splash-clicavel video { width: 100%; height: 100%; object-fit: contain; border-radius: 999px; filter: drop-shadow(0 0 60px rgba(63, 214, 189, .25)); } .wcr-rotor-splash-marca { font-family: 'Archivo', 'Inter', sans-serif; font-weight: 800; letter-spacing: .08em; font-size: 15px; color: var(--wcr-tinta-2); text-transform: uppercase; cursor: default; } .modal-overlay { position: fixed; inset: 0; /* Precisa ficar ACIMA da tela de logo splash (.wcr-rotor-splash, z-index 300 — ver wcrAbrirTelaLogo em app.js) e da sidebar aberta por cima dela (.wcr-sidebar-sobre-splash, z-index 301): o botão flutuante "Deixar opinião" abre esse modal a qualquer momento, inclusive com a splash ainda na tela logo após o login — sem isso, o modal abria (a classe "show" era aplicada certinho) mas ficava invisível, escondido atrás da splash, dando a impressão de que o botão não fazia nada. */ z-index: 350; background: rgba(20, 26, 24, 0.55); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.show { opacity: 1; pointer-events: auto; } .modal-box { background: var(--wcr-card); color: var(--wcr-tinta); border: 1px solid var(--wcr-linha); border-radius: 14px; max-width: 540px; width: 90%; max-height: 90vh; overflow-y: auto; transform: scale(0.97); transition: transform 0.3s ease; } .modal-overlay.show .modal-box { transform: scale(1); } /* Modal maior — usado no cadastro/edição de usuário do painel interno, que tem foto + várias caixinhas de permissão e fica apertado no tamanho padrão. */ .modal-box.modal-box-lg { max-width: 820px; } /* ---------- POP-UP DE OPINIÃO (painel interno + portal do cliente) ---------- */ /* Linha divisória sob o título de QUALQUER modal (usina/OS/item/opinião) — sem isso o cabeçalho (título + X) só tinha uma margem embaixo, sem nenhuma separação visual real do corpo, e tudo parecia um bloco só. */ #modal .modal-box > .flex.items-center.justify-between { padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } /* #modal só é usado dentro do painel/portal (openModal vem de tabelasfuncoes.js, que o site público nem carrega) — e o painel é sempre escuro/azul (ver body.modo-painel acima), inclusive quando o tema do SITE é "claro". Só o contraste muda essa cor de verdade. */ html[data-tema="contraste"] #modal .modal-box > .flex.items-center.justify-between { border-bottom-color: var(--wcr-linha); } .wcr-opiniao-modal { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 1.1rem; } /* Caixa mais larga que o modal padrão (540px) — com o cartão de contexto, a linha de "enviando como", as categorias e o contador de caracteres, o tamanho padrão ficava espremido; 640px acomoda tudo numa leitura mais confortável sem chegar no modal-box-lg (820px, pensado pra formulário de usuário com foto+permissões, largo demais pra um textarea). */ .modal-box.wcr-opiniao-box { max-width: 640px; } /* "Enviando como" — mostra pra pessoa quem/qual perfil vai assinar o comentário antes de mandar (o mesmo nome+cargo que aparece pro Master na tela Comentários), em vez de só descobrir isso depois, no e-mail. */ .wcr-opiniao-quem { display: flex; align-items: center; gap: 0.75rem; } .wcr-opiniao-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--wcr-agua), #3B82F6); } .wcr-opiniao-quem-texto { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; } .wcr-opiniao-quem-rotulo { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wcr-tinta-2); opacity: .8; } .wcr-opiniao-quem-nome { font-size: 0.875rem; font-weight: 600; color: var(--wcr-tinta); } .wcr-opiniao-quem-cargo { font-weight: 400; color: var(--wcr-tinta-2); } /* Categorias — chips de seleção única, pra quem lê (Master, tela Comentários) triar mais rápido do que ler o texto inteiro pra saber do que se trata. */ .wcr-opiniao-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wcr-opiniao-chip { padding: 0.4rem 0.875rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); color: var(--wcr-tinta-2); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } html[data-tema="contraste"] .wcr-opiniao-chip { background: rgba(0,0,0,.02); border-color: var(--wcr-linha); } .wcr-opiniao-chip:hover { border-color: color-mix(in srgb, var(--wcr-agua) 40%, transparent); color: var(--wcr-tinta); } .wcr-opiniao-chip.active { background: color-mix(in srgb, var(--wcr-agua) 18%, transparent); border-color: var(--wcr-agua); color: var(--wcr-agua); } .wcr-opiniao-campo-cabecalho { display: flex; align-items: baseline; justify-content: space-between; } .wcr-opiniao-campo-cabecalho .form-label { margin-bottom: 0; } .wcr-opiniao-contador { font-size: 0.6875rem; color: var(--wcr-tinta-2); opacity: .7; font-variant-numeric: tabular-nums; } /* Bloco de abertura (ícone + texto de contexto) — vira um cartão próprio em vez de ícone e parágrafo soltos lado a lado, pra não parecer desalinhado. */ .wcr-opiniao-intro { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--wcr-agua) 7%, transparent); border: 1px solid color-mix(in srgb, var(--wcr-agua) 18%, transparent); } .wcr-opiniao-intro p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--wcr-tinta-2); } .wcr-opiniao-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--wcr-agua) 30%, transparent), color-mix(in srgb, #3B82F6 30%, transparent)); color: var(--wcr-agua); } .wcr-opiniao-campo { display: flex; flex-direction: column; gap: 0.5rem; } .wcr-opiniao-campo .form-label { margin-bottom: 0; } .wcr-opiniao-textarea { line-height: 1.5; resize: vertical; min-height: 100px; } .wcr-opiniao-textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcr-agua) 20%, transparent); } .wcr-opiniao-check { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: background .15s ease, border-color .15s ease; } html[data-tema="contraste"] .wcr-opiniao-check { background: rgba(0,0,0,.02); border-color: var(--wcr-linha); } .wcr-opiniao-check:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } .wcr-opiniao-check input[type="checkbox"] { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--wcr-agua); cursor: pointer; } .wcr-opiniao-check-text { font-size: 0.8125rem; color: var(--wcr-tinta-2); line-height: 1.45; } .wcr-opiniao-botoes { display: flex; gap: 0.75rem; } .wcr-opiniao-btn-secundario, .wcr-opiniao-btn-primario { flex: 1; padding: 0.7rem 1rem; border-radius: 10px; font-size: 0.875rem; font-weight: 600; transition: transform .15s ease, background .15s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .wcr-opiniao-btn-secundario { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--wcr-tinta-2); } html[data-tema="contraste"] .wcr-opiniao-btn-secundario { background: rgba(0,0,0,.03); border-color: var(--wcr-linha); } .wcr-opiniao-btn-secundario:hover { background: rgba(255,255,255,.08); color: var(--wcr-tinta); } .wcr-opiniao-btn-primario { background: var(--wcr-agua); color: #fff; border: 1px solid transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--wcr-agua) 35%, transparent); } .wcr-opiniao-btn-primario:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--wcr-agua) 45%, transparent); } .wcr-opiniao-aviso { margin: 0; font-size: 0.75rem; text-align: center; color: var(--wcr-tinta-2); opacity: .75; } .wcr-opiniao-fallback-whats { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -0.25rem; padding: 0.6875rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); color: var(--wcr-tinta); font-size: 0.844rem; font-weight: 600; text-decoration: none; } html[data-tema="contraste"] .wcr-opiniao-fallback-whats { border-color: var(--wcr-linha); } /* Balão flutuante que abre esse modal (dashboard.html/client-dashboard.html) — mesma cor de destaque do painel (var(--wcr-agua)) usada dentro do modal, em vez do azul genérico do Tailwind, pra não parecer duas cores desencontradas quando o modal abre. */ .wcr-opiniao-float { background: var(--wcr-agua); box-shadow: 0 10px 25px color-mix(in srgb, var(--wcr-agua) 35%, transparent); } .wcr-opiniao-float:hover { background: var(--wcr-agua); filter: brightness(1.1); } /* ---------- CHAT DO STEVEN — bolinhas de "digitando..." ---------- */ .wcr-steven-dot { animation: wcrStevenPulse 1.1s ease-in-out infinite; } .wcr-steven-dot:nth-child(2) { animation-delay: .15s; } .wcr-steven-dot:nth-child(3) { animation-delay: .3s; } @keyframes wcrStevenPulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ---------- FORMULÁRIOS (legado) ---------- */ .form-input { width: 100%; background: var(--wcr-card); border: 1px solid var(--wcr-linha); border-radius: 8px; padding: 0.625rem 0.875rem; font-size: 0.875rem; color: var(--wcr-tinta); transition: border-color 0.2s ease; } .form-input:focus { outline: none; border-color: var(--wcr-verde); } /* Campo de telefone com o "55+" (DDI do Brasil) fixo do lado de fora do input — o DDI é só visual, nunca faz parte do valor digitado/salvo (ver wcrFormatarTelefoneExibicao/wcrFormatarTelefoneInput em tabelasfuncoes.js). */ .wcr-tel-field { display: flex; align-items: stretch; background: var(--wcr-card); border: 1px solid var(--wcr-linha); border-radius: 8px; overflow: hidden; transition: border-color 0.2s ease; } .wcr-tel-field:focus-within { border-color: var(--wcr-verde); } .wcr-tel-ddi { flex-shrink: 0; display: flex; align-items: center; padding: 0 0.75rem; font-size: 0.8rem; font-weight: 700; color: var(--wcr-tinta-2); background: rgba(255,255,255,.04); border-right: 1px solid var(--wcr-linha); user-select: none; } .wcr-tel-field .wcr-tel-input, .wcr-secao-modal .wcr-tel-field .wcr-tel-input { border: none !important; background: transparent !important; border-radius: 0 !important; } .wcr-tel-field .wcr-tel-input:focus { outline: none; } .form-label { display: block; font-size: 0.75rem; color: var(--wcr-tinta-2); margin-bottom: 0.375rem; font-weight: 500; } /* ---------- LOGO WCR ---------- */ .wcr-logo { display: flex; align-items: center; justify-content: center; font-family: 'Archivo', 'Inter', sans-serif; font-weight: 800; color: #ffffff; letter-spacing: 0.04em; background: var(--wcr-verde); border-radius: 10px; overflow: hidden; flex-shrink: 0; text-shadow: none; } .wcr-logo span { position: relative; z-index: 2; } .wcr-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ============================================================ ANIMAÇÕES ============================================================ */ @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; } /* Sem opacity:0 no "from" de propósito — a troca de seção do dashboard reinicia essa animação a cada clique (ver switchSection em tabelasfuncoes.js), e clicando mais rápido que os 0.35s dela (comum, principalmente clicando na mesma aba ou entre abas várias vezes seguidas) a tela ficava presa numa reinicialização atrás da outra — sempre no frame inicial, invisível, até os cliques pararem. Removendo o opacity da animação, o conteúdo NUNCA fica invisível, não importa quantas vezes a animação for reiniciada no meio do caminho; só o leve deslize continua. */ @keyframes contentFade { from { opacity: 1; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .content-fade { animation: contentFade 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Mesma categoria de bug que .content-fade/.card-animated (ver comentários acima): opacity:0 como estado inicial só é seguro se a animação for GARANTIDA de rodar até o fim. Com "Reduzir animações" ligado (ver data-acess-motion em global.css — reduz toda animation-duration pra 0.01ms), animações praticamente instantâneas às vezes nunca chegam a aplicar o keyframe final no navegador — o elemento fica preso no opacity:0 do estado-base pra sempre. Isso só afetava os cards da Visão Geral (única tela que usa essa classe), que ficavam com a página em branco logo no primeiro carregamento pra quem usa essa preferência de acessibilidade. Sem opacity na animação, o card nunca fica invisível. */ .animate-fade-in { opacity: 1; animation: fadeInUp 0.5s ease-out forwards; } @keyframes fadeInUp { from { opacity: 1; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 0.8s linear infinite; } /* ---------- SCROLL REVEAL (sutil) ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.05s; } .reveal-delay-2 { transition-delay: 0.10s; } .reveal-delay-3 { transition-delay: 0.15s; } .reveal-delay-4 { transition-delay: 0.20s; } .reveal-delay-5 { transition-delay: 0.25s; } .reveal-delay-6 { transition-delay: 0.30s; } .reveal-left { transform: translateX(-18px); } .reveal-left.visible { transform: translateX(0); } /* ---------- BARRA DE PROGRESSO DE LEITURA ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1200; /* acima do cabeçalho sticky */ background: transparent; pointer-events: none; } #scrollProgressBar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--wcr-verde), var(--wcr-agua, var(--wcr-verde))); transition: width 0.1s linear; } body.modo-painel .scroll-progress { display: none; } /* ---------- BOTÃO "VOLTAR AO TOPO" ---------- */ .back-to-top { position: fixed; bottom: 24px; left: 24px; z-index: 998; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wcr-linha); background: var(--wcr-card); color: var(--wcr-verde); display: flex; align-items: center; justify-content: center; box-shadow: var(--wcr-sombra); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease, background 0.2s ease; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { border-color: var(--wcr-verde); background: var(--wcr-verde-soft); } .back-to-top svg { width: 18px; height: 18px; } body.modo-painel .back-to-top { display: none; } @media (max-width: 640px) { .back-to-top { left: 16px; bottom: 16px; width: 40px; height: 40px; } } /* ---------- SCROLLBAR FINA (elementos internos) ---------- */ .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--wcr-linha); border-radius: 4px; } /* ============================================================ ACESSIBILIDADE — Botão Pílula + Painel lateral ============================================================ */ /* --- BOTÃO NOVO (Pílula Moderna) --- */ .acess-fab { position: fixed; bottom: 28px; right: 24px; z-index: 9998; height: 44px; padding: 0 16px 0 12px; border-radius: 99px; display: flex; align-items: center; gap: 8px; background: var(--wcr-card); border: 1px solid var(--wcr-linha); color: var(--wcr-tinta); cursor: pointer; transition: all .25s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.08); font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; } .acess-fab:hover { border-color: var(--wcr-verde); color: var(--wcr-verde); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } .acess-fab .acess-fab-icone { width: 18px; height: 18px; flex-shrink: 0; } .acess-fab .acess-fab-texto { text-transform: uppercase; } /* Esconde o botão flutuante quando entra no dashboard (pois vai ficar dentro da gaveta) */ body.modo-painel .acess-fab { display: none !important; } /* --- PAINEL LATERAL --- */ /* No site público o tema já troca pelos ícones do cabeçalho, então o seletor de tema some do painel de acessibilidade. No dashboard esse cabeçalho fica escondido, então o seletor volta a aparecer ali — é o único jeito de ligar o alto contraste. */ .acess-tema-secao { display: none; } body.modo-painel .acess-tema-secao { display: block; } .acess-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(310px, 88vw); z-index: 10000; background: var(--wcr-card); border-left: 1px solid var(--wcr-linha); transform: translateX(105%); transition: transform .32s cubic-bezier(.22, 1, .36, 1); display: flex; flex-direction: column; padding: 20px 18px; overflow-y: auto; color: var(--wcr-tinta); } /* Sombra só com o painel aberto: fechado ele fica fora da tela (translateX(105%)), mas a sombra de 60px vazava pra dentro e escurecia a borda direita. */ .acess-panel.aberto { transform: translateX(0); box-shadow: -20px 0 60px rgba(30, 42, 38, 0.22); } .acess-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--wcr-linha); } .acess-header h3 { font-size: 1.05rem; font-weight: 700; color: var(--wcr-tinta); margin: 0; } .acess-close { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--wcr-tinta-2); border: 1px solid var(--wcr-linha); cursor: pointer; transition: background .2s, color .2s; } .acess-close:hover { background: var(--wcr-verde-soft); color: var(--wcr-tinta); } .acess-secao { margin-bottom: 18px; } .acess-secao > label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--wcr-tinta-2); margin-bottom: 9px; font-weight: 600; } .acess-temas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .tema-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; border-radius: 11px; background: transparent; border: 1px solid var(--wcr-linha); color: var(--wcr-tinta-2); font-size: .7rem; cursor: pointer; transition: all .2s; } .tema-btn svg { width: 16px; height: 16px; } .tema-btn:hover { border-color: var(--wcr-verde); color: var(--wcr-tinta); } .tema-btn.is-active { background: var(--wcr-verde-soft); border-color: var(--wcr-verde); color: var(--wcr-verde); font-weight: 600; } .acess-idiomas { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; } .lang-btn { padding: 8px 2px; border-radius: 10px; background: transparent; border: 1px solid var(--wcr-linha); color: var(--wcr-tinta-2); font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .2s; } .lang-btn:hover { border-color: var(--wcr-verde); color: var(--wcr-tinta); } .lang-btn.is-active { background: var(--wcr-verde-soft); border-color: var(--wcr-verde); color: var(--wcr-verde); } /* Dentro do painel de acessibilidade (.acess-idiomas) o idioma ativo fica verde, igual ao resto do painel (Reduzir animações, Daltonismo...) — o roxo de --wcr-idioma (site.css) é só pro seletor de idioma do cabeçalho público, não deveria vazar pra cá. */ .header-idiomas.acess-idiomas .lang-btn.is-active { background: var(--wcr-verde-soft); border-color: var(--wcr-verde); color: var(--wcr-verde); } .acess-fonte { display: flex; gap: 6px; } .acess-fonte button { flex: 1; padding: 8px 0; border-radius: 10px; background: transparent; border: 1px solid var(--wcr-linha); color: var(--wcr-tinta); font-size: .8rem; cursor: pointer; transition: all .2s; } .acess-fonte button:hover { border-color: var(--wcr-verde); } .acess-rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--wcr-linha); font-size: .7rem; color: var(--wcr-tinta-2); line-height: 1.5; } .acess-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .acess-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border-radius: 11px; background: transparent; border: 1px solid var(--wcr-linha); color: var(--wcr-tinta-2); font-size: .74rem; font-weight: 600; cursor: pointer; transition: all .2s; min-height: 42px; } .acess-toggle svg { width: 15px; height: 15px; flex-shrink: 0; } .acess-toggle:hover { border-color: var(--wcr-verde); color: var(--wcr-tinta); } .acess-toggle.is-active { background: var(--wcr-verde-soft); border-color: var(--wcr-verde); color: var(--wcr-verde); } .acess-daltonismo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; } .dalto-btn { padding: 11px 8px; border-radius: 10px; background: transparent; border: 1px solid var(--wcr-linha); color: var(--wcr-tinta-2); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; text-align: center; } .dalto-btn:hover { border-color: var(--wcr-verde); color: var(--wcr-tinta); } .dalto-btn.is-active { background: var(--wcr-verde-soft); border-color: var(--wcr-verde); color: var(--wcr-verde); } /* Estado LIGADO bem visível no painel de acessibilidade: antes era só um azul-clarinho quase igual ao desligado (dava pra não perceber que "Reduzir animações" etc. estavam ligados). Agora é preenchimento sólido + texto de alto contraste + "✓" nos botões liga/desliga. */ .tema-btn.is-active, .header-idiomas.acess-idiomas .lang-btn.is-active, .acess-toggle.is-active, .dalto-btn.is-active { background: var(--wcr-verde); border-color: var(--wcr-verde); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcr-verde) 30%, transparent); } .tema-btn.is-active svg, .acess-toggle.is-active svg { color: inherit; } .acess-toggle.is-active::before { content: "\2713"; font-weight: 800; margin-right: -2px; } /* tema escuro: o destaque é o turquesa (--wcr-agua), que aparece bem no fundo escuro — o azul-petróleo sólido sumia nele */ html[data-tema="escuro"] .tema-btn.is-active, html[data-tema="escuro"] .header-idiomas.acess-idiomas .lang-btn.is-active, html[data-tema="escuro"] .acess-toggle.is-active, html[data-tema="escuro"] .dalto-btn.is-active { background: var(--wcr-agua); border-color: var(--wcr-agua); color: #04121a; box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcr-agua) 35%, transparent); } /* contraste: destaque amarelo, texto preto */ html[data-tema="contraste"] .tema-btn.is-active, html[data-tema="contraste"] .header-idiomas.acess-idiomas .lang-btn.is-active, html[data-tema="contraste"] .acess-toggle.is-active, html[data-tema="contraste"] .dalto-btn.is-active { color: #000; } .acess-reset { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 11px; background: transparent; border: 1px solid var(--wcr-erro); color: var(--wcr-erro); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .2s; margin-top: 4px; } .acess-reset svg { width: 15px; height: 15px; } .acess-reset:hover { background: rgba(179, 64, 42, 0.1); } .acess-svg-filtros { position: absolute; width: 0; height: 0; overflow: hidden; } /* Skip link */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 10001; background: var(--wcr-verde); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: .88rem; font-weight: 700; text-decoration: none; transform: translateY(-240%); transition: transform .18s ease; } .skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; } /* ---------- RECURSOS DE ACESSIBILIDADE (data-acess-*) ---------- */ html[data-acess-espacamento="on"] body { line-height: 1.9; } html[data-acess-espacamento="on"] p { margin-bottom: 1.15em; } html[data-acess-espacamento="on"] h1, html[data-acess-espacamento="on"] h2, html[data-acess-espacamento="on"] h3 { margin-bottom: .7em; } html[data-acess-dislexia="on"] body, html[data-acess-dislexia="on"] body * { font-family: "OpenDyslexic", "Comic Sans MS", "Comic Sans", Verdana, Tahoma, sans-serif !important; letter-spacing: .02em !important; word-spacing: .12em; } html[data-acess-links="on"] a { text-decoration: underline !important; text-underline-offset: 3px; } /* Modo leitura: esconde distrações e centraliza o conteúdo */ html[data-acess-leitura="on"] #siteFooter, html[data-acess-leitura="on"] #whatsappFloat { display: none !important; } /* Header fica visível mas só com a engrenagem */ html[data-acess-leitura="on"] #siteHeader { display: flex !important; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--wcr-card); border-bottom: 1px solid var(--wcr-linha); padding: 10px 24px; } html[data-acess-leitura="on"] #siteHeader .brand, html[data-acess-leitura="on"] #siteHeader .menu-principal, html[data-acess-leitura="on"] #siteHeader .header-acoes .wcr-btn, html[data-acess-leitura="on"] #siteHeader #menuToggle { display: none !important; } html[data-acess-leitura="on"] #siteHeader .header-acoes { margin-left: auto; } html[data-acess-leitura="on"] #siteHeader .header-inner { justify-content: flex-end; } html[data-acess-leitura="on"] #app { max-width: 960px; margin-left: auto !important; margin-right: auto !important; } html[data-acess-foco="on"] :focus-visible { outline: 3px solid var(--wcr-verde) !important; outline-offset: 2px !important; } html[data-acess-cursor="on"] body, html[data-acess-cursor="on"] body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M4 3 L4 32 L13 24 L19 40 L26 37 L20 21 L30 21 Z' fill='%23ffffff' stroke='%23000000' stroke-width='3'/%3E%3C/svg%3E") 6 4, auto !important; } html[data-acess-clique="on"] button, html[data-acess-clique="on"] a, html[data-acess-clique="on"] [role="button"] { min-height: 44px; min-width: 44px; } html[data-acess-motion="on"] *, html[data-acess-motion="on"] *::before, html[data-acess-motion="on"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Daltonismo */ html[data-daltonismo="protanopia"] { filter: url(#dalto-protanopia); } html[data-daltonismo="deuteranopia"] { filter: url(#dalto-deuteranopia); } html[data-daltonismo="tritanopia"] { filter: url(#dalto-tritanopia); } html[data-daltonismo="acromatopsia"] { filter: url(#dalto-acromatopsia); } /* Sidebar/floats: transição suave */ #whatsappFloat { transition: transform .25s ease, opacity .25s ease, background .25s ease; } .acess-fab { transition: background .25s ease, transform .25s ease, border-color .25s ease, opacity .25s ease; } @media (prefers-reduced-motion: reduce) { .acess-panel, .acess-fab { transition: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ===== ACESSIBILIDADE — escopo restrito ao conteúdo ===== */ /* Espaçamento */ html[data-acess-espacamento="on"] .site-page p, html[data-acess-espacamento="on"] .site-page li, html[data-acess-espacamento="on"] .site-page dd { line-height: 2; } /* Dislexia */ html[data-acess-dislexia="on"] .site-page { font-family: 'OpenDyslexic', sans-serif; letter-spacing: 0.04em; word-spacing: 0.08em; } /* Links sublinhados */ html[data-acess-links="on"] .site-page a[href] { text-decoration: underline; text-underline-offset: 3px; } /* Modo leitura */ html[data-acess-leitura="on"] .site-page > section > .container, html[data-acess-leitura="on"] .site-page > section > div:not(.galeria-carrossel):not(.mapa-caixa):not(.depo-grade):not(.grade-cards):not(.passos):not(.bloco-conecta) { max-width: 700px; margin-left: auto; margin-right: auto; } /* Foco visível — também no dashboard (modo-painel) */ html[data-acess-foco="on"] .site-page *:focus, html[data-acess-foco="on"] body.modo-painel *:focus { outline: 3px solid var(--wcr-verde, #2a9d5c); outline-offset: 2px; } /* Cursor grande — também no dashboard (modo-painel) */ html[data-acess-cursor="on"] .site-page, html[data-acess-cursor="on"] .site-page *, html[data-acess-cursor="on"] body.modo-painel, html[data-acess-cursor="on"] body.modo-painel * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 2L20 16L12 17L9 28L4 2Z' fill='%232a9d5c' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 4 2, auto; } /* Botões maiores — também no dashboard (modo-painel) */ html[data-acess-clique="on"] .site-page button, html[data-acess-clique="on"] .site-page a.wcr-btn, html[data-acess-clique="on"] .site-page input[type="button"], html[data-acess-clique="on"] .site-page input[type="submit"], html[data-acess-clique="on"] body.modo-painel button, html[data-acess-clique="on"] body.modo-painel a { min-height: 48px; min-width: 48px; padding-top: 12px; padding-bottom: 12px; } /* Reduzir animações — também no dashboard (modo-painel) */ html[data-acess-motion="on"] .site-page *, html[data-acess-motion="on"] .site-page *::before, html[data-acess-motion="on"] .site-page *::after, html[data-acess-motion="on"] body.modo-painel *, html[data-acess-motion="on"] body.modo-painel *::before, html[data-acess-motion="on"] body.modo-painel *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } #leituraSair { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 99997; padding: 10px 20px; border-radius: 99px; background: var(--wcr-tinta); color: var(--wcr-papel); font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: opacity 0.3s, transform 0.3s; opacity: 0; pointer-events: none; } /* ============================================================ MODAL "NOVO/EDITAR USUÁRIO" — seções com cartão próprio (em vez de só uma linha divisória), rótulo com ícone, seletor de perfil em pílulas e avatar com badge de câmera pra trocar a foto. ============================================================ */ .wcr-secao-modal { position: relative; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px 20px 18px 22px; overflow: hidden; transition: border-color .2s ease, background .2s ease; } .wcr-secao-modal:hover { border-color: rgba(255,255,255,.15); } /* Barrinha de destaque na lateral — cor varia por seção (ver modificadores --dados/--foto/--permissoes abaixo), só pra diferenciar visualmente os blocos em vez de tudo igual/monótono. */ .wcr-secao-modal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wcr-agua, #3FD6BD); opacity: .6; } .wcr-secao-modal--foto::before { background: #f59e0b; } .wcr-secao-modal--permissoes::before { background: #818cf8; } .wcr-secao-modal-titulo { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wcr-agua, #3FD6BD); margin: 0 0 14px; } .wcr-secao-modal-titulo svg { width: 26px; height: 26px; flex-shrink: 0; padding: 5px; box-sizing: border-box; border-radius: 8px; background: rgba(63,214,189,.14); color: var(--wcr-agua, #3FD6BD); } .wcr-secao-modal--foto .wcr-secao-modal-titulo { color: #fbbf24; } .wcr-secao-modal--foto .wcr-secao-modal-titulo svg { background: rgba(245,158,11,.14); color: #fbbf24; } .wcr-secao-modal--permissoes .wcr-secao-modal-titulo { color: #a5b4fc; } .wcr-secao-modal--permissoes .wcr-secao-modal-titulo svg { background: rgba(129,140,248,.16); color: #a5b4fc; } .wcr-radio-group { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08); } .wcr-radio-pill { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary, #94a3b8); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .wcr-radio-pill svg { width: 13px; height: 13px; flex-shrink: 0; } .wcr-radio-pill input { position: absolute; opacity: 0; width: 0; height: 0; } .wcr-radio-pill:hover { color: var(--wcr-tinta, #E8F0F5); background: rgba(255,255,255,.05); } .wcr-radio-pill.active { background: var(--wcr-verde); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); } /* Pílulas de usina no checklist "Abas que esse cliente vê, por usina" (modal de usuário e Cadastros → Permissões) — uma pílula por usina liberada, escolhe qual delas mostra o checklist categorizado abaixo. */ .wcr-usina-pill { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #94a3b8); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .wcr-usina-pill:hover { color: var(--wcr-tinta, #E8F0F5); border-color: rgba(255,255,255,.22); } .wcr-usina-pill.active { background: #2563eb; color: #fff; border-color: transparent; } /* Grupo de usina na sidebar do portal do cliente (client-dashboard.html) e no "Dados das Usinas" interno (dashboard.html) — cabeçalho com o nome da usina (acordeão: só um grupo aberto por vez) e as abas liberadas pra ela dentro, agrupadas por categoria. Compartilhado (não escopado a uma view só) porque as duas telas reaproveitam initClientDashboard(). */ .wcr-usina-grupo { margin-bottom: 2px; } .wcr-usina-grupo-cabecalho { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: transparent; border: none; cursor: pointer; color: #cbd5e1; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; transition: color .15s ease; } .wcr-usina-grupo-cabecalho:hover { color: #f1f5f9; } .wcr-usina-grupo-chevron { transition: transform .18s ease; } .wcr-usina-grupo-chevron.is-aberto { transform: rotate(180deg); } .wcr-usina-grupo-corpo { padding: 2px 8px 10px; } .wcr-usina-grupo-categoria { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; } .client-tab-painel, #clienteAbaConteudo > div { animation: clientFadeIn .2s ease both; } @keyframes clientFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .wcr-avatar-upload { position: relative; flex-shrink: 0; } .wcr-avatar-upload-img { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; overflow: hidden; background: #000; border: 2px solid rgba(255,255,255,.14); box-shadow: 0 0 0 4px rgba(63,214,189,.1); } .wcr-avatar-upload-badge { position: absolute; right: -2px; bottom: -2px; width: 27px; height: 27px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--wcr-verde); border: 2px solid var(--wcr-card, #17302A); color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: background .15s ease, transform .15s ease; } .wcr-avatar-upload-badge:hover { background: var(--wcr-verde-2, var(--wcr-verde)); transform: scale(1.08); } .wcr-avatar-upload-badge svg { width: 13px; height: 13px; } /* ============================================================ TABELA "USUÁRIOS" — linha com avatar, usinas como chips (em vez de texto corrido) e ações como botões de ícone. ============================================================ */ .wcr-usuario-row td { vertical-align: top; } .wcr-usuario-row { transition: background .12s ease; } .wcr-usuario-row:hover { background: rgba(255,255,255,.025); } .wcr-usuario-avatar { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: #000; border: 1.5px solid rgba(255,255,255,.14); } .wcr-usuario-avatar--sm { width: 26px; height: 26px; font-size: 10.5px; border-width: 1px; } .wcr-usina-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: var(--text-secondary, #94a3b8); white-space: nowrap; } .wcr-usina-chip--mais { background: rgba(63,214,189,.12); border-color: rgba(63,214,189,.28); color: var(--wcr-agua, #3FD6BD); } .wcr-usina-chip--todas { background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.28); color: #c084fc; } .wcr-usina-chip--vazia { background: transparent; border-style: dashed; color: var(--text-secondary, #64748b); } .wcr-acao-btn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 7px; color: var(--text-secondary, #94a3b8); transition: background .15s ease, color .15s ease; } .wcr-acao-btn:hover { background: rgba(255,255,255,.07); } .wcr-acao-btn svg { width: 15px; height: 15px; } .wcr-acao-btn--editar:hover { color: #60a5fa; } .wcr-acao-btn--pausar:hover { color: #fbbf24; } .wcr-acao-btn--ativar:hover { color: #4ade80; } .wcr-acao-btn--excluir:hover { color: #f87171; } /* Campos de formulário dentro do modal — anel sólido (não borrado) ao focar, um pouco mais chamativo que o .form-input padrão do resto do site. */ .wcr-secao-modal .form-input { background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.1); } .wcr-secao-modal .form-input:focus { border-color: var(--wcr-agua, #3FD6BD); box-shadow: 0 0 0 3px rgba(63,214,189,.18); } .wcr-secao-modal .form-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary, #94a3b8); } /* ============================================================ COMPONENTES DO PAINEL DA USINA (chat, arquivos, máquinas, timeline, foto) — usados tanto no Painel do Cliente (client-dashboard.html, que já tinha essas regras no próprio