:root { /* Paleta padrão = "vinho" (2026-09-02, pedido do cliente junto com a logo nova: "atualizar o sistema para acompanhar essa cor... sendo ele a opção primária até o usuário decida mudar") - a antiga paleta verde-floresta (a original deste app) não sumiu, virou a alternativa em [data-cor="floresta"] (ver bloco logo abaixo do dark mode) - selecionável no mesmo botão que já troca claro/escuro (nav.php + assets/theme.js). */ --primary: #7a2f3f; --primary-dark: #4a1c26; --heading: var(--primary-dark); --accent: #a97c3f; --accent-light: #d4b876; --bg: #f4efe4; --bg-alt: #ebe3d2; --card: #fffdf8; --ink: #2a2520; --ink-dim: #6f6459; --border: #ddd2bd; --success: #2f6b45; --warn: #92651f; --danger: #a4453a; /* Paleta dedicada do donut/barras "Resumo do mês" - REDESENHADA 2026-08-31 (cliente, depois de "Remarcações" virar a 5ª categoria: "esta mostrando 24 cancelamentos... vamos colocar mais uma cor", depois "não gostei da harmonia das cores... não combinam entre si", depois "troca as cores de remarcada e realizados"). Mesma receita OKLCH (L=0.61 C=0.17, só o matiz muda por fatia). "Realizadas" ficou provado preso à família verde-azulada (matiz ~170°) - verde puro colide com âmbar/vermelho pra quem tem deuteranopia/protanopia, não passa no validador ao lado das outras cores fixas. O que mudou de verdade: "Cancelamentos" e "Remarcações" trocaram de lugar no espectro - cancelamento assume o ciano que remarcação tinha, remarcação vira azul-violeta (matiz 275°), opção "B" aprovada numa prévia comparativa. Validado nas DUAS sequências reais em que essas cores encostam (donut: pendente→realizado→falta→ cancelado→remarcado; barras: realizado→pendente→cancelado→falta→ remarcado) - ver validate_palette.js "#bc6f00,#00a273,#d65141,#009db3,#6876e7" e "#00a273,#bc6f00,#009db3,#d65141,#6876e7" --mode light. */ --status-pendente: #bc6f00; --status-realizado: #00a273; --status-falta: #d65141; --status-cancelado: #009db3; --status-remarcado: #6876e7; --radius: 14px; --radius-sm: 8px; --display: 'Fraunces', Georgia, serif; --body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --shadow: 0 2px 6px rgba(42, 37, 32, 0.06), 0 8px 24px rgba(42, 37, 32, 0.06); /* Fundo da tela de login (login.php's .auth-page) - sempre "escuro imponente" independente do claro/escuro do resto do app (ver comentário ali). Em tokens (não mais literal fixo) pra poder variar por [data-cor], ver blocos abaixo. */ --auth-bg-1: #6b2c3a; --auth-bg-2: #4a1c26; --auth-bg-3: #200d12; --auth-glow-2: #8a4054; } /* Cor de seleção de texto própria (2026-09-08, achado real do cliente: "ainda está difícil de ler quando fica selecionado") - sem isto, o navegador usa a cor de destaque do PRÓPRIO SISTEMA OPERACIONAL (ex: rosa/magenta no Windows com esse tema de cores) pra marcar texto arrastado/selecionado - sem contraste nenhum garantido contra os blocos coloridos da Agenda (evento verde/laranja + texto branco + seleção rosa = ilegível). --primary (o vinho da marca) com texto branco garante contraste em qualquer bloco, em vez de depender do tema de cores de quem estiver usando o sistema. */ ::selection { background: var(--primary); color: #fff; } /* Dark mode - toggled via [data-theme] on , set by partials/head.php's inline pre-paint script (localStorage, falling back to the OS preference) and flipped by assets/theme.js's button. Warm charcoal, not pure black - keeps the same "estúdio aconchegante" register as the light palette instead of going generic-dark-UI. --primary/--accent get lifted a shade brighter than their light-mode values since the originals were tuned for contrast against a pale background, not a dark one. */ :root[data-theme="dark"] { --primary: #a85068; --primary-dark: #7a2f3f; /* --heading é um token SEPARADO de --primary-dark - achado real na auditoria visual de 2026-08-04: títulos (h1/h2/h3, nav ativo, valores de resumo) usavam --primary-dark direto, que no escuro é só um verde- floresta escuro (bom como FUNDO de botão com texto branco em cima, mas quase ilegível como TEXTO sobre o próprio fundo escuro do card). Separar os dois usos resolve sem afetar onde --primary-dark já funcionava bem (hover de botão, .fc-button-active). */ --heading: #dba7b3; --accent: #e0c48f; --accent-light: #f2ddb0; --bg: #1f1418; --bg-alt: #2a1a1f; --card: #2e1c22; --ink: #f0ead9; --ink-dim: #b4a999; --border: #4a2f38; --success: #6fbf8f; --warn: #e0b35a; --danger: #e0776a; /* Mesma receita OKLCH do modo claro acima (L/matizes iguais), só a luminosidade sobe pra L=0.64 (faixa aceita no escuro é 0.48-0.67, diferente da faixa clara) - ver validate_palette.js "#c67800,#00ab7c,#e05b4a,#00a7bd,#707ff1" e "#00ab7c,#c67800,#00a7bd,#e05b4a,#707ff1" --mode dark. */ --status-pendente: #c67800; --status-realizado: #00ab7c; --status-falta: #e05b4a; --status-cancelado: #00a7bd; --status-remarcado: #707ff1; --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35); } /* Paleta "floresta" (2026-09-02) - a paleta ORIGINAL deste app (verde-floresta + dourado), agora a alternativa de COR pra quem preferir - "vinho" (base do :root acima) virou o padrão novo, pedido explícito do cliente junto com a logo nova, mas "floresta" continua selecionável no mesmo botão que já troca claro/escuro (ver nav.php + assets/theme.js). Mesma estrutura clara/escura de sempre, só a família de cor muda. */ :root[data-cor="floresta"] { --primary: #2f4a3e; --primary-dark: #203228; --heading: var(--primary-dark); --accent: #b08a3e; --accent-light: #d4b876; --auth-bg-1: #3c5c4c; --auth-bg-2: #203228; --auth-bg-3: #1a2820; --auth-glow-2: #4f7c62; } :root[data-cor="floresta"][data-theme="dark"] { --primary: #4f7c62; --primary-dark: #2f4a3e; --heading: #9dc4ac; --accent: #d4a94a; --accent-light: #e8cb84; --bg: #1c1a16; --bg-alt: #262219; --card: #29251e; --border: #423c32; --auth-bg-1: #3c5c4c; --auth-bg-2: #203228; --auth-bg-3: #1a2820; --auth-glow-2: #4f7c62; } * { box-sizing: border-box; } svg[aria-hidden="true"] { vertical-align: -0.15em; flex: 0 0 auto; } html, body { margin: 0; padding: 0; font-family: var(--body); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; } h1, h2, h3, .clinica-nav-brand { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; color: var(--heading); margin: 0; text-wrap: balance; } h1 { font-size: 1.7rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .clinica-link-btn { background: none; border: none; padding: 0; margin: 0; color: var(--primary); font-family: var(--body); font-size: inherit; font-weight: 400; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; } .clinica-link-btn[hidden] { display: none; } .clinica-link-btn:hover { text-decoration: underline; background: none; } /* Prompt inline "Confirmar próxima sessão" (2026-08-09) - aparece logo depois da pílula de status virar "Realizado" pra um candidato a recorrência. Quebra de linha própria (display:flex + flex-basis:100%) pra não brigar de largura com o resto de .session-row-actions. */ .proxima-sessao-prompt { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex-basis: 100%; margin-top: 0.4rem; padding: 0.4rem 0.6rem; background: var(--surface-alt, rgba(122, 92, 138, 0.08)); border-radius: var(--radius-sm); font-size: 0.85rem; } button, .btn { font-family: var(--body); font-weight: 600; font-size: 0.95rem; border: none; border-radius: var(--radius-sm); padding: 0.7rem 1.3rem; cursor: pointer; background: var(--primary); color: #fff; transition: background 0.15s ease, transform 0.1s ease; } button:hover, .btn:hover { background: var(--primary-dark); } button:active, .btn:active { transform: scale(0.98); } button.btn-secondary { background: transparent; color: var(--primary); border: 1px solid var(--border); } button.btn-secondary:hover { background: var(--bg-alt); } /* Estado "ligado" (2026-08-08) - botão de notificações agora alterna de verdade entre ativar/desativar, precisa parecer visivelmente diferente nos dois estados. */ button.btn-secondary.is-ativo { background: var(--primary); color: #fff; border-color: var(--primary); } button.btn-secondary.is-ativo:hover { background: var(--primary-dark); } /* Botão "Gerar link de satisfação" (2026-08-26, pedido do cliente: "quero um botão bonito e animado") - gradiente sutil (primary -> accent, mesma dupla de cor que a marca já usa) + um brilho pulsando por trás (anel desfocado, ver .satisfacao-gerar-btn-glow) + um brilho que varre da esquerda pra direita ao passar o mouse. Discreto de propósito (clínica de alto padrão, pediu "bonito", não "chamativo") - a pulsação é lenta e o brilho de hover é rápido e sutil, nada de piscar ou saltar. */ .satisfacao-gerar-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; isolation: isolate; } .satisfacao-gerar-btn svg { width: 1.05rem; height: 1.05rem; transition: transform 0.25s ease; } .satisfacao-gerar-btn:hover svg { transform: scale(1.15) rotate(-6deg); } .satisfacao-gerar-btn:hover { background: linear-gradient(135deg, var(--primary-dark), var(--accent)); } .satisfacao-gerar-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.6s ease; } .satisfacao-gerar-btn:hover::after { transform: translateX(100%); } .satisfacao-gerar-btn-glow { position: absolute; inset: -6px; border-radius: inherit; background: var(--accent); filter: blur(10px); opacity: 0.35; z-index: -1; animation: satisfacaoGlowPulso 2.6s ease-in-out infinite; } @keyframes satisfacaoGlowPulso { 0%, 100% { opacity: 0.25; transform: scale(0.96); } 50% { opacity: 0.5; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .satisfacao-gerar-btn-glow { animation: none; opacity: 0.3; } .satisfacao-gerar-btn::after { transition: none; } .satisfacao-gerar-btn:hover svg { transform: none; } } /* Ícone de observação da sessão - papiro (Recepção, 2026-09-10, 2ª iteração: "achei o chamar atenção do nosso ícone de observação muito sutil, fraco, achei o símbolo também meio feio... quero algo mais voltado pra um papiro") - substitui o texto livre que ficava sempre visível embaixo do nome do paciente. Parado (cinza, sem brilho) quando não tem observação nenhuma - só convida a clicar pra adicionar. Quando JÁ tem uma observação escrita (.tem-obs) balança de leve + pulsa um brilho dourado bem mais forte que a 1ª versão (escala maior, drop-shadow mais intenso) - tem que chamar atenção de verdade, não só sugerir. Clicar abre o popover com uma animação de "desenrolar" (ver .session-obs-popover abaixo e assets/sessao-observacao.js). */ .session-obs-icone { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent !important; color: var(--ink-dim) !important; opacity: 0.45; cursor: pointer; vertical-align: middle; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .session-obs-icone svg { width: 16px; height: 16px; } .session-obs-icone:hover, .session-obs-icone:focus-visible { opacity: 1; background: var(--card-alt, rgba(0,0,0,0.05)) !important; color: var(--ink) !important; } .session-obs-icone.tem-obs { opacity: 1; color: #b8860b !important; animation: sessaoObsIconePulso 1.8s ease-in-out infinite; } @keyframes sessaoObsIconePulso { 0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1) rotate(0deg); } 25% { transform: scale(1.05) rotate(-6deg); } 50% { filter: drop-shadow(0 0 7px #d4a017) drop-shadow(0 0 2px #d4a017); transform: scale(1.3) rotate(6deg); } 75% { transform: scale(1.05) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .session-obs-icone.tem-obs { animation: none; } } /* Popover da observação (2ª iteração, 2026-09-10: "aqui ficou exagerado, acho que poderia fazer parecido com o anotações" - trocado o textarea + Cancelar/Salvar sempre visíveis pelo MESMO padrão view/edit do card de Anotações (.anotacoes-vista em paciente_perfil.php): abre em visualização (texto ou dica de clicar), só vira textarea quando clica em cima, e salva sozinho (Enter ou clicar fora) - sem botão nenhum. Só uma pontinha de papiro (borda + fundo levemente amarelado) pra combinar com o ícone nota o que é, sem pesar como a versão anterior. Continua "abrindo" com uma animação leve de desenrolar. */ .session-obs-popover { position: absolute; z-index: 30; margin-top: 0.4rem; width: min(240px, 90vw); background: var(--card); border: 1px solid #c9a86a; border-left: 3px solid #c9a86a; border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; box-shadow: 0 8px 20px rgba(0,0,0,0.16); transform-origin: top center; animation: sessaoObsPopoverDesenrolar 0.22s ease-out; } @keyframes sessaoObsPopoverDesenrolar { 0% { transform: scaleY(0.4); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .session-obs-popover { animation: none; } } .session-row-info { position: relative; } .session-obs-popover-vista { margin: 0; cursor: pointer; font-size: 0.85rem; color: var(--ink); border-radius: var(--radius-sm); padding: 0.2rem; margin: -0.2rem; transition: background 0.15s ease; } .session-obs-popover-vista:hover { background: var(--bg-alt); } .session-obs-popover-vazia { color: var(--ink-dim); font-style: italic; } .session-obs-popover-texto { width: 100%; font-family: var(--body); font-size: 0.85rem; padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px; resize: vertical; } label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-dim); margin-bottom: 0.35rem; } /* Tela de login aceitando CPF ou e-mail (2026-09-15) - "ou e-mail" some discreto ao lado do rótulo principal, sem competir com ele. */ .auth-field-ou { font-weight: 400; color: var(--ink-faint); } input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="email"], input[type="url"], input[type="number"], select, textarea { width: 100%; font-family: var(--body); font-size: 1rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-light); outline-offset: 1px; } .field { margin-bottom: 1.1rem; } /* Duração em Horas+Minutos (2026-08-11, pedido do cliente: campo de minutos cru era ruim pra "5 horas ou mais" - virou dois number inputs lado a lado). input[type="number"] tinha ficado de fora da regra compartilhada acima até agora (só text/date/time/etc.), então esses dois campos apareciam com o estilo cru do navegador (setinhas de incremento, borda diferente) destoando do resto do formulário - daí o "feio" reportado. Setinhas escondidas de propósito (não fazem falta pra digitar duração; teclado numérico normal já resolve). */ .duracao-hm { display: flex; align-items: center; gap: 0.5rem; } .duracao-hm input[type="number"] { width: 4.5rem; text-align: center; -moz-appearance: textfield; } .duracao-hm input[type="number"]::-webkit-outer-spin-button, .duracao-hm input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .duracao-hm span { color: var(--ink-dim); font-size: 0.85rem; } .form-error { background: #f6e3df; color: #7a2e22; border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.9rem; margin-bottom: 1rem; } :root[data-theme="dark"] .form-error { background: #3d2420; color: #f0a998; } /* Aviso não-bloqueante (2026-08-26) - mesma estrutura de .form-error, cor âmbar em vez de vermelha: usado pro alerta de "paciente parecido com um bloqueado" (que ainda deixa cadastrar, ao contrário de .form-error) e pro selo "Bloqueado" no perfil do paciente. */ .form-warning { background: #f6ecd8; color: #7a5a1c; border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.9rem; margin-bottom: 1rem; } :root[data-theme="dark"] .form-warning { background: #3d3320; color: #e8c988; } /* Sugestões de horário livre ao dar choque (2026-08-08, pedido do cliente: "a sugestão é só uma sugestão" - por isso pílulas clicáveis que só preenchem data/hora, nunca aplicam ou salvam sozinhas; ignorar é só continuar editando os campos normalmente). */ .clinica-sugestoes-horario { margin: -0.4rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .clinica-sugestoes-horario[hidden] { display: none !important; } .clinica-sugestoes-horario-label { font-size: 0.82rem; color: var(--ink-dim); margin-right: 0.2rem; } /* Aviso de padrão recente (2026-09-08, item 2 dos pedidos do cliente: "aparecer uma msg explicando de forma divertida... dando a opção de forma animada") - lib/helpers.php's clinica_paciente_padrao_recente() + assets/calendar.js's ofertarPadraoRecente(). "Pop in" (escala + opacidade) em vez do fade simples de .clinica-sugestoes-horario acima - é uma mensagem nova chamando atenção, não uma lista de opções que já fazia parte da tela. [hidden] precisa do !important explícito - mesmo motivo de .clinica-sugestoes-horario[hidden] logo acima, um elemento com display: flex próprio sempre vence [hidden] sozinho. */ .padrao-recente-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: -0.4rem 0 1rem; padding: 0.6rem 0.9rem; background: color-mix(in srgb, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius-sm); font-size: 0.85rem; animation: padraoRecentePopIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } .padrao-recente-aviso[hidden] { display: none !important; } @keyframes padraoRecentePopIn { 0% { opacity: 0; transform: scale(0.92) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce) { .padrao-recente-aviso { animation: none; } } .clinica-sugestao-pill { background: var(--bg-alt); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: var(--body); } .clinica-sugestao-pill:hover { border-color: var(--primary); color: var(--primary); } /* Estado selecionado (2026-08-13, chips de duração rápida no compromisso) - mesma pílula, reaproveitada pra um uso ligeiramente diferente (escolha que PREENCHE e fica marcada, não só sugestão descartável). */ .clinica-sugestao-pill.is-ativo { background: var(--primary); border-color: var(--primary); color: #fff; } .form-note-info { background: var(--bg-alt); color: var(--ink-dim); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.9rem; margin-bottom: 1rem; } /* Sucesso/aviso pós-salvar (2026-08-13) - mesmo molde do .form-note-info acima, só troca o tom. Usado em paciente_perfil.php pra confirmar o salvamento e, quando aplicável, avisar que alguma sessão combinada não entrou na agenda por colidir com algo que já estava lá (antes esse aviso não existia - o retorno de clinica_gerar_ocorrencias() era descartado silenciosamente). */ .form-note-success { background: #e3f0e6; color: #1f5c34; } .form-note-warning { background: #f6ecd9; color: #7a5a1f; } :root[data-theme="dark"] .form-note-success { background: #1f3327; color: #8fd4a5; } :root[data-theme="dark"] .form-note-warning { background: #3d3220; color: #e8c987; } /* --- Login page (2026-09-01, redesenho pedido pelo cliente: "quero algo profissional, quero ver a marca imponente, quero animações") --- */ body.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; /* "safe center" (2026-09-02, achado real: "não está aparecendo o botão pra quem não usa o sistema conhecer") - com justify-content:center puro, conteúdo mais alto que a tela (telas pequenas, ou depois da tagline/eyebrow novos) ficava com o topo cortado E inacessível - "safe" muda pra alinhamento no topo (scroll normal) só quando o conteúdo não cabe, mantém centralizado quando cabe. */ justify-content: safe center; background: radial-gradient(circle at 20% 15%, var(--auth-bg-1) 0%, var(--auth-bg-2) 55%, var(--auth-bg-3) 100%); padding: 1.3rem 1rem; position: relative; overflow-x: hidden; } /* Glow ambiente, bem lento (18s) e bem sutil - dá vida ao fundo escuro sem competir com o card nem parecer "site de cassino". Position:fixed (não absolute) pra nunca crescer o scroll da página numa tela baixa. */ .auth-glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(70px); opacity: 0.35; animation: authGlowFloat 18s ease-in-out infinite; } .auth-glow-1 { width: 420px; height: 420px; background: var(--accent); top: -10%; left: -8%; } .auth-glow-2 { width: 380px; height: 380px; background: var(--auth-glow-2); bottom: -12%; right: -6%; animation-delay: -9s; } @keyframes authGlowFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 3%) scale(1.08); } } /* Anel gigante atrás da marca (2026-09-02, achado real do cliente: "a página está sem graça") - mesmo motivo do anel do ícone do app, bem apagado, centralizado atrás de tudo, só textura/profundidade - respira bem devagar, não chama atenção pra si mesmo. */ .auth-ring { position: fixed; top: 50%; left: 50%; z-index: 0; pointer-events: none; width: min(78vw, 780px); height: min(78vw, 780px); transform: translate(-50%, -50%); border: 1.5px solid rgba(244, 239, 228, 0.14); border-radius: 50%; animation: authRingBreathe 12s ease-in-out infinite; } .auth-ring::before { content: ''; position: absolute; inset: 7%; border: 1px solid rgba(212, 169, 74, 0.16); border-radius: 50%; } @keyframes authRingBreathe { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.015); } } .auth-brand { color: #f4efe4; text-align: center; margin-bottom: 1.3rem; position: relative; z-index: 1; } /* Entrada escalonada (2026-09-02, "precisamos de mais animações agora") - eyebrow, marca, nome e frase entram um de cada vez (--stagger-delay inline no PHP), não tudo junto de uma vez só - reforça a hierarquia em vez de só "a tela toda aparece". */ .auth-stagger { opacity: 0; animation: authStaggerIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--stagger-delay, 0s) both; } @keyframes authStaggerIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* A marca (2026-09-01, "quero ver a marca imponente") - mesmo ícone do PWA (assets/icons/icon-512.png), grande, com uma respiração lenta contínua (não é hover, é ambiente - o "imponente" pedido vem de tamanho + presença constante, não de ficar chamando atenção toda hora). Entrada é só opacidade (não translateY como as outras) - já tem a respiração contínua usando `transform`, as duas juntas na mesma propriedade brigariam (só a última da lista "ganharia" a cada instante). */ .auth-brand-mark { display: block; margin: 0 auto 0.6rem; border-radius: 22%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 169, 74, 0.25); animation: authStaggerFade 0.6s ease var(--stagger-delay, 0s) both, authMarkBreathe 5s ease-in-out 0.6s infinite; } @keyframes authStaggerFade { from { opacity: 0; } to { opacity: 1; } } /* "Sistema" acima da marca (2026-09-02) - mesmo eyebrow da logo nova (assets/icons), reforça "Sistema MEP" também aqui, não só no ícone. Espaçamento apertado 2026-09-02 (achado real: "não está aparecendo o botão pra quem não usa o sistema conhecer" - o CTA embaixo do card estava só fora da tela, ficou alto demais depois da tagline maior + este eyebrow novo). */ .auth-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(212, 169, 74, 0.75); margin-bottom: 0.3rem; } @keyframes authMarkBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,169,74,0.25); } 50% { transform: scale(1.035); box-shadow: 0 16px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,169,74,0.4); } } .auth-brand-name { font-family: var(--display); font-size: 2.1rem; font-weight: 600; letter-spacing: 0.02em; } .auth-brand-tagline { font-size: 0.9rem; color: rgba(244, 239, 228, 0.7); margin-top: 0.15rem; } .auth-card { background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); padding: 1.7rem 2rem; width: 100%; max-width: 380px; position: relative; z-index: 1; overflow: hidden; animation: authFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; } /* Barra dourada no topo do card (2026-09-02, achado real do cliente: "a página está sem graça") - detalhe de acabamento simples, assina o card sem exigir nenhum elemento novo grande. Brilho passando devagar por cima (2026-09-02, "precisamos de mais animações agora") - faixa clara translúcida varrendo da esquerda pra direita, contínua e bem lenta, sem parecer "botão de propaganda". */ .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 35%, var(--accent-light) 50%, var(--accent) 65%, var(--accent) 100%); background-size: 260% 100%; animation: authBarShine 6s linear infinite; z-index: 2; } @keyframes authBarShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .auth-card::after { z-index: 0; } .auth-card { isolation: isolate; } .auth-card .field.auth-field, .auth-card button.auth-field { position: relative; z-index: 1; } /* Campos e botão entram em cascata, logo depois do card (2026-09-02, "precisamos de mais animações agora") - reaproveita o mesmo padrão de --stagger-delay já usado na marca acima. */ .auth-field { opacity: 0; animation: authStaggerIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .auth-field:nth-of-type(1) { animation-delay: 0.3s; } .auth-field:nth-of-type(2) { animation-delay: 0.38s; } .auth-field:nth-of-type(3) { animation-delay: 0.46s; } /* Segunda rodada (2026-09-02, "ainda sinto que está sem graça") - o card era um retângulo branco liso sobre um fundo cheio de atmosfera, o contraste em si já lia como "sem graça". Textura sutil (arco dourado apagado no canto) + fundo levemente aquecido em vez de branco puro - ainda lê como "cartão claro", só para de parecer recortado do resto da página. */ .auth-card { background: linear-gradient(155deg, var(--card) 60%, color-mix(in srgb, var(--accent) 7%, var(--card)) 100%); } .auth-card::after { content: ''; position: absolute; top: -40%; right: -30%; width: 65%; height: 65%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%); pointer-events: none; z-index: 0; } @keyframes authFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .auth-card h1 { position: relative; z-index: 1; padding-bottom: 0.7rem; margin-bottom: 1.3rem; } .auth-card h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.6rem; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px; } .auth-card > * { position: relative; z-index: 1; } .auth-card button { width: 100%; margin-top: 0.5rem; font-size: 1rem; padding: 0.8rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .auth-card button:hover { box-shadow: 0 6px 18px rgba(47, 74, 62, 0.35); } .auth-card button:active { transform: scale(0.98); } /* Campos com mais presença (2026-09-02, "ainda sinto que está sem graça") - sombra interna sutil em vez de campo achatado igual o resto do app, condiz com o tom mais "joia/emblema" do resto da tela de login. */ .auth-card input { box-shadow: inset 0 1px 3px rgba(30, 20, 24, 0.08); transition: box-shadow 0.2s ease, border-color 0.2s ease; } /* Foco visível e "vivo" nos campos - respiração leve de sombra dourada enquanto o campo está em foco, some ao sair. */ .auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(30, 20, 24, 0.08), 0 0 0 3px rgba(212, 169, 74, 0.18); } .auth-clinica-travada { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.65rem 0.9rem; font-weight: 600; color: var(--heading); } .auth-clinica-travada a { font-size: 0.8rem; font-weight: 500; color: var(--ink-dim); white-space: nowrap; } .auth-signup-cta { position: relative; z-index: 1; margin-top: 1rem; font-size: 0.88rem; color: rgba(244, 239, 228, 0.75); text-align: center; animation: authFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; } .auth-signup-cta a { color: #f4efe4; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .auth-esqueci-senha { display: block; text-align: center; margin-top: 0.9rem; font-size: 0.82rem; color: rgba(244, 239, 228, 0.6); text-decoration: none; } .auth-esqueci-senha:hover { color: #f4efe4; text-decoration: underline; } /* Seletor de clínica (2026-09-01, pedido do cliente: "aparecer em botões animados as escolhas que ela tem para logar") - cada opção entra em cascata (--delay por item, definido inline no PHP) em vez de tudo junto, reforça que são opções distintas, não uma lista estática. */ .auth-picker-sub { color: var(--ink-dim); font-size: 0.9rem; margin-top: -0.4rem; margin-bottom: 1.2rem; } .auth-picker-lista { display: flex; flex-direction: column; gap: 0.7rem; } .auth-picker-item { margin: 0; animation: authFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.15s + var(--delay, 0s)); } .auth-picker-item button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; text-align: left; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .auth-picker-item button:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47, 74, 62, 0.15); transform: translateY(-1px); } .auth-picker-item button:active { transform: scale(0.98); } .auth-picker-clinica { font-weight: 600; color: var(--heading); } .auth-picker-user { font-size: 0.82rem; color: var(--ink-dim); } .auth-picker-voltar { display: block; text-align: center; margin-top: 1.1rem; font-size: 0.85rem; font-weight: 500; color: var(--ink-dim); text-decoration: none; } .auth-picker-voltar:hover { color: var(--heading); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .auth-glow, .auth-ring { animation: none; } .auth-brand-mark { animation: none; } .auth-picker-item { animation: none; opacity: 1; transform: none; } .auth-brand, .auth-card, .auth-signup-cta { animation: none; opacity: 1; transform: none; } .auth-stagger, .auth-field, .auth-card::before { animation: none; opacity: 1; transform: none; } } /* Busca de clínica no login (2026-08-06) - dropdown próprio em JS, não nativo: Safari no iPhone praticamente não exibe sugestões de datalist, então a lista nunca aparecia no celular real do cliente. */ .clinica-busca-wrap { position: relative; } .clinica-busca-lista { display: none; position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; padding: 0.3rem; } .clinica-busca-lista.aberta { display: block; } .clinica-busca-item { padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; color: var(--ink); } .clinica-busca-item:hover { background: var(--bg-alt); } .clinica-busca-sem-resultado { padding: 0.55rem 0.7rem; font-size: 0.85rem; color: var(--ink-dim); } /* --- Nav --- */ .clinica-nav { display: flex; align-items: center; gap: 2rem; padding: 1rem 2rem; background: var(--card); border-bottom: 1px solid var(--border); } .clinica-nav-brand { font-size: 1.3rem; } .clinica-nav-brand-wrap { display: inline-flex; align-items: center; gap: 0.35rem; } .clinica-nav-sobre-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink-faint); background: none; color: var(--ink-faint); font-size: 0.7rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .clinica-nav-sobre-btn:hover { color: var(--primary); border-color: var(--primary); } .clinica-nav-links { display: flex; gap: 1.5rem; flex: 1; flex-wrap: wrap; row-gap: 0.4rem; } /* white-space:nowrap (2026-08-10, achado real) - sem isso, quando o menu fica apertado (10 abas agora, com a nova "Pendências") o texto de UM item quebra sozinho no meio, deixando o número do nav-badge numa segunda linha isolada em vez de ficar ao lado do texto. flex-wrap no container pai acima é o lugar certo pra "sobrar" espaço - entre itens inteiros, nunca dentro de um item só. */ .clinica-nav-links a { color: var(--ink-dim); font-weight: 600; padding: 0.3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; } .clinica-nav-links a:hover, .clinica-nav-links a.is-active { color: var(--heading); border-bottom-color: var(--accent); text-decoration: none; } .nav-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 800; border-radius: 999px; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; margin-left: 0.3rem; vertical-align: middle; } /* Badge miniatura da sidebar recolhida (2026-09-02) - escondido por padrão SEMPRE (achado real do cliente: "as pendências mostram números duplicados" - a regra de escondê-la só existia dentro do @media (min-width:1301px), então em telas menores ela aparecia sem nada escondendo, duplicando o número junto do badge normal do texto). Só reaparece dentro do bloco de sidebar recolhida, mais abaixo. */ .clinica-nav-badge-recolhida { display: none; } .clinica-nav-user { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--ink-dim); } /* Tema + cor sempre lado a lado (2026-09-02, "não gostei das bolinhas ficarem uma debaixo da outra na tela reduzida") - base sempre-ativa, vale em qualquer largura de tela; só no desktop com a sidebar recolhida (ver @media min-width:1301px mais abaixo) é que empilha. */ .clinica-nav-toggles-row { display: flex; flex-direction: row; gap: 0.5rem; } .clinica-nav-avatar-link { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-dim); } .clinica-nav-avatar-link:hover { text-decoration: none; color: var(--heading); } .clinica-avatar-wrap { display: inline-flex; position: relative; flex: 0 0 auto; } .clinica-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex: 0 0 auto; } .clinica-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .clinica-avatar-fallback { color: #fff; font-weight: 800; font-size: 0.75em; } /* Bolinha de presença - sempre visível (vermelha = offline por padrão), assets/presenca.js liga .is-online (verde) via polling de api/presenca-status.php assim que confirma o heartbeat de cada um. Fica no wrapper, fora do .clinica-avatar (que tem overflow:hidden pra recortar foto/iniciais em círculo - dentro dele a bolinha ficava cortada e nunca aparecia, mesmo com a pessoa online). */ .clinica-avatar-wrap[data-presence-user]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 32%; height: 32%; min-width: 8px; min-height: 8px; /* Cinza neutro, não vermelho - achado real do cliente (2026-08-18): a paleta de cor por profissional (CLINICA_PALETA_CORES em lib/helpers.php) tem vários tons avermelhados, e "offline" em vermelho ficava confundível com a própria cor de identidade de quem tem avatar sem foto. Verde continua reservado só pra "online". */ background: #9a9188; border-radius: 50%; border: 2px solid var(--surface, #fff); z-index: 1; } .clinica-avatar-wrap[data-presence-user].is-online::after { background: var(--success, #2f9e6b); } .clinica-avatar-wrap[data-presence-user] { cursor: pointer; } /* Pastilha "Equipe" da Recepção - abre um dropdown com toda a equipe (online e offline, api/chat-equipe-lista.php) que leva pro mini-chat flutuante (assets/chat-mini.js) sem sair da página. A conversa completa (histórico, emoji, apagar) mora em conversas.php?aba=equipe - o dropdown/mini-chat são só o atalho rápido. */ .clinica-equipe-pill-wrap { position: relative; } .clinica-equipe-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.5rem; color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; position: relative; transition: background 0.15s; font-family: inherit; } .clinica-equipe-pill:hover { background: rgba(255,255,255,0.2); } .clinica-equipe-pill-avatares { display: flex; } .clinica-equipe-pill-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.65rem; border: 2px solid var(--primary-dark, #1f3529); margin-left: -8px; } .clinica-equipe-pill-avatar:first-child { margin-left: 0; } .clinica-equipe-pill-mais { background: rgba(255,255,255,0.3); } .clinica-equipe-pill-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--danger, #c0392b); color: #fff; font-size: 0.65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--primary-dark, #1f3529); } .clinica-equipe-pill-dropdown { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; background: var(--surface, var(--card, #fff)); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 220px; max-height: 300px; overflow-y: auto; padding: 0.4rem; color: var(--ink); } .clinica-equipe-pill-dropdown[hidden] { display: none; } .clinica-equipe-pill-dropdown-carregando { padding: 0.6rem; font-size: 0.85rem; color: var(--ink-dim); } .clinica-equipe-online-dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.55rem; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font-size: 0.85rem; color: var(--ink, inherit); font-family: inherit; } .clinica-equipe-online-dropdown-item:hover { background: var(--bg-alt, rgba(0,0,0,0.05)); } .clinica-equipe-online-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.7rem; flex: 0 0 auto; position: relative; } .clinica-equipe-online-avatar[data-presence-dot]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; background: #9a9188; border-radius: 50%; border: 2px solid var(--surface, var(--card, #fff)); } .clinica-equipe-online-avatar[data-presence-dot].is-online::after { background: var(--success, #2f9e6b); } .clinica-equipe-online-badge { margin-left: auto; min-width: 17px; height: 17px; border-radius: 999px; background: var(--danger, #c0392b); color: #fff; font-size: 0.65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Mini-chat flutuante - vive em partials/nav.php (presente em toda página logada), aberto por assets/chat-mini.js ao clicar em qualquer avatar do sistema ou num item do dropdown acima. */ .clinica-mini-chat { position: fixed; bottom: 0; right: 24px; width: 300px; height: 400px; max-height: 70vh; background: var(--card, #fff); border: 1px solid var(--border); border-bottom: none; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; z-index: 60; } .clinica-mini-chat[hidden] { display: none; } @media (max-width: 480px) { .clinica-mini-chat { right: 0; left: 0; width: auto; } } .clinica-mini-chat-topo { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; background: var(--bg-alt, rgba(0,0,0,0.03)); } .clinica-mini-chat-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.7rem; flex: 0 0 auto; } .clinica-mini-chat-nome { font-weight: 700; font-size: 0.9rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clinica-mini-chat-expandir, .clinica-mini-chat-fechar { background: transparent; border: none; cursor: pointer; color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem; } .clinica-mini-chat-expandir-icon { width: 15px; height: 15px; transform: rotate(45deg); } .clinica-mini-chat-fechar { font-size: 1.3rem; line-height: 1; } .clinica-mini-chat-status { flex: 0 0 auto; padding: 0.15rem 0.8rem 0.4rem; font-size: 0.72rem; color: var(--ink-dim); min-height: 1em; } .clinica-mini-chat-status.is-digitando { color: var(--primary); font-style: italic; } .clinica-mini-chat-mensagens { flex: 1; overflow-y: auto; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; } .clinica-mini-chat-vazio { color: var(--ink-dim); font-size: 0.8rem; text-align: center; margin: auto; } .clinica-mini-chat-msg { max-width: 78%; padding: 0.4rem 0.6rem; border-radius: 10px; font-size: 0.85rem; word-break: break-word; position: relative; } .clinica-mini-chat-msg.enviada { align-self: flex-end; background: var(--primary); color: #fff; } .clinica-mini-chat-msg.recebida { align-self: flex-start; background: var(--bg-alt, rgba(0,0,0,0.06)); } .clinica-mini-chat-apagar, .clinica-mini-chat-editar { position: absolute; top: -7px; width: 17px; height: 17px; border-radius: 50%; border: none; color: #fff; font-size: 0.75rem; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; } .clinica-mini-chat-apagar { left: -7px; background: var(--danger, #c0392b); } .clinica-mini-chat-editar { left: 13px; background: var(--ink-dim, #888); } .clinica-mini-chat-msg.enviada:hover .clinica-mini-chat-apagar, .clinica-mini-chat-msg.enviada:hover .clinica-mini-chat-editar { display: flex; } .clinica-mini-chat-msg-hora { display: block; font-size: 0.65rem; opacity: 0.75; margin-top: 0.15rem; } .clinica-mini-chat-anexo-imagem { display: block; margin-bottom: 0.3rem; } .clinica-mini-chat-anexo-imagem img { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; } .clinica-mini-chat-anexo-arquivo { display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; background: rgba(0,0,0,0.08); border-radius: 8px; margin-bottom: 0.3rem; font-size: 0.78rem; color: inherit; text-decoration: none; word-break: break-all; } .clinica-mini-chat-form { display: flex; gap: 0.4rem; padding: 0.5rem; border-top: 1px solid var(--border); } .clinica-mini-chat-anexo-btn { background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.4rem; border-radius: 50%; flex: 0 0 auto; align-self: flex-end; } .clinica-mini-chat-anexo-btn:hover { background: var(--bg-alt); } .clinica-mini-chat-form textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.85rem; max-height: 80px; background: var(--bg); color: var(--ink); } .clinica-mini-chat-form button { border: none; background: var(--primary-dark, #2f4a3e); color: #fff; border-radius: 8px; width: 34px; flex: 0 0 auto; cursor: pointer; display: flex; align-items: center; justify-content: center; } .clinica-mini-chat-form button svg { width: 16px; height: 16px; transform: rotate(90deg); } .clinica-icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 2.1rem; height: 2.1rem; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); } .clinica-icon-btn:hover { background: var(--bg-alt); } .clinica-icon-btn .icon-lua { display: none; } :root[data-theme="dark"] .clinica-icon-btn .icon-sol { display: none; } :root[data-theme="dark"] .clinica-icon-btn .icon-lua { display: flex; } /* Bolinha do botão de cor (2026-09-02) - metade vinho, metade floresta, sempre as DUAS cores fixas (não var(--accent), que mudaria com o tema ativo - o botão precisa mostrar a opção OUTRA, não a que já está ligada, senão parece que não faz nada). */ .clinica-cor-swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: block; background: linear-gradient(135deg, #7a2f3f 0%, #7a2f3f 50%, #2f4a3e 50%, #2f4a3e 100%); border: 1px solid rgba(0,0,0,0.15); } .clinica-page { max-width: 1100px; margin: 0 auto; padding: 2rem; } /* Agenda especificamente precisa de mais espaço (2026-08-14, achado real: cliente numa tela larga o bastante pra caber segunda-sexta inteiras na visão Semana, mas o limite genérico de 1100px forçava rolagem/corte de qualquer forma, mesmo sobrando tela). Não é max-width:none como .clinica-page-full (isso é pra layout tipo chat, altura de viewport inteira) - só um teto mais alto, ainda com respiro nas laterais em monitores muito largos. */ .clinica-page-wide { max-width: 1400px; } /* --- Reception --- */ .reception-hero { background: radial-gradient(circle at 88% -10%, rgba(255,255,255,0.10) 0%, transparent 45%), linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #f4efe4; border-radius: var(--radius); padding: 2.2rem 2rem; margin-bottom: 2rem; position: relative; overflow: visible; } .reception-hero h1 { color: #fff; font-size: 1.9rem; } .reception-hero p { color: rgba(244, 239, 228, 0.8); margin-top: 0.4rem; } .reception-hero .clinica-equipe-pill-wrap { position: absolute; top: 1.3rem; right: 1.6rem; } @media (max-width: 640px) { .reception-hero .clinica-equipe-pill-wrap { position: static; margin-bottom: 1rem; } } /* Estatísticas da saudação, como chips em vez de frase corrida (2026-08-09, pedido do cliente: "quantidade de pacientes cadastrados" precisava de um lugar melhor que uma linha de texto solta). O total de pacientes vira um link pra pacientes.php - é o único dos três que faz sentido navegar a partir daqui. */ .reception-hero-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; margin-top: 1.1rem; } .reception-stat { text-decoration: none; } a.reception-stat:hover .reception-stat-num { text-decoration: underline; } .reception-stat-num { font-family: var(--display); font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1.1; } .reception-stat-label { font-size: 0.82rem; color: rgba(244, 239, 228, 0.75); margin-top: 0.2rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; } .card + .card { margin-top: 1.5rem; } .session-row { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 0.6rem; margin: 0 -0.6rem; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); transition: background 0.15s ease, transform 0.15s ease; } .session-row:last-child { border-bottom: none; } /* Pendências (2026-08-10, redesenhado no mesmo dia depois de feedback real do cliente: "formatação feia", "difícil de editar") - fileira única de "chips" do mesmo tamanho visual (responsável/categoria/prazo/paciente), em vez do