/* ═══════════════════════════════════════════════════════════════ PLATAFORMA DR. ANDRÉ — TOKENS DE DESIGN OFICIAIS · v1 (06/07/2026) Contrato visual da Plataforma. Copiar este arquivo para o repo e importar em toda tela. NENHUMA cor/fonte/espaçamento hardcoded. Mudança neste arquivo = mudança de contrato (DEC + COM novo). ═══════════════════════════════════════════════════════════════ */ :root { /* ── Cores · tema claro (padrão) ── */ --fundo: #FAFAF9; /* nunca branco puro */ --fundo-2: #EFEDE9; /* nível intermediário: cabeçalhos de seção/agrupadores (v1.1) */ --superficie: #FFFFFF; /* cartões */ --texto: #1A2B3B; /* nunca preto puro */ --texto-2: #5C6B7A; /* secundário — mínimo p/ texto legível */ --borda: #E7E5E4; /* acento único da marca */ --acento: #0F766E; --acento-suave: #F0FDFA; --acento-borda: #99F6E4; /* semânticas — só para significado, nunca decoração */ --ok: #15803D; --ok-suave: #F0FDF4; --ok-borda: #BBF7D0; --atencao: #B45309; --atencao-suave: #FFFBEB; --atencao-borda: #FDE68A; --erro: #B91C1C; --erro-suave: #FEF2F2; --erro-borda:#FECACA; --info: #1D4ED8; --info-suave: #EFF6FF; --info-borda:#BFDBFE; /* tipografia */ --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tam-corpo: 14px; /* mínimo para texto corrente */ --tam-secund: 13px; /* mínimo absoluto — nada abaixo disso */ --tam-titulo-3: 16px; --tam-titulo-2: 20px; --tam-titulo-1: 24px; --tam-tv: 18px; /* mínimo em telas de TV/família */ /* espaçamento — grade de 8px */ --esp-1: 4px; --esp-2: 8px; --esp-3: 16px; --esp-4: 24px; --esp-5: 32px; --esp-6: 48px; /* forma */ --raio: 8px; --raio-g: 12px; --sombra: 0 1px 3px rgba(26,43,59,.08), 0 1px 2px rgba(26,43,59,.04); } /* ── Tema escuro — ativar com ── Obrigatório onde houver toggle (Evolução: paciente e TV). */ [data-tema="escuro"] { --fundo: #111826; --fundo-2: #222E42; --superficie: #1B2434; --texto: #E8EDF4; --texto-2: #94A3B8; --borda: #2B3648; --acento: #2DD4BF; --acento-suave: #13312E; --acento-borda: #134E4A; --ok: #4ADE80; --ok-suave: #132A1C; --ok-borda: #14532D; --atencao: #FBBF24; --atencao-suave: #2E2411; --atencao-borda: #78350F; --erro: #F87171; --erro-suave: #2E1515; --erro-borda:#7F1D1D; --info: #60A5FA; --info-suave: #12233D; --info-borda:#1E3A8A; --sombra: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); } /* ── Base obrigatória ── */ body { font-family: var(--fonte); font-size: var(--tam-corpo); background: var(--fundo); color: var(--texto); line-height: 1.5; } /* algarismos tabulares — OBRIGATÓRIO em dose, valor, hora, medida */ .num { font-variant-numeric: tabular-nums; } /* ── Componentes padrão (usar; não recriar variantes) ── */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .btn { background: var(--acento); color: #fff; border: none; border-radius: var(--raio); padding: 10px 18px; font-size: var(--tam-corpo); font-weight: 500; cursor: pointer; } .btn-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); } .badge { display: inline-block; font-size: var(--tam-secund); font-weight: 600; padding: 3px 10px; border-radius: 99px; } .badge-ok { background: var(--ok-suave); color: var(--ok); } .badge-atencao { background: var(--atencao-suave); color: var(--atencao); } .badge-erro { background: var(--erro-suave); color: var(--erro); } .badge-info { background: var(--info-suave); color: var(--info); } .badge-acento { background: var(--acento-suave); color: var(--acento); } /* balão de agenda — nome do paciente dentro, cor pelo status */ .balao { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px 14px; border: 1px solid; } .balao-ok { background: var(--ok-suave); border-color: var(--ok-borda); } .balao-atencao { background: var(--atencao-suave); border-color: var(--atencao-borda); } .balao-erro { background: var(--erro-suave); border-color: var(--erro-borda); } .balao-acento { background: var(--acento-suave); border-color: var(--acento-borda); } /* ── Regras que os agentes devem cumprir (auditáveis) ── 1. Nenhum font-size abaixo de 13px (TV: abaixo de 18px). 2. Nenhuma cor hexadecimal fora deste arquivo. 3. Emoji não é ícone — usar SVG (Lucide) com stroke currentColor. 4. Dado externo nunca entra em HTML sem escape (COM-003/prov.10). 5. Toda tela funciona nos dois temas antes de ir a produção (nos produtos onde o toggle existir). */ /* ── Faixa de diagnósticos sugeridos no prontuário (05/08/2026) ───────────────── Some quando não há pendência. Amarelo = "olha aqui", sem ser alarme vermelho: isto é sugestão de IA pra revisar, não erro. */ #prDiag { border-bottom: 1px solid var(--borda); background: var(--fundo-2); } .dx-topo { display: flex; align-items: center; gap: var(--esp-2); padding: 10px 16px; background: var(--atencao-suave); border-bottom: 1px solid var(--atencao-borda); } .dx-tit { color: var(--atencao); font-size: var(--tam-secund); flex: 1; } .dx-linhas { padding: 0 16px; } .dx-linha { display: flex; gap: var(--esp-3); padding: 10px 0; align-items: flex-start; border-bottom: 1px solid var(--borda); } .dx-linha:last-child { border-bottom: 0; } .dx-corpo { flex: 1; min-width: 0; } .dx-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dx-nome { font-weight: 600; } .dx-prova { margin-top: 3px; font-size: var(--tam-secund); color: var(--ink-soft); line-height: 1.45; } .dx-selo { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .dx-selo-of { background: var(--acento-suave); color: var(--acento); } .dx-selo-fu { background: var(--fundo-2); color: var(--ink-soft); border: 1px solid var(--borda); } .dx-selo-sim { background: var(--acento-suave); color: var(--acento); } .dx-selo-talvez { background: var(--atencao-suave); color: var(--atencao); } .dx-selo-nao { background: var(--erro-suave); color: var(--erro); } .dx-acoes { display: flex; gap: 6px; flex-shrink: 0; } .dx-btn { padding: 5px 11px; border-radius: var(--esp-2); border: 1px solid var(--borda); background: var(--fundo); color: var(--ink); cursor: pointer; font-size: var(--tam-secund); } .dx-btn:hover { border-color: var(--ink-soft); } .dx-sim { border-color: var(--acento); color: var(--acento); } .dx-nao { border-color: var(--erro-borda); color: var(--erro); } .dx-btn-txt { border-color: transparent; color: var(--ink-soft); } .dx-recusada { align-items: center; } .dx-nome-recusado { text-decoration: line-through; color: var(--ink-soft); } .dx-editando { background: var(--acento-suave); margin: 0 -16px; padding: 12px 16px; } .dx-edit-tit { font-size: var(--tam-secund); color: var(--acento); margin-bottom: var(--esp-2); } .dx-input { width: 100%; padding: 7px 10px; border-radius: var(--esp-2); border: 1px solid var(--borda); background: var(--fundo); color: var(--ink); } .dx-sugestoes { margin-top: var(--esp-1); background: var(--fundo); border-radius: var(--esp-2); overflow: hidden; border: 1px solid var(--borda); } .dx-sugestoes:empty { display: none; } .dx-sug { display: flex; align-items: center; gap: var(--esp-2); padding: 7px 10px; font-size: var(--tam-secund); cursor: pointer; border-bottom: 1px solid var(--borda); } .dx-sug:last-child { border-bottom: 0; } .dx-sug:hover { background: var(--fundo-2); } .dx-sug-ok { color: var(--acento); } .dx-sug-mais { color: var(--atencao); } .dx-sug-qtd { font-size: 11px; color: var(--ink-soft); } .dx-sug-novo { color: var(--ink-soft); cursor: default; } .dx-tipo { display: flex; align-items: center; gap: var(--esp-2); margin-top: 12px; flex-wrap: wrap; } .dx-tipo-rot { font-size: var(--tam-secund); color: var(--ink-soft); } .dx-tipo-on { background: var(--acento); color: #fff; border-color: var(--acento); } .dx-edit-acoes { display: flex; align-items: center; gap: var(--esp-2); margin-top: 12px; flex-wrap: wrap; } .dx-nota { font-size: 11px; color: var(--ink-soft); } @media (max-width: 640px) { .dx-linha { flex-direction: column; gap: var(--esp-2); } .dx-acoes { width: 100%; } .dx-acoes .dx-btn { flex: 1; } } .dx-recolher { margin-left: auto; } .dx-mais { width: 100%; margin: 8px 0 10px; }