/* =========================================================== Painel Sabrina · V3 · direção Apple Liquid Glass (aprovada pelo Cristian em 23/09/2026) Camada POR CIMA do v2.css (carregada depois dele no layout). Não apaga nada do v2: remover a linha que carrega este arquivo devolve o visual anterior inteiro. - Tema escuro é o padrão; o claro continua no botão da topbar. - Paleta monocromática de sempre (tinta 43373B, que no escuro inverte para o creme EDE5E7). - Fonte Inter hospedada no próprio domínio. - Vidro: superfícies translúcidas sobre luz difusa feita só com tons da paleta. Blur de fundo (backdrop-filter) só onde há conteúdo passando por baixo: menu lateral, barras fixas, janelas, menus suspensos. Card é só translúcido (o fundo já é desfocado), o que mantém o custo baixo. - Referência visual: protótipos em ~/painel-ux-2026/apple (docs/DESIGN_V3.md). ATENÇÃO: não escrever nomes de tag HTML literais nestes comentários (ver aviso no topo do v2.css). =========================================================== */ @font-face { font-family: "Inter"; src: url("/assets/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ---------- tokens · claro ---------- */ :root:not([data-theme="dark"]) { --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --v3-base: #E9E3E6; --v3-blob1: #CDBFC5; --v3-blob2: #F7F2EF; --v3-blob3: #B8A7AE; --glass: rgba(255,255,255,.62); --glass-strong: rgba(250,248,249,.86); --glass-2: rgba(255,255,255,.46); --glass-3: rgba(255,255,255,.78); --glass-line: rgba(255,255,255,.85); --glass-hi: rgba(255,255,255,.95); --hair: rgba(36,28,31,.09); --elev: 0 18px 40px -26px rgba(36,28,31,.45), 0 2px 6px -2px rgba(36,28,31,.08); --blur: blur(28px) saturate(170%); --bg: var(--v3-base); --bg2: var(--glass); --bg3: rgba(36,28,31,.05); --bg4: rgba(36,28,31,.10); --line: rgba(36,28,31,.10); --line2: rgba(36,28,31,.20); --text: #221A1D; --text2: #55474C; --text3: #62535A; --gold: #43373B; --gold2: #241C1F; --gold-soft: rgba(67,55,59,.10); --gold-on: #FFFFFF; --on-solid: #FFFFFF; --green: #285E46; --amber: #6E4A1A; --red: #8E3428; --blue: #2E5663; --success-soft: rgba(56,118,90,.14); --warn-soft: rgba(138,95,38,.14); --danger-soft: rgba(168,62,49,.13); --info-soft: rgba(61,106,126,.14); --sb-bg: transparent; --sb-text: var(--text); --sb-dim: var(--text2); --sb-active-bg: var(--glass-3); --sb-rule: transparent; --ag-rule: rgba(36,28,31,.10); --ag-rule-half: rgba(36,28,31,.05); --ag-off: rgba(36,28,31,.03); --ag-off2: rgba(36,28,31,.05); --ag-proc-bg: rgba(56,118,90,.16); --ag-proc-tt: #23513D; --ag-cons-bg: rgba(61,106,126,.16); --ag-cons-tt: #244A58; --ag-ext-bg: rgba(138,95,38,.14); --ag-block-bg: rgba(36,28,31,.10); --ag-pausa-bg: rgba(36,28,31,.05); --success: var(--green); --danger: var(--red); --warn: var(--amber); --info: var(--blue); --ok: var(--green); --err: var(--red); --accent: var(--gold); --accent2: var(--gold2); --accent-soft: var(--gold-soft); --wine: var(--gold); --border: var(--line); --card: var(--bg2); --surface2: var(--bg3); --shadow: var(--elev); --shadow-sm: 0 1px 2px rgba(36,28,31,.06); color-scheme: light; } /* ---------- tokens · escuro (padrão) ---------- */ :root[data-theme="dark"] { --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --v3-base: #0D0A0B; --v3-blob1: #4A3840; --v3-blob2: #261D21; --v3-blob3: #5B4650; --glass: rgba(38,29,33,.58); --glass-strong: rgba(30,23,26,.88); --glass-2: rgba(255,255,255,.055); --glass-3: rgba(255,255,255,.10); --glass-line: rgba(255,255,255,.11); --glass-hi: rgba(255,255,255,.08); --hair: rgba(255,255,255,.08); --elev: 0 28px 56px -30px rgba(0,0,0,.95), 0 2px 8px -2px rgba(0,0,0,.45); --blur: blur(28px) saturate(170%); --bg: var(--v3-base); --bg2: var(--glass); --bg3: rgba(255,255,255,.06); --bg4: rgba(255,255,255,.12); --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.18); --text: #F4EEED; --text2: #CBBEC1; --text3: #A5969B; --gold: #EDE5E7; --gold2: #FFFFFF; --gold-soft: rgba(237,229,231,.10); --gold-on: #1E1719; --on-solid: #1E1719; --green: #78C79D; --amber: #E8B574; --red: #EA9A87; --blue: #86C0D8; --success-soft: rgba(120,199,157,.14); --warn-soft: rgba(226,172,102,.14); --danger-soft: rgba(234,154,135,.15); --info-soft: rgba(134,192,216,.14); --sb-bg: transparent; --sb-text: var(--text); --sb-dim: var(--text2); --sb-active-bg: var(--glass-3); --sb-rule: transparent; --ag-rule: rgba(255,255,255,.08); --ag-rule-half: rgba(255,255,255,.04); --ag-off: rgba(255,255,255,.02); --ag-off2: rgba(255,255,255,.035); --ag-proc-bg: rgba(120,199,157,.15); --ag-proc-tt: #B5E3C9; --ag-cons-bg: rgba(134,192,216,.15); --ag-cons-tt: #BFDCEA; --ag-ext-bg: rgba(226,172,102,.14); --ag-block-bg: rgba(255,255,255,.08); --ag-pausa-bg: rgba(255,255,255,.04); --success: var(--green); --danger: var(--red); --warn: var(--amber); --info: var(--blue); --ok: var(--green); --err: var(--red); --accent: var(--gold); --accent2: var(--gold2); --accent-soft: var(--gold-soft); --wine: var(--gold); --border: var(--line); --card: var(--bg2); --surface2: var(--bg3); --shadow: var(--elev); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } /* ---------- base ---------- */ html { background: var(--v3-base); } html, body { font-feature-settings: "calt", "liga", "cv11", "ss01"; } body { background: transparent; } .v3-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--v3-base); } .v3-bg span { position: absolute; border-radius: 50%; filter: blur(80px); } .v3-bg span:nth-child(1) { width: 700px; height: 700px; left: -180px; top: -220px; background: var(--v3-blob1); opacity: .85; } .v3-bg span:nth-child(2) { width: 580px; height: 580px; right: -160px; top: 40px; background: var(--v3-blob2); opacity: .9; } .v3-bg span:nth-child(3) { width: 860px; height: 580px; left: 28%; bottom: -280px; background: var(--v3-blob3); opacity: .55; } .kpi .val, .pf-stat-val, .fin-big, .num, .money, .kb-v, .kb-n, td.r, .day-row-ini { font-variant-numeric: tabular-nums; } /* foco visível · WCAG 2.4.7 · vence os outline:none antigos */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 0; } /* ---------- shell: menu lateral flutuante de vidro, topbar leve ---------- */ .app:not(.auth) { grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; } .app.sb-collapsed:not(.auth) { grid-template-columns: 76px minmax(0, 1fr); } html.sb-init-collapsed .app:not(.auth), html.sb-init-collapsed .app:not(.auth).no-cp { grid-template-columns: 76px minmax(0, 1fr); } .app:not(.auth) > .topbar { grid-column: 2; grid-row: 1; } .app:not(.auth) > .sb { grid-column: 1; grid-row: 1 / span 2; } .app:not(.auth) > .main { grid-column: 2; grid-row: 2; } .topbar { background: transparent; border-bottom: 0; padding: 12px 28px 4px 20px; gap: 10px; } .topbar .logo { display: none; } .sb { margin: 12px 0 12px 12px; border-radius: 26px; padding: 14px 10px; border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; } .sb::-webkit-scrollbar { display: none; } .sb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; margin-right: 30px; min-height: 44px; } .sb-brand .mark { width: 34px; height: 34px; border-radius: 11px; background: var(--gold); color: var(--gold-on); display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.03em; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .sb-brand b { display: block; font-size: 14px; line-height: 1.2; color: var(--text); white-space: nowrap; } .sb-brand small { display: block; font-size: 12px; color: var(--text3); white-space: nowrap; } .sb-collapsed .sb-brand { margin: 0; padding: 4px 0 10px; justify-content: center; } .sb-collapsed .sb-brand span { display: none; } .sb-toggle { top: 18px; right: 12px; color: var(--text3); border-radius: 10px; } .sb-toggle:hover { background: var(--glass-2); color: var(--text); } .persona-card { order: 99; margin: auto 2px 0; padding: 12px 10px 4px; background: transparent; border-top: 1px solid var(--hair); border-radius: 0; color: var(--text); } .persona-card .nm { font-size: 13px; } .persona-card .role { color: var(--text3); } .sb-section { color: var(--text3); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; margin: 12px 4px 4px; } .sb-item { border-left: 0; border-radius: 14px; min-height: 38px; padding: 8px 12px; color: var(--text2); font-weight: 500; } .sb-item:hover { background: var(--glass-2); color: var(--text); } .sb-item.active, .sb-collapsed .sb-hub.has-active .sb-hub-h { background: var(--glass-3); color: var(--text); font-weight: 650; border-left: 0; box-shadow: inset 0 1px 0 var(--glass-hi); } .sb-sub-item, .sb-sub-item.active { padding-left: 42px; } .sb-item .ct { background: var(--glass-3); color: var(--text2); font-weight: 700; } .sb-item .ct.ct-warn, .sb-item.active .ct.ct-warn { background: var(--red); color: var(--on-solid); } .sb-item.active .ct { background: var(--glass-3); color: var(--text); } .sb-collapsed .sb-section { border-top-color: var(--hair); } .sb-collapsed .sb-item::after { background: var(--glass-strong); color: var(--text); border: 1px solid var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } .sb-collapsed .sb-item .ct-dot { background: var(--red); } .cmdk { height: 40px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text3); box-shadow: inset 0 1px 0 var(--glass-hi); max-width: 520px; } .cmdk kbd { background: transparent; border: 1px solid var(--glass-line); border-radius: 6px; color: var(--text3); } .ws { background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 999px; padding: 3px; } .ws button { border-radius: 999px; color: var(--text2); font-weight: 600; } .ws button.on { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi); } .tb-icon, .tb-user { border-radius: 999px; } .tb-icon:hover, .tb-user:hover { background: var(--glass-2); } .avatar { background: linear-gradient(145deg, #7A686E, #43373B); color: #F4EEED; } .bell-badge { background: var(--red); color: var(--on-solid); } .main { --main-px: 28px; --main-py: 16px; } .hub-tabs { background: transparent; border-bottom: 0; gap: 4px; padding: 6px var(--main-px); margin-bottom: 14px; } .hub-tab { margin: 0; padding: 0 14px; height: 34px; border-radius: 999px; border-bottom: 0; color: var(--text2); font-weight: 600; } .hub-tab:hover { background: var(--glass-2); color: var(--text); } .hub-tab.on { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi); border: 1px solid var(--glass-line); } .hub-tab .ct { background: var(--glass-3); } .hub-tab.on .ct { background: var(--gold); color: var(--gold-on); } .hub-tab .ct.ct-warn { background: var(--danger-soft); color: var(--danger); } .hub-tabs { position: sticky; top: calc(-1 * var(--main-py)); background: color-mix(in srgb, var(--v3-base) 55%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } /* top negativo = o mesmo valor da margem que puxa a barra pro topo do .main: a caixa desenhada coincide com a do fluxo e nada fica coberto */ .main.has-hub-tabs { scroll-padding-top: 60px; } .main:has(#pf-sticky-wrap.on) { scroll-padding-top: 124px; } .crumb { color: var(--text3); } /* ---------- títulos ---------- */ .h1, .head-row h1 { font-size: 30px; font-weight: 750; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; } .head-row .sub { color: var(--text3); } .pill { background: var(--glass-3); color: var(--text2); border-radius: 999px; font-weight: 600; } /* ---------- superfícies ---------- */ .card, .kpi, .widget, .pf-head, .pf-tabs-wrap, .pf-body, .al-table, .tbl-wrap, .alert-row, .end-note, .appt, .reat-card, .agp-row, .lanc-card, .dre-card, .cen-card { background: var(--glass); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); } .card, .kpi, .widget { border-radius: 20px; } .pf-card { background: var(--glass-2); border-color: var(--glass-line); border-radius: 18px; } .pf-card-ai { background: linear-gradient(135deg, var(--gold-soft), var(--glass-2)); } .card-h h3, .pf-card-h h3 { font-weight: 700; letter-spacing: -.01em; } .card-h h3 .icon, .pf-card-h h3 .icon { color: var(--text2); } .kpi .lbl, .pf-stat-lbl, .w-lbl, .pf-side h4 { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text3); } .kpi .val { font-size: 26px; font-weight: 750; letter-spacing: -.03em; } a.kpi:hover { transform: none; border-color: var(--line2); } a.kpi.kpi-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), var(--elev); } .kpi .bar { background: var(--bg4); } /* ---------- controles ---------- */ .btn { border-radius: 999px; height: 36px; padding: 0 15px; font-weight: 600; background: var(--glass-2); border-color: var(--glass-line); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi); } .btn:hover { background: var(--glass-3); } .btn.primary { background: var(--gold); color: var(--gold-on); border-color: transparent; box-shadow: 0 10px 24px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3); } .btn.primary:hover { background: var(--gold2); border-color: transparent; } .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text2); } .btn.sm { height: 30px; padding: 0 11px; } .btn.lg { height: 44px; padding: 0 20px; } .btn.danger { background: var(--red); color: var(--on-solid); border-color: transparent; } .tag { border-radius: 999px; } .chip, .seg { border-radius: 999px; } .seg-btn.on, .seg .on { background: var(--glass-3); color: var(--text); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea { accent-color: var(--gold); } input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); } .lanc-input, .pf-fld input, .pf-fld select, .pf-fld textarea, dialog.m-dialog .m-row input, dialog.m-dialog .m-row select, dialog.m-dialog .m-row textarea, .modal .field input, .modal .field select, .modal .field textarea, .cmdk-modal .field input, .cmdk-modal .field select, .cmdk-modal .field textarea, .auth-field input, .kb-busca, .pl-fm-select { background: var(--glass-2); border-color: var(--glass-line); color: var(--text); border-radius: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; } .modal .field input:focus, .modal .field select:focus, .modal .field textarea:focus, .cmdk-modal .field input:focus, .cmdk-modal .field select:focus, .cmdk-modal .field textarea:focus, dialog.m-dialog .m-row input:focus, dialog.m-dialog .m-row select:focus, dialog.m-dialog .m-row textarea:focus, .lanc-input:focus, .auth-field input:focus { background: var(--glass-3); border-color: var(--gold); box-shadow: none; } dialog.m-dialog .m-row label, .pl-fm-label { text-transform: none; letter-spacing: 0; } /* ---------- tabelas ---------- */ .tbl th, .al-table thead th, .al-table th { background: transparent; color: var(--text3); text-transform: none; letter-spacing: 0; font-weight: 600; border-bottom-color: var(--hair); } .tbl td, .al-table td { border-bottom-color: var(--hair); } .tbl tbody tr:hover, .al-table tbody tr:hover, [data-row-href]:hover { background: var(--glass-2); } .al-table { border-radius: 18px; overflow: hidden; } /* ---------- janelas, menus, busca ⌘K, toasts: vidro com blur ---------- */ dialog.m-dialog, .modal-panel, .cmdk-modal, .bell-menu, .user-menu, .pl-filter-menu, .kb-mover-sheet { background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--text); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 80px -30px rgba(0,0,0,.85); } dialog.m-dialog, .modal-panel, .cmdk-modal { border-radius: 24px; } .bell-menu, .user-menu, .pl-filter-menu { border-radius: 18px; } dialog.m-dialog::backdrop, .modal-overlay, .cmdk-back, .kb-mover-overlay { background: rgba(0,0,0,.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-panel::before, .modal-panel::after, .cmdk-modal::before { display: none; } dialog.m-dialog .m-h, dialog.m-dialog .m-foot, .modal-actions { border-color: var(--hair); } dialog.m-dialog .m-h h3 { font-weight: 700; letter-spacing: -.01em; } dialog.m-dialog .m-x:hover { background: var(--glass-2); } .modal-actions { justify-content: flex-end; } .bell-item:hover, .user-menu a:hover, .cmdk-item.on, .cmdk-item:hover { background: var(--glass-3); } .user-menu .user-menu-sair:hover { background: var(--danger-soft); } .bell-item.sev-critico .bell-sev { background: var(--danger-soft); color: var(--danger); } .bell-item.sev-alta .bell-sev, .bell-item.sev-warn .bell-sev { background: var(--warn-soft); color: var(--warn); } .cmdk-foot, .cmdk-input-wrap { border-color: var(--hair); } .cmdk-input-wrap input { color: var(--text); } .toast { border-radius: 16px; background: var(--glass-strong); color: var(--text); border: 1px solid var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--elev); font-weight: 600; } .toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; } .toast-success::before, .toast-ok::before { content: ""; background: var(--green); } .toast-error::before, .toast-err::before { content: ""; background: var(--red); } .toast-warn::before { content: ""; background: var(--amber); } .toast-success, .toast-error, .toast-info, .toast-ok, .toast-err, .toast-warn { background: var(--glass-strong); color: var(--text); } .flash-msg { border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--text); } .flash-msg.flash-ok { border-left: 3px solid var(--green); color: var(--text); } .flash-msg.flash-err { border-left: 3px solid var(--red); color: var(--text); } .topbar-loading { background: var(--gold); } /* ---------- homes: o topo decorativo vira cabeçalho sóbrio (a aurora clara quebrava no escuro) ---------- */ .hero { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); min-height: 0; margin: 0 0 20px; border-radius: 24px; } .hero-aurora, .hero-waves, .hero-particles, .hello-spark { display: none !important; } .hero-content { padding: 22px 26px; color: var(--text); } .hero-content .hello-date { color: var(--text3); text-transform: none; letter-spacing: 0; font-weight: 600; } .hero-content .hello-h { font-size: 34px; font-weight: 750; letter-spacing: -.035em; text-shadow: none; color: var(--text); margin: 0 0 8px; } .hero-content .hello-msg { color: var(--text2); text-shadow: none; font-weight: 400; font-size: 15px; } .hero-content .hello-msg b { color: var(--text); } .mission-badge, .weather { background: var(--glass-2); border-color: var(--glass-line); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text2); } .widget:hover { transform: none; } .widget p { font-weight: 400; } .widget-quote, .widget-quote.widget-devocional, .widget-aniver, .widget-pulse { background: var(--glass); border-color: var(--glass-line); } .widget-aniver .ani-row, .agp-row { background: var(--glass-2); border-color: var(--glass-line); } .widget-aniver .ani-row:hover { background: var(--glass-3); } .end-note { font-weight: 400; } .appt .story { font-weight: 400; } /* ---------- ficha do paciente / lead ---------- */ .pf-head { background: var(--glass); border-radius: 24px; } .pf-name { font-size: 30px; font-weight: 750; letter-spacing: -.035em; } .pf-tabs-wrap { background: transparent; border: 0; box-shadow: none; margin: 14px 0; } .pf-tabs { border-bottom: 0; gap: 4px; padding: 0; } .pf-tab { height: 36px; padding: 0 14px; border-radius: 999px; border-bottom: 0; font-weight: 600; } .pf-tab:hover { background: var(--glass-2); } .pf-tab.active { background: var(--glass-3); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); } .pf-body { border-radius: 24px; border-top: 1px solid var(--glass-line); } .pf-side { border-right-color: var(--hair); } .pf-stats { border-top-color: var(--hair); } .pf-stat-val.ok { color: var(--green); } .pf-alert { background: var(--danger-soft); border-left-color: var(--danger); border-radius: 14px; } /* ---------- pipeline ---------- */ .kb-col { background: var(--glass-2); border-color: var(--glass-line); border-radius: 22px; } .kb-col.drag-over { background: var(--gold-soft); border-color: var(--gold); } .kb-col-h { background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 22px 22px 0 0; } .kb-card { background: var(--glass); border-color: var(--glass-line); border-radius: 16px; box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 20px -16px rgba(0,0,0,.8); } .kb-card:hover { border-color: var(--line2); box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 30px -18px rgba(0,0,0,.9); } /* ---------- atendimento ao vivo e cores fixas antigas ---------- */ .atend-card.is-andamento, .atend-cronometro, .atend-prot-step.is-atual { background: var(--warn-soft); } .atend-prot-step.is-concluida { background: var(--success-soft); border-color: transparent; color: var(--text); } .atend-alerta-critico { background: var(--danger-soft); border-color: transparent; } .atend-alerta-atencao { background: var(--warn-soft); border-color: transparent; } .ins-tag-principal, .est-pr-tag-principal { background: var(--info-soft); color: var(--info); } .termo-aceito { background: var(--success-soft); border-color: transparent; } .termo-expirado { background: var(--danger-soft); border-color: transparent; } .sku-bloco-warn { background: var(--danger-soft); } .nf-alerta { background: var(--warn-soft); border-color: transparent; } .nf-alerta b { color: var(--warn); } .ia-h-at { background: var(--glass-2); } .copilot-tldr, .copilot-insight { background: var(--glass-2); } .copilot-insight-acao { color: var(--info); } .ev-svc-picker, .ev-svc-chip, .ag-ev-svc { background: var(--glass-2); border-color: var(--glass-line); } .win-name { color: var(--gold); } .pf-stat[style] { border-color: var(--glass-line) !important; } /* ---------- barra de abas no celular (dock) ---------- */ .v3-dock { display: none; } @media (max-width: 960px) { .app:not(.auth), .app.no-cp:not(.auth), .app.sb-collapsed:not(.auth) { grid-template-columns: minmax(0, 1fr) !important; } .app:not(.auth) > .topbar, .app:not(.auth) > .main { grid-column: 1; } .topbar { padding: 8px 12px; background: color-mix(in srgb, var(--v3-base) 55%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } .topbar .logo { display: flex; } .sb { margin: 0; border-radius: 0 26px 26px 0; background: var(--glass-strong); height: 100dvh; } .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .h1, .head-row h1 { font-size: 26px; } .hero-content .hello-h { font-size: 28px; } .v3-dock { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55; padding: 6px; border-radius: 28px; background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); } .v3-dock a, .v3-dock button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 22px; font-size: 11px; font-weight: 600; color: var(--text3); position: relative; text-decoration: none; -webkit-tap-highlight-color: transparent; } .v3-dock [aria-current="page"] { color: var(--text); background: var(--glass-3); box-shadow: inset 0 1px 0 var(--glass-hi); } .v3-dock .icon { width: 22px; height: 22px; } .v3-dock .b { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: var(--on-solid); font-size: 10px; font-weight: 700; display: grid; place-items: center; } .toast-stack { bottom: calc(92px + env(safe-area-inset-bottom)); } html { scroll-padding-bottom: 104px; } } @media (pointer: coarse) { .btn { position: relative; } .btn::after { content: ""; position: absolute; inset: -4px; } .btn.sm::after { inset: -7px; } .hub-tab, .pf-tab { min-height: 44px; } } @media (prefers-reduced-transparency: reduce) { .sb, dialog.m-dialog, .modal-panel, .cmdk-modal, .bell-menu, .user-menu, .toast, .v3-dock, .hub-tabs, .kb-col-h { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-strong); } } /* ---------- ajustes da 1ª rodada de verificação (23/09) ---------- */ .sb-brand b, .sb-brand small { overflow: hidden; text-overflow: ellipsis; max-width: 170px; } .cmdk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cmdk { min-width: 220px; } .logo-v3 { display: none; width: 32px; height: 32px; border-radius: 10px; background: var(--gold); color: var(--gold-on); place-items: center; font-weight: 800; font-size: 12px; letter-spacing: -.03em; } :root[data-theme="dark"] .topbar .logo-img { display: none; } :root[data-theme="dark"] .topbar .logo-v3 { display: grid; } .topbar .logo { border-right: 0; padding-right: 0; } /* faixa de abas do WhatsApp: mesmo vidro das abas do hub (o CSS dela vem da própria página, por isso .main na frente) */ .main .wa-ws-tabs { background: color-mix(in srgb, var(--v3-base) 55%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 0; gap: 4px; padding-top: 6px; padding-bottom: 6px; } .main .wa-ws-tab { margin: 0; padding: 0 14px; height: 34px; border-radius: 999px; border-bottom: 0; color: var(--text2); font-weight: 600; } .main .wa-ws-tab:hover { background: var(--glass-2); color: var(--text); } .main .wa-ws-tab.on { background: var(--glass-3); color: var(--text); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); } /* BUG antigo: os indicadores em 4 ou 3 colunas não se reorganizavam no celular (a consulta de contêiner mirava o próprio .grid) */ @media (max-width: 760px) { .grid.g4, .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .grid.g4, .grid.g3, .grid.g2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 960px) { #btn-novo-evento { bottom: calc(92px + env(safe-area-inset-bottom)) !important; } .hub-tabs, .main .wa-ws-tabs { padding-left: 12px; padding-right: 12px; } } /* ---------- pipeline · botão Mover e ações do card ---------- */ .kb-q-btn { background: var(--glass-strong); border-color: var(--glass-line); border-radius: 999px; color: var(--text2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } .kb-q-btn:hover { background: var(--glass-3); border-color: var(--line2); color: var(--text); } .kb-q-mover { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--text); } .kb-card:focus-within .kb-quick { opacity: 1; transform: none; pointer-events: auto; } @media (pointer: coarse) { .kb-quick { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 10px; gap: 6px; } .kb-q-btn { width: 44px; height: 40px; position: relative; } .kb-q-btn::after { content: ""; position: absolute; inset: -2px; } .kb-q-mover { flex: 1; font-size: 13px; } } /* a janela de mover nasceu como folha de baixo (celular); no desktop fica centralizada */ .kb-mover-sheet { border-radius: 24px 24px 0 0; } .kb-mover-opt { border-color: var(--glass-line); border-radius: 14px; background: var(--glass-2); min-height: 44px; } .kb-mover-opt:hover, .kb-mover-opt:active { background: var(--glass-3); } @media (min-width: 961px) { .kb-mover-sheet { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: min(440px, 92vw); height: fit-content; border-radius: 24px; padding: 18px; } } /* ---------- paciente · faixa clínica fixa (aparece quando o cabeçalho sai da tela) ---------- */ .pf-sticky-wrap { position: sticky; top: 6px; height: 0; z-index: 12; } .main.has-hub-tabs .pf-sticky-wrap { top: 56px; } .pf-sticky { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; } .pf-sticky-wrap.on .pf-sticky { opacity: 1; transform: none; pointer-events: auto; } .pf-sx-who { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; } .pf-sx-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); } .pf-sx-facts { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .pf-sx { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--glass-2); font-size: 12px; color: var(--text2); white-space: nowrap; text-decoration: none; } .pf-sx b { color: var(--text); font-weight: 650; } .pf-sx .icon { width: 14px; height: 14px; } .pf-sx.bad, .pf-sx.bad b { background: var(--danger-soft); color: var(--danger); } .pf-sx.warn b { color: var(--warn); } .pf-sx-acts { display: flex; gap: 6px; flex-shrink: 0; } .tag.red { background: var(--danger-soft); color: var(--danger); } @media (max-width: 960px) { .pf-sx-acts { display: none; } .pf-sticky { gap: 8px; } } @media (prefers-reduced-motion: reduce) { .pf-sticky { transition: none; } } /* ---------- tema escuro: cores fixas escritas dentro das telas (levantamento de 23/09) ---------- Fundos claros e textos escuros escritos direto no atributo de estilo não mudam com o tema; aqui cada tom conhecido vira o token equivalente. Só no escuro: no claro eles já estavam certos. Inclui os hex da paleta clara que ficaram em strings PHP (o aplicar_paleta.py não troca hex entre aspas). */ :root[data-theme="dark"] [style*="background:#fff;" i], :root[data-theme="dark"] [style$="background:#fff" i], :root[data-theme="dark"] [style*="background: #fff;" i], :root[data-theme="dark"] [style$="background: #fff" i], :root[data-theme="dark"] [style*="background:#ffffff;" i], :root[data-theme="dark"] [style$="background:#ffffff" i], :root[data-theme="dark"] [style*="background: #ffffff;" i], :root[data-theme="dark"] [style$="background: #ffffff" i], :root[data-theme="dark"] [style*="background:#fafafa;" i], :root[data-theme="dark"] [style$="background:#fafafa" i], :root[data-theme="dark"] [style*="background: #fafafa;" i], :root[data-theme="dark"] [style$="background: #fafafa" i], :root[data-theme="dark"] [style*="background:#fbf9f5;" i], :root[data-theme="dark"] [style$="background:#fbf9f5" i], :root[data-theme="dark"] [style*="background: #fbf9f5;" i], :root[data-theme="dark"] [style$="background: #fbf9f5" i], :root[data-theme="dark"] [style*="background:#f3f4f6;" i], :root[data-theme="dark"] [style$="background:#f3f4f6" i], :root[data-theme="dark"] [style*="background: #f3f4f6;" i], :root[data-theme="dark"] [style$="background: #f3f4f6" i], :root[data-theme="dark"] [style*="background:#e3e1e2;" i], :root[data-theme="dark"] [style$="background:#e3e1e2" i], :root[data-theme="dark"] [style*="background: #e3e1e2;" i], :root[data-theme="dark"] [style$="background: #e3e1e2" i], :root[data-theme="dark"] [style*="background:#f8f4ec;" i], :root[data-theme="dark"] [style$="background:#f8f4ec" i], :root[data-theme="dark"] [style*="background: #f8f4ec;" i], :root[data-theme="dark"] [style$="background: #f8f4ec" i], :root[data-theme="dark"] [style*="background:#faf6ee;" i], :root[data-theme="dark"] [style$="background:#faf6ee" i], :root[data-theme="dark"] [style*="background: #faf6ee;" i], :root[data-theme="dark"] [style$="background: #faf6ee" i], :root[data-theme="dark"] [style*="background:#f8f5ee;" i], :root[data-theme="dark"] [style$="background:#f8f5ee" i], :root[data-theme="dark"] [style*="background: #f8f5ee;" i], :root[data-theme="dark"] [style$="background: #f8f5ee" i], :root[data-theme="dark"] [style*="background:#fdf9f0;" i], :root[data-theme="dark"] [style$="background:#fdf9f0" i], :root[data-theme="dark"] [style*="background: #fdf9f0;" i], :root[data-theme="dark"] [style$="background: #fdf9f0" i], :root[data-theme="dark"] [style*="background:rgba(255,255,255,.55);" i], :root[data-theme="dark"] [style$="background:rgba(255,255,255,.55)" i], :root[data-theme="dark"] [style*="background: rgba(255,255,255,.55);" i], :root[data-theme="dark"] [style$="background: rgba(255,255,255,.55)" i], :root[data-theme="dark"] [style*="background:rgba(255,255,255,0.55);" i], :root[data-theme="dark"] [style$="background:rgba(255,255,255,0.55)" i], :root[data-theme="dark"] [style*="background: rgba(255,255,255,0.55);" i], :root[data-theme="dark"] [style$="background: rgba(255,255,255,0.55)" i], :root[data-theme="dark"] [style*="background:rgba(255,255,255,.6);" i], :root[data-theme="dark"] [style$="background:rgba(255,255,255,.6)" i], :root[data-theme="dark"] [style*="background: rgba(255,255,255,.6);" i], :root[data-theme="dark"] [style$="background: rgba(255,255,255,.6)" i], :root[data-theme="dark"] [style*="background:rgba(255,255,255,.7);" i], :root[data-theme="dark"] [style$="background:rgba(255,255,255,.7)" i], :root[data-theme="dark"] [style*="background: rgba(255,255,255,.7);" i], :root[data-theme="dark"] [style$="background: rgba(255,255,255,.7)" i], :root[data-theme="dark"] [style*="background:rgba(255,255,255,.5);" i], :root[data-theme="dark"] [style$="background:rgba(255,255,255,.5)" i], :root[data-theme="dark"] [style*="background: rgba(255,255,255,.5);" i], :root[data-theme="dark"] [style$="background: rgba(255,255,255,.5)" i], :root[data-theme="dark"] [style*="background-color:#fff;" i], :root[data-theme="dark"] [style$="background-color:#fff" i], :root[data-theme="dark"] [style*="background-color: #fff;" i], :root[data-theme="dark"] [style$="background-color: #fff" i], :root[data-theme="dark"] [style*="background-color:#ffffff;" i], :root[data-theme="dark"] [style$="background-color:#ffffff" i], :root[data-theme="dark"] [style*="background-color: #ffffff;" i], :root[data-theme="dark"] [style$="background-color: #ffffff" i], :root[data-theme="dark"] [style*="background-color:#fafafa;" i], :root[data-theme="dark"] [style$="background-color:#fafafa" i], :root[data-theme="dark"] [style*="background-color: #fafafa;" i], :root[data-theme="dark"] [style$="background-color: #fafafa" i], :root[data-theme="dark"] [style*="background-color:#fbf9f5;" i], :root[data-theme="dark"] [style$="background-color:#fbf9f5" i], :root[data-theme="dark"] [style*="background-color: #fbf9f5;" i], :root[data-theme="dark"] [style$="background-color: #fbf9f5" i], :root[data-theme="dark"] [style*="background-color:#f3f4f6;" i], :root[data-theme="dark"] [style$="background-color:#f3f4f6" i], :root[data-theme="dark"] [style*="background-color: #f3f4f6;" i], :root[data-theme="dark"] [style$="background-color: #f3f4f6" i], :root[data-theme="dark"] [style*="background-color:#e3e1e2;" i], :root[data-theme="dark"] [style$="background-color:#e3e1e2" i], :root[data-theme="dark"] [style*="background-color: #e3e1e2;" i], :root[data-theme="dark"] [style$="background-color: #e3e1e2" i], :root[data-theme="dark"] [style*="background-color:#f8f4ec;" i], :root[data-theme="dark"] [style$="background-color:#f8f4ec" i], :root[data-theme="dark"] [style*="background-color: #f8f4ec;" i], :root[data-theme="dark"] [style$="background-color: #f8f4ec" i], :root[data-theme="dark"] [style*="background-color:#faf6ee;" i], :root[data-theme="dark"] [style$="background-color:#faf6ee" i], :root[data-theme="dark"] [style*="background-color: #faf6ee;" i], :root[data-theme="dark"] [style$="background-color: #faf6ee" i], :root[data-theme="dark"] [style*="background-color:#f8f5ee;" i], :root[data-theme="dark"] [style$="background-color:#f8f5ee" i], :root[data-theme="dark"] [style*="background-color: #f8f5ee;" i], :root[data-theme="dark"] [style$="background-color: #f8f5ee" i], :root[data-theme="dark"] [style*="background-color:#fdf9f0;" i], :root[data-theme="dark"] [style$="background-color:#fdf9f0" i], :root[data-theme="dark"] [style*="background-color: #fdf9f0;" i], :root[data-theme="dark"] [style$="background-color: #fdf9f0" i], :root[data-theme="dark"] [style*="background-color:rgba(255,255,255,.55);" i], :root[data-theme="dark"] [style$="background-color:rgba(255,255,255,.55)" i], :root[data-theme="dark"] [style*="background-color: rgba(255,255,255,.55);" i], :root[data-theme="dark"] [style$="background-color: rgba(255,255,255,.55)" i], :root[data-theme="dark"] [style*="background-color:rgba(255,255,255,0.55);" i], :root[data-theme="dark"] [style$="background-color:rgba(255,255,255,0.55)" i], :root[data-theme="dark"] [style*="background-color: rgba(255,255,255,0.55);" i], :root[data-theme="dark"] [style$="background-color: rgba(255,255,255,0.55)" i], :root[data-theme="dark"] [style*="background-color:rgba(255,255,255,.6);" i], :root[data-theme="dark"] [style$="background-color:rgba(255,255,255,.6)" i], :root[data-theme="dark"] [style*="background-color: rgba(255,255,255,.6);" i], :root[data-theme="dark"] [style$="background-color: rgba(255,255,255,.6)" i], :root[data-theme="dark"] [style*="background-color:rgba(255,255,255,.7);" i], :root[data-theme="dark"] [style$="background-color:rgba(255,255,255,.7)" i], :root[data-theme="dark"] [style*="background-color: rgba(255,255,255,.7);" i], :root[data-theme="dark"] [style$="background-color: rgba(255,255,255,.7)" i], :root[data-theme="dark"] [style*="background-color:rgba(255,255,255,.5);" i], :root[data-theme="dark"] [style$="background-color:rgba(255,255,255,.5)" i], :root[data-theme="dark"] [style*="background-color: rgba(255,255,255,.5);" i], :root[data-theme="dark"] [style$="background-color: rgba(255,255,255,.5)" i] { background: var(--glass-2) !important; } :root[data-theme="dark"] [style*="background:#dcfce7;" i], :root[data-theme="dark"] [style$="background:#dcfce7" i], :root[data-theme="dark"] [style*="background: #dcfce7;" i], :root[data-theme="dark"] [style$="background: #dcfce7" i], :root[data-theme="dark"] [style*="background:#f0fdf4;" i], :root[data-theme="dark"] [style$="background:#f0fdf4" i], :root[data-theme="dark"] [style*="background: #f0fdf4;" i], :root[data-theme="dark"] [style$="background: #f0fdf4" i], :root[data-theme="dark"] [style*="background:#e6f4ea;" i], :root[data-theme="dark"] [style$="background:#e6f4ea" i], :root[data-theme="dark"] [style*="background: #e6f4ea;" i], :root[data-theme="dark"] [style$="background: #e6f4ea" i], :root[data-theme="dark"] [style*="background-color:#dcfce7;" i], :root[data-theme="dark"] [style$="background-color:#dcfce7" i], :root[data-theme="dark"] [style*="background-color: #dcfce7;" i], :root[data-theme="dark"] [style$="background-color: #dcfce7" i], :root[data-theme="dark"] [style*="background-color:#f0fdf4;" i], :root[data-theme="dark"] [style$="background-color:#f0fdf4" i], :root[data-theme="dark"] [style*="background-color: #f0fdf4;" i], :root[data-theme="dark"] [style$="background-color: #f0fdf4" i], :root[data-theme="dark"] [style*="background-color:#e6f4ea;" i], :root[data-theme="dark"] [style$="background-color:#e6f4ea" i], :root[data-theme="dark"] [style*="background-color: #e6f4ea;" i], :root[data-theme="dark"] [style$="background-color: #e6f4ea" i] { background: var(--success-soft) !important; } :root[data-theme="dark"] [style*="background:#fef9e7;" i], :root[data-theme="dark"] [style$="background:#fef9e7" i], :root[data-theme="dark"] [style*="background: #fef9e7;" i], :root[data-theme="dark"] [style$="background: #fef9e7" i], :root[data-theme="dark"] [style*="background:#fff8e6;" i], :root[data-theme="dark"] [style$="background:#fff8e6" i], :root[data-theme="dark"] [style*="background: #fff8e6;" i], :root[data-theme="dark"] [style$="background: #fff8e6" i], :root[data-theme="dark"] [style*="background:#fdf6ea;" i], :root[data-theme="dark"] [style$="background:#fdf6ea" i], :root[data-theme="dark"] [style*="background: #fdf6ea;" i], :root[data-theme="dark"] [style$="background: #fdf6ea" i], :root[data-theme="dark"] [style*="background-color:#fef9e7;" i], :root[data-theme="dark"] [style$="background-color:#fef9e7" i], :root[data-theme="dark"] [style*="background-color: #fef9e7;" i], :root[data-theme="dark"] [style$="background-color: #fef9e7" i], :root[data-theme="dark"] [style*="background-color:#fff8e6;" i], :root[data-theme="dark"] [style$="background-color:#fff8e6" i], :root[data-theme="dark"] [style*="background-color: #fff8e6;" i], :root[data-theme="dark"] [style$="background-color: #fff8e6" i], :root[data-theme="dark"] [style*="background-color:#fdf6ea;" i], :root[data-theme="dark"] [style$="background-color:#fdf6ea" i], :root[data-theme="dark"] [style*="background-color: #fdf6ea;" i], :root[data-theme="dark"] [style$="background-color: #fdf6ea" i] { background: var(--warn-soft) !important; } :root[data-theme="dark"] [style*="background:#fef3f2;" i], :root[data-theme="dark"] [style$="background:#fef3f2" i], :root[data-theme="dark"] [style*="background: #fef3f2;" i], :root[data-theme="dark"] [style$="background: #fef3f2" i], :root[data-theme="dark"] [style*="background:#fdece9;" i], :root[data-theme="dark"] [style$="background:#fdece9" i], :root[data-theme="dark"] [style*="background: #fdece9;" i], :root[data-theme="dark"] [style$="background: #fdece9" i], :root[data-theme="dark"] [style*="background:#fef2f2;" i], :root[data-theme="dark"] [style$="background:#fef2f2" i], :root[data-theme="dark"] [style*="background: #fef2f2;" i], :root[data-theme="dark"] [style$="background: #fef2f2" i], :root[data-theme="dark"] [style*="background:#fee;" i], :root[data-theme="dark"] [style$="background:#fee" i], :root[data-theme="dark"] [style*="background: #fee;" i], :root[data-theme="dark"] [style$="background: #fee" i], :root[data-theme="dark"] [style*="background-color:#fef3f2;" i], :root[data-theme="dark"] [style$="background-color:#fef3f2" i], :root[data-theme="dark"] [style*="background-color: #fef3f2;" i], :root[data-theme="dark"] [style$="background-color: #fef3f2" i], :root[data-theme="dark"] [style*="background-color:#fdece9;" i], :root[data-theme="dark"] [style$="background-color:#fdece9" i], :root[data-theme="dark"] [style*="background-color: #fdece9;" i], :root[data-theme="dark"] [style$="background-color: #fdece9" i], :root[data-theme="dark"] [style*="background-color:#fef2f2;" i], :root[data-theme="dark"] [style$="background-color:#fef2f2" i], :root[data-theme="dark"] [style*="background-color: #fef2f2;" i], :root[data-theme="dark"] [style$="background-color: #fef2f2" i], :root[data-theme="dark"] [style*="background-color:#fee;" i], :root[data-theme="dark"] [style$="background-color:#fee" i], :root[data-theme="dark"] [style*="background-color: #fee;" i], :root[data-theme="dark"] [style$="background-color: #fee" i] { background: var(--danger-soft) !important; } :root[data-theme="dark"] [style*="background:#e8f0fe;" i], :root[data-theme="dark"] [style$="background:#e8f0fe" i], :root[data-theme="dark"] [style*="background: #e8f0fe;" i], :root[data-theme="dark"] [style$="background: #e8f0fe" i], :root[data-theme="dark"] [style*="background-color:#e8f0fe;" i], :root[data-theme="dark"] [style$="background-color:#e8f0fe" i], :root[data-theme="dark"] [style*="background-color: #e8f0fe;" i], :root[data-theme="dark"] [style$="background-color: #e8f0fe" i] { background: var(--info-soft) !important; } :root[data-theme="dark"] [style*=";color:#166534" i], :root[data-theme="dark"] [style^="color:#166534" i], :root[data-theme="dark"] [style*=" color:#166534" i], :root[data-theme="dark"] [style*="'color:#166534" i], :root[data-theme="dark"] [style*=";color: #166534" i], :root[data-theme="dark"] [style^="color: #166534" i], :root[data-theme="dark"] [style*=" color: #166534" i], :root[data-theme="dark"] [style*="'color: #166534" i], :root[data-theme="dark"] [style*=";color:#14532d" i], :root[data-theme="dark"] [style^="color:#14532d" i], :root[data-theme="dark"] [style*=" color:#14532d" i], :root[data-theme="dark"] [style*="'color:#14532d" i], :root[data-theme="dark"] [style*=";color: #14532d" i], :root[data-theme="dark"] [style^="color: #14532d" i], :root[data-theme="dark"] [style*=" color: #14532d" i], :root[data-theme="dark"] [style*="'color: #14532d" i], :root[data-theme="dark"] [style*=";color:#38765a" i], :root[data-theme="dark"] [style^="color:#38765a" i], :root[data-theme="dark"] [style*=" color:#38765a" i], :root[data-theme="dark"] [style*="'color:#38765a" i], :root[data-theme="dark"] [style*=";color: #38765a" i], :root[data-theme="dark"] [style^="color: #38765a" i], :root[data-theme="dark"] [style*=" color: #38765a" i], :root[data-theme="dark"] [style*="'color: #38765a" i], :root[data-theme="dark"] [style*=";color:#2a8f3f" i], :root[data-theme="dark"] [style^="color:#2a8f3f" i], :root[data-theme="dark"] [style*=" color:#2a8f3f" i], :root[data-theme="dark"] [style*="'color:#2a8f3f" i], :root[data-theme="dark"] [style*=";color: #2a8f3f" i], :root[data-theme="dark"] [style^="color: #2a8f3f" i], :root[data-theme="dark"] [style*=" color: #2a8f3f" i], :root[data-theme="dark"] [style*="'color: #2a8f3f" i], :root[data-theme="dark"] [style*=";color:#2a7d3a" i], :root[data-theme="dark"] [style^="color:#2a7d3a" i], :root[data-theme="dark"] [style*=" color:#2a7d3a" i], :root[data-theme="dark"] [style*="'color:#2a7d3a" i], :root[data-theme="dark"] [style*=";color: #2a7d3a" i], :root[data-theme="dark"] [style^="color: #2a7d3a" i], :root[data-theme="dark"] [style*=" color: #2a7d3a" i], :root[data-theme="dark"] [style*="'color: #2a7d3a" i] { color: var(--success) !important; } :root[data-theme="dark"] [style*=";color:#854d0e" i], :root[data-theme="dark"] [style^="color:#854d0e" i], :root[data-theme="dark"] [style*=" color:#854d0e" i], :root[data-theme="dark"] [style*="'color:#854d0e" i], :root[data-theme="dark"] [style*=";color: #854d0e" i], :root[data-theme="dark"] [style^="color: #854d0e" i], :root[data-theme="dark"] [style*=" color: #854d0e" i], :root[data-theme="dark"] [style*="'color: #854d0e" i], :root[data-theme="dark"] [style*=";color:#7a5b1f" i], :root[data-theme="dark"] [style^="color:#7a5b1f" i], :root[data-theme="dark"] [style*=" color:#7a5b1f" i], :root[data-theme="dark"] [style*="'color:#7a5b1f" i], :root[data-theme="dark"] [style*=";color: #7a5b1f" i], :root[data-theme="dark"] [style^="color: #7a5b1f" i], :root[data-theme="dark"] [style*=" color: #7a5b1f" i], :root[data-theme="dark"] [style*="'color: #7a5b1f" i], :root[data-theme="dark"] [style*=";color:#8a5f26" i], :root[data-theme="dark"] [style^="color:#8a5f26" i], :root[data-theme="dark"] [style*=" color:#8a5f26" i], :root[data-theme="dark"] [style*="'color:#8a5f26" i], :root[data-theme="dark"] [style*=";color: #8a5f26" i], :root[data-theme="dark"] [style^="color: #8a5f26" i], :root[data-theme="dark"] [style*=" color: #8a5f26" i], :root[data-theme="dark"] [style*="'color: #8a5f26" i] { color: var(--warn) !important; } :root[data-theme="dark"] [style*=";color:#7c2d12" i], :root[data-theme="dark"] [style^="color:#7c2d12" i], :root[data-theme="dark"] [style*=" color:#7c2d12" i], :root[data-theme="dark"] [style*="'color:#7c2d12" i], :root[data-theme="dark"] [style*=";color: #7c2d12" i], :root[data-theme="dark"] [style^="color: #7c2d12" i], :root[data-theme="dark"] [style*=" color: #7c2d12" i], :root[data-theme="dark"] [style*="'color: #7c2d12" i], :root[data-theme="dark"] [style*=";color:#a33" i], :root[data-theme="dark"] [style^="color:#a33" i], :root[data-theme="dark"] [style*=" color:#a33" i], :root[data-theme="dark"] [style*="'color:#a33" i], :root[data-theme="dark"] [style*=";color: #a33" i], :root[data-theme="dark"] [style^="color: #a33" i], :root[data-theme="dark"] [style*=" color: #a33" i], :root[data-theme="dark"] [style*="'color: #a33" i], :root[data-theme="dark"] [style*=";color:#7f1d1d" i], :root[data-theme="dark"] [style^="color:#7f1d1d" i], :root[data-theme="dark"] [style*=" color:#7f1d1d" i], :root[data-theme="dark"] [style*="'color:#7f1d1d" i], :root[data-theme="dark"] [style*=";color: #7f1d1d" i], :root[data-theme="dark"] [style^="color: #7f1d1d" i], :root[data-theme="dark"] [style*=" color: #7f1d1d" i], :root[data-theme="dark"] [style*="'color: #7f1d1d" i], :root[data-theme="dark"] [style*=";color:#a83e31" i], :root[data-theme="dark"] [style^="color:#a83e31" i], :root[data-theme="dark"] [style*=" color:#a83e31" i], :root[data-theme="dark"] [style*="'color:#a83e31" i], :root[data-theme="dark"] [style*=";color: #a83e31" i], :root[data-theme="dark"] [style^="color: #a83e31" i], :root[data-theme="dark"] [style*=" color: #a83e31" i], :root[data-theme="dark"] [style*="'color: #a83e31" i] { color: var(--danger) !important; } :root[data-theme="dark"] [style*=";color:#3d6a7e" i], :root[data-theme="dark"] [style^="color:#3d6a7e" i], :root[data-theme="dark"] [style*=" color:#3d6a7e" i], :root[data-theme="dark"] [style*="'color:#3d6a7e" i], :root[data-theme="dark"] [style*=";color: #3d6a7e" i], :root[data-theme="dark"] [style^="color: #3d6a7e" i], :root[data-theme="dark"] [style*=" color: #3d6a7e" i], :root[data-theme="dark"] [style*="'color: #3d6a7e" i], :root[data-theme="dark"] [style*=";color:#1e40af" i], :root[data-theme="dark"] [style^="color:#1e40af" i], :root[data-theme="dark"] [style*=" color:#1e40af" i], :root[data-theme="dark"] [style*="'color:#1e40af" i], :root[data-theme="dark"] [style*=";color: #1e40af" i], :root[data-theme="dark"] [style^="color: #1e40af" i], :root[data-theme="dark"] [style*=" color: #1e40af" i], :root[data-theme="dark"] [style*="'color: #1e40af" i] { color: var(--info) !important; } :root[data-theme="dark"] [style*=";color:#241c1f" i], :root[data-theme="dark"] [style^="color:#241c1f" i], :root[data-theme="dark"] [style*=" color:#241c1f" i], :root[data-theme="dark"] [style*="'color:#241c1f" i], :root[data-theme="dark"] [style*=";color: #241c1f" i], :root[data-theme="dark"] [style^="color: #241c1f" i], :root[data-theme="dark"] [style*=" color: #241c1f" i], :root[data-theme="dark"] [style*="'color: #241c1f" i], :root[data-theme="dark"] [style*=";color:#43373b" i], :root[data-theme="dark"] [style^="color:#43373b" i], :root[data-theme="dark"] [style*=" color:#43373b" i], :root[data-theme="dark"] [style*="'color:#43373b" i], :root[data-theme="dark"] [style*=";color: #43373b" i], :root[data-theme="dark"] [style^="color: #43373b" i], :root[data-theme="dark"] [style*=" color: #43373b" i], :root[data-theme="dark"] [style*="'color: #43373b" i], :root[data-theme="dark"] [style*=";color:#1d1b17" i], :root[data-theme="dark"] [style^="color:#1d1b17" i], :root[data-theme="dark"] [style*=" color:#1d1b17" i], :root[data-theme="dark"] [style*="'color:#1d1b17" i], :root[data-theme="dark"] [style*=";color: #1d1b17" i], :root[data-theme="dark"] [style^="color: #1d1b17" i], :root[data-theme="dark"] [style*=" color: #1d1b17" i], :root[data-theme="dark"] [style*="'color: #1d1b17" i] { color: var(--text) !important; } :root[data-theme="dark"] [style*=";color:#6b5c61" i], :root[data-theme="dark"] [style^="color:#6b5c61" i], :root[data-theme="dark"] [style*=" color:#6b5c61" i], :root[data-theme="dark"] [style*="'color:#6b5c61" i], :root[data-theme="dark"] [style*=";color: #6b5c61" i], :root[data-theme="dark"] [style^="color: #6b5c61" i], :root[data-theme="dark"] [style*=" color: #6b5c61" i], :root[data-theme="dark"] [style*="'color: #6b5c61" i], :root[data-theme="dark"] [style*=";color:#5d574b" i], :root[data-theme="dark"] [style^="color:#5d574b" i], :root[data-theme="dark"] [style*=" color:#5d574b" i], :root[data-theme="dark"] [style*="'color:#5d574b" i], :root[data-theme="dark"] [style*=";color: #5d574b" i], :root[data-theme="dark"] [style^="color: #5d574b" i], :root[data-theme="dark"] [style*=" color: #5d574b" i], :root[data-theme="dark"] [style*="'color: #5d574b" i], :root[data-theme="dark"] [style*=";color:#b85580" i], :root[data-theme="dark"] [style^="color:#b85580" i], :root[data-theme="dark"] [style*=" color:#b85580" i], :root[data-theme="dark"] [style*="'color:#b85580" i], :root[data-theme="dark"] [style*=";color: #b85580" i], :root[data-theme="dark"] [style^="color: #b85580" i], :root[data-theme="dark"] [style*=" color: #b85580" i], :root[data-theme="dark"] [style*="'color: #b85580" i] { color: var(--text2) !important; } :root[data-theme="dark"] [style*=";color:#7a686e" i], :root[data-theme="dark"] [style^="color:#7a686e" i], :root[data-theme="dark"] [style*=" color:#7a686e" i], :root[data-theme="dark"] [style*="'color:#7a686e" i], :root[data-theme="dark"] [style*=";color: #7a686e" i], :root[data-theme="dark"] [style^="color: #7a686e" i], :root[data-theme="dark"] [style*=" color: #7a686e" i], :root[data-theme="dark"] [style*="'color: #7a686e" i], :root[data-theme="dark"] [style*=";color:#8e8777" i], :root[data-theme="dark"] [style^="color:#8e8777" i], :root[data-theme="dark"] [style*=" color:#8e8777" i], :root[data-theme="dark"] [style*="'color:#8e8777" i], :root[data-theme="dark"] [style*=";color: #8e8777" i], :root[data-theme="dark"] [style^="color: #8e8777" i], :root[data-theme="dark"] [style*=" color: #8e8777" i], :root[data-theme="dark"] [style*="'color: #8e8777" i] { color: var(--text3) !important; } /* etiquetas com a cor da categoria vinda do banco (fundo = cor + 8% e texto = cor): no escuro o texto vira o tom claro padrão e a cor da categoria continua no fundo (legível e mensurável; filtro não é medido pelo audit) */ :root[data-theme="dark"] [style*="15;color:#" i], :root[data-theme="dark"] [style*="22;color:#" i], :root[data-theme="dark"] [style*="15; color:#" i] { color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--glass-line); } :root[data-theme="dark"] .fn-tipo-pill { color: color-mix(in srgb, var(--tipo-cor, #A5969B) 40%, #fff); } :root[data-theme="dark"] .fin-sku-rank { color: color-mix(in srgb, var(--cor, #EDE5E7) 40%, #fff); } /* texto branco fixo sobre fundo de severidade: no escuro o fundo clareia, então o texto escurece */ :root[data-theme="dark"] .tag[style*="color:#fff"], :root[data-theme="dark"] .pill[style*="color:#fff"] { color: var(--on-solid) !important; } /* componentes com cor própria no CSS das telas */ .main .kb-score-hi { background: var(--success-soft); color: var(--success); } .main .kb-score-mid { background: var(--warn-soft); color: var(--warn); } .main .kb-score-lo { background: var(--bg3); color: var(--text2); } .main .kb-badge-tipo.is-paciente { background: var(--success-soft); color: var(--success); } .main .kb-badge-tipo.is-lead { background: var(--gold-soft); color: var(--text2); } .main .msg-item-badge { background: var(--gold); color: var(--gold-on); } .main .badge-fixo { background: var(--info-soft); color: var(--info); } .main .ag-ev-meta { color: inherit; opacity: .9; } .main .kb-card-paciente { border-left-color: color-mix(in srgb, var(--success) 45%, transparent); } /* texto branco fixo sobre fundo de token (que clareia no escuro) · chip ativo das telas de admin */ :root[data-theme="dark"] [style*="background:var(--" i][style*="color:#fff" i] { color: var(--on-solid) !important; } .main .chip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-on); } .main .chip.on * { color: inherit; } /* tons suaves da paleta clara escritos no código (mapas de status das telas) */ :root[data-theme="dark"] [style*="background:#faece9;" i], :root[data-theme="dark"] [style$="background:#faece9" i], :root[data-theme="dark"] [style*="background: #faece9;" i], :root[data-theme="dark"] [style$="background: #faece9" i], :root[data-theme="dark"] [style*="background-color:#faece9;" i], :root[data-theme="dark"] [style$="background-color:#faece9" i], :root[data-theme="dark"] [style*="background-color: #faece9;" i], :root[data-theme="dark"] [style$="background-color: #faece9" i] { background: var(--danger-soft) !important; } :root[data-theme="dark"] [style*="background:#e8f2ec;" i], :root[data-theme="dark"] [style$="background:#e8f2ec" i], :root[data-theme="dark"] [style*="background: #e8f2ec;" i], :root[data-theme="dark"] [style$="background: #e8f2ec" i], :root[data-theme="dark"] [style*="background-color:#e8f2ec;" i], :root[data-theme="dark"] [style$="background-color:#e8f2ec" i], :root[data-theme="dark"] [style*="background-color: #e8f2ec;" i], :root[data-theme="dark"] [style$="background-color: #e8f2ec" i] { background: var(--success-soft) !important; } :root[data-theme="dark"] [style*="background:#faf0df;" i], :root[data-theme="dark"] [style$="background:#faf0df" i], :root[data-theme="dark"] [style*="background: #faf0df;" i], :root[data-theme="dark"] [style$="background: #faf0df" i], :root[data-theme="dark"] [style*="background-color:#faf0df;" i], :root[data-theme="dark"] [style$="background-color:#faf0df" i], :root[data-theme="dark"] [style*="background-color: #faf0df;" i], :root[data-theme="dark"] [style$="background-color: #faf0df" i] { background: var(--warn-soft) !important; } :root[data-theme="dark"] [style*="background:#e9f0f4;" i], :root[data-theme="dark"] [style$="background:#e9f0f4" i], :root[data-theme="dark"] [style*="background: #e9f0f4;" i], :root[data-theme="dark"] [style$="background: #e9f0f4" i], :root[data-theme="dark"] [style*="background-color:#e9f0f4;" i], :root[data-theme="dark"] [style$="background-color:#e9f0f4" i], :root[data-theme="dark"] [style*="background-color: #e9f0f4;" i], :root[data-theme="dark"] [style$="background-color: #e9f0f4" i] { background: var(--info-soft) !important; } :root[data-theme="dark"] [style*="background:#efeced;" i], :root[data-theme="dark"] [style$="background:#efeced" i], :root[data-theme="dark"] [style*="background: #efeced;" i], :root[data-theme="dark"] [style$="background: #efeced" i], :root[data-theme="dark"] [style*="background:#f1f0f1;" i], :root[data-theme="dark"] [style$="background:#f1f0f1" i], :root[data-theme="dark"] [style*="background: #f1f0f1;" i], :root[data-theme="dark"] [style$="background: #f1f0f1" i], :root[data-theme="dark"] [style*="background-color:#efeced;" i], :root[data-theme="dark"] [style$="background-color:#efeced" i], :root[data-theme="dark"] [style*="background-color: #efeced;" i], :root[data-theme="dark"] [style$="background-color: #efeced" i], :root[data-theme="dark"] [style*="background-color:#f1f0f1;" i], :root[data-theme="dark"] [style$="background-color:#f1f0f1" i], :root[data-theme="dark"] [style*="background-color: #f1f0f1;" i], :root[data-theme="dark"] [style$="background-color: #f1f0f1" i] { background: var(--glass-3) !important; } /* preço do protocolo pintado com a cor da categoria */ :root[data-theme="dark"] .main [style*="font-size:18px;font-weight:700;color:#" i] { color: var(--text) !important; } /* ---------- tema claro: etiquetas de categoria e rosa do Instagram (2ª rodada) ---------- */ :root:not([data-theme="dark"]) [style*="15;color:#" i], :root:not([data-theme="dark"]) [style*="22;color:#" i], :root:not([data-theme="dark"]) [style*="15; color:#" i] { color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line); } :root:not([data-theme="dark"]) .fn-tipo-pill { color: color-mix(in srgb, var(--tipo-cor, #6E5E64) 60%, #000); } :root:not([data-theme="dark"]) .fin-sku-rank { color: color-mix(in srgb, var(--cor, #43373B) 60%, #000); } [style*="color:#b85580" i] { color: var(--text2) !important; } /* ---------- celular: alvos de 44 px na topbar e no menu (a regra de 38 px acima valia pro desktop) ---------- */ @media (max-width: 960px) { .tb-hamburger, .tb-icon, .tb-user, .topbar .logo, .cmdk { min-width: 44px; min-height: 44px; } .sb-item { min-height: 44px; } .sb .sb-sub-item { min-height: 44px; } } /* ---------- toque: alvos de 44 px dentro do conteúdo (links de tabela, ações de alerta, campos, ações do card) ---------- */ @media (pointer: coarse) { .main .kb-q-btn { width: 44px; min-width: 44px; flex: 0 0 44px; height: 40px; position: relative; } .main .kb-q-mover { width: auto; flex: 1 1 auto; } .main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .main select { min-height: 44px; } .main input[type="checkbox"], .main input[type="radio"] { position: relative; } .main .al-action, .main .al-link, .main td a, .main .tbl a, .main .kpi a, .main .card-h a, .main .pf-field a { display: inline-flex; align-items: center; min-height: 44px; } } @media (pointer: coarse) { .main .w-more, .main .wa-ws-tab, .main .btn-row { min-height: 44px; display: inline-flex; align-items: center; } } /* desktop: as ações rápidas do card aparecem no canto de baixo (antes cobriam o nome do lead no canto de cima) */ @media (hover: hover) and (pointer: fine) { .kb-quick { top: auto; bottom: 8px; right: 8px; } } /* ===================================================================================================== V3.1 · ESQUELETO IGUAL AO PROTÓTIPO (23/09, revisão pedida pelo Cristian) No desktop não há barra no topo: busca no alto do menu, usuário/alertas/tema no rodapé do menu. Só a lista de itens rola (.sb-nav); o resto do menu fica fixo, e os menus suspensos não são cortados. ===================================================================================================== */ @media (min-width: 961px) { .app:not(.auth) > .topbar { display: none; } .app:not(.auth) { grid-template-rows: minmax(0, 1fr); } .app:not(.auth) > .sb, .app:not(.auth) > .main { grid-row: 1; } .main { --main-py: 28px; --main-px: 32px; } } .sb { overflow: visible; } .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px 6px; } .sb-nav::-webkit-scrollbar { display: none; } .sb-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin: 0 2px 10px; border-radius: 14px; flex-shrink: 0; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text3); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; } .sb-search:hover { background: var(--glass-3); color: var(--text2); } .sb-search .icon { width: 16px; height: 16px; } .sb-search kbd { margin-left: auto; font: 11px var(--font-sans); color: var(--text3); border: 1px solid var(--glass-line); border-radius: 6px; padding: 1px 6px; background: transparent; } .sb-me { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-top: 8px; padding: 10px 0 0; border-top: 1px solid var(--hair); } .sb-me .user-drop { flex: 1; min-width: 0; position: relative; display: block; } .sb-user { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px; border-radius: 14px; text-align: left; color: var(--text); } .sb-user:hover, .sb-user[aria-expanded="true"] { background: var(--glass-2); } .sb-user .avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; } .sb-user .avatar.has-img { padding: 0; overflow: hidden; background: var(--glass-3); box-shadow: inset 0 0 0 1px var(--glass-line); } .sb-user .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .sb-user-t { min-width: 0; line-height: 1.25; } .sb-user-t b { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-user-t small { display: block; font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-me .tb-icon { width: 38px; height: 38px; border-radius: 12px; color: var(--text2); flex-shrink: 0; } .sb-me .tb-icon:hover, .sb-me .bell-trigger[aria-expanded="true"] { background: var(--glass-2); color: var(--text); } .sb-me .bell-drop { position: relative; display: block; } .sb-me .bell-badge { border-color: var(--v3-base); } .sb .user-menu, .sb .bell-menu { position: absolute; top: auto; bottom: calc(100% + 10px); left: 0; right: auto; z-index: 90; } .sb .user-menu { min-width: 250px; padding: 6px; } .sb .bell-menu { width: 360px; max-height: min(520px, 70vh); } .user-menu-name { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 650; color: var(--text); padding: 10px 12px 8px; } .user-menu-name small { display: block; font-size: 12px; font-weight: 400; color: var(--text3); margin-top: 1px; } .user-menu-sec { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text3); } .um-persona-f { margin: 0; } .um-persona { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--text2); text-align: left; } .um-persona:hover { background: var(--glass-3); color: var(--text); } .um-persona.on { color: var(--text); font-weight: 600; } .um-persona .um-check { margin-left: auto; color: var(--text); } .user-menu-sep { height: 1px; background: var(--hair); margin: 6px 4px; } .sb .user-menu a { border-bottom: 0; border-radius: 10px; min-height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 10px; } /* crumb: some quando só repete o nome da página; fica quando leva de volta (detalhe com link) */ .crumb:not(:has(a)) { display: none; } .crumb { margin-bottom: 6px; } /* menu recolhido (76 px): busca e rodapé viram ícones; os menus abrem ao lado */ .sb-collapsed .sb-search { justify-content: center; padding: 0; margin: 0 2px 10px; } .sb-collapsed .sb-search .lbl, .sb-collapsed .sb-search kbd { display: none; } .sb-collapsed .sb-me { flex-direction: column; gap: 6px; } .sb-collapsed .sb-user { justify-content: center; padding: 6px 0; } .sb-collapsed .sb-user-t { display: none; } .sb-collapsed .sb .user-menu, .sb-collapsed .sb .bell-menu { bottom: 0; left: calc(100% + 14px); } /* celular: barra de cima com menu, marca, busca, alertas e tema; o rodapé do menu vai junto no drawer */ .tb-bell-m { position: relative; } .tb-bell-m .bell-badge { border-color: var(--v3-base); } @media (max-width: 960px) { .sb { display: flex; flex-direction: column; overflow: visible; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .sb .bell-menu { width: min(360px, calc(100vw - 40px)); } .sb-me { padding-bottom: 4px; } .crumb { display: none; } } /* ===================================================================================================== HOJE (administrador) · composição do protótipo apple/hoje.html Classes com prefixo hj- pra não colidir com o v2. Cores só por token; o gráfico usa a cor do texto como linha principal, a mesma a 30% pro mês anterior e âmbar pra meta. ===================================================================================================== */ .hj { --hj-c1: var(--text); --hj-c2: color-mix(in srgb, var(--text) 30%, transparent); --hj-meta: var(--amber); max-width: 1360px; } .hj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; } .hj-head h1 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 750; letter-spacing: -.035em; text-wrap: balance; color: var(--text); } .hj-head p { margin: 6px 0 0; color: var(--text3); font-size: 14px; } .hj-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 20px; } .hj-quick .btn { height: 42px; padding: 0 18px 0 14px; font-size: 14px; } .hj-quick .btn .icon { width: 16px; height: 16px; } .hj-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .hj-grid > .card, .hj-saude-grid > .card { margin: 0; min-width: 0; padding: 20px; border-radius: 22px; } .hj-fat { grid-column: span 8; } .hj-caixa { grid-column: span 4; } .hj-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .hj-next { grid-column: span 7; } .hj-agenda { grid-column: span 5; } .hj-pipe { grid-column: span 7; } .hj-alerts { grid-column: span 5; } .hj-eyebrow { font-size: 12px; font-weight: 600; color: var(--text3); } .hj-h { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; color: var(--text); } .hj-h .icon { width: 18px; height: 18px; color: var(--text2); } .hj-h .more { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text3); display: inline-flex; align-items: center; min-height: 28px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; } .hj-h .more:hover { color: var(--text); } .hj .up { color: var(--green); } .hj .down { color: var(--red); } .hj .muted { color: var(--text3); } .hj-empty { margin: 14px 0 0; color: var(--text3); font-size: 13px; } .hj-empty a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } /* faturamento */ .hj-fat-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .hj-big { font-size: 48px; font-weight: 750; letter-spacing: -.045em; line-height: 1.05; margin: 8px 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); } .hj-big sup { font-size: .38em; font-weight: 600; vertical-align: 1.05em; margin-left: 3px; color: var(--text2); letter-spacing: 0; } .hj-delta { font-size: 13px; color: var(--text2); } .hj-delta b { font-weight: 700; color: var(--text); } .hj-delta b.up { color: var(--green); } .hj-delta b.down { color: var(--red); } .hj-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text3); } .hj-legend i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; margin-right: 6px; vertical-align: middle; background: var(--hj-c1); } .hj-legend i.p { background: var(--hj-c2); } .hj-legend i.m { background: var(--hj-meta); } .hj-chart { position: relative; margin-top: 18px; } .hj-chart svg { width: 100%; height: 220px; display: block; overflow: visible; } .hj-chart .gl { stroke: var(--hair); vector-effect: non-scaling-stroke; } .hj-chart .s1 { fill: none; stroke: var(--hj-c1); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .hj-chart .s2 { fill: none; stroke: var(--hj-c2); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; } .hj-chart .sm { fill: none; stroke: var(--hj-meta); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 2 6; opacity: .8; } .hj-chart .hj-gf-a { stop-color: var(--hj-c1); stop-opacity: .28; } .hj-chart .hj-gf-b { stop-color: var(--hj-c1); stop-opacity: 0; } .hj-chart .xl { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-top: 8px; } .hj-chart .pt { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--hj-c1); border: 3px solid var(--v3-base); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px color-mix(in srgb, var(--hj-c1) 16%, transparent); pointer-events: none; } .hj-chart .tip { position: absolute; transform: translate(-50%, calc(-100% - 16px)); padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text); background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); pointer-events: none; } /* caixa */ .hj-lines { list-style: none; margin: 14px 0 0; padding: 0; } .hj-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 14px; } .hj-lines li:first-child { border-top: 0; } .hj-lines span { color: var(--text2); } .hj-lines b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); white-space: nowrap; } .hj-lines b.up { color: var(--green); } .hj-lines b.down { color: var(--red); } .hj-lines .tot { margin-top: 4px; } .hj-lines .tot b { font-size: 22px; letter-spacing: -.02em; } .hj-ring { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px; border-radius: 16px; background: var(--glass-2); } .hj-ring svg { width: 52px; height: 52px; flex-shrink: 0; transform: rotate(-90deg); } .hj-ring circle { fill: none; stroke-width: 6; } .hj-ring .bg { stroke: var(--glass-3); } .hj-ring .fg { stroke: var(--hj-c1); stroke-linecap: round; } .hj-ring b { display: block; font-size: 15px; color: var(--text); } .hj-ring small { color: var(--text3); font-size: 12px; } /* indicadores */ .hj-kpi .v { font-size: 30px; font-weight: 750; letter-spacing: -.035em; margin: 6px 0 2px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); } .hj-kpi .d { font-size: 12px; color: var(--text3); } .hj-kpi .d b { font-weight: 700; } .hj-spark { width: 100%; height: 38px; display: block; margin-top: 12px; overflow: visible; } .hj-spark .l { fill: none; stroke: var(--hj-c1); stroke-width: 1.75; vector-effect: non-scaling-stroke; } .hj-spark .a { fill: var(--hj-c1); opacity: .09; } .hj-spark .b { fill: var(--hj-c1); } .hj-spark .b.dim { opacity: .28; } .hj-pbar { height: 6px; border-radius: 3px; background: var(--glass-3); margin-top: 14px; overflow: hidden; display: flex; gap: 2px; } .hj-pbar i { display: block; height: 100%; background: var(--hj-c1); } .hj-pbar i.g { background: var(--green); } /* listas (próxima ação, agenda, alertas, integrações) */ .hj-list { list-style: none; margin: 14px 0 0; padding: 0; } .hj-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); } .hj-list li:first-child { border-top: 0; padding-top: 0; } .hj-list .body { flex: 1; min-width: 0; } .hj-list .t { font-weight: 600; color: var(--text); display: block; text-decoration: none; font-size: 14px; } .hj-list a.t:hover { text-decoration: underline; text-underline-offset: 2px; } .hj-list .s { font-size: 12px; color: var(--text3); margin-top: 1px; } .hj-list .btn.sm { flex-shrink: 0; } .hj-list .sev { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text3); } .hj-list .sev.alta { background: var(--red); box-shadow: 0 0 0 4px var(--danger-soft); } .hj-list .sev.media { background: var(--amber); box-shadow: 0 0 0 4px var(--warn-soft); } .hj-list .sev.ok { background: var(--green); } .hj-list .time { font-size: 13px; font-weight: 700; color: var(--text2); width: 46px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .hj-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glass-3); color: var(--text2); white-space: nowrap; flex-shrink: 0; } .hj-tag.ok { background: var(--success-soft); color: var(--green); } .hj-tag.warn { background: var(--warn-soft); color: var(--amber); } .hj-tag.bad { background: var(--danger-soft); color: var(--red); } .hj-more-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-size: 13px; color: var(--text3); text-decoration: none; } .hj-more-link:hover { color: var(--text); } /* funil */ .hj-stages { display: grid; gap: 12px; margin-top: 16px; } .hj-stage { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; gap: 12px; align-items: center; font-size: 13px; color: var(--text); text-decoration: none; min-height: 24px; } .hj-stage:hover .bar i { filter: brightness(1.15); } .hj-stage .bar { height: 10px; border-radius: 5px; background: var(--glass-2); overflow: hidden; } .hj-stage .bar i { display: block; height: 100%; border-radius: 5px; background: var(--hj-c1); transition: width .3s; } .hj-stage .bar i.w { background: var(--amber); } .hj-stage .bar i.g { background: var(--green); } .hj-stage .n { text-align: right; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* saúde técnica, recolhida */ .hj-saude { margin-top: 20px; } .hj-saude > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--text2); border-radius: 12px; } .hj-saude > summary::-webkit-details-marker { display: none; } .hj-saude > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 6px 0 4px; transition: transform .2s; } .hj-saude[open] > summary::before { transform: rotate(45deg); } .hj-saude > summary:hover { color: var(--text); background: var(--glass-2); } .hj-saude > summary .icon { width: 18px; height: 18px; } .hj-saude > summary .hj-tag { margin-left: 6px; } .hj-saude-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; } .hj-saude-grid .card { margin: 0; } .hj-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text2); line-height: 1.8; margin-top: 12px; } .hj-mono .st-ok { color: var(--green); } .hj-mono .st-parcial { color: var(--amber); } .hj-mono .st-erro { color: var(--red); } @media (max-width: 960px) { .hj-head { margin: 4px 0 14px; } .hj-head h1 { font-size: 32px; } .hj-grid { gap: 12px; } .hj-fat, .hj-caixa, .hj-next, .hj-agenda, .hj-pipe, .hj-alerts { grid-column: 1 / -1; } .hj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hj-quick { flex-wrap: nowrap; overflow-x: auto; margin: -6px calc(-1 * var(--main-px, 16px)) 16px; padding: 0 var(--main-px, 16px) 2px; scrollbar-width: none; } .hj-quick::-webkit-scrollbar { display: none; } .hj-quick .btn { flex-shrink: 0; } .hj-big { font-size: 38px; } .hj-chart svg { height: 160px; } .hj-kpi .v { font-size: 26px; } .hj-stage { grid-template-columns: 104px minmax(0, 1fr) 92px; } .hj-saude-grid { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================================================== PERFORMANCE (marketing) · Hoje do perfil mkt (views/home_mkt.php + _partials/mkt_painel.php) Reusa toda a gramática hj-*; aqui só o que é próprio: linha de frescor, janela, tabela de campanhas e a lista da DM. Cores só por token. Doc: docs/MKT_PERFORMANCE.md. ===================================================================================================== */ .mk .hj-head { align-items: flex-start; } .mk-sync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--text3); } .mk-sync-txt { min-width: 0; } .mk-dot { display: inline-block; vertical-align: middle; margin: -2px 9px 0 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--success-soft); } .mk-dot.warn { background: var(--amber); box-shadow: 0 0 0 4px var(--warn-soft); } .mk-dot.bad { background: var(--red); box-shadow: 0 0 0 4px var(--danger-soft); } .mk-dot.off { background: var(--text3); box-shadow: none; } .mk-sync .mk-sync-btn { height: 30px; padding: 0 12px 0 10px; font-size: 13px; } .mk-sync .mk-sync-btn[disabled] { opacity: .55; cursor: default; } .mk-sync-motivo { font-size: 12px; color: var(--text3); } .mk-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-2); } .mk-seg a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--text2); text-decoration: none; } .mk-seg a:hover { color: var(--text); } .mk-seg a.on { background: var(--glass-strong); color: var(--text); font-weight: 600; } .mk .hj-lines b .mk-of { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text3); } .mk-legend { margin-top: 6px; } .mk-camps { margin-top: 12px; } .mk-camp { display: grid; grid-template-columns: minmax(0, 1fr) 78px 92px 120px 54px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13px; } .mk-camp.h { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--text3); } .mk-camp .nm { min-width: 0; } .mk-camp .nm .t { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-camp .sub { display: block; font-size: 12px; color: var(--text3); margin-top: 1px; } .mk-camp .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .mk-camp.h .num { color: var(--text3); white-space: normal; } .mk-camp .num small { display: block; font-size: 11px; color: var(--text3); } .mk .hj-stage .bar i.mk-dim, .mk .hj-pbar i.mk-dim { background: var(--hj-c2); } .mk-sync-aviso { margin-top: 4px; font-size: 12px; color: var(--text2); } .mk-sync-aviso:empty { display: none; } .mk-sync-aviso a { color: var(--text); text-decoration: underline; } .mk-dm, .mk-full { grid-column: 1 / -1; } .mk-tab-wrap { margin-top: 12px; overflow-x: auto; } .mk-tab { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .mk-tab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text3); padding: 0 10px 8px 0; white-space: nowrap; } .mk-tab td { padding: 10px 10px 10px 0; border-top: 1px solid var(--hair); vertical-align: top; color: var(--text); } .mk-tab .n { text-align: right; white-space: nowrap; } .mk-tab th.n { text-align: right; } .mk-tab td small, .mk-tab .sub { display: block; font-size: 11px; color: var(--text3); margin-top: 1px; } .mk-tab .t { font-weight: 600; } .mk-tab .sub a { color: var(--text2); } .mk-tab tr.tot td { font-weight: 700; border-top: 1px solid var(--line2); } .mk-tab td.vazio { color: var(--text3); } .mk .hj-h { flex-wrap: wrap; row-gap: 4px; } #mk-corpo { transition: opacity .15s ease; } #mk-corpo.mk-troca { opacity: .6; } @media (max-width: 960px) { .mk-seg { width: 100%; justify-content: space-between; } .mk-seg a { flex: 1; justify-content: center; } .mk-camp { grid-template-columns: minmax(0, 1fr) 70px 84px; } .mk-camp .opt { display: none; } } /* ===================================================================================================== PACIENTE 360 · composição do protótipo apple/paciente.html Cabeçalho: avatar 88, nome 34, ações em pílula, números com divisórias. Visão: cards soltos em duas colunas (340 + resto). As outras abas continuam dentro do cartão .pf-body. ===================================================================================================== */ .pf-page { max-width: 1360px; margin: 0; } .pf-head-v3 { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 46%); gap: 22px; align-items: center; padding: 26px; } .pf-head-v3 .pf-av-xl { width: 88px; height: 88px; border-radius: 50%; font-size: 30px; font-weight: 700; color: #F4EEED; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .pf-head-v3 .pf-name-block { flex: none; } .pf-head-v3 .pf-name { font-size: 34px; font-weight: 750; letter-spacing: -.035em; line-height: 1.1; margin: 0; } .pf-head-v3 .pf-tags { margin-top: 10px; gap: 6px; } .pf-head-v3 .pf-tags .tag { text-decoration: none; height: 22px; display: inline-flex; align-items: center; } .pf-head-v3 .pf-actions { gap: 8px; align-self: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; } .pf-head-v3 .pf-name-block { min-width: 0; } .pf-head-v3 .pf-actions .btn { height: 38px; padding: 0 16px; } .pf-head-v3 .pf-top { display: contents; } .pf-btn-icon { width: 38px; padding: 0 !important; justify-content: center; } .pf-btn-icon.sm { width: 32px; height: 32px; } .pf-stats-v3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--pf-n, 7), minmax(0, 1fr)); gap: 0; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--hair); } .pf-stats-v3 .pf-stat { padding: 0 16px; border-left: 1px solid var(--hair); min-width: 0; } .pf-stats-v3 .pf-stat:first-child { padding-left: 0; border-left: 0; } .pf-stats-v3 .pf-stat-val { font-size: 18px; font-weight: 750; letter-spacing: -.02em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-stats-v3 .pf-stat-val.warn { color: var(--amber); } .pf-stats-v3 .pf-stat-val.danger { color: var(--red); } .pf-stats-v3 .pf-stat-val.ok { color: var(--green); } .pf-stats-v3 .pf-stat-val.muted { color: var(--text3); font-weight: 600; } .pf-stats-v3 .pf-stat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-stat-link { color: var(--text2); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; min-height: 24px; align-items: center; } /* abas: pílulas com ícone em qualquer largura (o v2 escondia o ícone abaixo de 1500 px) */ .pf-tab .icon { display: inline-block !important; width: 15px; height: 15px; color: var(--text2); } .pf-tab.active .icon { color: var(--text); } .pf-tabs { padding: 3px; } /* corpo da Visão: cards soltos */ .pf-body-visao { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; } .pf-grid-v3 { grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; } .pf-grid-v3 .pf-col { display: grid; gap: 16px; min-width: 0; } .pf-grid-v3 .pf-card { margin: 0; padding: 20px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); } .pf-grid-v3 .pf-card-ai { background: linear-gradient(135deg, var(--gold-soft), var(--glass)); } .pf-h { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; color: var(--text); } .pf-h .more { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text3); display: inline-flex; align-items: center; gap: 5px; min-height: 28px; text-decoration: none; } .pf-h .more:hover { color: var(--text); } .pf-h .pf-ia { color: var(--amber); font-weight: 600; font-size: 12px; } .pf-h .pf-ia .icon { width: 14px; height: 14px; } .pf-grid-v3 .pf-card-h { margin-bottom: 0; } .pf-grid-v3 .pf-card-h h3 { font-size: 15px; font-weight: 700; } .pf-grid-v3 .pf-card-h h3 .icon { color: var(--text2); width: 18px; height: 18px; } .pf-empty { margin: 12px 0 0; color: var(--text3); font-size: 13px; line-height: 1.5; } .pf-alerta { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; margin-top: 12px; font-size: 13px; line-height: 1.45; } .pf-alerta .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .pf-alerta.bad { background: var(--danger-soft); color: var(--red); } .pf-alerta.warn { background: var(--warn-soft); color: var(--amber); } .pf-alerta b { font-weight: 700; } .pf-alerta span { color: var(--text2); } .pf-alerta-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pf-alerta-acts { margin-top: 12px; } .pf-rows { list-style: none; margin: 10px 0 0; padding: 0; } .pf-rows li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--hair); } .pf-rows li:first-child { border-top: 0; } .pf-rows .grow { flex: 1; min-width: 0; } .pf-rows .k { font-size: 12px; color: var(--text3); } .pf-rows .v { font-weight: 600; color: var(--text); font-size: 14px; overflow-wrap: anywhere; } .pf-rows .v a, .pf-rows a.v { color: inherit; text-decoration: none; } .pf-rows .v a:hover, .pf-rows a.v:hover { text-decoration: underline; text-underline-offset: 2px; } .pf-rows .v.ok { color: var(--green); } .pf-rows .pf-v-soft { font-weight: 400; color: var(--text2); font-size: 13px; } .pf-rows .pf-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 500; } .pf-n { font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); } .pf-resumo .pf-md { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text); } /* lembretes no formato do protótipo: círculo de concluir à esquerda */ .pf-grid-v3 .lemb-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; margin-top: 14px; } .pf-grid-v3 .lemb-form input { height: 38px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); padding: 0 12px; } .pf-grid-v3 .lemb-form .btn { height: 38px; } .pf-grid-v3 .lemb { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 0; border: 0; border-top: 1px solid var(--hair); background: transparent; border-radius: 0; } .pf-grid-v3 .lemb-lista .lemb:first-child { border-top: 0; } .pf-grid-v3 .lemb-ok { grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--glass-line); background: transparent; color: transparent; font-size: 0; position: relative; cursor: pointer; } .pf-grid-v3 .lemb-ok::before { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--green); opacity: 0; } .pf-grid-v3 .lemb-ok:hover, .pf-grid-v3 .lemb-ok:focus-visible { border-color: var(--green); } .pf-grid-v3 .lemb-ok:hover::before, .pf-grid-v3 .lemb-ok:focus-visible::before { opacity: 1; } .pf-grid-v3 .lemb-ok::after { content: ""; position: absolute; inset: -10px; } .pf-grid-v3 .lemb-txt { grid-column: 2; font-weight: 600; font-size: 14px; color: var(--text); } .pf-grid-v3 .lemb-meta { grid-column: 2; font-size: 12px; color: var(--text3); margin-top: 1px; } .pf-grid-v3 .lemb-venceu .lemb-meta { color: var(--red); } .pf-grid-v3 .lemb-feito { grid-template-columns: minmax(0, 1fr); } .pf-grid-v3 .lemb-feito .lemb-txt, .pf-grid-v3 .lemb-feito .lemb-meta { grid-column: 1; } .pf-grid-v3 .lemb-feitos { border-top-color: var(--hair); } .pf-grid-v3 .lemb-feitos summary { min-height: 32px; display: flex; align-items: center; color: var(--text3); font-size: 13px; cursor: pointer; } .pf-grid-v3 .lemb-vazio { margin: 12px 0 0; font-size: 13px; } .pf-grid-v3 #anot-text { background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 14px; margin-top: 12px; color: var(--text); } /* linha do tempo */ .pf-tl { list-style: none; margin: 14px 0 0; padding: 0; position: relative; } .pf-tl::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--glass-3); border-radius: 1px; } .pf-tl li { display: flex; gap: 14px; padding: 8px 0; position: relative; align-items: flex-start; } .pf-tl .dot { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--glass-strong); border: 1px solid var(--glass-line); z-index: 1; color: var(--text2); } .pf-tl .dot .icon { width: 15px; height: 15px; } .pf-tl .dot.ok { color: var(--green); } .pf-tl .dot.warn { color: var(--amber); } .pf-tl .dot.bad { color: var(--red); } .pf-tl .dot.next { color: var(--gold); } .pf-tl .body { flex: 1; min-width: 0; padding-top: 5px; } .pf-tl .t { font-weight: 600; font-size: 14px; color: var(--text); } .pf-tl .t a { color: inherit; text-decoration: none; } .pf-tl .t a:hover { text-decoration: underline; text-underline-offset: 2px; } .pf-tl .s { font-size: 12px; color: var(--text3); margin-top: 1px; overflow-wrap: anywhere; } .pf-tl .when { margin-left: auto; padding-top: 6px; font-size: 12px; color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; } .pf-tl li.riscado .t { text-decoration: line-through; opacity: .7; } /* menu do WhatsApp em vidro */ .wa-drop-menu { background: var(--glass-strong) !important; border-color: var(--glass-line) !important; border-radius: 16px !important; padding: 6px !important; min-width: 280px !important; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--elev) !important; } .wa-drop-item { border-radius: 12px !important; } .wa-drop-item:hover { background: var(--glass-3) !important; } .wa-drop-chev { width: 12px !important; height: 12px !important; margin-left: 2px; opacity: .7; } @media (max-width: 1100px) { .pf-stats-v3 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; } .pf-stats-v3 .pf-stat:nth-child(5) { padding-left: 0; border-left: 0; } } @media (max-width: 960px) { .pf-head-v3 { grid-template-columns: auto minmax(0, 1fr); padding: 20px 16px; gap: 14px; } .pf-head-v3 .pf-av-xl { width: 64px; height: 64px; font-size: 22px; } .pf-head-v3 .pf-name { font-size: 26px; } .pf-head-v3 .pf-actions { grid-column: 1 / -1; width: auto; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; } .pf-head-v3 .pf-actions::-webkit-scrollbar { display: none; } .pf-head-v3 .pf-actions .btn { flex-shrink: 0; } .pf-stats-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .pf-stats-v3 .pf-stat { padding: 0; border-left: 0; } .pf-grid-v3 { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pf-grid-v3 .pf-col { gap: 12px; } .pf-grid-v3 .lemb-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pf-grid-v3 .lemb-form input:first-child { grid-column: 1 / -1; } } /* ===================================================================================================== AGENDA · DIA · composição do protótipo apple/agenda.html Esquerda 272 (mini-mês, profissionais, resumo) · centro (linha do tempo) · direita 330 (atendimento). A posição na linha do tempo vem de --top/--dur em minutos e de --ag-px (altura da hora). ===================================================================================================== */ .ag { --ag-px: 64px; --ag-gut: 66px; } .ag-head { margin-bottom: 16px; } .ag-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ag-acts .btn.primary { height: 38px; } .ag-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); } .ag-seg a { height: 32px; min-width: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } .ag-seg a:hover { color: var(--text); } .ag-seg a[aria-current] { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px -4px rgba(0,0,0,.4); } .ag-seg a[aria-label] { padding: 0 10px; } .ag-week { display: none; } .ag-cal { display: grid; grid-template-columns: 272px minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .ag-left, .ag-right { display: grid; gap: 16px; position: sticky; top: 12px; } .main.has-hub-tabs .ag-left, .main.has-hub-tabs .ag-right { top: 62px; } .ag-cal > .card, .ag-left > .card, .ag-right > .card { margin: 0; padding: 20px; border-radius: 22px; min-width: 0; } .ag-month .mh { display: flex; align-items: center; justify-content: space-between; } .ag-month .mh b { font-size: 15px; } .ag-month .nav2 { display: flex; gap: 4px; } .ag-month .mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 12px; text-align: center; } .ag-month .dw { font-size: 11px; font-weight: 700; color: var(--text3); padding-bottom: 4px; } .ag-month .mgrid a { height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--text2); position: relative; font-variant-numeric: tabular-nums; text-decoration: none; } .ag-month .mgrid a:hover { background: var(--glass-2); } .ag-month .mgrid a.dim { color: var(--text3); opacity: .5; } .ag-month .mgrid a.has::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text3); } .ag-month .mgrid a.sel { box-shadow: inset 0 0 0 2px var(--text2); color: var(--text); } .ag-month .mgrid a.today { background: var(--gold); color: var(--gold-on); box-shadow: none; } .ag-month .mgrid a.today::after { background: var(--gold-on); } .ag-profs .rows { list-style: none; margin: 10px 0 0; padding: 0; } .ag-profs li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; font-size: 14px; } .ag-profs input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; flex-shrink: 0; } .ag-profs .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .ag-profs label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .ag-profs small { margin-left: auto; color: var(--text3); font-weight: 600; } .ag-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .ag-sum div { padding: 10px 12px; border-radius: 14px; background: var(--glass-2); } .ag-sum b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.02em; color: var(--text); } .ag-sum b.up { color: var(--green); } .ag-sum b.warn { color: var(--amber); } .ag-sum small { color: var(--text3); font-size: 12px; } .ag-day { padding: 0 !important; overflow: hidden; } .ag-dayh { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--hair); } .ag-dayh .dn { font-size: 34px; font-weight: 750; letter-spacing: -.03em; color: var(--text); } .ag-dayh .dw2 { font-weight: 600; color: var(--text2); } .ag-dayh .hj-tag { margin-left: auto; } .ag-fullday { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 10px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--amber); font-size: 13px; font-weight: 600; } .ag-empty { display: grid; justify-items: center; gap: 6px; padding: 56px 24px; text-align: center; } .ag-empty b { font-size: 16px; color: var(--text); } .ag-empty span { color: var(--text3); font-size: 14px; margin-bottom: 8px; } .ag-tline { position: relative; margin: 12px 12px 12px 0; height: calc(var(--ag-h) * var(--ag-px)); } .ag-tline .hr { position: absolute; left: 0; right: 0; top: calc(var(--k) * var(--ag-px)); height: var(--ag-px); border-top: 1px solid var(--hair); } .ag-tline .hr span { position: absolute; left: 12px; top: -9px; font-size: 11px; font-weight: 600; color: var(--text3); width: 40px; font-variant-numeric: tabular-nums; } .ag-tline .hr::after { content: ""; position: absolute; left: var(--ag-gut); right: 0; top: 50%; border-top: 1px dashed var(--hair); opacity: .6; } .agd-ev { position: absolute; top: calc(var(--top) / 60 * var(--ag-px)); height: max(28px, calc(var(--dur) / 60 * var(--ag-px) - 3px)); left: calc(var(--ag-gut) + (100% - var(--ag-gut) - 8px) * var(--i) / var(--n)); width: calc((100% - var(--ag-gut) - 8px) / var(--n) - 4px); border-radius: 12px; padding: 6px 12px; border: 0; border-left: 3px solid; overflow: hidden; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; text-align: left; font: inherit; color: inherit; background: none; transition: transform .15s, box-shadow .15s; } .agd-ev:hover { transform: translateX(2px); } .agd-ev .agd-ev-b { min-width: 0; } .agd-ev .t { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agd-ev .s { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agd-ev .st { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; } .agd-ev .st .icon { width: 13px; height: 13px; } .agd-ev .st.warn { color: var(--amber); } .agd-ev .st.bad { color: var(--red); } .agd-ev.proc { background: var(--ag-proc-bg); border-color: var(--green); color: var(--ag-proc-tt); } .agd-ev.cons { background: var(--ag-cons-bg); border-color: var(--blue, var(--info)); color: var(--ag-cons-tt); } .agd-ev.ext { background: var(--warn-soft); border-color: var(--amber); color: var(--amber); } .agd-ev.pausa { background: repeating-linear-gradient(135deg, var(--glass-2) 0 8px, transparent 8px 16px); border-color: var(--glass-line); color: var(--text3); } .agd-ev.done { opacity: .55; } .agd-ev.sel { box-shadow: 0 0 0 2px var(--text), 0 14px 28px -16px rgba(0,0,0,.9); z-index: 2; } .agd-ev[hidden] { display: none; } .agd-now { position: absolute; left: 56px; right: 0; top: calc(var(--top) / 60 * var(--ag-px)); height: 0; border-top: 2px solid var(--red); z-index: 3; pointer-events: none; } .agd-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); } .agd-now span { position: absolute; left: -56px; top: -9px; width: 46px; text-align: right; font-size: 11px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; } /* painel do atendimento */ .ag-det-who { display: flex; gap: 14px; align-items: center; } .ag-av { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .ag-det h3 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; color: var(--text); } .ag-det .when { color: var(--text2); font-size: 13px; margin-top: 2px; } .ag-det-who .hj-tag { margin-top: 6px; } .ag-det-rows { list-style: none; margin: 14px 0 0; padding: 0; } .ag-det-rows li { display: flex; gap: 10px; align-items: center; min-height: 40px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text); } .ag-det-rows .k { color: var(--text3); width: 96px; flex-shrink: 0; } .ag-det-obs { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); font-size: 13px; color: var(--text2); line-height: 1.45; } .ag-det-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } .ag-det-acts .wide { grid-column: 1 / -1; } .ag-det-acts .btn { height: 38px; } /* folhas (celular: atendimento · reagendar) */ .ag-sheet { border: 1px solid var(--glass-line); border-radius: 26px; padding: 0; width: min(480px, 92vw); max-height: 88dvh; color: var(--text); background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 80px -30px rgba(0,0,0,.9); } .ag-sheet::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ag-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .ag-sheet-b { padding: 6px 20px 16px; overflow-y: auto; } .ag-sheet-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 18px; } .ag-reag-who { margin: 0 0 12px; color: var(--text2); font-size: 14px; } .ag-reag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ag-field { display: grid; gap: 6px; } .ag-field span { font-size: 12px; font-weight: 600; color: var(--text2); } .ag-field input { height: 40px; padding: 0 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); font: inherit; } .ag-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text2); min-height: 24px; } .ag-check input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; } .ag-err { margin: 12px 0 0; color: var(--red); font-size: 13px; } @media (max-width: 1279px) { .ag-cal { grid-template-columns: 250px minmax(0, 1fr); } .ag-right { display: none; } } @media (max-width: 960px) { .ag { --ag-px: 96px; --ag-gut: 56px; } .ag-cal { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ag-left { display: none; } .ag-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 12px; } .ag-week a { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 16px; font-size: 11px; font-weight: 700; color: var(--text3); text-decoration: none; } .ag-week a b { font-size: 17px; color: var(--text); font-weight: 700; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .ag-week a.sel b { box-shadow: inset 0 0 0 2px var(--text2); } .ag-week a.today b { background: var(--gold); color: var(--gold-on); box-shadow: none; } .ag-acts .ag-seg[aria-label="Vista"] { order: 3; } .ag-acts { width: 100%; } .ag-dayh { padding: 14px 16px 10px; } .ag-dayh .dn { font-size: 26px; } .ag-tline .hr span { left: 8px; } .agd-now { left: 48px; } .ag-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 28px 28px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); } .ag-sheet::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--glass-3); margin: 8px auto 0; } .ag-reag-grid { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-transparency: reduce) { .ag-sheet { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ===================================================================================================== PIPELINE · composição do protótipo apple/pipeline.html Cabeçalho enxuto, ferramentas em chips, números do funil numa faixa com divisórias, colunas de 272 px. ===================================================================================================== */ .kb-head { margin-bottom: 14px; } /* o .main do kanban é uma coluna flex de altura fixa: nada além do quadro pode encolher */ .kb-head, .kb-tools, .kb-strip, .kb-stages { flex-shrink: 0; } .kb-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .kb-acts .btn { height: 38px; } .kb-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; } .kb-tools .kb-busca-wrap { position: relative; margin: 0; } .kb-tools .kb-busca { width: 240px; height: 36px; padding-left: 36px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); } .kb-tools .kb-busca-icon { position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; color: var(--text3); } .kb-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; font-weight: 600; color: var(--text2); white-space: nowrap; cursor: pointer; text-decoration: none; font-family: inherit; } .kb-chip:hover { background: var(--glass-3); color: var(--text); } .kb-chip .icon { width: 14px; height: 14px; } .kb-chip b { color: var(--text); font-weight: 600; } .kb-chip .muted { color: var(--text3); font-weight: 600; } .kb-chip.on, .kb-chip.active, .kb-chip[aria-pressed="true"] { background: var(--gold); color: var(--gold-on); border-color: transparent; } .kb-chip.on b { color: inherit; } .kb-chip.warn { color: var(--red); } .kb-chip .ct { background: var(--red); color: var(--on-solid, #fff); border-radius: 9px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; margin: 0; } .kb-chip.active .ct { background: var(--gold-on); color: var(--gold); } .pl-filter-wrap { position: relative; } .kb-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 !important; margin: 0 0 18px; border-radius: 22px; } .kb-strip > div { padding: 16px 20px; border-left: 1px solid var(--hair); min-width: 0; } .kb-strip > div:first-child { border-left: 0; } .kb-strip .v { font-size: 26px; font-weight: 750; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .kb-strip .d { font-size: 12px; color: var(--text3); } .kb-strip .d b { font-weight: 700; color: var(--text); } .kb-strip .d b.down { color: var(--red); } .kb-stages { display: none; } .kanban { grid-template-columns: repeat(9, 272px); gap: 14px; padding: 2px 2px 18px; scroll-snap-type: x proximity; } .kb-col { scroll-snap-align: start; min-height: 360px; } .kb-col-h { background: var(--glass-strong); border-radius: 22px 22px 0 0; padding: 14px 16px 10px; } .kb-col-tt { font-size: 14px; font-weight: 700; } .kb-col-sub { font-size: 12px; color: var(--text3); } .kb-n { font-size: 12px; font-weight: 700; color: var(--text3); } .kb-v { font-size: 12px; font-weight: 600; color: var(--text2); } .kb-col-body { padding: 0 10px 10px; gap: 8px; } .kb-card { border-radius: 18px; padding: 12px 12px 10px; } .kb-nome { font-size: 14px; font-weight: 700; } @media (max-width: 960px) { .kb-tools .kb-busca-wrap, .kb-tools .kb-chip:not(#btn-modo-cobranca):not(#btn-filtros) { display: none; } .kb-tools .kb-chip { height: 40px; } .kb-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .kb-strip::-webkit-scrollbar { display: none; } .kb-strip > div { flex: 0 0 46%; scroll-snap-align: start; } .kb-stages { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--main-px, 16px)) 12px; padding: 0 var(--main-px, 16px); } .kb-stages::-webkit-scrollbar { display: none; } .kb-stages .kb-chip { flex-shrink: 0; } .kanban { grid-template-columns: repeat(9, calc(100vw - 48px)); scroll-snap-type: x mandatory; scroll-padding: 0 16px; } .kb-acts .btn:not(.primary) { display: none; } } /* ===================================================================================================== WHATSAPP · CONVERSAS · composição do protótipo apple/whatsapp.html Três painéis: lista (320) · conversa · contexto do lead ou paciente (330, só acima de 1280 px). ===================================================================================================== */ .wa-ws-compact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .wa-ws-compact .wa-ws-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); margin: 0; overflow-x: auto; scrollbar-width: none; position: static; } .wa-ws-compact .wa-ws-tab { height: 32px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; } .wa-ws-compact .wa-ws-tab:hover { color: var(--text); } .wa-ws-compact .wa-ws-tab.on { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px -4px rgba(0,0,0,.4); } .wa-ws-compact .wa-ws-tab .ct { background: var(--glass-3); color: var(--text2); padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .wa-ws-compact .wa-ws-tab.on .ct { background: var(--gold-soft); color: var(--gold); } .wa-ws-compact .wa-ws-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .wa-ws-compact .msg-kpis { margin: 0; padding: 0; background: transparent; border: 0; gap: 12px; font-size: 13px; } .msg-shell { grid-template-columns: 320px minmax(0, 1fr) 330px !important; gap: 14px !important; height: calc(100dvh - 128px) !important; min-height: 520px !important; } .main.has-hub-tabs .msg-shell { height: calc(100dvh - 176px) !important; } .msg-inbox, .msg-thread, .msg-ctx { background: var(--glass) !important; border: 1px solid var(--glass-line) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); } .msg-inbox-head { background: transparent !important; border-bottom-color: var(--hair) !important; padding: 14px 14px 10px !important; } .msg-inbox-head .msg-inbox-title { font-size: 22px; font-weight: 750; letter-spacing: -.03em; margin: 0 0 10px; color: var(--text); } .msg-search { background: var(--glass-2) !important; border-color: var(--glass-line) !important; border-radius: 12px !important; } .msg-tabs { display: inline-flex !important; padding: 3px; gap: 2px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); } .msg-tab { border: 0 !important; border-radius: 999px !important; height: 30px; padding: 0 12px !important; font-weight: 600 !important; color: var(--text2) !important; background: transparent !important; } .msg-tab.on { background: var(--glass-3) !important; color: var(--text) !important; box-shadow: inset 0 1px 0 var(--glass-hi); } .msg-item { border-left: 0 !important; border-radius: 16px; margin: 2px 8px; padding: 10px 10px !important; } .msg-item:hover { background: var(--glass-2) !important; } .msg-item.on { background: var(--glass-3) !important; box-shadow: inset 0 1px 0 var(--glass-hi); } .msg-item.on .msg-item-preview, .msg-item.on .msg-item-time { color: var(--text2) !important; } .msg-item-badge { background: var(--gold) !important; color: var(--gold-on) !important; } .msg-canal-dot { border-color: var(--v3-base) !important; } .msg-item.on .msg-canal-dot { border-color: var(--v3-base) !important; } .msg-thread > .head-row { background: transparent !important; border-bottom-color: var(--hair) !important; padding: 12px 16px !important; } .msg-thread > .head-row .h1 { font-size: 15px !important; font-weight: 700; } .msg-thread > .head-row .sub { color: var(--text3) !important; } .msg-thread > .head-row .avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; } .msg-thread > .card, .msg-thread > .card.flush { background: transparent !important; } .msg-thread #msg-list { background: transparent; } .msg-bubble { border-radius: 16px !important; padding: 10px 14px !important; max-width: 76% !important; } .msg-bubble.entrada { background: var(--glass-2) !important; color: var(--text); border-bottom-left-radius: 6px !important; border: 1px solid var(--glass-line); } .msg-bubble.saida { background: var(--gold) !important; color: var(--gold-on) !important; border-bottom-right-radius: 6px !important; } .msg-bubble.saida .msg-meta, .msg-bubble.saida .msg-by { color: color-mix(in srgb, var(--gold-on) 70%, transparent) !important; } .msg-meta { color: var(--text3); } .conv-tags { padding: 8px 16px 10px !important; } .msg-thread > .card > div[style*="border-top"] { background: transparent !important; border-top: 1px solid var(--hair) !important; box-shadow: none !important; padding: 12px 14px 14px !important; } .msg-thread #msg-input { border-radius: 18px !important; background: var(--glass-2) !important; border: 1px solid var(--glass-line) !important; color: var(--text) !important; min-height: 46px !important; } .msg-thread #btn-enviar { border-radius: 999px !important; height: 44px; padding: 0 20px !important; } /* contexto (direita) */ .msg-ctx { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 22px 18px; scrollbar-width: none; } .msg-ctx-empty { margin: auto; text-align: center; color: var(--text3); font-size: 13px; padding: 20px; } .ctx-who { text-align: center; } .ctx-av { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .ctx-who h3 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.02em; color: var(--text); } .ctx-who .tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .ctx-alert { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--danger-soft); color: var(--red); font-size: 13px; font-weight: 700; } .ctx-alert .icon { width: 16px; height: 16px; } .ctx-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .ctx-acts a, .ctx-acts button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text2); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; } .ctx-acts a:hover, .ctx-acts button:hover { background: var(--glass-3); color: var(--text); } .ctx-acts .icon { width: 20px; height: 20px; } .ctx-sla { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--warn-soft); color: var(--amber); font-size: 13px; font-weight: 600; line-height: 1.4; } .ctx-sla .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .ctx-h { margin: 18px 0 8px; font-size: 12px; font-weight: 600; color: var(--text3); } .ctx-quick { display: grid; gap: 8px; } .ctx-quick button { text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text2); font-size: 13px; line-height: 1.4; cursor: pointer; font-family: inherit; } .ctx-quick button:hover { background: var(--glass-3); color: var(--text); } .ctx-quick b { display: block; color: var(--text); font-weight: 700; margin-bottom: 2px; } .ctx-rows { list-style: none; margin: 0; padding: 0; } .ctx-rows li { display: flex; justify-content: space-between; gap: 10px; min-height: 36px; align-items: center; border-top: 1px solid var(--hair); font-size: 13px; } .ctx-rows li:first-child { border-top: 0; } .ctx-rows .k { color: var(--text3); } .ctx-rows .v { color: var(--text); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-rows .v a { color: inherit; text-decoration: none; } .ctx-rows .v a:hover { text-decoration: underline; text-underline-offset: 2px; } .msg-ctx-details { margin: 0 0 12px; } .msg-ctx-details > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text2); cursor: pointer; list-style: none; } .msg-ctx-details > summary::-webkit-details-marker { display: none; } .msg-ctx-details .msg-ctx { padding: 14px 0 0; overflow: visible; } @media (max-width: 1279px) { .msg-shell { grid-template-columns: 320px minmax(0, 1fr) !important; } .msg-ctx { display: none; } } @media (max-width: 960px) { .msg-shell { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; min-height: 0 !important; } .msg-inbox { min-height: 60dvh; } .msg-shell > .msg-thread, .msg-shell > .msg-ctx { display: none !important; } .wa-ws-compact .msg-kpis { display: none; } .wa-ws-compact .wa-ws-acts .btn { display: none; } } /* ===================================================================================================== CABEÇALHOS ANTIGOS na linguagem nova · .head-row (semana, mês, listas) e o "hero" das homes de sec/dra/mkt viram título solto de 34 px, como na Hoje do administrador; grupos de botões viram segmento. ===================================================================================================== */ .head-row { margin-bottom: 18px; } @media (min-width: 769px) { .head-row { align-items: flex-end; } .head-row > :first-child { flex: 1 1 460px; } } /* ≤768 o v2 empilha em coluna: base de 460 px viraria altura */ .head-row .h1 { font-size: 30px; font-weight: 750; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; } .head-row .h1 .pill { font-size: 12px; font-weight: 600; background: var(--glass-3); color: var(--text2); vertical-align: middle; margin-left: 10px; } .head-row .sub { color: var(--text3); font-size: 14px; } .head-row .actions .btn-group { border: 1px solid var(--glass-line) !important; border-radius: 999px !important; padding: 3px; gap: 2px; background: var(--glass-2); overflow: visible !important; } .head-row .actions .btn-group .btn, .head-row .actions .btn-group > span.btn { border: 0 !important; border-radius: 999px !important; height: 32px; padding: 0 14px !important; font-size: 13px !important; font-weight: 600; background: transparent; box-shadow: none; color: var(--text2); } .head-row .actions .btn-group > span.btn { background: var(--glass-3) !important; color: var(--text) !important; box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px -4px rgba(0,0,0,.4); } .head-row .actions .btn-group .btn:hover { color: var(--text); } .dra-home .hero, .hero.hero-adm { background: transparent; border: 0; box-shadow: none; border-radius: 0; margin: 0 0 18px; } .dra-home .hero-content, .hero.hero-adm .hero-content { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: end; } .dra-home .hero-content .hero-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .dra-home .hero-content .hello-date { font-size: 14px; color: var(--text3); font-weight: 500; } .dra-home .hero-content .hello-h { grid-column: 1; margin: 2px 0 0; } .dra-home .hero-content .hello-msg { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--text2); text-wrap: pretty; } .dra-home .hero-content .mission-badge, .dra-home .hero-content .hero-weather { background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 999px; } @media (max-width: 960px) { .head-row .h1 { font-size: 28px; } .dra-home .hero-content { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================================================== ALVOS · WCAG 2.5.8 (24 px no mouse) e 2.5.5 (44 px no toque), medidos pelo qa_audit.js Mouse: campos com 32 px e links dentro de texto/tabela/lista ganham 4 px de área clicável em cima e embaixo (padding em elemento inline não move o texto). Toque: 44 px de verdade nos controles pequenos. ===================================================================================================== */ @media (pointer: fine) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select { min-height: 32px; } input[type="range"] { min-height: 24px; } } .main .al-action, .main .al-link, a.tag, .men-ev-more, .w-more { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; } .main :is(td, th, li, p, dd, dt, small, .s, .k, .d, .sub, .muted, .pf-rows, .hj-list, .pf-tl, .ctx-rows, .tl-tt, .tl-meta, .lead-ev-desc, .al-row, .al-body, .log-row, .fn-row, .pulse-row, .comissao-meta, .end-note, .reat-tt, .reat-main, .reat-meta, .day-h, .w-lbl-row, .crumb, .tl-desc, .fin-sub, .reg-tt, .reg-item, .reg-body, .rt-tt, .rt-body) a:not(.btn):not([class*="btn"]):not(.tag):not(.chip):not(.kb-chip):not(.sb-item):not(.sb-sub-item):not(.hub-tab):not(.pf-tab):not(.msg-item):not(.dock-item):not(.hj-stage):not(.agd-ev):not(.men-day-link):not(.mgrid a) { padding-block: 5px; } .men-day-link { display: inline-grid; place-items: center; min-width: 26px; min-height: 26px; } a.ag-pc-wa, .fn-wa { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; } @media (pointer: coarse) { .sb-search, .hj-quick .btn, .btn.sm, .ag-seg a, .kb-chip, .chip, .ag-zoom-btn, .reg-chip, .msg-tab, .ctx-acts a, .ctx-acts button, .ctx-quick button, .lemb-feitos summary, .pf-alerta-link, .hj-more-link, .pf-h .more, .hj-h .more, .ag-month .nav2 .btn, .pf-btn-icon.sm, .wa-drop-item { min-height: 44px; } .btn.sm { height: 44px; } .pf-btn-icon.sm { width: 44px; } .ag-seg a { height: 44px; } .ag-seg { padding: 2px; } .kb-chip, .chip, .reg-chip { height: 44px; } .ag-month .mgrid a, .men-day-link { min-height: 40px; min-width: 40px; height: 40px; border-radius: 12px; } a.tag, .pf-stat-link, .pf-stats-v3 .pf-stat-sub a { display: inline-flex; align-items: center; min-height: 44px; } .hj-list li, .pf-rows li, .ctx-rows li { min-height: 48px; } .hj-list a.t, .pf-rows .v a, .pf-tl .t a, .ctx-rows .v a { display: inline-flex; align-items: center; min-height: 44px; } .agd-ev { min-height: 44px; } .msg-item { min-height: 56px; } .um-persona, .sb .user-menu a { min-height: 44px; } .main .al-action, .main .al-link, a.tag, .men-ev-more, .w-more, .pf-rows a.v, .reg-item a, .reg-tt a, .tl-tt a { display: inline-flex; align-items: center; min-height: 44px; } .men-day-link, .ag-month .mgrid a { min-height: 44px; min-width: 44px; height: 44px; } .pf-grid-v3 .lemb-form input, .pf-grid-v3 .lemb-form .btn { height: 44px; } .hj-stage { min-height: 44px; } .seg-btn, .ag-h24, .ag-pc-preset, #ag-cancel-toggle, .fn-chip, .ag-zoom-btn, .men-ev-more { min-height: 44px; height: auto; display: inline-flex; align-items: center; } .day-h a, .w-lbl-row a, .w-more { display: inline-flex; align-items: center; min-height: 44px; } /* largura mínima de 44 px nos controles estreitos (ícone do WhatsApp na tabela, lixeira da linha, setas, "+N mais") */ .main td a, .main .al-action, a.ag-pc-wa, .men-ev-more, .btn-row, .ag-seg a, .btn.sm, .seg-btn, .lemb-ok, #btn-add-etq, .conv-tag-add, .status-btn, #mespick-trigger { min-width: 44px; } .lemb-ok, #btn-add-etq, .conv-tag-add, .status-btn, #mespick-trigger { min-height: 44px; } input[type="range"] { min-height: 44px; } .main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]), .main select, .main textarea { min-height: 44px; } } /* ===================================================================================================== AGENDA · SEMANA E MÊS em vidro (24/09/2026, pedido do Cristian: "não está com o visual liquid glass") A grade vira um painel de vidro com linhas finas; dias sem atendimento e horas fora do expediente só rebaixam o tom; eventos têm o mesmo desenho da vista Dia (raio 12, barra à esquerda, cores por token); zoom, 24h, cancelados e presets viram segmento/chips; cabeçalho de dias e coluna das horas em vidro com desfoque porque a grade passa por baixo deles. ===================================================================================================== */ .ag-scroll-wrap { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px; box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); margin-top: 8px; } /* cantos redondos por clip-path, não por overflow: overflow vira contêiner de rolagem e o cabeçalho de dias deixa de fixar no .main */ @media (min-width: 769px) { .ag-scroll-wrap { clip-path: inset(0 round 22px); } .main.has-hub-tabs .ag-h, .main.has-hub-tabs .ag-h-time { top: calc(46px - var(--main-py)); } } /* o sticky mede a partir da caixa de conteúdo (abaixo do padding do .main) */ .ag-grid { background: transparent; border: 0; border-radius: 0; margin-top: 0; } .ag-h, .ag-h-time { background: color-mix(in srgb, var(--v3-base) 55%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--hair); padding: 12px 8px 10px; } .ag-h.ag-h-diaoff { background: color-mix(in srgb, var(--v3-base) 55%, transparent); } .ag-h.ag-h-diaoff .ag-h-dia { opacity: .6; } .ag-h-dia { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; } .ag-h-num { font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .ag-h-hoje .ag-h-num { background: var(--gold); color: var(--gold-on); width: 32px; height: 32px; font-size: 15px; } .ag-h-hoje .ag-h-dia { color: var(--text); } .ag-time { background: color-mix(in srgb, var(--v3-base) 55%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 11px; font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; } .ag-cell { background: transparent; border-top-color: var(--hair); border-right-color: transparent; } .ag-cell::before { border-top-color: var(--hair); opacity: .55; } .ag-cell-fora, .ag-cell-diaoff { background: var(--ag-off); } .ag-cell-fora.ag-cell-diaoff { background: var(--ag-off2); } .ag-cell:hover { background: var(--glass-2); } .ag-cell-bloqueada { background: var(--ag-pausa-bg) !important; border-color: var(--hair) !important; } .ag-allday-label, .ag-allday-cell { background: transparent; border-top-color: var(--hair); } .ag-allday-label { text-transform: none; letter-spacing: 0; font-size: 11px; } .ag-allday-cell:hover { background: var(--glass-2); } .ag-allday-cell-bloqueada { background: var(--ag-pausa-bg); } .ag-allday-ev { border-radius: 10px; padding: 4px 10px; box-shadow: inset 0 1px 0 var(--glass-hi); } /* eventos · mesmo material da vista Dia */ .ag-ev { border-radius: 12px; padding: 6px 10px; border-right-width: 2px; box-shadow: inset 0 1px 0 var(--glass-hi); font-size: 12px; } .ag-ev:hover { transform: translateX(2px); box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 28px -16px rgba(0,0,0,.9); } .ag-ev-tt { font-size: 13px; font-weight: 700; } .ag-ev-curto { padding: 2px 10px; border-radius: 10px; } .ag-ev-curto .ag-ev-tt { font-size: 12px; } .ag-ev-meta { font-size: 11px; } .ag-ev-procedimento { background: var(--ag-proc-bg); border-left-color: var(--green); } .ag-ev-procedimento .ag-ev-tt { color: var(--ag-proc-tt); } .ag-ev-consulta { background: var(--ag-cons-bg); border-left-color: var(--blue, var(--info)); } .ag-ev-consulta .ag-ev-tt { color: var(--ag-cons-tt); } .ag-ev-admin, .ag-ev-externo { background: var(--warn-soft); border-left-color: var(--amber); } .ag-ev-admin .ag-ev-tt, .ag-ev-externo .ag-ev-tt { color: var(--amber); } .ag-ev-bloqueio { background: var(--ag-block-bg); border-left-color: var(--glass-line); } .ag-ev-bloqueio .ag-ev-tt { color: var(--text2); } .ag-ev-pausa { background: repeating-linear-gradient(135deg, var(--glass-2) 0 8px, transparent 8px 16px); border-left-color: var(--glass-line); } .ag-ev-pausa .ag-ev-tt { color: var(--text3); } .ag-ev-st-icon { background: var(--glass-3); color: var(--text2); } .ag-ev-st-icon.ag-st-confirmado { background: var(--green); color: var(--on-solid); } .ag-ev-st-icon.ag-st-realizado { background: var(--text2); color: var(--v3-base); } .ag-st-cancelado { opacity: .45; } .ag-now-line { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); } /* barra de ferramentas da grade · segmento + chips (mesmo desenho da vista Dia) */ .ag-grid-toolbar { gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; } .ag-zoom { padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass-2); overflow: visible; } .ag-zoom-btn { border: 0 !important; border-radius: 999px; background: transparent; height: 32px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--text2); } .ag-zoom-btn:hover:not(.on) { background: transparent; color: var(--text); } .ag-zoom-btn.on { background: var(--glass-3); color: var(--text); font-weight: 600; box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px -4px rgba(0,0,0,.4); } .ag-h24, .ag-cancel-toggle, .ag-pc-preset, .ag-prof-btn { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; font-weight: 600; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; } .ag-h24:hover, .ag-cancel-toggle:hover, .ag-pc-preset:hover, .ag-prof-btn:hover { background: var(--glass-3); color: var(--text); border-color: var(--glass-line); } .ag-h24.on, body.ag-show-cancelados .ag-cancel-toggle, .ag-pc-preset.active, .ag-prof-btn.active { background: var(--gold); color: var(--gold-on); border-color: transparent; font-weight: 600; } .ag-toolbar-exp { font-size: 13px; color: var(--text3); } .ag-legend { background: transparent; padding: 10px 4px 0; margin-top: 10px; gap: 14px; font-size: 12px; color: var(--text3); } .ag-legend i { border-radius: 3px; } /* painéis abaixo da grade · cards de vidro */ .ag-painel { gap: 16px; margin-top: 16px; } .ag-painel-card, .ag-pc { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px; box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); } .ag-painel-card { padding: 20px; } .ag-painel-h { text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 700; color: var(--text); } .ag-painel-h .icon { width: 18px; height: 18px; color: var(--text2); } .ag-painel-item { border-bottom-color: var(--hair); } .ag-pc { margin-top: 16px; overflow: hidden; } .ag-pc-head { border-bottom: 1px solid var(--hair); padding: 18px 20px; } .ag-pc-title { font-size: 15px; font-weight: 700; } .ag-pc-count { background: var(--glass-3); color: var(--text2); border-radius: 999px; } .ag-pc-filter input[type="date"] { height: 34px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); padding: 0 10px; } .ag-pc-table thead th { background: var(--glass-2); color: var(--text3); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--hair); } .ag-pc-table tbody td { border-bottom-color: var(--hair); } .ag-pc-table tbody tr:hover { background: var(--glass-2); } .ag-live-indicator { color: var(--text3); font-size: 12px; } /* mês */ .men-grid-wrap { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px; box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); overflow: hidden; } .men-grid-header { border-bottom-color: var(--hair); } .men-dow { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text3); padding: 12px 0; } .men-dow-atend { color: var(--text); background: var(--glass-2); } .men-cell { border-right-color: var(--hair); border-bottom-color: var(--hair); background: transparent; padding: 8px 8px 10px; min-height: 104px; } .men-cell-off { background: var(--ag-off); } .men-cell-atend { background: var(--glass-2); } .men-cell-sel { background: var(--gold-soft) !important; } .men-cell-num { margin-bottom: 4px; } .men-day-link { width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--text2); } .men-day-link:hover { background: var(--glass-3); color: var(--text); } .men-cell-hoje .men-day-link { background: var(--gold); color: var(--gold-on); } .men-hoje-dot { background: var(--gold); } .men-ev-pill { border-radius: 10px; padding: 4px 8px 4px 8px; border-left: 3px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); font-size: 12px; } .men-ev-pill:hover { opacity: 1; transform: translateX(2px); } .men-ev-pill .men-ev-tt { font-weight: 600; } .men-ev-pill .men-ev-hora { opacity: .8; font-variant-numeric: tabular-nums; } .men-ev-pill .men-ev-pac { opacity: .85; } .men-ev-more { color: var(--text3); font-size: 12px; font-weight: 600; padding: 2px 4px; border-radius: 8px; } .men-ev-more:hover { background: var(--glass-2); color: var(--text); text-decoration: none; } @media (max-width: 960px) { .ag-scroll-wrap { border-radius: 18px; } .men-cell { min-height: 84px; padding: 6px; } .men-day-link { width: 26px; height: 26px; } } /* ===================================================================================================== DOCUMENTOS (24/09/2026) · mesma composição da Agenda · Dia: cabeçalho com segmento (Online · Para imprimir), painéis de envios e dados, esquerda 272 (tipos · filtros · dados · configuração) · centro (lista) · direita 330 (documento selecionado). Celular: tipos em chips, filtros compactos na lista e detalhe numa folha (dialog). Reaproveita .ag-acts/.ag-seg/.ag-sum/.ag-det-*/.ag-sheet/.ag-empty da agenda e .hj-h/.hj-list/.hj-lines/.hj-tag/.hj-spark da Hoje. ===================================================================================================== */ .dc-head { margin-bottom: 16px; } /* painéis · 30 dias */ .dc-dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; } .dc-dash > .card { margin: 0; padding: 16px 18px 14px; border-radius: 20px; min-width: 0; } .dc-dash .v { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--text); } .dc-dash .d { font-size: 12px; color: var(--text3); margin-top: 3px; } .dc-dash .ok .v { color: var(--green); } .dc-dash .warn .v { color: var(--amber); } .dc-dash .zero .v { color: var(--text3); } .dc-dash .hj-spark { height: 34px; margin-top: 10px; } /* grade */ .dc-cal { display: grid; grid-template-columns: 272px minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .dc-left, .dc-right { display: grid; gap: 16px; position: sticky; top: 12px; } .main.has-hub-tabs .dc-left, .main.has-hub-tabs .dc-right { top: 62px; } .dc-cal > .card, .dc-left > .card, .dc-right > .card { margin: 0; padding: 20px; border-radius: 22px; min-width: 0; } .dc-left .hj-h { font-size: 15px; } .dc-note { margin: 12px 0 0; font-size: 13px; color: var(--text3); line-height: 1.45; } .dc-note b { color: var(--text); } .dc-note a { color: var(--text2); font-weight: 600; } .dc-muted { color: var(--text3); } .dc-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text2); } /* tipos e status · listas de links, como os profissionais da agenda */ .dc-types .rows, .dc-status { list-style: none; margin: 10px 0 0; padding: 0; } .dc-types .rows a, .dc-status a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; margin: 0 -10px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--text2); text-decoration: none; } .dc-types .rows a:hover, .dc-status a:hover { background: var(--glass-2); color: var(--text); } .dc-types .rows a[aria-current], .dc-status a[aria-current] { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi); } .dc-types .rows a .icon { width: 16px; height: 16px; color: var(--text3); flex-shrink: 0; } .dc-types .rows a[aria-current] .icon { color: var(--text); } .dc-types .rows a small, .dc-status a small { margin-left: auto; color: var(--text3); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; } .dc-types .rows a small.warn, .dc-status a small.warn { color: var(--amber); } .dc-types .rows a small.bad, .dc-status a small.bad { color: var(--red); } .dc-status { margin-top: 8px; margin-bottom: 4px; } /* filtros */ .dc-filters form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); } .dc-busca { position: relative; display: block; } .dc-busca input { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); font: inherit; font-size: 14px; } .dc-busca input::placeholder { color: var(--text3); } .dc-busca input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; } .dc-busca .icon { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; color: var(--text3); pointer-events: none; } .dc-sel { position: relative; display: grid; gap: 5px; } .dc-sel > span { font-size: 12px; font-weight: 600; color: var(--text3); } .dc-sel::after { content: ""; position: absolute; right: 14px; bottom: 15px; width: 7px; height: 7px; border-right: 1.5px solid var(--text3); border-bottom: 1.5px solid var(--text3); transform: rotate(45deg); pointer-events: none; } .dc-sel select { height: 38px; padding: 0 34px 0 12px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; } .dc-sel select:hover { background: var(--glass-3); } .dc-filters .acts { display: flex; gap: 8px; } .dc-filters .acts .btn { flex: 1; height: 36px; } /* configuração */ .dc-glyph { width: 40px; height: 40px; border-radius: 13px; background: var(--glass-3); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); display: grid; place-items: center; color: var(--text); flex-shrink: 0; } .dc-glyph .icon { width: 18px; height: 18px; } .dc-glyph.sm { width: 34px; height: 34px; border-radius: 11px; color: var(--text2); } .dc-glyph.sm .icon { width: 16px; height: 16px; } .dc-config .hj-list li { padding: 8px 10px; margin: 0 -10px; border-radius: 14px; cursor: pointer; border-top: 0; } .dc-config .hj-list li:hover { background: var(--glass-2); } .dc-config .hj-list .t { font-size: 14px; } .dc-config .chev { width: 16px; height: 16px; color: var(--text3); flex-shrink: 0; } /* lista */ .dc-list { padding: 0 !important; } .dc-mfilters { display: none; } .dc-listh { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--text3); flex-wrap: wrap; } .dc-listh b { font-size: 22px; font-weight: 750; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dc-listh .pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 3px 0 10px; border-radius: 999px; background: var(--glass-3); color: var(--text); font-weight: 600; font-size: 12px; border: 1px solid var(--glass-line); margin-left: 4px; } .dc-listh .pill a { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--text2); text-decoration: none; font-size: 15px; line-height: 1; } .dc-listh .pill a:hover { background: var(--glass-2); color: var(--text); } .dc-chk-all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text3); cursor: pointer; min-height: 24px; } .bulk-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gold); margin: 0; } .dc-rows { list-style: none; margin: 0; padding: 8px; } .dc-row { display: flex; align-items: center; gap: 2px; } .dc-row .dc-chk { display: grid; place-items: center; width: 32px; height: 44px; flex-shrink: 0; cursor: pointer; } .dc-row-b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .12s, box-shadow .12s; } .dc-row-b:hover { background: var(--glass-2); } .dc-row.sel .dc-row-b { background: var(--glass-2); box-shadow: inset 0 0 0 2px var(--text2); } .dc-row-b .av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .dc-row-b .av.doc { border-radius: 11px; background: var(--glass-3); color: var(--text2); box-shadow: inset 0 1px 0 var(--glass-hi); } .dc-row-b .av.doc .icon { width: 16px; height: 16px; } .dc-row-b .b { flex: 1; min-width: 0; } .dc-row-b .t { display: block; font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-row-b .s { display: block; font-size: 12px; color: var(--text3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-row-b .tags { display: flex; gap: 6px; flex-shrink: 0; } .dc-row-b .chev { width: 16px; height: 16px; color: var(--text3); flex-shrink: 0; } /* documento selecionado (reaproveita .ag-det-*) */ .dc-det .ag-av { font-size: 22px; } .dc-av-doc .icon { width: 28px; height: 28px; } .dc-det .ag-det-rows .k { width: 104px; } .dc-det .ag-det-rows li > span:last-child { flex: 1; min-width: 0; } .dc-det .dc-mono { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-det-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 10px; text-align: center; color: var(--text3); font-size: 13px; } .dc-det-empty .icon { width: 28px; height: 28px; opacity: .5; } .dc-det-empty b { color: var(--text); font-size: 14px; } .dc-ia-list { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--danger-soft); color: var(--red); font-size: 13px; line-height: 1.45; } .dc-ia-list b { display: block; margin-bottom: 4px; } /* barra de lote (anamneses) · flutua em vidro; no celular sobe acima do dock */ .dc-bulk { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 22px; font-size: 14px; z-index: 80; color: var(--text); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 48px -16px rgba(0,0,0,.6); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; } .dc-bulk.on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dc-bulk b { color: var(--gold); } .dc-bulk .sep { width: 1px; height: 18px; background: var(--glass-line); } /* chips de tipo (só celular) */ .dc-types-m { display: none; } @media (max-width: 1279px) { .dc-cal { grid-template-columns: 250px minmax(0, 1fr); } .dc-right { display: none; } .dc-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .dc-cal { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dc-left { display: none; } .ag-acts { width: 100%; } .dc-head .ag-acts .btn.primary { margin-left: auto; } .dc-types-m { display: flex; gap: 6px; overflow-x: auto; margin: -4px calc(-1 * var(--main-px, 16px)) 12px; padding: 0 var(--main-px, 16px) 2px; scrollbar-width: none; } .dc-types-m::-webkit-scrollbar { display: none; } .dc-types-m a { flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; font-weight: 600; color: var(--text2); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .dc-types-m a[aria-current] { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi); } .dc-types-m .ct { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--glass-3); color: var(--text2); font-size: 11px; font-weight: 700; display: grid; place-items: center; } .dc-types-m a[aria-current] .ct { background: var(--gold); color: var(--gold-on); } .dc-dash { gap: 10px; } .dc-dash > .card { padding: 14px 14px 12px; border-radius: 18px; } .dc-dash .v { font-size: 24px; } .dc-dash .hj-spark { height: 26px; } .dc-mfilters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 12px 0; } .dc-mfilters .dc-busca input, .dc-mfilters .dc-sel select { height: 42px; } .dc-mfilters .dc-busca .icon { top: 13px; } .dc-mfilters .dc-sel::after { bottom: 17px; } .dc-listh { padding: 12px 16px 10px; } .dc-rows { padding: 6px; } .dc-row-b { padding: 10px 8px 10px 10px; gap: 10px; } .dc-row-b .tags .hj-tag:nth-child(n+2) { display: none; } .dc-bulk { left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateY(20px); flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px; } .dc-bulk.on { transform: none; } .dc-bulk .sep { display: none; } } /* ===================================================================================================== SALA · a fila do dia · composição do protótipo ~/painel-ux-2026/dra/sala.html (24/09/2026, docs/SALA.md) Fila em coluna (Em sala → Próxima → Depois → Atendidas hoje) + coluna de preparação à direita (330). A mesma tela serve a Dra. e a recepção; a persona muda só as ações. Classes sl-*. Cores por token. ===================================================================================================== */ .sl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .sl-fila { display: grid; gap: 14px; min-width: 0; } .sl-prep { display: grid; gap: 16px; position: sticky; top: 12px; min-width: 0; } .main.has-hub-tabs .sl-prep { top: 62px; } .sl-wrap .card { margin: 0; padding: 20px; border-radius: 22px; min-width: 0; } .sl-grp { display: flex; align-items: baseline; gap: 10px; margin: 8px 4px 0; } .sl-grp h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--text3); letter-spacing: .04em; text-transform: uppercase; } .sl-grp small { color: var(--text3); font-size: 12px; } .sl-big { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 22px !important; } .sl-big.sl-now { box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev), 0 0 0 1px color-mix(in srgb, var(--green) 32%, transparent); } .sl-av { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .sl-av.sm { width: 40px; height: 40px; font-size: 14px; } .sl-body { min-width: 0; } .sl-big h3 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; color: var(--text); } .sl-when { color: var(--text2); font-size: 14px; margin-top: 4px; } .sl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .sl-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glass-3); color: var(--text2); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .sl-chip .icon { width: 13px; height: 13px; flex-shrink: 0; } a.sl-chip:hover { filter: brightness(1.08); text-decoration: none; } .sl-chip.ok { background: var(--success-soft); color: var(--green); } .sl-chip.warn { background: var(--warn-soft); color: var(--amber); } .sl-chip.bad { background: var(--danger-soft); color: var(--red); } .sl-chips.sm .sl-chip { height: 24px; font-size: 11px; padding: 0 8px; } .sl-col { display: grid; gap: 8px; justify-items: stretch; min-width: 190px; } .sl-col .btn { width: 100%; height: 38px; } .sl-col form, .sl-acts form { display: contents; } .sl-crono { font-size: 34px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--green); line-height: 1; text-align: right; margin-bottom: 4px; } .sl-crono small { display: block; font-size: 12px; color: var(--text3); font-weight: 600; letter-spacing: 0; margin-top: 4px; } .sl-crono.pausado { color: var(--amber); } .sl-note { grid-column: 2 / -1; margin-top: 2px; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); font-size: 13px; color: var(--text2); line-height: 1.45; } .sl-note b { color: var(--text); } /* cartão compacto */ .sl-row { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 14px 18px !important; } .sl-row .sl-h { font-size: 15px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; } .sl-row .t { font-weight: 700; font-size: 15px; color: var(--text); } .sl-row .s { font-size: 13px; color: var(--text3); margin-top: 2px; } .sl-row .sl-chips { margin-top: 6px; } .sl-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .sl-row .sl-note { grid-column: 3 / -1; margin-top: 0; } .sl-row.done { opacity: .72; } .sl-row.done .t { text-decoration: line-through; text-decoration-color: var(--text3); } .sl-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; } .sl-empty b { font-size: 16px; color: var(--text); } .sl-empty span { color: var(--text3); font-size: 14px; max-width: 420px; } /* preparação */ .sl-prep .hj-list li { align-items: flex-start; } .sl-prep .hj-list .sev { margin-top: 6px; } .sl-prep .hj-list .sev.media { background: var(--amber); box-shadow: 0 0 0 4px var(--warn-soft); } .sl-prep .hj-list .sev.ok { background: var(--green); box-shadow: none; } .sl-prep .hj-list .t { font-weight: 600; font-size: 14px; color: var(--text); } .sl-walk { display: grid; gap: 10px; margin-top: 12px; } .sl-walk input { height: 40px; padding: 0 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); font: inherit; width: 100%; } .sl-ant { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; } .sl-ant li { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--hair); } .sl-ant li:first-child { border-top: 0; } .sl-ant a { color: var(--text); font-weight: 600; text-decoration: none; } .sl-ant a:hover { text-decoration: underline; text-underline-offset: 2px; } .sl-ant small { color: var(--text3); white-space: nowrap; } /* folha do walk-in (reusa a folha da agenda) */ .sl-res { margin-top: 8px; max-height: 260px; overflow: auto; } .sl-res-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--text); } .sl-res-row:hover, .sl-res-row.on { background: var(--glass-3); } .sl-res-row small { color: var(--text3); font-size: 12px; margin-left: auto; white-space: nowrap; } .sl-sel { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--glass-3); font-size: 14px; color: var(--text); } .sl-novo { margin-top: 12px; } .sl-novo summary { cursor: pointer; color: var(--text2); font-size: 13px; min-height: 32px; display: flex; align-items: center; list-style: none; } .sl-novo .ag-reag-grid { margin-top: 8px; } .sl-novo .ag-field.full { grid-column: 1 / -1; } @media (max-width: 1279px) { .sl-wrap { grid-template-columns: minmax(0, 1fr); } .sl-prep { position: static; } } @media (max-width: 960px) { .sl-wrap { gap: 12px; } .sl-fila { gap: 12px; } .sl-big { grid-template-columns: minmax(0, 1fr); padding: 18px !important; } .sl-big > .sl-av { display: none; } .sl-big h3 { font-size: 22px; } .sl-col { grid-template-columns: 1fr 1fr; min-width: 0; } .sl-col .wide { grid-column: 1 / -1; } .sl-crono { text-align: left; grid-column: 1 / -1; } .sl-note { grid-column: 1 / -1; } .sl-row { grid-template-columns: 46px minmax(0, 1fr); padding: 14px !important; } .sl-row > .sl-av { display: none; } .sl-row .sl-acts { grid-column: 1 / -1; justify-content: flex-start; } .sl-row .sl-acts .btn { flex: 1; } .sl-row .sl-note { grid-column: 1 / -1; } } /* alvos (WCAG 2.5.8 · 2.5.5): links dentro de texto com 24 px de área; no toque, chips e botões pequenos com 44 px de área sem mudar o desenho */ .sl-prep .hj-list .s a, .sl-ant a, .sl-empty a { display: inline-block; padding-block: 5px; margin-block: -5px; } a.sl-chip, .sl-acts .btn.sm { position: relative; } @media (pointer: coarse), (max-width: 960px) { .sl-chip { height: 30px; } .sl-chips.sm .sl-chip { height: 26px; } a.sl-chip::after, .sl-acts .btn.sm::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; } .sl-chips.sm a.sl-chip::after { top: -9px; bottom: -9px; } .sl-prep .hj-list .s a, .sl-ant a { padding-block: 14px !important; margin-block: -14px; } /* !important: a regra geral de links em texto (linha ~1315) tem :not() em cascata e ganha na especificidade */ .sl-walk input, .sl-walk .btn, .sl-col .btn { height: 44px; } } /* ===================================================================================================== HOJE · COMERCIAL (24/09/2026) · fila priorizada com instrumentos · protótipo apple/comercial.html (v3) Instrumentos (anel da meta com ritmo pontilhado, velocímetro do tempo de resposta, contador com pulso, faixas da comissão) → fila (pra agora / pra hoje / pode esperar) + plano e clínica → reativar + aniversários → mais quentes + semana. Reaproveita .hj-head/.hj-h/.hj-list/.hj-tag/.hj-lines/.ag-acts/.ag-sheet/.ag-empty. ===================================================================================================== */ .hs-head { margin-bottom: 16px; } .hs-head p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hs-head .hj-tag { height: 26px; font-size: 13px; } .hs-icon { width: 36px; padding: 0 !important; justify-content: center; color: var(--text3); } .hs-icon:hover { color: var(--text); } .hs-eyebrow { font-size: 13px; font-weight: 600; color: var(--text2); } .hs-none { margin: 12px 0 0; font-size: 13px; color: var(--text3); } /* painel de instrumentos */ .hs-dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; } .hs-dash > .card { margin: 0; padding: 18px 20px 16px; border-radius: 22px; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 196px; } .hs-dash .body { display: flex; align-items: center; justify-content: center; } .hs-dash .note { font-size: 13px; color: var(--text3); text-align: center; text-wrap: balance; } .hs-dash .note b { color: var(--text); font-weight: 700; } .hs-dash .note.bad b { color: var(--red); } .hs-dash .note.warn b { color: var(--amber); } .hs-dash .note.ok b { color: var(--green); } .hs-ring { position: relative; width: 112px; height: 112px; } .hs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .hs-ring circle { fill: none; stroke-width: 10; } .hs-ring .bg { stroke: var(--glass-3); } .hs-ring .fg { stroke: var(--amber); stroke-linecap: round; } .hs-ring .fg.ok { stroke: var(--green); } .hs-ring .pace { stroke: var(--text); stroke-width: 3; opacity: .45; stroke-dasharray: 2 4; } .hs-ring .c { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; } .hs-ring .c b { font-size: 30px; font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--text); } .hs-ring .c small { font-size: 12px; color: var(--text3); font-weight: 600; } .hs-ring.sm { width: 96px; height: 96px; } .hs-ring.sm .c b { font-size: 26px; } .hs-arc { position: relative; width: 150px; height: 122px; } .hs-arc svg { width: 150px; height: 122px; overflow: visible; } .hs-arc path { fill: none; stroke-width: 11; } .hs-arc .z1 { stroke: var(--green); } .hs-arc .z2 { stroke: var(--amber); } .hs-arc .z3 { stroke: var(--red); } .hs-arc .dim { opacity: .28; } .hs-arc .needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; } .hs-arc .hub { fill: var(--text); } .hs-arc .c { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .hs-arc .c b { font-size: 28px; font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--text); } .hs-arc.bad .c b { color: var(--red); } .hs-arc.warn .c b { color: var(--amber); } .hs-arc.ok .c b { color: var(--green); } .hs-arc.zero .c b { color: var(--text3); } .hs-pulse { position: relative; width: 96px; height: 96px; display: grid; place-items: center; } .hs-pulse::before, .hs-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: hs-pulse 2.4s ease-out infinite; } .hs-pulse::after { animation-delay: 1.2s; } .hs-pulse.zero::before, .hs-pulse.zero::after { display: none; } @keyframes hs-pulse { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.15); opacity: 0; } } .hs-pulse b { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 750; letter-spacing: -.04em; background: var(--danger-soft); color: var(--red); } .hs-pulse.zero b { background: var(--success-soft); color: var(--green); } .hs-faces { display: inline-flex; vertical-align: middle; margin-right: 8px; } .hs-faces .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); margin-left: -8px; border: 2px solid var(--v3-base); } .hs-faces .av:first-child { margin-left: 0; } .hs-money-body { flex-direction: column; gap: 4px; } .hs-money { font-size: 30px; font-weight: 750; letter-spacing: -.04em; color: var(--green); line-height: 1; } .hs-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; width: 100%; margin-top: 10px; } .hs-steps i { display: block; height: 10px; border-radius: 4px; background: var(--glass-3); position: relative; } .hs-steps i.on { background: var(--green); } .hs-steps i.now::after { content: ""; position: absolute; left: var(--p, 50%); top: -4px; width: 3px; height: 18px; border-radius: 2px; background: var(--text); transform: translateX(-50%); } .hs-steps-l { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); font-size: 10px; color: var(--text3); font-weight: 600; margin-top: 4px; } .hs-steps-l span { text-align: center; } /* grade */ .hs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .hs-grid > .card { margin: 0; padding: 20px; border-radius: 22px; min-width: 0; } .hs-fila { grid-column: span 7; grid-row: span 3; padding: 0 !important; } .hs-plano, .hs-clinica, .hs-tarefas { grid-column: span 5; } .hs-tarefas .hj-list .t { white-space: normal; overflow-wrap: anywhere; } .hs-tarefas .hj-list .s a { color: var(--text2); font-weight: 600; text-decoration: none; } .hs-tarefas .hj-list .s a:hover { text-decoration: underline; text-underline-offset: 2px; } .hs-tarefas .hj-list .hs-icon { height: 36px; } .hs-tarefas .hs-foot b.bad { color: var(--red); } .hs-tarefas .hs-foot a { color: var(--text2); font-weight: 600; text-decoration: none; } .hs-tarefas .hs-foot a:hover { text-decoration: underline; } .hs-react, .hs-anis, .hs-hot, .hs-semana { grid-column: span 6; } .hs-grid .hj-h .more { text-decoration: none; } /* fila */ .hs-fila > .hj-h { padding: 18px 20px 0; } .hs-fila .prog { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text3); } .hs-fila .prog b { color: var(--text); } .hs-fila .pbar { height: 6px; border-radius: 3px; background: var(--glass-3); margin: 12px 20px 4px; overflow: hidden; } .hs-fila .pbar i { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .3s; } .hs-fila .grp { display: flex; align-items: center; gap: 8px; margin: 16px 20px 4px; font-size: 13px; font-weight: 700; color: var(--text2); } .hs-fila .grp .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } .hs-fila .grp.now .dot { background: var(--red); box-shadow: 0 0 0 4px var(--danger-soft); } .hs-fila .grp .n { color: var(--text3); font-weight: 600; } .hs-fila .ag-empty { padding: 40px 24px; } .hs-q { list-style: none; margin: 0; padding: 0 8px; } .hs-q li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; } .hs-q li:hover { background: var(--glass-2); } .hs-q .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .hs-q .body { min-width: 0; } .hs-q .t { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text); } .hs-q .s { font-size: 13px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs-q .when { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--glass-3); color: var(--text2); } .hs-q .when.bad { background: var(--danger-soft); color: var(--red); } .hs-q .when.warn { background: var(--warn-soft); color: var(--amber); } .hs-q .acts { display: flex; gap: 4px; align-items: center; } .hs-q .acts .btn.sm { height: 36px; padding: 0 14px; } .hs-q .acts .hs-icon { padding: 0 !important; } .hs-q li.done { opacity: .4; } .hs-q li.done .t { text-decoration: line-through; } .hs-q li.done .acts { visibility: hidden; } .hs-fila .more-cards { display: flex; align-items: center; justify-content: center; margin: 8px 8px 12px; min-height: 40px; width: calc(100% - 16px); border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--text3); background: none; border: 0; cursor: pointer; font-family: inherit; } .hs-fila .more-cards:hover { background: var(--glass-2); color: var(--text); } /* plano */ .hs-plan { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .hs-plan li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); font-size: 14px; font-weight: 600; color: var(--text); } .hs-plan .k { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 750; background: var(--glass-3); color: var(--text2); flex-shrink: 0; border: 0; padding: 0; cursor: pointer; font-family: inherit; position: relative; transition: background .15s, color .15s; } .hs-plan .k > * { grid-area: 1 / 1; } .hs-plan .k .ck { width: 14px; height: 14px; opacity: 0; transition: opacity .15s; } .hs-plan .k .n { transition: opacity .15s; } .hs-plan .k:hover, .hs-plan .k:focus-visible { background: var(--success-soft); color: var(--green); } .hs-plan .k:hover .n, .hs-plan .k:focus-visible .n { opacity: 0; } .hs-plan .k:hover .ck, .hs-plan .k:focus-visible .ck { opacity: 1; } .hs-plan li.done .k { background: var(--success-soft); color: var(--green); } .hs-plan li.done .k .n { opacity: 0; } .hs-plan li.done .k .ck { opacity: 1; } .hs-plan li.done > span { color: var(--text3); text-decoration: line-through; } .hs-plan li { transition: opacity .25s, transform .25s; } .hs-plan li.saindo { opacity: 0; transform: translateX(12px); } .hs-plan-zero { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--success-soft); color: var(--green); font-size: 13px; } .hs-plan-zero b { color: inherit; } @media (pointer: coarse) { .hs-plan .k { width: 44px; height: 44px; margin: -8px 0 -8px -8px; } } .hs-plan small { margin-left: auto; color: var(--text3); font-weight: 600; white-space: nowrap; } .hs-coach { margin: 12px 0 0; font-size: 13px; color: var(--text2); line-height: 1.45; } .hs-plano .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* clínica */ .hs-clinica .hj-list .t { text-decoration: none; } .hs-clinica .hj-list .t:hover { text-decoration: underline; } .hs-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text3); } .hs-foot b { color: var(--text); } /* reativar */ .hs-re-wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; } .hs-re-inst { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border-radius: 18px; background: var(--glass-2); text-align: center; } .hs-re-inst .wait { font-size: 12px; color: var(--text3); line-height: 1.35; } .hs-re-inst .wait b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.03em; color: var(--text); line-height: 1.1; } .hs-re, .hs-ani { list-style: none; margin: 0; padding: 0; } .hs-re li, .hs-ani li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); } .hs-re li:first-child { border-top: 0; padding-top: 0; } .hs-re .av, .hs-ani .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #F4EEED; background: linear-gradient(145deg, #7A686E, #43373B); flex-shrink: 0; } .hs-re .body, .hs-ani .body { flex: 1; min-width: 0; } .hs-re .t, .hs-ani .t { font-weight: 700; font-size: 14px; color: var(--text); } .hs-re .s, .hs-ani .s { font-size: 12px; color: var(--text3); } .hs-re-note { margin: 12px 0 0; font-size: 13px; color: var(--text2); } .hs-re-note b { color: var(--green); } /* aniversários */ .hs-week7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .hs-week7 div { display: grid; justify-items: center; gap: 4px; padding: 8px 0 6px; border-radius: 14px; background: var(--glass-2); font-size: 11px; font-weight: 700; color: var(--text3); } .hs-week7 div b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 750; color: var(--text); background: var(--glass-3); } .hs-week7 div.has b { background: var(--warn-soft); color: var(--amber); } .hs-week7 div.today { box-shadow: inset 0 0 0 2px var(--text2); } .hs-week7 div.today b { background: var(--gold); color: var(--gold-on); } .hs-week7 div small { font-weight: 600; font-size: 10px; color: var(--text3); height: 12px; } .hs-ani { margin-top: 12px; } .hs-ani li:first-child { border-top: 0; } .hs-ani .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hs-ani .t a { color: inherit; text-decoration: none; } .hs-ani .t a:hover { text-decoration: underline; } .hs-ani .when { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--glass-3); color: var(--text2); } .hs-ani .when.today { background: var(--warn-soft); color: var(--amber); } /* mais quentes */ .hs-hots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .hs-hotc { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--glass-2); text-align: center; text-decoration: none; color: inherit; min-width: 0; } .hs-hotc:hover { background: var(--glass-3); } .hs-score { width: 56px; height: 56px; position: relative; display: block; } .hs-score svg { width: 56px; height: 56px; transform: rotate(-90deg); } .hs-score circle { fill: none; stroke-width: 5; } .hs-score .bg { stroke: var(--glass-3); } .hs-score .fg { stroke: var(--green); stroke-linecap: round; } .hs-score.warm .fg { stroke: var(--amber); } .hs-score b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 750; color: var(--text); } .hs-hotc b.n { font-size: 13px; font-weight: 700; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs-hotc small { font-size: 11px; color: var(--text3); font-weight: 600; } /* semana */ .hs-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; align-items: end; height: 92px; } .hs-bars div { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; gap: 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text3); } .hs-bars div.today { color: var(--text); } .hs-bars .b { display: flex; gap: 3px; align-items: end; justify-content: center; } .hs-bars .b i { display: block; width: 9px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--glass-3); } .hs-bars .b i.r { background: var(--text); } .hs-bars .b i.g { background: var(--green); } .hs-legend { display: flex; gap: 12px; font-size: 11px; color: var(--text3); margin-top: 10px; flex-wrap: wrap; } .hs-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: var(--glass-3); } .hs-legend i.r { background: var(--text); } .hs-legend i.g { background: var(--green); } .hs-semana .hj-lines { margin-top: 10px; } .hs-streak { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--success-soft); color: var(--green); font-size: 13px; font-weight: 600; } .hs-streak.off { background: var(--glass-2); color: var(--text2); } /* folhas */ .hs-sug { width: 100%; min-height: 120px; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); resize: vertical; font: inherit; font-size: 15px; line-height: 1.5; margin-top: 6px; } .hs-sug[aria-busy="true"] { opacity: .5; } .hs-sug-ctx { margin: 0 0 12px; font-size: 13px; color: var(--text2); } .hs-opts { display: grid; gap: 8px; padding-bottom: 20px; } .hs-opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-line); font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; } .hs-opt:hover { background: var(--glass-3); } .hs-opt small { color: var(--text3); font-weight: 500; text-align: right; } .hs-opt.lose { color: var(--red); } .hs-opt[hidden] { display: none; } @media (max-width: 1279px) { .hs-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hs-fila, .hs-plano, .hs-clinica, .hs-tarefas { grid-column: 1 / -1; } .hs-fila { grid-row: auto; } } @media (max-width: 960px) { .hs-grid, .hs-dash { gap: 12px; } .hs-dash > .card { padding: 14px 14px 12px; min-height: 176px; } .hs-ring { width: 96px; height: 96px; } .hs-ring .c b { font-size: 26px; } .hs-arc { width: 130px; height: 108px; } .hs-arc svg { width: 130px; height: 108px; } .hs-q li { grid-template-columns: minmax(0, 1fr) auto; } .hs-q .av { display: none; } .hs-react, .hs-anis, .hs-hot, .hs-semana { grid-column: 1 / -1; } .hs-tarefas .hj-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "time body btn" ". tag btn"; column-gap: 12px; row-gap: 6px; } .hs-tarefas .hj-list .time { grid-area: time; } .hs-tarefas .hj-list .body { grid-area: body; } .hs-tarefas .hj-list .hj-tag { grid-area: tag; justify-self: start; } .hs-tarefas .hj-list .hs-icon { grid-area: btn; } .hs-re-wrap { grid-template-columns: minmax(0, 1fr); } .hs-re-inst { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 14px; } .hs-hots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hs-head .ag-acts { width: 100%; } .hs-head .ag-acts .btn.primary { margin-left: auto; } } .hs-dash .note a { color: var(--text2); font-weight: 600; display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; } @media (pointer: coarse) { .hs-tarefas .hj-list .s a, .hs-tarefas .hs-foot a { display: inline-flex; align-items: center; min-height: 44px; } .hs-ani .t a, .hs-clinica .hj-list .t, .hs-hotc { min-height: 44px; display: inline-flex; align-items: center; } .hs-ani .t a { min-width: 44px; } .hs-hotc { display: grid; } .hs-grid .hj-h .more, .hs-fila .more-cards { min-height: 44px; } .hs-dash .note a { min-height: 44px; min-width: 44px; justify-content: center; } } /* ===================================================================================================== ATENDIMENTO AO VIVO · três zonas (Contexto · Sessão/Avaliação · Encerrar) · docs/ATENDIMENTO_AO_VIVO.md Protótipos ~/painel-ux-2026/dra/atendimento.html e avaliacao.html. Faixa fixa no topo; ≥ 1280: 3 colunas; 1024–1279: Sessão + Encerrar e Contexto por aba; < 960: uma zona por vez. Classes av-*; atlas em atl-*. ===================================================================================================== */ .av { --av-top: 12px; } .av .card { margin: 0; padding: 20px; border-radius: 22px; min-width: 0; } .av-top { position: sticky; top: var(--av-top); z-index: 15; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 14px; margin: 0 0 14px; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi), var(--elev); } .main.has-hub-tabs .av-top { top: 62px; } .av-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; } .av-who .sl-av { width: 52px; height: 52px; font-size: 18px; } .av-who-t { min-width: 0; } .av-who h1 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .av-who .s { font-size: 13px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .av-alerg { height: 30px; flex-shrink: 0; } .av-mid { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .av-mid form { display: contents; } .av-crono { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .av-crono span { font-size: 30px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--green); line-height: 1; } .av-crono small { font-size: 12px; font-weight: 600; color: var(--text3); } .av-crono.pausado span { color: var(--amber); } .av-tabs { display: none; margin: 0 0 14px; } .av-tabs button { height: 34px; min-width: 32px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text2); background: transparent; border: 0; cursor: pointer; } .av-tabs button[aria-pressed="true"] { background: var(--glass-3); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px -4px rgba(0,0,0,.4); } .av-zonas { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .av-z { display: grid; gap: 16px; min-width: 0; } .av-ctx, .av-fim { position: sticky; top: 96px; max-height: calc(100dvh - 110px); overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; } .av-ctx::-webkit-scrollbar, .av-fim::-webkit-scrollbar { display: none; } .av-brief { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-line); } .av-brief p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); } .av-brief small { display: block; margin-top: 6px; font-size: 12px; color: var(--text3); } .av-ia { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--amber); margin-bottom: 4px; } .av-ia .icon { width: 13px; height: 13px; } .av-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text2); text-decoration: none; padding-block: 5px; } .av-more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .av-ck { list-style: none; margin: 10px 0 0; padding: 0; } .av-ck li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.45; color: var(--text); } .av-ck li:first-child { border-top: 0; } .av-ck input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold); flex-shrink: 0; } .av-ck label { cursor: pointer; } .av-ck .icon { color: var(--green); flex-shrink: 0; margin-top: 1px; } .av-hist { list-style: none; margin: 10px 0 0; padding: 0; } .av-hist li { padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; } .av-hist li:first-child { border-top: 0; } .av-hist .d { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; } .av-hist .t { font-weight: 600; color: var(--text); } .av-hist .t a { color: inherit; } .av-hist .o { color: var(--text2); margin-top: 2px; } .av-hash { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px !important; color: var(--text3) !important; } .av-rows { list-style: none; margin: 10px 0 0; padding: 0; } .av-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; border-top: 1px solid var(--hair); font-size: 13px; } .av-rows li:first-child { border-top: 0; } .av-rows .k { color: var(--text3); text-align: right; } .av-rows .v { font-weight: 600; color: var(--text); } .av-rows .v a { color: inherit; } .av-rows .k b { color: var(--text); } .av-dm { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; line-height: 1.45; color: var(--text); } .av-dm b { display: block; font-size: 11px; font-weight: 700; color: var(--text3); margin-bottom: 3px; } .av-anam summary { cursor: pointer; list-style: none; min-height: 32px; } .av-anam summary::-webkit-details-marker { display: none; } .av-anam dl { margin: 12px 0 0; font-size: 13px; } .av-anam dt { color: var(--text3); margin-top: 8px; } .av-anam dd { margin: 2px 0 0; color: var(--text); font-weight: 600; } .av-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .av-chips .chip { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; } .av-chips .chip[aria-pressed="true"] { background: var(--gold); color: var(--gold-on); border-color: transparent; } .av-ta { width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; } .av-ta:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .av-ta-f { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--text3); } .av-ta-f .btn.on { background: var(--danger-soft); color: var(--red); } .av-saved { font-size: 12px; color: var(--text3); font-weight: 500; margin-left: auto; } .av-lbl { margin-top: 14px; } .av-fotos-h { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--text3); } .av-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .av-fotos.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; } .av-foto { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-line); display: grid; place-items: center; text-align: center; cursor: pointer; background: var(--glass-2); color: var(--text2); text-decoration: none; } .av-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .av-foto span { position: absolute; left: 6px; bottom: 6px; right: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .av-foto.add { border-style: dashed; gap: 4px; align-content: center; background: linear-gradient(rgba(36,28,31,.6), rgba(36,28,31,.6)), var(--ref, none) center / cover, var(--glass-2); } .av-foto.add b { font-size: 13px; } .av-foto.add small { font-size: 10px; opacity: .85; padding: 0 6px; } .av-foto.add .icon { width: 22px; height: 22px; } .av-foto[style*="--ref"] { color: #fff; } .av-foto input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .av-foto.enviando { opacity: .5; } .av-foto.enviando::after { content: "enviando…"; position: absolute; inset: auto 0 45% 0; font-size: 12px; font-weight: 700; color: var(--text); } .av-concluir p { margin: 10px 0 0; font-size: 12px; color: var(--text3); line-height: 1.45; } .av-big { height: 46px !important; width: 100%; } .av .btn.wide { width: 100%; margin-top: 10px; justify-content: center; } .av-rev { width: min(760px, 94vw); } .av-rev-ta { min-height: 280px; font-size: 14px; } .av-rev .av-ck li { align-items: center; } .av-rev-note { margin: 0 auto 0 0; max-width: 380px; font-size: 12px; color: var(--text3); line-height: 1.4; } .av-rev .ag-sheet-f { flex-wrap: wrap; align-items: center; } .av-sel { height: 40px; padding: 0 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); font: inherit; } @media (max-width: 1279px) { .av-zonas { grid-template-columns: minmax(0, 1fr) 300px; } .av-tabs { display: inline-flex; } .av-ctx { display: none; position: static; max-height: none; overflow: visible; } .av[data-z="ctx"] .av-ctx { display: grid; } .av[data-z="ctx"] .av-ses, .av[data-z="ctx"] .av-fim { display: none; } .av[data-z="ctx"] .av-zonas { grid-template-columns: minmax(0, 1fr); } .av-alerg .tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .av-alerg { width: 30px; padding: 0; justify-content: center; } .av-who { flex: 1 1 auto; } .av-crono span { font-size: 26px; } } @media (max-width: 960px) { .av-top { top: 60px; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: 18px; } .av-who h1 { font-size: 18px; } .av-who .s { white-space: normal; } .av-who .sl-av { width: 40px; height: 40px; font-size: 14px; } .av-mid { margin-left: 0; width: 100%; flex-wrap: wrap; } .av-mid .btn.primary { margin-left: auto; } .av-zonas { grid-template-columns: minmax(0, 1fr); gap: 12px; } .av-fim { display: none; position: static; max-height: none; overflow: visible; } .av[data-z="fim"] .av-fim { display: grid; } .av[data-z="fim"] .av-ses { display: none; } .av-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (pointer: coarse), (max-width: 960px) { .av-tabs button { height: 44px; } .av-ck input { width: 24px; height: 24px; } .av-chips .chip { height: 44px; } .av-more { padding-block: 12px; } .av-pause { width: 44px; height: 44px; } } /* atlas facial (componente de toque) */ .atl { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; } .atl-host { container-type: inline-size; } @container (width < 560px) { .atl { grid-template-columns: minmax(0, 1fr); } .atl-face { max-width: 280px; margin: 0 auto; width: 100%; } } .atl-face svg { width: 100%; display: block; border-radius: 18px; border: 1px solid var(--glass-line); background: #1a1416; } .atl-pt { cursor: pointer; outline: none; } .atl-pt .hit { fill: transparent; } .atl-pt .halo { fill: var(--c); opacity: 0; transition: opacity .15s; } .atl-pt .dot { fill: var(--c); stroke: #fff; stroke-width: .6; opacity: .75; } .atl-pt:hover .dot, .atl-pt:focus-visible .dot { opacity: 1; } .atl-pt:focus-visible .halo { opacity: .4; } .atl-pt.on .dot { opacity: 1; } .atl-pt.on .halo { opacity: .3; } .atl-leg { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--text3); } .atl-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; } .atl-planos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .atl-planos .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); } .atl-planos .seg button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; } .atl-planos .seg button[aria-pressed="true"] { background: var(--glass-3); color: var(--text); } .atl-planos .seg button small { font-weight: 600; color: var(--text2); margin-left: 6px; } .atl-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .atl-cats .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; } .atl-cats .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .atl-cats .chip[aria-pressed="true"] { background: var(--gold); color: var(--gold-on); border-color: transparent; } .atl-cats .chip[aria-pressed="true"] i { background: var(--gold-on); } .atl-hint { margin: 0 0 4px; font-size: 12px; color: var(--text3); } .atl-hint b { color: var(--text2); } .atl-g { margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--c); } .atl-gh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .atl-gh i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .atl-gh small { font-weight: 500; color: var(--text3); } .atl-gt { margin-left: auto; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; } .atl-list { list-style: none; margin: 0; padding: 0; } .atl-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--hair); } .atl-list .n { flex: 1; min-width: 0; } .atl-list .n b { display: block; font-size: 14px; font-weight: 650; color: var(--text); } .atl-list .n small { display: block; color: var(--text3); font-size: 12px; } .atl-list .stp { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); padding: 2px; } .atl-list .stp button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; font-size: 18px; font-weight: 600; color: var(--text2); display: grid; place-items: center; cursor: pointer; } .atl-list .stp button:hover { background: var(--glass-3); color: var(--text); } .atl-list .q { min-width: 52px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text); } .atl-list .v { width: 76px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text); } .atl-list .x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--text3); font-size: 18px; cursor: pointer; } .atl-list .x:hover { background: var(--danger-soft); color: var(--red); } .atl-tot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); font-size: 13px; color: var(--text2); } .atl-tot b { color: var(--text); } .atl-tot .money { margin-left: auto; font-size: 18px; font-weight: 750; letter-spacing: -.02em; color: var(--text); } .atl-empty { margin: 8px 0 0; font-size: 13px; color: var(--text3); } @media (pointer: coarse), (max-width: 960px) { .atl-list .stp button, .atl-list .x { width: 44px; height: 44px; } .atl-cats .chip, .atl-planos .seg button { height: 44px; } } /* ===================================================================================================== HOJE · DRA. · protótipo ~/painel-ux-2026/dra/hoje.html (docs/HOJE_DRA.md) · classes dh-* ===================================================================================================== */ .dh .card { margin: 0; padding: 20px; border-radius: 22px; min-width: 0; } .dh-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; } .dh-quick .btn { height: 40px; } .dh-quick .sl-chip { height: 20px; padding: 0 7px; margin-left: 2px; } .dh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; } .dh-agora { grid-column: span 7; } .dh-dia { grid-column: span 5; } .dh-pend { grid-column: span 7; } .dh-mes { grid-column: span 5; } .dh-sala { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } .dh-sala-t { min-width: 0; flex: 1; } .dh-sala-t b { display: block; font-weight: 700; color: var(--text); } .dh-sala-t small { color: var(--text2); font-size: 12px; } .dh-crono { font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--green); } .dh-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: dh-pulse 1.6s infinite; } @keyframes dh-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } } .dh-prox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; } .dh-prox h3 { margin: 2px 0 0; font-size: 24px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; color: var(--text); } .dh-when { color: var(--text2); font-size: 13px; margin-top: 3px; } .dh-brief { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-line); } .dh-brief-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--amber); } .dh-brief-h .icon { width: 14px; height: 14px; } .dh-brief p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); } .dh-brief small { display: block; margin-top: 4px; color: var(--text3); font-size: 12px; } .dh-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .dh-acts form { display: contents; } .dh-tl { list-style: none; margin: 12px 0 0; padding: 0; } .dh-tl li { display: grid; grid-template-columns: 46px 3px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 4px 0; } .dh-tl .h { font-size: 13px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; } .dh-tl .bar { width: 3px; height: 30px; border-radius: 2px; background: var(--glass-3); } .dh-tl .bar.proc { background: var(--green); } .dh-tl .bar.cons { background: var(--blue, var(--info)); } .dh-tl .t { font-weight: 600; color: var(--text); font-size: 14px; } .dh-tl .t a { color: inherit; text-decoration: none; padding-block: 5px; } .dh-tl .t a:hover { text-decoration: underline; text-underline-offset: 2px; } .dh-tl .s { font-size: 12px; color: var(--text3); } .dh-tl li.done .t, .dh-tl li.done .s { color: var(--text3); } .dh-tl li.done .t { text-decoration: line-through; text-decoration-color: var(--text3); } .dh-tl li.now .t { color: var(--green); } .dh-tl li.now .bar { background: var(--green); } .dh-pend .hj-list .sev.media { background: var(--amber); box-shadow: 0 0 0 4px var(--warn-soft); } .dh-nums b.warn { color: var(--amber); } .dh-v2 .dh-col { grid-column: span 7; display: grid; gap: 16px; min-width: 0; align-content: start; } .dh-v2 .dh-agora, .dh-v2 .dh-pend { grid-column: auto; } .dh-head { align-items: flex-start; } .dh-devo-l { margin: 6px 0 0 !important; font-size: 13px !important; font-style: italic; color: var(--text3) !important; max-width: 60ch; } .dh-mais { margin-top: 8px; } .dh-mais > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--text2); } .dh-mais > summary::-webkit-details-marker { display: none; } .dh-mais > summary::after { content: '›'; margin-left: 6px; transition: transform .2s; } .dh-mais[open] > summary::after { transform: rotate(90deg); } .dh-v2 .dh-tl li { grid-template-columns: 46px 3px minmax(0, 1fr) auto auto; } .dh-v2 .dh-tl li .ct-ic:empty { display: none; } .dh-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dh-nome h3 { margin: 2px 0 0; } .dh-v2 .dh-sala .ct-ic { margin-left: auto; } .dh-v2 .dh-brief p { margin-top: 6px; } .dh-v2 .dh-tl .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .dh-v2 .dh-col { grid-column: 1 / -1; } } .dh-devo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 18px; font-size: 14px; color: var(--text2); background: var(--glass); border: 1px solid var(--glass-line); } .dh-devo b { color: var(--text3); font-size: 12px; } .dh-devo .icon { width: 16px; height: 16px; color: var(--text3); } @media (max-width: 1100px) { .dh-agora, .dh-dia, .dh-pend, .dh-mes { grid-column: 1 / -1; } } @media (max-width: 960px) { .dh-grid { gap: 12px; } .dh-quick { flex-wrap: nowrap; overflow-x: auto; margin: -6px -16px 16px; padding: 0 16px; scrollbar-width: none; } .dh-quick .btn { flex-shrink: 0; height: 44px; } .dh-prox { grid-template-columns: minmax(0, 1fr); } .dh-prox > .sl-av { display: none; } .dh-prox h3 { font-size: 22px; } .dh-sala { flex-wrap: wrap; } .dh-sala-t { flex: 1 1 160px; } .dh-sala .btn { margin-left: auto; } .dh-acts .btn { flex: 1; height: 44px; } } .pf-atender-f { display: contents; } .av .pf-alerta-link { display: inline-block; padding-block: 4px; margin-block: -4px; } @media (pointer: coarse), (max-width: 960px) { .av .pf-alerta-link { padding-block: 14px !important; margin-block: -14px; } .dh-tl .t a { display: inline-block; padding-block: 12px !important; margin-block: -12px; } } /* ── Instagram e Facebook da paciente · card rd-* (ficha: completo · atendimento: compacto) · docs/REDES_CONTATO.md ── */ .rd-card .pf-h .more, .rd-card .hj-h .more { font-weight: 500; color: var(--text3); } .rd-perfil { display: flex; gap: 12px; align-items: center; margin-top: 12px; } .rd-pic { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 1px solid var(--glass-line); background: var(--glass-3); } .rd-ini { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; letter-spacing: .02em; color: var(--text2); background: radial-gradient(70% 55% at 50% 40%, rgba(138,118,124,.55) 0%, rgba(67,55,59,.35) 70%); } .rd-pid { min-width: 0; } .rd-pn { font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .rd-pu { font-size: 13px; color: var(--text2); margin-top: 1px; overflow-wrap: anywhere; } .rd-pu b { color: var(--text); font-weight: 650; } .rd-pu a { color: inherit; display: inline-block; padding-block: 4px; margin-block: -4px; } .rd-verif { font-size: 11px; font-weight: 600; color: var(--text3); border: 1px solid var(--hair); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; } .rd-canais { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .rd-canal { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text3); background: transparent; border: 1px solid var(--hair); } .rd-canal.on { color: var(--text); background: var(--glass-2); border-color: var(--glass-line); } .rd-canal .icon { width: 13px; height: 13px; } .rd-fatos { list-style: none; margin: 12px 0 0; padding: 0; } .rd-fatos li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.45; } .rd-fatos li:first-child { border-top: 0; } .rd-fatos .k { color: var(--text3); width: 86px; flex-shrink: 0; } .rd-fatos .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; } .rd-fatos .v b { font-weight: 650; } .rd-fatos .v small { color: var(--text3); font-size: 12px; } .rd-fatos .v a { color: inherit; } .rd-dm { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; } .rd-dm b { display: block; font-size: 11px; font-weight: 700; color: var(--text3); margin-bottom: 3px; } .rd-vazio { margin: 10px 0 0; font-size: 13px; color: var(--text3); line-height: 1.45; } .rd-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .rd-acts .btn .icon { width: 14px; height: 14px; } .rd-sync { display: contents; } .rd-src { font-size: 12px; color: var(--text3); margin-top: 10px; line-height: 1.45; } .rd-erro { color: var(--warn); } .rd-compacto .rd-pic { width: 44px; height: 44px; } .rd-compacto .rd-ini { font-size: 15px; } @media (pointer: coarse), (max-width: 960px) { .rd-acts .btn { min-height: 44px; } .rd-fatos .v a { display: inline-block; padding-block: 15px; margin-block: -15px; } .rd-pu a { padding-block: 15px; margin-block: -15px; } } /* ── Instagram · ManyChat no contexto da conversa (views/_partials/manychat_ctx.php) · docs/REDES_CONTATO.md ── */ .mc-ctx { display: block; } .mc-ctx.mc-busy { opacity: .6; pointer-events: none; } .mc-perfil { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; } .mc-pic { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 1px solid var(--glass-line); background: var(--glass-3); } .mc-ini { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text2); } .mc-pid { min-width: 0; display: flex; flex-direction: column; font-size: 13px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; } .mc-pid a { color: inherit; display: inline-block; padding-block: 3px; margin-block: -3px; } .mc-pid small { font-size: 12px; font-weight: 500; color: var(--text3); } .mc-dm { margin: 8px 0 4px; padding: 8px 10px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 12px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; } .mc-dm b { display: block; font-size: 11px; font-weight: 700; color: var(--text3); margin-bottom: 2px; } .mc-sec { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text3); margin: 12px 0 6px; } .mc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mc-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px 0 10px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: var(--glass-2); border: 1px solid var(--glass-line); cursor: pointer; } .mc-tag span { font-size: 14px; line-height: 1; color: var(--text3); } .mc-tag:hover span { color: var(--text); } .mc-tag-add select, .mc-form select, .mc-form input { font: inherit; font-size: 13px; color: var(--text); background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 10px; min-height: 32px; padding: 0 8px; min-width: 0; } .mc-tag-add select { min-height: 28px; border-radius: 999px; font-size: 12px; } .mc-form { display: block; margin: 0 0 8px; } .mc-form label { display: block; font-size: 12px; color: var(--text3); margin-bottom: 4px; } .mc-linha { display: flex; gap: 6px; } .mc-linha input, .mc-linha select { flex: 1; } .mc-ligar input { width: 100%; margin-bottom: 6px; } .mc-ligar small { display: block; margin-top: 6px; font-size: 12px; color: var(--text3); line-height: 1.4; } .mc-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .mc-nota { font-size: 12px; color: var(--text3); margin: 8px 0 0; line-height: 1.4; } .mc-nota a { color: inherit; } .mc-msg { font-size: 12px; margin: 6px 0 0; min-height: 1em; color: var(--text2); } .mc-msg.ok { color: var(--success); } .mc-msg.err { color: var(--danger); } @media (pointer: coarse), (max-width: 960px) { .mc-tag, .mc-tag-add select { min-height: 44px; } .mc-form select, .mc-form input, .mc-form .btn { min-height: 44px; } .mc-pid a { display: inline-block; padding-block: 12px; margin-block: -12px; } } .rd-ver { display: inline-block; padding: 4px 6px; margin: -4px -6px; color: inherit; } @media (pointer: coarse), (max-width: 960px) { .rd-ver { padding: 14px 10px; margin: -14px -10px; } } .kb-card-ig { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--text2); min-width: 0; } .kb-card-ig .icon { width: 12px; height: 12px; flex-shrink: 0; } .kb-card-ig span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================================================================== ANAMNESE · ficha da Dra. (onda 1 · 25/09/2026 · docs/ANAMNESE_FICHA.md) · classes an-* Cabeçalho reusa .pf-head-v3; duas colunas (1,55fr / 1fr); "Ler antes da consulta" com fatos da IA em chips; respostas por bloco em
com filtro "O que importa" (linhas .no somem fora de .todas); prontidão em anel. ===================================================================================================== */ .an-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; } @media (max-width: 1023px) { .an-grid { grid-template-columns: 1fr; } } .an-col { display: grid; gap: 16px; min-width: 0; } .an-page .card { margin: 0; } .an-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .an-h h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; } .an-h h3 .icon { width: 18px; height: 18px; } .an-h .sp { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .an-alerta.is-alerta { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: linear-gradient(135deg, var(--danger-soft), var(--glass) 55%); } .an-fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 560px) { .an-fatos { grid-template-columns: 1fr; } } .an-fato { background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .an-fato .t { font-size: 12px; font-weight: 600; color: var(--text3); display: flex; justify-content: space-between; } .an-fato .cs { display: flex; flex-wrap: wrap; gap: 6px; } .an-fato .tag { height: auto; min-height: 22px; white-space: normal; text-align: left; line-height: 1.3; padding: 3px 10px; } .an-resumo { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--text2); } .an-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .an-rev { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); font-weight: 600; } .an-rev .icon { width: 13px; height: 13px; } .an-rev-desfaz { background: none; border: 0; color: var(--text3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; font-size: 12px; padding: 5px 0; } .an-bloco { border-top: 1px solid var(--hair); padding: 8px 0; } .an-bloco summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; min-height: 34px; } .an-bloco summary::-webkit-details-marker { display: none; } .an-bloco summary .n { margin-left: auto; color: var(--text3); font-weight: 500; font-size: 12px; white-space: nowrap; } .an-bloco summary .icon { width: 14px; height: 14px; color: var(--text3); transition: transform .15s; flex-shrink: 0; } .an-bloco[open] summary .icon { transform: rotate(90deg); } .an-qa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 8px 0 8px 22px; font-size: 13px; border-bottom: 1px dashed var(--hair); } .an-qa:last-of-type { border-bottom: 0; } .an-qa .q { color: var(--text2); } .an-qa .r { font-weight: 600; text-align: right; max-width: min(60%, 34ch); overflow-wrap: anywhere; } @media (max-width: 560px) { .an-qa { grid-template-columns: 1fr; padding-left: 14px; } .an-qa .r { text-align: left; max-width: none; } } .an-qa.sim .r { color: var(--amber); } .an-qa.ruim .r { color: var(--danger); } .an-qa .fu { grid-column: 1 / -1; color: var(--text); background: var(--glass-2); border-radius: 10px; padding: 7px 10px; font-size: 13px; white-space: pre-wrap; } .an-qa.txt { grid-template-columns: 1fr; } .an-qa.txt .r { text-align: left; white-space: pre-wrap; font-weight: 500; color: var(--text); } .an-resp:not(.todas) .an-qa.no { display: none; } .an-resp.todas .an-nada { display: none; } .an-nada { font-size: 13px; color: var(--text3); padding: 6px 0 4px; margin: 0; } .an-pront { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; } @media (max-width: 560px) { .an-pront { grid-template-columns: 1fr; justify-items: center; } } .an-ring { position: relative; width: 130px; height: 130px; } .an-ring svg { width: 130px; height: 130px; transform: rotate(-90deg); } .an-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; } .an-ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .an-ring .lbl b { font-size: 28px; font-weight: 750; display: block; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .an-ring .lbl small { font-size: 11px; color: var(--text3); } .an-ck { display: flex; flex-direction: column; gap: 9px; } .an-ck div { display: flex; align-items: center; gap: 10px; font-size: 13px; } .an-ck .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--glass-3); color: var(--text3); font-size: 12px; font-weight: 700; } .an-ck .ok .dot { background: var(--success-soft); color: var(--green); } .an-ck .no .dot { background: var(--warn-soft); color: var(--amber); } .an-ck .dot .icon { width: 12px; height: 12px; } .an-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .an-thumbs a, .an-thumbs video { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--glass-2); } .an-thumbs img, .an-thumbs video { width: 100%; height: 100%; object-fit: cover; display: block; } .an-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; margin: 0; } .an-kv dt { color: var(--text3); } .an-kv dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .an-danger { color: var(--danger); } .an-log { font-size: 12px; color: var(--text3); display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .an-log div { display: flex; justify-content: space-between; gap: 10px; } .an-lgpd summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2); list-style: none; min-height: 24px; } .an-lgpd summary::-webkit-details-marker { display: none; } .an-sug { display: flex; flex-direction: column; gap: 8px; } .an-sug .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 12px; padding: 8px 10px; font-size: 13px; } #an-vinc-q { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-2); color: var(--text); font: inherit; margin-bottom: 8px; } .an-vinc-res { min-height: 40px; max-height: 280px; overflow-y: auto; } .an-vinc-res button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; background: none; border: 0; cursor: pointer; color: var(--text); text-align: left; font: inherit; font-size: 14px; } .an-vinc-res button:hover { background: var(--glass-2); } .an-vinc-res button .icon { color: var(--text3); flex-shrink: 0; } /* termos para o iPad (ficha da anamnese · folha da Agenda · Dia) */ .an-tlist { display: flex; flex-direction: column; gap: 6px; } .an-titem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 13px; cursor: pointer; } .an-titem input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); } .an-titem .t { font-weight: 600; min-width: 0; } .an-titem .s { font-size: 12px; color: var(--text3); white-space: nowrap; } .an-titem.ok { opacity: .7; } .an-titem.ok .s { color: var(--green); } .an-titem input:disabled + .t { color: var(--text2); } /* Central de Documentos · Hoje (onda 4) */ .dc-hoje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: start; margin-top: 16px; } @media (max-width: 1023px) { .dc-hoje { grid-template-columns: 1fr; } } .dc-hj-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); } .dc-hj-row.chegou .hora b { color: var(--green); } .dc-hj-row .hora b { display: block; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; } .dc-hj-row .hora small { color: var(--text3); font-size: 11px; } .dc-hj-row .quem { min-width: 0; } .dc-hj-row .quem > b { font-size: 14px; } .dc-hj-row .quem a { color: inherit; text-decoration: none; display: inline-block; padding-block: 5px; } .dc-hj-row .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .dc-hj-row .chips .tag { height: 22px; } .dc-hj-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 640px) { .dc-hj-row { grid-template-columns: 48px minmax(0, 1fr); } .dc-hj-row .acts { grid-column: 1 / -1; justify-content: flex-start; } } .dc-hj-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13px; } .tag.blue { background: var(--info-soft, var(--glass-3)); color: var(--blue, var(--text)); } /* Central de Documentos v2 (25/09/2026 · docs/ANAMNESE_IPAD.md · "Central"): imprimir rápido · Gerar + Agora · Hoje · 7 dias · indicadores */ .ct-ic { display: inline-flex; gap: 4px; flex-shrink: 0; } .ct-ic a { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text2); text-decoration: none; } .ct-ic a:hover { color: var(--text); background: var(--glass-3); } .ct-ic .icon { width: 15px; height: 15px; } @media (pointer: coarse) { .ct-ic a { width: 38px; height: 38px; } } .cj2 { display: grid; gap: 16px; margin-top: 4px; } .cj2 h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text); } .cj-print { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cj-print .lb { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-right: 4px; } .cj-print a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text2); font-size: 12.5px; font-weight: 600; text-decoration: none; } .cj-print a:hover { color: var(--text); background: var(--glass-3); } .cj-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 16px; align-items: start; } .cj-gerar { min-width: 0; margin: 0; } .cj-g-h p { margin: 4px 0 14px; color: var(--text3); font-size: 13px; } .cj-q { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text3); } .cj-q:focus-within { border-color: var(--text3); } .cj-q input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 15px; color: var(--text); } .cj-res { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .cj-res-i { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--glass-2); text-decoration: none; color: var(--text); font-size: 14px; } .cj-res-i:hover { background: var(--glass-3); } .cj-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .cj-chips > span { font-size: 12px; color: var(--text3); margin-right: 2px; } .cj-chips .pill b { font-variant-numeric: tabular-nums; margin-right: 4px; } .cj-novo { margin-top: 14px; } .cj-novo > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--text2); } .cj-novo > summary::-webkit-details-marker { display: none; } .cj-novo-f { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .cj-novo-f input, .cj-link input { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--text); font: inherit; font-size: 14px; min-width: 0; flex: 1 1 180px; } .cj-link { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--glass-2); font-size: 13px; } .cj-link p { margin: 0 0 8px; } .cj-err { color: var(--danger); } .cj-p-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cj-p-n { flex: 1; min-width: 160px; } .cj-p-n b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .cj-p-n b a { color: inherit; text-decoration: none; } .cj-p-n small { color: var(--text3); font-size: 12.5px; } .cj-tabs { display: flex; gap: 4px; margin: 16px 0 14px; padding: 4px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); overflow-x: auto; scrollbar-width: none; } .cj-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .cj-tabs button[aria-selected="true"] { background: var(--glass-3); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .cj-tabs .nb { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--text3); color: var(--text3); } .cj-tabs .st-ok .nb { background: var(--green); border-color: var(--green); color: #fff; } .cj-tabs .st-falta .nb { border-color: var(--amber); color: var(--amber); } .cj-tabs .st-ipad .nb { border-color: var(--blue, var(--info)); color: var(--blue, var(--info)); } .cj-tabs .st-bloq { opacity: .5; } .cj-pane[hidden] { display: none; } .cj-l { margin: 0 0 10px; font-size: 14px; color: var(--text2); line-height: 1.5; } .cj-l b { color: var(--text); } .cj-help { margin: -4px 0 10px; font-size: 12.5px; color: var(--text3); } .cj-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .cj-ipad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12.5px; color: var(--text3); } .cj-ipad .d { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); } .cj-ipad.ok .d { background: var(--green); } .cj-ipad.on .d { background: var(--blue, var(--info)); animation: dh-pulse 1.6s infinite; } .cj-steps2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .cj-steps2 > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; } .cj-steps2 .nb { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--glass-3); color: var(--text2); } .cj-steps2 b { display: block; font-size: 14px; color: var(--text); margin: 2px 0 6px; } .cj-steps2 p { margin: 0; font-size: 13px; color: var(--text2); } .cj-grp { display: grid; gap: 6px; margin-bottom: 10px; } .cj-grp > small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); } .cj-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 14px; cursor: pointer; } .cj-t input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); } .cj-t .t small { color: var(--text3); font-size: 12px; margin-left: 4px; } .cj-t .s { font-size: 12px; color: var(--green); white-space: nowrap; } .cj-t.dis { cursor: default; } .cj-t.dis .t { color: var(--text2); } .cj-ass { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .cj-ass li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; } .cj-ass i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text3); } .cj-ass li.ok i { background: var(--green); border-color: var(--green); } .cj-ass span > small { display: block; font-size: 12px; color: var(--text3); } .cj-ass li.ok span > small { color: var(--green); } .cj-ass-a { display: flex; gap: 4px; flex-wrap: wrap; } .cj-ass-a a { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 12px; font-weight: 600; color: var(--text2); text-decoration: none; } .cj-ass-a a:hover { color: var(--text); } .cj-imp { list-style: none; margin: 0; padding: 0; } .cj-imp li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-top: 1px solid var(--hair); font-size: 14px; } .cj-imp li:first-child { border-top: 0; } .cj-agora { position: sticky; top: 12px; display: grid; gap: 10px; margin: 0; } .cj-a-h { display: flex; align-items: baseline; justify-content: space-between; } .cj-a-h span { font-size: 13px; color: var(--text3); font-variant-numeric: tabular-nums; } .cj-a-p { display: grid; gap: 3px; padding: 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-line); } .cj-a-p.now { background: var(--success-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .cj-a-p small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); } .cj-a-p.now small { color: var(--green); } .cj-a-p > b { font-size: 16px; font-weight: 700; } .cj-a-p > b a { color: inherit; text-decoration: none; } .cj-a-s { font-size: 12.5px; color: var(--text2); } .cj-a-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .cj-a-b { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .cj-vazio { margin: 4px 0; font-size: 13px; color: var(--text3); } .cj-dots { display: inline-flex; gap: 5px; align-items: center; } .cj-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text3); } .cj-dots i.ok { background: var(--green); border-color: var(--green); } .cj-dots.nada { font-size: 11.5px; color: var(--text3); } .cj-wait { display: inline-flex; gap: 8px; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--blue, var(--info)); background: var(--info-soft, var(--glass-2)); font-weight: 600; font-size: 12.5px; white-space: nowrap; } .cj-wait .dh-pulse { background: currentColor; } .cj-ok { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--green); background: var(--success-soft); font-weight: 650; font-size: 13px; } .cj-mudo { font-size: 12px; color: var(--text3); } .cj-hoje, .cj-7d { margin: 0; } .cj-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .cj-nav { display: flex; gap: 2px; } .cj-leg { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text3); } .cj-leg i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text3); margin-left: 8px; } .cj-leg i.ok { background: var(--green); border-color: var(--green); } .cj-hr { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto auto; grid-template-areas: "h n ct dots a"; gap: 12px; align-items: center; min-height: 52px; padding: 6px 4px; border-top: 1px solid var(--hair); cursor: pointer; border-radius: 10px; } .cj-hr > .h { grid-area: h; } .cj-hr > .n { grid-area: n; } .cj-hr > .ct-ic { grid-area: ct; } .cj-hr > .cj-dots { grid-area: dots; } .cj-hr > .a { grid-area: a; } .cj-7d .cj-hr { grid-template-columns: 74px minmax(0, 1fr) auto auto auto; } .cj-hr > .chev, .cj-hr > .cj-print1 { grid-area: a; justify-self: end; } .cj-hr .chev { width: 16px; height: 16px; color: var(--text3); } .cj-novos .cj-hr .h small { font-weight: 500; color: var(--text3); font-size: 11.5px; } .cj-hr:hover { background: var(--glass-2); } .cj-hr .h { font-size: 13px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; } .cj-hr.now .h { color: var(--green); } .cj-hr.faltou { opacity: .55; } .cj-hr .n { min-width: 0; } .cj-hr .n b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cj-hr .n b a { color: inherit; text-decoration: none; } .cj-hr .n small { display: block; font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cj-hr .a { display: flex; justify-content: flex-end; min-width: 0; } .cj-ind-t { margin: 8px 0 10px !important; } .cj-ind-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .cj-ind-g .card { margin: 0; padding: 14px 16px; border-radius: 16px; } .cj-ind-g b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cj-ind-g b.ok { color: var(--green); } .cj-ind-g b.warn { color: var(--amber); } .cj-ind-g small { font-size: 12px; color: var(--text3); line-height: 1.35; display: block; margin-top: 2px; } .cj-cfg { margin: 12px 0 0; font-size: 12.5px; color: var(--text3); } .cj-cfg a { color: var(--text2); } /* Central por áreas (25/09/2026 · wireframe do Cristian): início = 4 blocos · área = Gerar → Nomes → Dados */ .dz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .dz-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 190px; margin: 0; padding: 20px; border-radius: 22px; text-decoration: none; color: var(--text); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .dz-tile:hover { transform: translateY(-2px); border-color: var(--text3); } .dz-tile:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .dz-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--glass-3); color: var(--text); } .dz-ic .icon { width: 22px; height: 22px; } .dz-t { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 10px; } .dz-d { font-size: 13px; line-height: 1.4; color: var(--text3); } .dz-ns { display: flex; gap: 18px; margin-top: auto; padding-top: 14px; } .dz-n b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .dz-n small { display: block; font-size: 11.5px; color: var(--text3); margin-top: 2px; } .dz-n.ok b { color: var(--green); } .dz-n.warn b { color: var(--amber); } .dz-go { position: absolute; right: 18px; top: 22px; width: 18px; height: 18px; color: var(--text3); } .dz-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .dz-nav a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text2); font-size: 13px; font-weight: 600; text-decoration: none; } .dz-nav a:hover { color: var(--text); } .dz-nav a[aria-current="page"] { background: var(--glass-3); color: var(--text); border-color: var(--text3); } .dz-nav .dz-home { background: transparent; border-color: transparent; padding-left: 4px; } .dz-acao { margin: 0; } .dz-ah { margin-bottom: 14px; } .dz-ah h2 { font-size: 18px !important; } .dz-ah p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text3); max-width: 76ch; } .dz-acao .cj-novo-f input { height: 44px; font-size: 15px; } .dz-acao .cj-novo-f .btn { height: 44px; } .dz-dados { margin-top: 4px; } .dz-sub { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--text3) !important; margin: 0 0 10px !important; } .cj-ind-g.dz-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cj-ind-g.dz-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dz-fold { margin: 0; } .dz-fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; min-height: 32px; } .dz-fold > summary::-webkit-details-marker { display: none; } .dz-fold[open] > summary { margin-bottom: 6px; } .cj-hr:not([data-href]) { cursor: default; } .cj-hr:not([data-href]):hover { background: transparent; } .cj-hr .a { gap: 6px; flex-wrap: wrap; } .cj-cfg { margin: 0; } @media (max-width: 1180px) { .dz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cj-ind-g.dz-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .dz-tiles { gap: 10px; } .dz-tile { min-height: 168px; padding: 16px; border-radius: 18px; } .dz-t { font-size: 16px; margin-top: 6px; } .dz-d { display: none; } .dz-ns { gap: 12px; } .dz-n b { font-size: 19px; } .cj-ind-g.dz-4, .cj-ind-g.dz-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dz-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .dz-nav a { flex-shrink: 0; } .dz-acao .cj-novo-f { flex-direction: column; } .dz-acao .cj-novo-f input, .dz-acao .cj-novo-f .btn { width: 100%; } } @media (max-width: 1180px) { .cj-ind-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .cj-top { grid-template-columns: 1fr; } .cj-agora { position: static; order: -1; } } @media (max-width: 640px) { .cj-hr { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "h n ct" ". dots a"; row-gap: 4px; } .cj-hr > .a { justify-content: flex-end; } .cj-hr > .cj-dots { justify-self: start; } .cj-7d .cj-hr { grid-template-columns: 62px minmax(0, 1fr) auto; } .cj-leg { margin-left: 0; flex-basis: 100%; } .cj-ind-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cj-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .cj-ass li { grid-template-columns: 12px minmax(0, 1fr); } .cj-ass-a { grid-column: 2; } } /* pente fino (25/09/2026): uma linha, um destino · ícones no lugar de botões repetidos */ .cj-x { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text3); background: var(--glass-2); border: 1px solid var(--glass-line); } .cj-x svg { transform: rotate(45deg); } .cj-x:hover { color: var(--text); } .cj-print1 { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text2); background: var(--glass-2); border: 1px solid var(--glass-line); } .cj-print1:hover { color: var(--text); } .cj-ass li { grid-template-columns: 12px minmax(0, 1fr) auto; } .cj-ass-t { color: var(--text); text-decoration: none; font-size: 14px; } .cj-ass-t small { display: block; font-size: 12px; color: var(--green); } .cj-ass-t:hover { text-decoration: underline; text-underline-offset: 2px; } .dz-mais { margin: -6px 0 0; font-size: 12.5px; text-align: right; } .dz-mais a { color: var(--text3); } .dz-mais a:hover { color: var(--text); } .cj-p-n b a { color: inherit; text-decoration: none; } .cj-p-n b a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Central · início em faixas inteiras (25/09/2026 18h): acessos → Agora → Hoje → 7 dias · sem colunas de alturas diferentes */ .dz { gap: 20px; } .cj-agora.faixa { position: static; display: block; margin: 0; } .cj-agora.faixa .cj-a-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .cj-agora.faixa .cj-a-h .cj-ipad { margin: 0 0 0 auto; align-self: center; } .cj-a-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } /* sozinho, o cartão ocupa a faixa toda */ .cj-a-g > .cj-vazio { grid-column: 1 / -1; } .cj-a-g .cj-a-p { align-content: start; } .cj-hoje { margin: 0; } .cj-agora.faixa { order: 0 !important; } @media (max-width: 760px) { .cj-a-g { grid-template-columns: 1fr; } .cj-agora.faixa .cj-a-h .cj-ipad { margin-left: 0; flex-basis: 100%; } } /* ── Anotações da equipe (@marcação) + sino pessoal · 25/09/2026 · docs/ANOTACOES_MENCOES.md ──────────── */ .nota-card .pf-card-h h3 .icon { color: var(--text2); } .nota-card .pf-card-h .nota-todas { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text3); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; } .nota-card .pf-card-h .nota-todas:hover { color: var(--text); } .nota-form { padding-bottom: 10px; border-bottom: 1px solid var(--hair); } .nota-editor { position: relative; } .nota-editor textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; color: var(--text); } .nota-editor textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .nota-pick { position: absolute; left: 8px; top: calc(100% - 4px); z-index: 30; min-width: 240px; max-width: 320px; max-height: 260px; overflow-y: auto; padding: 6px; background: var(--glass-strong); backdrop-filter: blur(var(--blur, 18px)); -webkit-backdrop-filter: blur(var(--blur, 18px)); border: 1px solid var(--glass-line); border-radius: 14px; box-shadow: var(--elev, 0 12px 32px rgba(0,0,0,.18)); } .nota-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; } .nota-opt.on, .nota-opt:hover { background: var(--glass-3); } .nota-opt-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .nota-opt-t b { font-size: 14px; font-weight: 600; } .nota-opt-t small { font-size: 12px; color: var(--text3); } .nota-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .nota-acts .nota-hint { font-size: 12px; flex: 1; min-width: 120px; } .nota-acts .btn.primary { margin-left: auto; } .nota-err { margin-top: 8px; font-size: 13px; color: var(--danger); } .nota-lista { display: flex; flex-direction: column; } .nota-vazio { margin: 12px 0 0; color: var(--text3); font-size: 13px; line-height: 1.5; } .nota-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); scroll-margin-top: 88px; border-radius: 12px; transition: background .6s; } .nota-item:first-child { border-top: 0; } .nota-item:target, .nota-item.novo { background: var(--gold-soft); padding-left: 8px; padding-right: 8px; } .nota-av { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; overflow: hidden; } .nota-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .nota-item.legado .nota-av { background: var(--bg3); color: var(--text3); } .nota-body { flex: 1; min-width: 0; } .nota-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text3); } .nota-head b { font-size: 14px; color: var(--text); font-weight: 600; } .nota-rotulo { font-size: 12px; color: var(--text3); } .nota-rotulo::before { content: '·'; margin-right: 8px; } .nota-head .nota-acts-i { margin-left: auto; display: inline-flex; gap: 12px; } .nota-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--text3); cursor: pointer; text-decoration: none; } .nota-link:hover { color: var(--text); text-decoration: underline; } .nota-txt { margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; } .nota-item.legado .nota-txt { color: var(--text2); } .nota-item.removido .nota-txt { color: var(--text3); font-style: italic; } .nota-at { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--gold-soft); color: var(--text); font-weight: 600; line-height: 1.4; } .nota-at.eu { background: var(--gold); color: var(--gold-on); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* sino · avisos pessoais vêm primeiro */ .bell-section-link { display: block; text-decoration: none; } .bell-section-link:hover { color: var(--text); } .bell-item.sev-mencao .bell-tt { font-weight: 600; } /* /notificacoes */ .nt-card { padding: 6px 0; } .nt-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; text-decoration: none; color: inherit; border-top: 1px solid var(--hair); } .nt-item:first-child { border-top: 0; } .nt-item:hover { background: var(--glass-3); } .nt-item .nota-av { margin-top: 2px; } .nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .nt-tt { font-size: 14px; color: var(--text); } .nt-item.nao-lida .nt-tt { font-weight: 600; } .nt-sub { font-size: 13px; color: var(--text2); line-height: 1.45; overflow-wrap: anywhere; } .nt-meta { font-size: 12px; color: var(--text3); } .nt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex-shrink: 0; } @media (pointer: coarse) { .nota-link, .nota-opt { min-height: 44px; } .nota-head .nota-acts-i { gap: 16px; } } /* central /notificacoes · seções do perfil */ /* ≤720px: o v2.css deixa .al-header sticky com top:56px (era pra ficar sob a topbar antiga). No shell V3 quem rola é o .main, então o cabeçalho desce por cima do 1º card já no topo da página — em /alertas e em /notificacoes (visto em 25/09/2026). Cabeçalho volta a ser estático no celular. */ @media (max-width: 720px) { .al-header { position: static; margin: 0 0 16px; padding: 0 0 12px; background: transparent; border-radius: 0; } } .nt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; } .nt-grid .nt-card { padding: 16px 0 6px; } .nt-h { padding: 0 18px 8px; } .nt-item .nt-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex-shrink: 0; background: var(--text3); } .nt-item.nt-sev-critico .nt-sev { background: var(--danger); } .nt-item.nt-sev-alta .nt-sev, .nt-item.nt-sev-warn .nt-sev { background: var(--warn); } .nt-item.nt-sev-info .nt-sev { background: var(--info, var(--text3)); } /* widget "Marcaram você" nas homes */ .hj-grid > .mw { grid-column: span 5; } @media (max-width: 960px) { .hj-grid > .mw { grid-column: 1 / -1; } } .mw .hj-h .mw-nl { margin-left: 4px; } .mw-list { list-style: none; margin: 8px 0 0; padding: 0; } .mw-item a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; text-decoration: none; color: inherit; border-top: 1px solid var(--hair); } .mw-item:first-child a { border-top: 0; } .mw-item a:hover .mw-t { color: var(--text); } .mw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mw-t { font-size: 14px; color: var(--text2); } .mw-t b { color: var(--text); font-weight: 600; } .mw-item.nao-lida .mw-t { color: var(--text); } .mw-s { font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mw-item.nao-lida .mw-s { color: var(--text2); } .mw-when { font-size: 12px; color: var(--text3); white-space: nowrap; margin-top: 2px; } .mw.mw-compact { padding: 10px 16px; margin-bottom: 16px; } .mw-compact .hj-h { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; } .mw-compact .hj-h .icon { width: 14px; height: 14px; } .mw-compact .hj-h .mw-nl { text-transform: none; letter-spacing: 0; } .mw-compact .mw-list { margin-top: 4px; } .mw-compact .mw-item a { padding: 5px 0; align-items: center; } .mw-compact .nota-av { width: 22px; height: 22px; font-size: 9px; } .mw-compact .mw-body { flex-direction: row; align-items: baseline; gap: 8px; } .mw-compact .mw-t { white-space: nowrap; } .mw-compact .mw-s { flex: 1; } @media (max-width: 720px) { .mw-compact .mw-body { flex-direction: column; gap: 1px; } .mw-compact .mw-t { white-space: normal; } } @media (pointer: coarse) { .mw-item a { min-height: 44px; } } /* tarefas com @ · responsável e seletor genérico (mencao.js) */ .mencao-pick { position: absolute; } .lv-t-resp, .lemb-meta b { font-weight: 600; color: var(--text2); } .lv-t-resp { margin-left: 6px; font-size: 12px; } .nt-row { display: flex; align-items: center; gap: 8px; } .nt-row .nt-item { flex: 1; min-width: 0; } .nt-row .nt-feito { margin-right: 14px; flex-shrink: 0; } /* Hoje · Secretária (05/10/2026) · views/home_secretaria.php · os dois passos das fichas no topo */ .hsc-passos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .hsc-passo { margin: 0; padding: 22px; border-radius: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; } .hsc-passo h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text); } .hsc-passo p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text2); } .hsc-passo > .btn { margin-top: auto; } .hsc-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--gold-on); font-weight: 750; font-size: 15px; } .hsc-busca { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: auto; background: var(--bg3); border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 12px; } .hsc-busca .icon { color: var(--text3); flex-shrink: 0; } .hsc-busca input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--text); min-height: 36px; } .hsc-vendas { grid-column: span 7; } .hsc .hs-clinica { grid-column: span 5; } .hsc-vendas .hj-list .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 960px) { .hsc-passos { grid-template-columns: minmax(0, 1fr); } .hsc-vendas, .hsc .hs-clinica { grid-column: 1 / -1; } } /* ===================================================================================================== SITE E BUSCA (marketing) · /crescimento/site (views/crescimento_site.php) e o card "Site" da Hoje do mkt (_partials/mkt_painel.php). Reusa a gramática hj-* e mk-*; aqui só o que é próprio: título de seção dentro da grade, meia largura, variação entre períodos, termômetro da marca, subindo/caindo e a faixa de números do card. Cores só por token. Doc: docs/MKT_PERFORMANCE.md. ===================================================================================================== */ .mk-sec { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 -2px; min-width: 0; } .mk-sec:first-child { margin-top: 0; } .mk-sec h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.025em; color: var(--text); } .mk-sec .sub { font-size: 13px; color: var(--text3); } .mk-sec .hj-tag { margin-left: auto; } .mk-half { grid-column: span 6; } .mk-delta b { font-weight: 700; color: var(--text); } .mk-delta b.up { color: var(--green); } .mk-delta b.down { color: var(--red); } .mk-path { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; } .mk-termo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--glass-2); } .mk-termo b { display: block; font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); } .mk-termo small { display: block; margin-top: 2px; font-size: 12px; color: var(--text3); } .mk .mk-termo + .hj-pbar { margin-top: 10px; } .mk-updown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 12px; } .mk-updown h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text3); } .mk-updown .hj-lines { margin-top: 4px; } .mk-updown .hj-empty { margin-top: 10px; } .mk-site { grid-column: 1 / -1; } .mk-site-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } .mk-site-stat { min-width: 0; } .mk-site-stat .v { font-size: 26px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; color: var(--text); } .mk-site-stat .v.mk-site-txt { font-size: 18px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-site-stat .d { font-size: 12px; color: var(--text3); } .mk-site .hj-h .hj-tag { margin-left: 4px; } @media (max-width: 960px) { .mk-half { grid-column: 1 / -1; } .mk-sec { margin-top: 8px; } .mk-sec h2 { font-size: 19px; } .mk-sec .hj-tag { margin-left: 0; } .mk-site-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-updown, .mk-termo { grid-template-columns: minmax(0, 1fr); } /* Tabela de consultas a 390 px: CTR e Posição (.opt, mesmo padrão da .mk-camp) somem e a consulta não espreme em 4 linhas; antes a coluna Posição começava fora do card e só um scroll sem pista a alcançava. */ .mk-tab .opt { display: none; } .mk-tab th:first-child, .mk-tab td:first-child { min-width: 140px; } }