/* ═══════════════════════════════════════════════════════════════════ SGCE — design system Lumière Estética Fonte da verdade visual: design_system/design-system-light.html e design_system/design-system-dark.html. Nenhuma cor, fonte ou raio fora dos tokens abaixo (PRD, seção 9). Tema: light por padrão; dark via . ═══════════════════════════════════════════════════════════════════ */ /* ── 01 · Tokens ──────────────────────────────────────────────────── */ :root { /* Brand · Champagne (escurecido p/ contraste em light) */ --gold: #a88743; --gold-lt: #c9a961; --gold-dp: #6e5726; --champagne: #f7e7ce; --rose: #c48c81; /* Neutros (marfim quente, nunca branco puro de fundo) */ --ink: #faf8f4; --surface: #ffffff; --surface-2: #f4f0e8; --surface-3: #ebe5d9; --text: #1c1813; --muted: #6b6252; --muted-2: #9a9081; --hairline: rgba(110, 87, 38, .16); --hairline-2: rgba(110, 87, 38, .38); /* Semânticos (dessaturados — nunca verde/vermelho vibrantes) */ --sage: #5f7254; --terracota: #9c5449; --slate: #5f6875; /* Elevação / brilho (sombras quentes, nunca cinzas) */ --sh-1: 0 1px 2px rgba(90, 70, 30, .07); --sh-2: 0 8px 24px -8px rgba(90, 70, 30, .16); --sh-3: 0 24px 60px -16px rgba(90, 70, 30, .22); --glow: 0 0 0 1px rgba(168, 135, 67, .32), 0 8px 32px -8px rgba(168, 135, 67, .3); --ring: 0 0 0 1px var(--gold); /* Motion */ --ease: cubic-bezier(.2, .7, .3, 1); --t-fast: 220ms; --t-base: 400ms; --t-slow: 600ms; /* Type */ --serif: 'Cormorant Garamond', 'Didot', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Radius (quase reto = luxo; nada acima de 6px, exceto circular) */ --r-none: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-full: 999px; /* Derivados por tema */ --on-gold: #241d10; --btn-fg: var(--gold-dp); --btn-solid-fg: #fdfbf7; --btn-solid-fg-hover: #2a2115; --btn-shine: rgba(168, 135, 67, .22); --bar-bg: rgba(250, 248, 244, .82); --brand-fg: var(--gold-dp); /* Marca (SPRINT-042, D-4). O lockup inverte de lógica entre os temas — no claro o nome é neutro escuro, no escuro é dourado —, então nenhum token sozinho serve aos dois. Estes dois são apelidos compostos de tokens que já existem: nenhuma cor nova entra na paleta (PRD §9). */ --brand-wordmark: var(--text); --brand-sub: var(--gold-dp); --tint-1: rgba(201, 169, 97, .16); --tint-2: rgba(224, 191, 184, .14); --backdrop: rgba(28, 24, 19, .4); /* Layout */ --sidebar-w: 250px; --topbar-h: 64px; /* Teto do container de conteúdo. Telas densas (agenda, dashboard, listagens) opt-in em `.page--wide` (SPRINT-031, D-2); formulários e fichas mantêm o teto de leitura por construção (.form-card etc.). */ --page-max: 1160px; /* Diz ao navegador em que tema desenhar o cromo nativo dos widgets que ele mesmo renderiza — o calendário de `input[type=date]`, os segmentos dd/mm/aaaa e as setas de spin. Sem isto o Chrome e o Safari desenham tudo em claro, inclusive no tema escuro (SPRINT-021). */ color-scheme: light; } [data-theme='dark'] { --gold: #c9a961; --gold-lt: #e8d5a3; --gold-dp: #8f7434; --rose: #e0bfb8; --ink: #0a0908; --surface: #17150f; --surface-2: #1e1b14; --surface-3: #262218; --text: #f4f1ea; --muted: #a89f8d; --muted-2: #6f685a; --hairline: rgba(201, 169, 97, .18); --hairline-2: rgba(201, 169, 97, .38); --sage: #7a8b6f; --terracota: #b0685e; --slate: #7d8592; --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 8px 24px -8px rgba(0, 0, 0, .6); --sh-3: 0 24px 60px -16px rgba(0, 0, 0, .75); --glow: 0 0 0 1px rgba(201, 169, 97, .25), 0 8px 32px -8px rgba(201, 169, 97, .22); --on-gold: #17150f; --btn-fg: var(--gold-lt); --btn-solid-fg: #17150f; --btn-solid-fg-hover: #17150f; --btn-shine: rgba(255, 255, 255, .26); --bar-bg: rgba(10, 9, 8, .82); --brand-fg: var(--gold-lt); --brand-wordmark: var(--brand-fg); --brand-sub: var(--muted); --tint-1: rgba(201, 169, 97, .10); --tint-2: rgba(224, 191, 184, .05); --backdrop: rgba(0, 0, 0, .55); color-scheme: dark; } /* ── 02 · Base ────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* O atributo hidden vence qualquer display de classe (linhas de formset removidas, painéis condicionais). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 500px at 80% -8%, var(--tint-1), transparent 62%), radial-gradient(700px 500px at 0% 10%, var(--tint-2), transparent 58%); } a { color: var(--gold-dp); text-decoration: none; transition: color var(--t-base) var(--ease); } a:hover { color: var(--gold); } /* O prefixo de tema vai em :where() para NÃO carregar especificidade (SPRINT-035). Sem isso, `[data-theme='dark'] a` pesa (0,1,1) e vence toda regra de componente `.classe { color }`, que pesa (0,1,0) — a cor do componente some em qualquer do tema escuro, e no .btn--solid o --gold ainda por cima é a ponta clara do gradiente de fundo: texto e fundo na mesma cor. Com :where() a regra pesa (0,0,1) e continua vencendo o `a` puro por vir depois, então link sem classe segue dourado e componente com classe manda na própria cor. */ :where([data-theme='dark']) a { color: var(--gold); } :where([data-theme='dark']) a:hover { color: var(--gold-lt); } :focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold); border-radius: var(--r-xs); } .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 300; padding: 10px 18px; background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-xs); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } .skip-link:focus-visible { left: 12px; } svg.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.5; vertical-align: -.22em; } /* ── 03 · Shell (menu lateral + cabeçalho + conteúdo) ─────────────── */ .shell { position: relative; z-index: 1; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 210; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--hairline); transition: transform var(--t-base) var(--ease); } /* ── Marca da clínica no topo da sidebar (SPRINT-042, RN-MRC-003) ───── Quem assina a tela por dentro é a clínica, não o SGCE — é o que o próprio design system de referência já mostrava, com LUMIÈRE no `.nav-brand`. A caixa tem altura mínima fixa para que a barra não pule entre uma clínica de logo e uma de nome comprido. */ .sidebar-brand { display: flex; align-items: center; min-height: 56px; padding: 19px 22px; border-bottom: 1px solid var(--hairline); } /* A logo se acomoda dentro da caixa de 206 × 56 (a largura útil da sidebar), nunca o contrário: `contain` preserva a proporção, e o arquivo grande encolhe sem ser reprocessado no servidor (D-2). */ .sidebar-brand__logo { display: block; max-width: 206px; max-height: 56px; object-fit: contain; } .sidebar-brand__fallback { min-width: 0; } .sidebar-brand .bn { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: .16em; line-height: 1.15; color: var(--brand-fg); /* Nome comprido para em duas linhas e vira reticência (RN-MRC-006): sem isto, "CLÍNICA INTEGRADA DE ESTÉTICA AVANÇADA" empurraria o menu inteiro para baixo. `anywhere` cobre o nome de palavra só. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .sidebar-brand .bs { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted-2); } /* Pré-visualização da logo nas configurações (SPRINT-042, RN-MRC-008). Fica coladinha ao bloco de cima de propósito: a caixa aqui tem a mesma área útil da caixa da sidebar (206 × 56 — os 2px extras são a borda, que o `border-box` desconta), porque o que o gestor precisa ver é como a marca vai assinar a tela. Se uma medida mudar ali em cima, muda aqui junto. */ .logo-preview { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .logo-preview__box { display: flex; align-items: center; justify-content: center; flex: none; width: 208px; height: 58px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); } .logo-preview__box img { display: block; max-width: 206px; max-height: 56px; object-fit: contain; } .logo-preview__empty { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted-2); } .logo-preview__meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; } .logo-preview__name { font-size: 12px; color: var(--text); overflow-wrap: anywhere; } .logo-preview__hint { font-size: 12px; color: var(--muted); line-height: 1.5; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 0 20px; } .nav-group { padding: 14px 22px 0; } .nav-group-label { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dp); font-weight: 500; margin-bottom: 8px; } [data-theme='dark'] .nav-group-label { color: var(--gold-dp); } .nav-item { display: flex; align-items: center; gap: 11px; margin: 0 -10px; padding: 8px 10px; border-left: 2px solid transparent; border-radius: var(--r-xs); font-size: 12.5px; color: var(--muted); transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .nav-item .icon { color: var(--muted-2); transition: color var(--t-base) var(--ease); } .nav-item:hover { color: var(--text); background: color-mix(in srgb, var(--gold) 6%, transparent); } .nav-item:hover .icon { color: var(--gold); } .nav-item.active { color: var(--gold-dp); font-weight: 400; border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); } [data-theme='dark'] .nav-item.active { color: var(--gold-lt); } .nav-item.active .icon { color: var(--gold); } .nav-item--soon { cursor: default; color: var(--muted-2); } .nav-item--soon:hover { color: var(--muted-2); background: transparent; } .nav-item--soon:hover .icon { color: var(--muted-2); } .nav-item--soon .soon { margin-left: auto; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 2px 6px; white-space: nowrap; } .nav-count { margin-left: auto; min-width: 18px; text-align: center; font-size: 9.5px; font-weight: 500; color: var(--on-gold); background: linear-gradient(135deg, var(--gold-dp), var(--gold)); border-radius: var(--r-full); padding: 1px 6px; } .sidebar-foot { padding: 14px 22px 18px; border-top: 1px solid var(--hairline); font-size: 10.5px; color: var(--muted-2); letter-spacing: .06em; } /* Versão do que está rodando (SPRINT-023, RF-SIS-001): segunda linha, discreta — presente para consulta, sem competir com a navegação. */ .sidebar-version { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .04em; color: var(--muted-2); opacity: .8; text-decoration: none; } a.sidebar-version:hover { color: var(--gold-dp); opacity: 1; } [data-theme='dark'] a.sidebar-version:hover { color: var(--gold-lt); } .sidebar-backdrop { position: fixed; inset: 0; z-index: 205; background: var(--backdrop); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease); } .main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 190; display: flex; align-items: center; gap: 14px; height: var(--topbar-h); padding: 0 26px; background: var(--bar-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .topbar-search { position: relative; flex: 0 1 380px; } .topbar-search .icon { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; } .topbar-search input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hairline); padding: 9px 2px 9px 28px; color: var(--text); font-family: var(--sans); font-size: 13px; font-weight: 300; outline: none; transition: border-color var(--t-base) var(--ease); } .topbar-search input:focus { border-color: var(--gold); box-shadow: none; } .topbar-search input::placeholder { color: var(--muted-2); } .topbar-spacer { flex: 1; } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--muted); cursor: pointer; transition: all var(--t-base) var(--ease); } .icon-btn:hover { color: var(--gold-dp); border-color: var(--hairline-2); background: color-mix(in srgb, var(--gold) 7%, transparent); } [data-theme='dark'] .icon-btn:hover { color: var(--gold-lt); } /* Variantes de linha de grade (SPRINT-022): menor e com tom de remoção. */ .icon-btn--sm { width: 32px; height: 32px; } .icon-btn--danger:hover, [data-theme='dark'] .icon-btn--danger:hover { color: var(--terracota); border-color: color-mix(in srgb, var(--terracota) 38%, transparent); background: color-mix(in srgb, var(--terracota) 8%, transparent); } .icon-btn .count { position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--on-gold); background: linear-gradient(135deg, var(--gold-dp), var(--gold)); border-radius: var(--r-full); box-shadow: 0 0 0 2px var(--ink); } .icon-btn .count:empty { display: none; } .theme-toggle .icon-moon { display: none; } [data-theme='dark'] .theme-toggle .icon-sun { display: none; } [data-theme='dark'] .theme-toggle .icon-moon { display: block; } .topbar-user { display: flex; align-items: center; gap: 10px; margin-left: 4px; } .avatar { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: linear-gradient(135deg, var(--gold-dp), var(--gold)); color: var(--on-gold); font-size: 11px; font-weight: 600; letter-spacing: .04em; flex: none; } .topbar-user .who { line-height: 1.3; } .topbar-user .who strong { display: block; font-size: 12px; font-weight: 400; color: var(--text); } .topbar-user .who span { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .content { flex: 1; } .page { max-width: var(--page-max); margin: 0 auto; padding: 36px 28px 72px; } /* Telas de grade/tabela usam até 1760px (SPRINT-031, D-2/D-3): cobre um monitor Full HD inteiro e boa parte de um QHD sem tornar a linha de tabela ilegível num ultrawide. `max-width` só limita — abaixo do teto nada muda, e o mobile (seção 15) fica intocado. */ .page--wide { --page-max: 1760px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .page-label { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--gold); letter-spacing: .08em; margin-bottom: 5px; } .page-title { font-family: var(--serif); font-size: 30px; font-weight: 300; letter-spacing: -.01em; line-height: 1.15; } .page-desc { font-size: 13px; color: var(--muted); max-width: 620px; margin-top: 6px; } .page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Voltar acima do título, para listagens abertas a partir de outra tela ("Ver todos" da ficha do paciente — NAV-04, SPRINT-025). */ .page-back { margin-bottom: 14px; } .section-label { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dp); font-weight: 500; margin: 30px 0 12px; } /* ── 04 · Botões ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 13px 26px; border-radius: var(--r-xs); border: 1px solid var(--gold); background: transparent; color: var(--btn-fg); cursor: pointer; text-decoration: none; transition: all var(--t-slow) var(--ease); position: relative; overflow: hidden; white-space: nowrap; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--btn-shine) 50%, transparent 80%); transform: translateX(-130%); transition: transform 700ms var(--ease); } .btn:hover::before { transform: translateX(130%); } .btn:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); border-color: var(--gold-dp); color: var(--btn-fg); } [data-theme='dark'] .btn:hover { border-color: var(--gold-lt); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold); } .btn--solid { background: linear-gradient(135deg, var(--gold-dp), var(--gold)); color: var(--btn-solid-fg); border-color: transparent; font-weight: 600; } .btn--solid::before { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .3) 50%, transparent 80%); } .btn--solid:hover { background: linear-gradient(135deg, var(--gold), var(--gold-lt)); color: var(--btn-solid-fg-hover); } .btn--ghost { border-color: var(--hairline-2); color: var(--muted); } .btn--ghost:hover { border-color: var(--text); color: var(--text); background: transparent; } .btn--danger { border-color: color-mix(in srgb, var(--terracota) 45%, transparent); color: var(--terracota); } .btn--danger:hover { background: color-mix(in srgb, var(--terracota) 8%, transparent); border-color: var(--terracota); color: var(--terracota); } .btn--sm { font-size: 10px; padding: 9px 18px; letter-spacing: .16em; } .btn--icon { width: 40px; height: 40px; padding: 0; border-radius: var(--r-full); letter-spacing: 0; } .btn--block { width: 100%; } .btn[disabled], .btn--disabled { opacity: .35; pointer-events: none; } .btn.is-loading { pointer-events: none; opacity: .75; } .btn.is-loading::after { content: ''; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: var(--r-full); animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ── 05 · Badges (status agenda · financeiro · alertas) ───────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; padding: 5px 11px; border-radius: var(--r-sm); border: 1px solid; white-space: nowrap; } .badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .badge--ok, .badge--st-confirmado, .badge--st-atendido, .badge--st-pago, .badge--st-resolvido, .badge--st-aprovado, .badge--st-concluido, .badge--st-compensado { color: var(--sage); border-color: color-mix(in srgb, var(--sage) 38%, transparent); background: color-mix(in srgb, var(--sage) 8%, transparent); } .badge--warn, .badge--st-em-espera, .badge--st-em-atendimento, .badge--st-parcial, .badge--st-aberto, .badge--st-follow-up, .badge--st-depositado { color: var(--gold-dp); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); } [data-theme='dark'] .badge--warn, [data-theme='dark'] .badge--st-em-espera, [data-theme='dark'] .badge--st-em-atendimento, [data-theme='dark'] .badge--st-parcial, [data-theme='dark'] .badge--st-aberto, [data-theme='dark'] .badge--st-follow-up { color: var(--gold); } .badge--danger, .badge--st-atrasado, .badge--st-faltou, .badge--st-vencido, .badge--st-reprovado, .badge--st-devolvido { color: var(--terracota); border-color: color-mix(in srgb, var(--terracota) 35%, transparent); background: color-mix(in srgb, var(--terracota) 7%, transparent); } .badge--info, .badge--st-agendado, .badge--st-em-aberto, .badge--st-em-tratamento, .badge--st-em-andamento, .badge--st-a-vencer, .badge--st-em-carteira { color: var(--slate); border-color: color-mix(in srgb, var(--slate) 35%, transparent); background: color-mix(in srgb, var(--slate) 8%, transparent); } .badge--muted, .badge--st-desmarcado, .badge--st-cancelado, .badge--st-ignorado, .badge--st-pendente { color: var(--muted); border-color: var(--hairline-2); background: var(--surface-2); } .badge--vip { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 40%, transparent); background: color-mix(in srgb, var(--rose) 8%, transparent); } .badge--fill { background: color-mix(in srgb, currentColor 16%, transparent); } /* estados terminais/ativos: preenchimento mais forte */ .badge--st-em-atendimento, .badge--st-atendido, .badge--st-faltou { background: color-mix(in srgb, currentColor 16%, transparent); } /* ── 05b · Indicador de estado em ícone (SPRINT-046) ────────────── Estado em listagem é ícone, não selo: glifo de 16px numa caixa de 20px, `role="img"` + `aria-label` (o estado por extenso) + `data-tip` (a dica curta, servida pelo `initTooltips`). Um `.badge` media 28px de altura e de 70 a 151px de largura por estado; o ícone, 20 × 20 — a coluna passa a ser limitada pelo cabeçalho. Sem `tabindex`: vinte linhas dariam quarenta paradas de Tab sem ação nenhuma, e a linha já dá o contexto ao leitor de tela. O glifo muda com o estado — a cor só reforça (WCAG 1.4.1). Os tons vêm do mesmo mapa dos selos; sage, terracota, slate e muted trocam sozinhos no tema escuro pelo token, só o --warn precisa do mesmo salto gold-dp → gold que `.badge--warn` faz. Não é `.icon-btn`: sem borda, hover, foco ou cursor. Não há regra para `.row-inactive`: o tom é posto direto no span e vence a herança da linha apagada. */ .status-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; vertical-align: middle; color: var(--muted); } .status-icon svg.icon { width: 16px; height: 16px; } .status-icon--ok { color: var(--sage); } .status-icon--warn { color: var(--gold-dp); } [data-theme='dark'] .status-icon--warn { color: var(--gold); } .status-icon--danger { color: var(--terracota); } .status-icon--info { color: var(--slate); } .status-icon--muted { color: var(--muted-2); } /* dois alertas na mesma célula: abaixo do mínimo e validade */ .status-icon + .status-icon { margin-left: 4px; } /* ── 06 · Cards · KPI · Slot de agenda ────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); box-shadow: var(--sh-1); transition: border-color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); } [data-theme='dark'] .card { background: linear-gradient(160deg, var(--surface), var(--ink)); box-shadow: none; } .card--hover:hover { border-color: var(--hairline-2); transform: translateY(-3px); box-shadow: var(--sh-2); } .card-body { padding: 22px; } .card h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 4px; } .card .card-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; } .card-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .card-price { font-family: var(--serif); font-size: 21px; color: var(--gold-dp); } [data-theme='dark'] .card-price { color: var(--gold-lt); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .kpi { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 65%), var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 22px; } [data-theme='dark'] .kpi { background: linear-gradient(160deg, rgba(201, 169, 97, .07), transparent 65%); } .kpi .k { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dp); font-weight: 500; margin-bottom: 9px; } .kpi .v { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; } .kpi .d { font-size: 11.5px; color: var(--muted-2); margin-top: 7px; } .kpi .d.up { color: var(--sage); } .kpi .d.down { color: var(--terracota); } .slot { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--hairline); border-left: 2px solid var(--gold); border-radius: var(--r-xs); padding: 16px 18px; transition: background var(--t-base) var(--ease); } .slot:hover { background: var(--surface-2); } .slot .time { font-family: var(--serif); font-size: 19px; color: var(--gold-dp); min-width: 52px; } [data-theme='dark'] .slot .time { color: var(--gold-lt); } .slot .who { flex: 1; min-width: 0; } .slot .who strong { font-weight: 400; font-size: 14px; display: block; } .slot .who span { font-size: 11.5px; color: var(--muted-2); } /* ── 07 · Formulários ─────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 26px; } .fg { margin-bottom: 24px; } .fl { display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dp); margin-bottom: 6px; font-weight: 500; } .fi, .fg input:not([type='checkbox']):not([type='radio']):not([type='color']), .fg select, .fg textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hairline-2); border-radius: var(--r-none); padding: 10px 2px; color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 300; outline: none; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .fi:focus, .fg input:not([type='checkbox']):not([type='radio']):not([type='color']):focus, .fg select:focus, .fg textarea:focus { border-color: var(--gold); box-shadow: none; } .fi::placeholder, .fg input::placeholder, .fg textarea::placeholder { color: var(--muted-2); } .fg--error .fl { color: var(--terracota); } .fg--error input:not([type='checkbox']):not([type='radio']):not([type='color']), .fg--error select, .fg--error textarea, .fi--error { border-color: var(--terracota); background: color-mix(in srgb, var(--terracota) 5%, transparent); } .fg select, select.fi, .combo-input { appearance: none; cursor: pointer; padding-right: 22px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 2px center; } [data-theme='dark'] .fg select, [data-theme='dark'] select.fi, [data-theme='dark'] .combo-input { background-image: url("data:image/svg+xml;utf8,"); } .fg select option, select.fi option { background: var(--surface); color: var(--text); } .fg textarea, textarea.fi { min-height: 84px; resize: vertical; } /* ── Combobox de dado cadastrado (SPRINT-045) ───────────────────────── O partial marca todo ` nativo (`.select-search`, `.supply-row--search`) foi substituída pelo combobox — ver `.combo*` na seção de formulários. A regra da SPRINT-043 (filtro em linha própria) segue valendo para o único filtro que restou, o de especialidade do orçamento. */ .color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--hairline-2); vertical-align: -1px; margin-right: 8px; } /* Só para leitor de tela — some da tela sem sair da árvore acessível. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Rótulo de campo dentro de grade com cabeçalho de colunas (SPRINT-022): escondido enquanto o cabeçalho existe, de volta ao normal quando a grade empilha no celular e o cabeçalho some. */ @media (min-width: 760px) { .fl--row { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* Ajuda recolhida: troca o parágrafo fixo por um "como funciona". */ .hint { min-width: 0; } .hint > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--muted-2); transition: color var(--t-base) var(--ease); } .hint > summary::-webkit-details-marker { display: none; } .hint > summary::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: none; border: 1px solid currentColor; border-radius: var(--r-full); font-size: 9px; letter-spacing: 0; } .hint > summary:hover, .hint[open] > summary { color: var(--gold-dp); } [data-theme='dark'] .hint > summary:hover, [data-theme='dark'] .hint[open] > summary { color: var(--gold-lt); } .hint-body { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 64ch; } .ta-right { text-align: right; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .text-muted { color: var(--muted); } .text-muted-2 { color: var(--muted-2); } .serif { font-family: var(--serif); } .stack-8 { display: flex; flex-direction: column; gap: 8px; } .stack-12 { display: flex; flex-direction: column; gap: 12px; } .hairline-top { border-top: 1px solid var(--hairline); padding-top: 20px; } /* ── 14b · Abas e ficha do paciente (hub — RF-PAC-005) ────────────── */ .tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 11px 14px 9px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .tab:hover { color: var(--text); } .tab.active { color: var(--gold-dp); border-bottom-color: var(--gold); } [data-theme='dark'] .tab.active { color: var(--gold-lt); } /* Abas fixas ao rolar (SPRINT-031, D-4): numa aba longa (Financeiro com várias parcelas) a barra sumia no scroll e obrigava a voltar ao topo para trocar de seção. Mesma receita do `.topbar` (fundo translúcido + blur), presa logo abaixo dele. z-index 40: acima do conteúdo (cards em 2–6), abaixo de tudo que flutua (topbar 190, popovers/menus/modais 240+). O `overflow-x` da própria `.tabs` não quebra a fixação — só `overflow` de um ANCESTRE quebraria, e não há nenhum entre `.page` e a barra. Aplicado só por esta classe (via `_patient_tabs.html`), nunca em `.tabs` global: as abas do financeiro seguem intactas. O `padding-top` recompõe o respiro que o topo antes dava. */ .tabs--sticky { position: sticky; top: var(--topbar-h); z-index: 40; margin-bottom: 22px; padding-top: 14px; background: var(--bar-bg); backdrop-filter: blur(14px); } /* SPRINT-040 (D-5): aqui viviam as abas internas de formulário (`button.tab`, `.tabs--form`, `.tab--error`), usadas só pelo cadastro de paciente. Elas eram anteriores ao padrão de cards do PRD §9, e cobravam um remendo: marcar e abrir a aba que escondia um erro de validação. Com as seções em cards empilhados nada fica escondido, e o `initFormErrorFocus` — que já existia — dá conta sozinho. */ .patient-head { display: flex; align-items: center; gap: 20px; padding: 22px 24px; margin-bottom: 18px; flex-wrap: wrap; } .avatar--lg { width: 64px; height: 64px; font-family: var(--serif); font-size: 22px; font-weight: 500; } .patient-photo { width: 64px; height: 64px; border-radius: var(--r-full); object-fit: cover; border: 1px solid var(--hairline-2); flex: none; } .patient-id { flex: 1; min-width: 240px; } .patient-name { font-size: 24px; font-weight: 500; line-height: 1.2; } .patient-nick { font-style: italic; font-size: 16px; color: var(--muted); margin-left: 8px; } .patient-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; } .patient-facts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--muted); } .patient-facts .icon { color: var(--gold); vertical-align: -.28em; } .inactive-note { padding: 13px 18px; margin-bottom: 18px; border-left: 2px solid var(--terracota); font-size: 12.5px; color: var(--terracota); } .detail-card { padding: 26px 30px; max-width: none; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 26px; } .di .k { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; margin-bottom: 2px; } .di .v { font-size: 13.5px; } .detail-notes { font-size: 13px; color: var(--muted); max-width: 640px; } .detail-audit { font-size: 10.5px; color: var(--muted-2); letter-spacing: .08em; margin-top: 26px; } .record-cell { font-size: 16px; color: var(--gold-dp); white-space: nowrap; } [data-theme='dark'] .record-cell { color: var(--gold-lt); } .patient-link { color: var(--text); font-weight: 400; } .patient-link:hover { color: var(--gold-dp); } [data-theme='dark'] .patient-link:hover { color: var(--gold-lt); } /* ── 14c · Agenda (RF-AGE — visões, grade, popover, mini-cal) ─────── */ .schedule-shell { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; } /* min-width: 0 permite que a coluna encolha abaixo do min-width:720px da grade semana/dia (.grid-week/.grid-day) — sem isto o item de grid nunca fica menor que o conteúdo e o overflow vaza para a página inteira em vez de ficar contido no scroll do .grid-scroll. */ .schedule-main { min-width: 0; } .schedule-aside { display: flex; flex-direction: column; gap: 18px; } .schedule-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .view-switch { display: inline-flex; border: 1px solid var(--hairline-2); border-radius: var(--r-xs); overflow: hidden; } .view-switch .vs { padding: 8px 16px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--hairline); } .view-switch .vs:last-child { border-right: 0; } .view-switch .vs:hover { color: var(--text); background: color-mix(in srgb, var(--gold) 6%, transparent); } .view-switch .vs.active { background: linear-gradient(135deg, var(--gold-dp), var(--gold)); color: var(--on-gold); } .period-nav { display: inline-flex; align-items: center; gap: 4px; } .period-label { font-size: 19px; font-weight: 500; } .toolbar-spacer { flex: 1; } .grid-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); } .grid-week, .grid-day { --slot-h: 26px; min-width: 720px; } .grid-head { display: flex; border-bottom: 1px solid var(--hairline-2); } .gutter-head { width: 56px; flex: none; } .col-head { flex: 1; min-width: 0; padding: 9px 8px 7px; text-align: center; border-left: 1px solid var(--hairline); color: var(--muted); line-height: 1.3; } .col-head .dow { display: block; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .col-head .dom { display: block; font-size: 18px; color: var(--text); } .col-head.is-today { border-bottom: 2px solid var(--gold); } .col-head.is-today .dom { color: var(--gold-dp); } [data-theme='dark'] .col-head.is-today .dom { color: var(--gold-lt); } a.col-head:hover .dow { color: var(--gold-dp); } .grid-cols { display: flex; } .time-gutter { width: 56px; flex: none; } .gutter-slot { position: relative; height: var(--slot-h); } .gutter-slot span { position: absolute; top: -7px; right: 8px; font-size: 9px; color: var(--muted-2); letter-spacing: .04em; } .day-col { position: relative; flex: 1; min-width: 0; height: calc(var(--slots) * var(--slot-h)); border-left: 1px solid var(--hairline); } .day-col.is-today { background: color-mix(in srgb, var(--gold) 3%, transparent); } .slot-cell { display: block; height: var(--slot-h); border-top: 1px solid color-mix(in srgb, var(--hairline) 45%, transparent); } .slot-cell.hour-line { border-top-color: var(--hairline); } .slot-cell:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); } /* Horário coberto por bloqueio (SPRINT-021): não é link e não acende no hover — o convite para agendar simplesmente não existe ali. */ .slot-cell--blocked { cursor: not-allowed; } .slot-cell--blocked:hover { background: none; } .grid-block { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--muted-2) 22%, transparent) 7px 8px), color-mix(in srgb, var(--muted-2) 8%, transparent); border-top: 1px solid var(--hairline-2); border-bottom: 1px solid var(--hairline-2); } .grid-block span { background: var(--surface); padding: 1px 8px; border-radius: var(--r-sm); border: 1px solid var(--hairline); white-space: nowrap; overflow: hidden; max-width: 90%; text-overflow: ellipsis; } button.appt { position: absolute; left: 3px; right: 3px; z-index: 2; display: block; text-align: left; font-family: var(--sans); font-size: 10.5px; line-height: 1.35; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--gold); border-radius: var(--r-xs); padding: 3px 7px; overflow: hidden; cursor: pointer; box-shadow: var(--sh-1); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } button.appt:hover { z-index: 6; box-shadow: var(--sh-2); border-color: var(--hairline-2); } .appt-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .appt-time { font-family: var(--serif); font-size: 11.5px; font-weight: 600; color: var(--gold-dp); white-space: nowrap; } [data-theme='dark'] .appt-time { color: var(--gold-lt); } .appt-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 7.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--appt-accent, var(--muted)); white-space: nowrap; } .appt-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .appt-name { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appt-sub { display: block; font-size: 9px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appt-fin { position: absolute; bottom: 2px; right: 5px; font-size: 10px; font-weight: 600; color: var(--terracota); } /* Cor própria por status no cartão (RF-AGE-005): fundo tingido, borda direita e etiqueta na cor do status — a borda esquerda segue sendo a cor do colaborador. */ button.appt { border-right-width: 2px; border-right-color: var(--appt-accent, transparent); } .appt-st-agendado { --appt-accent: var(--slate); background: color-mix(in srgb, var(--slate) 7%, var(--surface)); } .appt-st-confirmado { --appt-accent: var(--sage); background: color-mix(in srgb, var(--sage) 9%, var(--surface)); } .appt-st-em-espera { --appt-accent: var(--gold-dp); background: color-mix(in srgb, var(--gold) 18%, var(--surface)); } [data-theme='dark'] .appt-st-em-espera { --appt-accent: var(--gold); } .appt-st-em-atendimento { --appt-accent: var(--gold-dp); background: color-mix(in srgb, var(--gold) 30%, var(--surface)); } .appt-st-atrasado { --appt-accent: var(--terracota); background: color-mix(in srgb, var(--terracota) 13%, var(--surface)); } .appt-st-atendido { --appt-accent: var(--sage); background: color-mix(in srgb, var(--sage) 18%, var(--surface)); } .appt-st-faltou { --appt-accent: var(--terracota); background: color-mix(in srgb, var(--terracota) 22%, var(--surface)); } .appt-st-desmarcado { --appt-accent: var(--muted-2); } .appt--cancelled { opacity: .5; background: var(--surface-2); border-style: dashed; color: var(--muted-2); } .appt--cancelled .appt-name { text-decoration: line-through; font-weight: 300; } .appt--cancelled .appt-time { color: var(--muted-2); } /* visão Mês */ .month-grid { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); overflow: hidden; } .month-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--hairline-2); } .month-head span { padding: 9px 10px; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dp); font-weight: 500; text-align: center; } .month-row { display: grid; grid-template-columns: repeat(7, 1fr); } .month-cell { display: block; min-height: 88px; padding: 8px 10px; border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); color: var(--muted); transition: background var(--t-fast) var(--ease); } .month-cell:first-child { border-left: 0; } .month-row:first-child .month-cell { border-top: 0; } .month-cell:hover { background: var(--surface-2); } .month-cell.out { opacity: .38; } .month-cell .mc-day { display: block; font-size: 16px; color: var(--text); } .month-cell.is-today .mc-day { color: var(--gold-dp); font-weight: 600; } [data-theme='dark'] .month-cell.is-today .mc-day { color: var(--gold-lt); } .mc-count { display: block; font-size: 9.5px; margin-top: 3px; color: var(--muted); } .mc-dots { display: flex; gap: 3px; margin-top: 5px; } .mc-dots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--hairline-2); } /* mini-calendário lateral (sempre visível — RF-AGE-001) */ .mini-cal { padding: 14px 16px 16px; } .mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .mini-cal-head .icon-btn { width: 28px; height: 28px; } .mini-cal-title { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--gold-dp); } .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .mini-cal-grid .mch { font-size: 8px; letter-spacing: .1em; color: var(--muted-2); padding: 3px 0; } .mcd { position: relative; display: block; padding: 5px 0 7px; font-size: 10.5px; color: var(--muted); border-radius: var(--r-xs); } .mcd:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--text); } .mcd.out { opacity: .35; } .mcd.is-today { color: var(--gold-dp); font-weight: 600; } [data-theme='dark'] .mcd.is-today { color: var(--gold-lt); } .mcd.selected { background: linear-gradient(135deg, var(--gold-dp), var(--gold)); color: var(--on-gold); } .mcd.busy::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateX(-50%); opacity: .7; } .legend-card { padding: 14px 16px 16px; } .legend-item { display: flex; align-items: center; font-size: 11.5px; color: var(--muted); } /* popover de detalhes (RF-AGE-010) */ .appt-popover { position: fixed; z-index: 240; width: min(320px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-md); box-shadow: var(--sh-3); animation: modal-in var(--t-base) var(--ease); } .pop-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--hairline); } .pop-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pop-title { font-family: var(--serif); font-size: 17px; font-weight: 500; } .pop-sub { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-top: 2px; } .pop-body { padding: 10px 16px 12px; font-size: 12px; color: var(--muted); } .pop-row { display: flex; gap: 8px; margin: 5px 0; align-items: baseline; } .pop-row .k { flex: none; width: 92px; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); } .pop-row .v { color: var(--text); } .pop-fin { color: var(--terracota); font-weight: 500; } .pop-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--hairline); } .pop-actions form { display: inline; } /* O picker de procedimentos do agendamento usa as classes `.combo*` (SPRINT-045) — `.combo-list--inline` para a lista de contratados. */ .proc-selected { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; align-items: center; } .proc-empty { font-size: 12px; color: var(--muted-2); } .proc-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline-2); border-left: 2px solid var(--gold); border-radius: var(--r-sm); background: var(--surface); padding: 6px 8px 6px 10px; font-size: 11.5px; } .proc-chip strong { font-weight: 500; } .proc-chip-meta { font-size: 9.5px; color: var(--muted-2); } .proc-chip-remove { border: 0; background: none; color: var(--muted-2); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; } .proc-chip-remove:hover { color: var(--terracota); } .proc-chip--total { border-style: dashed; border-left: 2px dashed var(--hairline-2); color: var(--gold-dp); background: color-mix(in srgb, var(--gold) 7%, transparent); } [data-theme='dark'] .proc-chip--total { color: var(--gold-lt); } /* modal cadastral / desmarcação */ .schedule-modal .modal-body { max-height: 72vh; overflow-y: auto; } .cadastral-note { border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); padding: 10px 14px; border-radius: var(--r-xs); font-size: 12.5px; margin: 10px 0 16px; } .modal-foot--reverse { flex-direction: row-reverse; justify-content: flex-start; } .stagger > * { animation: rise .5s var(--ease) both; } .stagger > :nth-child(2) { animation-delay: 60ms; } .stagger > :nth-child(3) { animation-delay: 120ms; } .stagger > :nth-child(4) { animation-delay: 180ms; } .stagger > :nth-child(5) { animation-delay: 240ms; } .stagger > :nth-child(6) { animation-delay: 300ms; } .stagger > :nth-child(n+7) { animation-delay: 360ms; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } /* ── 14d · Orçamentos (RF-ORC — form de itens, totais, detalhe) ───── */ /* SPRINT-022: as linhas viram grade com um cabeçalho de colunas único (.budget-grid-head) — os rótulos por linha continuam no HTML, ocultos por .fl--row, e voltam a aparecer quando a grade empilha no celular. */ .budget-item-row { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(130px, 1.3fr) 64px 100px minmax(78px, .8fr) 32px; gap: 0 12px; align-items: start; } /* Linha de produto do orçamento (SPRINT-018): produto · qtde · valor · tipo (venda/brinde/cortesia) · total · remover */ .budget-product-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) 88px 96px minmax(110px, 1fr) minmax(78px, .8fr) 32px; gap: 0 12px; align-items: start; } .budget-item-row .fg, .budget-product-row .fg { margin-bottom: 10px; } /* SPRINT-031 D-7, corrigido pela SPRINT-043: o picker de procedimento era especialidade + busca + select empilhados numa célula só. Os dois filtros saíram para a linha de cima (`.item-pick`); o `.proc-pick` ficou sendo o invólucro do procedimento e da tarja de pacote/presente que o JS pendura nele. */ .proc-pick { display: flex; flex-direction: column; gap: 6px; } .proc-pick .fg { margin-bottom: 0; } .proc-pick-spec { font-size: 12px; } /* SPRINT-043 (RN-ORC-P01/P02) — a linha do item se alinha pelo DADO. Os filtros ocupam uma linha própria da grade, sobre as colunas Procedimento e Colaborador; todo o resto desce para a linha 2 e nasce no mesmo prumo. O modificador existe porque `.budget-grid-head` também é `.budget-item-row`, e o cabeçalho não pode ir para a linha 2. De quebra a linha ficou mais baixa: some uma das três alturas que o empilhamento somava. */ .budget-item-row--pick .item-pick { grid-row: 1; grid-column: 1; display: flex; gap: 12px; margin-bottom: 8px; } .budget-item-row--pick .item-pick > * { flex: 1; min-width: 0; } .budget-item-row--pick > *:not(.item-pick) { grid-row: 2; } /* A linha do item passou a ter duas faixas (filtros, dados), e com o espaçamento antigo o branco DENTRO da linha (8px) ficava igual ao branco ENTRE linhas (10px): quatro faixas soltas em vez de dois pares. Quem agrupa é a proximidade, então a distância entre linhas precisa ser visivelmente maior que a de dentro — não é respiro estético, é o que diz quais duas faixas são o mesmo item. */ .budget-item-row--pick + .budget-item-row--pick { margin-top: 16px; } /* Rótulos de uma linha só: mantêm os campos da linha alinhados. */ .budget-item-row .fl, .budget-product-row .fl, .sess-product-row .fl { white-space: nowrap; } /* Sem rótulo na linha (o cabeçalho da grade o substitui), o valor alinha pela altura do próprio campo. */ .item-total { padding-top: 11px; font-family: var(--serif); font-size: 16px; color: var(--gold-dp); text-align: right; white-space: nowrap; } /* Linhas expandidas de um pacote (SPRINT-018 fase B): valores travados. A margem negativa joga a marca para a folga do card — sem ela a linha inteira desalinha do cabeçalho de colunas (SPRINT-022). */ .is-package-row { border-left: 3px solid var(--gold-dp); padding-left: 11px; margin-left: -14px; border-radius: 4px; } .package-flag { margin: -6px 0 10px; color: var(--gold-dp); } .package-picker { display: flex; gap: 10px; align-items: center; margin-top: 12px; max-width: 460px; } .package-picker .fi { flex: 1; } .item-remove { padding-top: 4px; } .budget-totals { display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; padding: 4px 0 14px; } .budget-totals .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 12.5px; color: var(--muted); } .budget-totals .row .v { font-family: var(--serif); font-size: 15px; color: var(--text); } .budget-totals .row.total { border-top: 1px solid var(--hairline-2); padding-top: 7px; } .budget-totals .row.total .v { font-size: 24px; color: var(--gold-dp); } .discount-wrap { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; } .discount-approval { border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: var(--r-xs); padding: 16px 18px; margin: 4px 0 14px; } .discount-approval .da-title { display: flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--gold-dp); margin-bottom: 8px; } .discount-approval p { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } /* ── 14d.1 · Orçamento: espaço de composição (SPRINT-022) ────────── À esquerda os cards de composição; à direita o resumo que acompanha a rolagem com o total ao vivo e as ações. Mesma gramática do .schedule-shell da agenda (trabalho + trilho lateral). */ .budget-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; } .budget-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .budget-card { padding: 22px 26px 24px; } /* A coluna de composição é mais estreita que um form-card: sem baixar o mínimo, os três campos de abertura quebram em 2 + 1 e abrem um vão. */ .budget-card .form-grid { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } .budget-card > .fg:last-child, .budget-card > .form-grid:last-child > div > .fg:last-child { margin-bottom: 0; } .card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .section-label--card { margin-top: 0; } /* Aberto, o "como funciona" ganha a linha inteira em vez de espremer o texto na sobra à direita do título. */ .card-head-row .hint[open] { flex: 1 1 100%; margin-bottom: 4px; } /* Cabeçalho de colunas das grades de item/produto: substitui os rótulos repetidos em cada linha. */ .budget-grid-head { padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); } .budget-grid-head > span { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dp); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .budget-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .budget-aside { position: sticky; top: calc(var(--topbar-h) + 20px); } .budget-summary { padding: 22px 24px 24px; } .bs-meta { display: flex; flex-direction: column; gap: 11px; padding-bottom: 15px; } .bs-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bs-row .k { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; } .bs-row .v { font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } .budget-totals--aside { padding: 15px 0 0; border-top: 1px solid var(--hairline); } .budget-totals--aside .row.total { flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 3px; } .budget-totals--aside .row.total .v { font-size: 28px; line-height: 1.15; } .bs-method { padding-top: 15px; border-top: 1px solid var(--hairline); } .bs-todo { margin-top: 15px; padding: 9px 11px; border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); font-size: 11.5px; line-height: 1.5; color: var(--muted); } .bs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .bs-actions .btn { width: 100%; justify-content: center; } /* Destaque do valor recém-recalculado — o "vai se atualizando". */ @keyframes value-tick { from { color: var(--gold); transform: translateY(-2px); } } .is-tick { animation: value-tick .45s var(--ease); } /* ── 14d.2 · Sobre o sistema (RF-SIS-001, SPRINT-023) ─────────────── */ .about-card { padding: 22px 24px 24px; } .about-version { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; color: var(--gold-dp); margin: 2px 0 16px; } [data-theme='dark'] .about-version { color: var(--gold-lt); } .about-list { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; } .about-list > div { display: flex; flex-direction: column; gap: 3px; } .about-list dt { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; } .about-list dd { font-size: 13px; color: var(--text); overflow-wrap: anywhere; } .about-pending { list-style: none; margin: 12px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } .about-pending li::before { content: '· '; color: var(--terracota); } .list-filter-select { max-width: 200px; } .budget-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .budget-patient { font-size: 24px; font-weight: 400; margin-bottom: 8px; } .budget-patient a { color: var(--text); } .budget-patient a:hover { color: var(--gold-dp); } .budget-head-total { text-align: right; } .budget-head-total .k { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dp); margin-bottom: 6px; } .budget-head-total .v { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; } .budget-head-total .d { font-size: 11.5px; color: var(--muted-2); margin-top: 7px; } .budget-tfoot td { border-top: 1px solid var(--hairline); padding: 8px 14px; } .budget-tfoot .tf-label { text-align: right; color: var(--muted); font-size: 12px; } .budget-tfoot .tf-total td, .budget-tfoot .tf-total .tf-label { border-top: 1px solid var(--hairline-2); } .budget-tfoot .tf-total td:last-child { font-family: var(--serif); font-size: 17px; color: var(--gold-dp); white-space: nowrap; } .budget-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .plan-item { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; } .plan-item:last-child { border-bottom: 0; } /* valor de cada parcela ao vivo no painel de aprovação (RF-ORC-003) */ /* ── 14e · Sessões (RF-SES — progresso, execuções, check-out) ─────── */ .ti-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .ti-name { font-size: 21px; font-weight: 500; } .ti-meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ti-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 210px; } .ti-count { font-size: 12px; color: var(--muted); } .ti-count .serif { font-size: 19px; color: var(--gold-dp); } .progress { width: 100%; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dp), var(--gold-lt)); transition: width var(--t-slow) var(--ease); } .exec-card { border: 1px solid var(--hairline); border-left: 2px solid var(--gold); border-radius: var(--r-xs); padding: 14px 18px; background: color-mix(in srgb, var(--surface-2) 40%, transparent); } .exec-card--reversed { border-left-color: var(--hairline-2); opacity: .72; } .exec-card--reversed .exec-title, .exec-card--reversed .exec-list { text-decoration: line-through; text-decoration-color: var(--hairline-2); } .exec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; } .exec-title { font-size: 13.5px; } .exec-badges { display: flex; gap: 8px; flex-wrap: wrap; } .exec-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; margin-top: 10px; } .exec-label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--gold-dp); margin-bottom: 4px; } .exec-list { list-style: none; font-size: 12.5px; } .exec-list li { padding: 2px 0; } .exec-notes { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .exec-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 11.5px; color: var(--muted-2); } .exec-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); } .exec-attach summary { list-style: none; cursor: pointer; } .exec-attach summary::-webkit-details-marker { display: none; } .exec-attach-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) auto; gap: 0 14px; align-items: end; margin-top: 12px; } .exec-attach-form .btn { margin-bottom: 14px; } .sess-product-row { display: grid; grid-template-columns: minmax(170px, 1.4fr) 106px 150px 120px auto; gap: 0 14px; align-items: start; } .sess-product-row .fg { margin-bottom: 14px; } /* ── 14f · Financeiro (RF-FIN — fluxo mensal, parcelas, contas) ───── */ .flow-monthnav { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; } .flow-month { font-size: 21px; min-width: 190px; text-align: center; } .flow-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .flow-grid .kpi .v { font-size: 27px; } .flow-negative { color: var(--terracota); } /* chips-resumo das listas financeiras (totais dos filtros aplicados) */ .fin-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .fin-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 7px 12px; } .fin-chip strong { font-weight: 500; color: var(--text); font-size: 12.5px; letter-spacing: normal; } .fin-chip--danger strong { color: var(--terracota); } .fin-chip--ok strong { color: var(--sage); } .list-filter-month { max-width: 170px; } .fin-recurring { font-size: 11px; color: var(--gold-dp); letter-spacing: .04em; white-space: nowrap; } [data-theme='dark'] .fin-recurring { color: var(--gold-lt); } .fin-entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .fin-entry-side { display: flex; align-items: center; gap: 10px; } .fin-payment { font-size: 12px; color: var(--muted); white-space: nowrap; } .pay-target { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); } /* extrato da conta (RF-FIN-008) */ .fin-in { color: var(--sage); white-space: nowrap; } .fin-out { color: var(--terracota); white-space: nowrap; } /* linha do formset de cheques (RF-FIN-009). Colunas minmax(0, fr): comprimem fluidamente e nunca estouram o padding do card. */ .cheque-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 0 18px; align-items: start; padding-top: 6px; border-top: 1px solid var(--hairline); } .cheque-row:first-child { border-top: 0; padding-top: 0; } .cheque-row .fg { margin-bottom: 14px; } .cheque-remove { padding-top: 22px; } .cheque-notes { grid-column: 1 / -1; } .cheque-notes .fg { margin-bottom: 10px; } /* ── 14g · Comissões (RF-COM — extrato, regras) ───────────────────── */ /* linha secundária dentro de célula de tabela (forma, data da sessão) */ .cell-sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* variante informativa (dourada) do banner de formulário — avisos que não são erro, ex.: colaborador sem regra de comissão configurada */ .form-alert--gold { border-color: color-mix(in srgb, var(--gold) 45%, transparent); border-left-color: var(--gold-dp); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--gold-dp); } .form-alert--gold a { color: inherit; text-decoration: underline; } [data-theme='dark'] .form-alert--gold { color: var(--gold); } /* ── 14h · Alertas (RF-ALE — central, tipos, contato) ─────────────── */ .alert-type { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; } .alert-type .icon { color: var(--gold-dp); flex: none; } [data-theme='dark'] .alert-type .icon { color: var(--gold); } /* ── 14i · Relatórios (RF-REL — hub por categoria, geração em tela) ─ */ .ta-r { text-align: right; } /* hub: seções por categoria com grade de tiles */ .report-section { margin-bottom: 38px; } .report-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .report-section-head .icon { color: var(--gold-dp); flex: none; } [data-theme='dark'] .report-section-head .icon { color: var(--gold); } .report-section-head h2 { font-family: var(--serif); font-size: 19px; font-weight: 300; letter-spacing: .01em; white-space: nowrap; } .report-section-head .rs-line { flex: 1; height: 1px; background: var(--hairline); } .report-section-head .rs-count { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; } /* um relatório por linha: leitura vertical, sem mistura entre vizinhos */ .report-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs); box-shadow: var(--sh-1); overflow: hidden; } [data-theme='dark'] .report-list { background: linear-gradient(160deg, var(--surface), var(--ink)); box-shadow: none; } .report-row { display: grid; grid-template-columns: auto minmax(220px, 260px) 1fr auto; align-items: center; gap: 16px; padding: 13px 18px; border-left: 2px solid transparent; transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .report-row + .report-row { border-top: 1px solid var(--hairline); } .report-row:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); border-left-color: var(--gold); } .report-row-icon { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--gold-dp); background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); transition: background var(--t-base) var(--ease); } [data-theme='dark'] .report-row-icon { color: var(--gold); } .report-row:hover .report-row-icon { background: color-mix(in srgb, var(--gold) 18%, transparent); } .report-row strong { font-size: 13.5px; font-weight: 400; color: var(--text); line-height: 1.3; } .report-row-desc { font-size: 11.5px; color: var(--muted-2); line-height: 1.45; } .report-row-chev { color: var(--muted-2); transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .report-row:hover .report-row-chev { color: var(--gold); transform: translateX(2px); } .report-filters-label { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; margin: 2px 0 14px; } /* status das exportações em segundo plano (mesmas famílias dos badges) */ .badge--st-processando { color: var(--gold-dp); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); } [data-theme='dark'] .badge--st-processando { color: var(--gold); } .badge--st-erro { color: var(--terracota); border-color: color-mix(in srgb, var(--terracota) 35%, transparent); background: color-mix(in srgb, var(--terracota) 7%, transparent); } /* ── 14j · Dashboard · Métricas · Metas ───────────────────────────── */ .dash-filters { margin-bottom: 0; } .dash-filters-note { font-size: 11px; color: var(--muted-2); } .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 18px; align-items: start; } .dash-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .dash-card--wide { grid-column: 1 / -1; } .dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .dash-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; } .dash-headline { text-align: right; } .dash-headline .hv { font-family: var(--serif); font-size: 26px; line-height: 1; } .dash-headline .hd { font-size: 11px; color: var(--muted-2); margin-top: 4px; } .dash-headline .hd.up { color: var(--sage); } .dash-headline .hd.down { color: var(--terracota); } .dash-empty { font-size: 12.5px; color: var(--muted); padding: 26px 8px; text-align: center; } /* caixa do gráfico: altura estável p/ SVG; --auto cresce com o conteúdo */ .chart-box { position: relative; min-height: 250px; } .chart-box--auto { min-height: 120px; } .chart-box svg { display: block; max-width: 100%; } .chart-skeleton { position: absolute; inset: 8px 0; border-radius: var(--r-xs); background: linear-gradient(100deg, var(--surface-2) 40%, var(--surface-3) 50%, var(--surface-2) 60%); background-size: 200% 100%; animation: chart-shimmer 1.4s infinite linear; } .chart-box--auto .chart-skeleton { position: static; height: 104px; } @keyframes chart-shimmer { to { background-position: -200% 0; } } .chart-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 8px; font-size: 12.5px; color: var(--muted); } .chart-tip { position: absolute; z-index: 5; visibility: hidden; pointer-events: none; min-width: 150px; background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); box-shadow: var(--sh-2); padding: 9px 11px; font-size: 11.5px; } .chart-tip .tt { font-weight: 500; margin-bottom: 6px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; } .chart-tip .tr { display: flex; align-items: center; gap: 7px; margin-top: 3px; } .chart-tip .sw, .chart-legend-item .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; } .chart-tip .tl { color: var(--muted); flex: 1; } .chart-tip .tv { font-variant-numeric: tabular-nums; } .chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11.5px; color: var(--muted); } .chart-legend-item { display: inline-flex; align-items: center; gap: 7px; } /* barras horizontais (status, procedimentos, rankings) */ .hbar-list { display: flex; flex-direction: column; gap: 10px; } .hbar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: 10px; align-items: center; } .hbar-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar-track { height: 10px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; } .hbar-fill { display: block; height: 100%; border-radius: var(--r-full); opacity: .85; transition: width var(--t-slow) var(--ease); } .hbar-value { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .hbar-value small { font-size: 10.5px; color: var(--muted-2); } /* rosca/gauge */ .donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; } .gauge-foot { font-size: 11.5px; color: var(--muted); text-align: center; } /* funil de orçamentos */ .funnel-list { display: flex; flex-direction: column; gap: 12px; } .funnel-step { display: grid; grid-template-columns: minmax(90px, 130px) 1fr auto; gap: 10px; align-items: center; } .funnel-label { font-size: 12px; } .funnel-track { height: 16px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; } .funnel-fill { display: block; height: 100%; border-radius: var(--r-xs); opacity: .8; transition: width var(--t-slow) var(--ease); } .funnel-value { font-size: 12.5px; font-variant-numeric: tabular-nums; } .funnel-note { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; } /* metas: farol + barra de progresso */ .farol { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; } .farol--ok { background: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 18%, transparent); } .farol--warn { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); } .farol--danger { background: var(--terracota); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracota) 20%, transparent); } .goal-list { display: flex; flex-direction: column; gap: 16px; } .goal-row-head { display: flex; align-items: center; gap: 9px; font-size: 13px; } .goal-row-head strong { font-weight: 500; } .goal-scope { font-size: 11px; color: var(--muted-2); margin-left: auto; text-align: right; } .goal-bar { height: 8px; margin-top: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; } .goal-bar--ceiling { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface-3) 6px 12px); } .goal-bar-fill { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--t-slow) var(--ease); } .goal-bar-fill--ok { background: var(--sage); } .goal-bar-fill--warn { background: var(--gold); } .goal-bar-fill--danger { background: var(--terracota); } .goal-row-foot { font-size: 11.5px; color: var(--muted); margin-top: 6px; } .goal-cell { display: flex; align-items: center; gap: 9px; min-width: 150px; } .goal-cell .goal-bar { flex: 1; margin-top: 0; } .goal-pct { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* métricas: rankings do mês e resumo de alertas */ .rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: start; } .rank-list { display: flex; flex-direction: column; gap: 12px; } .rank-row { display: flex; align-items: center; gap: 12px; } .rank-pos { font-family: var(--serif); font-size: 15px; color: var(--gold-dp); width: 20px; flex: none; text-align: center; } [data-theme='dark'] .rank-pos { color: var(--gold-lt); } .rank-main { flex: 1; min-width: 0; } .rank-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline-2); } .rank-label a:hover { color: var(--gold-dp); } .rank-bar { height: 5px; margin-top: 5px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; } .rank-bar span { display: block; height: 100%; background: var(--gold); opacity: .75; border-radius: var(--r-full); } .rank-value { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .alert-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .alert-sum-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-xs); text-decoration: none; color: inherit; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .alert-sum-item:hover { border-color: var(--hairline-2); background: var(--surface-2); } .alert-sum-item .n { font-family: var(--serif); font-size: 24px; min-width: 26px; text-align: center; color: var(--gold-dp); } [data-theme='dark'] .alert-sum-item .n { color: var(--gold-lt); } .alert-sum-item.is-zero .n { color: var(--muted-2); } .alert-sum-item .t { font-size: 11px; color: var(--muted); letter-spacing: .04em; } /* ── 14k · Assistente IA (RF-CHA — chat, sessões, stream) ─────────── */ .chat { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; height: calc(100vh - var(--topbar-h) - 108px); height: calc(100dvh - var(--topbar-h) - 108px); min-height: 440px; } .chat-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; } .chat-rail-label { font-size: 9.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dp); } .chat-sessions { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .chat-rail-empty { font-size: 11.5px; color: var(--muted-2); line-height: 1.6; } .chat-session { position: relative; display: flex; align-items: center; border-radius: var(--r-xs); transition: background var(--t-fast) var(--ease); } .chat-session:hover, .chat-session.active { background: var(--surface-2); } .chat-session .cs-link { flex: 1; min-width: 0; padding: 9px 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; border-radius: var(--r-xs); } .chat-session.active .cs-link { color: var(--text); border-left-color: var(--gold); } .cs-actions { display: none; align-items: center; gap: 2px; padding-right: 4px; } .chat-session:hover .cs-actions, .chat-session.active .cs-actions { display: flex; } .cs-actions .icon-btn { width: 26px; height: 26px; } .cs-actions .icon-btn svg.icon { width: 14px; height: 14px; } .cs-rename { position: absolute; inset: 0; z-index: 1; display: flex; background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-xs); box-shadow: var(--ring); } .cs-rename-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 300; color: var(--text); outline: none; } .chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: linear-gradient(160deg, var(--surface), var(--ink)); border: 1px solid var(--hairline); border-radius: var(--r-xs); overflow: hidden; } .chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 26px 12px; display: flex; flex-direction: column; gap: 18px; } .chat-welcome { margin: auto; max-width: 520px; text-align: center; padding: 24px 0; } .chat-welcome-icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--hairline-2); border-radius: var(--r-full); color: var(--gold); margin-bottom: 14px; } .chat-welcome h1 { font-family: var(--serif); font-size: 28px; font-weight: 300; letter-spacing: -.01em; } .chat-welcome p { font-size: 12.5px; color: var(--muted); margin: 8px 0 20px; line-height: 1.65; } .chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .chat-chip { font-family: var(--sans); font-size: 11.5px; font-weight: 300; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-xs); padding: 8px 14px; cursor: pointer; transition: all var(--t-base) var(--ease); } .chat-chip:hover { border-color: var(--gold); color: var(--gold-dp); background: rgba(168, 135, 67, .07); } [data-theme='dark'] .chat-chip:hover { color: var(--gold); } /* Aviso de histórico truncado (SPRINT-021): a tela renderiza as N mensagens mais recentes da conversa. */ .chat-older { align-self: center; max-width: 82%; margin-bottom: 18px; padding: 10px 16px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted-2); font-size: 11.5px; line-height: 1.55; text-align: center; } .chat-msg { display: flex; gap: 10px; max-width: 82%; } .chat-msg--user { align-self: flex-end; } .chat-msg--ai, .chat-msg--error { align-self: flex-start; } .chat-avatar { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline-2); border-radius: var(--r-full); color: var(--gold); background: var(--surface); margin-top: 2px; } .chat-bubble { min-width: 0; padding: 12px 16px; border-radius: var(--r-xs); font-size: 13.5px; line-height: 1.65; overflow-wrap: break-word; } .chat-msg--user .chat-bubble { background: linear-gradient(160deg, rgba(201, 169, 97, .18), rgba(201, 169, 97, .07)); border: 1px solid rgba(168, 135, 67, .3); white-space: pre-wrap; } .chat-msg--ai .chat-bubble { background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--sh-1); } .chat-msg--error .chat-bubble { background: rgba(156, 84, 73, .07); border: 1px solid rgba(156, 84, 73, .4); color: var(--terracota); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .chat-typing { display: inline-flex; gap: 5px; padding: 5px 0 3px; } .chat-typing i { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--gold); animation: chat-blink 1.2s var(--ease) infinite; } .chat-typing i:nth-child(2) { animation-delay: .2s; } .chat-typing i:nth-child(3) { animation-delay: .4s; } @keyframes chat-blink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } } .chat-bubble.is-streaming::after { content: ''; display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--gold); animation: chat-caret 1s steps(2) infinite; } @keyframes chat-caret { 50% { opacity: 0; } } /* markdown da resposta (RF-CHA-004) */ .chat-md { overflow-x: auto; } .chat-md > :first-child { margin-top: 0; } .chat-md > :last-child { margin-bottom: 0; } .chat-md p { margin: 8px 0; } .chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4, .chat-md h5, .chat-md h6 { font-family: var(--serif); font-weight: 500; line-height: 1.3; margin: 14px 0 6px; } .chat-md h1 { font-size: 19px; } .chat-md h2 { font-size: 17px; } .chat-md h3, .chat-md h4, .chat-md h5, .chat-md h6 { font-size: 15.5px; } .chat-md ul, .chat-md ol { margin: 8px 0; padding-left: 20px; } .chat-md li { margin: 3px 0; } .chat-md strong { font-weight: 500; } .chat-md a { text-decoration: underline; text-underline-offset: 2px; } .chat-md code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 1px 5px; } .chat-md pre { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 12px 14px; overflow-x: auto; margin: 10px 0; } .chat-md pre code { background: transparent; border: 0; padding: 0; } .chat-md table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; } .chat-md th { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dp); text-align: left; } .chat-md th, .chat-md td { border-bottom: 1px solid var(--hairline); padding: 7px 10px; } .chat-md thead th { border-bottom-color: var(--hairline-2); } .chat-md tbody tr:last-child td { border-bottom: 0; } .chat-md blockquote { border-left: 2px solid var(--gold); padding: 2px 0 2px 12px; color: var(--muted); margin: 8px 0; } .chat-md hr { border: 0; border-top: 1px solid var(--hairline); margin: 12px 0; } .chat-composer { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px 6px; border-top: 1px solid var(--hairline); background: var(--surface); } .chat-input { flex: 1; min-width: 0; resize: none; border: 1px solid var(--hairline-2); border-radius: var(--r-xs); background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 13.5px; font-weight: 300; line-height: 1.5; padding: 11px 14px; min-height: 42px; max-height: 132px; outline: none; transition: border-color var(--t-base) var(--ease); } .chat-input:focus { border-color: var(--gold); box-shadow: var(--ring); } .chat-input::placeholder { color: var(--muted-2); } .chat-send { width: 42px; height: 42px; border-radius: var(--r-xs); } .chat-send svg.icon { vertical-align: middle; } .chat-send.is-loading svg.icon { display: none; } .chat-send[disabled] { opacity: .45; pointer-events: none; } .chat-foot { font-size: 10.5px; color: var(--muted-2); text-align: center; padding: 6px 16px 12px; background: var(--surface); } /* ── 14l · Configurações da clínica (RF-CFG — hub, horários) ──────── */ .config-hub { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .config-hub-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-xs); padding: 10px 16px; transition: all var(--t-base) var(--ease); } .config-hub-item:hover { border-color: var(--gold); color: var(--gold-dp); background: rgba(168, 135, 67, .07); } [data-theme='dark'] .config-hub-item:hover { color: var(--gold); } .hours-table { display: flex; flex-direction: column; gap: 2px; max-width: 640px; margin-bottom: 8px; } .hours-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding: 10px 4px; border-bottom: 1px solid var(--hairline); } .hours-row:last-child { border-bottom: 0; } .hours-toggle { flex: 0 0 168px; font-size: 13px; color: var(--text); } .hours-times { display: flex; gap: 16px; flex: 1; min-width: 220px; } .hours-times .fg { flex: 1; margin-bottom: 0; } /* ── 15 · Responsividade ──────────────────────────────────────────── */ @media (max-width: 1023px) { .sidebar { transform: translateX(calc(-1 * var(--sidebar-w) - 2px)); box-shadow: none; } .shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--sh-3); } .shell.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } .main { margin-left: 0; } } @media (min-width: 1024px) { .menu-btn { display: none; } .sidebar-backdrop { display: none; } } @media (max-width: 899px) { .topbar-user .who { display: none; } /* chat: trilho de conversas vira faixa horizontal acima da conversa */ .chat { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - var(--topbar-h) - 82px); height: calc(100dvh - var(--topbar-h) - 82px); min-height: 380px; } .chat-rail { flex: none; flex-direction: row; align-items: center; gap: 10px; } .chat-rail-label { display: none; } .chat-sessions { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 2px; } .chat-session { flex: none; max-width: 190px; border: 1px solid var(--hairline); } .chat-session:hover .cs-actions { display: none; } .chat-session.active .cs-actions { display: flex; } .chat-thread { padding: 18px 14px 10px; } .chat-msg { max-width: 94%; } } @media (max-width: 1099px) { .schedule-shell { grid-template-columns: 1fr; } .schedule-aside { flex-direction: row; flex-wrap: wrap; } .schedule-aside > .card { flex: 1 1 220px; } /* SPRINT-022: o resumo do orçamento desce para o fim e deixa de acompanhar a rolagem. As grades de item/produto continuam em 6 colunas — sem o trilho lateral elas ficam com a página inteira. */ .budget-shell { grid-template-columns: minmax(0, 1fr); } .budget-aside { position: static; } /* Grades de itens: abaixo disto as 5–6 colunas não cabem no card. */ .sess-product-row, .cheque-row { grid-template-columns: 1fr 1fr; } .sess-product-row .supply-remove, .cheque-remove { padding-top: 0; margin-bottom: 18px; } } @media (max-width: 759px) { .topbar { padding: 0 14px; gap: 8px; } .page { padding: 26px 16px 56px; } .page-title { font-size: 26px; } .auth-card { padding: 34px 24px 28px; } .toast-stack { right: 12px; bottom: 12px; } .modal { padding: 14px; } .btn { padding: 12px 20px; } .form-grid { grid-template-columns: 1fr; } .supply-row { grid-template-columns: 1fr; } .adjust-row { grid-template-columns: 1fr; } .adjust-cell { padding-top: 0; margin-bottom: 10px; } .supply-remove, .supply-row--headed .supply-remove { padding-top: 0; } /* Grades empilham: some o cabeçalho de colunas e os rótulos de cada campo voltam a aparecer (.fl--row, SPRINT-022). */ .budget-item-row, .budget-product-row { grid-template-columns: 1fr; } /* SPRINT-043 (RN-ORC-P04): mesma razão da busca de insumo acima — em coluna única a colocação explícita amontoaria tudo numa linha de grade só. Desfeita, os filtros caem na ordem do documento, que já é a ordem de leitura: filtra-se antes de escolher. */ .budget-item-row--pick .item-pick, .budget-item-row--pick > *:not(.item-pick) { grid-column: auto; grid-row: auto; } .budget-item-row--pick .item-pick { flex-direction: column; gap: 14px; margin-bottom: 14px; } .budget-item-row--pick .item-pick > * { flex: none; } .budget-grid-head { display: none; } .budget-item-row .fg, .budget-product-row .fg { margin-bottom: 14px; } .item-total { text-align: left; padding-top: 0; margin-bottom: 10px; } .item-remove { padding-top: 0; margin-bottom: 18px; } .budget-card { padding: 20px 18px 22px; } .budget-summary { padding: 20px 18px 22px; } .budget-head-total { text-align: left; } .sess-product-row { grid-template-columns: 1fr; } .ti-progress { align-items: flex-start; min-width: 0; width: 100%; } .exec-attach-form { grid-template-columns: 1fr; } .period-label { width: 100%; order: 5; } /* hub de relatórios: título e descrição empilham na mesma linha */ .report-row { grid-template-columns: auto 1fr auto; row-gap: 2px; } .report-row-desc { grid-column: 2 / 4; grid-row: 2; } /* dashboard: rótulos e valores empilham nas barras horizontais */ .hbar-row, .funnel-step { grid-template-columns: 1fr auto; } .hbar-label, .funnel-label { grid-column: 1 / -1; } .dash-headline { text-align: left; } /* configurações: dia + horários empilham em vez de disputar a linha. .hours-toggle tem flex-basis pensado para largura (layout em linha) — sem resetar, na direção coluna essa base vira altura e abre um vão enorme entre o dia e os campos de horário. */ .hours-row { flex-direction: column; align-items: flex-start; gap: 8px; } .hours-toggle { flex: none; } .hours-times { width: 100%; min-width: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .sidebar, .sidebar-backdrop, .topbar, .toast-stack, .modal, .skip-link { display: none !important; } .main { margin-left: 0; } body { background: #fff; color: #000; } body::before { display: none; } /* impressão da agenda (RF-AGE-013): só a grade e o período */ .schedule-aside, .page-actions, .view-switch, .period-nav, .filter-toggle, .appt-popover { display: none !important; } .schedule-shell { grid-template-columns: 1fr; } .grid-scroll { overflow: visible; border-color: #bbb; } .day-col, .month-cell, .col-head { border-color: #ccc; } button.appt, .appt-tag, .grid-block, .mc-dots i { print-color-adjust: exact; -webkit-print-color-adjust: exact; } button.appt { box-shadow: none; } }