/* ============================================================ 47 WORKSPACE — folha de estilo A paleta e toda por variaveis. Trocar de tema = trocar os valores abaixo; nenhum seletor precisa saber que o tema mudou. --ink / --paper sao o par que se inverte: no escuro, ink e branco e paper e preto. No claro, o contrario. Isso funciona nos DOIS papeis — texto branco vira texto preto, e botao de fundo branco vira botao de fundo preto. A inversao se resolve sozinha. --tint = a cor das superficies e bordas translucidas --shade = a cor das sombras ============================================================ */ :root{ /* ===== WORKSPACE ===== */ /* par que inverte */ --ink:#fff; --paper:#000; /* rampa de cinzas: t1 mais forte, t8 mais apagado */ --t1:#e6e8ee; --t2:#c9cdd6; --t3:#9aa0ab; --t4:#8b90a0; --t5:#7c828e; --t6:#6b7180; --t7:#5d626d; --t8:#4a4f59; /* superficies, bordas e sombras (usadas como rgba(var(--x), alfa)) */ --tint:255,255,255; --shade:0,0,0; --surf:20,20,24; --surf-2:24,24,28; --bg-1:#15151a; --bg-2:#1e1e24; /* acentos */ --red:#e5484d; --red-2:#c93b40; --green:#4fe08a; --green-2:#27d465; --purple:#b48bff; --purple-2:#8b5cf6; --purple-3:#c9a8ff; --blue:#7fb0ff; --blue-2:#4facfe; --pink:#f472b6; --yellow:#ffcc4d; --orange:#ffb066; --dot:#0a84ff; /* ===== LANDING ===== Ela tem DUAS superficies, e por isso dois pares de tokens: pg = a tela (hero, faixa, rodape) pn = o painel (as secoes _CRIATIVO, _COLAB, _SUP) Estes sao os valores do modo ESCURO — o padrao. O html.claro abaixo sobrescreve; o html:not(.claro) escurece os paineis. */ --pg:#000; --pg-ink:#fff; --pg-line:255,255,255; --pn:#fff; --pn-2:#f7f7f7; --pn-ink:#111; --pn-ink-2:#555; --pn-line:0,0,0; --fill:#f0f0f0; --fill-ink:#ccc; --chip:#000; --chip-ink:#fff; --chip-2:#222; --mut:#8b90a0; /* cinza secundario: faixa rolante, icone de entrar */ } /* ===== LUZ ACESA ===== */ html.claro{ --ink:#12131a; --paper:#fff; /* a rampa inverte a claridade: agora t1 e o cinza mais escuro */ --t1:#2c2f3a; --t2:#41465a; --t3:#5a6072; --t4:#6a7183; --t5:#7a8193; --t6:#8d94a5; --t7:#a2a9b8; --t8:#bcc2cd; /* superficies passam a ser sombra sobre o branco */ --tint:18,20,32; --shade:20,24,45; --surf:255,255,255; --surf-2:250,250,253; --bg-1:#f4f5f8; --bg-2:#fff; /* acentos escurecem o suficiente pra ler no branco */ --red:#d43a3f; --red-2:#b02a2f; --green:#12a35a; --green-2:#0d8a4a; --purple:#7c4dff; --purple-2:#6b3ce0; --purple-3:#5b2fc7; --blue:#2a72d4; --blue-2:#1f5fbf; --pink:#d4468f; --yellow:#c58a00; --orange:#c46a1e; --dot:#0a84ff; /* ===== LANDING, com a luz acesa ===== */ --pg:#fff; /* a tela e BRANCA: hero, faixa e rodape */ --pg-ink:#12131a; --pg-line:18,20,32; --pn:#fff; --pn-2:#f5f6f9; --pn-ink:#111; --pn-ink-2:#6a7183; --pn-line:0,0,0; --fill:#e9ebf0; --fill-ink:#b7bcc6; --chip:#12131a; --chip-ink:#fff; --chip-2:#2c2f3a; } /* ===== LANDING, com a luz apagada ===== Aqui esta a mudanca da Opcao A: os paineis que hoje sao BRANCOS (as secoes _CRIATIVO, _COLABORATIVO, _SUPORTE) passam a ESCURECER junto com o resto. O site fica 100% escuro ou 100% claro. */ html:not(.claro){ --pn:#101015; --pn-2:#17171d; --pn-ink:#e6e8ee; --pn-ink-2:#7c828e; --pn-line:255,255,255; --fill:#1c1c22; --fill-ink:#4a4f59; } /* ============================================================ O TOQUE NO CELULAR No iPhone acontecia isto: um toque no logo 47 e ele ficava com um fundo acinzentado, e as vezes o iOS ate SELECIONAVA o bloco (com as alcinhas azuis). O print nao mostrava, porque o realce e transitorio. Sao duas coisas somadas: 1. o "tap highlight" — o Safari poe um veu cinza em tudo que e clicavel, e o padrao dele e visivel demais 2. a selecao de texto — segurar o dedo seleciona o elemento Nada disso faz sentido numa interface de aplicativo. Mas a selecao CONTINUA valendo onde ela serve: textos, notas, campos, links — voce ainda copia o que precisa copiar. ============================================================ */ *{-webkit-tap-highlight-color:transparent;} button,.a,.pbtn,.win,.mi,.tvivos,.lkbt,.pd-aba,.fr-b,#fr-sz button, .tab,.wt,.chip,.pnav,.anx-add,.anx-x,.pm-back,.adu,label, #topo-luz,#topo-entrar,#ws-exit,#ws-logo-hit{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; /* segurar o dedo nao abre o menu do iOS */ } /* onde a selecao SERVE, ela volta */ p,span.txt,.nota,.na-edit,input,textarea,select, #na-title,#na-text,.ia-msg,.lkn,.lku,.anx-n,.fr-u,.adu-e{ -webkit-user-select:text; user-select:text; } /* imagens: no iOS, segurar o dedo abria "Salvar imagem" */ .hero > img,.a img,.pbtn img,.mi img{ -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none; } /* a hera acende junto */ html.claro .hero{ background:var(--pg); } /* A LUZ ACENDE NA HERO, nao no #ws. O #ws e transparente e fica POR CIMA da hero; o logo 47 mora NA HERO. Pintar o #ws de branco TAPAVA o logo — foi o que aconteceu. Entao quem acende e a hero, e o #ws segue transparente. */ html.claro #ws{ background:transparent; } /* branco puro tambem com o workspace aberto. Os widgets ficam sem separacao do fundo por enquanto — borda ou sombra discreta entram depois. */ html.claro .hero.ws-on{ background:#fff; } /* botao do sol, gemeo do da lua */ /* o logo 47 (que mora na hero, atras) vira preto — mas SO enquanto o workspace claro estiver aberto. Sair de la devolve o branco. */ /* O PNG do 47 tem fundo PRETO OPACO — no escuro isso nunca apareceu, porque a hero tambem e preta. Ao inverter, o fundo virava uma caixa BRANCA. invert(1) -> fundo branco, simbolo preto mix-blend-mode:multiply -> o branco some contra o fundo claro; o preto fica Resultado: simbolo preto, fundo transparente. */ /* O preto do PNG nao e preto PURO (fica em torno de #0a0a0a). Depois do invert vira ~#f5f5f5 — quase branco, mas nao branco. E o multiply contra o fundo #f4f5f8 deixava aquele quadrado fantasma que voce viu. contrast(4) -> empurra o quase-preto para PRETO PURO (e o branco fica branco) invert(1) -> fundo branco puro, simbolo preto multiply -> branco puro some por completo contra o fundo claro */ /* duas imagens do logo (ja transparentes): branca no escuro, preta no claro. Sem filtros — assim nao ha risco de caixa fantasma. */ .logo47{ } .logo47-light{ display:none; } html.claro .logo47-dark{ display:none; } html.claro .logo47-light{ display:block; } /* o brilho radial do fundo escuro nao faz sentido na luz */ html.claro #ws::before{ opacity:0; } #ws{position:absolute;top:0;left:0;right:0;bottom:0;display:none;opacity:0;transition:opacity .5s ease;overflow:visible;background:transparent;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,sans-serif;z-index:8;} #ws.open{display:block;} #ws.in{opacity:1;} #ws::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 45% at 78% 20%,rgba(255,120,60,.06),transparent 62%),radial-gradient(55% 50% at 22% 85%,rgba(90,110,255,.07),transparent 65%);pointer-events:none;} #ws-fc{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:60;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .28s,transform .3s cubic-bezier(.22,1,.36,1);} #win-central.fc #ws-fc{opacity:1;transform:translateY(0);pointer-events:auto;} #ws-fc-days{display:flex;flex-direction:column;gap:4px;} .fcload{color:var(--t4);font-size:.52rem;} #ws-exit{position:fixed;top:34px;right:38px;z-index:80;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.12);border-radius:50%;color:var(--t3);font-size:.8rem;cursor:pointer;transition:all .25s;font-family:inherit;} #ws-exit:hover{color:var(--ink);border-color:rgba(var(--tint),.35);} .win{position:absolute;z-index:5;background:rgba(var(--surf),.72);border:1px solid rgba(var(--tint),.1);border-radius:13px;backdrop-filter:blur(20px);box-shadow:0 16px 44px rgba(var(--shade),.5);display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:box-shadow .2s,border-color .2s;} /* agenda em edicao: o central sobe acima de todos os outros paineis */ #win-central.editando{ z-index:200 !important; } /* agenda/tarefas ativa tambem sobe, pra nao ser coberta por projetos/eventos */ #win-central.cal-on{ z-index:100; } .win.focus{border-color:rgba(var(--tint),.22);box-shadow:0 28px 80px rgba(var(--shade),.7);z-index:20;} .win.drag{transition:none;user-select:none;} .win-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem .35rem;cursor:grab;flex-shrink:0;} .win-head:active{cursor:grabbing;} .win-head .wt{font-size:.52rem;font-weight:700;letter-spacing:.12em;color:var(--t3);text-transform:uppercase;display:flex;align-items:center;gap:.4rem;} .win-head .wt .dotlive{width:6px;height:6px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 0 rgba(39,212,101,.5);animation:ws-pulse 2s infinite;} @keyframes ws-pulse{0%{box-shadow:0 0 0 0 rgba(39,212,101,.5);}70%{box-shadow:0 0 0 6px rgba(39,212,101,0);}100%{box-shadow:0 0 0 0 rgba(39,212,101,0);}} .win-body{padding:0 .7rem .7rem;overflow-y:auto;font-size:.62rem;color:var(--t1);} .win.tips,.win.tips .win-body{overflow:visible;} .win.tips:hover{z-index:30;} .wpal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;} .wpal li{display:flex;align-items:center;gap:.5rem;background:rgba(var(--tint),.05);border-radius:9px;padding:.4rem .55rem;cursor:pointer;transition:background .2s;} .wpal li:hover{background:rgba(var(--tint),.1);} .wpal li .pi{width:24px;height:24px;border-radius:7px;background:rgba(120,140,255,.16);border:1px solid rgba(120,140,255,.25);display:flex;align-items:center;justify-content:center;font-size:.62rem;flex-shrink:0;overflow:hidden;} .wpal li .pi.img{background:var(--ink);border:none;padding:0;} .wpal li .pi.img img{width:100%;height:100%;object-fit:cover;display:block;} .wpal li .pn{flex:1;font-size:.58rem;font-weight:600;color:var(--ink);} .wpal li .pc{color:var(--t5);font-size:.7rem;transition:transform .3s;} .wpal li.open .pc{transform:rotate(45deg);} .wpal .det{grid-column:1/-1;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .3s,margin .3s;width:100%;} .wpal li.open + .det{max-height:220px;opacity:1;margin:2px 0 6px;} .subt{list-style:none;margin:0;padding:0 0 .3rem;display:flex;flex-direction:column;gap:.28rem;} .subt li{font-size:.6rem;color:var(--t3);display:flex;align-items:center;gap:.5rem;background:none;padding:.1rem 0;} .subt li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--t6);flex-shrink:0;} .wteam-mini{display:flex;flex-wrap:nowrap;gap:.45rem;justify-content:flex-end;align-items:center;height:62px;} .wteam-mini .a{position:relative;} .wteam-mini .a[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--paper);color:var(--ink);font-size:.5rem;letter-spacing:.03em;white-space:nowrap;padding:.35rem .55rem;border-radius:7px;border:1px solid rgba(var(--tint),.14);z-index:99999;pointer-events:none;} .wteam-mini .a[data-tip]:hover::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--paper);z-index:50;} .wteam-mini .a{position:relative;} .wteam-mini .a img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(var(--tint),.14);display:block;} .wteam-mini .a .st{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:var(--t7);border:2px solid var(--paper);} .wteam-mini .a.on .st{background:var(--green-2);} .wteam-full{display:flex;flex-direction:column;gap:5px;margin-top:.6rem;} .wteam-full .m{display:flex;align-items:center;gap:8px;background:rgba(var(--tint),.05);border-radius:10px;padding:.42rem .6rem;} .wteam-full .m img{width:22px;height:22px;border-radius:50%;object-fit:cover;} .wteam-full .m .mn{flex:1;font-size:.62rem;color:var(--ink);} .wteam-full .m .mr{font-size:.5rem;color:var(--t4);letter-spacing:.05em;} .wteam-full .m .ma{font-size:.48rem;white-space:nowrap;} #wacts input{background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:10px;color:var(--ink);font-size:.68rem;font-family:inherit;width:100%;padding:.5rem .65rem;outline:none;} #wacts input::placeholder{color:var(--t6);} #wacts .btns{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap;} #wacts .btns button{background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:8px;color:var(--t2);font-size:.55rem;padding:.32rem .55rem;cursor:pointer;transition:all .2s;font-family:inherit;} #wacts .btns button:hover{background:rgba(var(--tint),.13);color:var(--ink);} #wacts textarea{width:100%;min-height:70px;margin-top:.5rem;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:10px;color:var(--t1);font-size:.64rem;line-height:1.6;padding:.5rem .6rem;outline:none;resize:vertical;font-family:inherit;display:none;} #wacts textarea.show{display:block;} .nbadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red);border:1.5px solid var(--bg-1);color:#fff;font-size:.5rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;font-family:-apple-system,"SF Pro Text","Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(var(--shade),.4);} #ws-stack{display:none;} .win.naked{background:none;border:none;backdrop-filter:none;box-shadow:none;} .win.naked .win-body{padding:0;overflow:visible;} .win.naked .win-head{display:none;} .win.fixed{position:absolute;pointer-events:auto;} .win.fixed .win-head{cursor:default;} .win.c-tl{top:0;left:0;overflow:visible;} .win.c-bl{bottom:0;left:0;} .win.c-br{bottom:0;right:0;} .win.c-br{bottom:0;right:0;} .win.c-br2{bottom:76px;right:0;} #ws-desk{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;pointer-events:none;} #ws-arena{position:absolute;top:34px;left:38px;right:38px;bottom:38px;pointer-events:none;} @media(max-width:760px){ /* iOS da zoom ao focar em campo com fonte < 16px; forcando 16px isso nao ocorre */ input[type=text], input[type=search], input[type=email], input[type=password], input:not([type]), textarea{ font-size:16px !important; } /* datetime-local e date NAO recebem 16px: eles ficam enormes e estouram a agenda. Mantem o tamanho pequeno definido no proprio componente. */ html{ touch-action:pan-x pan-y; } /* mantem a MESMA disposicao do desktop (4 cantos), so encolhe a margem e os paineis para caber na tela menor. */ #ws-arena{ top:calc(82px + env(safe-area-inset-top)); left:calc(14px + env(safe-area-inset-left)); right:calc(14px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); } /* os botoes fixos do topo descem pela safe area do iPhone (notch/relogio) */ #ws-exit, #ws-sino, #ws-yt-btn, #topo-luz, #topo-entrar{ top:calc(16px + env(safe-area-inset-top))!important; } /* os paineis perdem a largura fixa: cada canto pega ~48% da tela */ .win.fixed{width:auto!important;max-width:47vw;} #win-central{width:72vw!important;max-width:72vw!important;} /* largura TRAVADA no mobile (ref: calendario) */ #win-central.fixed{max-width:72vw!important;} /* TODOS os estados (calendario, agenda, tarefas) travados em 72vw: a caixa nunca muda de largura, so o conteudo dentro dela muda */ #win-central.cal-on{ width:72vw!important; max-width:72vw!important; } #win-central.cal-on.fixed{ max-width:72vw!important; } /* o conteudo (agenda, tarefas, calendario) se ajusta a caixa, nunca o contrario */ #win-central .win-body, #win-central .cmain, #win-central .crow, #win-central .cmain > *{ max-width:100%!important; box-sizing:border-box; } #win-ev{max-width:20vw;} /* eventos e estreito */ /* o widget de equipe (canto inf. direito) nao pode estourar a tela: avatares menores e o container ganha largura pra eles caberem, quebrando em duas linhas se precisar. */ #win-team{width:auto!important;max-width:40vw!important;} #win-team .win-body{overflow:visible;} .wteam-mini{flex-wrap:wrap;justify-content:flex-end;gap:.3rem;height:auto;width:100%;max-width:100%;} .wteam-mini .a img{width:32px;height:32px;} .wteam-mini .a .ini{width:32px;height:32px;font-size:.66rem;} .wteam-mini .a .st{width:8px;height:8px;} /* item 4: no mobile a equipe expande pra CIMA, empilhando os avatares. column-reverse faz os itens crescerem para cima a partir do contador. */ .wteam-mini.escancarada{ flex-direction:column-reverse; align-items:flex-end; flex-wrap:nowrap; gap:.4rem; } .wteam-mini.escancarada .trest{ max-width:none; max-height:60vh; flex-direction:column-reverse; flex-wrap:nowrap; align-items:flex-end; gap:.4rem; margin-right:0; } .wteam-mini.escancarada .tsair{ max-width:none; flex-direction:column-reverse; align-items:flex-end; gap:.4rem; margin-left:0; } /* central estreito: data/clima em cima (lado a lado), calendario embaixo. O segredo e nao deixar sobrar espaco entre eles. */ /* data + clima ficam lado a lado numa faixa; a previsao (wfc) fica full. O calendario vem logo abaixo, ocupando a largura toda, sem buraco. */ #win-central .crow{ flex-direction:column; gap:.5rem; align-items:stretch; } /* a agenda/tarefas (.cmain) sempre ocupa a largura toda da caixa, senao ela encolhe quando o conteudo e curto (bug da agenda estreita) */ #win-central .cmain{ width:100%!important; } /* painel de notificacoes no mobile: ocupa a largura util, abaixo dos botoes (no mobile continua abrindo pra BAIXO; o "abrir ao lado" e so no desktop) */ #ws-notif-panel{ top:64px!important; right:14px!important; left:14px!important; width:auto!important; max-height:60vh!important; transform:translateY(-10px) scale(.98); } #ws-notif-panel.open{ transform:translateY(0) scale(1); } /* projetos no mobile: setas nas pontas, cards no meio */ #pmonte.aberto .pbar{ justify-content:space-between; width:100%; } /* item 3: ao abrir um projeto no mobile, as capas somem e fica so o detalhe */ #pmonte.com-detalhe .pbar{ display:none!important; } /* item 4: com a equipe expandida, os eventos (proximas datas) ficam invisiveis */ #ws.team-aberto #win-ev{ opacity:0; pointer-events:none; transition:opacity .2s; } #win-central .dcol{ flex-direction:row; flex-wrap:wrap; width:100%; gap:.5rem; align-items:flex-start; } /* data e clima sao COMPACTOS e independentes: nao esticam pra preencher a caixa */ #win-central .dcol .datecard{ flex:0 0 auto; width:auto; } #win-central .dcol .wcard{ flex:0 0 auto; width:auto; margin-top:0; } /* margem interna minima nos dois (mobile) */ #win-central .dcol .datecard, #win-central .dcol.aberto .datecard{ padding:.28rem .55rem !important; } #win-central .dcol .wcard{ padding:.28rem .5rem !important; } #win-central .dcol .wfc{ flex:1 1 100%; } #win-central #cal.cal-box{ width:100%!important; min-width:0!important; align-self:stretch; margin-left:0!important; } #win-central #cal.cal-box.open{ width:100%!important; margin-left:0!important; } #win-central .win-body, #win-central .cmain{ min-height:0; } } .win-head.bare{padding:.35rem .5rem .1rem;min-height:14px;} .win-head.bare .wt{display:none;} .pbar{display:flex;gap:.55rem;align-items:flex-end;} /* carrossel: 5 por vez, setas nas laterais */ /* mesma seta redonda dos Proximos Eventos, flutuando sobre as marcas */ .pbar{position:relative;} .pnav{display:none;} #win-proj{overflow:visible;} #win-proj:hover .pnav{opacity:1;pointer-events:auto;} .pslot{position:relative;flex-shrink:0;} .pbtn{width:62px;height:62px;border-radius:16px;border:1px solid rgba(var(--tint),.12);background:var(--paper);padding:0;cursor:pointer;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .pbtn:hover{transform:translateY(-3px);border-color:rgba(var(--tint),.35);} .pbtn.on{border-color:var(--ink);box-shadow:0 0 0 2px rgba(var(--tint),.18);} .pbtn img{width:100%;height:100%;object-fit:cover;display:block;} /* no claro, o card de projeto com logo mantem fundo escuro (o logo do 47 e branco; sem isto ele sumiria no fundo branco do tema claro) */ html.claro .pbtn.com-img{background:#0f0f14;} .pbtn .ptxt{color:var(--ink);font-size:.56rem;font-weight:800;letter-spacing:.06em;} /* a marca em si nao tem mais controle: a gestao vive no painel do + */ .pfix{position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:rgba(var(--shade),.7);color:var(--t4);font-size:.34rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;pointer-events:none;} .pslot:hover .pfix{opacity:1;} /* linha da lista: setas de ordem + remover */ .pk-i.pk-row{cursor:default;} .pk-i.pk-row:hover{background:rgba(var(--tint),.06);} .pk-ord{display:flex;gap:2px;flex-shrink:0;} .pk-ord button{width:16px;height:16px;border-radius:5px;border:none;background:rgba(var(--tint),.08);color:var(--t4);font-size:.45rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:all .14s;} .pk-ord button:hover{background:var(--ink);color:var(--paper);} .pk-ord button[disabled]{opacity:.2;pointer-events:none;} .pk-del{width:16px;height:16px;border-radius:5px;border:none;background:rgba(229,72,77,.18);color:var(--red);font-size:.44rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;transition:all .14s;} .pk-del:hover{background:var(--red);color:var(--ink);} .pk-lock{width:16px;height:16px;color:var(--t7);font-size:.4rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .evwrap{position:relative;} .evnav{display:none;} /* moram FORA da grade: por isso o #win-ev abre mao do overflow:hidden */ #win-ev{overflow:visible;} #win-ev:hover .evnav{opacity:1;} /* VERTICAL: os eventos empilham. Cinco cabem de uma vez (5 x 52px de cartao + os gaps); o resto rola para baixo. Antes era uma faixa que corria de lado — na vertical fica muito mais facil de ler a agenda. */ .evtrack{display:flex;flex-direction:column;gap:6px;max-height:292px;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:y proximity;padding:2px;scrollbar-width:none;-ms-overflow-style:none;} .evtrack::-webkit-scrollbar{display:none;width:0;height:0;} .evtrack::-webkit-scrollbar{width:5px;} .evtrack::-webkit-scrollbar-thumb{background:rgba(var(--tint),.2);border-radius:3px;} .evtrack::-webkit-scrollbar-track{background:transparent;} .evc{flex-shrink:0;} .evtrack::-webkit-scrollbar{display:none;} .evc{scroll-snap-align:start;position:relative;background:rgb(var(--surf-2));border:1px solid rgba(var(--tint),.1);border-radius:11px;padding:.4rem .3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;transition:background .28s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),border-color .28s,padding .32s cubic-bezier(.22,1,.36,1),min-height .32s cubic-bezier(.22,1,.36,1);} .evc:hover{background:rgba(var(--tint),.12);transform:translateY(-2px);} .evc .evday{font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em;} .evc .evmon{font-size:.5rem;color:var(--t3);letter-spacing:.14em;} .evc .evtit{font-size:.54rem;color:var(--t1);text-align:center;line-height:1.3;margin-top:.3rem;max-height:2.7em;overflow:hidden;} .evc .evh{font-size:.4rem;color:var(--t4);margin-top:.1rem;} .evc .evx{position:absolute;top:2px;right:3px;background:none;border:none;color:var(--t7);cursor:pointer;font-size:.4rem;padding:0;opacity:0;transition:opacity .2s;} .evc:hover .evx{opacity:1;} .evc .evx:hover{color:var(--ink);} .evc.evnew{background:rgba(var(--tint),.03);border:1px dashed rgba(var(--tint),.18);cursor:pointer;justify-content:center;} .evc.evnew:hover{border-color:rgba(var(--tint),.45);background:rgba(var(--tint),.08);} .evplus{font-size:1.5rem;color:var(--t4);line-height:1;} .evc.evnew:hover .evplus{color:var(--ink);} #wb-proj{position:relative;overflow:visible;} .win#win-proj{overflow:visible;} .pdet.open{opacity:1;transform:translateY(0);pointer-events:auto;} .pstrack::-webkit-scrollbar{display:none;} .psq:hover{background:rgba(var(--tint),.12);} .psq .psx{position:absolute;top:2px;right:3px;background:none;border:none;color:var(--t7);cursor:pointer;font-size:.4rem;padding:0;opacity:0;transition:opacity .2s;} .psq:hover .psx{opacity:1;} .psq .psx:hover{color:var(--ink);} #ws-notif-panel{position:fixed;z-index:44;top:34px;right:164px;width:290px;max-height:290px;overflow-y:auto;background:rgba(var(--surf-2),.86);border:1px solid rgba(var(--tint),.12);border-radius:16px;padding:.6rem;backdrop-filter:blur(30px) saturate(180%);box-shadow:0 20px 60px rgba(var(--shade),.6);opacity:0;transform:translateX(10px) scale(.96);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);} #ws-notif-panel.open{opacity:1;transform:translateX(0) scale(1);pointer-events:auto;} #ws-notif-panel::-webkit-scrollbar{width:4px;} #ws-notif-panel::-webkit-scrollbar-thumb{background:rgba(var(--tint),.18);border-radius:4px;} .nhead{display:flex;align-items:center;justify-content:space-between;padding:.15rem .3rem .5rem;} .nhead span{font-size:.56rem;font-weight:700;color:var(--t1);letter-spacing:.05em;text-transform:uppercase;} .nhead button{background:none;border:none;color:var(--blue);font-size:.5rem;cursor:pointer;font-family:inherit;} .nhead button:hover{text-decoration:underline;} .ncard{display:flex;gap:.55rem;align-items:flex-start;background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.06);border-radius:12px;padding:.55rem .6rem;margin-bottom:5px;cursor:pointer;transition:all .25s;position:relative;} .ncard:hover{background:rgba(var(--tint),.13);} .ncard.read{opacity:.42;} .ncard.read::after{display:none;} .ncard::after{content:'';position:absolute;top:.6rem;right:.6rem;width:6px;height:6px;border-radius:50%;background:var(--dot);} /* ===== DIARIO DE BORDO ===== */ .ntabs{display:flex;gap:3px;margin-bottom:.5rem;} .ntabs button{flex:1;background:none;border:1px solid rgba(var(--tint),.12);border-radius:6px;color:var(--t4);font-size:.42rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem;cursor:pointer;font-family:inherit;transition:all .16s;} .ntabs button:hover{color:var(--ink);border-color:rgba(var(--tint),.3);} .ntabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .lgdia{font-size:.4rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--t7);padding:.55rem .1rem .3rem;} .lgrow{display:flex;align-items:baseline;gap:.5rem;padding:.34rem .1rem;border-bottom:1px solid rgba(var(--tint),.05);} .lgrow:last-child{border-bottom:0;} .lgh{font-size:.42rem;color:var(--t7);font-variant-numeric:tabular-nums;flex-shrink:0;width:32px;} .lgb{flex:1;min-width:0;font-size:.46rem;color:var(--t2);line-height:1.3;} .lgb b{color:var(--t1);font-weight:700;} .lgb i{color:var(--t4);font-style:normal;} .lgq{font-size:.4rem;color:var(--purple-2);font-weight:700;letter-spacing:.04em;flex-shrink:0;} .lgt{font-size:.4rem;color:var(--green);font-weight:800;letter-spacing:.04em;flex-shrink:0;} .nico{width:28px;height:28px;border-radius:7px;background:var(--paper);border:1px solid rgba(var(--tint),.15);display:flex;align-items:center;justify-content:center;font-size:.52rem;font-weight:800;color:var(--ink);flex-shrink:0;} .nbody{flex:1;min-width:0;padding-right:.5rem;} .nt{font-size:.55rem;font-weight:700;color:var(--ink);margin-bottom:.12rem;} .nm{font-size:.53rem;color:var(--t2);line-height:1.4;} .nts{font-size:.44rem;color:var(--t4);flex-shrink:0;margin-top:.1rem;} .nempty{color:var(--t5);font-size:.56rem;text-align:center;padding:1rem;} #ws-logo-hit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,46%);height:min(340px,58%);background:none;border:none;cursor:pointer;z-index:4;border-radius:24px;} #ws-logo-hit:hover{background:none;} #ws-notes-app{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);width:min(520px,84%);height:min(340px,64%);background:rgba(var(--surf-2),.92);border:1px solid rgba(var(--tint),.13);border-radius:18px;backdrop-filter:blur(30px) saturate(160%);box-shadow:0 30px 80px rgba(var(--shade),.7);z-index:45;display:none;flex-direction:column;overflow:hidden;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);} #ws-notes-app.open{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1);} .na-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid rgba(var(--tint),.08);flex-shrink:0;} .na-tabs{display:flex;gap:4px;} .na-tab{background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.08);border-radius:8px;color:var(--t4);font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .7rem;cursor:pointer;font-family:inherit;transition:all .25s;} .na-tab:hover{color:var(--t2);background:rgba(var(--tint),.1);} .na-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} /* ============================================================ CLAUDE — o painel de analise ao lado da nota ============================================================ */ /* o botao so existe para A+ — mas a defesa de verdade e no servidor: as acoes de IA chamam so_admin(). Esconder o botao e so cortesia. */ #na-ia-btn{display:none;} body.tem-adm #na-ia-btn{display:flex;} #na-ia-btn.on{background:var(--purple);color:var(--paper);border-color:var(--purple);} .na-ia{display:none;flex-direction:column;width:300px;flex-shrink:0;min-width:0;border-left:1px solid rgba(var(--tint),.1);} #ws-notes-app.com-ia .na-ia{display:flex;} #ws-notes-app.com-ia{width:min(1020px,94vw);} .ia-h{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-bottom:1px solid rgba(var(--tint),.08);flex-shrink:0;} .ia-h b{font-size:.5rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);} .ia-uso{margin-left:auto;font-size:.42rem;color:var(--t7);font-variant-numeric:tabular-nums;} .ia-uso.cheio{color:var(--red);font-weight:800;} .ia-lim{width:18px;height:18px;border-radius:5px;border:1px solid rgba(var(--tint),.14);background:none;color:var(--t5);font-size:.44rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;transition:all .16s;} .ia-lim:hover{background:var(--red);color:#fff;border-color:var(--red);} .ia-msgs{flex:1;min-height:0;overflow-y:auto;padding:.7rem;display:flex;flex-direction:column;gap:.55rem;scrollbar-width:none;} .ia-msgs::-webkit-scrollbar{display:none;} .ia-vazio{font-size:.46rem;line-height:1.7;color:var(--t7);text-align:center;margin:auto;padding:0 .5rem;} .ia-vazio i{color:var(--t6);font-style:normal;} .ia-m{font-size:.48rem;line-height:1.6;border-radius:11px;padding:.5rem .65rem;max-width:92%;word-break:break-word;} .ia-m.meu{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px;} .ia-m.dele{align-self:flex-start;background:rgba(var(--tint),.07);color:var(--t1);border:1px solid rgba(var(--tint),.09);border-bottom-left-radius:4px;} .ia-m.dele b{color:var(--ink);} .ia-m.pensando{display:flex;gap:4px;align-items:center;padding:.7rem .65rem;} .ia-m.pensando span{width:5px;height:5px;border-radius:50%;background:var(--t5);animation:ia-p 1.2s infinite;} .ia-m.pensando span:nth-child(2){animation-delay:.18s;} .ia-m.pensando span:nth-child(3){animation-delay:.36s;} @keyframes ia-p{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}} .ia-in{display:flex;gap:5px;align-items:flex-end;padding:.55rem .7rem .7rem;border-top:1px solid rgba(var(--tint),.08);flex-shrink:0;} .ia-in textarea{flex:1;min-width:0;max-height:110px;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.12);border-radius:9px;color:var(--ink);font-size:.48rem;line-height:1.45;padding:.45rem .55rem;font-family:inherit;resize:none;outline:none;transition:border-color .16s;} .ia-in textarea:focus{border-color:rgba(var(--tint),.35);} .ia-in button{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:none;background:var(--purple);color:var(--paper);font-size:.7rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:opacity .16s;} .ia-in button:hover{opacity:.82;} .na-empty{color:var(--t7);font-size:.52rem;text-align:center;padding:1rem .3rem;} .na-hb{display:flex;gap:6px;} .na-hb button{width:26px;height:26px;border-radius:8px;background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.1);color:var(--t2);cursor:pointer;font-size:.72rem;display:flex;align-items:center;justify-content:center;transition:all .2s;} .na-hb button:hover{background:rgba(var(--tint),.16);color:var(--ink);} .na-body{display:flex;flex:1;min-height:0;} .na-list{width:150px;border-right:1px solid rgba(var(--tint),.08);overflow-y:auto;padding:.5rem;flex-shrink:0;} .na-list::-webkit-scrollbar{width:3px;} .na-list::-webkit-scrollbar-thumb{background:rgba(var(--tint),.18);} .na-i{position:relative;background:rgba(var(--tint),.05);border-radius:9px;padding:.45rem .55rem;margin-bottom:4px;cursor:pointer;transition:background .2s;} .na-i:hover{background:rgba(var(--tint),.11);} .na-i.on{background:rgba(var(--tint),.16);} .na-it{font-size:.56rem;font-weight:700;color:var(--ink);margin-bottom:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.6rem;} .na-ip{font-size:.48rem;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .na-x{position:absolute;top:3px;right:4px;background:none;border:none;color:var(--t7);cursor:pointer;font-size:.42rem;padding:0;opacity:0;transition:opacity .2s;} .na-i:hover .na-x{opacity:1;} .na-x:hover{color:#ff5f57;} .na-edit{flex:1;display:flex;flex-direction:column;padding:.7rem .8rem;min-width:0;} .na-edit input{background:none;border:none;outline:none;color:var(--ink);font-size:.85rem;font-weight:700;font-family:inherit;padding:0 0 .4rem;border-bottom:1px solid rgba(var(--tint),.08);} .na-edit input::placeholder{color:var(--t7);} .na-edit textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--t1);font-size:.66rem;line-height:1.7;font-family:inherit;padding-top:.6rem;} .na-edit textarea::placeholder{color:var(--t7);} .na-edit input:disabled,.na-edit textarea:disabled{opacity:.35;} /* A EQUIPE RECOLHIDA. Mesma tecnica do .tsair: max-width 0 + overflow hidden. Ela nao some do DOM (o layout nao pula) — ela encolhe. Abre no clique do contador de online. */ .trest{display:flex;gap:.42rem;align-items:center;overflow:hidden;max-width:0;opacity:0;margin-right:0;transition:max-width .42s cubic-bezier(.22,1,.36,1),opacity .28s,margin-right .42s;} .wteam-mini.escancarada .trest{max-width:520px;opacity:1;margin-right:.45rem;} /* O CONTADOR: quantos estao online agora. */ .tvivos{display:flex;align-items:center;gap:.22rem;height:38px;padding:0 .5rem;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.12);border-radius:19px;color:var(--t5);font-family:inherit;font-size:.56rem;font-weight:800;cursor:pointer;flex-shrink:0;transition:all .18s;} .tvivos:hover{background:rgba(var(--tint),.11);border-color:rgba(var(--tint),.28);color:var(--ink);} .tvivos i{display:block;width:6px;height:6px;border-radius:50%;background:var(--t7);flex-shrink:0;} .tvivos.tem{color:var(--ink);border-color:rgba(39,212,101,.3);} .tvivos.tem i{background:var(--green);animation:tv-p 2s ease-in-out infinite;} @keyframes tv-p{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(39,212,101,.45);}50%{opacity:.6;box-shadow:0 0 0 5px rgba(39,212,101,0);}} .wteam-mini.escancarada .tvivos{display:none;} /* A bolinha verde no avatar de quem esta online agora */ .wteam-mini .a.vivo .st{background:var(--green);box-shadow:0 0 0 2px rgba(var(--surf),1);} .wteam-mini .a.me{cursor:pointer;} .wteam-mini .a.me:hover img{border-color:rgba(var(--tint),.4);} .crow{display:flex;gap:.7rem;align-items:flex-start;} .dcol{position:relative;display:flex;flex-direction:column;flex-shrink:0;} .datecard{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:12px;padding:.6rem .5rem .5rem;min-width:78px;flex-shrink:0;cursor:pointer;transition:background .2s,border-color .2s;} .datecard:hover{background:rgba(var(--tint),.12);border-color:rgba(var(--tint),.25);} .dc-d{font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.02em;} .dc-m{font-size:.42rem;color:var(--t3);letter-spacing:.14em;text-transform:uppercase;margin-top:.15rem;} #win-central .win-body{overflow:visible;} .cmain{position:relative;flex:1;min-width:0;background:rgba(var(--surf),.72);border:1px solid rgba(var(--tint),.1);border-radius:13px;backdrop-filter:blur(20px);padding:.7rem;} .empty{color:var(--t5);font-size:.6rem;text-align:center;padding:.8rem;} .ctabs{display:flex;gap:4px;margin-bottom:.6rem;} .ctab{flex:1;background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.08);border-radius:9px;color:var(--t4);font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.4rem;cursor:pointer;font-family:inherit;transition:all .25s;} .ctab:hover{color:var(--t2);background:rgba(var(--tint),.09);} .ctab.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .cscroll{overflow-y:auto;padding-right:3px;scrollbar-width:none;} #cpane.age .cscroll{height:133px;} #cpane.tar .cscroll{height:138px;} .cscroll::-webkit-scrollbar{width:4px;} .cscroll::-webkit-scrollbar-thumb{background:rgba(var(--tint),.18);border-radius:4px;} .tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} .tlist.hist{margin-top:5px;opacity:.55;} .trow{display:flex;align-items:center;gap:.55rem;background:rgba(var(--tint),.05);border-radius:9px;padding:.42rem .55rem;transition:background .2s;} .trow:hover{background:rgba(var(--tint),.1);} .trow span{flex:1;font-size:.6rem;color:var(--t1);line-height:1.4;word-break:break-word;} .trow.done span{text-decoration:line-through;color:var(--t4);} .tck{width:15px;height:15px;border-radius:5px;border:1.5px solid rgba(var(--tint),.35);background:none;cursor:pointer;flex-shrink:0;padding:0;font-size:.5rem;color:var(--paper);display:flex;align-items:center;justify-content:center;transition:all .2s;} .tck:hover{border-color:var(--ink);} .tck.on{background:var(--ink);border-color:var(--ink);} .tck.ghost{border-style:dashed;opacity:.4;cursor:default;} .tdel{background:none;border:none;color:var(--t7);cursor:pointer;font-size:.5rem;flex-shrink:0;opacity:0;transition:opacity .2s;} .trow:hover .tdel{opacity:1;} .tdel:hover{color:#ff5f57;} .tby{display:block;font-size:.44rem;color:var(--blue);margin-top:.1rem;} .trow.add{background:rgba(var(--tint),.02);border:1px dashed rgba(var(--tint),.12);cursor:text;} .trow.add:hover{border-color:rgba(var(--tint),.28);} .trow.add input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:.6rem;font-family:inherit;padding:0;} .trow.add input::placeholder{color:var(--t7);} .thist{width:100%;margin-top:.5rem;background:none;border:none;color:var(--t5);font-size:.5rem;letter-spacing:.08em;text-align:left;cursor:pointer;font-family:inherit;padding:.3rem 0;transition:color .2s;} .thist:hover{color:var(--ink);} .evc.mini{opacity:1;} .evc.mini:hover{opacity:1;} .evc{cursor:pointer;} .evform{display:none;flex-wrap:wrap;gap:4px;margin-top:.5rem;} .evform.open{display:flex;} .evform input{background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:8px;color:var(--ink);font-size:.52rem;font-family:inherit;padding:.35rem .5rem;outline:none;min-width:0;} .evform #ws-ev-t{flex:1 1 100%;} .evform input[type=datetime-local]{flex:1 1 46%;font-size:.44rem;} .evform #ws-ev-l{flex:1 1 46%;} .evform #ws-ev-lu{flex:1 1 100%;} .evform #ws-ev-o{flex:1 1 100%;} .evform #ws-ev-c{flex:1 1 40%;} .evform #ws-ev-u{flex:0 0 42px;} .evform button{flex:1 1 100%;background:var(--ink);color:var(--paper);border:none;border-radius:8px;padding:.35rem;font-size:.52rem;font-weight:700;cursor:pointer;} #site-modal{position:fixed;inset:0;z-index:400;background:rgba(var(--shade),.72);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:1.4rem;} #site-modal.open{display:flex;} #site-modal .cd{background:var(--ink);color:var(--paper);width:100%;max-width:380px;border-radius:3px;overflow:hidden;box-shadow:0 26px 70px rgba(var(--shade),.5);} #site-modal .zb{height:20px;background:url('https://47im.com/hub/img/zebra.jpg') center/cover;} #site-modal .bd{padding:1.5rem 1.5rem 1.3rem;} #site-modal h3{font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.12em;margin-bottom:1.1rem;line-height:1;} #site-modal label{display:block;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t5);margin:.75rem 0 .28rem;font-family:'Space Mono',monospace;} #site-modal input{width:100%;border:none;border-bottom:1px solid var(--t2);padding:.45rem 0;font-size:.82rem;font-family:'Space Mono',monospace;color:var(--paper);outline:none;background:none;transition:border-color .2s;} #site-modal input:focus{border-color:var(--paper);} #site-modal .ft{display:flex;gap:8px;margin-top:1.5rem;} #site-modal button{flex:1;padding:.72rem;border:none;font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:.16em;cursor:pointer;transition:opacity .2s;} #site-modal .sv{background:var(--paper);color:var(--ink);} #site-modal .cn{background:none;color:var(--t5);border:1px solid var(--t2);} #site-modal .sv:hover{opacity:.82;} #site-modal .cn:hover{color:var(--paper);border-color:var(--paper);} .ad-hd{display:flex;align-items:center;justify-content:space-between;padding:.75rem .9rem;border-bottom:1px solid rgba(var(--tint),.08);flex-shrink:0;} .ad-tabs{display:flex;gap:4px;} .ad-tab{background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.08);border-radius:8px;color:var(--t4);font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .7rem;cursor:pointer;font-family:inherit;transition:all .25s;} .ad-tab:hover{color:var(--t2);background:rgba(var(--tint),.1);} .ad-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .ad-x{background:none;border:none;color:var(--t6);font-size:.7rem;cursor:pointer;padding:.2rem .3rem;} .ad-x:hover{color:var(--ink);} .ad-bd{flex:1;overflow-y:auto;padding:.8rem .9rem 1rem;} .adu{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;background:rgba(var(--tint),.04);border:1px solid rgba(var(--tint),.07);border-radius:10px;margin-bottom:5px;} .adu img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;} .adu .i{flex:1;min-width:0;} .adu .i b{display:block;font-size:.6rem;color:var(--ink);font-weight:600;} .adu .i span{font-size:.46rem;color:var(--t5);} .adtag{font-size:.42rem;padding:.16rem .4rem;border-radius:5px;font-weight:700;letter-spacing:.05em;flex-shrink:0;} .adtag.ap{background:rgba(39,212,101,.18);color:var(--green);} .adtag.pd{background:rgba(255,150,60,.2);color:var(--orange);} .adtag.eq{background:rgba(var(--tint),.12);color:var(--t3);} .adu .ac{display:flex;gap:4px;flex-shrink:0;} .adu button{background:rgba(var(--tint),.1);border:1px solid rgba(var(--tint),.14);border-radius:7px;color:var(--t2);font-size:.46rem;font-weight:700;letter-spacing:.04em;padding:.28rem .5rem;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap;} .adu button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} .adu button.dg:hover{background:var(--red);border-color:var(--red);color:var(--ink);} .adf{display:flex;flex-direction:column;gap:5px;margin-bottom:.8rem;} .adf input,.adf textarea{background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:8px;color:var(--ink);font-size:.55rem;font-family:inherit;padding:.45rem .55rem;outline:none;} .adf input:focus,.adf textarea:focus{border-color:rgba(var(--tint),.45);} .adf textarea{min-height:52px;resize:vertical;} .adf button{background:var(--ink);color:var(--paper);border:none;border-radius:8px;padding:.42rem;font-size:.55rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:inherit;align-self:flex-start;padding-left:1rem;padding-right:1rem;} .adf button:hover{opacity:.85;} .adn{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem;background:rgba(var(--tint),.04);border:1px solid rgba(var(--tint),.07);border-radius:10px;padding:.55rem .6rem;margin-bottom:5px;} .adn b{font-size:.55rem;color:var(--ink);display:block;margin-bottom:.12rem;} .adn p{font-size:.52rem;color:var(--t3);line-height:1.5;} .adn small{font-size:.44rem;color:var(--t7);white-space:nowrap;} .adn .rm{background:none;border:none;color:var(--t7);cursor:pointer;font-size:.5rem;padding:0 .2rem;} .adn .rm:hover{color:var(--red);} /* ===== painel da direcao: convite, dono protegido, ultimo acesso ===== */ .adf.adc{display:flex;flex-direction:row;gap:6px;align-items:center;margin-bottom:.6rem;} .adf.adc input{flex:1;min-width:0;} .adf.adc select{flex-shrink:0;width:auto;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:8px;color:var(--ink);font-size:.5rem;padding:.42rem .3rem;font-family:inherit;outline:none;cursor:pointer;} .adf.adc button{flex-shrink:0;white-space:nowrap;padding:.42rem .7rem;} .adf.adc input{flex:1;min-width:0;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.14);border-radius:8px;color:var(--ink);font-size:.5rem;padding:.45rem .55rem;font-family:inherit;outline:none;} .adf.adc input:focus{border-color:rgba(var(--tint),.4);} .adf.adc select{background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.14);border-radius:8px;color:var(--ink);font-size:.5rem;padding:.45rem .35rem;font-family:inherit;cursor:pointer;outline:none;} .adf.adc button{background:var(--ink);color:var(--paper);border:none;border-radius:8px;font-size:.46rem;font-weight:800;letter-spacing:.06em;padding:.45rem .7rem;cursor:pointer;font-family:inherit;white-space:nowrap;transition:opacity .16s;} .adf.adc button:hover{opacity:.82;} .adu-ini{width:30px;height:30px;border-radius:50%;background:rgba(var(--tint),.1);color:var(--t4);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;flex-shrink:0;} .adu-ac{display:block;font-size:.4rem;color:var(--t7);margin-top:1px;} .adu.dono{background:rgba(var(--tint),.05);border-radius:10px;} .ad-lock{font-size:.44rem;font-weight:800;letter-spacing:.06em;color:var(--t5);white-space:nowrap;padding:.2rem .4rem;} /* ============================================================ A GRADE DE ACESSOS (painel da direcao) ============================================================ */ .adu .ac .pm{background:rgba(var(--tint),.09);border-color:rgba(var(--tint),.18);} .pm-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;} .pm-back{background:none;border:1px solid rgba(var(--tint),.16);border-radius:7px;color:var(--t3);font-size:.46rem;font-weight:700;padding:.35rem .55rem;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .16s;} .pm-back:hover{background:rgba(var(--tint),.1);color:var(--ink);} .pm-who{min-width:0;} .pm-who b{display:block;font-size:.58rem;color:var(--ink);} .pm-who span{display:block;font-size:.44rem;color:var(--t6);} .pm-nota{font-size:.44rem;color:var(--t6);background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.1);border-radius:8px;padding:.4rem .55rem;margin-bottom:.6rem;} .pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .8rem;margin-bottom:.8rem;} .pm-l{display:flex;align-items:center;gap:.45rem;font-size:.5rem;color:var(--t2);cursor:pointer;padding:.3rem .2rem;border-radius:6px;transition:background .14s;} .pm-l:hover{background:rgba(var(--tint),.05);} .pm-l input{width:13px;height:13px;accent-color:var(--ink);cursor:pointer;flex-shrink:0;margin:0;} .pm-f{display:flex;gap:.5rem;align-items:center;} .pm-pad{flex:1;background:none;border:1px solid rgba(var(--tint),.16);border-radius:8px;color:var(--t5);font-size:.46rem;font-weight:700;padding:.5rem;cursor:pointer;font-family:inherit;transition:all .16s;} .pm-pad:hover{background:rgba(var(--tint),.08);color:var(--t2);} .pm-ok{flex:1;background:var(--ink);color:var(--paper);border:none;border-radius:8px;font-size:.5rem;font-weight:800;letter-spacing:.06em;padding:.5rem;cursor:pointer;font-family:inherit;transition:opacity .16s;} .pm-ok:hover{opacity:.84;} /* O sino e as notas somem na ORIGEM (o JS nem os gera). Aqui ficam so os botoes que existem no HTML fixo. */ body:not(.pode-jukebox) #ws-yt-btn, body:not(.pode-brainstorm) #na-ia-btn{display:none !important;} /* ===== NIVEL C: o projeto do cliente, na propria linha ===== */ .adu-w.cli{background:rgba(var(--tint),.04);border-radius:12px;} .nvsel,.pjsel{background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.16);border-radius:7px;color:var(--t2);font-size:.44rem;padding:.3rem .35rem;font-family:inherit;cursor:pointer;outline:none;margin-right:2px;max-width:106px;} .nvsel:hover,.pjsel:hover{border-color:rgba(var(--tint),.34);} .pjsel{color:var(--ink);border-color:rgba(var(--tint),.26);} /* sem projeto, o cliente entra e nao ve NADA. O seletor grita isso. */ .pjsel.vazio{color:var(--red);border-color:rgba(229,72,77,.4);background:rgba(229,72,77,.07);} /* ===== O OLHINHO: o cliente ve este link? ===== */ .lkbt.olho{color:var(--t7);} .lkbt.olho:hover{color:var(--ink);background:rgba(var(--tint),.12);} .lkbt.olho.on{color:var(--green);} .lkbt.olho.on:hover{background:rgba(39,212,101,.16);color:var(--green);} .lkq.vis .lkn::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--green);margin-left:5px;vertical-align:middle;} /* ===== PRESENCA: online agora ===== */ .adu-ac.vivo{color:var(--green);font-weight:700;} .adu-ac .pulso{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:4px;vertical-align:middle;animation:vivo-p 2s ease-in-out infinite;} @keyframes vivo-p{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(39,212,101,.5);}50%{opacity:.65;box-shadow:0 0 0 4px rgba(39,212,101,0);}} /* ============================================================ ANEXOS DA NOTA ============================================================ */ .na-anx{border-top:1px solid rgba(var(--tint),.09);padding-top:.55rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem;} .anx-lista{display:flex;flex-direction:column;gap:.28rem;max-height:132px;overflow-y:auto;} .anx{display:flex;align-items:center;gap:.3rem;background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.09);border-radius:9px;padding:.35rem .45rem;transition:border-color .15s;} .anx:hover{border-color:rgba(var(--tint),.2);} .anx-n{flex:1;min-width:0;text-decoration:none;display:block;} .anx-n b{display:block;font-size:.5rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .anx-n small{display:flex;align-items:center;gap:.35rem;font-size:.42rem;color:var(--t6);margin-top:1px;} .anx-n small i{font-style:normal;font-weight:700;padding:.05rem .25rem;border-radius:4px;letter-spacing:.02em;} .anx-n small i.le{background:rgba(39,212,101,.14);color:var(--green);} .anx-n small i.nle{background:rgba(var(--tint),.08);color:var(--t7);} .anx-x{flex-shrink:0;background:none;border:none;color:var(--t7);font-size:.55rem;cursor:pointer;padding:.2rem .3rem;border-radius:5px;font-family:inherit;opacity:0;transition:all .15s;} .anx:hover .anx-x{opacity:1;} .anx-x:hover{background:rgba(229,72,77,.14);color:var(--red);} .anx-add{background:none;border:1px dashed rgba(var(--tint),.2);border-radius:9px;color:var(--t5);font-size:.46rem;font-weight:700;letter-spacing:.03em;padding:.42rem;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:.3rem;transition:all .16s;} .anx-add:hover{border-color:rgba(var(--tint),.4);color:var(--ink);background:rgba(var(--tint),.04);} .anx-add.subindo{border-style:solid;color:var(--ink);pointer-events:none;} .anx-add span{font-size:.6rem;} /* ============================================================ OS TRES TAMANHOS DO QUADRO ============================================================ */ #ws-frame.sz-mob{width:390px;height:min(780px,88%);} #ws-frame.sz-meio{width:min(880px,90%);height:min(560px,80%);} #ws-frame.sz-cheio{width:min(1500px,95%);height:92%;} /* no celular, "mob" nao faz sentido: a tela JA e um celular */ @media (max-width:640px){ #ws-frame.sz-mob,#ws-frame.sz-meio,#ws-frame.sz-cheio{width:94%;height:88%;} .fr-rec{font-size:.66rem;} .fr-rec.girando{animation:fr-gira .7s linear;} @keyframes fr-gira{from{transform:rotate(0)}to{transform:rotate(360deg)}} #fr-sz{display:none;} } #fr-sz{display:flex;gap:2px;background:rgba(var(--tint),.07);border-radius:8px;padding:2px;margin-left:auto;margin-right:.35rem;flex-shrink:0;} #fr-sz button{background:none;border:none;color:var(--t7);font-size:.6rem;line-height:1;padding:.28rem .42rem;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .16s;} #fr-sz button:hover{color:var(--ink);background:rgba(var(--tint),.09);} #fr-sz button.on{background:rgba(var(--tint),.16);color:var(--ink);} #fr-sz button[data-sz="mob"]{font-size:.5rem;} #fr-sz button[data-sz="cheio"]{font-size:.52rem;} /* ---- A PAGINA DE TRAS NAO ROLA ---- Sem isto, a roda do mouse deslizava a landing por baixo do quadro, e o site aberto por dentro perdia o scroll para o site de fora. O 'top' negativo (posto pelo JS) segura a pagina onde ela estava — 'overflow:hidden' sozinho a faria pular para o topo. */ body.travado{position:fixed;left:0;right:0;width:100%;overflow:hidden;} /* ============================================================ PROJETOS RECOLHIDOS — monte diagonal, capas quadradas RECOLHIDO: os quadradinhos espalham num leque diagonal saindo do canto, sobrepostos e girados, assomando meio dentro meio fora. ABERTO: viram fileira lado a lado, como sempre, com o "+" no fim. ============================================================ */ .pmonte{position:relative;transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1);} /* ---- recolhido: o leque ---- */ .pmonte:not(.aberto){cursor:pointer;width:132px;height:100px;} .pmonte:not(.aberto) .pbar{display:block;position:absolute;bottom:0;left:0;} .pmonte:not(.aberto) .pslot{position:absolute;bottom:0;left:0;transform-origin:bottom left;transition:all .45s cubic-bezier(.22,1,.36,1);} .pmonte:not(.aberto) .pslot[style*="--pos:0"]{transform:translate(14px,0) rotate(6deg); z-index:5;} .pmonte:not(.aberto) .pslot[style*="--pos:1"]{transform:translate(30px,4px) rotate(-6deg);z-index:4;filter:brightness(.82);} .pmonte:not(.aberto) .pslot[style*="--pos:2"]{transform:translate(2px,6px) rotate(-15deg);z-index:3;filter:brightness(.64);} .pmonte:not(.aberto) .pslot[style*="--pos:3"]{transform:translate(40px,-8px) rotate(16deg);z-index:2;filter:brightness(.52);} .pmonte:not(.aberto) .pslot[style*="--pos:4"]{transform:translate(22px,10px) rotate(2deg); z-index:1;filter:brightness(.42);} .pmonte:not(.aberto) .pbtn{box-shadow:0 7px 18px rgba(0,0,0,.4);pointer-events:none;} .pmonte:not(.aberto):hover .pslot[style*="--pos:0"]{transform:translate(16px,-4px) rotate(6deg);} .pmonte:not(.aberto) .pmais,.pmonte:not(.aberto) .pcapt,.pmonte:not(.aberto) .pfix{display:none;} /* o contador embaixo do leque */ .pmonte-n{position:absolute;bottom:-6px;left:30px;font-size:.44rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t5);white-space:nowrap;background:rgba(var(--surf),.9);padding:.18rem .42rem;border-radius:20px;border:1px solid rgba(var(--tint),.1);} /* ---- aberto: os quadradinhos lado a lado, como sempre ---- */ .pmonte.aberto .pbar{display:flex;gap:.55rem;align-items:center;flex-wrap:nowrap;} /* ao abrir, cada quadradinho ENTRA deslizando (disfarça a troca de position, que nao anima sozinha). O atraso por posicao faz um efeito em cascata. */ .pmonte.aberto .pslot{animation:pslot-entra .42s cubic-bezier(.22,1,.36,1) both;} .pmonte.aberto .pslot[style*="--pos:0"]{animation-delay:.0s;} .pmonte.aberto .pslot[style*="--pos:1"]{animation-delay:.05s;} .pmonte.aberto .pslot[style*="--pos:2"]{animation-delay:.1s;} .pmonte.aberto .pslot[style*="--pos:3"]{animation-delay:.15s;} .pmonte.aberto .pslot[style*="--pos:4"]{animation-delay:.2s;} @keyframes pslot-entra{from{opacity:0;transform:translateY(8px) scale(.9);}to{opacity:1;transform:none;}} .pmonte.aberto .pslot{transition:transform .42s cubic-bezier(.22,1,.36,1),filter .35s ease;} .pmonte.aberto .pbtn{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .2s;} .pmonte.aberto .pslot{position:relative;transform:none!important;filter:none!important;} .pmonte.aberto .pbtn{box-shadow:none;} .pmonte.aberto .pcapt{display:none;} /* a previsao de 5 dias, agora DENTRO do calendario aberto */ /* ===== CAIXA DO CLIMA (separada da data, igual ao print) ===== */ .wcard{display:flex;align-items:center;gap:.15rem;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:14px;padding:.5rem .6rem;margin-top:.5rem;cursor:pointer;transition:background .2s,border-color .2s;} .wcard:hover{background:rgba(var(--tint),.1);border-color:rgba(var(--tint),.2);} .wc-i{font-size:1.7rem;line-height:1;flex-shrink:0;} .wc-r{display:flex;flex-direction:column;align-items:flex-start;line-height:1;} .wc-t{font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;} .wc-h{font-size:.4rem;font-weight:700;color:var(--t4);letter-spacing:.12em;margin-top:.2rem;display:flex;align-items:center;gap:.15rem;} .wc-seta{font-style:normal;font-size:.5rem;color:var(--t6);transition:transform .3s;display:inline-block;} .dcol.clima-on .wc-seta{transform:rotate(180deg);} /* ============================================================ PREVISAO DOS PROXIMOS DIAS — desce da caixa de clima Recolhida: altura 0. Aberta (.dcol.clima-on): cresce e aparece. ============================================================ */ .wfc{ max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .42s cubic-bezier(.22,1,.36,1), opacity .32s ease, margin-top .42s cubic-bezier(.22,1,.36,1); } .dcol.clima-on .wfc{ max-height:190px; opacity:1; margin-top:.5rem; } #ws-fc-days{ display:flex; flex-direction:column; gap:5px; } /* os cards da previsao usam o .wcard padrao; so tiram a margem de cima */ .wfc .fcd{ margin-top:0; } .fcload{ color:var(--t5); font-size:.5rem; padding:.4rem .2rem; display:block; text-align:center; } /* ===== COMPARTILHAR COMPROMISSO (so a interface) ===== */ .ashare{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .24s,margin-top .3s;} .ashare.open{max-height:210px;opacity:1;margin-top:5px;overflow-y:auto;} .ash-op{width:100%;background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.13);border-radius:8px;color:var(--t3);font-family:inherit;font-size:.46rem;font-weight:700;padding:.4rem;cursor:pointer;text-align:left;transition:all .16s;} .ash-op.on{background:rgba(var(--tint),.16);color:var(--ink);border-color:rgba(var(--tint),.3);} .ash-op:hover{border-color:rgba(var(--tint),.3);} .ash-lista{display:flex;flex-direction:column;gap:3px;margin-top:4px;} .ash-u{display:flex;align-items:center;gap:.45rem;background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.1);border-radius:8px;padding:.32rem .45rem;cursor:pointer;font-family:inherit;transition:all .16s;} .ash-u:hover{background:rgba(var(--tint),.1);} .ash-u.on{background:rgba(39,212,101,.12);border-color:rgba(39,212,101,.35);} .ash-u img,.ash-ini{width:20px;height:20px;border-radius:50%;flex-shrink:0;object-fit:cover;} .ash-ini{display:flex;align-items:center;justify-content:center;background:rgba(var(--tint),.2);color:var(--ink);font-size:.5rem;font-weight:800;} .ash-nm{flex:1;font-size:.46rem;color:var(--ink);font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ash-ck{font-size:.55rem;color:#27d465;font-weight:800;width:12px;flex-shrink:0;} .ash-vazio{font-size:.44rem;color:var(--t6);text-align:center;padding:.6rem;font-style:italic;} .aok.share{font-size:.5rem;} .aok.share.tem{background:rgba(39,212,101,.16);border-color:rgba(39,212,101,.4);color:#27d465;} /* ===== ENVIAR/ACOMPANHAR TAREFA (painel da Equipe) ===== */ .tpop{position:fixed;bottom:80px;right:24px;z-index:200;width:240px;background:rgb(var(--surf));border:1px solid rgba(var(--tint),.16);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:.7rem;opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom right;transition:opacity .26s ease,transform .3s cubic-bezier(.22,1,.36,1);} .tpop.open{opacity:1;transform:translateY(0) scale(1);} .tpop.ancorado{transform-origin:bottom center;} .tpop-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;} .tpop-h b{font-size:.62rem;color:var(--ink);font-weight:800;letter-spacing:.01em;} .tpop-x{background:none;border:none;color:var(--t6);cursor:pointer;font-size:.7rem;padding:0 2px;line-height:1;} .tpop-x:hover{color:var(--ink);} .tpop-add{display:flex;gap:5px;margin-bottom:.55rem;} .tpop-add input{flex:1;min-width:0;background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.14);border-radius:9px;color:var(--ink);font-family:inherit;font-size:.56rem;padding:.42rem .5rem;} .tpop-add input:focus{border-color:rgba(var(--tint),.4);outline:none;} .tpop-ok{flex-shrink:0;width:28px;background:rgba(39,212,101,.16);border:1px solid rgba(39,212,101,.4);border-radius:9px;color:#27d465;font-size:.7rem;font-weight:800;cursor:pointer;transition:all .16s;} .tpop-ok:hover{background:#27d465;color:#062;} .tpop-lista{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;scrollbar-width:thin;} .tpop-item{display:flex;align-items:center;gap:.4rem;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:9px;padding:.4rem .5rem;} .tpop-txt{flex:1;font-size:.56rem;color:var(--ink);line-height:1.25;word-break:break-word;} .tpop-del{flex-shrink:0;width:20px;height:20px;background:rgba(var(--tint),.1);border:1px solid rgba(var(--tint),.16);border-radius:6px;color:var(--t4);font-size:.7rem;font-weight:800;cursor:pointer;line-height:1;transition:all .16s;} .tpop-del:hover{background:var(--red);border-color:var(--red);color:var(--ink);} .tpop-vazio,.tpop-load{font-size:.52rem;color:var(--t6);text-align:center;padding:.6rem .2rem;font-style:italic;} @media(max-width:760px){.tpop{right:12px;left:12px;width:auto;bottom:70px;}} .ad-empty{color:var(--t7);font-size:.55rem;text-align:center;padding:1.4rem 0;} .acards{display:flex;flex-direction:column;gap:5px;} .acard{position:relative;display:grid;grid-template-columns:repeat(3,33.333%);align-items:center;gap:0;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:11px;padding:.45rem 0;cursor:pointer;overflow:hidden;transition:background .2s,border-color .2s;} .acard:hover{background:rgba(var(--tint),.13);} .atag.dia{background:rgba(var(--tint),.16);color:var(--ink);font-weight:800;letter-spacing:.06em;} .ad b{font-size:.72rem;color:var(--ink);font-weight:800;letter-spacing:-.01em;} .ad i{font-size:.36rem;color:var(--t5);font-style:normal;letter-spacing:.18em;margin-top:.1rem;text-indent:.18em;} .avtodos{display:flex;align-items:center;gap:.3rem;width:100%;background:none;border:1px dashed rgba(var(--tint),.16);border-radius:11px;color:var(--t6);font-size:.46rem;font-weight:700;letter-spacing:.04em;padding:.4rem .55rem;margin-bottom:5px;cursor:pointer;font-family:inherit;text-align:left;transition:all .18s;} .avtodos:hover{background:rgba(var(--tint),.09);border-color:rgba(var(--tint),.4);color:var(--ink);} .avt-s{font-size:.6rem;line-height:1;flex-shrink:0;} .ctd{font-weight:700;opacity:.8;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-left:.25rem;} .afoot{margin-top:0;height:0;overflow:visible;transition:margin .28s,height .28s;} .acard.sel{background:rgba(var(--tint),.16);border-color:rgba(var(--tint),.32);} .afoot .acard.anew{margin-top:0;} #win-central:hover .afoot .acard.anew{margin-top:0;} .adtag.ad{display:flex;flex-direction:column;align-items:center;line-height:1;} .bi.notif{background:rgba(var(--tint),.12);border:1px solid rgba(var(--tint),.2);color:var(--ink);} .bi.notif svg{width:18px;height:18px;} /* ============================================================ OS ICONES DE MARCA NAO SEGUEM O TEMA. Gmail branco e Gmail branco, na luz ou no escuro — e identidade visual, nao decoracao. A sombrinha por tras ja os destaca do fundo claro. So o sino (notif), que e nosso, acompanha. ============================================================ */ html.claro #ws .nbadge{color:#fff;} .aplus{font-size:.82rem;line-height:1;} /* no modo edicao os controles ficam sempre visiveis */ .atag.presencial{background:rgba(90,156,255,.18);color:var(--blue);} .atag.online{background:rgba(39,212,101,.18);color:var(--green);} .acat.trabalho{border:1px solid var(--purple);color:var(--purple);} .acat.pessoal{border:1px solid var(--yellow);color:var(--yellow);} /* ===== ITENS DAS FAIXAS (_LAB, _COLAB, _SUP, _CAST, _TEAM) ===== */ /* item de adicionar */ /* modo organizar: controles sempre visiveis */ /* ===== PAINEL DO GOOGLE (Gmail / Meet / Drive) ===== */ .gp-h{display:flex;align-items:center;justify-content:space-between;padding:.45rem .55rem;border-bottom:1px solid rgba(var(--tint),.09);} .gp-h b{font-size:.46rem;color:var(--t3);letter-spacing:.12em;text-transform:uppercase;font-weight:800;} .gp-x{width:17px;height:17px;border-radius:50%;border:none;background:rgba(var(--tint),.1);color:var(--t2);font-size:.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .16s;} .gp-x:hover{background:var(--ink);color:var(--paper);} .gp-b{max-height:190px;overflow-y:auto;scrollbar-width:none;padding:.35rem;display:flex;flex-direction:column;gap:3px;} .gp-b::-webkit-scrollbar{display:none;} .gp-i{display:block;width:100%;position:relative;background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.08);border-radius:8px;padding:.4rem .45rem;cursor:pointer;font-family:inherit;text-align:left;text-decoration:none;transition:background .16s,border-color .16s;} .gp-i:hover{background:rgba(var(--tint),.11);border-color:rgba(var(--tint),.2);} /* nao lido: ponto azul, igual ao Gmail */ .gp-i.novo{background:rgba(var(--tint),.09);} .gp-i.novo .gp-de{color:var(--ink);font-weight:800;} .gp-i.novo::after{content:'';position:absolute;top:.5rem;right:.5rem;width:5px;height:5px;border-radius:50%;background:var(--dot);} /* leitura: o e-mail ocupa a caixinha, do mesmo tamanho */ .gp-volta{background:none;border:none;color:var(--t4);font-size:.46rem;font-weight:800;letter-spacing:.06em;padding:0;cursor:pointer;font-family:inherit;transition:color .16s;} .gp-volta:hover{color:var(--ink);} .gp-b.lendo{display:flex;flex-direction:column;} .gp-msg{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;} .gp-msg::-webkit-scrollbar{display:none;} .gp-mde{font-size:.46rem;font-weight:800;color:var(--ink);margin-bottom:.1rem;} .gp-mas{font-size:.44rem;color:var(--t4);margin-bottom:.45rem;padding-bottom:.4rem;border-bottom:1px solid rgba(var(--tint),.08);} .gp-txt{font-size:.46rem;line-height:1.55;color:var(--t2);white-space:pre-wrap;word-break:break-word;} .gp-abrir{display:block;margin-top:.5rem;padding:.3rem;border-radius:6px;border:1px solid rgba(var(--tint),.16);color:var(--t4);font-size:.42rem;font-weight:700;letter-spacing:.05em;text-align:center;text-decoration:none;flex-shrink:0;transition:all .16s;} .gp-abrir:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} .gp-load{padding:.5rem;font-size:.44rem;color:var(--t7);} .gp-de{font-size:.45rem;color:var(--blue);font-weight:700;letter-spacing:.03em;margin-bottom:.1rem;} .gp-as{font-size:.52rem;color:var(--ink);font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gp-rs{font-size:.44rem;color:var(--t5);margin-top:.12rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gp-quando{font-size:.44rem;color:var(--green);font-weight:800;letter-spacing:.06em;text-transform:uppercase;} .gp-tit{font-size:.55rem;color:var(--ink);font-weight:700;line-height:1.25;margin-top:.12rem;} .gp-gente{font-size:.44rem;color:var(--t5);margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gp-meet{display:flex;flex-direction:column;gap:0;} .gp-entrar{align-self:flex-start;margin-top:.35rem;background:var(--ink);color:var(--paper);border-radius:6px;padding:.22rem .55rem;font-size:.44rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .16s;} .gp-entrar:hover{transform:translateY(-1px);} .gp-vazio{font-size:.48rem;color:var(--t5);text-align:center;padding:.9rem .5rem;line-height:1.5;} .gp-load{font-size:.48rem;color:var(--t5);text-align:center;padding:.9rem;} .gp-conectar{display:block;margin-top:.5rem;background:var(--ink);color:var(--paper);border-radius:7px;padding:.35rem;font-size:.46rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;} /* ===== EVENTO ABERTO: 3 colunas de largura, mesma altura ===== */ /* ===== EVENTO ABERTO: 3 colunas, mesma altura ===== */ /* acoes */ /* confirmacao em duas metades */ /* ===== EVENTO ABERTO: 3 colunas de largura, mesma altura ===== */ /* ===== AGENDA: formulario (abrir item ou criar novo) ===== O .acard e uma GRADE de 5 colunas. Quando vira formulario, ele deixa de ser grade e passa a ser duas linhas empilhadas. */ .acard.aopen{display:flex;flex-direction:column;align-items:stretch;gap:4px;background:rgba(var(--tint),.11);border-color:rgba(var(--tint),.28);cursor:default;padding:.45rem;overflow:visible;} .acard.aopen .afr{display:flex;gap:4px;align-items:center;} .acard.aopen input,.acard.aopen select{background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.13);border-radius:7px;color:var(--ink);font-size:.5rem;font-family:inherit;padding:.34rem .42rem;outline:none;min-width:0;width:100%;} .acard.aopen input:focus,.acard.aopen select:focus{border-color:rgba(var(--tint),.5);} .acard.aopen #ae-t,.acard.aopen #ae-l{flex:.75;min-width:0;} .acard.aopen input[type=datetime-local]{flex:1.6;font-size:.44rem;min-width:0;} .acard.aopen select{flex:1;font-size:.45rem;padding:.34rem .2rem;} .aok{width:25px;height:25px;flex-shrink:0;border-radius:6px;border:1px solid rgba(var(--tint),.16);background:rgba(var(--tint),.1);color:var(--t2);font-size:.6rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:all .18s;} .aok:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} .aok.ok{background:rgba(39,212,101,.16);border-color:rgba(39,212,101,.4);color:#27d465;} .aok.ok:hover{background:#27d465;border-color:#27d465;color:#062;} .aok.cn:hover{background:rgba(var(--tint),.25);color:var(--ink);border-color:rgba(var(--tint),.4);} .aok.dg:hover{background:var(--red);border-color:var(--red);color:var(--ink);} /* ===== AGENDA: linha "+ Novo compromisso" (so no hover) ===== */ .acard.anew{display:flex;align-items:center;justify-content:center;gap:.4rem;opacity:0;max-height:0;margin-top:0;padding:0 .5rem;overflow:hidden;background:rgba(var(--tint),.02);border:1px dashed rgba(var(--tint),.14);color:var(--t4);font-size:.54rem;transition:opacity .22s,max-height .28s,padding .28s,margin .28s;} .cmain:hover .acard.anew{opacity:1;max-height:40px;margin-top:5px;padding:.45rem .5rem;} /* ===== EVENTO FECHADO: mes maior, nome sempre em caixa alta ===== */ .evday{font-size:1.05rem;color:var(--ink);font-weight:800;line-height:1;letter-spacing:-.02em;text-align:center;flex-shrink:0;} .evmon{font-size:.38rem;color:var(--t3);letter-spacing:.34em;font-weight:700;text-align:center;text-indent:.34em;line-height:1;margin-top:2px;} .evtit{font-size:.46rem;color:var(--t2);font-weight:700;letter-spacing:.02em;margin-top:2px;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .evc.passou{opacity:.4;} .evc.passou:hover{opacity:.7;} /* ===== EVENTO ABERTO: 3 colunas, tudo centralizado e junto ===== */ /* acoes lado a lado */ .evtit.longo{font-size:.4rem;letter-spacing:.01em;} .tsair{display:flex;align-items:center;overflow:hidden;max-width:0;opacity:0;margin-left:0;transition:max-width .28s ease,opacity .22s,margin .28s;} .tsair.open{max-width:112px;opacity:1;margin-left:8px;} .a.sair{width:48px;height:48px;border-radius:50%;background:rgba(var(--tint),.08);border:2px solid rgba(var(--tint),.22);color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;transition:background .18s,color .18s,border-color .18s;} .a.sair:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} .a.adm{width:48px;height:48px;border-radius:50%;background:rgba(var(--tint),.08);border:2px solid rgba(var(--tint),.22);color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;margin-right:8px;transition:background .18s,color .18s,border-color .18s;} .a.adm:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} /* ===== BOTAO DO MODO DESCANSO ===== */ /* ===== MODO DESCANSO: tudo do workspace vira marca d'agua ===== */ #ws.descanso #ws-desk{filter:grayscale(1) brightness(1.6);opacity:.09;transition:filter .5s,opacity .5s;} #ws.descanso #ws-desk .win, #ws.descanso #ws-desk .win *{pointer-events:none !important;} #ws-desk{transition:filter .5s,opacity .5s;} #ws.descanso #ws-notif-panel, #ws.descanso #ws-notes-app, #ws.descanso #ws-adm-panel{opacity:0;pointer-events:none;} .cmain:hover .afoot{margin-top:5px;height:auto;} /* com admin: a lua vai para a esquerda dele */ /* no descanso: so a lua fica. O X e o painel somem. */ #ws-exit,#ws-adm{transition:opacity .3s;} #ws.descanso #ws-exit, #ws.descanso #ws-adm{opacity:0;pointer-events:none;} /* ===== AGENDA: 5 colunas iguais (20% cada), tudo centralizado ===== */ .ad{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;min-width:0;padding:0 4px;} .ad b{font-size:.72rem;color:var(--ink);font-weight:800;letter-spacing:-.01em;} .ad i{font-size:.36rem;color:var(--t5);font-style:normal;letter-spacing:.18em;margin-top:.1rem;text-indent:.18em;} .atags{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:0 5px;} .atag{display:block;width:100%;text-align:center;font-size:.36rem;font-weight:700;letter-spacing:.04em;padding:.12rem .2rem;border-radius:4px;white-space:nowrap;line-height:1.3;overflow:hidden;text-overflow:ellipsis;} .ai{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;padding:0 5px;} .an{font-size:.56rem;color:var(--ink);font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;} .aloc{font-size:.42rem;color:var(--t5);line-height:1.2;margin-top:.06rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;} .ahr{display:flex;align-items:center;justify-content:center;font-size:.58rem;color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;} .acol{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;} .acat{width:15px;height:15px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.42rem;font-weight:800;background:none;flex-shrink:0;} /* quadradinho T/P: no hover do item, vira o botao de concluir */ .acol{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;} .aok2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:19px;height:19px;border-radius:5px;border:1px solid var(--green);background:rgba(79,224,138,.16);color:var(--green);font-size:.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s,background .16s;} .acard:hover .acat{opacity:0;} .acard:hover .aok2{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;} .aok2:hover{background:var(--green);color:var(--paper);} .acat{transition:opacity .16s;} /* no formulario o hover nao vale */ .acard.aopen .aok2{display:none;} /* formulario: 3 campos em cima, 2 selects + botoes embaixo */ .acard.aopen #ae-t,.acard.aopen #ae-l{flex:.75;min-width:0;} .acard.aopen input[type=datetime-local]{flex:1.6;font-size:.44rem;min-width:0;} /* ===== EVENTO ABERTO: 3 colunas, sem divisorias, tudo centralizado ===== */ /* na coluna estreita, o evento aberto EMPILHA: dia em cima, resto embaixo */ .evc.sel{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;padding:.6rem .55rem;background:rgba(var(--tint),.14);border-color:rgba(var(--tint),.32);} .evc.sel .evx{display:none;} .ev-c{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;padding:0 4px;} /* linha 1: todas com a MESMA fonte */ .ev-c b{font-size:.78rem;color:var(--ink);font-weight:800;letter-spacing:.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;outline:none;} /* linha 2: todas com a MESMA fonte */ .ev-c i{font-size:.5rem;color:var(--t3);font-style:normal;font-weight:600;letter-spacing:.06em;margin-top:.18rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;outline:none;} .f-hr{font-variant-numeric:tabular-nums;} /* edicao interna: o texto vira campo, sem mudar o tamanho do card */ .evc.sel.editando b,.evc.sel.editando i{background:rgba(var(--tint),.1);border-radius:4px;padding:0 3px;cursor:text;} .evc.sel.editando b:focus,.evc.sel.editando i:focus{background:rgba(var(--tint),.2);box-shadow:0 0 0 1px rgba(var(--tint),.45);} /* botoes no canto superior direito */ .ev-acoes{position:absolute;top:4px;right:4px;display:flex;gap:3px;z-index:4;} .ev-b{width:17px;height:17px;border-radius:5px;border:1px solid rgba(var(--tint),.2);background:rgba(var(--shade),.5);color:var(--t2);font-size:.45rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:all .16s;} .ev-b:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} .ev-b.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .ev-b.x{color:var(--red);border-color:rgba(229,72,77,.5);} .ev-b.x:hover{background:var(--red);color:var(--ink);border-color:var(--red);} .ev-b.sim{background:var(--red);border-color:var(--red);color:var(--ink);} .ev-b.sim:hover{background:var(--red-2);} .ev-b.nao:hover{background:rgba(var(--tint),.25);color:var(--ink);} .afim{display:grid;grid-template-columns:50% 50%;align-items:center;min-width:0;padding:0 4px;} .aini{display:grid;grid-template-columns:50% 50%;align-items:center;min-width:0;padding:0 4px;} /* os outros eventos CONTINUAM visiveis quando um expande (so o [+] some) */ .evtrack.focus .evnew{display:none;} /* quem nunca entrou: so a inicial, apagadinho */ .wteam-mini .ini{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--tint),.07);border:2px solid rgba(var(--tint),.14);color:var(--t2);font-size:1rem;font-weight:800;letter-spacing:.02em;flex-shrink:0;} .wteam-mini .a.off{opacity:.72;} .wteam-mini .a.off:hover{opacity:1;} .wteam-mini .a.off .st{background:var(--t8);} .aini{display:grid;grid-template-columns:50% 50%;align-items:center;min-width:0;padding:0 4px;} /* ===== CALENDARIO (por cima da Agenda/Tarefas) ===== */ .cal-d:hover{background:rgba(var(--tint),.12);} .cal-d.fora{color:var(--t8);} /* hoje: circulo vermelho, como no iOS */ .cal-d.hoje{background:var(--red);color:var(--ink);font-weight:800;} .cal-d.hoje:hover{background:var(--red-2);} /* dia escolhido: circulo branco */ .cal-d.sel{background:var(--ink);color:var(--paper);font-weight:800;} .cal-d.prev{box-shadow:inset 0 0 0 1px rgba(var(--tint),.5);} .cal-d.sel.hoje{background:var(--red);color:var(--ink);box-shadow:0 0 0 2px var(--ink);} /* pontinho: tem compromisso nesse dia */ .cal-d.tem::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--purple);} .cal-d.hoje.tem::after,.cal-d.sel.tem::after{background:currentColor;} /* a aba fica marcada quando esta filtrada */ .ctab.filt{border-color:rgba(180,139,255,.55);} .ctab.filt.on{background:var(--purple);color:var(--paper);border-color:var(--purple);} /* ===== CALENDARIO: cobre a caixa da Agenda/Tarefas (35% mes | 65% dias) ===== */ .cal-sem{display:grid;grid-template-columns:repeat(7,1fr);flex-shrink:0;} .cal-sem span{text-align:center;font-size:.4rem;font-weight:800;letter-spacing:.04em;color:var(--t7);padding-bottom:.2rem;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(28px,1fr);gap:1px;flex:1;min-height:0;align-content:stretch;} .cal-d{position:relative;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--t1);font-size:.5rem;font-weight:700;font-family:inherit;cursor:pointer;border-radius:6px;padding:0;min-width:0;min-height:0;transition:background .16s,color .16s;} .cal-d:hover{background:rgba(var(--tint),.12);} .cal-d.fora{color:var(--t8);} .cal-d.hoje{background:var(--red);color:var(--ink);font-weight:800;} .cal-d.hoje:hover{background:var(--red-2);} .cal-d.sel{background:var(--ink);color:var(--paper);font-weight:800;} .cal-d.sel.hoje{background:var(--red);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);} .cal-d.tem::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--purple);} .cal-d.hoje.tem::after,.cal-d.sel.tem::after{background:currentColor;} /* ===== CALENDARIO: 40% data | 60% dias, setas nas laterais ===== */ #cal.cal-box{ flex:0 0 auto; align-self:flex-start; width:fit-content; min-width:210px; max-width:100%; display:none; flex-direction:column; gap:.45rem; padding:.7rem .65rem; background:rgba(var(--surf),.72); border:1px solid rgba(var(--tint),.1); border-radius:14px; opacity:0; transform:scale(.98); transition:opacity .3s ease, transform .34s cubic-bezier(.22,1,.36,1); } #cal.cal-box.open{ display:flex; opacity:1; transform:scale(1); min-height:230px; } /* quando o calendario esta ativo, a agenda/tarefas some (alternam) */ .crow.cal-ativo .cmain{ display:none; } #cal.open{opacity:1;transform:scale(1);pointer-events:auto;} .cal-cab{display:flex;flex-direction:row;align-items:stretch;gap:.5rem;width:100%;} .cal-meia{display:flex;flex-direction:column;gap:.35rem;min-width:0;} .cal-meia.esq{flex:0 0 auto;min-width:0;} .cal-meia.dir{flex:1 1 0;min-width:88px;justify-content:flex-end;} .cal-anotar{display:flex;align-items:center;gap:.35rem;min-width:0;padding-right:.4rem;} .cal-tarbtn{flex-shrink:0;display:flex;align-items:center;background:rgba(180,139,255,.14);border:1px solid rgba(180,139,255,.35);border-radius:2px;padding:.2rem .34rem;font-family:inherit;font-size:.33rem;font-weight:500;letter-spacing:.04em;color:var(--purple-3);cursor:pointer;transition:all .16s;} .cal-tarbtn:hover{background:var(--purple);color:var(--paper);border-color:var(--purple);} .cal-baixo{display:flex;flex-direction:row;align-items:flex-start;gap:.5rem;width:100%;} .cal-esq{display:flex;flex-direction:column;gap:.4rem;min-width:0;flex-shrink:0;width:100%;} .cal-topo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;min-width:0;} .cal-hoje{margin-top:0;width:100%;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:stretch;} /* cada linha: rotulo à ESQUERDA + itens numa fileira à direita */ .ch-linha{display:flex;align-items:center;gap:4px;width:100%;min-width:0;} .ch-rot{flex-shrink:0;display:flex;align-items:center;background:rgba(var(--tint),.1);border:1px solid rgba(var(--tint),.16);border-radius:5px;padding:.22rem .34rem;font-family:inherit;font-size:.38rem;font-weight:800;letter-spacing:.04em;color:var(--t3);cursor:pointer;transition:all .16s;} .ch-rot:hover{background:rgba(var(--tint),.2);color:var(--ink);border-color:rgba(var(--tint),.3);} .ch-tarrot{color:var(--purple-3);} .ch-itens{flex:1;min-width:0;display:flex;gap:3px;align-items:center;overflow:hidden;} .ch-h{flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:2px;border:1px solid transparent;font-size:.33rem;font-weight:400;font-family:inherit;padding:.2rem .3rem;cursor:pointer;transition:all .16s;font-variant-numeric:tabular-nums;} .ch-data{background:transparent!important;border:1px solid var(--ink)!important;color:var(--ink)!important;font-weight:600;} .ch-data:hover{background:rgba(var(--tint),.12)!important;} .ch-h.presencial{background:rgba(90,156,255,.18);color:var(--blue);} .ch-h.online{background:rgba(39,212,101,.18);color:var(--green);} .ch-h.presencial:hover{background:var(--blue);color:var(--paper);border-color:var(--blue);} .ch-h.online:hover{background:var(--green);color:var(--paper);border-color:var(--green);} .ch-t{flex-shrink:0;display:flex;align-items:center;background:rgba(var(--tint),.1);border:1px solid rgba(var(--tint),.16);border-radius:2px;font-size:.33rem;font-weight:400;font-family:inherit;color:var(--t2);padding:.2rem .32rem;cursor:pointer;transition:all .16s;white-space:nowrap;} .ch-t:hover{background:rgba(var(--tint),.2);color:var(--ink);} .ch-mais{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:1px dashed rgba(var(--tint),.3);border-radius:2px;font-size:.4rem;font-weight:700;font-family:inherit;color:var(--t4);padding:.24rem .3rem;cursor:pointer;transition:all .16s;} .ch-mais:hover{background:rgba(var(--tint),.09);border-color:rgba(var(--tint),.4);color:var(--ink);} .ch-vazio{font-size:.36rem;color:var(--t6);font-style:italic;} .ch-vaga{background:transparent!important;border:1px solid transparent!important;pointer-events:none;visibility:hidden;min-width:1.6rem;} .ch-todos{background:rgba(var(--tint),.12)!important;color:var(--t2)!important;font-style:italic;letter-spacing:.02em;} .ch-todos:hover{background:rgba(var(--tint),.24)!important;color:var(--ink)!important;} .cal-ano{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;} .cal-mes{font-size:.68rem;font-weight:800;letter-spacing:.22em;color:var(--t4);margin-top:.3rem;} .cal-dir{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;flex:1;min-height:0;width:100%;margin-top:.3rem;} .cal-corpo{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;height:100%;justify-content:flex-start;} .cmain.com-cal{} /* o calendario nao cobre mais a agenda: sem alteracao de altura */ .cmain.com-cal .afoot{margin-top:0 !important;height:0 !important;} .cmain.com-cal .acard.anew{opacity:0 !important;max-height:0 !important;padding:0 .5rem !important;margin-top:0 !important;} /* ano digitavel */ .cal-ano{font-size:.95rem;font-weight:800;letter-spacing:.04em;color:var(--t6);line-height:1;outline:none;border-radius:6px;padding:1px 3px;margin-left:-3px;margin-top:.15rem;cursor:text;transition:background .16s,color .16s;flex-shrink:0;align-self:flex-start;} .cal-ano:hover{color:var(--t2);} .cal-ano:hover{background:rgba(var(--tint),.09);} .cal-ano:focus{background:rgba(var(--tint),.18);box-shadow:0 0 0 1px rgba(var(--tint),.4);} /* mes com lista */ .cal-mes{display:flex;align-items:center;gap:.25rem;min-width:0;background:none;border:none;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:0;padding:0 3px;margin-left:-3px;border-radius:6px;cursor:pointer;font-family:inherit;line-height:1;white-space:nowrap;transition:background .16s,color .16s;} .cal-topo{min-width:0;} .cal-mes:hover{background:rgba(var(--tint),.09);color:var(--ink);} .cal-seta{font-size:.42rem;letter-spacing:0;opacity:.7;} .cal-drop{position:absolute;top:26px;left:-3px;right:auto;z-index:20;display:grid;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top left;pointer-events:none;transition:opacity .26s ease,transform .3s cubic-bezier(.22,1,.36,1);grid-template-columns:repeat(2,1fr);gap:2px;background:var(--bg-2);border:1px solid rgba(var(--tint),.16);border-radius:9px;padding:4px;box-shadow:0 12px 30px rgba(var(--shade),.65);} .cal-drop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} .cal-mi{background:none;border:none;color:var(--t2);font-size:.4rem;font-weight:700;letter-spacing:.05em;padding:.3rem .35rem;border-radius:5px;cursor:pointer;font-family:inherit;white-space:nowrap;text-align:left;transition:all .14s;} .cal-mi:hover{background:rgba(var(--tint),.14);color:var(--ink);} .cal-mi.on{background:var(--ink);color:var(--paper);} .dcol.aberto .datecard{padding:.55rem .5rem;} .datecard{transition:background .2s,border-color .2s,padding .25s;} /* ===== botao + (adicionar cliente aos projetos) ===== */ .pbtn.pmais{background:rgba(var(--tint),.04);border:1px dashed rgba(var(--tint),.22);color:var(--t6);font-size:1.5rem;font-weight:300;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit;opacity:0;max-width:0;margin-left:-6px;padding:0;overflow:hidden;pointer-events:none;transition:opacity .22s,max-width .28s cubic-bezier(.22,1,.36,1),margin .28s;} .pbtn.pmais:hover{background:rgba(var(--tint),.1);border-color:rgba(var(--tint),.5);color:var(--ink);} /* ===== painel de escolha ===== */ .ppick{display:block;max-height:0;opacity:0;margin-bottom:0;pointer-events:none;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin-bottom .4s;margin-bottom:.55rem;background:rgba(var(--surf),.96);border:1px solid rgba(var(--tint),.13);border-radius:12px;overflow:hidden;backdrop-filter:blur(20px);box-shadow:0 14px 34px rgba(var(--shade),.6);} .ppick.open{max-height:400px;opacity:1;margin-bottom:.55rem;pointer-events:auto;} .pk-h{display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem;border-bottom:1px solid rgba(var(--tint),.08);} .pk-h b{font-size:.48rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);} .pk-x{width:17px;height:17px;border-radius:5px;border:none;background:rgba(var(--tint),.08);color:var(--t4);font-size:.45rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:all .16s;} .pk-x:hover{background:var(--ink);color:var(--paper);} .pk-lista{max-height:210px;overflow-y:auto;padding:.35rem;scrollbar-width:none;} .pk-t{font-size:.4rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--t7);padding:.35rem .3rem .25rem;} .pk-i{display:flex;align-items:center;gap:.45rem;width:100%;background:none;border:1px solid transparent;border-radius:8px;padding:.35rem .4rem;cursor:pointer;font-family:inherit;text-align:left;transition:all .16s;} .pk-i:hover{background:rgba(var(--tint),.09);border-color:rgba(var(--tint),.14);} .pk-i img{width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0;} .pk-ini{width:24px;height:24px;border-radius:6px;background:rgba(var(--tint),.08);border:1px solid rgba(var(--tint),.12);color:var(--t3);font-size:.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .pk-n{flex:1;min-width:0;font-size:.5rem;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pk-tr{font-size:.38rem;font-weight:700;letter-spacing:.08em;color:var(--t7);flex-shrink:0;} .pk-ac{width:16px;height:16px;border-radius:5px;background:rgba(var(--tint),.1);color:var(--t2);font-size:.5rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .pk-i:hover .pk-ac{background:var(--ink);color:var(--paper);} .pk-i.on .pk-ac{background:rgba(229,72,77,.2);color:var(--red);} .pk-i.on:hover .pk-ac{background:var(--red);color:var(--ink);} .pk-vazio,.pk-load{padding:.6rem;text-align:center;font-size:.45rem;color:var(--t6);} .pbar:hover .pbtn.pmais, .ppick.open ~ .pbar .pbtn.pmais{opacity:1;max-width:62px;margin-left:.55rem;pointer-events:auto;} /* ===== PAINEL DO PROJETO: barra grossa em cima, 30% abas | 70% conteudo ===== */ .pdet{position:absolute;bottom:calc(100% + 8px);left:0;right:0;height:232px;display:flex;flex-direction:column;background:rgba(var(--surf-2),.97);border:1px solid rgba(var(--tint),.12);border-radius:13px;padding:.7rem;backdrop-filter:blur(20px);box-shadow:0 -14px 44px rgba(var(--shade),.6);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1);z-index:40;} /* barra grossa, com a porcentagem dentro */ .pd-bar{position:relative;height:26px;border-radius:9px;background:rgba(var(--tint),.07);border:1px solid rgba(var(--tint),.1);overflow:hidden;flex-shrink:0;margin-bottom:.6rem;} .pd-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blue-2),var(--purple-2),var(--pink));border-radius:8px;transition:width .8s cubic-bezier(.22,1,.36,1);} .pd-bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800;letter-spacing:.06em;color:var(--ink);text-shadow:0 1px 3px rgba(var(--shade),.6);pointer-events:none;} .pd-bar i{pointer-events:none;} .pd-bar.edit{cursor:pointer;} .pd-bar.edit:hover{border-color:rgba(var(--tint),.3);} .pd-bar.live{cursor:ew-resize;box-shadow:0 0 0 2px rgba(139,92,246,.55);border-color:rgba(var(--tint),.4);touch-action:none;} .pd-bar.live i{transition:none;} /* corpo: 30 / 70 */ .pd-corpo{flex:1;display:grid;grid-template-columns:30% 70%;gap:.55rem;min-height:0;} .pd-abas{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:.5rem;border-right:1px solid rgba(var(--tint),.08);} .pd-aba{background:none;border:1px solid transparent;border-radius:8px;color:var(--t4);font-size:.46rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .35rem;cursor:pointer;font-family:inherit;text-align:left;transition:all .18s;} .pd-aba:hover{background:rgba(var(--tint),.07);color:var(--ink);} .pd-aba.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .pd-conteudo{min-width:0;min-height:0;overflow-y:auto;scrollbar-width:none;} .pd-vazio{display:flex;align-items:center;justify-content:center;height:100%;font-size:.48rem;color:var(--t7);} /* etapas */ .pd-etapas{display:flex;flex-direction:column;gap:4px;} .psq{position:relative;display:flex;align-items:center;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:8px;padding:.42rem .5rem;padding-right:1.4rem;} .psq span{font-size:.5rem;color:var(--t1);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .psx{position:absolute;top:50%;right:.35rem;transform:translateY(-50%);width:15px;height:15px;border-radius:5px;border:none;background:none;color:var(--t7);font-size:.42rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;opacity:0;transition:all .16s;} .psq:hover .psx{opacity:1;} .psx:hover{background:var(--red);color:var(--ink);} .psadd{background:rgba(var(--tint),.03);border:1px dashed rgba(var(--tint),.16);border-radius:8px;color:var(--t6);font-size:.46rem;font-weight:700;letter-spacing:.06em;padding:.42rem;cursor:pointer;font-family:inherit;transition:all .18s;} .psadd:hover{background:rgba(var(--tint),.1);border-color:rgba(var(--tint),.4);color:var(--ink);} /* ===== LINKS do projeto ===== */ .pd-links{display:flex;flex-direction:column;gap:4px;} .lkq{position:relative;display:flex;align-items:center;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:8px;overflow:hidden;transition:border-color .16s,background .16s;} .lkq:hover{background:rgba(var(--tint),.1);border-color:rgba(var(--tint),.2);} .lkgo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:none;padding:.4rem .5rem;cursor:pointer;font-family:inherit;text-align:left;} .lkn{font-size:.5rem;font-weight:700;color:var(--t1);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;} .lku{font-size:.4rem;color:var(--t7);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;} .lkq .lkbt{width:17px;height:17px;margin-right:3px;border-radius:5px;border:none;background:none;color:var(--t7);font-size:.44rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;opacity:0;transition:all .16s;} .lkq:hover .lkbt{opacity:1;} .lkbt.e:hover{background:var(--ink);color:var(--paper);} .lkbt.x:hover{background:var(--red);color:var(--ink);} .lkq.dentro .lkn::after{content:'\25A3';margin-left:.3rem;font-size:.42rem;color:var(--purple);} /* tela de edicao: ocupa o lugar da lista, nao empurra nada */ .lkedit{display:flex;flex-direction:column;gap:5px;height:100%;} .lkback{align-self:flex-start;background:none;border:none;color:var(--t4);font-size:.44rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.1rem 0 .2rem;cursor:pointer;font-family:inherit;transition:color .16s;} .lkback:hover{color:var(--ink);} .lki{width:100%;background:rgba(var(--shade),.35);border:1px solid rgba(var(--tint),.12);border-radius:6px;color:var(--t1);font-family:inherit;font-size:16px;padding:.32rem .4rem;outline:none;} .lki:focus{border-color:rgba(var(--tint),.45);} .lkd{display:flex;align-items:center;gap:.3rem;font-size:.44rem;color:var(--t4);cursor:pointer;user-select:none;padding:.15rem 0;} .lkd input{width:12px;height:12px;accent-color:var(--purple-2);cursor:pointer;} .lkft{display:flex;align-items:center;gap:.35rem;margin-top:auto;} .lkok{flex:1;background:var(--ink);border:none;border-radius:6px;color:var(--paper);font-size:.44rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.34rem .55rem;cursor:pointer;font-family:inherit;} .lkdel{background:none;border:1px solid rgba(229,72,77,.4);border-radius:6px;color:var(--red);font-size:.44rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.34rem .55rem;cursor:pointer;font-family:inherit;transition:all .16s;} .lkdel:hover{background:var(--red);color:var(--ink);} .lkadd{background:rgba(var(--tint),.03);border:1px dashed rgba(var(--tint),.16);border-radius:8px;color:var(--t6);font-size:.46rem;font-weight:700;letter-spacing:.06em;padding:.42rem;cursor:pointer;font-family:inherit;transition:all .18s;} .lkadd:hover{background:rgba(var(--tint),.1);border-color:rgba(var(--tint),.4);color:var(--ink);} /* ===== MINIATURA: abre no centro, igual as notas ===== */ #ws-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);width:min(880px,90%);height:min(560px,80%);transition:width .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1),opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);background:rgba(var(--surf-2),.94);border:1px solid rgba(var(--tint),.13);border-radius:18px;backdrop-filter:blur(30px) saturate(160%);box-shadow:0 30px 80px rgba(var(--shade),.7);z-index:60;display:none;flex-direction:column;overflow:hidden;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);} #ws-frame.open{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1);} .fr-h{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid rgba(var(--tint),.08);flex-shrink:0;} .fr-h b{font-size:.5rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t1);flex-shrink:0;} .fr-u{flex:1;min-width:0;font-size:.42rem;color:var(--t7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fr-b{width:19px;height:19px;border-radius:6px;border:none;background:rgba(var(--tint),.08);color:var(--t4);font-size:.46rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;text-decoration:none;flex-shrink:0;transition:all .16s;} .fr-b:hover{background:var(--ink);color:var(--paper);} #fr-i{flex:1;width:100%;border:none;background:var(--ink);} .fr-p{padding:.35rem .8rem;border-top:1px solid rgba(var(--tint),.08);font-size:.4rem;color:var(--t7);text-align:center;flex-shrink:0;} .fr-p a{color:var(--purple);text-decoration:none;font-weight:700;} /* ===== JUKEBOX: gaveta com abas + player livre ===== */ .jkt{display:flex;gap:3px;padding:.45rem .5rem .35rem;} .jkt button{flex:1;background:none;border:1px solid rgba(var(--tint),.12);border-radius:6px;color:var(--t4);font-size:.42rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem;cursor:pointer;font-family:inherit;transition:all .16s;} .jkt button:hover{color:var(--ink);border-color:rgba(var(--tint),.3);} .jkt button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .jkf{display:flex;gap:4px;padding:0 .5rem .4rem;} .jkf input{flex:1;min-width:0;background:rgba(var(--shade),.35);border:1px solid rgba(var(--tint),.12);border-radius:6px;color:var(--t1);font-family:inherit;font-size:16px;padding:.32rem .4rem;outline:none;} .jkf input:focus{border-color:rgba(var(--tint),.45);} .jkf button{background:var(--ink);border:none;border-radius:6px;color:var(--paper);font-size:.42rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .55rem;cursor:pointer;font-family:inherit;white-space:nowrap;} .jkl{display:flex;flex-direction:column;gap:3px;padding:0 .5rem .35rem;max-height:160px;overflow-y:auto;scrollbar-width:none;} .jki{display:flex;align-items:center;background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.1);border-radius:7px;overflow:hidden;} .jki:hover{background:rgba(var(--tint),.11);} .jkgo{flex:1;min-width:0;display:flex;align-items:center;gap:.4rem;background:none;border:none;padding:.34rem .45rem;cursor:pointer;font-family:inherit;text-align:left;} .jkk{font-size:.34rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;} .jkk.youtube{color:#ff4d4d;} .jkk.spotify{color:#1ED760;} .jkn{flex:1;min-width:0;font-size:.48rem;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .jkpor{font-size:.36rem;color:var(--t7);flex-shrink:0;letter-spacing:.04em;} .jkx{width:16px;height:16px;margin-right:4px;border-radius:5px;border:none;background:none;color:var(--t7);font-size:.4rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;opacity:0;transition:all .16s;} .jki:hover .jkx{opacity:1;} .jkx:hover{background:var(--red);color:var(--ink);} .jksite{width:calc(100% - 1rem);margin:0 .5rem .5rem;background:none;border:1px dashed rgba(var(--tint),.16);border-radius:7px;color:var(--t6);font-size:.42rem;font-weight:700;letter-spacing:.06em;padding:.34rem;cursor:pointer;font-family:inherit;transition:all .18s;} .jksite:hover{background:rgba(var(--tint),.1);border-color:rgba(var(--tint),.4);color:var(--ink);} .jkvazio{padding:0 .5rem .45rem;font-size:.42rem;color:var(--t7);} /* o player: sem titulo, arrastavel, redimensionavel, e SEMPRE atras do que abre no meio */ #ws-yt{position:absolute;right:18px;bottom:18px;width:400px;height:263px;background:var(--paper);border:1px solid rgba(var(--tint),.14);border-radius:12px;box-shadow:0 22px 60px rgba(var(--shade),.7);z-index:30;display:none;overflow:hidden;} #ws-yt.open{display:block;} #ws-yt.oculto{width:0;height:0;border-width:0;opacity:0;pointer-events:none;} #ws-yt.movendo{transition:none;user-select:none;} #yt-i{position:absolute;inset:0;width:100%;height:100%;border:none;background:var(--paper);} /* controles: so no hover, flutuando por cima do video */ .yt-c{position:absolute;top:6px;right:6px;z-index:2;display:flex;gap:4px;opacity:0;transition:opacity .18s;} #ws-yt:hover .yt-c{opacity:1;} .yt-b{width:20px;height:20px;border-radius:6px;border:none;background:rgba(var(--shade),.62);color:var(--t2);font-size:.46rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;backdrop-filter:blur(6px);transition:all .16s;} .yt-b:hover{background:var(--ink);color:var(--paper);} .yt-mv{cursor:grab;} .yt-mv:active{cursor:grabbing;} /* pegador do canto pra redimensionar */ .yt-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:2;cursor:nwse-resize;opacity:0;transition:opacity .18s;background:linear-gradient(135deg,transparent 48%,rgba(var(--tint),.55) 52%,rgba(var(--tint),.55) 62%,transparent 66%);} #ws-yt:hover .yt-rz{opacity:1;} /* botao ♪ na barra de cima */ #ws-sino{position:fixed;top:34px;z-index:80;width:30px;height:30px;border-radius:50%;border:1px solid rgba(var(--tint),.16);background:rgba(var(--tint),.06);color:var(--t3);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:all .18s;} #ws.open #ws-sino{display:flex;} #ws-sino:hover{background:rgba(var(--tint),.14);color:var(--ink);border-color:rgba(var(--tint),.3);} #ws-sino svg{width:15px;height:15px;} #ws-sino .sino-b{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);color:#fff;font-size:.4rem;font-weight:800;line-height:15px;text-align:center;display:none;box-shadow:0 0 0 2px rgba(var(--surf),1);} #ws-sino .sino-b.tem{display:block;} #ws-yt-btn{position:fixed;top:34px;z-index:80;width:30px;height:30px;border-radius:50%;border:1px solid rgba(var(--tint),.16);background:rgba(var(--tint),.06);color:var(--t3);font-size:.8rem;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:all .2s;} #ws-yt-btn.on{display:flex;} #ws-yt-btn:hover{color:var(--ink);border-color:rgba(var(--tint),.4);} #ws-yt-btn.tocando{background:#ff4d4d;border-color:#ff4d4d;color:var(--ink);animation:ytpulse 2.2s ease-in-out infinite;} @keyframes ytpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,77,.5);}50%{box-shadow:0 0 0 5px rgba(255,77,77,0);}} /* ============================================================ A FILEIRA DO CANTO SUPERIOR DIREITO — uma so, sempre no mesmo lugar. O botao da LUZ e a ancora: ele fica SEMPRE em right:80px, esteja voce na landing ou dentro do workspace. Os outros nascem em volta. landing, deslogado: [ Google ] [ luz ] landing, logado: [ luz ] workspace: [ tocando ] [ descanso ] [ luz ] [ X ] 206 122 80 38 ============================================================ */ /* o #topo nao posiciona nada: e so um recipiente. Quem manda nas coordenadas sao os proprios botoes, e SO este bloco mexe nelas. */ #topo{position:static;display:contents;} #topo-luz, #topo-entrar{position:fixed;top:34px;z-index:500;width:30px;height:30px; display:flex;align-items:center;justify-content:center;} #topo-luz { right:80px; } /* a ancora — nunca muda */ #topo-entrar{ right:38px; } /* deslogado: à DIREITA do interruptor (lugar do X) */ /* a etiqueta AUTO / FIXO, colada embaixo do botao da luz. So aparece pra quem tem login — visitante nao tem automatico salvo. */ #ws-luz-modo{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-size:.3rem;font-weight:800;letter-spacing:.08em;color:var(--pn-ink-2);background:var(--pg);padding:0 3px;border-radius:2px;pointer-events:none;white-space:nowrap;} #ws-exit { right:38px; } /* X — fechar (interruptor fica em 80, entre exit e sino) */ #ws-sino { right:122px; } /* notificacoes, à esquerda do interruptor */ #ws-yt-btn{ right:164px; } /* musica */ /* ---- MARCA D'AGUA: os botoes do topo direito ficam apagados ate o mouse ---- No workspace, a barra de cima e util mas nao precisa gritar. Os botoes ficam quase invisiveis e so ganham vida quando voce chega perto. */ #ws.open #ws-sino, #ws.open #ws-yt-btn, #ws.open #topo-luz, #ws.open #ws-exit{opacity:.25;transition:opacity .22s,background .18s,color .18s,border-color .18s;} #ws.open:hover #ws-sino, #ws.open:hover #ws-yt-btn, #ws.open:hover #topo-luz, #ws.open:hover #ws-exit{opacity:.5;} #ws.open #ws-sino:hover, #ws.open #ws-yt-btn:hover, #ws.open #topo-luz:hover, #ws.open #ws-exit:hover{opacity:1;} /* o sino acende sozinho quando tem aviso nao-lido — senao voce perderia */ #ws.open #ws-sino:has(.sino-b.tem){opacity:.85;} /* o interruptor (topo-luz) fica FORA do #ws no HTML, entao as regras #ws.open nao pegam nele. Usamos a classe no body pra apaga-lo junto: neutro por padrao, ganha vida so no hover — igual aos outros. */ body.ws-ativo #topo-luz{ opacity:.25; transition:opacity .22s, background .18s, color .18s, border-color .18s; } body.ws-ativo:hover #topo-luz{ opacity:.5; } body.ws-ativo #topo-luz:hover{ opacity:1; } body.tem-adm #ws-yt-btn{ right:164px; } /* a engrenagem saiu daqui: nao empurra mais */ /* ============================================================ NA LUZ: SEM SOMBRA. Ponto. Nada de borda nova, nada de contorno em setor. So o sombreado sai — o resto fica como esta. ============================================================ */ html.claro #ws .win, html.claro #ws .win-head, html.claro #ws .win.naked, html.claro #ws .cmain, html.claro #ws .fcd, html.claro #ws .pdet, html.claro #ws .cal-drop, html.claro #ws .cal-ano, html.claro #ws .cal-d.prev, html.claro #ws .cal-d.sel.hoje, html.claro #ws .evc.sel.editando, html.claro #ws .evnav, html.claro #ws .pnav, html.claro #ws .pbtn, html.claro #ws .pbtn.on, html.claro #ws .pd-bar.live, html.claro #ws .nbadge, html.claro #ws #ws-notif-panel, html.claro #ws #ws-notes-app, html.claro #ws #ws-adm-app, html.claro #ws #site-modal, html.claro #ws #ws-yt{ box-shadow:none; } /* so os icones de marca guardam um fio — sem ele viram recorte de tesoura */ /* ============================================================ CANTO SUPERIOR DIREITO DA PAGINA — entrar + interruptor. Fica sempre visivel, com ou sem login. ============================================================ */ #topo-entrar, #topo-luz{border-radius:50%;border:1px solid rgba(var(--tint),.12);background:rgba(var(--tint),.06);color:var(--t3);transition:opacity .2s;font-size:.72rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;text-decoration:none;transition:background .2s,border-color .2s;} #topo-entrar:hover, #topo-luz:hover{background:rgba(var(--tint),.12);border-color:rgba(var(--tint),.3);color:var(--ink);opacity:1;} #topo-entrar svg{display:block;} /* no workspace o botao carrega uma etiqueta: AUTO ou FIXO. Clique = acende/apaga. Clique com o botao direito = troca o modo. */ /* ===== A FAIXA QUE GIRA ===== Em ambos os temas vale a mesma ideia: os itens comuns ficam APAGADOS e os destacados (47 IN MOVEMENT, HUB CRIATIVO) saltam. So muda o par: escuro -> comuns em branco .45 · destacados em branco puro claro -> comuns em cinza --mut · destacados em preto As bordas de cima e de baixo acompanham o tom dos comuns. */ html.claro .mi{ color:var(--mut); } html.claro .mi.on{ color:#000; } /* os destacados: preto, pra saltar do cinza */ html.claro .mwrap{ border-top:1px solid var(--mut); border-bottom:1px solid var(--mut); } html:not(.claro) .mi{ color:rgba(255,255,255,.45); } /* comuns: apagados */ html:not(.claro) .mi.on{ color:#fff; } /* destacados: branco puro */ html:not(.claro) .mwrap{ border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); } /* ===== ICONE DE ENTRAR: cinza parado, colorido no hover ===== */ #topo-entrar svg path{ fill:var(--mut); transition:fill .2s; } #topo-entrar:hover svg path{ fill:var(--c); } /* painel da direcao — as 3 regras foram apagadas por engano quando removi o #ws-adm (o filtro por prefixo comeu o #ws-adm-app junto) */ #ws-adm-app{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:min(760px,82%);max-height:52vh;background:rgba(var(--surf-2),.93);border:1px solid rgba(var(--tint),.13);border-radius:16px;backdrop-filter:blur(28px);box-shadow:0 30px 80px rgba(var(--shade),.72);z-index:120;display:none;flex-direction:column;overflow:hidden;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);pointer-events:auto;} #ws-adm-app.open{display:flex;} #ws-adm-app.in{opacity:1;transform:translate(-50%,-50%) scale(1);} /* ===== botao de ativar notificacoes push ===== */ .npush{padding:6px 10px 2px;} .npush-b{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;background:rgba(var(--tint),.08);border:1px solid rgba(var(--tint),.16);border-radius:8px;padding:.5rem .6rem;font-family:inherit;font-size:.62rem;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;} .npush-b:hover{background:rgba(var(--tint),.14);color:var(--ink);} .npush-b .npush-on{display:none;} .npush-b .npush-off{display:inline;} .npush-b.on{background:rgba(39,212,101,.12);border-color:rgba(39,212,101,.3);color:var(--green);} .npush-b.on .npush-on{display:inline;} /* ja ativado: some (nao precisa mais mostrar) */ .npush-b.on{display:none!important;} .npush:has(.npush-b.on){display:none;} .npush-b.on .npush-off{display:none;} /* histórico de tarefas enviadas (as ja concluidas) */ .tpop-hist-t{display:block;width:100%;text-align:left;font-size:.5rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);opacity:.7;margin:.5rem 0 .25rem;padding:.35rem 0;border:none;border-top:1px solid rgba(var(--tint),.1);background:none;cursor:pointer;font-family:inherit;transition:opacity .15s;} .tpop-hist-t:hover{opacity:1;} .tpop-item.feito{opacity:.5;background:transparent;} .tpop-item.feito .tpop-txt{color:var(--t2);text-decoration:line-through;text-decoration-color:rgba(var(--tint),.4);} /* setas de navegacao dos projetos (so no mobile aberto, muitos projetos) */ .pseta{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(var(--tint),.18);background:rgba(var(--tint),.06);color:var(--ink);font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s,opacity .18s;-webkit-tap-highlight-color:transparent;} .pseta:hover{background:rgba(var(--tint),.14);} .pseta:disabled{opacity:.25;cursor:default;}