/* ============================================================ Impulse — Folha de estilos principal (app.css) Extraída do index.html sem nenhuma alteração de regra. Ordem preservada: 1) estilos gerais do 2) estilos da tela de login/PIN (eram inline no ) ============================================================ */ /* ---- (1) Estilos gerais — originalmente no ---- */ html,body{overflow-x:hidden;max-width:100vw} :root{ --ink:#13294B; --ink-2:#3A5573; --muted:#5E7288; --blue:#1F73E0; --blue-700:#1559BD; --blue-soft:#E9F2FE; --blue-line:#CBE0FB; --hub-accent:#1559BD; --blue-rgb:31,115,224; --blue-ico:#1F73E0; --ico-on-blue:#ffffff; --bg:#E9EFF8; --surface:#FFFFFF; --line:#E5EDF6; /* 1428 — refino do fundo das páginas (P1): mais claro e arejado que o #DFE7F2, os cards brancos saltam melhor */ --green:#0FA47A; --green-soft:#E2F6F0; --amber:#C2840F; --amber-soft:#FCF1D9; --red:#D8392B; --red-soft:#FCE7E4; --purple:#6B46C1; --purple-soft:#EEE9FB; --radius:15px; --shadow:0 1px 2px rgba(19,41,75,.05), 0 10px 28px rgba(19,41,75,.07); --font:'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --display:'Barlow', system-ui, sans-serif; /* 1338 — escala de espaçamento padrão (4/8/12/16/20/24). Régua única para migrar, aos poucos, os valores avulsos (11px aqui, 13px ali) sem perder o ritmo. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; } /* 1320 — mesmo vidro-falso refinado no escuro: gloss discreto no topo, sem blobs */ [data-theme=dark] .side{background:radial-gradient(135% 78% at 50% -12%,rgba(255,255,255,.055) 0%,transparent 58%),linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 32%),linear-gradient(168deg,color-mix(in srgb,var(--blue),#000 90%),color-mix(in srgb,var(--blue),#000 93%) 46%,color-mix(in srgb,var(--blue),#000 95%))!important;border-right:1px solid rgba(255,255,255,.05)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),4px 0 30px rgba(0,0,0,.35)!important} /* 944 — o brilho da barra vinha de um ::before com inset:0, que cobre só o trecho visível e rola junto com o menu: ao rolar, ele sumia e deixava uma emenda de cor. Agora o mesmo brilho vem no fundo do próprio elemento, que acompanha toda a altura rolável. O pseudo fica sem pintura. */ [data-theme=dark] .side::before{background:none} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;background-image:radial-gradient(ellipse 80% 50% at 0% 0%,rgba(15,50,110,.06) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(15,90,180,.05) 0%,transparent 60%)} button{font-family:inherit;cursor:pointer;border:none;background:none;font-variant-numeric:tabular-nums} input,select,textarea{font-family:inherit;font-size:14px;font-variant-numeric:tabular-nums} ::selection{background:var(--blue-soft)} .app{display:grid;grid-template-columns:262px 1fr;grid-template-rows:1fr;min-height:100vh;transition:grid-template-columns .22s;align-items:start;max-width:100vw} .app.compact{grid-template-columns:68px 1fr} /* 1327 — Layout "Barra no topo" (full-width), opt-in e só no computador. A .topbar é movida (por JS) para ser filha direta do .app; aqui ela vira a linha de cima do grid, atravessando as duas colunas; a sidebar encaixa embaixo do canto esquerdo. A barra fica grudada no topo ao rolar. */ @media(min-width:881px){ /* 1332 — o app trava na altura da tela: a barra (linha de cima) + a linha de baixo (sidebar | conteúdo) preenchem a viewport. Sidebar e conteúdo ficam com a MESMA altura; o conteúdo rola por dentro (não a página). */ /* 1335 — a coluna da lateral precisa caber a sidebar (262px) + a margem esquerda da ilha (20px); senão ela transborda e encosta/cobre a agenda. Assim sobra o gap de 12px (margin-left do .main) entre as duas ilhas. */ .app[data-shell="topo"]{ grid-template-columns:250px 1fr; grid-template-rows:auto 1fr; grid-template-areas:"top top" "side main"; height:100vh; max-height:100vh; overflow:hidden; } .app.compact[data-shell="topo"]{ grid-template-columns:72px 1fr; } /* 1468: trilho fino como no Gmail */ /* 1467 — ☰ na Agenda: a lateral SOME por completo (como no Google Agenda) */ .app.semside[data-shell="topo"]{ grid-template-columns:0 1fr; } .app.semside[data-shell="topo"]>.side{ display:none; } .app.semside[data-shell="topo"]>.main{ grid-column:1 / -1; margin-left:20px; } .app[data-shell="topo"]>.topbar{ grid-area:top; margin:14px 20px 0; } /* 1332 — sidebar MODULAR: ilha arredondada com margem, mesma altura do conteúdo */ .app[data-shell="topo"]>.side{ grid-area:side; position:static; align-self:stretch; min-height:0; height:auto; max-height:none; margin:12px 0 16px 20px; border-radius:16px; overflow:auto; } /* 1332/1333 — conteúdo casa a altura da sidebar e rola por dentro. Sem padding vertical (pra o container alinhar topo/base com a sidebar); respiro dos cards vem do #content. */ .app[data-shell="topo"]>.main{ grid-area:main; align-self:stretch; min-height:0; max-height:none; max-width:none; overflow:auto; margin:12px 20px 16px 12px; padding:0; } .app[data-shell="topo"]>.main>.topbar{ display:none } /* segurança contra cópia órfã */ /* 1333 — o #content preenche a área; cards ganham respiro lateral (16px). */ .app[data-shell="topo"]>.main>#content{ height:100%; box-sizing:border-box; padding:0 16px; } /* 1333 — o CONTAINER da agenda (ilha branca já existente) preenche a área e fica do MESMO tamanho da sidebar (alinhado topo/base); ocupa a largura toda da área (cancela o respiro dos cards). */ .app[data-shell="topo"]>.main>#content>.agenda-layout{ height:100%; min-height:0; margin:0 -16px; } /* 1343 — ROLAGEM SÓ POR DENTRO DA GRADE (estilo Simples Dental). Na agenda, o #content vira uma coluna flex: a grade ocupa o espaço e rola internamente (cabeçalho de dias/horas fixo), enquanto o Resumo da Semana e a legenda ficam ancorados embaixo. Assim a PÁGINA não se mexe mais — só a grade tem cursor. */ .app[data-shell="topo"]>.main>#content.is-agenda{ display:flex; flex-direction:column; overflow:hidden; } .app[data-shell="topo"]>.main>#content.is-agenda>.agenda-layout{ flex:1 1 0; height:auto; min-height:0; } .app[data-shell="topo"] .gw-scroll, .app[data-shell="topo"] .gwcad-scroll, .app[data-shell="topo"] .tl-wrap{ min-height:0; } /* 1346 — na visão FOLHA da agenda, a folha (que é longa) estava sendo CORTADA sem cursor (herdou o overflow:hidden do container da 1343). Agora ela rola por dentro, com o cabeçalho da folha fixo no topo. */ .app[data-shell="topo"] .agenda-grade > .folha-dia{ overflow:auto; min-height:0; } /* 1472 — o .fd-head saiu da folha (cabeçalho duplicado); quem gruda agora é a LINHA DAS COLUNAS (thead), que herdou o Repasse/Imprimir. */ .app[data-shell="topo"] .agenda-grade > .folha-dia .fd-tab thead th{ position:sticky; top:0; z-index:3; background:var(--surface); } /* 1329 — com a Fusão + barra no topo (full-width), a barra já ocupa o canto superior esquerdo; o emblema do Impulse na sidebar fica redundante e é ocultado. */ /* 1334 — com a sidebar virada ilha de altura cheia, o mini-calendário (e o rodapé logo abaixo) vão para o FUNDO da ilha: o menu fica em cima e o vão fica entre o menu e o calendário (respiro natural), sem "buraco" preto no meio quando o menu está recolhido. */ .app[data-shell="topo"]>.side .side-cal{ margin-top:auto } .app[data-shell="topo"]>.side .side-foot{ margin-top:8px } /* 1371 — RECOLHIDO: o mini-calendário some (correto), e era ELE que empurrava o rodapé (engrenagem + Recolher) pra baixo com o margin-top:auto. Sem o calendário, o rodapé subia e ficava colado no menu. Ao recolher, devolvo o margin-top:auto pro próprio rodapé, então ele fica firme no fundo da ilha. */ .app.compact[data-shell="topo"]>.side .side-foot{ margin-top:auto } } .app.compact .main{min-width:0;overflow-x:hidden;max-width:1700px} /* 1320 — vidro-falso da barra lateral REFINADO: gloss limpo no topo + fio de luz (rim), sem os antigos blobs radiais de "arte". Vale como base p/ todos os modos. */ .side{background:radial-gradient(135% 78% at 50% -12%,rgba(255,255,255,.12) 0%,transparent 58%),linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 34%),linear-gradient(168deg,color-mix(in srgb,var(--blue),#000 72%) 0%,color-mix(in srgb,var(--blue),#000 78%) 46%,color-mix(in srgb,var(--blue),#000 84%) 100%);border-right:1px solid rgba(255,255,255,.08);color:#fff;padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;max-height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .22s;width:262px;flex-shrink:0;box-sizing:border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),4px 0 30px rgba(4,14,42,.22);z-index:2} .app.compact .side{width:68px;padding:10px 6px} /* side mini calendar */ .side-cal{margin:0 0 12px;border-radius:13px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.16);padding:12px 11px} .app.compact .side-cal{display:none} .side-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:800;color:#fff;letter-spacing:.3px} .side-cal-nav button{background:rgba(255,255,255,.14);border:none;border-radius:8px;width:26px;height:26px;cursor:pointer;color:#fff;font-size:15px;display:grid;place-items:center;transition:.15s;line-height:1} .side-cal-nav button:hover{background:rgba(255,255,255,.28)} .side-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .side-cal-hd{text-align:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.4);padding:2px 0;letter-spacing:.5px;text-transform:uppercase} .side-cal-day{text-align:center;font-size:12px;font-weight:500;padding:5px 1px;border-radius:7px;cursor:pointer;position:relative;color:rgba(255,255,255,.6);transition:.12s;line-height:1.25;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center} .side-cal-day:hover{background:rgba(255,255,255,.16);color:#fff} .side-cal-day.hj{color:#fff;font-weight:800} .side-cal-day.sel{background:#fff;color:#1559BD;font-weight:900;box-shadow:0 2px 10px rgba(0,0,0,.25)} .side-cal-day.in-week{background:rgba(255,255,255,.09);color:rgba(255,255,255,.85)} .side-cal-dot{display:block;width:4px;height:4px;border-radius:50%;background:rgba(91,227,167,.85);margin:2px auto 0} .side-cal-day.sel .side-cal-dot{background:var(--blue)} .side-cal-day.hj::after{content:'';display:block;width:18px;height:2px;border-radius:1px;background:rgba(255,255,255,.5);margin:2px auto 0} .btn-encaixe{background:linear-gradient(135deg,#E0483A,#C0392B);color:#fff;border:none;border-radius:11px;padding:11px 18px;font-weight:800;font-size:14px;font-family:var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;box-shadow:0 2px 12px rgba(216,57,43,.32)} .btn-encaixe:hover{filter:brightness(1.1);transform:translateY(-1px)} .gw-card.is-encaixe{animation:pulse-border 2s infinite} @keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(216,57,43,.4)}50%{box-shadow:0 0 0 3px rgba(216,57,43,.15)}} .side-cal-day.feriado{color:#FFD580!important;font-weight:700} .side-cal-day.feriado .side-cal-dot{background:#FFD580} .gw-dh.feriado .gw-dw{color:var(--amber)!important} .gw-dh.feriado:not(.today) .gw-dn{color:var(--amber)} .gw-dh.feriado{background:rgba(194,132,15,.08);border-radius:8px} .gw-mes-dia.feriado .gw-mes-num{color:#C2840F!important;font-weight:800} .gw-mes-dia.feriado{background:rgba(252,241,217,.5)} .gw-mes-fer{font-size:10px;font-weight:800;color:#9A6406;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .feriado-tip{font-size:9px;color:#FFD580;opacity:.9;text-align:center;line-height:1;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .gw-feriado-banner{background:rgba(194,132,15,.10);border-left:3px solid var(--amber);border-radius:7px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--amber);margin:8px 2px;display:flex;align-items:center;gap:6px} /* Fluent-style glass shimmer overlay */ .side::before{content:'';position:absolute;inset:0;background:none;pointer-events:none;z-index:0} .side>*{position:relative;z-index:1} .side::after{content:'';position:absolute;inset:0;z-index:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='nz'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nz)'/%3E%3C/svg%3E");background-size:160px} /* 1472 — as regras do Céu Vivo da sidebar (data-ceu-side) saíram com o motor */ .help-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:.15s;color:#fff;margin-left:auto} .help-btn:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5);transform:scale(1.08)} .mono{width:42px;height:42px;border-radius:12px;background:#fff center/76% no-repeat;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9);transition:.18s} .mono svg{width:26px;height:26px} .collapse-btn{position:absolute;right:-13px;top:72px;width:26px;height:26px;background:linear-gradient(135deg,#3D8BF2,#1F73E0);border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 8px rgba(19,41,75,.25);z-index:10;transition:.18s;cursor:pointer} .collapse-btn svg{width:13px;height:13px;color:#fff;transition:.22s} .app.compact .collapse-btn svg{transform:rotate(180deg)} #dentFilter label{display:block;font-size:10.5px;color:#AFC6E2;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:0 6px 6px;white-space:nowrap;overflow:hidden} .app.compact #dentFilter label,.app.compact #dentFilter select{display:none} #dentFilter select{width:100%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:9px 10px;font-size:13px;font-weight:600;outline:none;cursor:pointer} #dentFilter select option{color:#15293c;background:#EBF1FB} ._pinBtn{border:none;border-radius:10px;background:var(--bg);color:var(--ink);font-size:20px;font-weight:700;padding:14px 0;cursor:pointer;font-family:var(--font);box-shadow:0 1px 4px rgba(0,0,0,.10);transition:.12s} ._pinBtn:hover{background:var(--blue-soft);color:var(--blue)} ._pinDot{width:14px;height:14px;border-radius:50%;background:var(--line);border:2px solid var(--line);transition:.2s} ._pinDot.filled{background:var(--blue);border-color:var(--blue)} ._lockBtn{border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.1);color:#fff;font-size:22px;font-weight:700;padding:14px 0;cursor:pointer;font-family:var(--font);transition:.12s;} ._lockBtn:hover{background:rgba(255,255,255,.2)} #lockScreen ._pinDot{border-color:rgba(255,255,255,.4);background:transparent} #lockScreen ._pinDot.filled{background:#fff;border-color:#fff} .nav{display:flex;flex-direction:column;gap:2px} .nav button{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:#C9D9EC;font-weight:600;font-size:13.5px;text-align:left;transition:.15s;white-space:nowrap;overflow:hidden;position:relative} .nav button svg{width:19px;height:19px;flex:none;opacity:.9} .app.compact .nav button span.nav-lbl{display:none} .app.compact .nav button{position:relative;justify-content:center;padding:10px 0;gap:0} .app.compact .nav .nbadge{position:absolute;top:5px;right:13px;min-width:0;width:9px;height:9px;padding:0;margin:0;font-size:0;line-height:0;border-radius:50%;border:2px solid rgba(8,24,64,.9);box-sizing:content-box} .nav button:hover{background:rgba(255,255,255,.1);color:#fff} .nav button.active{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} /* 1350 — todos os itens da barra lateral em MAIÚSCULAS 1353 — com mais espaçamento entre as letras (respiro) */ .side .nav .nav-lbl{text-transform:uppercase;letter-spacing:1.4px} .nav button.active svg{opacity:1} .nav .nbadge{margin-left:auto;background:rgba(255,255,255,.22);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 8px;display:none} .nav button.active .nbadge{background:var(--red);color:#fff} .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)} .side-foot .who{font-size:11.5px;color:#AFC6E2;padding:0 6px;white-space:nowrap;overflow:hidden;transition:.18s} .app.compact .side-foot .who{opacity:0;height:0;margin:0;padding:0} /* ═══ 1355 — botão de usuário/sincronização na TOPBAR (à esquerda do ☰) ═══ */ .tb-user{display:flex;align-items:center;gap:8px;flex:none;background:linear-gradient(180deg,#FFFFFF,#F5F9FF);border:1px solid var(--blue-line);border-radius:11px;padding:3px 10px 3px 3px;cursor:pointer;transition:.14s;font-family:inherit;margin-right:2px} .tb-user:hover{background:#EEF5FF} /* 1369 — avatar sem texto: só o círculo, redondo, como um botão de conta. */ .tb-user-ic{gap:0;padding:3px;border-radius:50%} .tb-user-ic:hover{box-shadow:0 0 0 3px var(--blue-soft)} .tb-uav{position:relative;width:30px;height:30px;flex:none} .tb-uav .ring{position:absolute;inset:0;border-radius:50%;padding:2px;background:#22C55E;transition:background .3s} .tb-uav .face{position:absolute;inset:2px;border-radius:50%;background:linear-gradient(135deg,#2a86f0,#1f63b2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;letter-spacing:.3px} .tb-uav .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid #fff;transition:background .3s} /* 1369 — menu da conta (clique no avatar) */ .oh-acct{margin:-4px -2px} .oh-acct-head{display:flex;gap:12px;align-items:center;padding:6px 4px 14px} .oh-acct-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#2a86f0,#1f63b2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none} .oh-acct-id b{font-size:15px;color:var(--ink);display:block} .oh-acct-id small{font-size:12px;color:var(--muted)} .oh-acct-sync{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-2);padding:9px 12px;background:var(--bg);border-radius:10px;margin-bottom:8px} .oh-acct-dot{width:8px;height:8px;border-radius:50%;flex:none} /* 1603 — espaçamento dos itens do menu "Minha conta" reduzido (pedido do dono): de 12px para 8px de altura — mais compacto, cabe mais sem apertar. */ .oh-acct-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:none;background:none;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;border-radius:10px} .oh-acct-item:hover{background:var(--blue-soft)} .oh-acct-item svg{width:18px;height:18px;color:var(--ink-2);flex:none} .oh-acct-item .oh-acct-chev{margin-left:auto;color:var(--muted);font-size:17px} .oh-acct-item.danger{color:var(--red)} .oh-acct-item.danger svg{color:var(--red)} .oh-acct-item.danger:hover{background:var(--red-soft)} .oh-acct-sep{height:1px;background:var(--line);margin:3px 4px} .oh-acct-foot{padding:11px 4px 2px;font-size:11px;color:var(--muted);text-align:center} @media(max-width:1080px){ .tb-uinfo{display:none} .tb-user{padding:3px;border-radius:50%} } /* ═══ 1347 — rodapé refinado da sidebar ═══ */ /* botão de usuário (estilo Firefox): avatar com anel de sync + nome + status */ /* interruptor Céu Vivo — discreto (só ícone + legenda), no estilo do Recolher */ /* 1356/1421 — rodapé da barra: ENGRENAGEM (Barra lateral) e Recolher agora EMPILHADOS, um acima do outro — como já ficavam com a barra recolhida (pedido do dono). */ /* 1384/1421 — o divisor vertical entre os dois botões saiu (não faz sentido empilhado). */ /* Céu Vivo Preto na sidebar */ /* Recolher/expandir — pílula centralizada e elegante */ /* fundo Céu Vivo na sidebar (ligável no interruptor). 1349 — as estrelas vêm do motor procedural original window.ohCeuSurf (camada .ohCeuSurfLayer em z-index:-1, com o mesmo CSS .ohc já usado nas telas de entrada). Aqui fica só a cor-base, como garantia enquanto a camada procedural monta. */ /* 1280 — respiro Aero: gutters um pouco mais generosos (leve e arejado), mantendo o full-bleed alinhado via --oh-pad */ .main{padding:20px 22px 64px;--oh-pad:22px;max-width:1400px;width:100%;min-height:100vh;min-height:100dvh;box-sizing:border-box;min-width:0;scroll-behavior:smooth} /* 929 — com fundo de página ativo, a .main ocupa a coluna inteira (o fundo cobre tudo, sem faixa à direita) e o limite de largura passa para a topbar e o conteúdo, que seguem centralizados. */ .main[data-fundo-full]{max-width:none} .main[data-fundo-full]>.topbar,.main[data-fundo-full]>#content{max-width:1400px;margin-left:auto;margin-right:auto} .app.compact .main[data-fundo-full]>.topbar,.app.compact .main[data-fundo-full]>#content{max-width:1700px} .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:nowrap;min-width:0;overflow:hidden} .topbar h2{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.4px} .topbar p{color:var(--muted);font-size:13px;margin-top:2px} /* 1289 — GEL Aero Vista/7 (vidro FALSO): faixa de brilho no topo + linha de reflexo no meio + base azul. Só camadas de degradê, zero blur. */ /* 1468 — botões FLAT (o gel Aero da 1289 saiu do código) */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:10px 16px;border-radius:11px;font-weight:700;font-size:13.5px;transition:.15s} .btn:active{filter:brightness(.96)} .stat{animation:fadeUp .3s ease;animation-fill-mode:both} .stat:nth-child(2){animation-delay:.05s} .stat:nth-child(3){animation-delay:.1s} .stat:nth-child(4){animation-delay:.15s} .btn:hover{background:color-mix(in srgb,var(--blue),#000 10%)} .btn svg{width:16px;height:16px} .btn.ghost{background:var(--surface);color:var(--blue);border:1px solid var(--blue-line)} .btn.ghost:hover{background:var(--blue-soft)} .btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px} .btn.danger{background:var(--surface);color:var(--red);border:1px solid var(--red-soft);box-shadow:none} .btn.danger:hover{background:var(--red-soft)} .btn.wa{background:#22C35C;color:#fff} .btn.wa:hover{background:#1FB857} .btn.wa svg{width:17px;height:17px} .btn.ok{background:#0FA47A} .btn.ok:hover{background:#0d8f6b;filter:none} /* 1468: flat */ /* 1338 — AÇÃO PRIMÁRIA PADRÃO. O mesmo gradiente/realce que estava copiado inline em ~15 botões de ação vira uma classe só, disponível para reuso (padroniza os botões de ação num azul idêntico). */ .btn-act-primary{background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue),#000 20%))!important;color:#fff!important;box-shadow:0 3px 14px rgba(var(--blue-rgb,31,115,224),.42)!important;border:none!important} .grid{display:grid;gap:18px} .stats{grid-template-columns:repeat(4,1fr);margin-bottom:22px} /* Histórico: cards + seletor Lista/Linha do tempo na mesma linha (compacto) */ .hist-topo{display:flex;align-items:stretch;gap:12px;margin-bottom:18px} .hist-topo .hist-stats-compact{flex:1;min-width:0} .hist-topo-sel{display:flex;align-items:center;flex:none} .hist-stats-compact .stat{padding:11px 14px} .hist-stats-compact .stat .val{font-size:25px} .hist-stats-compact .stat .lbl,.hist-stats-compact .stat .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:1100px){ .hist-topo{flex-direction:column} .hist-topo-sel{justify-content:flex-end} .hist-stats-compact .stat .val{font-size:28px} } /* Análises: seletor de ano ao lado dos 5 cards */ .ana-anosel{display:flex;align-items:center;gap:8px} .ana-topo .hist-topo-sel{align-items:center} @media(max-width:1100px){ .ana-topo .hist-stats-compact{grid-template-columns:repeat(3,1fr)!important} } @media(max-width:620px){ .ana-topo .hist-stats-compact{grid-template-columns:repeat(2,1fr)!important} } /* Estoque: seletor | cards (meio) | botão gerar lista, tudo numa linha */ .est-topo{display:flex;align-items:center;gap:14px;margin-bottom:16px} .est-topo-seg,.est-topo-btn{flex:none} .est-topo .est-cards{flex:1;grid-template-columns:repeat(3,1fr);margin-bottom:0;min-width:0} .est-topo .est-cards.est-cards-1{grid-template-columns:1fr} @media(max-width:1000px){ .est-topo{flex-wrap:wrap} .est-topo-seg{order:1} .est-topo-btn{order:2;margin-left:auto} .est-topo .est-cards{order:3;flex:1 1 100%;grid-template-columns:repeat(3,1fr)} } @media(max-width:560px){ .est-topo .est-cards{grid-template-columns:1fr}.est-topo-btn{margin-left:0} } /* 1278 — refinamento Aero: aura radial colorida no canto, por cima do vidro que o card já tem */ .stat{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow)} .stat::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(var(--blue-rgb),.10),transparent 70%);pointer-events:none;z-index:0} .stat.accent-green::before{background:radial-gradient(circle,rgba(15,164,122,.13),transparent 70%)} .stat.accent-amber::before{background:radial-gradient(circle,rgba(194,132,15,.13),transparent 70%)} .stat.accent-red::before{background:radial-gradient(circle,rgba(192,57,43,.12),transparent 70%)} .stat.accent-purple::before{background:radial-gradient(circle,rgba(107,70,193,.12),transparent 70%)} .stat .lbl,.stat .val,.stat .sub{position:relative;z-index:1} .stat .lbl{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px} .stat .lbl svg{width:15px;height:15px} .stat .val{font-size:26px;font-weight:800;margin-top:9px;letter-spacing:-.5px} .stat .sub{font-size:12px;color:var(--muted);margin-top:3px} .stat.accent-green .val{color:var(--green)} .stat.accent-amber .val{color:var(--amber)} .stat.accent-red .val{color:var(--red)} .stat.accent-blue .val{color:var(--blue)} .stat.accent-purple .val{color:var(--purple)} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh1);overflow:hidden;animation:fadeUp .28s ease;transition:box-shadow var(--dur,.18s) var(--ease,ease),transform var(--dur,.18s) var(--ease,ease)} @media (hover:hover){ .panel:hover{box-shadow:var(--sh2);transform:translateY(-2px)} } @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes syncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}} ._syncpulse{animation:syncPulse 1.1s ease-in-out infinite} .gw-resumo{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;padding:7px 13px;margin:0 2px 8px;background:color-mix(in srgb, var(--blue) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--blue) 32%, var(--surface));border-radius:10px;font-size:12.5px;color:var(--ink-2);font-weight:600} .gw-resumo strong{color:var(--ink);font-weight:800} .gw-resumo .r-falta{color:var(--amber)} /* ═══ TIMELINE VIVA do dia (desktop) ═══ */ .tl-kpis{ display:flex; gap:10px; margin:0 2px 16px; flex:none; } /* 1471 — filete da prévia também nos KPIs da agenda (cartões informativos) 1472 — filete ::before reto, sem virar colchete no canto */ .tl-kpi{ position:relative; overflow:hidden; flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 15px 12px 18px; box-shadow:var(--sh1); } .tl-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue); } .tl-kpi-v{ font-size:23px; font-weight:900; line-height:1; letter-spacing:-.5px; } .tl-kpi-l{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:5px; } .tl-wrap{ flex:1; overflow-y:auto; overflow-x:hidden; padding:2px 2px 20px; min-height:0; } .tl-row{ display:flex; align-items:stretch; gap:14px; } .tl-time{ width:56px; flex:none; display:flex; flex-direction:column; align-items:flex-end; padding-top:15px; } .tl-time .tl-h{ font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } .tl-time .tl-f{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; } .tl-card{ flex:1; min-width:0; display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 15px; margin-bottom:12px; box-shadow:0 2px 10px rgba(19,41,75,.05); cursor:pointer; text-align:left; font-family:inherit; transition:transform .13s var(--ease,ease), box-shadow .13s var(--ease,ease); position:relative; } .tl-card:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -8px rgba(19,41,75,.28); border-color:var(--blue-line); } .tl-ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex:none; } .tl-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .tl-nome{ font-size:15px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tl-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tl-proc{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tl-flag{ font-size:10px; font-weight:800; border-radius:5px; padding:1px 6px; white-space:nowrap; } .tl-flag-canc{ color:var(--red); background:rgba(216,57,43,.1); } .tl-flag-falt{ color:var(--amber); background:rgba(194,132,15,.1); } .tl-chev{ width:18px; height:18px; color:var(--muted); flex:none; } .tl-card-tarefa{ border-style:dashed; opacity:.9; } .tl-card-tarefa .tl-sub{ font-size:12px; color:var(--muted); } .tl-row-add .tl-time{ padding-top:0; } .tl-add{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(180deg,var(--blue-soft),var(--surface)); border:1.5px dashed var(--blue-line); border-radius:14px; padding:14px; color:var(--blue-700); font-weight:700; font-size:14px; font-family:inherit; cursor:pointer; transition:.13s var(--ease,ease); } .tl-add:hover{ background:var(--blue-soft); border-color:var(--blue); } .tl-row-livre .tl-time{ padding-top:11px; } .tl-livre{ flex:1; display:flex; align-items:center; gap:9px; margin-bottom:12px; background:repeating-linear-gradient(135deg,transparent,transparent 6px,color-mix(in srgb,var(--green) 5%,var(--surface)) 6px,color-mix(in srgb,var(--green) 5%,var(--surface)) 12px); border:1.5px dashed color-mix(in srgb,var(--green) 35%,var(--line)); border-radius:12px; padding:10px 14px; color:var(--green); font-weight:700; font-family:inherit; cursor:pointer; transition:.13s var(--ease,ease); text-align:left; } .tl-livre:hover{ background:color-mix(in srgb,var(--green) 10%,var(--surface)); border-color:var(--green); transform:translateY(-1px); } .tl-livre-txt{ font-size:13px; } /* ═══ Semana: resumo + termômetro (abaixo da grade) ═══ */ .sem-extra{ padding:14px 2px 4px; } /* 1343 — quando o resumo vai DENTRO da rolagem da grade, ganha respiro e um traço no topo pra separar das consultas (e some no modo tela cheia). */ .sem-extra-in{ margin:6px 12px 4px; padding-top:16px; border-top:1px solid var(--line); } .sem-extra-lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:0 2px 10px; } .sem-kpis{ margin:12px 0 0; } .sem-term{ display:flex; gap:8px; margin:0 2px; } .sem-term-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:.12s var(--ease,ease); } .sem-term-col:hover{ border-color:var(--blue-line); background:var(--blue-soft); } .sem-term-col.hoje{ background:var(--blue-soft); border-color:var(--blue-line); } .sem-term-dw{ font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; } .sem-term-col.hoje .sem-term-dw{ color:var(--blue-700); } .sem-term-dn{ font-size:16px; font-weight:800; color:var(--ink); line-height:1; } .sem-term-col.hoje .sem-term-dn{ color:var(--blue-700); } .sem-term-bar-wrap{ height:36px; display:flex; align-items:flex-end; } .sem-term-bar{ width:18px; border-radius:5px 5px 3px 3px; transition:height .2s var(--ease,ease); } .sem-term-n{ font-size:12px; font-weight:800; } /* ═══ Kanban: urgência por tempo de espera ═══ */ .kb-col-sub{ font-size:11px; color:var(--muted); font-weight:600; margin:-4px 2px 10px; padding:0 2px; } .kb-col-sub .kb-sub-alerta{ color:var(--amber); font-weight:800; } .kb-card.kb-atencao{ border-color:var(--amber); box-shadow:inset 3px 0 0 -1px var(--amber); } .kb-card.kb-urgente{ border-color:var(--red); box-shadow:inset 3px 0 0 -1px var(--red); } .kb-espera-row{ display:flex; justify-content:flex-end; margin-top:6px; } .kb-espera{ font-size:10px; font-weight:700; color:var(--muted); } .kb-espera-att{ color:var(--amber); background:rgba(194,132,15,.12); padding:2px 7px; border-radius:20px; font-weight:800; } .kb-espera-urg{ color:#fff; background:var(--red); padding:2px 7px; border-radius:20px; font-weight:800; } /* ═══ Painel: personalizar a agenda ═══ */ .ag-person-sec{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:0 0 10px; } .ag-person-hint{ font-weight:600; text-transform:none; letter-spacing:0; opacity:.8; } .ag-person-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:12px 13px; margin-bottom:9px; cursor:pointer; transition:.13s var(--ease,ease); font-family:inherit; } .ag-person-row:hover{ border-color:var(--blue-line); } .ag-person-ic{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; } .ag-person-ic svg{ width:20px; height:20px; } .ag-person-tx{ flex:1; min-width:0; } .ag-person-t{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); } .ag-person-d{ display:block; font-size:12px; color:var(--muted); margin-top:2px; } .ag-person-sw{ width:46px; height:27px; border-radius:20px; background:var(--line); flex:none; position:relative; transition:background .18s var(--ease,ease); } .ag-person-sw.on{ background:var(--green); } .ag-person-knob{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .18s var(--ease,ease); } .ag-person-sw.on .ag-person-knob{ left:22px; } /* sub-toggle recuado (faixa de números dentro do Resumo da Semana) */ .ag-person-sub{ margin-left:26px; padding-left:18px; position:relative; } .ag-person-sub .ag-person-subline{ position:absolute; left:0; top:-9px; bottom:50%; width:14px; border-left:2px solid var(--line); border-bottom:2px solid var(--line); border-bottom-left-radius:8px; } .ag-person-sub.disabled{ opacity:.45; cursor:not-allowed; } /* 1144 — trava de dependência numa linha PRINCIPAL (não só nas recuadas) */ .ag-person-row.disabled{ opacity:.45; cursor:not-allowed; } .ag-person-row.disabled:hover{ border-color:var(--line); } .ag-person-nota{ font-size:12px; color:var(--muted); background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:11px; padding:11px 13px; margin-top:6px; line-height:1.5; } .ag-person-nota b{ color:var(--ink-2); } .ag-cor-grid{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; } /* toggles do card "Recursos das visualizações" em Configurações › Agenda */ .ag-vext-row{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:.13s var(--ease,ease); font-family:inherit; } .ag-vext-row:hover{ border-color:var(--blue-line); } .ag-vext-ic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; } .ag-vext-ic svg{ width:18px; height:18px; } .ag-vext-tx{ flex:1; min-width:0; } .ag-vext-t{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); } .ag-vext-d{ display:block; font-size:11.5px; color:var(--muted); margin-top:1px; } .ag-vext-sw{ width:42px; height:25px; border-radius:20px; background:var(--line); flex:none; position:relative; transition:background .18s var(--ease,ease); } .ag-vext-sw.on{ background:var(--green); } .ag-vext-knob{ position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .18s var(--ease,ease); } .ag-vext-sw.on .ag-vext-knob{ left:20px; } .ag-vext-sub{ margin-left:24px; padding-left:16px; position:relative; } .ag-vext-sub .ag-vext-subline{ position:absolute; left:0; top:-8px; bottom:50%; width:12px; border-left:2px solid var(--line); border-bottom:2px solid var(--line); border-bottom-left-radius:7px; } .ag-vext-sub.disabled{ opacity:.45; cursor:not-allowed; } /* 1144 — trava de dependência numa linha PRINCIPAL (não só nas recuadas) */ .ag-vext-row.disabled{ opacity:.45; cursor:not-allowed; } .ag-vext-row.disabled:hover{ border-color:var(--line); } /* ═══ 1146 — o plano dentro da janela de consulta e da baixa ═══ */ .pa-box{ border:1.5px solid var(--blue-line); border-radius:11px; background:var(--blue-soft); padding:4px; } .pa-lin{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border-radius:9px; background:transparent; border:none; cursor:pointer; font-family:inherit; margin:2px 0; transition:.12s var(--ease,ease); } .pa-lin:hover{ background:color-mix(in srgb, var(--surface) 60%, transparent); } .pa-lin.on{ background:var(--surface); box-shadow:0 1px 3px rgba(19,41,75,.07); } .pa-lin.pa-lock{ opacity:.55; cursor:not-allowed; } .pa-lin.pa-lock:hover{ background:transparent; } .pa-chk{ width:17px; height:17px; border-radius:5px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; border:1.5px solid var(--line); color:transparent; } .pa-lin.on .pa-chk{ background:var(--blue); border-color:var(--blue); color:#fff; } .pa-lin.on .pa-chk.pa-ok{ background:var(--green,#0FA47A); border-color:var(--green,#0FA47A); } .pa-dente{ width:34px; text-align:center; font-weight:800; color:var(--blue-700); flex:none; font-size:12.5px; } .pa-tx{ flex:1; min-width:0; } .pa-t{ display:block; font-size:13px; font-weight:700; color:var(--ink); } .pa-d{ display:block; font-size:11px; color:var(--muted); margin-top:1px; } .pa-val{ font-size:13px; white-space:nowrap; } .pa-rod{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-top:1px solid var(--blue-line); margin-top:3px; flex-wrap:wrap; } /* botões segmentados (tamanho do avatar, limite do modo compacto) */ .ag-seg{ display:inline-flex; background:color-mix(in srgb, var(--blue) 7%, var(--bg)); border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap; } .ag-seg-b{ padding:7px 13px; border:none; background:none; border-radius:8px; font-weight:700; font-size:12.5px; color:var(--ink-2); cursor:pointer; font-family:inherit; transition:.12s var(--ease,ease); } .ag-seg-b:hover{ color:var(--blue-700); } .ag-seg-b.on{ background:var(--surface); color:var(--blue-700); box-shadow:0 1px 3px rgba(15,42,67,.12); } /* ═══ 1372 — GUIAS & SUB-GUIAS padronizadas (prévia aprovada) ═══════════ Uma cara só em todo o app. O ativo muda por COR, nunca por MOVIMENTO (translateY é proibido — era ele que fazia as abas "pularem"). Dois níveis: .oh-guia = trilho segmentado, ativo em superfície branca (nível 1) .oh-subguia = sublinhado azul que cresce do centro (nível 2) A .ag-seg da agenda já nasceu com esta cara; agora ela é a norma. As telas vão migrando pra cá, uma por build. */ .oh-guia{ display:inline-flex; background:color-mix(in srgb, var(--blue) 7%, var(--bg)); border-radius:12px; padding:4px; gap:3px; flex-wrap:wrap; max-width:100%; } .oh-guia>button{ padding:9px 16px; border:none; background:none; border-radius:9px; font-weight:700; font-size:13px; color:var(--muted); cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color .15s var(--ease,ease), background .15s var(--ease,ease); } .oh-guia>button:hover:not(.on){ color:var(--blue-700); background:rgba(var(--blue-rgb),.06); } .oh-guia>button.on{ background:var(--surface); color:var(--blue-700); box-shadow:0 1px 3px rgba(15,42,67,.14); } .oh-guia>button svg{ width:16px; height:16px; flex:none; } .oh-subguia{ display:inline-flex; gap:22px; border-bottom:1px solid var(--line); flex-wrap:wrap; } .oh-subguia>button{ padding:10px 1px 11px; border:none; background:none; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer; font-family:inherit; position:relative; transition:color .15s var(--ease,ease); } .oh-subguia>button:hover:not(.on){ color:var(--ink-2); } .oh-subguia>button::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px; border-radius:3px; background:var(--blue); transform:scaleX(0); transition:transform .18s var(--ease,ease); } .oh-subguia>button.on{ color:var(--blue-700); } .oh-subguia>button.on::after{ transform:scaleX(1); } .gw-resumo .r-canc{color:#D8392B} @keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}} .main{animation:fadeIn .22s ease} .panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap} .panel-head h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px} .panel-head h3 svg{width:18px;height:18px;color:var(--blue)} .oh-head-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .panel-head .hint{font-size:12px;color:var(--muted)} .panel-body{padding:6px 0} /* ⚠ 1171→1172 — `.scroll-x` existia SÓ como `.panel-body.scroll-x` dentro do @media mobile, e nunca era aplicada em lugar nenhum: classe morta. Promovida a utilitário de verdade, em qualquer tela e qualquer elemento — para as tabelas largas que hoje repetem `overflow-x:auto` inline (implantes, relatórios). No mobile ela ainda vence o `overflow-x:hidden` do .panel-body (regra abaixo, no @media). */ .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start} /* 1324 — Início: Bom dia + Acompanhamento pós-atendimento lado a lado */ .inicio-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:16px} .inicio-duo>*{margin-bottom:0 !important} /* 1409 — Início: faixa de mini-cards com os "números do dia" (lado a lado). */ .inicio-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} /* 1466 — o card da PRÉVIA: faixa colorida em cima (ícone + número grande) e rodapé com título, subtítulo e a setinha de ir. Flat (1465): tinta chapada. */ .inicio-tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;cursor:pointer;transition:.12s;min-width:0} .inicio-tile:hover{border-color:var(--blue-line)} .inicio-tile .cap{height:72px;display:flex;align-items:center;gap:12px;padding:0 16px} .inicio-tile .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none} .inicio-tile .ic svg{width:22px;height:22px} .inicio-tile .big{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inicio-tile .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 16px;border-top:1px solid var(--line)} .inicio-tile .t{font-size:13px;font-weight:700;color:var(--ink)} .inicio-tile .s{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inicio-tile .go{width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue-700);display:grid;place-items:center;flex:none} .inicio-tile .go svg{width:15px;height:15px} .inicio-tile.blue .cap{background:color-mix(in srgb,var(--blue) 10%,var(--surface))} .inicio-tile.blue .ic{background:var(--blue)} .inicio-tile.blue .big{color:var(--blue-700)} .inicio-tile.green .cap{background:color-mix(in srgb,var(--green,#0FA47A) 10%,var(--surface))} .inicio-tile.green .ic{background:var(--green,#0FA47A)} .inicio-tile.green .big{color:var(--green,#0FA47A)} .inicio-tile.amber .cap{background:color-mix(in srgb,var(--amber,#C2840F) 12%,var(--surface))} .inicio-tile.amber .ic{background:var(--amber,#C2840F)} .inicio-tile.amber .big{color:var(--amber,#C2840F)} .inicio-tile.red .cap{background:color-mix(in srgb,var(--red,#D8392B) 10%,var(--surface))} .inicio-tile.red .ic{background:var(--red,#D8392B)} .inicio-tile.red .big{color:var(--red,#D8392B)} /* 1466 — saudação plana (prévia) + título de seção + lista estilo Drive */ .hero-saud{font-size:24px;font-weight:500;color:var(--ink);letter-spacing:-.2px;line-height:1.2} .hero-saud b{font-weight:800} .hero-sub{font-size:13.5px;color:var(--muted);margin-top:4px} .hero-sub b{color:var(--ink-2)} .hero-flat{padding:8px 4px 0} .g-tit{padding:14px 2px 8px;font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.4px;text-transform:uppercase} .g-head{display:grid;grid-template-columns:2.4fr 1.2fr 1.6fr 32px;gap:14px;align-items:center;padding:8px 12px;color:var(--muted);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line)} .oh-recentes{margin-bottom:16px} .oh-recentes .oh-rec-row{display:grid;grid-template-columns:2.4fr 1.2fr 1.6fr 32px;gap:14px;align-items:center;padding:9px 12px;border-bottom:none;border-radius:12px} .oh-rec-nome{display:flex;align-items:center;gap:13px;min-width:0;font-weight:600} .oh-rec-tel{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:680px){ .g-head,.oh-recentes .oh-rec-row{grid-template-columns:2fr 1.2fr 32px} .g-head span:nth-child(3){display:none} } .row{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line);transition:.15s ease;min-width:0;overflow:hidden} .row.clickable:hover{background:var(--blue-soft);transform:translateX(3px)} .row.clickable:active{transform:scale(.995)} .row:last-child{border-bottom:none} .row:hover{background:#FAFCFE} .row .time{font-weight:800;font-size:14px;width:54px;color:var(--blue-700);flex:none} .row .who{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row.row-overdue{background:rgba(239,68,68,.04);border-left:3px solid var(--red)} .row.row-paid{background:rgba(16,185,129,.03)} .row .meta{font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .grow{flex:1;min-width:0;overflow:hidden} .avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue-700);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none} /* ===== Anti-transbordamento dos cards no celular ===== */ @media(max-width:560px){ /* BALA DE PRATA: o container de conteúdo corta qualquer transbordamento horizontal, e todo card ocupa no máximo a largura disponível. Independe da causa específica — nada passa da borda da tela. */ #content, .main{ overflow-x:clip; max-width:100vw; } .main .panel{ width:100%; max-width:100%; box-sizing:border-box; } .two-col, .two-col > div{ min-width:0; max-width:100%; } .panel-head{ max-width:100%; box-sizing:border-box; flex-wrap:wrap; } /* títulos longos cortam com reticências em vez de vazar */ .panel-head h3{ min-width:0; overflow:hidden; flex-shrink:1; } .panel-head h3 > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .panel-head .hint{ flex:none; white-space:nowrap; } /* linhas mais justas para caber avatar + nome + tag + ação sem cortar */ .row{ gap:9px; padding:11px 14px; max-width:100%; box-sizing:border-box; } .row .time{ width:auto; min-width:44px; } .row .btn.sm, .row .btn.wa.sm{ padding:7px 9px; font-size:0; flex:none; gap:0; } .row .btn.sm svg, .row .btn.wa.sm svg{ margin:0; } .row .tag{ flex:none; } } /* ===== Lista de pacientes — card compacto (uma linha por paciente) ===== */ .pac-row{display:grid;grid-template-columns:34px minmax(0,1.6fr) 108px 80px 150px 160px 40px;gap:18px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--line);transition:.15s ease} .pac-head{display:grid;grid-template-columns:34px minmax(0,1.6fr) 108px 80px 150px 160px 40px;gap:18px;align-items:center;padding:9px 20px;border-bottom:1px solid var(--line);background:var(--blue-soft)} .pac-head span{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);text-align:center} .pac-c-nome{display:flex;flex-direction:column;justify-content:center;min-width:0} .pac-esp{margin-top:3px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;overflow:hidden} .pac-c-tel,.pac-c-email{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:6px;min-width:0} .pac-c-tel svg,.pac-c-email svg{color:var(--muted);flex:none} .pac-c-tel span,.pac-c-email span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pac-vazio{color:var(--muted);font-style:italic;font-size:12px} /* 1458 — coluna Marcadores (idioma Google Contatos): etiquetas coloridas do paciente (categorias) */ .pac-c-marc{display:flex;flex-wrap:wrap;gap:5px;align-items:center;overflow:hidden;max-height:46px;min-width:0} .pac-c-marc .tag{font-size:11px;font-weight:700;padding:2px 9px;white-space:nowrap} /* 1459 — "Abertos recentemente" na Início (idioma Google Drive) */ .oh-rec-marc{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-start;align-items:center;overflow:hidden} /* 1466: virou coluna da grade (Drive) */ .oh-rec-marc .tag{font-size:11px;font-weight:700;padding:2px 9px;white-space:nowrap} @media(max-width:680px){ .oh-rec-marc{display:none} } /* 1461 — "Recortes rápidos" em pastas (idioma Google Drive), como na prévia aprovada */ .pac-recortes{margin-bottom:16px} .pac-grp-tit{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:2px 21px 8px} .pac-rec-head{display:grid;grid-template-columns:2.4fr 1.2fr 1fr 1fr 40px;gap:14px;align-items:center;padding:6px 21px;color:var(--muted);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line)} .pac-rec-row{display:grid;grid-template-columns:2.4fr 1.2fr 1fr 1fr 40px;gap:14px;align-items:center;padding:11px 21px;border-bottom:1px solid var(--line);cursor:pointer;transition:.13s;font-size:13.5px} .pac-rec-row:hover{background:var(--hover,color-mix(in srgb,var(--blue) 5%,transparent))} .pac-rec-nome{display:flex;align-items:center;gap:12px;min-width:0} .pac-rec-nome .nm{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pac-rec-cnt{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--blue-soft);color:var(--blue-700);white-space:nowrap} @media(max-width:880px){ .pac-rec-head{display:none} .pac-rec-row{grid-template-columns:1fr auto;gap:8px} .pac-rec-row>.muted{display:none} } /* 1462/1463 — topo do design novo: a linha de filtros em chips abre a tela; a trilha "Impulse › Pacientes" vive no omnibox do topo (sem repetição — prévia refinada). */ .pac-filtros{ display:flex; align-items:center; gap:10px; padding:8px 21px 14px; flex-wrap:wrap; } .pac-filtros-topo{ padding-top:18px; } /* 1473 — o chip "Pedir ao Assistente" (e a divisória .pac-vbar) SAIU do código, a pedido do dono. A busca universal segue no topo (omnibox e Ctrl+K). */ .pac-filtros-sp{ flex:1; min-width:12px; } .pac-filtros-right{ display:inline-flex; align-items:center; gap:8px; } .pac-filtros .pac-search-sm{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:7px 14px; color:var(--muted); min-width:200px; } .pac-filtros .pac-search-sm svg{ width:16px; height:16px; flex:none; } .pac-filtros .pac-search-sm input{ border:none; background:none; outline:none; flex:1; font-family:inherit; font-size:13.5px; color:var(--ink); min-width:0; } .pac-filtros .pac-sit-btn{ border-radius:20px; } .pac-grp-tit .pac-total-chip{ margin-left:8px; } @media(max-width:900px){ .pac-filtros-sp{ display:none; } .pac-filtros-right{ width:100%; } .pac-filtros .pac-search-sm{ flex:1; } } .pac-row:last-child{border-bottom:none} .pac-row.clickable{cursor:pointer} .pac-row.clickable:hover{background:var(--blue-soft)} .pac-row.clickable:active{transform:scale(.997)} .pac-row .avatar{width:34px;height:34px;font-size:12.5px} .pac-row .who{font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pac-row .meta{min-width:0} .pac-row .tag{font-size:10px;padding:3px 8px;flex:none} .pac-acts{display:inline-flex;align-items:center;gap:6px;flex:none} .pac-ic{width:34px;height:34px;border-radius:9px;border:1px solid var(--blue-line);background:var(--surface);color:var(--blue);display:grid;place-items:center;cursor:pointer;transition:.12s;flex:none} .pac-ic:hover{background:var(--blue-soft);border-color:var(--blue)} .pac-ic:active{transform:scale(.92)} /* menu "⋯" do card compacto */ .pac-menu{position:relative;display:inline-flex} /* 943 — enquanto o menu "Ações ao Paciente" está aberto, o card para de recortar, senão o menu fica cortado na borda. Só nesse momento: fechado, o overflow:hidden volta e os cantos arredondados seguem intactos. */ .panel.oh-menu-solto{overflow:visible;position:relative;z-index:100} .pac-menu-pop{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(19,41,75,.2);padding:5px} .pac-menu-pop.show{display:block;animation:dpIn .13s ease} .pac-menu-pop button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;background:none;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:background .1s} .pac-menu-pop button:hover{background:var(--blue-soft)} .pac-menu-pop button svg{color:var(--muted);flex:none} .pac-menu-pop button.danger{color:var(--red,#DC2626)} .pac-menu-pop button.danger svg{color:var(--red,#DC2626)} .pac-menu-pop button.danger:hover{background:var(--red-soft,#FEF2F2)} /* Por padrão (PC): ícones soltos visíveis; itens repetidos do menu escondidos */ /* 1415 — os 5 ícones soltos viraram um menu ⋯ único, no PC e no celular. */ .pac-acts .pac-menu{display:inline-flex} .pac-ic.wa{color:var(--green);border-color:color-mix(in srgb, var(--green) 32%, var(--line))} .pac-ic.wa:hover{background:color-mix(in srgb, var(--green) 10%, var(--surface));border-color:var(--green)} .pac-ic.danger{color:var(--red);border-color:color-mix(in srgb, var(--red) 32%, var(--line))} .pac-ic.danger:hover{background:var(--red-soft,#FEF2F2);border-color:var(--red)} /* No celular: some com os ícones soltos e revela tudo dentro do menu "⋯" */ @media(max-width:880px){ .pac-acts .so-pc{display:none} .pac-acts .pac-menu{display:inline-flex} .pac-menu-pop .so-mobile{display:flex} .pac-head{display:none} .pac-row{grid-template-columns:auto 1fr auto;grid-template-areas:'av nome acts' 'av marc acts' 'av tel acts' 'av email acts';column-gap:11px;row-gap:2px;padding:11px 14px} .pac-row>.avatar{grid-area:av;align-self:center} .pac-c-nome{grid-area:nome} .pac-c-marc{grid-area:marc} .pac-c-tel{grid-area:tel} .pac-c-email{grid-area:email} .pac-acts{grid-area:acts;align-self:center} .pac-c-marc:empty{display:none} } /* 1284 — pills/tags viram vidrinho: um fio de brilho no topo (leve, sem custo) */ .tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;white-space:nowrap;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .t-blue{background:var(--blue-soft);color:var(--blue-700)} .t-green{background:var(--green-soft);color:var(--green)} .t-amber{background:var(--amber-soft);color:var(--amber)} .t-red{background:var(--red-soft);color:var(--red)} .t-gray{background:#EEF2F6;color:var(--ink-2)} .empty{padding:40px 20px;text-align:center;color:var(--muted)} .empty svg{width:38px;height:38px;opacity:.4;margin-bottom:10px} .empty-ic{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .empty-ic svg{width:27px;height:27px;opacity:.85;margin:0} .empty p{font-size:14px;font-weight:600;color:var(--ink-2)} .empty span{font-size:12.5px} .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap} /* Pacientes: no PC tudo numa linha (busca + Docs + filtros + total); no celular quebra */ @media(max-width:820px){ } .search{flex:1;min-width:220px;position:relative} .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)} .search input{width:100%;padding:11px 12px 11px 40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);outline:none} .search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .topbar-act{background:none;border:none;color:var(--ink-2);cursor:pointer;padding:7px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:.15s} .topbar-act svg{width:19px;height:19px} .topbar-act:hover{background:var(--blue-soft);color:var(--blue-700)} .topbar-act.on{background:var(--blue);color:#fff} .topbar-act.on:hover{background:var(--blue-700);color:#fff} .topbar-act-danger:hover{background:var(--red-soft);color:var(--red)} /* 1279 — Vidro Lite nas abas: trilho com sulco suave, pílula ativa com brilho de vidro */ .seg{display:inline-flex;background:color-mix(in srgb,var(--blue) 7%,var(--bg));border-radius:calc(var(--radius, 10px) + 3px);padding:3px;flex-wrap:wrap;box-shadow:inset 0 1px 2px rgba(19,41,75,.06)} .seg button{padding:8px 13px;border-radius:var(--radius, 8px);font-size:12.5px;font-weight:700;color:var(--ink-2);transition:all var(--dur,.16s) var(--ease,ease)} .seg button:not(.on):hover{color:var(--blue-700);background:rgba(255,255,255,.5)} .seg button.on{background:linear-gradient(180deg,#FFFFFF,#F6FAFF);color:var(--blue-700);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(19,41,75,.12)} /* ===== Barra de abas do Financeiro: Visão geral em destaque + grid de chips ===== */ .fintab-bar{margin-bottom:16px} .fintab-hero{width:100%;display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;margin-bottom:10px;transition:all .15s var(--ease,ease);background:var(--surface);border:1px solid var(--line);color:var(--ink)} .fintab-hero:hover{border-color:var(--blue-line);background:var(--blue-soft)} .fintab-hero.on{background:linear-gradient(135deg,#1F73E0,#1559BD);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(31,115,224,.28)} .fintab-hero-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--blue-soft);color:var(--blue-700)} .fintab-hero-ic svg{width:16px;height:16px} .fintab-hero.on .fintab-hero-ic{background:rgba(255,255,255,.18);color:#fff} .fintab-hero-tx{flex:1;text-align:left} .fintab-hero-sub{font-size:11px;font-weight:600;opacity:.7} .fintab-hero.on .fintab-hero-sub{opacity:.85} .fintab-grid{display:flex;flex-wrap:wrap;gap:7px} .fintab-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-weight:700;font-size:12.5px;text-align:left;cursor:pointer;transition:all .13s var(--ease,ease);white-space:nowrap} .fintab-chip:hover{border-color:var(--blue-line);background:var(--blue-soft)} .fintab-chip.on{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-700)} .fintab-chip-ic{color:var(--blue);flex:none;display:inline-flex} .fintab-chip-ic svg{width:15px;height:15px} .fintab-chip.on .fintab-chip-ic{color:var(--blue-700)} .fintab-chip-tx{white-space:nowrap} .fintab-dd{display:none;position:relative} .fintab-dd-btn{display:flex;align-items:center;gap:11px;width:100%;padding:12px 15px;border-radius:13px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:800;font-size:15px;cursor:pointer;font-family:inherit} .fintab-dd-ic{color:var(--blue);display:flex;flex:none} .fintab-dd-ic svg{width:19px;height:19px} .fintab-dd-tx{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fintab-dd-chev{color:var(--muted);flex:none;width:18px;height:18px;transition:transform .18s} .fintab-dd-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;overflow-y:auto;max-height:62vh;box-shadow:0 16px 48px rgba(19,41,75,.22)} .fintab-opt{display:flex;align-items:center;gap:11px;width:100%;padding:12px 15px;border:none;background:none;color:var(--ink-2);font-weight:700;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line);font-family:inherit;text-align:left} .fintab-opt:last-child{border-bottom:none} .fintab-opt-ic{color:var(--blue);display:flex;flex:none} .fintab-opt-ic svg{width:18px;height:18px} .fintab-opt-tx{flex:1} .fintab-opt.on{background:var(--blue-soft);color:var(--blue-700)} .fintab-opt-ck{color:var(--blue-700);flex:none;display:flex} /* Sub-abas dentro dos grupos do Financeiro (Especialidades, Profissionais, Gestão) */ .finsub-bar{display:flex;flex-wrap:wrap;gap:6px;padding:9px 10px;background:color-mix(in srgb,var(--blue) 7%,var(--surface));border:1px solid var(--blue-line);border-radius:12px;margin:-6px 0 20px} .finsub{padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--ink-2);background:transparent;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .13s var(--ease,ease)} .finsub:hover{color:var(--blue-700)} .finsub.on{background:var(--surface);color:var(--blue-700);border-color:var(--blue-line)} @media(max-width:880px){ .finsub-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .finsub{flex:none} } /* 1417 — GUIAS do Financeiro (grupos): .oh-subguia com ícone, rolando na horizontal */ .oh-subguia.fin-guias{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px; scrollbar-width:thin; } .oh-subguia.fin-guias::-webkit-scrollbar{ height:0 } .oh-subguia.fin-guias>button{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none; } .fin-guia-ic{ display:inline-flex; color:var(--muted); transition:color .15s; } .fin-guia-ic svg{ width:16px; height:16px; } .oh-subguia.fin-guias>button.on .fin-guia-ic{ color:var(--blue-700); } .oh-subguia.fin-guias>button:hover:not(.on) .fin-guia-ic{ color:var(--ink-2); } /* 1417 — SUB-GUIAS do Financeiro (sub-abas): sublinhado mais leve, rola na horizontal */ .finsub-guias{ display:flex; align-items:center; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--line); margin:2px 0 18px; scrollbar-width:thin; } .finsub-guias::-webkit-scrollbar{ height:0 } .finsub-guias>button{ position:relative; padding:8px 1px 9px; border:none; background:none; font-weight:700; font-size:13px; color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; flex:none; transition:color .15s; } .finsub-guias>button:hover:not(.on){ color:var(--ink-2); } .finsub-guias>button.on{ color:var(--blue-700); } .finsub-guias>button.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--blue-700); } /* No celular: chips mais compactos, para as abas ocuparem menos altura e o conteúdo subir */ @media(max-width:880px){ .fintab-bar{margin-bottom:14px} .fintab-grid{gap:6px} .fintab-chip{padding:6px 10px;font-size:11.5px;gap:5px;border-radius:9px} .fintab-dd{display:block} .fintab-grid{display:none} .fintab-chip-ic svg{width:13px;height:13px} } .datebar{display:flex;align-items:center;gap:10px} .datebar input{padding:10px 12px;border:1px solid var(--line);border-radius:10px} .datebar .nav-day{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--ink-2)} .datebar .nav-day:hover{background:var(--blue-soft);color:var(--blue-700)} .datebar .nav-day svg{width:18px;height:18px} /* agenda — slots dia */ .slot{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line);border-left:4px solid transparent} .slot-time{font-weight:800;color:var(--blue-700);width:50px;font-size:13px;flex:none} .slot.empty{cursor:pointer;color:var(--muted)} .slot.empty .slot-free{font-size:12.5px} .slot.empty .slot-time{color:var(--muted);font-weight:700} .slot.filled{background:#FCFDFF} .slot-body{flex:1;min-width:0;cursor:pointer} .slot-name{font-weight:700;font-size:14px} /* agenda — grade semanal */ .chip{border-radius:7px;padding:3px 7px;font-size:10.5px;font-weight:700;border-left:3px solid;line-height:1.3;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chip b{font-weight:800} .chip.cancel{opacity:.45;text-decoration:line-through} .legend{display:flex;flex-wrap:wrap;gap:7px;padding:14px 2px 2px;align-items:center} .legend .lg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:4px 11px 4px 9px;line-height:1.2} .legend .sw{width:11px;height:11px;border-radius:50%;flex:none} .legend-tit{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding:14px 4px 0;width:100%} .legend-tit svg{width:14px;height:14px;flex:none;color:var(--blue)} /* detalhe paciente */ .detail-head{display:flex;gap:16px;align-items:center;padding:20px;border-bottom:1px solid var(--line);flex-wrap:wrap} .detail-head .avatar{width:54px;height:54px;font-size:19px} .detail-head h3{font-size:19px;font-weight:800} .detail-head .meta{font-size:13px;color:var(--muted);margin-top:2px} .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;padding:18px 20px;overflow:hidden} @media(max-width:560px){ .pac-acoes{justify-content:flex-start} } .kv .v{word-break:break-word} .kv .k{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.4px} .kv .v{font-weight:600;margin-top:3px;font-size:14px} /* timeline mensalidades */ .timeline{display:flex;flex-wrap:wrap;gap:8px;padding:6px 20px 20px} .mchip{min-width:74px;border:1px solid var(--line);border-radius:11px;padding:9px 10px;text-align:center;background:var(--surface);cursor:pointer;transition:.12s;position:relative} .mchip:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(30,91,168,.12)} .mchip .mn{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px} .mchip .mv{font-size:13px;font-weight:800;margin-top:3px} .mchip .ms{font-size:10px;font-weight:700;margin-top:5px} .mchip.paid{background:var(--green-soft);border-color:#BFE6D8}.mchip.paid .ms{color:var(--green)} .mchip.pending .ms{color:var(--amber)} .mchip.overdue{background:var(--red-soft);border-color:#F2C9C3}.mchip.overdue .ms{color:var(--red)} .mchip .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%} .mchip.paid .dot{background:var(--green)}.mchip.pending .dot{background:var(--amber)}.mchip.overdue .dot{background:var(--red)} .sec-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2);padding:18px 20px 4px;display:flex;align-items:center;justify-content:space-between} /* odontograma */ .odo{padding:10px 18px 8px;overflow-x:auto} .arcada{display:flex;justify-content:center;gap:3px;margin:5px 0;min-width:560px} .dente{width:30px;height:44px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:800;color:var(--ink-2);position:relative;transition:.12s} .dente:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(30,91,168,.18);transform:translateY(-1px)} .dente .bar{position:absolute;bottom:0;left:0;right:0;height:5px;border-radius:0 0 5px 5px} .dente.s-concluido{background:var(--green-soft);border-color:#BFE6D8;color:var(--green)} .dente.s-concluido .bar{background:var(--green)} .dente.s-andamento{background:var(--amber-soft);border-color:#EAD3A8;color:var(--amber)} .dente.s-andamento .bar{background:var(--amber)} .dente.s-planejado{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-700)} .dente.s-planejado .bar{background:var(--blue)} .dente .badge{position:absolute;top:-7px;right:-7px;background:var(--blue);color:#fff;border-radius:50%;width:17px;height:17px;font-size:9.5px;display:grid;place-items:center;font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.2)} .quad-sep{width:2px;background:var(--line);margin:0 5px;border-radius:2px} .arcada-svg{display:flex;justify-content:center;align-items:stretch;gap:4px;margin:6px 0;min-width:680px} .dt-cell{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border-radius:8px;padding:3px 1px;transition:.12s} .dt-cell:hover{background:var(--blue-soft);transform:translateY(-2px)} .odo-legend{display:flex;gap:16px;flex-wrap:wrap;padding:8px 20px 16px;font-size:11.5px;color:var(--muted);font-weight:600} .odo-legend span{display:flex;align-items:center;gap:6px} .odo-legend i{width:12px;height:12px;border-radius:4px;display:inline-block} .arch-label{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:8px} /* ── Odontograma clínico (build 581) ── */ .odo-paleta{background:var(--blue-soft);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:6px 0 12px} .odo-paleta-ativo{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .odo-paleta-dica{font-size:11px;color:var(--muted);font-weight:500} .odo-paleta-sec{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 5px} .odo-chips{display:flex;gap:6px;flex-wrap:wrap} .odo-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:11.5px;font-weight:700;color:var(--ink-2);transition:.12s;font-family:var(--font)} .odo-chip:hover{border-color:var(--blue);transform:translateY(-1px)} .odo-chip.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-700);box-shadow:0 2px 8px rgba(var(--blue-rgb,31,115,224),.18)} .odo2{padding:8px 18px 4px;overflow-x:auto} .odo2-arch-label{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:6px 0} .odo-arcada{display:flex;justify-content:center;align-items:flex-start;gap:3px;margin:4px 0;min-width:720px} .odo-quad-sep{width:2px;background:var(--line);margin:0 6px;border-radius:2px;align-self:stretch} .odo-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 1px} .odo-num{font-size:10.5px;font-weight:800;line-height:1} /* 1328 — a coroa (38×38) fica numa caixa própria; cervical + raízes abaixo */ .odo-face-wrap{position:relative;width:38px;display:flex;flex-direction:column;align-items:center;transition:.12s} .odo-face-wrap:hover{transform:scale(1.06)} .odo-crown-box{position:relative;width:38px;height:38px} .odo-face-svg{width:38px;height:38px;display:block} .odo-cervical{width:34px;height:6px;margin-top:1px;border:1px solid #C4CEDC;border-radius:3px;background:#fff;box-sizing:border-box;transition:.12s} .odo-cerv-click{cursor:pointer} .odo-cerv-click:hover{filter:brightness(.96);outline:1.5px solid var(--blue-line);outline-offset:1px} .odo-cerv-plan{border-style:dashed} .odo-raiz{width:32px;height:19px;display:block;margin-top:-1px;pointer-events:none} .odo-esmaecido{opacity:.4} .odo-det-btn{width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:5px;transition:.12s} .odo-det-btn:hover{background:var(--blue-soft);color:var(--blue-700)} .odo-det-btn svg{width:14px;height:14px} .odo-resumo{display:flex;gap:14px;flex-wrap:wrap;padding:6px 20px 4px;font-size:12px;color:var(--ink-2);font-weight:600} .odo-resumo-item{display:flex;align-items:center;gap:6px} .odo-resumo-item i{width:12px;height:12px;border-radius:4px;display:inline-block} .odo2-hint{padding:8px 20px 16px;font-size:11.5px;color:var(--muted);line-height:1.5} /* planejado × realizado */ .odo-plano-barra{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:2px 18px 4px;padding:12px 16px;background:linear-gradient(135deg,var(--blue-soft,#EAF2FE),#F4FBFA);border:1px solid var(--blue-line,#CFE0FA);border-radius:14px} .odo-plan-leg{display:flex;gap:18px;flex-wrap:wrap;padding:2px 20px 2px;font-size:12px;color:var(--ink-2)} .odo-pl{display:flex;align-items:center;gap:7px} .odo-pl-sw{width:26px;height:17px;border-radius:5px;flex:none} .odo-pl-sw.plan{background:color-mix(in srgb,var(--blue,#1F73E0) 20%,#fff);border:1.5px dashed var(--blue,#1F73E0)} .odo-pl-sw.feito{background:var(--blue-soft,#E9F2FE);border:1.6px solid var(--blue,#1F73E0)} .odo-chip-proc-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:#EAF2FE;color:#1858B8;padding:2px 7px;border-radius:999px;margin:0 8px} .odo-badge{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle} .odo-badge.plan{background:color-mix(in srgb,var(--blue,#1F73E0) 12%,#fff);color:#1858B8;border:1px dashed var(--blue,#1F73E0)} .odo-badge.feito{background:color-mix(in srgb,var(--green,#16A34A) 12%,#fff);color:#15803D;border:1px solid color-mix(in srgb,var(--green,#16A34A) 45%,#fff)} .odo-proc-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:6px} .odo-proc-linha{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg,#F4F8FD)} .odo-proc-dot{width:15px;height:15px;border-radius:5px;flex:none} .odo-proc-nome{flex:1;min-width:140px;font-size:13px;color:var(--ink)} .odo-proc-val{display:flex;align-items:center;gap:2px;font-size:12.5px;color:var(--ink-2);font-weight:700} .odo-val-inp{width:92px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-variant-numeric:tabular-nums} .odo-proc-acao{flex:none;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end} .odo-proc-foot{font-size:11.5px;color:var(--muted);margin:2px 0 10px} /* 1039 — estado "em andamento" + lista única dente ⇄ Plano de Tratamento */ .odo-pl-sw.and{background:color-mix(in srgb,var(--blue,#1F73E0) 34%,#fff);border:2px solid var(--blue,#1F73E0)} .odo-badge.and{background:color-mix(in srgb,var(--amber,#C2840F) 14%,#fff);color:#8A5D06;border:1px solid color-mix(in srgb,var(--amber,#C2840F) 50%,#fff)} .odo-sec-sub{font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none} .odo-proc-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px} .odo-proc-sub.alerta{color:#8A5D06} .odo-proc-linha.semmarca{background:repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(148,168,193,.09) 7px,rgba(148,168,193,.09) 14px);border-style:dashed} .odo-pend-box{margin:8px 18px 4px;padding:11px 14px;border:1.5px dashed var(--amber,#C2840F);border-radius:13px;background:color-mix(in srgb,var(--amber,#C2840F) 7%,#fff)} .odo-pend-tit{font-size:12.5px;font-weight:800;color:#8A5D06;margin-bottom:7px} .odo-pend-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px} .odo-pend-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 9px} .odo-pend-chip i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none} .odo-pend-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-2)} .trat-odo-tag{cursor:pointer} .trat-odo-tag:hover{filter:brightness(.96)} @media(max-width:560px){.odo-proc-nome{min-width:100%}.odo-plano-barra{margin:2px 12px}.odo-pend-box{margin:8px 12px}.odo-proc-acao{width:100%;justify-content:flex-start}} /* modal detalhe do dente */ .odo-big{width:120px;height:120px;margin:0 auto 14px;position:relative} .odo-big .odo-face-svg{width:120px;height:120px} .odo-faces-resumo{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .odo-fl{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:7px} .odo-fl i{width:13px;height:13px;border-radius:4px;flex:none} .odo-di{background:var(--surface);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--ink-2);margin-bottom:12px} .odo-sec-tit{font-size:12px;font-weight:800;color:var(--blue-700);margin:16px 0 8px;letter-spacing:.2px} .odo-nota{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-family:var(--font);background:var(--surface);color:var(--ink);resize:vertical} .odo-hist{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:8px} .odo-hist-item{border-left:2.5px solid var(--blue-line);padding:6px 0 6px 12px} .odo-hist-top{display:flex;align-items:center;gap:10px;margin-bottom:2px} .odo-hist-data{font-size:11.5px;font-weight:800;color:var(--ink-2)} .odo-hist-quem{font-size:11px;color:var(--muted);font-weight:700;background:var(--blue-soft);padding:1px 8px;border-radius:999px} .odo-hist-txt{font-size:13px;color:var(--ink);line-height:1.45} .odo-vazio{font-size:12.5px;color:var(--muted);padding:10px;text-align:center;background:var(--surface);border-radius:9px} /* 1358 — as janelas (modais) precisam ficar ACIMA da barra do topo. A .topbar tem z-index:100 (e o brilho decorativo #ohJanelas, 200); com o overlay em 50, a barra do topo cobria o CABEÇALHO colorido do modal (a "Lista de espera" aparecia cortada). Subindo o overlay para 210, o modal flutua limpo sobre a tela escurecida. */ /* 1580 — TRANSIÇÕES SUAVES das janelas: abrir E fechar. O overlay fica sempre no DOM (display:flex), mas invisível e sem capturar clique quando fechado; a opacidade + a visibilidade transicionam nos dois sentidos, então fechar deixou de ser instantâneo. O cartão entra/sai com um leve deslize+escala. */ .overlay{position:fixed;inset:0;background:rgba(15,42,67,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:210;overflow:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease, visibility .2s ease} .overlay.show{opacity:1;visibility:visible;pointer-events:auto} .modal{position:relative;background:#fff;border-radius:18px;width:100%;max-width:560px;box-shadow:0 24px 60px rgba(15,42,67,.3);opacity:0;transform:translateY(14px) scale(.985);transition:transform .24s cubic-bezier(.34,1.28,.5,1), opacity .18s ease} .overlay.show .modal{opacity:1;transform:none} @keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion: reduce){ .overlay,.modal{transition:none} } /* 1117 — moldura compacta (prévia aprovada): a janela devolve ~36px verticais ao conteúdo */ /* 1365 — barra de título das janelas SEM o vidro falso (o gloss Vista/7 do 1290 saiu — estava estranho). Fica limpa: só a cor da barra + o traço inferior. */ .modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)} .modal-head h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:.1px} .modal-head h3 svg{width:24px;height:24px;padding:5px;border-radius:8px;background:var(--blue);color:#fff;flex-shrink:0;box-sizing:border-box} .x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted)} /* 1377 — o X de FECHAR no cabeçalho das janelas fica vermelho e num quadrado que o isola (caixa vermelha suave, opção A da prévia): fundo vermelho clarinho + contorno; no hover fica vermelho cheio. Vale para todas as janelas. */ .modal-head .x{margin:-4px 0;width:32px;height:32px;border-radius:8px;color:var(--red);border:1.5px solid var(--red-line,#F3C9C4);background:var(--red-soft);transition:background .14s,color .14s,border-color .14s} .modal-head .x:hover{background:var(--red);color:#fff;border-color:var(--red)} .x:hover{background:#EEF2F6;color:var(--ink)} .modal-body{padding:20px 22px;max-height:76vh;overflow:auto} /* 1365 — rodapé da janela sem o fio de luz de vidro (saiu com o gloss). */ .modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:10px 18px;border-top:1px solid var(--line);flex-wrap:wrap} .modal-foot .btn{padding-top:8px;padding-bottom:8px;font-size:12.5px} /* 1117 — só no rodapé das janelas; o .btn global fica como é */ .modal-foot .btn.danger{margin-right:auto} .field{margin-bottom:15px} .field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px} .lbl-ic{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--blue)} .field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;outline:none;background:var(--surface);color:var(--ink)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .field textarea{resize:vertical;min-height:60px} /* 1076 — ".help" existia em 311 lugares do app, mas SÓ TINHA ESTILO dentro de .field (e em .cfg-wrap). Fora deles — nos corpos de painel — ele saía como texto de corpo, do mesmo tamanho do conteúdo, e o cartão parecia de outro app. Esta regra global dá a ele o visual que o nome sempre prometeu; a regra de .field abaixo continua vencendo por especificidade, então nada que já estava certo muda. */ .help{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:5px} .panel-body > .help:first-child{margin-top:0} .field .help{font-size:11.5px;color:var(--muted);margin-top:5px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} .frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .calc-box{background:var(--blue-soft);border-radius:11px;padding:12px 14px;font-size:13px;color:var(--blue-700);font-weight:600;margin-bottom:5px} .toast{pointer-events:none;position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:11px;font-weight:600;font-size:13.5px;opacity:0;transition:.25s;z-index:100005;box-shadow:0 10px 30px rgba(0,0,0,.25)} /* 17.01 — acima do véu das janelas (80 ficava ATRÁS do overlay 210: toda mensagem com modal aberto era invisível) */ .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* 1284 — FAB com brilho gel no topo (Aero), mantendo leve */ .fab-sup{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 55%),linear-gradient(180deg,#3B8CF0,#1F73E0);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;z-index:45;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.12),0 6px 20px rgba(31,115,224,.42);transition:transform .15s,box-shadow .15s} .fab-sup svg{width:24px;height:24px} .fab-sup:hover{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 28px rgba(31,115,224,.52)} .fab-sup:active{transform:scale(.96)} body:has(.overlay.show) .fab-sup{display:none} /* 1482 — sem a barra inferior, o FAB e o toast voltam pro pé da tela */ @media(max-width:880px){ .fab-sup{width:46px;height:46px;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px))} .toast{bottom:calc(18px + env(safe-area-inset-bottom,0px))} .fab-sup svg{width:21px;height:21px} } @media(max-width:620px){ .gw-toolbar{flex-wrap:wrap;gap:6px 5px;padding:5px 8px;justify-content:center} .gw-toolbar .kb-toggle{order:0} .gw-toolbar .seg{display:none} .gw-toolbar .nav-day{width:34px;height:30px;min-width:34px} .gw-toolbar .nav-day svg{width:18px;height:18px} .gw-toolbar input[type=date]{flex:1 1 auto!important;min-width:0!important;font-size:12.5px;padding:4px 4px} .gw-toolbar .btn.ghost.sm{padding:4px 10px;font-size:12.5px;white-space:nowrap;flex:none} .modal-foot{gap:8px;padding:11px 14px} .modal-foot .btn{padding-left:13px;padding-right:13px} } .banner{background:var(--amber-soft);color:var(--amber);border:1px solid #EAD3A8;border-radius:11px;padding:11px 15px;font-size:12.5px;font-weight:600;margin-bottom:18px;display:flex;gap:10px;align-items:center} .banner svg{width:18px;height:18px;flex:none} .clickable{cursor:pointer} .hide{display:none!important} .menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;place-items:center;background:var(--surface)} /* ============================================================ RESPONSIVIDADE MOBILE — reescrita completa ============================================================ */ @media(max-width:880px){ #loginColDir{display:none!important} .row .tag{font-size:10px;padding:3px 7px} .row strong{font-size:13px;white-space:nowrap;flex:none} .stat .val,.finsum .v,.row strong,.calc-box,.calc-box strong,.finsum .v,.gw-card-hora{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* layout base — sidebar completamente fora da tela */ .app{display:block!important;grid-template-columns:unset!important} .side{position:fixed!important;left:-300px!important;z-index:60;width:280px!important;top:0;height:100vh;height:100dvh;padding-top:calc(16px + env(safe-area-inset-top,0px));transition:.26s cubic-bezier(.4,0,.2,1);box-shadow:none} .side.open{left:0!important;box-shadow:4px 0 24px rgba(0,0,0,.3)} .main{display:block;width:100%;max-width:100vw;box-sizing:border-box;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(80px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto} /* 80px bottom for tab bar */ /* --- topbar mobile --- */ .topbar-act-desktop{display:none!important} /* botões exclusivos de desktop (ex.: rádio) somem no mobile */ .topbar{margin-bottom:12px;padding:0;gap:8px} .topbar h2{font-size:18px} .topbar p{font-size:11.5px} /* botões da topbar: só ícone no mobile */ .btn-act .act-lbl{display:none} .btn-act{padding:9px 11px!important;min-width:40px;min-height:40px} .btn-act svg{width:20px;height:20px;flex:none} [data-theme=dark] .menu-btn{background:var(--surface);border-color:var(--line)} [data-theme=dark] .menu-btn svg{stroke:#C9D9EC} /* 1430 — TOPBAR MOBILE (Fusão): a pista "Pesquisar" (.vnext-hint) virava um quadradão alto (lupa gigante empilhada, ~104px) porque o tamanho do SVG só era definido no modo "Barra de endereço" (data-nav=vnext). No celular ela vira uma BARRA DE BUSCA SLIM de uma linha só — pílula clara com lupa + "Pesquisar", ocupando a largura. Continua sem capturar o clique (pointer-events:none): tocar abre a busca do card. */ .topbar-card .vnext-hint{ margin-left:auto!important; display:flex!important; align-items:center; gap:9px; flex:1 1 auto; min-width:0; max-width:none; width:auto; height:40px; padding:0 13px!important; border-radius:12px; background:var(--surface); border:1px solid var(--line); box-shadow:0 2px 8px rgba(20,50,90,.05); color:var(--muted)!important; opacity:1!important; font-size:14px; font-weight:600; white-space:nowrap; pointer-events:none } .topbar-card .vnext-hint svg{ width:19px!important; height:19px!important; flex:none; opacity:1; color:var(--blue); stroke:var(--blue) } .topbar-card .vnext-hint span{ display:inline!important; overflow:hidden; text-overflow:ellipsis } /* a topbar-card em si ocupa a largura pra pílula esticar; sem o quadradão */ html.app .topbar > div:first-child .topbar-card{ flex:1 1 auto; min-width:0 } /* 1432 — SEM "caixa dentro de caixa" no celular: o cartão de vidro da topbar fica transparente (sem fundo/borda/sombra/padding), deixando à mostra SÓ a barra de busca (a pílula .vnext-hint). Antes, a pílula ficava dentro do cartão de vidro e parecia uma caixa dentro de outra. Casa a especificidade das regras de vidro. */ html .topbar-card, html[data-glass-topbar="on"] .topbar-card, html[data-glass-topbar="poupar"] .topbar-card{ background:none!important; background-image:none!important; border:none!important; box-shadow:none!important; padding:0!important; } /* --- tab bar --- */ /* 1443 — DESAFOGA a topbar no celular. O cluster da direita tinha ícones demais (nenhum encolhe), espremendo a barra de busca — a lupa solta e o sino "grudavam" nela. Some com o redundante e o que já mora em outro lugar: a LUPA separada (#buscaBtn — a própria barra é a busca), o TEMA (#temaBtnTop — está em Config), a ⚙ da topbar (#topbarCfgBtn — no ☰) e as Tarefas (#tarefasBtnTop). Sobram: busca + sino + avatar + ☰. ⚠ o hide do tema usava #temasBtnWrap, que NÃO existe (o certo é #temaBtnTop) — por isso o tema não sumia. */ /* 1514 — as TAREFAS voltaram à topbar do celular (pedido do dono): o hide da 1443 escondia o botão junto com os redundantes. */ #buscaBtn,#temaBtnTop,#topbarCfgBtn{display:none!important} /* --- modais como bottom-sheet --- */ .overlay{padding:0!important;align-items:flex-end} .modal{border-radius:20px 20px 0 0;max-width:100%!important;width:100%;margin:0;max-height:88vh;max-height:88dvh} .modal-body{max-height:calc(88vh - 120px);max-height:calc(88dvh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch} .scrim{position:fixed;inset:0;background:rgba(15,42,67,.45);z-index:55;display:none} .scrim.show{display:block} /* alça do bottom-sheet + rodapé acima da barra de gestos */ .modal::before{content:"";width:38px;height:4px;border-radius:99px;background:var(--line);margin:9px auto 1px;align-self:center;flex:none} .modal-foot{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))} /* --- grids --- */ .stats{grid-template-columns:1fr 1fr} .two-col{grid-template-columns:1fr} .inicio-duo{grid-template-columns:1fr} .inicio-tiles{grid-template-columns:1fr 1fr} .frow{grid-template-columns:1fr 1fr} .frow3{grid-template-columns:1fr 1fr} /* --- campos --- */ .field input,.field select,.field textarea{padding:12px 11px;font-size:16px!important} /* 16px evita zoom iOS/Android */ .selx-trigger{padding:12px 11px;font-size:16px} .btn{padding:11px 16px;min-height:44px;font-size:13.5px} .btn.sm{padding:9px 13px;min-height:40px;font-size:13px} /* ⚠ 1172 — o ✕ / botão de excluir (.x) era o ÚNICO alvo de toque abaixo de 40px no celular (34px) — todos os outros botões são bumpados aqui. `min-width/height:40px` vence o `width/height:34px` fixo sem mexer no ícone (grid centraliza), então a área de toque cresce e o visual fica. */ .x{min-width:40px;min-height:40px} /* --- painéis --- */ .panel{max-width:100%;overflow:hidden} /* Padrão no mobile: NÃO rolar horizontal — as rows usam flex-wrap e ellipsis. Isso elimina o corte de texto ("Aten...", "Procedim...", datas) na borda direita. */ .panel-body{overflow-x:hidden;-webkit-overflow-scrolling:touch} /* Painéis que de fato precisam de scroll horizontal (tabelas largas) usam esta classe */ .panel-body.scroll-x{overflow-x:auto} .row{padding:11px 12px;gap:8px;min-width:0;overflow:hidden;max-width:100%;box-sizing:border-box} .row .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* aniversariantes e rows: botões compactos no mobile */ .row .btn.wa.sm{padding:8px 10px!important;font-size:0!important;min-width:40px;justify-content:center} .row .btn.wa.sm svg{width:20px!important;height:20px!important;margin:0} .row .tag{max-width:80px;overflow:hidden;text-overflow:ellipsis} .slot{padding:11px 13px} .stat{padding:13px} .stat .val{font-size:20px} .panel-head{flex-wrap:wrap;gap:8px;min-width:0} .panel-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis} .kv{grid-template-columns:1fr 1fr} .detail-head{flex-wrap:wrap;gap:10px} /* --- agenda mobile --- */ .agenda-layout{border-radius:12px;height:calc(100vh - 132px);height:calc(100dvh - 132px);min-height:360px} .gw-toolbar{padding:5px 10px;gap:6px;flex-wrap:wrap} /* Forçar dia no mobile — semana é inutilizável */ .gw-toolbar .seg{display:none} /* esconder rotulo de data longa */ .gw-rotulo-semana{display:none} /* input de data menor */ .gw-toolbar input[type=date]{width:auto;flex:1 1 152px;min-width:152px;font-size:13px;padding:5px 6px} /* grade dia — sem scroll horizontal, régua estreita */ .gw-scroll{overflow-x:hidden} .gw-head{grid-template-columns:38px 1fr!important;min-width:0!important} .gw-dias{grid-template-columns:1fr!important;min-width:0!important;width:100%!important} .gw-ruler{min-width:38px!important;width:38px!important} .gw-corner{min-width:38px!important;width:38px!important} .gw-hora{font-size:9px!important;right:4px!important} .gw-body{padding-left:38px!important;min-width:0!important} .gw-col{min-width:0!important;width:100%!important} /* cards no mobile */ .gw-card{padding:6px 10px 6px 12px} .gw-card-nome{font-size:13px} .gw-card-hora{font-size:11.5px} } /* 1482 — a gaveta "Mais" saiu junto com a barra inferior */ @media(max-width:480px){ .main{padding:8px 8px 16px} /* 1482 — sem a barra inferior, sem o vão de 78px */ .stats{grid-template-columns:1fr 1fr} .frow{grid-template-columns:1fr} .frow3{grid-template-columns:1fr} .stat .val{font-size:19px} .kv{grid-template-columns:1fr} .topbar h2{font-size:18px} /* extras móveis pequenos */ .seg{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:2px} .seg button{flex-shrink:0} #pageAction{overflow-x:auto;white-space:nowrap;padding-bottom:4px} .btn-encaixe.btn-act,.btn.btn-act,.btn.ghost.btn-act{flex-shrink:0} .panel-head h3{font-size:13.5px!important} .sem-bar-label{font-size:9px!important} .hero-painel{padding:16px 14px!important} } /* ---- mini calendário lateral ---- */ .mcal{padding:14px 12px;border-right:1px solid var(--line);min-width:172px;background:var(--surface)} .mcal-hd{text-align:center;font-size:9.5px;font-weight:700;color:var(--muted);padding:3px 0} /* ---- layout agenda ---- */ .agenda-layout{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;min-height:640px;width:100%;height:calc(100vh - 150px);height:calc(100dvh - 150px)} /* 1363 — a Área da agenda é sempre a "aumentada" (−150px, definida acima); as opções "menor"/"max" (data-ag-area) saíram do código. */ .agenda-grade{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0} /* 1457/1463 — DESIGN NOVO (idioma Google Calendar): chrome claro e arejado */ .gw-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative;z-index:30;background:var(--surface)} .gw-nav{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap} .gw-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap} /* 1457/1463 — Rótulo de data limpo, estilo título do Google Calendar */ .ag-rotulo-aero{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:10px; white-space:nowrap; flex:none; margin:0 2px; background:transparent; border:1px solid transparent; box-shadow:none; color:var(--ink); transition:.15s; } .ag-rot-main{ font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.2px; } .ag-rot-selo{ font-size:11px; font-weight:800; background:color-mix(in srgb, var(--blue) 14%, transparent); color:var(--blue-700); padding:2px 8px; border-radius:20px; } .ag-rot-sec{ font-size:12px; font-weight:600; color:var(--muted); } .gw-toolbar .nav-day{width:36px;height:30px;min-width:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--blue-700);cursor:pointer;transition:.15s} .gw-toolbar .nav-day svg{width:19px;height:19px} /* ── Compactação vertical da toolbar da agenda (largura preservada) ── */ .gw-toolbar .seg button{padding-top:5px;padding-bottom:5px} .gw-toolbar .dp-btn{padding-top:5px;padding-bottom:5px} .gw-toolbar .btn.ghost.sm{padding-top:5px;padding-bottom:5px} .gw-toolbar .gw-act,.gw-toolbar .gw-actions .btn.ghost.sm{height:30px} .gw-toolbar .nav-day:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-700)} .gw-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;width:100%;min-height:400px} .gw-head{display:grid;grid-template-columns:58px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:10;width:100%} .gw-dh{padding:3px 6px;text-align:center;cursor:pointer;transition:.15s;border-left:1px solid var(--line);container-type:inline-size} .gw-dh:hover{background:rgba(var(--blue-rgb),.13)} .gw-dh-in{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;border-radius:11px;transition:.15s;max-width:100%} .gw-dh.today{background:transparent} .gw-dh.today .gw-dh-in{background:var(--agh-cor,var(--blue))} .gw-dh.today .gw-dw,.gw-dh.today .gw-dn{color:#fff} .gw-dh.today .gw-dw{opacity:.88} .gw-dh.sel:not(.today){background:rgba(var(--blue-rgb),.10)} .gw-dw{display:inline;font-size:10.5px;font-weight:800;color:var(--blue-700);text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .gw-dn{display:inline;font-size:16px;font-weight:800;color:var(--ink);margin-top:0} /* ═══════════════════════════════════════════════════════════════ CONFIGURAÇÕES OPCIONAIS DA AGENDA — escolhas independentes Padrão (sem atributo): Compacto + Pílula + barra Compacta + Manter + área Aumentada. data-ag-head = tamanho (med/esp) · data-ag-headst = estilo (emp) data-ag-bar = altura da barra (med/esp) · data-ag-barx = horizontal ═══════════════════════════════════════════════════════════════ */ /* ── CABEÇALHO · TAMANHO (padrão comp já está acima) ── */ [data-ag-head="med"] .gw-dh{padding:6px 6px} [data-ag-head="med"] .gw-dw{font-size:11px} [data-ag-head="med"] .gw-dn{font-size:19px} [data-ag-head="esp"] .gw-dh{padding:10px 6px} [data-ag-head="esp"] .gw-dw{font-size:10.5px;letter-spacing:.6px} [data-ag-head="esp"] .gw-dn{font-size:22px} /* ── CABEÇALHO · ESTILO "empilhado" (dia sobre número + círculo do hoje) ── */ [data-ag-headst="emp"] .gw-dh-in{display:contents} [data-ag-headst="emp"] .gw-dw{display:block;letter-spacing:.6px} [data-ag-headst="emp"] .gw-dn{display:block;margin-top:1px} /* 1361 — "Nome do dia · Por extenso" ENCOLHE SOZINHO: quando a coluna do dia aperta, a fonte do rótulo diminui em degraus (o cabeçalho é um container). Assim "SEXTA-FEIRA" aparece inteiro onde cabe e vai afinando onde não cabe; as reticências do .gw-dw são só o último recurso. Vale nos 3 tamanhos. */ @container (max-width:118px){ [data-ag-head] .gw-dw, .gw-dw{font-size:9px;letter-spacing:.2px} } @container (max-width:94px){ [data-ag-head] .gw-dw, .gw-dw{font-size:8px;letter-spacing:0} } [data-ag-headst="emp"] .gw-dh.today{background:rgba(var(--blue-rgb),.16)} [data-ag-headst="emp"] .gw-dh.today .gw-dw{color:var(--blue-700);opacity:1} [data-ag-headst="emp"] .gw-dh.today .gw-dn{background:var(--agh-cor,var(--blue));color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;margin:1px auto 0} [data-ag-headst="emp"][data-ag-head="med"] .gw-dh.today .gw-dn{width:30px;height:30px;margin:2px auto 0} [data-ag-headst="emp"][data-ag-head="esp"] .gw-dh.today .gw-dn{width:32px;height:32px;margin:2px auto 0} /* ── BARRA · ALTURA (padrão comp já está acima) ── */ [data-ag-bar="med"] .gw-toolbar{padding-top:7px;padding-bottom:7px} [data-ag-bar="med"] .gw-toolbar .nav-day{height:33px} [data-ag-bar="med"] .gw-toolbar .seg button{padding-top:6px;padding-bottom:6px} [data-ag-bar="med"] .gw-toolbar .dp-btn{padding-top:6px;padding-bottom:6px} [data-ag-bar="med"] .gw-toolbar .btn.ghost.sm{padding-top:6px;padding-bottom:6px} [data-ag-bar="med"] .gw-toolbar .gw-act,[data-ag-bar="med"] .gw-toolbar .gw-actions .btn.ghost.sm{height:33px} [data-ag-bar="esp"] .gw-toolbar{padding-top:10px;padding-bottom:10px} [data-ag-bar="esp"] .gw-toolbar .nav-day{height:36px} [data-ag-bar="esp"] .gw-toolbar .seg button{padding-top:8px;padding-bottom:8px} [data-ag-bar="esp"] .gw-toolbar .dp-btn{padding-top:8px;padding-bottom:8px} [data-ag-bar="esp"] .gw-toolbar .btn.ghost.sm{padding-top:7px;padding-bottom:7px} [data-ag-bar="esp"] .gw-toolbar .gw-act,[data-ag-bar="esp"] .gw-toolbar .gw-actions .btn.ghost.sm{height:36px} /* ── BARRA · ORGANIZAÇÃO HORIZONTAL ── 1363 — os ícones da barra são sempre "Adaptar" (encolhe o gap se estreito), fixo desde a 1361; as outras opções (red/aum/fill) saíram do código. */ [data-ag-barx="adap"] .gw-toolbar{gap:clamp(3px,1.4vw,12px)} /* Área da agenda: "menor" (o antigo −180px) e "max" (−128px). Padrão = aumentada (−150px, definido no container). */ .gw-corner{border-right:1px solid var(--line);min-width:58px;width:58px} .gw-body{display:flex;padding-top:4px;width:100%} .gw-ruler{position:relative;min-width:58px;width:58px;flex:none} .gw-hora{position:absolute;right:8px;font-size:12px;font-weight:700;color:var(--muted);transform:translateY(-8px);white-space:nowrap} .gw-dias{position:relative;flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;min-width:0} .gw-linha{position:absolute;left:0;right:0;border-top:1px solid var(--line);pointer-events:none} .gw-linha.meia{border-top:1px dashed rgba(0,0,0,.06);pointer-events:none} .gw-col{position:relative;border-left:1px solid var(--line);cursor:crosshair} .gw-col-bg{position:absolute;inset:0;z-index:0;cursor:crosshair} .gw-col:hover{background:rgba(31,115,224,.018)} /* 1605 — coluna do DIA CORRENTE com um azul levíssimo (como o Simples Dental), além da linha do horário atual. Sutil para não competir com os cards. A cor vem de uma variável (--gw-hoje-bg) que o tema escuro sobrescreve — sem selector [data-theme] extra aqui. */ .gw-col-hoje{ background:var(--gw-hoje-bg, rgba(31,115,224,.055)); } .gw-col-hoje:hover{ background:var(--gw-hoje-bg-h, rgba(31,115,224,.075)); } /* 1457/1463 — cards estilo Google Calendar: arredondados, chapados, filete de cor (inline no JS) */ .gw-card{position:absolute;border-radius:7px;padding:5px 9px 5px 12px;overflow:hidden;cursor:pointer;z-index:2; border:1px solid color-mix(in srgb,var(--ink) 7%,transparent); box-shadow:0 1px 2px rgba(19,41,75,.07); transition:transform .13s cubic-bezier(.34,1.56,.64,1),box-shadow .13s} /* 1613 — filete vira PÍLULA flutuante (recuada em cima/baixo, cantos arredondados à direita), como na prévia do card. Cor vem do --gw-fx que o JS injeta. */ .gw-card::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px; border-radius:0 3px 3px 0;background:var(--gw-fx,var(--blue));z-index:1} .gw-card:hover{transform:translateY(-1px);z-index:5; box-shadow:0 4px 12px rgba(19,41,75,.16)} .gw-card:active{transform:translateY(0) scale(.99)} /* 1574 — card ENXUTO do leque (consulta curta): só selo + 1ª linha do nome */ .gw-card-1l{padding:3px 8px 3px 11px} .gw-card-1l .gw-card-nome{font-size:11.5px} .gw-card-nome{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gw-card-hora{font-size:10.5px;font-weight:600;color:var(--ink-2);margin-top:2px;opacity:.85} .gw-card-tipo{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ⚰️ 1492 — o quadradinho de iniciais e seus tamanhos configuráveis saíram. */ /* ⚰️ 1492 — o quadradinho de iniciais dos cards e seus tamanhos saíram com o avatar. */ /* modo mini: card espremido = avatar central + iniciais (também escala) */ /* ⚰️ 1497 — o modo estreito (iniciais grandes) foi expurgado: limite fixo em NUNCA. */ /* indicadores do card (retorno/primeira, convênio/particular) */ /* ⚰️ 1497 — os selos de indicador do card saíram; o popup mostra por padrão. */ /* zonas */ .gw-fechado{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.025) 5px,rgba(0,0,0,.025) 10px);pointer-events:none;z-index:1} .gw-almoco{position:absolute;left:0;right:0;background:rgba(194,132,15,.06);border-top:1px dashed rgba(194,132,15,.22);border-bottom:1px dashed rgba(194,132,15,.22);pointer-events:none;z-index:1} .gw-agora{position:absolute;left:0;right:0;z-index:6;pointer-events:none} .gw-agora-dot{width:10px;height:10px;border-radius:50%;background:var(--red);position:absolute;left:-5px;top:-5px;box-shadow:0 0 0 3px rgba(216,57,43,.2)} /* dot de status estilo Android notification */ .status-dot{display:inline-block;border-radius:50%;flex:none;position:relative} .status-dot.pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;animation:sdpulse 2s ease-out infinite} @keyframes sdpulse{0%{box-shadow:0 0 0 0 var(--sdcolor,rgba(59,130,246,.5))}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}} .gw-agora-line{border-top:2px solid var(--red)} /* ===== Agenda — visão por cadeira (Fase 2) ===== */ .gwcad-scroll{flex:1;overflow:auto;position:relative;width:100%;min-height:400px} .gwcad-head{display:grid;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:12;background:var(--surface)} .gwcad-corner{border-right:1px solid var(--line);width:58px;position:sticky;left:0;z-index:2;background:var(--surface)} .gwcad-chead{padding:8px 6px;text-align:center;border-left:1px solid var(--line);min-width:0;overflow:hidden} .gwcad-chead .cn{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15} .gwcad-chead .cd{font-size:9.5px;font-weight:700;margin-top:2px;display:inline-flex;align-items:center;gap:4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gwcad-chead .cd .dot{width:7px;height:7px;border-radius:50%;flex:none} .gwcad-body{display:flex;padding-top:4px} .gwcad-ruler{position:sticky;left:0;width:58px;flex:none;z-index:5;background:var(--surface)} .gwcad-cols{position:relative;display:grid;flex:1 1 0} .gwcad-col{position:relative;border-left:1px solid var(--line);cursor:crosshair} .gwcad-col:hover{background:rgba(31,115,224,.018)} .gwcad-col.semcad{background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(124,146,171,.045) 7px,rgba(124,146,171,.045) 14px)} .gwcad-band{position:absolute;left:0;right:0;z-index:1;border-left:3px solid;pointer-events:none;overflow:hidden;border-radius:0 4px 4px 0} .gwcad-bandtag{position:absolute;top:3px;left:5px;font-size:9px;font-weight:800;border-radius:5px;padding:1px 6px;max-width:calc(100% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.55;display:inline-flex;align-items:center} /* mês */ .gw-mes-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line)} .gw-mes-hd{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);padding:8px 4px;border-right:1px solid var(--line);text-transform:uppercase;letter-spacing:.4px} .gw-mes-hd:last-child{border-right:none} .gw-mes-dia{min-height:90px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 6px;cursor:pointer;transition:.1s;position:relative} .gw-mes-dia:nth-child(7n){border-right:none} .gw-mes-dia:hover{background:var(--blue-soft)} .gw-mes-dia.heat-on:hover{ background:none; box-shadow:inset 0 0 0 2px var(--blue-line); } .gw-mes-pend{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--surface); } .gw-mes-cnt{ position:absolute; bottom:5px; right:7px; font-size:10px; font-weight:800; color:var(--ink-2); opacity:.7; } .gw-mes-cnt.sobre-heat{ color:rgba(255,255,255,.92); opacity:1; } .gw-mes-legenda{ display:flex; align-items:center; gap:7px; padding:12px 4px 2px; font-size:11px; color:var(--muted); font-weight:600; flex-wrap:wrap; } .gw-mes-legenda .hm-sw{ width:20px; height:13px; border-radius:3px; border:1px solid var(--line); } .gw-mes-legenda .hm-pend-lg{ display:inline-flex; align-items:center; gap:5px; margin-left:12px; } .gw-mes-dia.outro-mes{opacity:.4} .gw-mes-num{font-size:12.5px;font-weight:700;color:var(--ink);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;margin-bottom:3px} .gw-mes-dia.hoje-mes .gw-mes-num{background:var(--blue);color:#fff} .gw-mes-chip{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer; box-shadow:0 1px 3px rgba(19,41,75,.1),inset 0 1px 0 rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.3)} .gw-mes-mais{font-size:10px;color:var(--muted);font-weight:600;padding:1px 4px} /* ===== DARK MODE TOTAL ===== */ [data-theme=dark] body,[data-theme=dark] .main{background:var(--bg)} /* Cantos arredondados: o cabeçalho/corpo/rodapé herdam o fundo do .modal (que tem border-radius), evitando a sobreposição quadrada nos cantos no tema escuro. */ [data-theme=dark] .modal-head,[data-theme=dark] .modal-foot,[data-theme=dark] .modal-body{background:transparent} html{color-scheme:light} /* ===== Seletor de data próprio (calendário no estilo do app) ===== */ .dp-wrap{position:relative;display:inline-flex} .dp-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:.15s;white-space:nowrap} .dp-btn:hover{border-color:var(--blue-line);box-shadow:var(--sh1)} .dp-btn svg{width:16px;height:16px;color:var(--blue)} .dp-pop{display:none;position:absolute;top:calc(100% + 7px);left:0;z-index:99999;width:268px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px rgba(19,41,75,.22);padding:13px} .dp-pop.show{display:block;animation:dpIn .14s ease} @keyframes dpIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} .dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .dp-mes{font-weight:800;font-size:14px;color:var(--ink);text-transform:capitalize} .dp-arw{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:9px;cursor:pointer;color:var(--blue);font-size:18px;line-height:1;display:grid;place-items:center;transition:.15s} .dp-arw:hover{background:var(--blue-soft);border-color:var(--blue-line)} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .dp-head{margin-bottom:4px} .dp-hd{text-align:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:2px 0} .dp-day{text-align:center;font-size:13px;font-weight:600;color:var(--ink);padding:7px 0;border-radius:9px;cursor:pointer;transition:.12s;font-variant-numeric:tabular-nums;user-select:none} .dp-day:hover{background:var(--blue-soft)} .dp-day.out{color:var(--muted);opacity:.5} .dp-day.hj{color:var(--blue);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--blue)} .dp-day.sel{background:var(--blue);color:#fff;font-weight:800;box-shadow:0 3px 10px rgba(31,115,224,.4)} .dp-day.sel:hover{background:var(--blue-700)} .dp-day.fer{color:var(--amber)} .dp-day.dp-dis{color:var(--muted);opacity:.32;cursor:default;pointer-events:none} .dp-day.dp-dis:hover{background:transparent} .dp-foot{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .dp-hoje{background:transparent;border:none;color:var(--blue);font-weight:800;font-size:13px;cursor:pointer;padding:4px 10px;border-radius:7px;transition:.15s} .dp-hoje:hover{background:var(--blue-soft)} /* seletor de data em formulários */ .dpf-wrap{display:block;width:100%} .dpf-btn{width:100%;justify-content:flex-start;font-size:14px;font-weight:600;padding:10px 12px;background:var(--surface)} .dpf-btn:hover{border-color:var(--blue-line)} .dpf-lbl{flex:1;text-align:left} .dpf-ph{color:var(--muted);font-weight:500} .dp-foot2{justify-content:space-between!important} .dp-limpar{color:var(--muted)!important} .dp-limpar:hover{background:var(--line)!important;color:var(--ink)!important} /* campo de telefone com selo +55 */ .tel-wrap{display:flex;align-items:stretch;width:100%} .tel-ddi{display:flex;align-items:center;padding:0 11px;background:var(--blue-soft);border:1px solid var(--line);border-right:none;border-radius:10px 0 0 10px;color:var(--blue-700);font-weight:700;font-size:14px;white-space:nowrap;user-select:none} .tel-input{flex:1;min-width:0;border-top-left-radius:0!important;border-bottom-left-radius:0!important} /* dark mode - fix inline hardcoded colors in JS-generated content */ [data-theme=dark] .calc-box{background:var(--bg)!important;border-color:var(--line)!important;color:var(--ink-2)!important} /* ════ FLUENT DESIGN CORE ═══════════════════════════════════ */ :root{--radius:10px;--radius-lg:14px;--radius-xl:18px;--sh1:0 2px 8px rgba(19,41,75,.07),0 1px 2px rgba(0,0,0,.04);--sh2:0 4px 18px rgba(19,41,75,.11),0 2px 4px rgba(0,0,0,.05);--sh3:0 10px 40px rgba(19,41,75,.14),0 4px 8px rgba(0,0,0,.07);--ease:cubic-bezier(.4,0,.2,1);--dur:.18s} .stat{border-radius:var(--radius-lg)!important;box-shadow:var(--sh1);border:1px solid var(--line);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .stat:hover{box-shadow:var(--sh2);transform:translateY(-1px)} /* 1279 — Aero/Vista: cantos mais macios nos campos, foco com halo aqua e leve profundidade de vidro */ input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{border-radius:var(--radius-lg)!important;border:1.5px solid var(--line)!important;box-shadow:inset 0 1px 2px rgba(19,41,75,.045);transition:border-color var(--dur),box-shadow var(--dur);outline:none!important} input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(var(--blue-rgb),.16),inset 0 1px 2px rgba(19,41,75,.03)!important} .btn{border-radius:var(--radius-lg)!important;transition:all var(--dur) var(--ease)!important;font-weight:700} .btn:hover:not(:disabled){box-shadow:var(--sh2);transform:translateY(-1px)} .btn:active:not(:disabled){transform:translateY(0)!important;box-shadow:var(--sh1)!important} .btn.ghost:hover{background:var(--blue-soft);color:var(--blue)} #modalOverlay.show{} /* 1290 — moldura da janela: borda de vidro interna (fio de luz em toda a volta) + rim no topo */ #modalOverlay .modal-box{border-radius:var(--radius-xl)!important;box-shadow:var(--sh3),inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35);border:1px solid var(--line);animation:fluentIn var(--dur) var(--ease)} @keyframes fluentIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}} @keyframes slideUpFluent{from{transform:translateY(100%)}to{transform:none}} .nav button{transition:all var(--dur) var(--ease)!important} .nav button.active{background:rgba(255,255,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.08)!important} .topbar{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--sh1)!important} .topbar-act{border-radius:var(--radius)!important;transition:all var(--dur) var(--ease)!important} .topbar-act:hover{background:var(--blue-soft);color:var(--blue)} /* 1283 — popovers/menus com vidro lite: rim de luz no topo + cantos Vista + hover gel (efeitos baratos, sem blur) */ #agendaDialItems,#estoqueDialItems{position:fixed;z-index:9500;background:linear-gradient(180deg,#FFFFFF,#FBFDFF);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--sh3),inset 0 1px 0 rgba(255,255,255,.75);min-width:210px;max-width:calc(100vw - 16px);max-height:calc(100vh - 72px);overflow-x:hidden;overflow-y:auto;animation:fluentIn .16s var(--ease)} .agenda-dial-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 15px;border:none;background:transparent;color:var(--ink);font-size:13.5px;font-weight:700;font-family:var(--font);cursor:pointer;text-align:left;transition:background var(--dur)} .agenda-dial-item:hover{background:linear-gradient(180deg,var(--blue-soft),color-mix(in srgb,var(--blue) 14%,var(--surface)));color:var(--blue-700)} .agenda-dial-item+.agenda-dial-item{border-top:1px solid var(--line)} /* janelinhas flutuantes (menu sanduíche + popover de temas) com melhor separação no escuro */ [data-theme=dark] #mainMenuPanel, [data-theme=dark] #temasTopbarPop{ border-color:var(--blue-line)!important; box-shadow:0 16px 48px rgba(0,0,0,.62)!important; } /* 1444: os discadores no escuro migraram p/ o bloco de auditoria no fim do arquivo (a vírgula aqui vazava o #estoqueDialItems p/ o tema claro também). */ /* ═══ fim Fluent ════════════════════════════════════════════ */ /* Sidebar minimalista */ .side-foot{padding:8px 10px 10px} #perfilAtivoLabel{padding:6px 10px!important;font-size:11.5px!important;margin-bottom:4px!important;border-radius:9px!important} .side-cal{padding:6px 8px!important} /* Topbar compacta */ .topbar{padding:12px 18px 13px!important;height:auto!important;min-height:52px!important} .page-title{font-size:18px!important;font-weight:900!important} .page-sub{font-size:12px!important} /* Compact sidebar: ocultar textos (mostrar só ícones) */ .app.compact #perfilAtivoLabel{opacity:0;height:0;overflow:hidden;margin:0;padding:0;pointer-events:none} .app.compact #dentFilter{opacity:0;height:0;overflow:hidden;margin:0;padding:0} .app.compact .side-cal{opacity:0;height:0;overflow:hidden;margin:0;padding:0} .app.compact .collapse-btn svg{transform:rotate(180deg)} /* Sidebar compacta: centralizar ícones */ .app.compact .side{width:68px} /* Transições suaves */ #statusBar,#perfilAtivoLabel,#dentFilter,.side-cal{transition:opacity .2s,height .2s} /* Topbar: ocultar brand em mobile (já no sidebar compacto) */ /* ════ SIDEBAR FLUENT — Chamatativo e sem quebrar layout ════ */ /* Nav items — reveal hover + active glow */ .nav button{ transition:background .16s,color .16s,box-shadow .16s,transform .12s !important; border-radius:11px !important; } .nav button:hover{ background:rgba(255,255,255,.14) !important; color:#fff !important; transform:translateX(2px); } .nav button.active{ background:linear-gradient(135deg,rgba(var(--side-acc-rgb,31,115,224),.55) 0%,rgba(var(--side-acc-rgb,31,115,224),.28) 100%) !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 12px rgba(var(--side-acc-rgb,31,115,224),.25) !important; border:1px solid rgba(var(--side-acc-rgb,31,115,224),.35) !important; } .nav button.active svg{opacity:1;filter:none} .nav button svg{transition:filter .16s,opacity .16s} .nav button:hover svg{opacity:1;filter:none} /* 1379 — o bloco da marca da sidebar (.brand) saiu do código. */ /* Side-cal — glass card */ /* 1286 — mini-calendário com sheen de vidro (brilho no topo), leve — na regra que de fato vence */ .side-cal{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.22)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 4px 20px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.14) !important; } /* Perfil badge — Fluent highlight */ #perfilAtivoLabel{ background:linear-gradient(135deg,rgba(var(--side-acc-rgb,31,115,224),.22) 0%,rgba(var(--side-acc-rgb,31,115,224),.10) 100%) !important; border:1px solid rgba(var(--side-acc-rgb,31,115,224),.30) !important; box-shadow:0 2px 8px rgba(var(--side-acc-rgb,31,115,224),.15) !important; transition:background .16s,box-shadow .16s !important; color:#EAF1FB !important; } /* A sidebar é escura nos dois temas, então o nome/papel precisam de cor clara fixa (não podem seguir --ink/--muted, que ficam escuros no tema claro e somem). */ #perfilAtivoLabel strong{color:#EAF1FB !important;} #perfilAtivoLabel span{color:#AFC6E2 !important;} #perfilAtivoLabel:hover{ background:linear-gradient(135deg,rgba(var(--side-acc-rgb,31,115,224),.35) 0%,rgba(var(--side-acc-rgb,31,115,224),.18) 100%) !important; box-shadow:0 3px 14px rgba(var(--side-acc-rgb,31,115,224),.25) !important; } /* Botão Configurações — fluent glass */ .backup-btns button{ background:rgba(255,255,255,.09) !important; border:1px solid rgba(255,255,255,.14) !important; transition:all .16s !important; } .backup-btns button:hover{ background:rgba(var(--side-acc-rgb,31,115,224),.30) !important; border-color:rgba(var(--side-acc-rgb,31,115,224),.50) !important; box-shadow:0 2px 10px rgba(var(--side-acc-rgb,31,115,224),.20) !important; } /* Collapse button glow */ .collapse-btn{ box-shadow:0 2px 12px rgba(19,41,75,.30),0 0 0 1px rgba(var(--side-acc-rgb,31,115,224),.25) !important; transition:transform .18s,box-shadow .18s !important; } .collapse-btn:hover{ box-shadow:0 4px 18px rgba(var(--side-acc-rgb,31,115,224),.45),0 0 0 2px rgba(var(--side-acc-rgb,31,115,224),.40) !important; transform:scale(1.12) !important; } /* ════ FIM SIDEBAR FLUENT ════════════════════════════════════ */ /* Topbar não deve cortar dropdowns */ .topbar{overflow:visible!important;z-index:100} #quickActMenu,#agendaDialItems,#estoqueDialItems{z-index:9500!important} /* WhatsApp Speed Dial */ .wa-sdial{position:relative;display:inline-flex} .wa-sdial-btn{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff;border:none;border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font);transition:filter .15s,transform .15s;box-shadow:0 2px 8px rgba(37,211,102,.3)} .wa-sdial-btn:hover{filter:brightness(1.1);transform:translateY(-1px)} .wa-sdial-btn svg{width:15px;height:15px;flex-shrink:0} .wa-sdial-menu{display:none;position:fixed;z-index:9500;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 10px 40px rgba(19,41,75,.18);min-width:200px;overflow:hidden;animation:fluentIn .16s var(--ease)} .wa-sdial-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:none;background:transparent;color:var(--ink);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;text-align:left;transition:background .14s;white-space:nowrap} .wa-sdial-item:hover{background:rgba(37,211,102,.1);color:#1A9E52} .wa-sdial-item+.wa-sdial-item{border-top:1px solid var(--line)} .wa-sdial-item svg{width:16px;height:16px;flex-shrink:0;color:#25D366} /* ── Busca universal (command palette) ── */ /* 1474 — #buscaOverlay saiu do código (a pesquisa é a barra) */ .busca-grp{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:10px 12px 4px} .busca-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;transition:background .1s} .busca-item.sel{background:linear-gradient(180deg,var(--blue-soft),color-mix(in srgb,var(--blue) 13%,var(--surface)))} .busca-ic{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue-700);display:grid;place-items:center;flex:none} .busca-ic svg{width:18px;height:18px} .busca-txt{flex:1;min-width:0} .busca-label{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .busca-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .busca-go{font-size:14px;color:var(--blue-700);opacity:0;flex:none;font-weight:700} .busca-item.sel .busca-go{opacity:1} .busca-dica{font-size:12.5px;color:var(--muted);padding:14px 12px 4px;line-height:1.5} .busca-vazio{text-align:center;color:var(--muted);font-size:13px;padding:30px 16px} .busca-kbd{font-size:10px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-family:var(--font);flex:none} .busca-kbs{margin-left:auto;display:flex;gap:3px;flex:none;align-items:center} /* ---- (2) Tela de login / seleção de usuário / PIN — eram inline no ---- */ /* TRAVA pré-login: enquanto o usuário não entrou, o app (grelha, barra de abas e botão +) fica totalmente oculto. Isso impede que o app "vaze" por baixo da tela de login antes de autenticar e que o FAB/tab-bar apareçam sobre/atrás da entrada. A classe sai do só quando iniciarApp() conclui (_mostrarTudoNav). */ body.pre-login .app, body.pre-login #fabAdd, body.pre-login .fab-sup{ display:none !important; } /* Durante o login, o body recebe o mesmo gradiente cosmos como base. Assim, como o #loginScreen agora é absolute e cresce com o conteúdo, o fundo cobre tudo — e isto se aplica SÓ ao pre-login, saindo automaticamente após entrar. */ body.pre-login{ background:linear-gradient(135deg,#091F4B 0%,#0C3172 45%,#0B2550 100%) !important; min-height:100dvh; } @keyframes usrCardIn{from{opacity:0;transform:translateY(24px) scale(.93)}to{opacity:1;transform:none}} @keyframes usrPinSlide{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes usrShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}} @keyframes usrPulse{0%,100%{box-shadow:0 0 0 0 rgba(31,115,224,.4)}50%{box-shadow:0 0 0 8px rgba(31,115,224,0)}} /* 1428 — LÁPIDE: .usrBlob (bolhas coloridas flutuantes das telas de entrada) removido. As quatro telas usam agora o fundo claro "Aurora" (var --ent-bg), sem blobs. */ .usr2-card{ position:relative;width:140px;padding:24px 14px 18px;border-radius:22px; cursor:pointer;text-align:center; border:1.5px solid rgba(255,255,255,.07); background:rgba(255,255,255,.04); transition:all .24s cubic-bezier(.4,0,.2,1); animation:usrCardIn .4s cubic-bezier(.4,0,.2,1) both; } .usr2-card:hover{ background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18); transform:translateY(-6px) scale(1.02); box-shadow:0 20px 48px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1); } .usr2-card.sel{ border-color:rgba(31,115,224,.7)!important; box-shadow:0 0 0 3px rgba(31,115,224,.25),0 20px 48px rgba(31,115,224,.3)!important; } .usr2-card.dim{opacity:.35;transform:scale(.95);pointer-events:none} /* ── Responsivo: evita o relógio/logo sobreporem o título em telas estreitas ── */ @media(max-width:560px){ #usrClock{top:14px!important;right:14px!important} #usrTime{font-size:24px!important;letter-spacing:1px!important} #usrDate{font-size:11px!important;margin-top:2px!important} #userSelectScreen .mono#usrBrandMono2{width:28px!important;height:28px!important} /* 1443 — empurra o conteúdo central para baixo do header absoluto (logo + relógio + "Conta " + Sair). Era 120px e o "Trocar de clínica" (1º item do centro) colava no bloco da conta; 158px limpa o header inteiro com folga. */ #usrMain{justify-content:flex-start!important;padding-top:158px!important;height:100%!important;overflow-y:auto!important} #usrAcctBox{margin-top:8px!important;gap:5px!important} #usrAcctBox span{max-width:44vw!important;font-size:9.5px!important} #usrClinicaName{max-width:60%;text-align:center} .usr2-card{width:128px!important} } @media(max-width:380px){ #usrTime{font-size:20px!important} .usr2-card{width:118px!important;padding:18px 10px 14px!important} .usr2-avatar{width:60px!important;height:60px!important;font-size:20px!important} } .usr2-avatar{ width:72px;height:72px;border-radius:50%;margin:0 auto 12px; display:flex;align-items:center;justify-content:center; font-size:24px;font-weight:900;color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.4); transition:all .24s; } .usr2-card:hover .usr2-avatar{transform:scale(1.08)} .usr2-card.sel .usr2-avatar{animation:usrPulse 2s infinite} .usr2-name{font-size:13px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:2px} .usr2-role{font-size:10.5px;color:rgba(255,255,255,.45);font-weight:600;margin-top:4px} .usr2-pin-status{font-size:9.5px;margin-top:5px;font-weight:700} /* ── Tela de escolha de clínica (login) — mesma linguagem da tela de perfis ── */ #clinicaSelectScreen .csBrand{position:absolute;top:26px;left:30px;display:flex;align-items:center;gap:11px;z-index:2} #clinicaSelectScreen .csBrandName{font-size:18px;font-weight:800;letter-spacing:.3px;color:#fff} #clinicaSelectScreen .csBrandName b{color:var(--hub-emblema,#8FC0FF)} #clinicaSelectScreen .csClock{position:absolute;top:24px;right:32px;text-align:right;z-index:2} #clinicaSelectScreen .csTime{font-size:36px;font-weight:200;color:#fff;letter-spacing:2px;line-height:1} #clinicaSelectScreen .csDate{font-size:13px;color:rgba(255,255,255,.42);margin-top:4px;font-weight:500} #clinicaSelectScreen .csWrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px} #clinicaSelectScreen .csEyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:14px} #clinicaSelectScreen .csTitle{font-size:30px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:.2px} #clinicaSelectScreen .csSub{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:40px} #clinicaSelectScreen .csCards{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:760px} #clinicaSelectScreen .csCard{position:relative;width:225px;padding:28px 20px 22px;border-radius:22px;cursor:pointer;text-align:center;border:1.5px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 30px rgba(0,0,0,.24);transition:all .24s cubic-bezier(.4,0,.2,1);animation:usrCardIn .5s cubic-bezier(.4,0,.2,1) both} #clinicaSelectScreen .csCard:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2);transform:translateY(-6px) scale(1.02);box-shadow:0 22px 50px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.1)} #clinicaSelectScreen .csAvatar{width:72px;height:72px;border-radius:20px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.42);transition:all .24s} #clinicaSelectScreen .csCard:hover .csAvatar{transform:scale(1.07)} #clinicaSelectScreen .csName{font-size:15px;font-weight:700;line-height:1.32;color:#fff;min-height:40px;display:flex;align-items:center;justify-content:center} #clinicaSelectScreen .csGo{margin-top:12px;font-size:12px;font-weight:700;color:rgba(255,255,255,.4);display:inline-flex;align-items:center;gap:5px;transition:all .2s;letter-spacing:.3px} #clinicaSelectScreen .csCard:hover .csGo{color:#8FC0FF;gap:8px} #clinicaSelectScreen .csGo svg{width:14px;height:14px} #clinicaSelectScreen .csFoot{margin-top:38px;text-align:center} #clinicaSelectScreen .csConn{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:14px} #clinicaSelectScreen .csSwitch{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.62);font-size:13px;font-weight:700;cursor:pointer;padding:10px 20px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.04);transition:all .18s} #clinicaSelectScreen .csSwitch:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4);color:#fff} #clinicaSelectScreen .csSwitch svg{width:15px;height:15px} @media(max-width:560px){ #clinicaSelectScreen .csTime{font-size:24px;letter-spacing:1px} #clinicaSelectScreen .csBrandName{display:none} #clinicaSelectScreen .csTitle{font-size:24px} #clinicaSelectScreen .csCard{width:calc(50% - 10px);min-width:150px;padding:22px 14px 18px} #clinicaSelectScreen .csAvatar{width:60px;height:60px;font-size:24px} } /* PIN panel */ #usrPinPanel{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:100%;max-width:320px;padding:0 20px; animation:usrPinSlide .28s cubic-bezier(.4,0,.2,1); z-index:2; } #usrPinCard{ background:rgba(8,18,42,.85); border:1px solid rgba(255,255,255,.10);border-radius:24px; padding:28px 28px 22px; box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(31,115,224,.12); } ._up2Btn{ border:1px solid rgba(255,255,255,.12);border-radius:11px; background:rgba(255,255,255,.06);color:#fff; font-size:22px;font-weight:700;padding:14px 0; cursor:pointer;transition:all .12s;width:100%; font-family:var(--font); } ._up2Btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25)} ._up2Btn:active{transform:scale(.94);background:rgba(31,115,224,.3)} #usrClk{font-size:13px;color:rgba(255,255,255,.35);letter-spacing:.3px} /* Dots grandes para PIN */ /* 877: transition:all faz o navegador vigiar TODAS as propriedades animaveis a cada frame. So tres mudam aqui. */ .usr2-dot{ width:16px;height:16px;border-radius:50%; border:2px solid rgba(255,255,255,.3);background:transparent; transition:background-color .16s,border-color .16s,box-shadow .16s; } .usr2-dot.filled{background:#fff;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)} /* Combobox custom (substitui datalist nativo) */ .combo{position:relative;display:block} .combo-input{padding-right:32px} .combo-arrow{position:absolute;right:11px;top:0;height:100%;display:flex;align-items:center;color:var(--muted);font-size:11px;cursor:pointer;pointer-events:auto} .combo-pop{display:none;position:fixed;z-index:10050;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(19,41,75,.18);overflow-y:auto;padding:5px;min-width:150px} .combo-pop.show{display:block;animation:fluentIn .14s var(--ease)} .combo-item{display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:transparent;color:var(--ink);font-size:13.5px;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .combo-item:hover,.combo-item.hl{background:var(--blue-soft);color:var(--blue-700)} .combo-empty{padding:10px 12px;color:var(--muted);font-size:12.5px} /* Select custom (substitui popup nativo do