/* WellSystem — paleta teal/slate, tema claro/escuro, 100% responsivo. */ :root{ /* Marca: vinho/bordô suave (aplicado com sutileza). Vermelho vivo fica só p/ alertas. */ --brand:#9E2A3B; --brand-2:#7f2230; --brand-3:#b23c4d; --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#fdfbfb; --border:#e6e2e3; --text:#1a1416; --muted:#6b6167; --ok:#16A34A; --err:#DC2626; --warn:#D97706; --info:#0284C7; --shadow:0 1px 3px rgba(26,20,22,.07); --shadow-lg:0 10px 30px -12px rgba(158,42,59,.20); --grad:linear-gradient(160deg,#f8f9fb 0%,#eef0f4 55%,#e7eaef 100%); --grad-brand:linear-gradient(135deg,#9e2a3b 0%,#b23c4d 55%,#7f2230 100%); /* Degradê do topo: mais fechado e um pouco mais escuro que a versão anterior (era .96 de branco quase puro descendo para #e4e7ec, quase plano). Clareado depois de um primeiro ajuste que ficou pesado demais: o contraste separa o topo do conteúdo sem escurecer a barra. */ --top-bg:linear-gradient(180deg,rgba(242,244,248,.97) 0%,rgba(221,225,233,.97) 100%); } @media (prefers-color-scheme:dark){ :root{ --brand:#E0687A; --brand-2:#c94f63; --brand-3:#eb8496; --bg:#14100F; --surface:#211A1C; --surface-2:#2a2124; --border:#3a2f32; --text:#ECE6E7; --muted:#a3979b; --ok:#22C55E; --err:#EF4444; --warn:#F59E0B; --info:#38BDF8; --shadow:0 1px 3px rgba(0,0,0,.45); --shadow-lg:0 12px 34px -14px rgba(0,0,0,.6); --grad:linear-gradient(135deg,#140d0f 0%,#181113 55%,#1b1215 100%); --grad-brand:linear-gradient(135deg,#e0687a 0%,#c94f63 55%,#eb8496 100%); --top-bg:linear-gradient(180deg,rgba(26,19,21,.90) 0%,rgba(17,12,14,.90) 100%); } } /* Temas de COR (troca a marca) — aplicados via data-cor no */ :root[data-cor="azul"]{--brand:#1d4ed8;--brand-2:#1e40af;--brand-3:#3b82f6;--grad-brand:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 55%,#0ea5e9 100%);--shadow-lg:0 10px 30px -12px rgba(29,78,216,.22)} :root[data-cor="preto"]{--brand:#111827;--brand-2:#000000;--brand-3:#374151;--grad-brand:linear-gradient(135deg,#111827 0%,#374151 55%,#0b0f19 100%);--shadow-lg:0 10px 30px -12px rgba(0,0,0,.3)} :root[data-cor="verde"]{--brand:#16a34a;--brand-2:#15803d;--brand-3:#22c55e;--grad-brand:linear-gradient(135deg,#16a34a 0%,#22c55e 55%,#4ade80 100%);--shadow-lg:0 10px 30px -12px rgba(22,163,74,.22)} /* Modo CLARO/ESCURO manual (sobrepõe o do sistema) */ :root[data-theme="dark"]{--bg:#14100F;--surface:#211A1C;--surface-2:#2a2124;--border:#3a2f32;--text:#ECE6E7;--muted:#a3979b;--grad:linear-gradient(135deg,#140d0f 0%,#181113 55%,#1b1215 100%);--top-bg:linear-gradient(180deg,rgba(26,19,21,.90) 0%,rgba(17,12,14,.90) 100%);--shadow:0 1px 3px rgba(0,0,0,.45)} :root[data-theme="light"]{--bg:#F8FAFC;--surface:#FFFFFF;--surface-2:#fdfbfb;--border:#e6e2e3;--text:#1a1416;--muted:#6b6167;--grad:linear-gradient(160deg,#f8f9fb 0%,#eef0f4 55%,#e7eaef 100%);--top-bg:linear-gradient(180deg,rgba(242,244,248,.97) 0%,rgba(221,225,233,.97) 100%);--shadow:0 1px 3px rgba(26,20,22,.07)} /* Controle de tema no topo */ .ws-tema{display:inline-flex;align-items:center;position:relative;flex-shrink:0} .ws-tema-btn{background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:14px;padding:5px 8px;color:var(--text);line-height:1} .ws-tema-btn:hover{border-color:var(--brand)} .ws-tema-pop{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border); border-radius:10px;padding:8px;gap:6px;align-items:center;box-shadow:var(--shadow-lg);z-index:9999} .ws-tema.open .ws-tema-pop{display:flex} .ws-tema-pop b{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:inline-block} .ws-tema-pop b.on{border-color:var(--text)} .ws-tema-pop .c-vinho{background:#9E2A3B}.ws-tema-pop .c-azul{background:#1d4ed8}.ws-tema-pop .c-preto{background:#111827}.ws-tema-pop .c-verde{background:#16a34a} .ws-tema-pop .ws-tema-claroescuro{background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:14px;padding:2px 6px;color:var(--text);margin-left:2px} *{box-sizing:border-box} /* Rede de segurança 100% responsiva: nada (header, tabela, modal, imagem esquecida) consegue forçar rolagem horizontal na página, em nenhuma tela de celular. */ html,body{max-width:100%;overflow-x:hidden} img,svg,video{max-width:100%} html{min-height:100%; /* CORPO FIXO — sem pulo lateral. Ao abrir/fechar algo na tela o conteudo muda de altura; quando isso faz a barra de rolagem vertical aparecer ou sumir, a largura util muda e a pagina INTEIRA salta para o lado. scrollbar-gutter reserva esse espaco de uma vez, entao a largura nunca muda e nada se desloca. */ scrollbar-gutter:stable} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);font-size:15px; background:var(--grad) fixed;min-height:100vh} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} code{background:rgba(125,125,125,.15);padding:1px 5px;border-radius:4px;font-size:.9em} /* Marca */ .ws-brand{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0 0 4px} .ws-brand span,.ws-brand-sm span{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ws-brand-sm{font-size:20px;font-weight:800} .ws-brand-sm span{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ws-logo{height:56px;width:auto;max-width:250px;display:block;object-fit:contain;flex:none} .ws-logo-lg{max-height:70px;max-width:100%;width:auto;display:block;margin:0 auto 8px;object-fit:contain} .ws-muted{color:var(--muted)} /* Topo / nav — logo à esquerda, menu no centro, usuário à direita (ORIGINAL). */ .ws-top{display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--top-bg); backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(158,42,59,.07),var(--shadow); flex-wrap:wrap;position:sticky;top:0;z-index:20} .ws-top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-brand)} /* Cabeçalho em 2 linhas — linha 1 discreta (selo pequeno + utilidades), linha 2 = marca + MENU verdadeiramente centralizado na página (grid de 3 colunas: marca | menu centrado | espaço). */ .ws-top-wrap{position:sticky;top:0;z-index:5000;background:var(--top-bg); backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(158,42,59,.07),var(--shadow)} .ws-top-wrap::before{content:"";display:block;height:3px;background:var(--grad-brand)} /* Linha da MARCA na base do topo — separa o cabeçalho do conteúdo (acima dos cards). Segue a cor do tema/white-label. */ .ws-top-wrap::after{content:"";display:block;height:3px;background:var(--grad-brand);opacity:.9} .ws-top-l1{display:flex;align-items:center;gap:10px;padding:5px 18px;border-bottom:1px dashed var(--border); font-size:12.5px;flex-wrap:wrap;row-gap:6px; /* Degradê suave na cor do TEMA (theme-aware) — elegante e sem prejudicar a leitura (tinta baixa). */ background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 12%,transparent) 0%,transparent 78%)} /* Preenchimento elástico da linha 1 do topo — em telas largas empurra os ícones/seletor/usuário pra direita; em telas estreitas vira "quebra de linha" forçada (flex-basis:100%), pra não espremer nem estourar a largura da tela com tudo numa linha só. */ .ws-top-fill{flex:1 1 auto} @media(max-width:640px){ .ws-top-fill{flex-basis:100%;height:0} .ws-top-l1 .ws-nav-cidade{flex:1 1 100%;width:100%;margin-top:2px} .ws-top-l1 .ws-user{flex:1 1 100%;width:100%;justify-content:flex-end;margin-top:2px} } .ws-top-selo{display:inline-flex;flex:none;opacity:.9;transition:opacity .15s} .ws-top-selo:hover{opacity:1} .ws-top-selo img{width:24px;height:24px;object-fit:contain;border-radius:6px;display:block} .ws-top-l2{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 18px 12px} .ws-top-marca{display:flex;justify-self:start;align-items:center;padding:8px 0 0 18px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))} .ws-top-l2 .ws-nav{flex:none;justify-content:flex-start;justify-self:start;margin-left:clamp(40px,6vw,95px);margin-right:0} .ws-top-spacer{justify-self:end} @media(max-width:900px){ .ws-top-l2{grid-template-columns:auto 1fr} .ws-top-spacer{display:none} .ws-top-l2 .ws-nav{justify-self:start;overflow-x:auto;max-width:100%;margin-left:10px} } .ws-nav{display:flex;gap:2px;flex:1;flex-wrap:nowrap;justify-content:flex-start;align-items:center;min-width:0;overflow:visible; font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,sans-serif} .ws-nav a{padding:9px 11px;border-radius:8px;color:var(--text);font-weight:600;font-size:14.5px;letter-spacing:.2px; transition:.15s;white-space:nowrap;flex:0 0 auto} .ws-nav a.on,.ws-nav a:hover{background:var(--grad-brand);color:#fff;text-decoration:none;box-shadow:var(--shadow-lg)} /* Menu agrupado (dropdown por correlação) */ .ws-grp{position:relative;display:flex;flex-direction:column;align-items:flex-start} .ws-grp-lbl{padding:9px 12px;border-radius:8px;color:var(--text);font-weight:600;font-size:15px;background:none;border:0;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:3px;transition:.15s} .ws-grp-lbl::after{content:"▾";font-size:10px;opacity:.7;transition:transform .15s} .ws-grp.open .ws-grp-lbl::after,.ws-grp:hover .ws-grp-lbl::after{transform:rotate(180deg)} /* "Página atual" (persistente) x hover (passageiro) usam sinais visuais DIFERENTES de propósito — ninguém confunde mais "ainda marcado" com "travou": current = fundo sólido; hover = só contorno. */ .ws-grp-lbl.on{background:var(--grad-brand);color:#fff} .ws-grp-lbl:hover{background:rgba(158,42,59,.12);color:var(--text)} .ws-grp-lbl.on:hover{background:var(--grad-brand);color:#fff} /* Submenu em "degraus": abre EMPILHADO (um item abaixo do outro) logo abaixo do próprio botão do grupo, mas flutuando POR CIMA do conteúdo (position:absolute) — não deve empurrar nem alargar o layout da página. O <.ws-grp> pai é o ancoradouro (position:relative). Abre no HOVER (desktop) — fecha sozinho ao tirar o mouse, nunca fica "preso" aberto — E também no click (toque/mobile, via JS adicionando .open), com pequeno atraso pra não fechar sozinho ao passar o mouse de um item pro outro dentro do próprio menu. */ .ws-sub{position:absolute;top:100%;left:0;display:none;flex-direction:column;min-width:190px; background:var(--surface-2,var(--surface));border:1px solid var(--border);border-radius:9px; padding:9px 5px 5px;gap:1px;margin:0;box-shadow:var(--shadow-lg);z-index:9999} .ws-grp.open .ws-sub,.ws-grp:hover .ws-sub{display:flex} .ws-grp.ws-flip .ws-sub{left:auto;right:0} /* JS marca .ws-flip quando o menu estouraria a borda direita da tela */ .ws-sub a{padding:8px 12px;border-radius:7px;color:var(--text);font-size:13.5px;font-weight:500;white-space:nowrap} .ws-sub a.on{background:var(--grad-brand);color:#fff} .ws-sub a:hover{background:rgba(158,42,59,.12);color:var(--text);text-decoration:none} .ws-sub a.on:hover{background:var(--grad-brand);color:#fff} /* Mega-menu: várias colunas lado a lado, cada uma com um título de categoria (ex.: Financeiro com Títulos / Carnês / Caixa / Cobrança). display:flex no .ws-sub já existe acima (herdado); só precisa virar "row" em vez de "column" e ganhar largura maior + colunas internas. */ .ws-sub.ws-mega{flex-direction:row;align-items:flex-start;min-width:auto;padding:14px;gap:22px} .ws-mega-col{display:flex;flex-direction:column;gap:1px;min-width:170px} .ws-mega-titulo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted); padding:4px 12px 8px;border-bottom:1px solid var(--border);margin-bottom:4px} @media(max-width:820px){ .ws-sub.ws-mega{flex-direction:column;flex-wrap:nowrap;max-height:70vh;overflow-y:auto} .ws-mega-col{min-width:0} } .ws-user{color:var(--muted);font-size:13px;white-space:nowrap} /* Chip do operador logado: foto (ou inicial) + nome + ponto "online" verde + sair. */ .ws-user-chip{display:inline-flex;align-items:center;gap:8px} .ws-user-foto{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border);flex:none} .ws-user-ini{display:inline-flex;align-items:center;justify-content:center;background:var(--grad-brand);color:#fff;font-weight:800;font-size:13px} .ws-user-nome{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text)} .ws-user-saudacao{font-weight:700;color:var(--brand);-webkit-text-fill-color:var(--brand);margin-right:-2px} @media(max-width:640px){.ws-user-saudacao{display:none}} .ws-online-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.25);flex:none} .ws-brand-sm,.ws-brand{flex-shrink:0} /* Botão hambúrguer: escondido no desktop, aparece no mobile/tablet. */ .ws-nav-toggle{display:none;align-items:center;gap:7px;background:none;border:1px solid var(--border);color:var(--text);font-weight:700;font-size:14px;padding:8px 12px;border-radius:10px;cursor:pointer} .ws-nav-toggle:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)} .ws-nav-backdrop{display:none} @media(max-width:900px){ .ws-top{flex-wrap:wrap} .ws-nav-toggle{display:inline-flex;justify-self:end} /* l2 vira uma linha limpa: marca à esquerda, hambúrguer à direita. */ .ws-top-l2{gap:8px} .ws-nav-right{display:none} /* IMPORTANTE: o backdrop-filter do cabeçalho faz um elemento position:fixed se ancorar NELE (e não no viewport), o que deixava o menu estreito/torto. No mobile removemos o filtro pra o menu ocupar a tela inteira corretamente. */ .ws-top-wrap{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* MENU MOBILE: painel em COLUNA, ocupando a tela toda abaixo do topo, rolável. Escondido por padrão; abre com o hambúrguer (.open). Selector .ws-top-l2 .ws-nav p/ vencer as regras base. */ .ws-top-l2 .ws-nav{ position:fixed; left:0; right:auto; top:var(--ws-top-h,96px); bottom:0; z-index:9998; display:none; flex-direction:column; align-items:stretch; gap:2px; width:100vw; max-width:100vw; margin:0; background:var(--bg,#14100F); border-top:1px solid var(--border); padding:10px 12px calc(90px + env(safe-area-inset-bottom,0px)); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } .ws-top-l2 .ws-nav.open{display:flex} .ws-nav>a, .ws-nav .ws-grp{width:100%;flex:0 0 auto;align-items:stretch} .ws-nav>a{padding:14px 14px;font-size:16px;border-bottom:1px solid var(--border)} .ws-grp-lbl{width:100%;justify-content:space-between;padding:14px 14px;font-size:16px;border-bottom:1px solid var(--border)} /* Submenu no mobile: EM FLUXO (accordion), aparece só quando o grupo está .open. */ .ws-sub, .ws-sub.ws-mega{ position:static!important; display:none; flex-direction:column!important; min-width:0; width:100%; box-shadow:none; border:0; background:transparent; padding:4px 0 8px 6px; gap:2px; max-height:none; } .ws-grp.open > .ws-sub{display:flex!important} .ws-grp:hover > .ws-sub{display:none} /* no toque, quem manda é o .open (click), não o hover */ .ws-grp.open:hover > .ws-sub{display:flex!important} .ws-mega-col{min-width:0;width:100%;padding:2px 0} .ws-mega-titulo{padding:8px 10px 4px} .ws-sub a{padding:12px 12px;font-size:14.5px;border-radius:8px} /* Backdrop escurecido atrás do menu aberto. */ .ws-nav-backdrop.open{display:block;position:fixed;inset:0;top:var(--ws-top-h,96px);background:rgba(0,0,0,.35);z-index:9997} } /* padding-bottom = altura REAL do rodapé fixo (~44px) + uma folga curta. Eram 92px, quase o dobro do necessário: com o seletor de página no fim da lista, sobrava uma faixa branca visível entre ele e o rodapé. Reduzir sem medir arriscaria esconder conteúdo atrás do rodapé — por isso 56px, que cobre o rodapé e encosta o conteúdo nele sem folga inútil. */ .ws-main{max-width:none;margin:12px auto;padding:0 clamp(14px,2vw,32px) 56px;width:100%} /* Cards / login / install */ /* ---- TELAS DE ENTRADA (login, ativação, primeiro acesso, instalação) ----------------------- CENTRALIZAÇÃO QUE NÃO QUEBRA EM TELA BAIXA. O cartão era centralizado por "margin: 12vh auto" — uma folga fixa proporcional à altura. Em celular deitado, ou com o teclado virtual aberto (que reduz a área visível pela metade), essa folga empurra o formulário para fora e o botão fica inalcançável, sem rolagem aparente. Com flex + min-height, o cartão fica no MEIO quando cabe e rola naturalmente quando não cabe. O "auto" nas margens verticais neutraliza o vh que vem no atributo style das telas antigas. */ .ws-install{display:flex;align-items:center;justify-content:center; min-height:100vh;min-height:100dvh;padding:16px;box-sizing:border-box} .ws-install > .ws-card{margin-top:auto!important;margin-bottom:auto!important;width:100%} /* Telas muito baixas (celular deitado): encosta no topo e rola, em vez de cortar o conteúdo. */ @media (max-height:560px){ .ws-install{align-items:flex-start} .ws-install > .ws-card{margin-top:12px!important;margin-bottom:12px!important} } /* Telas estreitas: o cartão usa a largura toda menos a folga lateral, e o respiro interno diminui — 26px de padding num aparelho de 320px consome um quinto da tela. */ @media (max-width:420px){ .ws-install{padding:10px} .ws-install > .ws-card{padding:18px 16px;border-radius:14px} } .ws-install .ws-card{position:relative;overflow:hidden;box-shadow:var(--shadow-lg)} .ws-install .ws-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-brand)} .ws-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--shadow)} .ws-card:hover{box-shadow:var(--shadow-lg)} /* Botões */ /* Botões globais — menores, mais suaves e discretos (menos sombra, tons macios, hover leve). */ .ws-btn{display:inline-block;padding:7px 13px;border:1px solid var(--border);border-radius:8px; background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;font-size:13px;line-height:1.25;transition:.15s} .ws-btn:hover{border-color:var(--brand);text-decoration:none} .ws-btn.primary{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.10)} .ws-btn.primary:hover{filter:brightness(1.04);border-color:transparent} .ws-btn.danger{background:#e06673;border-color:#e06673;color:#fff;box-shadow:none} .ws-btn.danger:hover{filter:brightness(1.04);border-color:#e06673} .ws-btn.verde{background:#35b06e;border-color:#35b06e;color:#fff;box-shadow:none} .ws-btn.verde:hover{filter:brightness(1.04);border-color:#35b06e} .ws-btn.verde:hover{filter:brightness(1.06)} button.verde,input[type=submit].verde{background:var(--ok)!important;border-color:var(--ok)!important;color:#fff!important} .ws-btn:active{transform:translateY(1px)} /* Alertas */ .ws-alert{padding:11px 15px;border-radius:9px;margin:12px 0;font-size:14px} /* Botão flutuante "voltar ao topo" (global) — pequeno, cor do tema, só aparece ao rolar a página. */ .ws-gotop{position:fixed;right:18px;bottom:64px;z-index:1000001;width:38px;height:38px;border-radius:50%; border:none;cursor:pointer;background:var(--grad-brand,#9e2a3b);color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease} .ws-gotop.on{opacity:.92;visibility:visible;transform:translateY(0)} .ws-gotop:hover{opacity:1;transform:translateY(-2px)} @media print{.ws-gotop{display:none!important}} /* Flash vira toast flutuante (visível em qualquer rolagem) — fica 10s, fecha no clique. */ .ws-flash-toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100000;margin:0;min-width:260px;max-width:92vw; box-shadow:0 12px 34px -8px rgba(0,0,0,.35);cursor:pointer;animation:wsFlashIn .25s ease} @keyframes wsFlashIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}} .ws-flash-toast.hide{opacity:0;transition:opacity .4s} .ws-alert.ok{background:rgba(22,163,74,.12);color:var(--ok);border:1px solid var(--ok)} .ws-alert.err{background:rgba(220,38,38,.12);color:var(--err);border:1px solid var(--err)} /* Cabeçalho de seção */ .ws-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 14px} .ws-head-row h2,.ws-head-row h3{margin:0} /* Stats do painel */ .ws-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:16px 0} /* Cards compactos estilo MK-Auth (painel) */ .ws-mkcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0} .ws-mk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 8px;border-radius:12px; color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:.15s;min-height:88px} .ws-mk:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);text-decoration:none;filter:brightness(1.05)} .ws-mk-lbl{font-size:12px;font-weight:700;opacity:.95;text-transform:uppercase;letter-spacing:.3px} .ws-mk-num{font-size:30px;font-weight:800;line-height:1.05} .ws-mk-pct{font-size:11px;opacity:.85;font-weight:600} .ws-mk-azul{background:linear-gradient(135deg,#2563eb,#1d4ed8)} .ws-mk-roxo{background:linear-gradient(135deg,#7c3aed,#6d28d9)} .ws-mk-ciano{background:linear-gradient(135deg,#0891b2,#06b6d4)} .ws-mk-amarelo{background:linear-gradient(135deg,#d97706,#f59e0b)} .ws-mk-vermelho{background:linear-gradient(135deg,#dc2626,#b91c1c)} .ws-mk-laranja{background:linear-gradient(135deg,#ea580c,#f97316)} .ws-mk-verde{background:linear-gradient(135deg,#16a34a,#15803d)} .ws-mk-preto{background:linear-gradient(135deg,#374151,#111827)} .ws-mk-cinza{background:linear-gradient(135deg,#6b7280,#4b5563)} .ws-stat{position:relative;display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 18px;text-align:center;box-shadow:var(--shadow);overflow:hidden;transition:.15s;color:inherit;text-decoration:none} a.ws-stat{cursor:pointer} .ws-stat:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);text-decoration:none} .ws-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-brand)} .ws-stat span{font-size:32px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;line-height:1.15} .ws-stat label{color:var(--muted);font-size:13px} /* Busca */ .ws-search{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .ws-search input[type=text],.ws-search input[type=search],.ws-search input:not([type]){flex:0 1 260px;max-width:260px} .ws-search input.ws-busca-grande{flex:1 1 320px!important;max-width:none!important;min-height:44px;font-size:16px;padding:10px 14px} .ws-nav-hist{display:inline-flex;gap:4px;margin-right:2px} .ws-nav-hist a, .ws-nav-hist button{background:transparent;cursor:pointer;font-family:inherit;padding:6px 14px;border-radius:8px;text-decoration:none;opacity:.85;color:var(--brand);-webkit-text-fill-color:var(--brand);font-weight:800;font-size:15px;border:1px solid var(--border);line-height:1} .ws-nav-hist a:hover, .ws-nav-hist button:hover{opacity:1;background:var(--grad-brand);color:#fff;-webkit-text-fill-color:#fff;border-color:transparent} .ws-nav-cidade{font-size:12px;padding:5px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text)} .ws-btn-tema-top{background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:16px;line-height:1;padding:4px 8px;color:var(--text);display:inline-flex;align-items:center;justify-content:center;height:30px;width:34px;margin-right:8px;vertical-align:middle;transition:.15s} .ws-btn-tema-top:hover{border-color:var(--brand);box-shadow:var(--shadow)} .ws-tema-txt{display:none} /* texto removido do botão (só ícone) — classe mantida por compatibilidade */ /* Ícone de tema moderno (linha fina, sol/lua) — troca sozinho conforme o tema ativo, sem depender de emoji */ .ws-btn-tema-top svg{width:17px;height:17px;display:block} .ws-btn-tema-top .ws-ico-lua{display:none} :root[data-theme="dark"] .ws-btn-tema-top .ws-ico-sol{display:none} :root[data-theme="dark"] .ws-btn-tema-top .ws-ico-lua{display:block} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ws-btn-tema-top .ws-ico-sol{display:none} :root:not([data-theme="light"]) .ws-btn-tema-top .ws-ico-lua{display:block} } /* Ícones modernos (ws_icon() em config.php) — linha fina, herdam a cor do texto ao redor */ .ws-ico{width:15px;height:15px;display:inline-block;vertical-align:-3px;flex:none} .ws-btn .ws-ico{margin-right:2px} .ws-olt-grid .ws-ico{width:14px;height:14px;vertical-align:-2px} a .ws-ico,button .ws-ico{color:inherit} .ws-btn-reflexo-top{border:1px solid var(--border);border-radius:8px;text-decoration:none;padding:4px 8px;display:inline-flex;align-items:center;justify-content:center;height:30px;width:34px;margin-right:8px;vertical-align:middle;transition:.15s} .ws-btn-reflexo-top:hover{border-color:var(--ok);box-shadow:var(--shadow)} .ws-btn-reflexo-top svg{width:17px;height:17px;display:block} /* Botão "Aparência do sistema" (cor do tema), ao lado do botão claro/escuro no topo */ .ws-btn-cor-top{background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:4px 8px;color:var(--text);display:inline-flex;align-items:center;justify-content:center;height:30px;width:34px;margin-right:8px;vertical-align:middle;transition:.15s;position:relative} .ws-btn-cor-top:hover{border-color:var(--brand);box-shadow:var(--shadow)} .ws-btn-cor-top svg{width:17px;height:17px;display:block} .ws-cor-pop{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;gap:6px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:9999;flex-wrap:wrap;min-width:160px} .ws-cor-pop.open{display:flex} .ws-pagina-atual{font-weight:700;font-size:12px;letter-spacing:.3px;padding:4px 14px;border-radius:14px;background:var(--grad-brand);color:#fff;white-space:nowrap;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:6px} /* Barra com o nome do Menu em execução: centralizada de fato na largura TOTAL do topo (ocupa as 3 colunas do grid .ws-top-l2), assim fica no meio verdadeiro da página — alinhada com o centro do conteúdo/colunas abaixo (cards do Painel, tabelas de Estoque/Rede/etc.) em vez de só centrar dentro da 1ª coluna (que ficava estreita, do tamanho da marca). */ .ws-titulo-pagina{grid-column:1/-1;order:9;display:flex;justify-content:center;align-items:center;padding:5px clamp(14px,2vw,32px) 0;margin-top:2px;border-top:1px dashed var(--border)} .ws-secao{border-top:1px solid rgba(0,0,0,.12);padding:10px 10px 8px;margin-top:16px;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--brand) 80%,#000); background:linear-gradient(90deg,rgba(122,31,43,.12),rgba(122,31,43,0));border-left:3px solid color-mix(in srgb,var(--brand) 82%,#000);border-radius:6px} .ws-secao:first-of-type{border-top:none;margin-top:0;padding-top:0} /* Dashboard moderno de gráficos */ .ws-dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin:16px 0} .ws-chart-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column} .ws-chart-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .ws-chart-box h3{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between} .ws-chart-box h3 span.badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px;background:rgba(125,125,125,.12);color:var(--muted)} /* Destaque visual para campos com inconsistência/erro */ .ws-campo-erro,input.ws-campo-erro,select.ws-campo-erro,textarea.ws-campo-erro{border:1.5px solid var(--err) !important;background:rgba(220,38,38,.06) !important;outline:none} .ws-erro-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--err);font-weight:700;margin-top:2px} .ws-badge-erro{display:inline-block;padding:2px 6px;border-radius:4px;background:rgba(220,38,38,.15);color:var(--err);font-size:11px;font-weight:700;margin-left:6px} /* Ações na OLT — grade organizada, botões com cor por categoria (não sobrepõe/desalinha) */ .ws-olt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px} .ws-olt-grid .ws-btn{display:flex;align-items:center;justify-content:center;gap:5px;text-align:center;white-space:normal;line-height:1.15;font-size:12px;padding:7px 8px;font-weight:600;min-height:0} .ws-olt-grid .ws-btn span{display:inline} .olt-neutro{border-color:var(--border);color:var(--text)} .olt-reiniciar{border-color:#2563eb;color:#2563eb;background:rgba(37,99,235,.08)} .olt-resync{border-color:#0891b2;color:#0891b2;background:rgba(8,145,178,.08)} .olt-reiniciar:hover,.olt-resync:hover{filter:brightness(1.08);transform:translateY(-1px)} .olt-modo{border-color:#d97706;color:#d97706;background:rgba(217,119,6,.08)} .olt-ativar{border-color:var(--ok);color:var(--ok);background:rgba(22,163,74,.08)} .olt-desativar{border-color:#ea580c;color:#ea580c;background:rgba(234,88,12,.08)} .olt-deletar{border-color:var(--err);color:var(--err);background:rgba(220,38,38,.08)} .olt-neutro:hover{border-color:var(--brand);color:var(--brand)} .olt-modo:hover,.olt-ativar:hover,.olt-desativar:hover,.olt-deletar:hover{filter:brightness(1.08);transform:translateY(-1px)} @media(max-width:640px){.ws-olt-grid{grid-template-columns:1fr 1fr}} .ws-paginacao{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 14px} .ws-paginacao select{border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);padding:3px 6px} /* Tabelas */ .ws-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border); border-radius:12px;overflow:hidden;box-shadow:var(--shadow)} /* Toda tabela do sistema: título (th) E dado (td) centralizados JUNTOS — o título fica sempre no meio da própria coluna, alinhado com o conteúdo dela. !important pq várias páginas têm style="text-align:right/left" direto no HTML de cada célula (herdado de antes de todo esse ajuste) — sem isso, o inline vence e quebra a centralização só nessas colunas específicas. */ .ws-table th,.ws-table td{padding:10px 12px;text-align:center!important;border-bottom:1px solid var(--border);font-size:14px;white-space:nowrap} /* EXCEÇÃO: coluna com conteúdo "rico" (nome + selo + sublinha + ícone, tipo a lista de Clientes) — fica à esquerda mesmo, título e dado, porque centralizar bagunça esse tipo de bloco. Use .ws-th-esq em qualquer outra coluna parecida noutra página, o mesmo CSS já resolve. */ .ws-table th.ws-th-esq,.ws-table td.ws-th-esq{text-align:left!important;white-space:normal} /* Título da coluna (tarja) CENTRALIZADO em relação à própria coluna abaixo — só o cabeçalho; o conteúdo da célula (td) continua alinhado à esquerda/direita como cada página define, que é o mais legível pra dados/números. !important pq várias páginas têm style="text-align:right/left" direto no (herdado de antes) — sem isso, o inline vence e some parte da centralização. */ /* Cabeçalho de tabela = tarja na cor do TEMA (var --grad-brand); muda junto com a paleta. */ .ws-table th{background:var(--grad-brand,var(--brand));font-weight:700;color:#fff;text-transform:uppercase;font-size:11px;letter-spacing:.4px;text-align:center!important;border-bottom:none} .ws-table thead th:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px} .ws-table thead th:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px} .ws-table tbody tr{transition:background .12s} .ws-table tbody tr:hover{background:rgba(158,42,59,.045)} /* Nomes/links dentro das tabelas em preto/cinza (não no vinho); só o hover puxa a marca. */ .ws-table td a{color:var(--text)} .ws-table td a:hover{color:var(--brand)} .ws-table tr:last-child td{border-bottom:none} /* Tags de status */ .ws-tag{padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700;text-transform:capitalize} .ws-tag.ativo{background:rgba(22,163,74,.15);color:var(--ok)} .ws-tag.inativo{background:rgba(100,116,139,.15);color:var(--muted)} /* "Aberto" em VERDE: e fatura viva, a receber — nao um estado neutro. O cinza a igualava a "cancelada" aos olhos de quem passa a vista pela lista. Vencida segue vermelha e paga verde solido, entao os tres continuam distinguiveis. */ .ws-tag.aberto{background:rgba(22,163,74,.13);color:#15803d} .ws-tag.bloqueado,.ws-tag.cancelado{background:rgba(220,38,38,.15);color:var(--err)} .ws-tag.suspenso{background:rgba(217,119,6,.15);color:var(--warn)} .ws-tag.confianca,.ws-tag.adicional{background:rgba(147,51,234,.14);color:#9333ea} /* Status na lista de Clientes SEM tarja de fundo — só o NOME é colorido: bloqueado = vermelho, confiança = lilás, observação = magenta. */ .ws-row-bloqueado .ws-nome b{color:#dc2626 !important} .ws-row-confianca .ws-nome b{color:#9333ea !important} .ws-row-observacao .ws-nome b{color:#c026d3 !important} /* Sub-linha abaixo do nome do titular: nome resumido + qual concentrador (CNC-1/CNC-2) está logado + ícone rápido de bloqueio/confiança, clicável direto na lista (sem abrir a ficha). */ .ws-sub-nome{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11px} /* CNC-1 = azul forte (principal) · CNC-2 = azul claro (secundário). A cor é o que diferencia os dois de relance numa sub-linha de 10px; o texto sozinho exigiria ler o número. */ /* ETIQUETA DO CONCENTRADOR — discreta de verdade. Era um retângulo azul CHEIO em cada linha da lista: 25 linhas viravam 25 manchas competindo com o nome do cliente, que é o que importa ali. Agora é só o texto na cor do concentrador, sem fundo, com um traço fino embaixo indicando que é clicável. O fundo aparece no hover — o suficiente para dizer "isto leva a algum lugar" sem gritar o tempo todo. CNC-1 = azul forte · CNC-2 = azul claro: a cor continua separando os dois de relance. */ .ws-tag-cnc{background:transparent;font-size:9.5px;font-weight:800;padding:0 3px; border-radius:4px;text-decoration:none;letter-spacing:.02em; border-bottom:1px dotted currentColor;opacity:.75; transition:opacity .12s ease,background .12s ease} a.ws-tag-cnc:hover{opacity:1;text-decoration:none;border-bottom-color:transparent} a.ws-tag-cnc:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:2px} .ws-tag-cnc.c1{color:#1d4ed8} .ws-tag-cnc.c2{color:#0284c7} .ws-tag-cnc.c3{color:#6366f1} .ws-tag-cnc.c4{color:#0891b2} /* No hover o fundo assume a cor do concentrador; o texto precisa virar claro para continuar legível — daí o par de regras abaixo, uma por concentrador. */ a.ws-tag-cnc.c1:hover{background:#1d4ed8;color:#fff} a.ws-tag-cnc.c2:hover{background:#0284c7;color:#fff} a.ws-tag-cnc.c3:hover{background:#6366f1;color:#fff} a.ws-tag-cnc.c4:hover{background:#0891b2;color:#fff} /* Tema escuro: os mesmos azuis ficam apagados no fundo escuro — sobem um tom. */ body.dark-mode .ws-tag-cnc.c1,html[data-theme="dark"] .ws-tag-cnc.c1{color:#60a5fa} body.dark-mode .ws-tag-cnc.c2,html[data-theme="dark"] .ws-tag-cnc.c2{color:#38bdf8} /* IP DINÂMICO DO CLIENTE — dois estados opostos, lidos de relance (lista de Clientes e demais telas que mostram IP). ONLINE: verde vivo, é o endereço que vale agora. OFFLINE: o ÚLTIMO IP conhecido, cinza e riscado, com cara de campo desabilitado — continua legível para conferência de log/faixa, mas não se confunde com conexão ativa. */ .ws-ip{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;white-space:nowrap; text-decoration:none} .ws-ip.on{color:var(--ok);background:rgba(22,163,74,.14);border:1px solid rgba(22,163,74,.32)} .ws-ip.on:hover{background:rgba(22,163,74,.24)} .ws-ip.off{color:var(--muted);background:transparent;border:1px dashed var(--border); text-decoration:line-through;opacity:.62;font-weight:600;cursor:default} .ws-icone-bloqueio{text-decoration:none;font-size:13px;line-height:1;padding:1px 4px;border-radius:5px} /* Cadeado do cliente BLOQUEADO: ícone em vermelho (não só o fundo) pra leitura imediata na lista. */ .ws-icone-vermelho{background:rgba(220,38,38,.15);color:#dc2626} .ws-icone-vermelho svg{color:#dc2626;stroke:#dc2626} .ws-icone-vermelho:hover{background:rgba(220,38,38,.3)} .ws-icone-lilas{background:rgba(147,51,234,.15)} .ws-icone-lilas:hover{background:rgba(147,51,234,.3)} /* Tabela de "Títulos do cliente" (boletos) — o cabeçalho na cor da marca já vem do global .ws-table th. */ .ws-table-titulos tbody tr:not(.ws-linha-acoes):hover{background:rgba(158,42,59,.045)} .ws-linha-acoes td{padding:2px 12px 10px;border-bottom:1px solid var(--border);font-size:12.5px;text-align:left!important} .ws-linha-acoes a{color:var(--brand);font-weight:600;text-decoration:none} .ws-linha-acoes a:hover{text-decoration:underline} /* Barra de ícones de ação em lote, no rodapé da tabela de títulos. */ /* Barra de ações dos selecionados — versão pequena e discreta, com cor própria por ação. */ /* (+) discreto pra criar boleto/carnê — vermelho claro; no hover ESCURECE e mostra "Criar Boleto e Carnê". O texto é um tooltip ABSOLUTO (não empurra o layout — seguro dentro de cabeçalhos de tabela estreitos). */ .ws-mais-boleto{position:relative;height:26px;min-width:26px;padding:0 7px;line-height:1;font-weight:900;cursor:pointer; color:#fff;background:#e0576a;border:1px solid #cf3f52;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.18); display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:.18s} .ws-mais-boleto .pl{font-size:18px;line-height:1} .ws-mais-boleto .tx{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%); background:#b93f4c;color:#fff;padding:4px 9px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap; opacity:0;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:opacity .15s;z-index:30} .ws-mais-boleto:hover{color:#fff;background:#c33547;border-color:#b02e3f} .ws-mais-boleto:hover .tx,.ws-mais-boleto:focus-visible .tx{opacity:1} /* "+" simples e pequeno ao lado do checkbox "todos" (cabeçalho vinho) — só o sinal, sem caixa. */ .ws-mais-simples{display:inline-block;color:#fff;font-size:15px;font-weight:800;line-height:1;text-decoration:none;cursor:pointer; padding:0 2px;opacity:.85;transition:opacity .15s,color .15s} .ws-mais-simples:hover{opacity:1;color:#ffe0e4;text-decoration:none} /* Marcas transitórias de título recém-criado. */ .ws-badge-novo{display:inline-block;background:#2563eb;color:#fff;font-size:10px;font-weight:700;line-height:1; padding:2px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle;margin-left:5px} .ws-badge-pix{display:inline-block;background:#f59e0b;color:#3a2600;font-size:10px;font-weight:700;line-height:1; padding:2px 6px;border-radius:10px;letter-spacing:.02em;vertical-align:middle;margin-left:5px} /* PIX/QR já consolidado (não é mais recém-gerado): pílula cinza maior e suave. */ /* PIX/QR em VERDE: a etiqueta indica que a fatura tem cobranca por PIX disponivel — informacao util, nao rodape. No cinza ela se perdia no meio da linha e o operador nao a enxergava. */ .ws-badge-pix-cinza{display:inline-block;background:rgba(22,163,74,.15);color:#15803d;font-size:11px;font-weight:700;line-height:1; padding:4px 10px;border-radius:14px;letter-spacing:.02em;vertical-align:middle;margin-left:6px} /* Overlay "Processando…" — cobre a transição do POST pra não dar aquele blink de reload. */ .ws-proc-ov{position:fixed;inset:0;background:rgba(20,13,15,.45);backdrop-filter:blur(2px);z-index:99999; display:none;align-items:center;justify-content:center} .ws-proc-ov.on{display:flex} .ws-proc-card{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px; padding:22px 26px;box-shadow:0 12px 40px rgba(0,0,0,.35);display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px} .ws-proc-spin{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:wsspin .7s linear infinite} @keyframes wsspin{to{transform:rotate(360deg)}} .ws-toolbar-mini{display:flex;gap:7px;margin-top:10px} .ws-toolbar-mini .ico{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--surface); color:var(--muted);font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s} .ws-toolbar-mini .ico:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .ws-toolbar-mini .ico.retorno{color:#2563eb;border-color:rgba(37,99,235,.35)} .ws-toolbar-mini .ico.retorno:hover{background:rgba(37,99,235,.10)} .ws-toolbar-mini .ico.enviar{color:#9333ea;border-color:rgba(147,51,234,.35)} .ws-toolbar-mini .ico.enviar:hover{background:rgba(147,51,234,.10)} .ws-toolbar-mini .ico.excluir{color:#dc2626;border-color:rgba(220,38,38,.35)} .ws-toolbar-mini .ico.excluir:hover{background:rgba(220,38,38,.10)} /* Barra grande agora no mesmo padrão discreto (contorno + tinta), menor e elegante, cada ação com sua cor. */ .ws-toolbar-icones{display:flex;gap:8px;margin-top:12px} .ws-toolbar-icones .ico{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface); color:var(--muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;position:relative} .ws-toolbar-icones .ico:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .ws-toolbar-icones .ico:active{transform:translateY(0) scale(.97)} .ws-toolbar-icones .ico.verde{color:#16a34a;border-color:rgba(22,163,74,.4)} .ws-toolbar-icones .ico.verde:hover{background:rgba(22,163,74,.10)} .ws-toolbar-icones .ico.vermelho{color:#dc2626;border-color:rgba(220,38,38,.4)} .ws-toolbar-icones .ico.vermelho:hover{background:rgba(220,38,38,.10)} .ws-toolbar-icones .ico.azul{color:#2563eb;border-color:rgba(37,99,235,.4)} .ws-toolbar-icones .ico.azul:hover{background:rgba(37,99,235,.10)} .ws-toolbar-icones .ico.laranja{color:#d97706;border-color:rgba(217,119,6,.4)} .ws-toolbar-icones .ico.laranja:hover{background:rgba(217,119,6,.10)} .ws-toolbar-icones .ico.roxo{color:#9333ea;border-color:rgba(147,51,234,.4)} .ws-toolbar-icones .ico.roxo:hover{background:rgba(147,51,234,.10)} .ws-badge-add{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:700;background:rgba(147,51,234,.14);color:#9333ea;vertical-align:middle} /* Contador de boletos em aberto ao lado do nome (verde, como no MK-Auth) */ .ws-badge-bol{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;margin-left:7px; padding:0 5px;border-radius:20px;font-size:11px;font-weight:800;background:var(--ok);color:#fff;vertical-align:middle} /* Nome do cliente na cor de texto (não no vinho); hover discreto */ .ws-nome b{color:#6d4b2f} :root[data-theme="dark"] .ws-nome b,:root:not([data-theme="light"]) .ws-nome b{color:var(--text)} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ws-nome b{color:var(--text)}} /* Formulários */ .ws-form{display:flex;flex-direction:column;gap:12px;max-width:520px} .ws-form.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 14px;max-width:none;background:var(--surface); border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow)} .ws-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:600;justify-content:flex-start} .ws-form label>input,.ws-form label>select,.ws-form label>span{margin-top:auto} /* Campo Concentrador: título + checkbox "Sair por TODOS" + link "criar" na MESMA linha do topo, pra o checkbox não empurrar/sobrepor nada; o select fica na base, alinhado com os vizinhos. */ .conc-lbl>.conc-head{margin-top:0!important;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;white-space:nowrap} .conc-head .conc-criar{font-size:11px;color:var(--brand);margin-left:auto} /* Checkbox "Sair por TODOS" fica logo abaixo do título, com a MARCAÇÃO NA FRENTE do texto; o select vai pra base (margin-top:auto global) e alinha com os campos vizinhos. */ .conc-lbl>.conc-chk{margin-top:3px!important;font-size:10.5px;font-weight:600;color:var(--muted);display:flex;align-items:center} .conc-lbl>.conc-chk input{flex:none;margin:0 5px 0 0} /* Clique-para-copiar (lista de clientes): realce no hover + confirmação verde ao copiar. */ .ws-copy{cursor:copy;border-radius:4px;padding:0 2px;transition:background .15s} .ws-copy:hover{background:rgba(158,42,59,.10)} .ws-copied{background:rgba(16,185,129,.22)!important} /* Menu de ações rápidas do cliente — some por padrão, aparece ao marcar a caixa de seleção (tr.ws-sel). */ .ws-cli-menu{display:none;margin-top:5px;gap:4px 12px;flex-wrap:wrap;font-size:11.5px} .ws-cli-menu a{color:var(--brand);text-decoration:none;white-space:nowrap;font-weight:600} .ws-cli-menu a:hover{text-decoration:underline} tr.ws-sel .ws-cli-menu{display:flex} tr.ws-sel{background:rgba(158,42,59,.06)} /* start (não stretch): cada célula fica na altura natural, com o título logo acima do campo — sem o vão que aparecia quando uma célula alta (ex.: Concentrador c/ checkbox) esticava a linha. */ .ws-form.grid{align-items:start} .ws-form.grid>label{display:flex;flex-direction:column;position:relative} /* "criar" (link no canto do rótulo) flutua no topo/direita e NÃO empurra o campo pra baixo, pra não desalinhar a linha. */ .ws-form.grid>label>span[style*="float"]{position:absolute;top:0;right:0;float:none;margin:0} /* Concentrador: o SELECT sobe pra logo abaixo do título (alinhado com os demais campos da linha) e o checkbox "Sair por TODOS" desce pra baixo dele. */ .ws-form.grid .conc-lbl>select{order:2} .ws-form.grid .conc-lbl>.conc-chk{order:3;margin-top:4px!important} .ws-form.grid input,.ws-form.grid select{height:38px;box-sizing:border-box} .ws-form.grid textarea{height:auto} .ws-form.grid label>span.ws-wa-wrap,.ws-form.grid label>span[style*="position:relative"]{display:block;height:38px} .ws-form.grid label>span[style*="position:relative"] input{height:38px} .ws-form.grid .c2{grid-column:span 2}.ws-form.grid .c4{grid-column:span 4} .ws-form input,.ws-form select,.ws-form textarea{padding:9px 11px;border:1px solid var(--border);border-radius:8px; background:var(--bg);color:var(--text);font-size:14px;font-family:inherit} .ws-form input:focus,.ws-form select:focus,.ws-form textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)} .ws-form textarea{min-height:64px;resize:vertical} .ws-chk{flex-direction:row!important;align-items:center;gap:8px} /* Campo de valor em R$ — rótulo fixo do lado esquerdo, mesmo estilo em todo o sistema. */ .ws-money-wrap{display:inline-flex;align-items:stretch;width:100%;border:1px solid var(--border);border-radius:8px; background:var(--bg);overflow:hidden;transition:.15s} .ws-money-wrap:focus-within{outline:2px solid var(--brand);border-color:var(--brand)} .ws-money-pre{display:flex;align-items:center;padding:0 10px;background:rgba(125,125,125,.10);color:var(--muted); font-weight:700;font-size:13px;white-space:nowrap;border-right:1px solid var(--border)} .ws-money-wrap input{border:0!important;border-radius:0!important;background:transparent!important;flex:1;min-width:0; text-align:right;font-variant-numeric:tabular-nums} .ws-money-wrap input:focus{outline:0!important} .ws-two{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start} /* Navegação no topo: Voltar + Início (moderna) */ .ws-topnav{display:flex;align-items:center;gap:6px;margin-right:6px} .ws-topbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--border); border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:13.5px;cursor:pointer; text-decoration:none;transition:.15s;line-height:1} .ws-topbtn span{font-size:18px;font-weight:800;line-height:1} .ws-topbtn.ws-ico{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%; background:var(--grad-brand);color:#fff;border:0;box-shadow:0 4px 12px -3px rgba(158,42,59,.5);line-height:0;transition:.18s} .ws-topbtn.ws-ico svg{display:block} .ws-topbtn.ws-ico:hover{color:#fff;filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 18px -4px rgba(158,42,59,.6)} .ws-topbtn.ws-ico:active{transform:translateY(0)} .ws-topnav-r{margin-left:auto;margin-right:6px} .ws-topbtn:hover{border-color:var(--brand);color:var(--brand);background:rgba(158,42,59,.06);transform:translateY(-1px);text-decoration:none} @media(max-width:640px){.ws-topbtn{padding:7px 10px}} /* Rodapé elegante — FIXO, sempre visível no rodapé da tela em TODAS as páginas (obrigatório). A causa real do "sumiço" no Painel não era a posição fixa — era o