/* ========================================================= ClinicS — Design tokens Paleta de marca: roxo (#6D5DF6) como protagonista, teal (#5CE1E6) só como destaque pontual — nunca os dois competindo na mesma tela. ========================================================= */ :root { --color-primary: #6d5df6; --color-primary-dark: #5847e0; --color-primary-light: #eeecfe; --color-accent: #5ce1e6; --color-accent-dark: #0f9aa3; --color-accent-light: #e3fbfc; --color-bg: #f5f7fb; --color-surface: #ffffff; --color-surface-alt: #ffffff; --color-text: #0f172a; --color-text-muted: #64748b; --color-border: #e5e7eb; --color-success: #10b981; --color-success-bg: #e7f9f2; --color-warning: #f59e0b; --color-warning-bg: #fef3e0; --color-error: #ef4444; --color-error-bg: #fdeceb; /* Cores de tags/etiquetas (condições, alergias, interesses) — pasteis distintos dos badges de status, usados em contextos de "marcação livre". */ --tag-pink-bg: #fde7f3; --tag-pink-text: #b7297e; --tag-red-bg: #fde8e8; --tag-red-text: #c1352e; --tag-orange-bg: #fef1e0; --tag-orange-text: #b3690a; --tag-blue-bg: #e6effe; --tag-blue-text: #2255c4; --tag-green-bg: #e5f8ee; --tag-green-text: #1c8a52; --tag-purple-bg: #eeecfe; --tag-purple-text: #6d5df6; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow-md: 0 10px 30px rgba(15, 23, 42, .06); --shadow-card: 0 10px 30px rgba(15, 23, 42, .06); --shadow-hover: 0 18px 40px rgba(15, 23, 42, .12); --gradient-brand: linear-gradient(135deg, #6d5df6 0%, #5847e0 100%); --gradient-accent: linear-gradient(135deg, #6d5df6 0%, #5ce1e6 100%); /* Gradiente animado do painel de marca do login (ver .login-brand-panel) — separado de --gradient-brand porque tem 5 paradas, não 2. */ --gradient-login: linear-gradient(135deg, #6d5df6 0%, #5847e0 35%, #4433c4 60%, #5ce1e6 85%, #6d5df6 100%); --sidebar-width: 264px; --sidebar-width-collapsed: 76px; --topbar-height: 68px; --ease: cubic-bezier(.4, 0, .2, 1); --transition-fast: .15s var(--ease); --transition-base: .22s var(--ease); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color-scheme: light; } /* ========================================================= Dark mode — identidade própria (navy profundo, não é a paleta clara invertida). Ativado via — ver app.js (persistido em localStorage, aplicado antes do 1º paint por um script inline no pra não piscar claro/escuro). ========================================================= */ html[data-theme="dark"] { color-scheme: dark; --color-primary: #8577ff; --color-primary-dark: #a79bff; --color-primary-light: rgba(133, 119, 255, .16); --color-accent: #5ce1e6; --color-accent-dark: #7eebef; --color-accent-light: rgba(92, 225, 230, .14); --color-bg: #0b0e16; --color-surface: #131826; --color-surface-alt: #171d2c; --color-text: #e8eaf5; --color-text-muted: #8991a8; --color-border: #262c3d; --color-success: #34d399; --color-success-bg: rgba(52, 211, 153, .14); --color-warning: #fbbf24; --color-warning-bg: rgba(251, 191, 36, .14); --color-error: #f87171; --color-error-bg: rgba(248, 113, 113, .14); --tag-pink-bg: rgba(236, 72, 153, .16); --tag-pink-text: #f3a8d1; --tag-red-bg: rgba(239, 68, 68, .16); --tag-red-text: #f5a3a0; --tag-orange-bg: rgba(245, 158, 11, .16); --tag-orange-text: #f7c873; --tag-blue-bg: rgba(59, 130, 246, .16); --tag-blue-text: #93bdfb; --tag-green-bg: rgba(16, 185, 129, .16); --tag-green-text: #7fe0bb; --tag-purple-bg: rgba(133, 119, 255, .18);--tag-purple-text: #b7aeff; --shadow-card: 0 10px 30px rgba(0, 0, 0, .35); --shadow-hover: 0 20px 45px rgba(0, 0, 0, .5); --gradient-brand: linear-gradient(135deg, #7c6bff 0%, #5847e0 100%); } /* ========================================================= Tema GastroMED Garanhuns — segunda identidade visual, escolhida pelo admin em /configuracoes/tema (html[data-brand="gastromed"], ver ThemeSettingController + current_brand_theme()). Só troca a paleta de cores/marca — tipografia, logo, layout e todos os outros tokens (spacing, radius, sombra) continuam os mesmos do tema padrão. Base: #D4921B, o theme-color oficial do site gastromedgaranhuns.com.br. --color-primary usa uma versão mais escura (#A6690A) porque o dourado oficial puro, usado como fundo de botão com texto branco, fica abaixo do contraste mínimo de acessibilidade (~2.6:1, precisa de ~4.5:1) — a cor oficial exata aparece em --gradient-brand (fundos decorativos, sem texto pequeno por cima) pra manter a identidade sem sacrificar legibilidade. ========================================================= */ html[data-brand="gastromed"] { --color-primary: #a6690a; --color-primary-dark: #8a550a; --color-primary-light: #fbf0da; --gradient-brand: linear-gradient(135deg, #d4921b 0%, #a6690a 100%); --gradient-accent: linear-gradient(135deg, #d4921b 0%, #5ce1e6 100%); --gradient-login: linear-gradient(135deg, #d4921b 0%, #a6690a 35%, #8a550a 60%, #5ce1e6 85%, #d4921b 100%); } html[data-brand="gastromed"][data-theme="dark"] { --color-primary: #c9860f; --color-primary-dark: #e0a030; --color-primary-light: rgba(201, 134, 15, .18); --gradient-brand: linear-gradient(135deg, #e0a030 0%, #a6690a 100%); --gradient-accent: linear-gradient(135deg, #e0a030 0%, #5ce1e6 100%); } * { box-sizing: border-box; } /* Ícones Lucide (ver app.js: lucide.createIcons() troca por um ) — tamanho e traço padrão consistentes em todo o sistema; contextos específicos (sidebar, topbar) ajustam via seletor mais específico quando precisam de outro tamanho. */ svg.lucide { width: 18px; height: 18px; stroke-width: 2px; flex-shrink: 0; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color var(--transition-base), color var(--transition-base); } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; } a { color: var(--color-primary); transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } ::selection { background: var(--color-primary-light); color: var(--color-primary-dark); } /* Foco visível consistente (WCAG AA) em qualquer elemento focável que não tenha um estilo de foco mais específico definido abaixo. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================= Shell layout: sidebar + topbar + content ========================================================= */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--color-surface-alt); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; z-index: 1030; transition: width var(--transition-base), transform var(--transition-base), background-color var(--transition-base); } html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-width-collapsed); } .sidebar-brand-row { display: flex; align-items: center; padding: 1.1rem .75rem 1.1rem 1.25rem; border-bottom: 1px solid var(--color-border); min-height: 68px; } html[data-sidebar="collapsed"] .sidebar-brand-row { padding-inline: .5rem; justify-content: center; } .sidebar-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--color-text); text-decoration: none; } .sidebar-brand:hover { color: var(--color-text); } html[data-sidebar="collapsed"] .sidebar-brand { flex: 0 0 auto; } .sidebar-brand .logo-dot { width: 34px; height: 34px; flex-shrink: 0; display: block; border-radius: var(--radius-sm); } .sidebar-brand-text { transition: opacity var(--transition-fast); white-space: nowrap; } .sidebar-brand-text em { font-style: normal; color: var(--color-primary); } html[data-sidebar="collapsed"] .sidebar-brand-text { display: none; } .sidebar-collapse-btn { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-fast), color var(--transition-fast); } .sidebar-collapse-btn:hover { background: var(--color-bg); color: var(--color-text); } .sidebar-collapse-btn svg { width: 15px; height: 15px; transition: transform var(--transition-base); } html[data-sidebar="collapsed"] .sidebar-collapse-btn { position: absolute; left: 60px; top: 20px; box-shadow: var(--shadow-sm); background: var(--color-surface); } html[data-sidebar="collapsed"] .sidebar-collapse-btn svg { transform: rotate(180deg); } @media (max-width: 991.98px) { .sidebar-collapse-btn { display: none; } } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .75rem .75rem; } /* Cartão de usuário fixo no rodapé da sidebar (substitui o menu de conta que antes ficava no topbar, à moda de dashboards SaaS modernos). */ .sidebar-footer { border-top: 1px solid var(--color-border); padding: .6rem; flex-shrink: 0; } .sidebar-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); } .sidebar-user:hover { background: var(--color-bg); color: var(--color-text); } .sidebar-user::after { display: none; } /* remove a setinha padrão do Bootstrap dropdown-toggle */ /* Avatar de iniciais genérico — usado no rodapé da sidebar e em qualquer lista que precise representar uma pessoa sem foto (ex: Pacientes). */ .avatar-circle { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; } .avatar-circle.avatar-sm { width: 30px; height: 30px; font-size: .74rem; } .sidebar-user-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; } .sidebar-user-online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); border: 2px solid var(--color-surface); } .sidebar-user-info { flex: 1; min-width: 0; line-height: 1.25; } .sidebar-user-name { display: block; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { display: block; font-size: .74rem; color: var(--color-text-muted); } .sidebar-user-chevron { color: var(--color-text-muted); flex-shrink: 0; width: 15px; height: 15px; } html[data-sidebar="collapsed"] .sidebar-user-info, html[data-sidebar="collapsed"] .sidebar-user-chevron { display: none; } html[data-sidebar="collapsed"] .sidebar-user { justify-content: center; } /* Grupo recolhível da sidebar (uma seção do MenuCatalog, ex: "Faturamento"). .sidebar-group-toggle é o botão com o rótulo da seção + chevron; .sidebar-group-body é o container que anima via CSS grid (0fr↔1fr, técnica que anima "altura automática" sem JS medir nada) — ver app.js pro toggle de clique + persistência em localStorage. */ .sidebar-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); padding: 1rem .75rem .35rem; font-weight: 600; white-space: nowrap; transition: color var(--transition-fast); } .sidebar-group-toggle:hover { color: var(--color-text); } .sidebar-group-label { overflow: hidden; text-overflow: ellipsis; } .sidebar-group-chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform var(--transition-fast); } .sidebar-group.is-collapsed .sidebar-group-chevron { transform: rotate(-90deg); } .sidebar-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--transition-base); } .sidebar-group.is-collapsed .sidebar-group-body { grid-template-rows: 0fr; } .sidebar-group-body-inner { overflow: hidden; min-height: 0; } /* Colapsada (modo só-ícone), a etiqueta de seção vira um separador fino em vez de sumir sem deixar rastro — ajuda a ler o agrupamento só com ícones. Nesse modo o grupo fica sempre "aberto" por baixo (não há como reabrir sem o rótulo visível) e o toggle não responde a clique. */ html[data-sidebar="collapsed"] .sidebar-group-toggle { height: 1px; padding: 0; margin: .85rem .6rem; background: var(--color-border); pointer-events: none; } html[data-sidebar="collapsed"] .sidebar-group-label, html[data-sidebar="collapsed"] .sidebar-group-chevron { display: none; } html[data-sidebar="collapsed"] .sidebar-group-body { grid-template-rows: 1fr !important; } .sidebar-link { position: relative; display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-size: .92rem; font-weight: 500; margin-bottom: 2px; transition: background-color var(--transition-fast), color var(--transition-fast); } .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-link:hover { background: var(--color-bg); color: var(--color-text); } .sidebar-link.active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; } /* Indicador lateral discreto no item ativo — reforça "você está aqui" sem depender só do background suave (mesmo princípio de acessibilidade das badges: nunca só cor). */ .sidebar-link.active::before { content: ''; position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--color-primary); } html[data-sidebar="collapsed"] .sidebar-link.active::before { left: 0; } html[data-sidebar="collapsed"] .sidebar-link { justify-content: center; padding-inline: 0; } html[data-sidebar="collapsed"] .sidebar-link-text { display: none; } /* Contador de recados não lidos (ver navbar.php) — some com a sidebar recolhida, já que não há espaço pra um badge ao lado do ícone sozinho; o tooltip do link (data-label) continua funcionando normalmente. */ html[data-sidebar="collapsed"] .sidebar-link > .badge { display: none; } /* Tooltip elegante ao passar o mouse num item quando a sidebar está recolhida — só existe o ícone, então o rótulo precisa aparecer flutuando. */ html[data-sidebar="collapsed"] .sidebar-link:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--color-text); color: var(--color-surface); padding: .4rem .7rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-hover); pointer-events: none; z-index: 1040; animation: tooltip-in .12s ease; } @keyframes tooltip-in { from { opacity: 0; transform: translateY(-50%) translateX(-4px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } .app-shell { margin-left: 0; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--transition-base); } body.has-sidebar .app-shell { margin-left: var(--sidebar-width); } html[data-sidebar="collapsed"] body.has-sidebar .app-shell { margin-left: var(--sidebar-width-collapsed); } .topbar { height: var(--topbar-height); background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020; } .sidebar-toggle { display: none; border: none; background: transparent; color: var(--color-text-muted); flex-shrink: 0; align-items: center; justify-content: center; } .sidebar-toggle svg { width: 22px; height: 22px; } /* Saudação dinâmica + data por extenso — só aparece em telas bem largas pra não brigar por espaço com a busca (ver topbar.php). */ .topbar-greeting { display: flex; flex-direction: column; line-height: 1.25; margin-right: 1.25rem; flex-shrink: 0; max-width: 240px; } .topbar-greeting-hello, .topbar-greeting-date { /* display:block (em vez de depender só do flex-direction:column do pai) garante que os dois textos nunca fiquem colados na mesma linha, mesmo se o navegador estiver com uma versão de CSS em cache que não tenha o flex-direction acima. */ display: block; } .topbar-greeting-hello { font-size: .88rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-greeting-date { font-size: .74rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Busca central do topbar */ .topbar-search { flex: 1; max-width: 480px; position: relative; display: flex; align-items: center; } .topbar-search-icon { position: absolute; left: .85rem; color: var(--color-text-muted); pointer-events: none; width: 16px; height: 16px; } .topbar-search input { padding-left: 2.25rem; padding-right: 3.5rem; background: var(--color-bg); border-color: transparent; } .topbar-search input:focus { background: var(--color-surface); } .topbar-search-hint { position: absolute; right: .6rem; font-size: .68rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: .1rem .4rem; pointer-events: none; } .topbar-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-shrink: 0; } .topbar-cta { white-space: nowrap; } .topbar-icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); background: var(--color-bg); font-size: 1.05rem; flex-shrink: 0; } .topbar-icon-btn:hover { background: var(--color-primary-light); color: var(--color-primary-dark); } .topbar-badge { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); } /* Mantido por compatibilidade — não é mais usado no topbar (o menu de conta agora fica no rodapé da sidebar), mas outras telas podem referenciar. */ .topbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; } .app-content { flex: 1; padding: 1.75rem 2rem 3rem; max-width: 1280px; width: 100%; } /* Sidebar off-canvas on small screens */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-md); } /* Precisa da mesma especificidade (ou maior) que "body.has-sidebar .app-shell" e sua variante "collapsed" (linhas ~377-381) — senão essas regras de desktop vencem mesmo dentro do media query, e o conteúdo fica com uma margem de 264px/76px reservada pro sidebar mesmo com ele escondido fora da tela (bug real reportado por Allan em produção). */ body.has-sidebar .app-shell, html[data-sidebar="collapsed"] body.has-sidebar .app-shell { margin-left: 0; } .sidebar-toggle { display: inline-flex; align-items: center; } .app-content { padding: 1.25rem 1rem 2.5rem; } } @media (max-width: 575.98px) { .topbar { padding: 0 .85rem; gap: .5rem; } .topbar-search-hint { display: none; } .topbar-search input { padding-right: 1rem; } /* Cabeçalho de página (título + ação), padrão repetido em ~23 telas de lista (Pacientes, Faturas, Estoque etc.) — em telas estreitas o botão de ação (ex: "+ Novo paciente") não cabe ao lado do título e quebra o texto dentro de si mesmo, ficando espremido e feio. Empilha em vez de espremer. */ .app-content > .d-flex.justify-content-between.align-items-center.mb-4 { flex-direction: column; align-items: stretch !important; gap: .65rem; } .app-content > .d-flex.justify-content-between.align-items-center.mb-4 > .btn { width: 100%; text-align: center; } } /* ========================================================= Login: painel de marca (gradiente) + painel de formulário. O painel de marca some em telas pequenas — só o formulário fica. ========================================================= */ .login-shell { min-height: 100vh; display: flex; } .login-brand-panel { flex: 1 1 46%; position: relative; display: none; flex-direction: column; justify-content: center; padding: 4rem; color: #fff; overflow: hidden; /* Gradiente animado — usa --gradient-login (definido em :root e sobrescrito por html[data-brand="gastromed"]) pra acompanhar o tema escolhido em /configuracoes/tema, em vez de uma cor fixa. "Tela grande" (300%) deslizando devagar (18s) pra dar uma sensação de movimento contínuo e suave, sem nunca virar uma cor chapada nem um efeito chamativo. */ background: var(--gradient-login); background-size: 300% 300%; animation: loginGradientShift 18s ease-in-out infinite; } @keyframes loginGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Quem prefere menos movimento na tela (configuração de acessibilidade do SO/navegador) recebe o gradiente estático de sempre, sem a animação. */ @media (prefers-reduced-motion: reduce) { .login-brand-panel { background: var(--gradient-brand); animation: none; } .login-brand-blob { animation: none !important; } } .login-brand-content { position: relative; z-index: 1; max-width: 420px; } .login-brand-logo { width: 52px; height: 52px; margin-bottom: 1.75rem; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .18)); } .login-brand-logo img { width: 100%; height: 100%; display: block; } .login-brand-content h1 { font-size: 1.9rem; font-weight: 700; margin-bottom: .75rem; } .login-brand-content h1 em { font-style: normal; color: rgba(255, 255, 255, .8); } .login-brand-content p.lead { font-size: 1rem; color: rgba(255, 255, 255, .85); margin-bottom: 2.25rem; } /* Os 4 pilares da narrativa de marca (Centralizar → Integrar → Otimizar → Crescer) no painel de login — lista vertical numerada com uma linha fina conectando os itens (mesma ideia visual de uma linha do tempo), no lugar da antiga grade de ícones de módulo. */ .login-pillars { display: flex; flex-direction: column; margin-bottom: 1.5rem; } .login-pillar { display: flex; gap: 1rem; padding-bottom: 1.25rem; position: relative; } .login-pillar:not(.login-pillar-last)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 1px; background: rgba(255, 255, 255, .25); } .login-pillar-number { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem; font-weight: 700; position: relative; z-index: 1; } .login-pillar-body { display: flex; flex-direction: column; gap: .15rem; padding-top: .3rem; } .login-pillar-title { font-size: .95rem; font-weight: 700; } .login-pillar-desc { font-size: .82rem; color: rgba(255, 255, 255, .78); line-height: 1.4; } /* Linha compacta com os módulos concretos do sistema — mantém o sinal de "tem substância aqui" sem voltar à grade de 10 ícones. */ .login-modules-summary { font-size: .78rem; color: rgba(255, 255, 255, .65); line-height: 1.6; margin: 0; } .login-brand-blob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .10); filter: blur(2px); animation: loginBlobFloat 12s ease-in-out infinite; } /* Pop-up de boas-vindas (1x por usuário, ver #welcomeModal em layouts/main.php) — mesma narrativa dos 4 pilares do login, mas em fundo claro (modal), por isso reusa a estrutura de .login-pillar em classes próprias com cores de texto normais (tokens) no lugar do branco translúcido. */ .welcome-modal-content { padding: .5rem; } .welcome-modal-logo { width: 56px; height: 56px; margin: 0 auto 1rem; } .welcome-modal-logo img { width: 100%; height: 100%; display: block; } .welcome-modal-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: .35rem; } .welcome-modal-title em { font-style: normal; color: var(--color-primary); } .welcome-modal-lead { color: var(--color-text-muted); text-align: center; margin-bottom: 1.75rem; } .welcome-pillars { display: flex; flex-direction: column; } .welcome-pillar { display: flex; gap: 1rem; padding-bottom: 1.1rem; position: relative; } .welcome-pillar:not(.welcome-pillar-last)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 1px; background: var(--color-border); } .welcome-pillar-number { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; } .welcome-pillar-body { display: flex; flex-direction: column; gap: .15rem; padding-top: .3rem; } .welcome-pillar-title { font-size: .95rem; font-weight: 700; color: var(--color-text); } .welcome-pillar-desc { font-size: .82rem; color: var(--color-text-muted); line-height: 1.4; } .login-brand-blob-1 { width: 320px; height: 320px; top: -80px; right: -100px; } .login-brand-blob-2 { width: 220px; height: 220px; bottom: -60px; left: -60px; background: rgba(255, 255, 255, .08); animation-duration: 15s; animation-direction: reverse; } @keyframes loginBlobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16px, 14px) scale(1.05); } } .login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 2rem; } .login-form-card { width: 100%; max-width: 380px; } .login-form-card .login-mobile-logo { width: 52px; height: 52px; margin: 0 auto 1rem; filter: drop-shadow(0 8px 20px rgba(15, 23, 42, .18)); } .login-form-card .login-mobile-logo img { width: 100%; height: 100%; display: block; } .login-form-card h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; } .login-input-group { position: relative; } .login-input-group i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: .95rem; } .login-input-group input { padding-left: 2.4rem; } @media (min-width: 992px) { .login-brand-panel { display: flex; } .login-mobile-logo { display: none; } } /* ========================================================= Components ========================================================= */ .card { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } .card-header { background-color: transparent; color: var(--color-text); border-bottom: 1px solid var(--color-border); font-weight: 600; border-top-left-radius: var(--radius-lg) !important; border-top-right-radius: var(--radius-lg) !important; } .card-footer { background-color: transparent; color: var(--color-text); border-top: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-lg) !important; border-bottom-right-radius: var(--radius-lg) !important; } /* Cartão que reage ao mouse como se fosse clicável — cola-se aos cards de métrica e a qualquer outro que o time queira tornar interativo. */ .card-hoverable, .stat-card { transition: transform var(--transition-base), box-shadow var(--transition-base); } .card-hoverable:hover, a.stat-card-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } /* Cards de métrica do painel: ícone circular + valor em destaque. Padding compactado (era 1.1rem/1.25rem) — cards de KPI não precisam da mesma respiração de um card de conteúdo, o número já é o protagonista visual. */ .stat-card { display: flex; align-items: center; gap: .85rem; padding: .8rem 1.1rem; } .stat-card-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--color-primary-light); color: var(--color-primary-dark); } .stat-card-icon.icon-accent { background: #e6f7f5; color: #0d9488; } .stat-card-icon.icon-warning { background: #fff4e0; color: #9a6400; } .stat-card-icon.icon-danger { background: #fdeceb; color: #b3261e; } .stat-card-icon.icon-success { background: var(--color-success-bg); color: var(--color-success); } .stat-card-icon.icon-neutral { background: var(--color-bg); color: var(--color-text-muted); } /* Selo pequeno de variação percentual (comparativo com mês anterior) ao lado do valor de um stat-card. */ .stat-trend { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; } .stat-trend.up { background: var(--color-success-bg); color: var(--color-success); } .stat-trend.down { background: var(--color-error-bg); color: var(--color-error); } .stat-trend svg { width: 13px; height: 13px; } /* Lista compacta (convênios mais usados, ranking) dentro de um card, sem virar uma tabela cheia de bordas. */ .rank-list { display: flex; flex-direction: column; } .rank-row { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--color-border); } .rank-row:last-child { border-bottom: none; } .rank-row-medal { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; background: var(--color-bg); color: var(--color-text-muted); } .rank-row-medal.gold { background: #fdf1d6; color: #a3730a; } .rank-row-medal.silver { background: #eef0f3; color: #5b6472; } .rank-row-medal.bronze { background: #fbe6d8; color: #a3541c; } .rank-row-body { flex: 1; min-width: 0; } .rank-row-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-row-bar { height: 5px; border-radius: 999px; background: var(--color-border); margin-top: .3rem; overflow: hidden; } .rank-row-bar-fill { height: 100%; background: var(--gradient-brand); border-radius: 999px; } .rank-row-value { font-size: .84rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } /* Chips de status compactos (breakdown da agenda do dia) — menores que um badge normal, feitos pra ficar lado a lado num resumo rápido. */ .status-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; } .status-chip { display: flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: var(--radius-sm); background: var(--color-bg); font-size: .82rem; font-weight: 500; color: var(--color-text); } .status-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Abas por médico na Agenda em grade — filtram a agenda ao clicar e a cor de cada uma já é a mesma da borda lateral dos eventos daquele médico, então funcionam como filtro + legenda ao mesmo tempo (ver appointments/grid.php). */ .doctor-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .doctor-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: .84rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .doctor-tab:hover { background: var(--color-bg); color: var(--color-text); } .doctor-tab.active { border-color: var(--doctor-color, var(--color-primary)); background: color-mix(in srgb, var(--doctor-color, var(--color-primary)) 16%, transparent); color: var(--doctor-color, var(--color-primary-dark)); font-weight: 600; } .doctor-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Aba de médico (ou "Agenda geral") com bloqueio de agenda ativo no período visível do calendário — ver ScheduleBlock e o JS em appointments/grid.php que liga/desliga esta classe conforme os eventos de fundo recebidos. */ .doctor-tab.doctor-tab-blocked { border-color: var(--color-danger, #dc3545); background: color-mix(in srgb, var(--color-danger, #dc3545) 12%, transparent); color: var(--color-danger, #dc3545); } .doctor-tab-blocked-badge { display: none; } .doctor-tab.doctor-tab-blocked .doctor-tab-blocked-badge { display: inline; } /* Botão de ajuda contextual (ver help_button() em Core/Helpers.php) — ícone compacto e circular pra não competir com o título da tela. */ .help-context-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%; } .help-context-btn svg { width: 0.9rem; height: 0.9rem; } .doctor-tab-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--color-text-muted); margin-left: .35rem; } /* Destaque do nome do paciente dentro do evento na Agenda em grade — usa a mesma paleta .tag-* das tags de paciente/CID, só com um recorte menor pra caber no bloco do evento (ver Constants::APPOINTMENT_HIGHLIGHT, AppointmentController::events() e appointments/grid.php). */ .fc-name-highlight.tag { padding: 0 .35em; font-size: .78rem; font-weight: 600; border-radius: 4px; } /* ========================================================= Agenda em grade (appointments/grid.php) — refinamento visual sobre o FullCalendar 6 existente. Nada aqui muda o comportamento da lib: só restyle das classes que ela já gera (.fc-*) + alguns wrappers novos, puramente de apresentação, em volta do que já existia. ========================================================= */ /* Só a Agenda em grade ganha mais largura (ver layouts/main.php) — o calendário se beneficia de espaço horizontal em telas grandes. */ .app-content-wide { max-width: 1680px; } .agenda-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Painel único reunindo os filtros de agenda (abas por médico) + o toggle de desmarcados/faltas — antes eram duas linhas soltas com espaçamento inconsistente. */ .agenda-toolbar-panel { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .65rem .9rem; box-shadow: var(--shadow-sm); } .agenda-toolbar-label { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); flex-shrink: 0; } .agenda-toolbar-panel .doctor-tabs { flex: 1; } /* Toggle "Ver desmarcados/faltas" — mesmo checkbox/id/label de sempre, só com peso visual reduzido pra não competir com os filtros de agenda. */ .agenda-toggle { display: flex; align-items: center; gap: .4rem; margin-left: auto; padding-left: .85rem; border-left: 1px solid var(--color-border); flex-shrink: 0; } .agenda-toggle .form-check-input { cursor: pointer; accent-color: var(--color-primary); } .agenda-toggle .form-check-label { font-size: .8rem; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; } @media (max-width: 767.98px) { .agenda-toggle { margin-left: 0; padding-left: 0; border-left: none; } } /* Card do calendário — superfície neutra, sem sombra pesada (o calendário é o protagonista, não deve parecer "flutuando"). */ .agenda-calendar-card { box-shadow: var(--shadow-sm); } .agenda-calendar-card > .card-body { padding: .75rem; } /* Legenda — era um card grande, agora uma faixa discreta de uma linha. */ .agenda-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.1rem; padding: .55rem .9rem; font-size: .8rem; color: var(--color-text-muted); } .agenda-legend-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-right: .3rem; } .agenda-legend-item { display: inline-flex; align-items: center; gap: .4rem; } /* ---- FullCalendar: toolbar nativa ---- */ .fc .fc-toolbar.fc-header-toolbar { margin-bottom: .75rem; gap: .5rem; flex-wrap: wrap; } .fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); text-transform: capitalize; } /* Botões (prev/next/today/dia/semana/mês) — mesma linguagem visual dos botões outline do resto do sistema, sem o azul padrão do FullCalendar. */ .fc .fc-button { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-sans); font-size: .84rem; font-weight: 500; text-transform: none; padding: .4rem .75rem; box-shadow: none; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .fc .fc-button:hover { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } .fc .fc-button:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus { box-shadow: 0 0 0 .2rem var(--color-primary-light); } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; } .fc .fc-button:disabled { opacity: .45; } .fc .fc-today-button { text-transform: none; } /* Grupo Dia/Semana/Mês como segmented control: uma superfície só, sem gap entre os botões. */ .fc .fc-button-group { background: var(--color-bg); border-radius: var(--radius-sm); padding: 2px; gap: 0; } .fc .fc-button-group .fc-button { border: none; background: transparent; border-radius: calc(var(--radius-sm) - 2px) !important; } .fc .fc-button-group .fc-button-primary:not(:disabled).fc-button-active { background: var(--color-surface); box-shadow: var(--shadow-sm); } /* ---- FullCalendar: grade ---- */ .fc .fc-theme-standard td, .fc .fc-theme-standard th, .fc .fc-theme-standard .fc-scrollgrid { border-color: var(--color-border); } .fc .fc-col-header-cell-cushion { color: var(--color-text-muted); font-size: .78rem; font-weight: 600; text-transform: capitalize; padding: .5rem 0; } .fc .fc-timegrid-slot-label-cushion { color: var(--color-text-muted); font-size: .76rem; } .fc .fc-timegrid-slot { height: 2.6em; } .fc .fc-timegrid-slot.fc-timegrid-slot-lane { border-color: var(--color-border); } .fc .fc-timegrid-axis { border-color: var(--color-border); } .fc .fc-day-today { background: color-mix(in srgb, var(--color-primary) 5%, transparent) !important; } .fc .fc-timegrid-now-indicator-line { border-color: var(--color-error, #ef4444); border-width: 1.5px 0 0 0; } .fc .fc-timegrid-now-indicator-arrow { border-color: var(--color-error, #ef4444); border-width: 4px; } /* ---- FullCalendar: eventos ---- */ .fc .fc-event { border-radius: var(--radius-sm); border-width: 1px; padding: 1px 2px; font-size: .8rem; cursor: pointer; transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .fc .fc-event:hover { box-shadow: var(--shadow-sm); } .fc .fc-timegrid-event .fc-event-main { padding: .2rem .4rem; } .fc .fc-event-time { font-weight: 600; opacity: .85; } .fc .fc-event-title { font-weight: 500; } /* Fundo suave (ver eventDidMount em grid.php) — a cor de status continua sendo a mesma, só deixa de ser um bloco 100% saturado. */ .fc .fc-event.evt-soft { background: color-mix(in srgb, var(--evt-status-color, var(--color-primary)) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--evt-status-color, var(--color-primary)) 32%, transparent); border-left-width: 3px; border-left-color: var(--evt-status-color, var(--color-primary)); } .fc .fc-event.evt-soft .fc-event-time, .fc .fc-event.evt-soft .fc-event-title { color: var(--color-text); } /* Bloqueios de agenda (ScheduleBlock, fundo de eventos "background") — diferenciação discreta, sem competir com os agendamentos de verdade. */ .fc .fc-bg-event { opacity: 1; background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--color-text-muted) 8%, transparent), color-mix(in srgb, var(--color-text-muted) 8%, transparent) 6px, transparent 6px, transparent 12px ); } @media (max-width: 991.98px) { .fc .fc-toolbar.fc-header-toolbar { justify-content: center; } } /* ========================================================= Perfil 360º do paciente (patients/show.php) — refinamento visual sobre a tela existente. Só apresentação: os dados, condições Auth::hasRole() e loops PHP continuam exatamente os mesmos. ========================================================= */ .patient-profile-header { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.1rem 1.35rem; box-shadow: var(--shadow-card); } .patient-profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; } .patient-profile-body { flex: 1; min-width: 0; } .patient-profile-name-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .patient-profile-name { font-size: 1.3rem; font-weight: 700; color: var(--color-text); } .patient-profile-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .3rem; font-size: .84rem; color: var(--color-text-muted); } .patient-profile-status { margin-top: .5rem; } .patient-status-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 500; color: var(--color-text-muted); } .patient-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); } .patient-status-pill.is-active .patient-status-dot { background: var(--color-success); } .patient-status-pill.is-active { color: var(--color-success); } .patient-status-pill.is-inactive .patient-status-dot { background: var(--color-text-muted); } .patient-profile-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } .patient-profile-tertiary-action { color: var(--color-text-muted); text-decoration: none; font-size: .84rem; padding: .4rem .5rem; } .patient-profile-tertiary-action:hover { color: var(--color-text); } /* Navegação rápida entre seções — mesma ideia da usada no prontuário, com nome de classe próprio pra não colidir com .clinical-quicknav. */ .patient-quicknav { position: sticky; top: var(--topbar-height); z-index: 5; display: flex; flex-wrap: wrap; gap: .35rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem; box-shadow: var(--shadow-card); } .patient-quicknav a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast); } .patient-quicknav a:hover { background: var(--color-bg); color: var(--color-text); } .patient-section { scroll-margin-top: calc(var(--topbar-height) + 60px); } .patient-section-label { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: .6rem; } .patient-section-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; } .patient-section-alert { border-color: color-mix(in srgb, var(--color-error, #ef4444) 35%, var(--color-border)); } .patient-contact-icon { width: 1.1rem; display: inline-block; text-align: center; color: var(--color-text-muted); } /* Resumo clínico — grid leve 2x2 (1 coluna no mobile), sem quatro cards pesados empilhados. */ .clinical-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; } @media (max-width: 575.98px) { .clinical-summary-grid { grid-template-columns: 1fr; } } .clinical-summary-item { padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--color-bg); } .clinical-summary-label { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: .3rem; } .clinical-summary-item.has-content { background: var(--color-surface-alt); border: 1px solid var(--color-border); } .clinical-summary-item.is-warning.has-content { background: var(--color-warning-bg); } .clinical-summary-item.is-warning.has-content .clinical-summary-label { color: #9a6300; } .clinical-summary-item.is-danger.has-content { background: var(--color-error-bg); } .clinical-summary-item.is-danger.has-content .clinical-summary-label { color: var(--color-error); } html[data-theme="dark"] .clinical-summary-item.is-warning.has-content .clinical-summary-label { color: var(--color-warning); } /* Tabelas do perfil (agendamentos/prontuários/faturas/documentos) — hover sutil + tipografia consistente com o resto do sistema. */ .patient-table-card .table thead th { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); border-bottom-color: var(--color-border); } .patient-table-card .table tbody tr { transition: background-color var(--transition-fast); } .patient-record-diagnosis { font-weight: 600; color: var(--color-text); } .patient-invoice-amount { font-weight: 700; color: var(--color-text); font-size: .95rem; } /* ========================================================= Listagem de pacientes (patients/index.php) — polimento visual sobre a tela já aprovada. Só apresentação: filtros, paginação, JS de busca instantânea e permissões continuam exatamente os mesmos. ========================================================= */ .patients-search-wrap { position: relative; } .patients-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: .85rem; pointer-events: none; } .patients-search-input { padding-left: 2.2rem; } /* CPF: informação secundária — menor peso e cor que o nome do paciente. */ .patient-row-cpf { display: block; font-size: .78rem; color: var(--color-text-muted); } .patient-row-contact { color: var(--color-text-muted); font-size: .88rem; } .patient-row-secondary { color: var(--color-text-muted); font-size: .88rem; } /* Próxima consulta — ganha um pouco mais de destaque quando existe, pra chamar mais atenção que "última consulta". */ .patient-row-next-visit { font-weight: 600; color: var(--color-primary-dark); } /* "Desativar" — ação secundária/destrutiva, não deve competir visualmente com "Editar". Mesmo submit/action/confirm de sempre, só troca de botão outline pra link discreto (ainda em vermelho, pra manter o sinal de ação destrutiva). */ .patient-row-action-tertiary { color: var(--color-error, #ef4444); text-decoration: none; padding: .25rem .5rem; } .patient-row-action-tertiary:hover { text-decoration: underline; background: none; } /* ========================================================= Modal "Novo agendamento" (appointments/_modal_form.php) — agrupamento visual leve dos campos. Nenhum name/id/value/required muda, só a organização em blocos com título discreto + divisor sutil entre eles. ========================================================= */ .modal-form-group { padding-top: .9rem; } .modal-form-group:first-child { padding-top: 0; } .modal-form-group + .modal-form-group { border-top: 1px solid var(--color-border); } .modal-form-group-last { padding-bottom: .1rem; } .modal-form-group-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .65rem; } .modal-form-group-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .modal-form-inline-action { font-size: .8rem; color: var(--color-primary-dark); text-decoration: none; } .modal-form-inline-action:hover { text-decoration: underline; } .modal-form-check-inline { margin-bottom: .5rem; } /* ========================================================= Fatura / check-in (invoices/show.php) — refinamento visual sobre a tela já existente. Cálculos, status, permissões e formulários continuam exatamente os mesmos. ========================================================= */ .invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .invoice-header-number { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: .2rem; } .invoice-header-patient a { font-size: 1.35rem; font-weight: 700; color: var(--color-text); text-decoration: none; } .invoice-header-patient a:hover { color: var(--color-primary-dark); text-decoration: underline; } .invoice-header-meta { color: var(--color-text-muted); font-size: .9rem; margin-top: .15rem; } .invoice-header-secondary { color: var(--color-text-muted); font-size: .82rem; margin-top: .2rem; } .invoice-header-side { flex-shrink: 0; } /* Valores monetários — alinhamento consistente + tabular numbers pra colunas de valor não "dançarem" entre linhas. */ .invoice-amount { font-variant-numeric: tabular-nums; color: var(--color-text); } .invoice-amount-strong { font-weight: 700; } /* Desconto/Correção — operações eventuais, peso visual reduzido em relação a Itens/Pagamentos. */ .invoice-section-secondary .card-header { padding: .65rem 1rem; } .invoice-section-secondary .card-body { padding: .85rem 1rem; } .invoice-section-secondary-title { font-size: .88rem; color: var(--color-text-muted); font-weight: 500; } /* Itens/Pagamentos — as áreas mais importantes da tela. */ .invoice-section-primary { box-shadow: var(--shadow-card); } .invoice-section-primary-header { font-weight: 600; font-size: 1rem; } .invoice-add-item-title { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: .6rem; } /* Ações excepcionais (glosar/cancelar) — bloco discreto, separado do fluxo financeiro principal. Vermelho só em texto/borda (btn-outline-danger já cuida disso), nunca em bloco preenchido. */ .invoice-danger-zone { background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: .85rem 1rem; } .invoice-danger-zone-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: .5rem; } /* ========================================================= Formulário de usuário (users/form.php) — mesmo padrão de "seções dentro de um card único" já usado no prontuário, reaproveitando .form-section-label. Nomes/ids/values do formulário continuam os mesmos. ========================================================= */ .user-form-card { max-width: 820px; } .user-form-subtitle { font-size: .88rem; max-width: 620px; } /* Vínculo médico parceiro — texto explicativo em caixa neutra, no lugar de um .form-text solto. */ .form-info-box { display: flex; align-items: flex-start; gap: .5rem; background: var(--color-bg); border-radius: var(--radius-sm); padding: .65rem .85rem; font-size: .82rem; color: var(--color-text-muted); line-height: 1.5; } .form-info-box i { color: var(--color-primary); margin-top: .1rem; flex-shrink: 0; } /* Unidades de atendimento — colunas "Unidade" / "Principal" em vez de checkbox+radio soltos lado a lado em cada linha. */ .unit-assign-list { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .unit-assign-header { display: flex; justify-content: space-between; padding: .5rem .85rem; background: var(--color-bg); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .unit-assign-header span:last-child { padding-right: .5rem; } .unit-assign-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem .85rem; border-top: 1px solid var(--color-border); } .unit-assign-radio { margin: 0; padding-right: .5rem; } /* Linha de configuração (ex: "Usuário ativo") — label + descrição à esquerda, controle à direita. */ .setting-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--color-bg); border-radius: var(--radius-sm); padding: .75rem .9rem; } .setting-row-title { display: block; font-weight: 500; color: var(--color-text); cursor: pointer; } .setting-row-desc { font-size: .8rem; color: var(--color-text-muted); margin-top: .1rem; } .setting-row-control { flex-shrink: 0; width: 1.1rem; height: 1.1rem; cursor: pointer; } .form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); } /* ========================================================= Auditoria (audit_log/index.php) — central de rastreabilidade. Mesmos logs/queries/filtro; só leitura/apresentação. ========================================================= */ .audit-table thead th { position: sticky; top: var(--topbar-height); z-index: 5; background: var(--color-surface); } .audit-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-bg) 55%, transparent); } .audit-when { font-variant-numeric: tabular-nums; } .audit-action { font-weight: 600; color: var(--color-text); } .audit-action-raw { font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--color-text-muted); } .audit-ip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; } .stat-card-body { min-width: 0; } .stat-card-label { font-size: .78rem; color: var(--color-text-muted); font-weight: 500; margin-bottom: .15rem; } .stat-card-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .stat-card-hint { font-size: .78rem; color: var(--color-text-muted); margin-top: .15rem; } /* Cabeçalho do painel: título + contexto do dia, no lugar do antigo "Painel — {papel}" (o papel do usuário já aparece no rodapé da sidebar, não precisa se repetir aqui — ver dashboard/index.php). */ .dashboard-header { margin-bottom: 1.75rem; } .dashboard-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: .2rem; } .dashboard-subtitle { font-size: .9rem; color: var(--color-text-muted); margin-bottom: 0; } .stat-card-cta { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: var(--radius-md); background: var(--gradient-brand); color: #fff; font-weight: 600; text-decoration: none; padding: 1.1rem; transition: transform .15s ease, box-shadow .15s ease; box-shadow: var(--shadow-card); } .stat-card-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn { position: relative; overflow: hidden; border-radius: var(--radius-sm); font-weight: 500; transition: transform .1s ease, box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn:active { transform: translateY(0); } .btn:disabled, .btn.disabled { transform: none !important; box-shadow: none !important; cursor: not-allowed; } .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 4px 14px rgba(109, 93, 246, .32); transform: translateY(-1px); } .btn-primary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-1px); } .btn-sm:hover { transform: none; } /* Onda sutil ao clicar (ver app.js) — some sozinha, não exige nenhuma biblioteca de animação. */ .btn-ripple { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, .16); transform: scale(0); animation: btn-ripple .5s ease-out forwards; pointer-events: none; } @keyframes btn-ripple { to { transform: scale(1); opacity: 0; } } /* Spinner injetado via JS em botões de formulário durante o envio */ .btn .spinner-border-sm { width: .85rem; height: .85rem; border-width: .15em; } .form-control, .form-select { background-color: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); border-color: var(--color-border); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: var(--color-text-muted); } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem var(--color-primary-light); } .form-control:disabled, .form-select:disabled { background-color: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; opacity: 1; } .form-label { font-weight: 500; font-size: .88rem; } .table { color: var(--color-text); } .table thead th { white-space: nowrap; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); font-weight: 600; background-color: var(--color-surface); } .card .table thead th:first-child { padding-left: 1.25rem; } .card .table td:first-child { padding-left: 1.25rem; } .card .table thead th:last-child { padding-right: 1.25rem; } .card .table td:last-child { padding-right: 1.25rem; } .table td { vertical-align: middle; border-color: var(--color-border); } .table-hover tbody tr { transition: background-color .1s ease; } .table-hover tbody tr:hover { background-color: var(--color-primary-light); } /* Cabeçalho fixo em tabelas longas dentro de um card com rolagem */ .table-responsive .table thead th { position: sticky; top: 0; z-index: 1; } /* Soft, pill-shaped status badges */ .badge { border-radius: 999px; font-weight: 600; padding: .4em .8em; font-size: .72rem; letter-spacing: .01em; } .badge.bg-secondary { background-color: #eef1f5 !important; color: #51606f !important; } .badge.bg-warning { background-color: #fff4e0 !important; color: #9a6400 !important; } .badge.bg-info { background-color: #e6f7f8 !important; color: #0f7b86 !important; } .badge.bg-success { background-color: #e8f7ee !important; color: #1e7d43 !important; } .badge.bg-danger { background-color: #fdeceb !important; color: #b3261e !important; } .badge.bg-dark { background-color: #eceef1 !important; color: #33383e !important; } .badge.bg-primary { background-color: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; } .badge.bg-purple { background-color: var(--tag-purple-bg) !important; color: var(--tag-purple-text) !important; } .badge.bg-orange { background-color: var(--tag-orange-bg) !important; color: var(--tag-orange-text) !important; } .badge-status { font-size: .72rem; } /* Rótulo de seção dentro de formulários longos (ex: Novo prontuário) — agrupa campos relacionados sem precisar quebrar o formulário em vários cards. */ .form-section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 700; margin: 1.5rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: .4rem; } .form-section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; } .form-section-label i { font-size: .85rem; } /* ========================================================= Prontuário (medical_records/form.php): header do paciente, navegação rápida entre seções, cards clínicos numerados, campo de busca com ícone e barra de ações sticky. Puramente apresentação — os names/ids funcionais do formulário continuam exatamente os mesmos (ver comentário no topo do form.php). ========================================================= */ .patient-header { display: flex; align-items: center; gap: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); } .patient-header-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; flex-shrink: 0; } .patient-header-body { min-width: 0; } .patient-header-name-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .patient-header-name { font-size: 1.15rem; font-weight: 700; color: var(--color-text); } .patient-header-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .3rem; font-size: .82rem; color: var(--color-text-muted); } .patient-header-meta i { margin-right: .3rem; } /* Navegação rápida entre as seções clínicas — sticky logo abaixo da topbar (que já é sticky, ver .topbar), rolagem suave via JS (ver form.php). */ .clinical-quicknav { position: sticky; top: var(--topbar-height); z-index: 5; display: flex; flex-wrap: wrap; gap: .35rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem; box-shadow: var(--shadow-card); } .clinical-quicknav a { padding: .35rem .75rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast); } .clinical-quicknav a:hover { background: var(--color-bg); color: var(--color-text); } /* Cards clínicos — mesma linguagem visual de .card, com um cabeçalho próprio numerado (1, 2, 3...) pra reforçar o fluxo do atendimento. */ .clinical-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--topbar-height) + 60px); } .clinical-section-header { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } .clinical-section-number { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: .74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .clinical-section-title { font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: .5rem; } .clinical-section-body { padding: 1.25rem; } .clinical-section-compact .clinical-section-body { padding: .85rem 1.25rem; } .clinical-field { margin-bottom: 1.1rem; } .clinical-field:last-child { margin-bottom: 0; } .clinical-field textarea.form-control { line-height: 1.55; padding: .65rem .85rem; resize: vertical; } .clinical-field-label-strong { font-weight: 700; color: var(--color-text); } /* Campo de busca com ícone embutido (medicamento favorito) — mesmo princípio visual da busca da topbar, mais compacto. */ .clinical-search { position: relative; } .clinical-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: .9rem; pointer-events: none; } .clinical-search .form-control { padding-left: 2.25rem; } /* Barra de ações do prontuário — sticky no rodapé do conteúdo. Mesmos botões/atributos do formulário de sempre, só reposicionados; ver REGRA ABSOLUTA no topo do form.php — nenhum name/value muda aqui. */ .medical-form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: 0 -4px 14px rgba(15, 23, 42, .07); } /* Indicador discreto de autosave do prontuário (ver public/assets/js/medical-record-autosave.js) — "margin-right: auto" empurra os botões pra direita dentro do mesmo flex, sem mexer no layout existente. Cor muda por estado via data-state; nunca é um toast, fica sempre visível perto das ações. */ .autosave-status { display: flex; align-items: center; gap: .4rem; margin-right: auto; font-size: .82rem; color: var(--color-text-muted); transition: opacity .15s ease, color .15s ease; } .autosave-status[data-state="idle"] { opacity: .55; } .autosave-status[data-state="dirty"] { color: var(--color-warning); } .autosave-status[data-state="saving"] { color: var(--color-text-muted); } .autosave-status[data-state="saved"] { color: var(--color-success); } .autosave-status[data-state="error"], .autosave-status[data-state="offline"] { color: var(--color-error); } .autosave-status-icon { font-size: .9rem; } .autosave-spin { display: inline-block; animation: autosave-spin .8s linear infinite; } @keyframes autosave-spin { to { transform: rotate(360deg); } } @media (max-width: 767.98px) { .clinical-quicknav { overflow-x: auto; flex-wrap: nowrap; } } @media (max-width: 575.98px) { .patient-header { flex-direction: column; text-align: center; } .patient-header-meta { justify-content: center; } .medical-form-actions { flex-direction: column-reverse; align-items: stretch; } .medical-form-actions .btn { width: 100%; } .autosave-status { margin-right: 0; margin-top: .4rem; justify-content: center; } } /* Tags livres (condições, alergias, interesses do paciente) — visualmente distintas dos badges de status: mesma forma de pílula, paleta própria. */ .tag { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .35em .85em; font-size: .78rem; font-weight: 600; } .tag-pink { background: var(--tag-pink-bg); color: var(--tag-pink-text); } .tag-red { background: var(--tag-red-bg); color: var(--tag-red-text); } .tag-orange { background: var(--tag-orange-bg); color: var(--tag-orange-text); } .tag-blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); } .tag-green { background: var(--tag-green-bg); color: var(--tag-green-text); } .tag-purple { background: var(--tag-purple-bg); color: var(--tag-purple-text); } .alert { border-radius: var(--radius-md); border: none; } .dropdown-menu { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-hover); padding: .4rem; } .dropdown-item { color: var(--color-text); border-radius: var(--radius-sm); padding: .5rem .7rem; font-size: .88rem; display: flex; align-items: center; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-bg); color: var(--color-text); } .dropdown-divider { border-color: var(--color-border); } .dropdown-item.text-danger:hover { background-color: #fdeceb; } /* ========================================================= Flashes: aparecem como toasts flutuantes no canto superior direito, com saída suave (ver app.js para o auto-dismiss). ========================================================= */ .toast-stack { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1080; width: min(360px, calc(100vw - 2.5rem)); display: flex; flex-direction: column; gap: .6rem; } .toast-stack .alert { box-shadow: var(--shadow-hover); margin-bottom: 0; animation: toast-in .2s ease; } .toast-stack .alert.is-leaving { animation: toast-out .2s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } } /* ========================================================= Timeline médica (prontuário) — histórico de visitas do paciente numa linha do tempo vertical, com a visita atual destacada. ========================================================= */ .med-timeline { position: relative; padding-left: 1.4rem; margin: 0; } .med-timeline::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--color-border); } .med-timeline-item { position: relative; padding-bottom: 1.15rem; } .med-timeline-item:last-child { padding-bottom: 0; } .med-timeline-dot { position: absolute; left: -1.4rem; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-border); border: 2px solid var(--color-surface); } .med-timeline-item.current .med-timeline-dot { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .med-timeline-link { text-decoration: none; color: inherit; display: block; } .med-timeline-link:hover .med-timeline-title { color: var(--color-primary); } .med-timeline-date { font-size: .72rem; color: var(--color-text-muted); } .med-timeline-title { font-size: .86rem; font-weight: 600; color: var(--color-text); } .med-timeline-item.current .med-timeline-title { color: var(--color-primary-dark); } .med-timeline-sub { font-size: .78rem; color: var(--color-text-muted); } /* Anexos do prontuário: card compacto com ícone por tipo (ou thumbnail se for imagem). */ .attachment-tile { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: .5rem; transition: box-shadow var(--transition-fast); } .attachment-tile:hover { box-shadow: var(--shadow-card); } .attachment-thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0; object-fit: cover; background: var(--color-bg); } .attachment-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-text-muted); font-size: 1.2rem; } .attachment-body { flex: 1; min-width: 0; } .attachment-name { font-size: .86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .attachment-meta { font-size: .74rem; color: var(--color-text-muted); } /* ========================================================= Agenda em grade (Recepção): colunas por médico, blocos coloridos por status. Cores mais saturadas que os badges pastéis — aqui o bloco inteiro carrega a cor, precisa de mais contraste pra ler rápido. ========================================================= */ .agenda-grid-table { table-layout: fixed; } .agenda-grid-table th, .agenda-grid-table td { vertical-align: top; } .agenda-grid-table td.slot-time { white-space: nowrap; color: var(--color-text-muted); font-size: .8rem; width: 64px; } .appt-block { display: block; border-radius: var(--radius-sm); padding: .4rem .55rem; margin-bottom: .3rem; font-size: .78rem; line-height: 1.25; cursor: pointer; border: none; width: 100%; text-align: left; } .appt-block strong { display: block; font-size: .8rem; } .appt-block.status-agendado { background-color: #dbe9fb; color: #184a80; } .appt-block.status-check_in { background-color: #fff0cc; color: #8a5a00; } .appt-block.status-em_atendimento { background-color: #cdeff0; color: #0f7b86; } .appt-block.status-atendido { background-color: #d3f2e1; color: #1e7d43; } .appt-block.status-cancelado { background-color: #f6d4d1; color: #8a231c; } .appt-block.status-faltou { background-color: #e3e5e8; color: #33383e; } /* ========================================================= Print: hide chrome, keep just the content ========================================================= */ @media print { .sidebar, .topbar, .no-print { display: none !important; } .app-shell { margin-left: 0 !important; } body { background: #fff !important; } /* Aproveita a página inteira — margens padrão do navegador (~12-13mm de cada lado) somadas à largura de tabelas com muitas colunas (ex: relatório de caixa detalhado, relatórios com abas) é o que fazia a tabela "vazar" pra fora da folha impressa/PDF. */ @page { margin: 10mm; } /* Allan reportou (print do relatório de caixa) que colunas do fim da tabela ficavam cortadas fora da folha — a .table-responsive do Bootstrap rola horizontalmente na tela (overflow-x: auto), mas na impressão não existe "rolar": o navegador só desenha o que já estava visível e corta o resto, inclusive a barrinha da scrollbar aparecendo no PDF. Removendo o scroll e forçando a tabela a caber exatamente na largura da página (table-layout: fixed distribui as colunas dentro de 100% em vez de deixar cada uma crescer pelo conteúdo, e white-space: normal permite quebrar linha em vez de estourar a largura) garante que nenhuma informação fique fora da folha — o texto pode ocupar mais linhas dentro da célula, mas nunca é cortado. */ .table-responsive { overflow: visible !important; width: 100% !important; } .table-responsive .table { table-layout: fixed; width: 100% !important; font-size: 11px; } .table-responsive .table th, .table-responsive .table td { white-space: normal !important; word-break: break-word; padding: 4px 6px; } } /* ========================================================= Refinamento: componentes do Bootstrap que ainda usavam o visual padrão (azul, cantos quadrados) em vez da identidade do sistema. Não muda nenhuma marcação nas views — só restyle de classes que elas já emitem (.form-check, .nav-tabs, .modal, .alert). ========================================================= */ /* Checkbox/radio/switch: Bootstrap usa azul por padrão no estado marcado, o que destoava da paleta roxo/teal em qualquer form com opções (ex: matriz de permissões, filtros, formulários de cadastro). */ .form-check-input { border-color: var(--color-border); } .form-check-input:hover:not(:disabled):not(:checked) { border-color: var(--color-text-muted); } .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary); } .form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem var(--color-primary-light); } .form-check-label { font-size: .9rem; } /* Abas (usadas em Configuração de impressão, por exemplo): trocado o visual "caixa com borda" padrão do Bootstrap por abas suaves, no mesmo estilo pílula do resto do sistema (badges, sidebar-link ativo). */ .nav-tabs { border-bottom: 1px solid var(--color-border); gap: .25rem; } .nav-tabs .nav-link { border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--color-text-muted); font-weight: 500; padding: .55rem 1.1rem; transition: background-color var(--transition-fast), color var(--transition-fast); } .nav-tabs .nav-link:hover { border-color: transparent; background: var(--color-bg); color: var(--color-text); } .nav-tabs .nav-link.active { background: var(--color-primary-light); color: var(--color-primary-dark); border: none; font-weight: 600; } /* Modal (usado no detalhe de agendamento da Agenda em grade): mesmos cantos arredondados e sombra dos cards, em vez do quadrado padrão. */ .modal-content { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); } .modal-header, .modal-footer { border-color: var(--color-border); } .modal-backdrop.show { opacity: .55; } /* Alertas inline (erros de validação, avisos) — mesma paleta suave usada nos badges de status, em vez do vermelho/verde/amarelo puros do Bootstrap. */ .alert-success { background-color: #e8f7ee; color: #1e7d43; } .alert-warning { background-color: #fff4e0; color: #9a6400; } .alert-danger { background-color: #fdeceb; color: #b3261e; } .alert-info { background-color: #e6f7f8; color: #0f7b86; } /* Scrollbar fina e discreta em áreas com rolagem própria (menu lateral, tabelas longas dentro de card) — no padrão do resto do sistema, sem depender do scrollbar cinza padrão do navegador. Sem efeito no Firefox antigo/Safari muito antigo, que só ignoram a regra (degrada bem). */ .sidebar-nav, .table-responsive { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .sidebar-nav::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 6px; height: 6px; } .sidebar-nav::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; } .sidebar-nav::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track { background: transparent; } /* Estado vazio padrão (listas sem resultado). Aplicado no dashboard (dashboard/index.php) — ainda não retroaplicado nas demais ~33 telas que usam um texto solto tipo "Nenhum registro encontrado"; isso fica como próximo passo, tela por tela, pra não misturar com este refinamento. Padding/ícone compactados (era 2.5rem/56px) — o usuário só precisa perceber "não tem nada aqui" rápido, sem atravessar uma área vazia grande. */ .empty-state { text-align: center; padding: 1.5rem 1.25rem; color: var(--color-text-muted); } .empty-state-icon { width: 40px; height: 40px; margin: 0 auto .65rem; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--color-text-muted); } .empty-state-title { font-weight: 600; color: var(--color-text); margin-bottom: .2rem; font-size: .92rem; } .empty-state-text { font-size: .82rem; } /* ========================================================= CLINICS Design System 1.0 — estado vazio compacto para linha de tabela / card-body (o "Nenhum X encontrado" das listas). Substitui o texto cru (~47 telas) mantendo colspan e textos idênticos — só padroniza a apresentação com o mesmo padrão visual do .empty-state do dashboard, em versão compacta. ========================================================= */ .table-empty-state { text-align: center; color: var(--color-text-muted); padding: 2rem 1rem; font-size: .88rem; } .table-empty-icon { display: block; font-size: 1.3rem; margin-bottom: .4rem; color: var(--color-text-muted); opacity: .7; } .table-empty-hint { font-size: .8rem; margin-top: .15rem; } /* ========================================================= Seletor visual de tema do sistema (ver system_settings/theme_edit.php e ThemeSettingController) — cards de opção com prévia da paleta. A cor mostrada em .theme-option-swatch/-swatch-btn vem de Constants::BRAND_THEMES (dado, não estilo hardcoded do componente). ========================================================= */ .theme-option-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; position: relative; height: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .theme-option-card:hover { box-shadow: var(--shadow-sm); } .theme-option-card.is-selected { border-color: var(--color-primary); box-shadow: var(--shadow-card); } /* Reflete o clique em tempo real, antes de salvar: :has() reage ao estado do radio nativo, sem precisar de JS. .is-selected (acima) continua cobrindo a carga inicial da página (tema realmente salvo). */ .theme-option-card:has(.theme-option-input:checked) { border-color: var(--color-primary); box-shadow: var(--shadow-card); } .theme-option-input { position: absolute; opacity: 0; pointer-events: none; } .theme-option-swatches { display: flex; align-items: center; gap: .6rem; } .theme-option-swatch { width: 28px; height: 28px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); flex-shrink: 0; } .theme-option-swatch-btn { display: inline-flex; align-items: center; justify-content: center; padding: .4rem .9rem; border-radius: var(--radius-sm); color: #fff; font-size: .82rem; font-weight: 600; } .theme-option-body { display: flex; flex-direction: column; gap: .15rem; } .theme-option-name { font-weight: 600; color: var(--color-text); } .theme-option-desc { font-size: .84rem; color: var(--color-text-muted); } .theme-option-badge { position: absolute; top: .9rem; right: .9rem; font-size: .74rem; font-weight: 600; color: var(--color-success); display: inline-flex; align-items: center; gap: .3rem; } /* Badge "Selecionado": só existe nos cards que NÃO são o tema salvo ($current), e fica oculta até o radio daquele card ficar marcado — dá feedback imediato do clique, distinto do "Em uso" (que é sobre o que está realmente salvo, não sobre o que está marcado no formulário agora). */ .theme-option-badge-pending { display: none; color: var(--color-primary); } .theme-option-card:has(.theme-option-input:checked) .theme-option-badge-pending { display: inline-flex; }