/* ============================================================================ ONDA 28 — DRAWER DO PACIENTE (3ª iteração, "completo porém ORGANIZADO") Layout estilo Aureon Suporte/Cobrança: header fixo (nome + pill etapa + tag temperatura + close, 2ª linha de identidade com telefone-link) -> tabs underline (reusa .modal-tabs) -> corpo em seções (.modal-section + título CAPS) com grid 2-col (.kv-grid) -> footer fixo. Substitui o onda-26-drawer-paciente.css (link removido do ; arquivo permanece no repo). Carrega POR ÚLTIMO pra ganhar a cascade. REGRAS: só tokens (var(--color-accent), --fs-*, --gap-*, --radius-*, --text-*, --border-*); NUNCA hex; NUNCA token global (--shadow-focus/ --ink-deep). Tudo escopado em :root[data-theme="light"] (este CRM roda data-theme="light"; o dark/legado fica intocado). onda-7b (flex header->tabs->body->footer + scroll observer) e onda-13 (fixed-right) INTACTOS. ============================================================================ */ /* ----- HEADER COMPACTO (≈2 linhas) ----- */ :root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-header { align-items: flex-start; gap: var(--gap-3); } /* linha 1: nome + pills (etapa + temperatura) */ :root[data-theme="light"] .pd-headline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-2); min-width: 0; } :root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-header__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.2; margin: 0; } /* pill de etapa read-only — reusa .badge--{cor}; só ajuste de tamanho */ :root[data-theme="light"] .pd-stage-pill { flex: 0 0 auto; } /* tag de temperatura read-only (bolinha + label) */ :root[data-theme="light"] .pd-temp-tag { display: inline-flex; align-items: center; gap: var(--gap-2); padding: 2px var(--gap-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill, 999px); flex: 0 0 auto; white-space: nowrap; } :root[data-theme="light"] .pd-temp-tag__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* linha 2: identidade (telefone-link + email) */ :root[data-theme="light"] .pd-id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-2) var(--gap-3); margin-top: var(--gap-2); font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; } :root[data-theme="light"] .pd-id__item { display: inline-flex; align-items: center; gap: var(--gap-1); min-width: 0; } :root[data-theme="light"] .pd-id__item svg { flex: 0 0 auto; opacity: 0.85; } :root[data-theme="light"] .pd-id__sep { color: var(--border-strong, var(--text-muted)); } /* telefone = LINK p/ WhatsApp (acento + tabular-nums) */ :root[data-theme="light"] .pd-id__phone { display: inline-flex; align-items: center; gap: var(--gap-1); background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); color: var(--color-accent); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: var(--transition-color, color 0.12s ease); } :root[data-theme="light"] .pd-id__phone:hover { text-decoration: underline; } :root[data-theme="light"] .pd-id__phone:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-40); } :root[data-theme="light"] .pd-id__phone--empty { color: var(--text-muted); cursor: default; text-decoration: none; } :root[data-theme="light"] .pd-id__email { color: var(--text-secondary); text-decoration: none; font-variant-numeric: tabular-nums; } :root[data-theme="light"] .pd-id__email:hover { color: var(--color-accent); text-decoration: underline; } :root[data-theme="light"] .pd-id__email--empty { color: var(--text-muted); } /* dirty badge: mantém o componente, só garante alinhamento na 2ª linha */ :root[data-theme="light"] .pd-id .dirty-badge { margin-left: auto; } /* ----- TABS UNDERLINE ----- Reusa .modal-tabs / .modal-tabs__btn (já é flex 0 0 auto fixo entre header e body via onda-7b, underline accent no ativo). Só badge de count. */ :root[data-theme="light"] .pd-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; color: var(--color-accent); background: var(--color-accent-10, var(--color-accent-05)); border-radius: var(--radius-pill, 999px); } /* ----- CORPO: seções + grid 2-col ----- */ :root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-section + .modal-section { margin-top: var(--gap-5); padding-top: var(--gap-5); border-top: 1px solid var(--border-subtle); } :root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-section__title { margin-bottom: var(--gap-3); } /* grid 2-col de campos (DADOS / QUALIFICAÇÃO) */ :root[data-theme="light"] .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3) var(--gap-4); } :root[data-theme="light"] .kv-grid .kv--full { grid-column: 1 / -1; } :root[data-theme="light"] .kv-grid .field { margin: 0; } :root[data-theme="light"] .kv-grid .field__label { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); } :root[data-theme="light"] .kv-grid .kv-readonly { font-size: var(--fs-sm); color: var(--text-primary); padding: var(--gap-2) 0; } :root[data-theme="light"] .kv-grid .kv-readonly--empty { color: var(--text-muted); } @media (max-width: 520px) { :root[data-theme="light"] .kv-grid { grid-template-columns: 1fr; } } /* ----- RESUMO: linha de etapa, retorno (lembrete) ----- */ :root[data-theme="light"] .pd-reminder-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--gap-2) var(--gap-3); font-size: var(--fs-sm); color: var(--text-secondary); } :root[data-theme="light"] .pd-reminder-row__view { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--gap-1); } :root[data-theme="light"] .pd-reminder-row__view strong { color: var(--text-primary); } :root[data-theme="light"] .pd-reminder-row.is-vencido .pd-reminder-row__view strong { color: var(--color-danger-text, var(--color-accent)); } :root[data-theme="light"] .pd-link-btn { background: none; border: 0; padding: 2px 4px; margin: -2px 0; font: inherit; font-size: var(--fs-sm); color: var(--color-accent); cursor: pointer; border-radius: var(--radius-sm); } :root[data-theme="light"] .pd-link-btn:hover { text-decoration: underline; } :root[data-theme="light"] .pd-link-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-40); } :root[data-theme="light"] .pd-reminder-edit { display: grid; grid-template-columns: max-content 1fr; gap: var(--gap-2) var(--gap-3); align-items: center; width: 100%; } :root[data-theme="light"] .pd-reminder-edit .field { margin: 0; } @media (max-width: 520px) { :root[data-theme="light"] .pd-reminder-edit { grid-template-columns: 1fr; } } /* contato novo: bloco "Jornada" acima da etapa */ :root[data-theme="light"] .pd-jornada-field { margin-bottom: var(--gap-3); } :root[data-theme="light"] .pd-jornada-field .field__label, :root[data-theme="light"] .pd-etapa-field .field__label { display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--gap-1); } /* ----- V031: badge Base/Novo no header da ficha ----- base = "Paciente" (bordô/marca). novo = "Novo" (petróleo/destaque). Só tokens; pill no padrão da .pd-temp-tag mas COM cor (read-only). */ :root[data-theme="light"] .tc-badge { display: inline-flex; align-items: center; padding: 2px var(--gap-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1.4; border-radius: var(--radius-pill, 999px); border: 1px solid transparent; flex: 0 0 auto; white-space: nowrap; } /* base = paciente da base → realce na cor da marca (bordô). */ :root[data-theme="light"] .tc-badge--base { color: var(--color-primary); background: var(--color-primary-06, rgba(122, 15, 46, 0.06)); border-color: var(--color-primary-20, rgba(122, 15, 46, 0.18)); } /* novo = contato novo → chip neutro/sóbrio (NÃO usa --color-accent: neste CRM o accent foi re-apontado pra bordô na cascade, ficaria igual ao base). */ :root[data-theme="light"] .tc-badge--novo { color: var(--text-secondary); background: var(--bg-surface-elevated, var(--bg-surface)); border-color: var(--border-strong, var(--border-subtle)); } /* ----- V031: linha nascimento (input date) + idade derivada ----- */ :root[data-theme="light"] .pd-nasc-row { display: flex; align-items: center; gap: var(--gap-2); min-width: 0; } :root[data-theme="light"] .pd-nasc-row input { min-width: 0; } :root[data-theme="light"] .pd-idade { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } :root[data-theme="light"] .pd-idade--empty { color: var(--text-muted); } /* contato novo: hint */ :root[data-theme="light"] .pd-novo-hint { display: flex; align-items: flex-start; gap: var(--gap-2); font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--gap-4); } :root[data-theme="light"] .pd-novo-hint svg { flex: 0 0 auto; margin-top: 1px; opacity: 0.8; } :root[data-theme="light"] .pd-novo-hint button { background: none; border: 0; padding: 0; font: inherit; color: var(--color-accent); cursor: pointer; text-decoration: underline; }