/* ============================================================ OralHub — 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:#F3F7FD; --surface:#FFFFFF; --line:#E5EDF6; --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; } [data-theme=dark]{ /* ── Textos: 3 níveis de hierarquia ────────────────────── */ --ink:#E2EAF4; /* texto principal — branco-azulado suave */ --ink-2:#8FA8C0; /* texto secundário — contraste mínimo WCAG AA */ --muted:#7E9AB4; /* texto terciário/labels */ /* ── Azul primário: médio, confortável para olho noturno ─ */ --blue:#4A8EC2; --blue-rgb:74,142,194; /* botões e destaques — legível sem irradiar */ --hub-accent:#8FC0FF; /* "Hub" do emblema — azul claro no tema escuro */ --blue-700:#6AAED8; /* links e ícones ativos */ --blue-soft:#0E1E2E; /* fundos azulados suaves */ --blue-line:#1A3148; /* bordas azuladas */ /* ── Estrutura: fundo e superfícies com contraste claro ── */ --bg:#111827; /* fundo global — azul-acinzentado, não preto puro */ --surface:#1C2B3A; /* cards, painéis — +10% luminância sobre bg */ --line:#243448; /* divisores e bordas — sutis mas visíveis */ /* ── Semânticas: dessaturadas para conforto noturno ────── */ --green:#3DB87A; /* sucesso — verde médio, não neon */ --green-soft:#0E2218; --amber:#C98A28; /* atenção — âmbar quente, reduzido */ --amber-soft:#221A0A; --red:#D95555; /* erro — vermelho suave, não fluorescente */ --red-soft:#2A1212; --purple:#8B6FD8; /* roxo — dessaturado */ --purple-soft:#1A1230; /* ── Sombra: mais pronunciada no escuro ────────────────── */ --shadow:0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45); } [data-theme=dark] .side{background:radial-gradient(ellipse 180% 60% at 20% 0%,rgba(255,255,255,.04) 0%,transparent 70%),radial-gradient(ellipse 120% 50% at 80% 100%,rgba(var(--blue-rgb,74,142,194),.10) 0%,transparent 60%),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} /* 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} [data-theme=dark] .topbar{background:#151F2D;border-bottom:1px solid var(--line)} [data-theme=dark] .tab-bar{background:var(--surface);border-top:1px solid var(--line)} [data-theme=dark] .tab-bar button{color:var(--muted)} [data-theme=dark] .tab-bar button.active{color:var(--blue-700)} [data-theme=dark] .search input{background:var(--surface);border-color:var(--line)} [data-theme=dark] .datebar .nav-day{background:var(--surface);border-color:var(--line)} [data-theme=dark] .nbadge{background:var(--red)!important} [data-theme=dark] .stat.accent-blue .val{color:var(--blue-700)} [data-theme=dark] .stat.accent-green .val{color:var(--green)} [data-theme=dark] .stat.accent-amber .val{color:var(--amber)} [data-theme=dark] .stat.accent-red .val{color:var(--red)} [data-theme=dark] #tabMaisDraw{background:#1C2B3A;border-color:var(--line);bottom:calc(62px + env(safe-area-inset-bottom,0px) + 10px);max-height:calc(100dvh - 62px - env(safe-area-inset-bottom,0px) - 26px);overflow:auto} [data-theme=dark] #tabMaisDraw button{background:var(--surface);color:var(--ink-2)} [data-theme=dark] .panel-head{border-bottom-color:var(--line)} [data-theme=dark] .hint{color:var(--muted)} [data-theme=dark] .kv .k{color:var(--muted)} [data-theme=dark] .kv .v{color:var(--ink)} [data-theme=dark] .modal{background:#1C2B3A;border:1px solid var(--line)} [data-theme=dark] .field input,[data-theme=dark] .field select,[data-theme=dark] .field textarea{background:var(--surface);color:var(--ink);border-color:var(--blue-line)} [data-theme=dark] #tipoDropBtn,[data-theme=dark] #f_catBtn,[data-theme=dark] #f_catDrop,[data-theme=dark] #tipoDrop,[data-theme=dark] #c_pacdrop{background:var(--surface);color:var(--ink);border-color:var(--line)} [data-theme=dark] .btn.ghost{background:transparent;color:var(--blue-700);border-color:var(--blue-line)} [data-theme=dark] .stat,[data-theme=dark] .panel{background:var(--surface);border-color:var(--line)} [data-theme=dark] .row:hover{background:rgba(var(--blue-rgb,74,142,194),.08)} [data-theme=dark] .slot.filled{background:var(--surface)} [data-theme=dark] .mchip{background:var(--surface)} [data-theme=dark] .overlay,[data-theme=dark] .overlay2{background:rgba(5,12,22,.8)} *{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} .app.compact .main{min-width:0;overflow-x:hidden;max-width:1700px} .side{background:radial-gradient(ellipse 200% 70% at 15% 0%,rgba(var(--blue-rgb,80,140,255),.20) 0%,transparent 55%),radial-gradient(ellipse 140% 60% at 85% 100%,rgba(var(--blue-rgb,40,100,220),.13) 0%,transparent 55%),linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 40%),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,.07);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:4px 0 32px rgba(4,14,42,.25);z-index:2} .app.compact .side{width:68px;padding:16px 8px} /* 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} [data-theme=dark] .gw-mes-dia.feriado{background:rgba(194,132,15,.22)} [data-theme=dark] .gw-mes-dia.feriado .gw-mes-num{color:#FFD27A!important} [data-theme=dark] .gw-mes-fer{color:#FFD27A} .mcal-day.feriado{color:#C2840F!important;font-weight:700} .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:linear-gradient(90deg,rgba(194,132,15,.14),rgba(194,132,15,.05));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} /* 929 — SIDEBAR COM CÉU VIVO: o fundo em gradiente opaco e os pseudos escondiam a camada de estrelas. Com o céu ativo, abrimos o fundo (transparente) e suprimimos os pseudos; a camada .ohCeuSurfLayer aparece e o conteúdo (.side>* z-index:1) fica por cima dela. */ /* 942 — A sidebar ficava com fundo TRANSPARENTE no modo Céu Vivo, e quem pintava era só a camada de estrelas (position:absolute). Essa camada acompanha o conteúdo: quando o menu é mais alto que a tela e a barra rola — o que acontece com zoom menor, quando o calendário entra —, a camada sobe junto e sai de vista, deixando aparecer o fundo claro da página. Agora fica uma cor de base escura no próprio elemento: ao contrário da camada, ela cobre toda a altura rolável, então a barra nunca clareia. As estrelas seguem por cima, no trecho visível. (Tentar prender a camada com position:sticky empurra o layout inteiro — medido: o logo ia parar fora da tela. Por isso a cor de base.) */ .side[data-ceu-side="1"]{background-image:none!important;background-color:color-mix(in srgb,var(--blue),#000 88%)!important} [data-theme=dark] .side[data-ceu-side="1"]{background-image:none!important;background-color:color-mix(in srgb,var(--blue),#000 90%)!important} .side[data-ceu-side="1"]::before,.side[data-ceu-side="1"]::after{display:none!important} .side[data-ceu-side="1"]>.ohCeuSurfLayer{z-index:0!important} .brand{display:flex;align-items:center;gap:10px;padding:4px 4px 16px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:10px;min-height:62px} .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)} .brand-text{overflow:hidden;transition:opacity .18s,width .18s;min-width:0} .app.compact .brand-text{opacity:0;width:0;pointer-events:none} .app.compact .brand{justify-content:center;padding-left:0;padding-right:0} .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} .app.compact .mono{width:38px;height:38px;border-radius:10px} .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} .brand h1{font-family:var(--display);font-size:16px;font-weight:900;letter-spacing:.3px;line-height:1.1;white-space:nowrap} .brand small{font-size:10px;color:#AFC6E2;font-weight:500;display:block;line-height:1.35;word-break:break-word;white-space:normal;margin-top:2px} .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)} .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} .backup-btns{display:flex;gap:6px;flex-wrap:nowrap} .backup-btns button{flex:1;background:rgba(255,255,255,.1);color:#fff;border-radius:9px;padding:8px 6px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden} .backup-btns button:hover{background:rgba(255,255,255,.2)} .backup-btns svg{width:14px;height:14px;flex:none} .app.compact .backup-btns .btn-lbl{display:none} .app.compact .backup-btns button{padding:8px;justify-content:center} .main{padding:16px 34px 60px;--oh-pad:34px;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} .btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--blue) 0%,color-mix(in srgb,var(--blue),#000 16%) 100%);color:#fff;padding:10px 16px;border-radius:11px;font-weight:700;font-size:13.5px;transition:.15s;box-shadow:0 2px 7px rgba(31,115,224,.32), inset 0 1px 0 rgba(255,255,255,.25)} .btn:active{transform:scale(.96);box-shadow:0 1px 3px rgba(31,115,224,.2)} .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:linear-gradient(180deg,#2F7EEC 0%,#1559BD 100%)} .btn svg{width:16px;height:16px} .btn.ghost{background:var(--surface);color:var(--blue);border:1px solid var(--blue-line);box-shadow:none} .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:#25D366;color:#fff;box-shadow:0 2px 8px rgba(37,211,102,.3)} .btn.wa:hover{background:#1FB857} .btn.wa svg{width:17px;height:17px} .btn.ok{background:var(--green)} .btn.ok:hover{filter:brightness(.93)} .grid{display:grid;gap:16px} .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} } .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow)} .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; } .tl-kpi{ flex:1; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 15px; box-shadow:var(--sh1); } .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; } .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; } .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; } .ag-cor-sw{ width:34px; height:34px; border-radius:10px; border:2px solid transparent; cursor:pointer; box-shadow:0 0 0 1px var(--line); transition:.12s var(--ease,ease); padding:0; } .ag-cor-sw:hover{ transform:scale(1.08); } .ag-cor-sw.sel{ border-color:var(--ink); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } .ag-cor-tema{ width:auto; padding:0 12px 0 8px; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--surface); border-radius:10px; } .ag-cor-tema span{ width:18px; height:18px; border-radius:5px; box-shadow:0 0 0 1px var(--line); } .ag-cor-tema.sel{ border-color:var(--ink); } .ag-cor-custom{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); font-weight:600; } .ag-cor-custom input[type=color]{ width:44px; height:32px; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer; padding:2px; } /* 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; } /* 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); } .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} .two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start} .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.5fr) 74px 90px 96px 130px minmax(0,1.1fr) 200px;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);transition:.15s ease} .pac-head{display:grid;grid-template-columns:34px minmax(0,1.5fr) 74px 90px 96px 130px minmax(0,1.1fr) 200px;gap:12px;align-items:center;padding:9px 18px;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} .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 */ .pac-acts .so-mobile{display:none} /* No PC os botões ficam TODOS soltos; o menu "⋯" some (vira exclusivo do celular) */ .pac-acts .pac-menu{display:none} .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 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-tel{grid-area:tel} .pac-c-email{grid-area:email} .pac-acts{grid-area:acts;align-self:center} } .tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;white-space:nowrap;flex:none} .t-blue{background:var(--blue-soft);color:var(--blue-700)} [data-theme=dark] .t-blue{background:rgba(74,142,194,.15);color:#6AAED8} .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 */ .pac-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px} .pac-toolbar .search{flex:1;min-width:0} .pac-toolbar .pac-tb-filtros{display:flex;gap:8px;align-items:center;flex:none} .pac-toolbar>.tag{flex:none} @media(max-width:820px){ .pac-toolbar{flex-wrap:wrap} .pac-toolbar .search{flex:1 1 auto;min-width:180px;order:1} .pac-toolbar>.btn.ghost{order:2} .pac-toolbar .pac-tb-filtros{order:4;flex:1 1 100%;flex-wrap:wrap} .pac-toolbar>.tag{order:3} } .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)} [data-theme=dark] .topbar-act:hover{background:rgba(var(--blue-rgb,74,142,194),.16)} .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} .seg button{padding:8px 13px;border-radius:var(--radius, 8px);font-size:12.5px;font-weight:700;color:var(--ink-2);transition:all .15s var(--ease,ease)} .seg button.on{background:var(--surface);color:var(--blue-700);box-shadow:0 1px 3px rgba(15,42,67,.1)} [data-theme=dark] .seg button.on{background:var(--blue-soft);color:var(--blue-700);border:1px solid var(--blue-line);box-shadow:none} /* ===== 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} } [data-theme=dark] .fintab-dd-pop{box-shadow:0 16px 48px rgba(0,0,0,.5)} /* 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} .pac-acoes{justify-content:space-between} @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} .finsum{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)} .finsum>div{padding:16px 20px;border-right:1px solid var(--line)} .finsum>div:last-child{border-right:none} .finsum .k{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.4px} .finsum .v{font-size:19px;font-weight:800;margin-top:3px} /* 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} .odo-face-wrap{position:relative;width:38px;height:38px;transition:.12s} .odo-face-wrap:hover{transform:scale(1.06)} .odo-face-svg{width:38px;height:38px;display:block} .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} .overlay{position:fixed;inset:0;background:rgba(15,42,67,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto;animation:fadeIn .18s ease} .overlay.show{display:flex} .overlay.show .modal{animation:fadeUp .22s ease} .modal{position:relative;background:#fff;border-radius:18px;width:100%;max-width:560px;box-shadow:0 24px 60px rgba(15,42,67,.3);animation:pop .18s ease} @keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)} .modal-head h3{font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px} .modal-head h3 svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--blue);color:#fff;flex-shrink:0;box-sizing:border-box;box-shadow:0 2px 5px rgba(31,115,224,.25)} .x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted)} .x:hover{background:#EEF2F6;color:var(--ink)} .modal-body{padding:20px 22px;max-height:76vh;overflow:auto} .modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line);flex-wrap:wrap} .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:80;box-shadow:0 10px 30px rgba(0,0,0,.25)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} [data-theme=dark] .toast{background:#243449;color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.55)} .fab-sup{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue),#000 16%));color:#fff;border:none;display:grid;place-items:center;cursor:pointer;z-index:45;box-shadow: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:0 10px 28px rgba(31,115,224,.52)} .fab-sup:active{transform:scale(.96)} body:has(.overlay.show) .fab-sup{display:none} @media(max-width:880px){ .fab-sup{width:46px;height:46px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px))} .toast{bottom:calc(78px + 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:13px 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} /* --- tab bar --- */ .tab-bar{display:flex!important} #temasBtnWrap,#tarefasBtnTop{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(13px + env(safe-area-inset-bottom,0px))} /* --- grids --- */ .stats{grid-template-columns:1fr 1fr} .two-col{grid-template-columns:1fr} .frow{grid-template-columns:1fr 1fr} .frow3{grid-template-columns:1fr 1fr} .finsum{grid-template-columns:1fr 1fr} .finsum>div:last-child{border-right:none} /* --- 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} /* --- 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} [data-ag-area="menor"] .agenda-layout{height:calc(100vh - 160px);height:calc(100dvh - 160px)} [data-ag-area="max"] .agenda-layout{height:calc(100vh - 112px);height:calc(100dvh - 112px)} .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} .gw-card-nome{font-size:13px} .gw-card-hora{font-size:11.5px} } /* --- drawer "Mais" --- */ #tabMaisDraw{padding:14px 10px 10px} #tabMaisDraw > div{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px } #tabMaisDraw button{ display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:13px 6px!important; border-radius:13px; font-size:11px!important; font-weight:700; min-height:auto!important; height:auto!important; line-height:1.2; width:100%; box-sizing:border-box } #tabMaisDraw button svg{ width:24px!important; height:24px!important; flex:none } @media(max-width:480px){ .main{padding:8px 8px 78px} .stats{grid-template-columns:1fr 1fr} .frow{grid-template-columns:1fr} .frow3{grid-template-columns:1fr} .finsum{grid-template-columns:1fr} .finsum>div{border-right:none;border-bottom:1px solid var(--line)} .stat .val{font-size:19px} .kv{grid-template-columns:1fr} .topbar h2{font-size:18px} #tabMaisDraw > div{grid-template-columns:repeat(4,1fr);gap:6px} #tabMaisDraw button{padding:11px 4px!important;font-size:10px!important} #tabMaisDraw button svg{width:22px!important;height:22px!important} /* 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-nav{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;margin-bottom:10px;color:var(--ink)} .mcal-nav button{background:none;border:1px solid var(--line);border-radius:7px;width:26px;height:26px;cursor:pointer;font-size:14px;color:var(--ink-2);display:grid;place-items:center} .mcal-nav button:hover{background:var(--blue-soft)} .mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px} .mcal-hd{text-align:center;font-size:9.5px;font-weight:700;color:var(--muted);padding:3px 0} .mcal-day{text-align:center;font-size:12px;font-weight:500;padding:5px 2px;border-radius:6px;cursor:pointer;position:relative;transition:.1s;color:var(--ink)} .mcal-day:hover{background:var(--blue-soft);color:var(--blue-700)} .mcal-day.hj{color:var(--blue-700);font-weight:800} .mcal-day.sel{background:var(--blue);color:#fff;font-weight:800} .mcal-dot{display:block;width:4px;height:4px;border-radius:50%;background:var(--green);margin:1px auto 0} .mcal-day.sel .mcal-dot{background:rgba(255,255,255,.75)} /* ---- 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)} /* Área da agenda — opções (padrão acima = aumentada, −150px) */ [data-ag-area="menor"] .agenda-layout{height:calc(100vh - 180px);height:calc(100dvh - 180px)} [data-ag-area="max"] .agenda-layout{height:calc(100vh - 128px);height:calc(100dvh - 128px)} .agenda-grade{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0} .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:linear-gradient(180deg, color-mix(in srgb,var(--blue) 8%,var(--surface)), color-mix(in srgb,var(--blue) 14%,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} /* ═══ Rótulo de data com vidro falso (Frutiger Aero) ═══ */ .ag-rotulo-aero{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:12px; white-space:nowrap; flex:none; margin:0 2px; background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--blue-soft) 60%, transparent)); border:1px solid color-mix(in srgb, var(--blue-line) 80%, transparent); box-shadow:0 2px 10px -3px color-mix(in srgb, var(--blue) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--blue-700); } .ag-rotulo-aero > svg{ color:var(--blue); opacity:.9; } .ag-rot-main{ font-size:13.5px; font-weight:800; color:var(--blue-700); letter-spacing:-.1px; } .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)} [data-theme=dark] .gw-toolbar .nav-day{background:var(--surface);color:var(--ink);border-color:var(--line)} [data-theme=dark] .gw-toolbar .nav-day:hover{background:rgba(var(--blue-rgb,74,142,194),.18);border-color:var(--blue);color:#9AD6F4} .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:2px solid var(--blue);position:sticky;top:0;background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 5%,var(--surface)),color-mix(in srgb,var(--blue) 12%,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)} .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} [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 (padrão man = centro, gap atual) ── */ [data-ag-barx="red"] .gw-toolbar{gap:4px} [data-ag-barx="red"] .gw-toolbar .gw-nav,[data-ag-barx="red"] .gw-toolbar .gw-actions{gap:4px} [data-ag-barx="aum"] .gw-toolbar{gap:16px} [data-ag-barx="aum"] .gw-toolbar .gw-nav,[data-ag-barx="aum"] .gw-toolbar .gw-actions{gap:9px} [data-ag-barx="fill"] .gw-toolbar{justify-content:space-between} [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} [data-theme=dark] .gw-linha.meia{border-top:1px dashed rgba(255,255,255,.06)} .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)} .gw-card{position:absolute;border-radius:9px;padding:5px 9px;overflow:hidden;cursor:pointer;z-index:2; border:1px solid rgba(255,255,255,.4); box-shadow:0 1px 2px rgba(19,41,75,.08),0 4px 14px rgba(19,41,75,.12),inset 0 1px 0 rgba(255,255,255,.55); transition:transform .13s cubic-bezier(.34,1.56,.64,1),box-shadow .13s} .gw-card::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.28) 0%,transparent 55%);pointer-events:none;border-radius:9px} .gw-card:hover{transform:translateY(-2px) scale(1.015);z-index:5; box-shadow:0 4px 8px rgba(19,41,75,.1),0 12px 28px rgba(19,41,75,.16),inset 0 1px 0 rgba(255,255,255,.6)} .gw-card:active{transform:translateY(0) scale(.99)} .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} /* avatar com iniciais no card da semana — tamanho configurável (data-ag-avatar) */ .gw-card-av{ width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fff; flex:none; letter-spacing:-.2px; } [data-ag-avatar="p"] .gw-card-av{ width:15px; height:15px; border-radius:4px; font-size:8px; } [data-ag-avatar="g"] .gw-card-av{ width:22px; height:22px; border-radius:6px; font-size:10.5px; } /* modo mini: card espremido = avatar central + iniciais (também escala) */ .gw-card.gw-card-mini{ padding:3px 2px!important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; } .gw-mini-av{ width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex:none; letter-spacing:-.2px; } [data-ag-avatar="p"] .gw-mini-av{ width:20px; height:20px; border-radius:6px; font-size:8.5px; } [data-ag-avatar="g"] .gw-mini-av{ width:28px; height:28px; border-radius:8px; font-size:11.5px; } .gw-mini-h{ font-size:8.5px; font-weight:700; opacity:.8; font-variant-numeric:tabular-nums; } /* indicadores do card (retorno/primeira, convênio/particular) */ .gw-ind{ width:15px; height:15px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; flex:none; } .gw-ind svg{ width:10px; height:10px; } .gw-ind-nova{ background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); } .gw-ind-ret{ background:color-mix(in srgb, var(--blue) 14%, transparent); color:var(--blue-700); } .gw-ind-conv{ background:color-mix(in srgb, var(--amber) 16%, transparent); color:var(--amber); } .gw-ind-part{ background:color-mix(in srgb, var(--ink-2) 12%, transparent); color:var(--ink-2); } [data-theme=dark] .gw-card{border-color:rgba(255,255,255,.1);box-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)} [data-theme=dark] .gw-card::before{background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,transparent 55%)} /* 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} [data-theme=dark] .gw-fechado{background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.025) 5px,rgba(255,255,255,.025) 10px)} .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:2px solid var(--blue);position:sticky;top:0;z-index:12;background:linear-gradient(180deg,#F1F7FF,#E4EFFB)} [data-theme=dark] .gwcad-head{background:linear-gradient(180deg,#18293c,#13202e)} .gwcad-corner{border-right:1px solid var(--line);width:58px;position:sticky;left:0;z-index:2;background:linear-gradient(180deg,#F1F7FF,#E4EFFB)} [data-theme=dark] .gwcad-corner{background:#18293c} .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} /* frase rodapé sidebar */ .deus-frase{text-align:center;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.3px;padding:10px 8px 2px;font-style:italic} .app.compact .deus-frase{display:none} /* ===== DARK MODE TOTAL ===== */ [data-theme=dark] body,[data-theme=dark] .main{background:var(--bg)} [data-theme=dark] .topbar{background:var(--bg);border-color:var(--line)} [data-theme=dark] .topbar h2,[data-theme=dark] .topbar p{color:var(--ink)} [data-theme=dark] .panel,[data-theme=dark] .stat,[data-theme=dark] .card{background:var(--surface);border-color:var(--line)} [data-theme=dark] .panel-head{border-color:var(--line)} [data-theme=dark] .panel-head h3,[data-theme=dark] .panel-head .hint,[data-theme=dark] .stat .lbl,[data-theme=dark] .stat .sub{color:var(--ink-2)} [data-theme=dark] .row{border-color:var(--line);background:var(--surface)} [data-theme=dark] .row:hover{background:rgba(255,255,255,.04)} [data-theme=dark] .who{color:var(--ink)} [data-theme=dark] .meta{color:var(--muted)} [data-theme=dark] .time{color:var(--blue)} [data-theme=dark] .field label{color:var(--ink-2)} [data-theme=dark] .field input,[data-theme=dark] .field select,[data-theme=dark] .field textarea{background:var(--surface);color:var(--ink);border-color:var(--blue-line)} [data-theme=dark] .field input::placeholder,[data-theme=dark] .field textarea::placeholder{color:var(--muted)} [data-theme=dark] .field input:focus,[data-theme=dark] .field select:focus,[data-theme=dark] .field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,154,255,.15)} [data-theme=dark] .field .help{color:var(--muted)} [data-theme=dark] .calc-box{background:var(--bg);border-color:var(--line);color:var(--ink-2)} [data-theme=dark] .modal,[data-theme=dark] .modal-head,[data-theme=dark] .modal-foot,[data-theme=dark] .modal-body{background:var(--surface);border-color:var(--line)} /* 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} [data-theme=dark] .overlay,[data-theme=dark] #overlay2{background:rgba(0,0,0,.75)} [data-theme=dark] .btn.ghost{background:transparent;color:var(--blue-700);border-color:var(--blue-line)} [data-theme=dark] .btn.ghost:hover{background:var(--blue-soft)} [data-theme=dark] .btn.danger{background:#3a1212;color:#f08080;border-color:#5a2020} [data-theme=dark] .seg{background:var(--bg);border-color:var(--line)} [data-theme=dark] .seg button{color:var(--muted)} [data-theme=dark] .seg button.on{background:var(--surface);color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.3)} [data-theme=dark] .toolbar{background:var(--bg)} [data-theme=dark] .search{background:transparent} [data-theme=dark] .search input{background:var(--surface);color:var(--ink)} [data-theme=dark] .kv .k{color:var(--muted)} [data-theme=dark] .kv .v{color:var(--ink)} [data-theme=dark] .slot{border-color:var(--line)} [data-theme=dark] .slot.empty,[data-theme=dark] .slot.filled{background:var(--surface)} [data-theme=dark] .slot-time{color:var(--blue)} [data-theme=dark] .slot-free{color:var(--muted)} [data-theme=dark] .mchip{background:var(--surface);border-color:var(--line)} [data-theme=dark] .mchip.pago{background:#0d2e24} [data-theme=dark] .mchip.vencido{background:#2d1212} [data-theme=dark] .agenda-layout{background:var(--surface);border-color:var(--line)} [data-theme=dark] .gw-head{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 20%,var(--bg)),color-mix(in srgb,var(--blue) 9%,var(--bg)));border-color:var(--blue)} [data-theme=dark] .gw-dh{border-color:var(--line)} [data-theme=dark] .gw-dh:hover,[data-theme=dark] .gw-dh.sel,[data-theme=dark] .gw-dh.today{background:rgba(var(--blue-rgb),.28)} [data-theme=dark] .gw-dn{color:var(--ink)} [data-theme=dark] .gw-dw{color:var(--blue-700)} [data-theme=dark] .gw-col{border-color:var(--line)} [data-theme=dark] .gw-toolbar{border-color:var(--line)} [data-theme=dark] .gw-toolbar input[type=date]{background:var(--surface);color:var(--ink);border-color:var(--blue-line);color-scheme:dark} html{color-scheme:light} [data-theme=dark]{color-scheme:dark} /* ===== 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} [data-theme=dark] .dp-pop{box-shadow:0 16px 50px rgba(0,0,0,.55)} .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-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} [data-theme=dark] .dpf-btn{background:var(--surface)} .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} [data-theme=dark] .tel-ddi{background:#10243A;border-color:#2A3F57;color:#8FB8EC} [data-theme=dark] .gw-mes-hd,[data-theme=dark] .gw-mes-dia{border-color:var(--line)} [data-theme=dark] .gw-mes-dia:hover{background:var(--blue-soft)} [data-theme=dark] .gw-mes-num{color:var(--ink)} [data-theme=dark] .gw-mes-mais{color:var(--muted)} [data-theme=dark] #f_catBtn,[data-theme=dark] #f_catDrop,[data-theme=dark] #tipoDrop,[data-theme=dark] #tipoDropBtn,[data-theme=dark] #c_pacdrop{background:var(--surface);color:var(--ink);border-color:var(--line)} [data-theme=dark] .detail-head{background:var(--surface);border-color:var(--line)} [data-theme=dark] select option{background:var(--surface);color:var(--ink)} [data-theme=dark] .side-foot .who{color:rgba(255,255,255,.6)} [data-theme=dark] #tabMaisDraw{background:var(--surface);border-color:var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.4)} [data-theme=dark] .two-col .panel{background:var(--surface)} [data-theme=dark] .gw-mes-grid{border-color:var(--line)} .tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;height:auto;padding-top:3px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);z-index:40;box-shadow:0 -2px 12px rgba(19,41,75,.08)} [data-theme=dark] .tab-bar{background:var(--surface);border-color:var(--line)} .tab-bar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;color:var(--muted);padding:8px 2px 6px;transition:.15s;min-width:0;overflow:hidden} .tab-bar button svg{width:22px;height:22px;flex:none} .tab-bar button.active{color:var(--blue)} .tab-bar button .tbb{display:block;position:relative} .tab-bar button .tbb .nbadge{position:absolute;top:-4px;right:-8px;font-size:9px;min-width:15px;height:15px;padding:0 3px} /* 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} [data-theme=dark] .odo-legend{color:var(--muted)} [data-theme=dark] .chip{background:var(--surface)!important;color:var(--ink-2)!important} [data-theme=dark] .seg{background:var(--bg);border-color:var(--line)} [data-theme=dark] .seg button{color:var(--muted)} [data-theme=dark] .seg button.on{background:var(--surface);color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.3)} [data-theme=dark] .datebar .nav-day{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink-2)!important} [data-theme=dark] .dente{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink-2)!important} [data-theme=dark] .mchip{background:var(--surface)!important;border-color:var(--line)!important} [data-theme=dark] #f_catBtn{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important} [data-theme=dark] #f_catDrop{background:var(--surface)!important;border-color:var(--line)!important} [data-theme=dark] #f_catDrop ._copt{color:var(--ink)} [data-theme=dark] #tipoDrop{background:var(--surface)!important;border-color:var(--line)!important} [data-theme=dark] #tipoDropBtn{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important} [data-theme=dark] #c_pacdrop{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important} [data-theme=dark] #f_indidrop{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important} [data-theme=dark] #f_indidrop ._indidrop:hover{background:var(--blue-soft)} [data-theme=dark] #c_pacdrop div:hover{background:var(--blue-soft)} [data-theme=dark] .gw-mes-grid{background:var(--surface)} [data-theme=dark] .gw-toolbar .seg button{background:transparent} [data-theme=dark] .detail-head{background:var(--surface)!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} [data-theme=dark]{--sh1:0 1px 3px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.32);--sh2:0 4px 16px rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.38);--sh3:0 14px 44px rgba(0,0,0,.62),0 4px 12px rgba(0,0,0,.45)} .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)} input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{border-radius:var(--radius)!important;border:1.5px solid var(--line)!important;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(31,115,224,.13)!important} .btn{border-radius:var(--radius)!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{} #modalOverlay .modal-box{border-radius:var(--radius-xl)!important;box-shadow:var(--sh3);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}} .tab-bar{background:var(--surface)!important;box-shadow:0 -1px 0 var(--line),0 -4px 24px rgba(19,41,75,.06)!important} .tab-bar button{border-radius:var(--radius);transition:all var(--dur) var(--ease);font-size:10.5px} .tab-bar button:active{transform:scale(.92)} #tabMaisDraw{background:var(--surface)!important;border-radius:var(--radius-xl) var(--radius-xl) 0 0!important;box-shadow:0 -4px 32px rgba(19,41,75,.14)!important;border-top:1px solid rgba(255,255,255,.8)!important;animation:slideUpFluent .22s var(--ease)} @keyframes slideUpFluent{from{transform:translateY(100%)}to{transform:none}} #tabMaisDraw button{border-radius:var(--radius-lg)!important;transition:all var(--dur) var(--ease)!important} #tabMaisDraw button:active{transform:scale(.93)!important} .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)} #agendaDialItems,#estoqueDialItems{position:fixed;z-index:9500;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh3);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:var(--blue-soft);color:var(--blue)} .agenda-dial-item+.agenda-dial-item{border-top:1px solid var(--line)} [data-theme=dark] .stat{background:var(--surface);border-color:var(--line)} [data-theme=dark] .tab-bar{background:var(--surface)!important} [data-theme=dark] #tabMaisDraw{background:var(--surface)!important;border-top:1px solid rgba(255,255,255,.08)!important} [data-theme=dark] #modalOverlay.show{background:rgba(4,10,22,.72)} [data-theme=dark] #modalOverlay .modal-box{background:var(--surface);border-color:rgba(255,255,255,.07)} [data-theme=dark] .agenda-dial-item:hover{background:rgba(var(--blue-rgb,74,142,194),.14);color:var(--blue)} /* 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; } [data-theme=dark] #agendaDialItems,#estoqueDialItems{background:var(--surface);border-color:rgba(255,255,255,.07)} [data-theme=dark] .btn.ghost:hover{background:rgba(var(--blue-rgb,74,142,194),.14)} /* ═══ fim Fluent ════════════════════════════════════════════ */ /* Sidebar minimalista */ .side-foot{padding:8px 10px 10px} .side-foot .backup-btns{gap:5px} .side-foot .backup-btns button{font-size:11.5px;padding:7px 8px;border-radius:9px} #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 #statusBar{opacity:0;height:0;overflow:hidden;margin:0;padding:0;pointer-events:none} .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 .backup-btns .btn-lbl{display:none} .app.compact .deus-frase{display:none} .app.compact .collapse-btn svg{transform:rotate(180deg)} /* Sidebar compacta: centralizar ícones */ .app.compact .side{width:68px} .app.compact .backup-btns button{justify-content:center;padding:9px} /* 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:drop-shadow(0 0 4px rgba(var(--side-acc-rgb,31,115,224),.6))} .nav button svg{transition:filter .16s,opacity .16s} .nav button:hover svg{opacity:1;filter:drop-shadow(0 0 3px rgba(255,255,255,.4))} /* Brand — shine effect */ .brand{ background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(var(--side-acc-rgb,31,115,224),.08) 100%); border-radius:12px; padding:10px 10px 12px !important; border:1px solid rgba(255,255,255,.08); margin-bottom:14px; } .brand h1{ background:linear-gradient(135deg,#fff 30%,#93C5FD 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:16px !important; } /* Side-cal — glass card */ .side-cal{ background:rgba(0,0,0,.20) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 4px 20px rgba(0,0,0,.15) !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} [data-theme=dark] .wa-sdial-item:hover{background:rgba(37,211,102,.15)} /* ── Busca universal (command palette) ── */ #buscaOverlay{display:none} .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:var(--blue-soft)} .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} [data-theme=dark] .busca-item.sel{background:rgba(var(--blue-rgb,74,142,194),.14)} [data-theme=dark] .busca-ic{background:rgba(var(--blue-rgb,74,142,194),.14)} /* ---- (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 .tab-bar, body.pre-login #tabBar, 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 usrFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-30px) scale(1.05)}66%{transform:translate(-15px,20px) scale(.96)}} @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)}} .usrBlob{position:absolute;border-radius:50%} .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} /* empurra o conteúdo central para baixo do header absoluto (logo + relógio) */ #usrMain{justify-content:flex-start!important;padding-top:120px!important;height:100%!important;overflow-y:auto!important} #usrAcctBox{margin-top:8px!important;gap:5px!important} #usrAcctBox span{max-width:46vw!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