/* ========================================================================== GERENCIADOR DE DOCUMENTOS — CSS Framework Arquivo único. Nunca usar style inline. Ao criar novos estilos, sempre reutilizar classes existentes. Só criar algo novo se for de extrema necessidade. Índice: 1. Fontes 2. Design Tokens (tema padrão: green) 3. Temas alternativos (blue, violet, slate) 4. Dark mode 5. Base reset 6. Overlay (sidebar mobile) 7. Layout — App Shell 8. Sidebar 9. Sidebar colapsada 10. Sidebar mobile (drawer) 11. Navegação 12. Topbar 13. Searchbox 14. Icon button 15. User menu 16. Buttons 17. Forms 18. Cards 19. Badges 20. Alertas 21. Tabelas 22. Page header 23. Grids de conteúdo 24. Login 25. Table toolbar & paginação 26. Utilitários 27. Configurações (tema + switch) 28. Modal 29. Responsivo ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTES -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0'); /* -------------------------------------------------------------------------- 2. DESIGN TOKENS — tema padrão (green) Nunca usar valores de cor, espaçamento ou raio fora destas variáveis. -------------------------------------------------------------------------- */ :root { /* Superfícies */ --color-bg: #f5f7f4; --color-surface: #ffffff; --color-surface-strong: #eef4ec; --color-text: #172016; --color-text-muted: #657064; --color-border: #dfe7dc; /* Brand — sobrescrito por cada tema */ --color-brand: #246b43; --color-brand-strong: #164f31; --color-brand-soft: #e4f4ea; --sidebar-from: #0f3320; --sidebar-to: #1a5535; --focus-ring: rgba(36, 107, 67, .22); --color-brand-ghost: rgba(36, 107, 67, .07); /* Semânticas */ --color-danger: #b42318; --color-danger-soft: #fee4e2; --focus-ring-danger: rgba(180, 35, 24, .22); --color-warning: #b54708; --color-warning-soft: #fef0c7; --focus-ring-warning: rgba(181, 71, 8, .22); --color-success: #027a48; --color-success-soft: #dcfae6; /* Validação de campo — vermelho no tema claro, amarelo/âmbar no dark (ver html.dark abaixo). Não usar --color-danger direto em campo de formulário; usar sempre estas variáveis. */ --color-validation: var(--color-danger); --color-validation-soft: var(--color-danger-soft); --focus-ring-validation: var(--focus-ring-danger); /* Sombras */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .07); --shadow-md: 0 4px 14px rgba(0, 0, 0, .09); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .13); /* Raios */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; /* Espaçamentos (escala 4 px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* Estrutura */ --sidebar-width: 260px; --sidebar-collapsed-width: 72px; --topbar-height: 64px; /* Transições */ --transition: 140ms ease; --transition-slow: 220ms ease; } /* -------------------------------------------------------------------------- 3. TEMAS ALTERNATIVOS Aplicados via atributo data-theme no — 25 cores no total (a cor "green" é o padrão, definido em :root na seção 2 acima; as outras 24 têm um bloco :root[data-theme="x"] aqui). Lista completa em CLAUDE.md ("Sistema de temas") e em OpcoesDeTema (Features/Configuracoes/Index.razor, página onde o usuário escolhe a cor — a sidebar não tem mais seletor). Novo tema = novo bloco aqui + regra .theme-swatch[data-theme-value="x"] (seção 8) + item em OpcoesDeTema. -------------------------------------------------------------------------- */ :root[data-theme="blue"] { --color-brand: #1a56db; --color-brand-strong: #1241a3; --color-brand-soft: #dbeafe; --color-surface-strong: #eff6ff; --sidebar-from: #0f1f5c; --sidebar-to: #1a3ab8; --focus-ring: rgba(26, 86, 219, .22); --color-brand-ghost: rgba(26, 86, 219, .07); } :root[data-theme="violet"] { --color-brand: #7c3aed; --color-brand-strong: #5b21b6; --color-brand-soft: #ede9fe; --color-surface-strong: #f5f3ff; --sidebar-from: #2e1065; --sidebar-to: #5b21b6; --focus-ring: rgba(124, 58, 237, .22); --color-brand-ghost: rgba(124, 58, 237, .07); } :root[data-theme="slate"] { --color-brand: #475569; --color-brand-strong: #1e293b; --color-brand-soft: #f1f5f9; --color-surface-strong: #f8fafc; --sidebar-from: #0f172a; --sidebar-to: #1e293b; --focus-ring: rgba(71, 85, 105, .22); --color-brand-ghost: rgba(71, 85, 105, .07); } :root[data-theme="red"] { --color-brand: #dc2626; --color-brand-strong: #991b1b; --color-brand-soft: #fee2e2; --color-surface-strong: #fef2f2; --sidebar-from: #450a0a; --sidebar-to: #991b1b; --focus-ring: rgba(220, 38, 38, .22); --color-brand-ghost: rgba(220, 38, 38, .07); } :root[data-theme="orange"] { --color-brand: #ea580c; --color-brand-strong: #9a3412; --color-brand-soft: #ffedd5; --color-surface-strong: #fff7ed; --sidebar-from: #431407; --sidebar-to: #9a3412; --focus-ring: rgba(234, 88, 12, .22); --color-brand-ghost: rgba(234, 88, 12, .07); } :root[data-theme="teal"] { --color-brand: #0d9488; --color-brand-strong: #115e59; --color-brand-soft: #ccfbf1; --color-surface-strong: #f0fdfa; --sidebar-from: #042f2e; --sidebar-to: #115e59; --focus-ring: rgba(13, 148, 136, .22); --color-brand-ghost: rgba(13, 148, 136, .07); } :root[data-theme="indigo"] { --color-brand: #4f46e5; --color-brand-strong: #3730a3; --color-brand-soft: #e0e7ff; --color-surface-strong: #eef2ff; --sidebar-from: #1e1b4b; --sidebar-to: #3730a3; --focus-ring: rgba(79, 70, 229, .22); --color-brand-ghost: rgba(79, 70, 229, .07); } :root[data-theme="pink"] { --color-brand: #db2777; --color-brand-strong: #9d174d; --color-brand-soft: #fce7f3; --color-surface-strong: #fdf2f8; --sidebar-from: #500724; --sidebar-to: #9d174d; --focus-ring: rgba(219, 39, 119, .22); --color-brand-ghost: rgba(219, 39, 119, .07); } :root[data-theme="cyan"] { --color-brand: #0891b2; --color-brand-strong: #155e75; --color-brand-soft: #cffafe; --color-surface-strong: #ecfeff; --sidebar-from: #083344; --sidebar-to: #155e75; --focus-ring: rgba(8, 145, 178, .22); --color-brand-ghost: rgba(8, 145, 178, .07); } :root[data-theme="amber"] { --color-brand: #d97706; --color-brand-strong: #92400e; --color-brand-soft: #fef3c7; --color-surface-strong: #fffbeb; --sidebar-from: #451a03; --sidebar-to: #92400e; --focus-ring: rgba(217, 119, 6, .22); --color-brand-ghost: rgba(217, 119, 6, .07); } :root[data-theme="yellow"] { --color-brand: #ca8a04; --color-brand-strong: #854d0e; --color-brand-soft: #fef9c3; --color-surface-strong: #fefce8; --sidebar-from: #422006; --sidebar-to: #854d0e; --focus-ring: rgba(202, 138, 4, .22); --color-brand-ghost: rgba(202, 138, 4, .07); } :root[data-theme="lime"] { --color-brand: #65a30d; --color-brand-strong: #3f6212; --color-brand-soft: #ecfccb; --color-surface-strong: #f7fee7; --sidebar-from: #1a2e05; --sidebar-to: #3f6212; --focus-ring: rgba(101, 163, 13, .22); --color-brand-ghost: rgba(101, 163, 13, .07); } :root[data-theme="emerald"] { --color-brand: #059669; --color-brand-strong: #065f46; --color-brand-soft: #d1fae5; --color-surface-strong: #ecfdf5; --sidebar-from: #022c22; --sidebar-to: #065f46; --focus-ring: rgba(5, 150, 105, .22); --color-brand-ghost: rgba(5, 150, 105, .07); } :root[data-theme="sky"] { --color-brand: #0284c7; --color-brand-strong: #075985; --color-brand-soft: #e0f2fe; --color-surface-strong: #f0f9ff; --sidebar-from: #082f49; --sidebar-to: #075985; --focus-ring: rgba(2, 132, 199, .22); --color-brand-ghost: rgba(2, 132, 199, .07); } :root[data-theme="purple"] { --color-brand: #9333ea; --color-brand-strong: #6b21a8; --color-brand-soft: #f3e8ff; --color-surface-strong: #faf5ff; --sidebar-from: #3b0764; --sidebar-to: #6b21a8; --focus-ring: rgba(147, 51, 234, .22); --color-brand-ghost: rgba(147, 51, 234, .07); } :root[data-theme="fuchsia"] { --color-brand: #c026d3; --color-brand-strong: #86198f; --color-brand-soft: #fae8ff; --color-surface-strong: #fdf4ff; --sidebar-from: #4a044e; --sidebar-to: #86198f; --focus-ring: rgba(192, 38, 211, .22); --color-brand-ghost: rgba(192, 38, 211, .07); } :root[data-theme="rose"] { --color-brand: #e11d48; --color-brand-strong: #9f1239; --color-brand-soft: #ffe4e6; --color-surface-strong: #fff1f2; --sidebar-from: #4c0519; --sidebar-to: #9f1239; --focus-ring: rgba(225, 29, 72, .22); --color-brand-ghost: rgba(225, 29, 72, .07); } :root[data-theme="gray"] { --color-brand: #4b5563; --color-brand-strong: #1f2937; --color-brand-soft: #f3f4f6; --color-surface-strong: #f9fafb; --sidebar-from: #030712; --sidebar-to: #1f2937; --focus-ring: rgba(75, 85, 99, .22); --color-brand-ghost: rgba(75, 85, 99, .07); } :root[data-theme="zinc"] { --color-brand: #52525b; --color-brand-strong: #27272a; --color-brand-soft: #f4f4f5; --color-surface-strong: #fafafa; --sidebar-from: #09090b; --sidebar-to: #27272a; --focus-ring: rgba(82, 82, 91, .22); --color-brand-ghost: rgba(82, 82, 91, .07); } :root[data-theme="stone"] { --color-brand: #57534e; --color-brand-strong: #292524; --color-brand-soft: #f5f5f4; --color-surface-strong: #fafaf9; --sidebar-from: #0c0a09; --sidebar-to: #292524; --focus-ring: rgba(87, 83, 78, .22); --color-brand-ghost: rgba(87, 83, 78, .07); } :root[data-theme="brown"] { --color-brand: #795548; --color-brand-strong: #4e342e; --color-brand-soft: #d7ccc8; --color-surface-strong: #efebe9; --sidebar-from: #3e2723; --sidebar-to: #4e342e; --focus-ring: rgba(121, 85, 72, .22); --color-brand-ghost: rgba(121, 85, 72, .07); } :root[data-theme="navy"] { --color-brand: #1e40af; --color-brand-strong: #1e3a8a; --color-brand-soft: #dbeafe; --color-surface-strong: #eff6ff; --sidebar-from: #172554; --sidebar-to: #1e3a8a; --focus-ring: rgba(30, 64, 175, .22); --color-brand-ghost: rgba(30, 64, 175, .07); } :root[data-theme="maroon"] { --color-brand: #7f1d1d; --color-brand-strong: #450a0a; --color-brand-soft: #fee2e2; --color-surface-strong: #fef2f2; --sidebar-from: #2a0505; --sidebar-to: #450a0a; --focus-ring: rgba(127, 29, 29, .22); --color-brand-ghost: rgba(127, 29, 29, .07); } :root[data-theme="olive"] { --color-brand: #556b2f; --color-brand-strong: #3d4d21; --color-brand-soft: #e6ecd6; --color-surface-strong: #f4f7ec; --sidebar-from: #2b3517; --sidebar-to: #3d4d21; --focus-ring: rgba(85, 107, 47, .22); --color-brand-ghost: rgba(85, 107, 47, .07); } /* -------------------------------------------------------------------------- 4. DARK MODE Aplicado via Seletor usa :root.dark (não html.dark ) de propósito: precisa empatar em especificidade com :root[data-theme="..."] (blue/violet/slate) e vencer no desempate por ordem de declaração — com html.dark (specificidade menor que a do seletor de atributo do tema) essas cores claras dos temas vazavam por cima do dark mode, deixando botões/hovers "brancos" no dark. -------------------------------------------------------------------------- */ :root.dark { --color-bg: #111827; --color-surface: #1f2937; --color-surface-strong: #374151; --color-text: #f9fafb; --color-text-muted: #9ca3af; --color-border: #374151; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --shadow-md: 0 4px 14px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .65); /* Validação de campo vira amarelo/âmbar no dark — vermelho puro rende menos legível/contrastante sobre os fundos escuros do que sobre os claros. --color-danger continua vermelho em qualquer tema (botões, badges, alertas de exclusão etc. não mudam). */ --color-validation: var(--color-warning); --color-validation-soft: var(--color-warning-soft); --focus-ring-validation: var(--focus-ring-warning); } /* -------------------------------------------------------------------------- 5. BASE RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.6; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 .25em; line-height: 1.15; font-weight: 800; } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; } h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { outline: none; } p { margin: 0 0 .75em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } /* -------------------------------------------------------------------------- 6. OVERLAY — sidebar mobile -------------------------------------------------------------------------- */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .52); z-index: 40; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn 200ms ease; } .overlay--open { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* -------------------------------------------------------------------------- 7. LAYOUT — App Shell Flex em vez de grid: permite transição suave da sidebar. -------------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-content { flex: 1; padding: var(--sp-6); } /* -------------------------------------------------------------------------- 8. SIDEBAR -------------------------------------------------------------------------- */ .sidebar { flex-shrink: 0; width: var(--sidebar-width); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: var(--sp-5); background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%); color: #fff; overflow: hidden; transition: width var(--transition-slow); z-index: 30; } /* Marca / brand */ .brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255, 255, 255, .12); flex-shrink: 0; overflow: hidden; } /* Logo da entidade (wwwroot/images/logo.png) — já traz o nome desenhado, por isso substitui o antigo quadrado "GD" + wordmark "Gerenciador/Documentos" por inteiro, em vez de ficar ao lado do texto. max-height + max-width (com width/height:auto) escala a logo proporcionalmente sem distorcer. Duas variantes: a logo larga (.brand-logo-expandida) some quando a sidebar colapsa (não cabe em --sidebar-collapsed-width) e dá lugar ao símbolo do sol (.brand-logo-colapsada, wwwroot/images/sol.png), que é quadrado e continua legível nos 72px de largura. */ .brand-logo { max-height: 32px; max-width: 100%; width: auto; height: auto; object-fit: contain; } .brand-logo-colapsada { display: none; } html.sidebar-collapsed .brand-logo-expandida { display: none; } html.sidebar-collapsed .brand-logo-colapsada { display: block; margin: 0 auto; } .sidebar-close { display: none; flex-shrink: 0; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 0; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); cursor: pointer; transition: background var(--transition); margin-left: auto; padding: 0; } .sidebar-close:hover { background: rgba(255, 255, 255, .22); } .sidebar-close .material-symbols-rounded { font-size: 18px; line-height: 1; } /* Rodapé da sidebar */ .sidebar-footer { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .10); display: flex; flex-direction: column; gap: var(--sp-2); flex-shrink: 0; overflow: hidden; } /* Swatch de cor de tema — decorativo, usado dentro de .theme-option (Features/Configuracoes/Index.razor). O clique fica no .theme-option pai; o swatch só existe para mostrar a cor (ver seção 27. CONFIGURAÇÕES). */ .theme-swatch { width: 20px; height: 20px; border-radius: var(--radius-full); border: 2px solid rgba(0, 0, 0, .08); flex-shrink: 0; } .theme-swatch[data-theme-value="green"] { background: #246b43; } .theme-swatch[data-theme-value="blue"] { background: #1a56db; } .theme-swatch[data-theme-value="violet"] { background: #7c3aed; } .theme-swatch[data-theme-value="slate"] { background: #475569; } .theme-swatch[data-theme-value="red"] { background: #dc2626; } .theme-swatch[data-theme-value="orange"] { background: #ea580c; } .theme-swatch[data-theme-value="teal"] { background: #0d9488; } .theme-swatch[data-theme-value="indigo"] { background: #4f46e5; } .theme-swatch[data-theme-value="pink"] { background: #db2777; } .theme-swatch[data-theme-value="cyan"] { background: #0891b2; } .theme-swatch[data-theme-value="amber"] { background: #d97706; } .theme-swatch[data-theme-value="yellow"] { background: #ca8a04; } .theme-swatch[data-theme-value="lime"] { background: #65a30d; } .theme-swatch[data-theme-value="emerald"]{ background: #059669; } .theme-swatch[data-theme-value="sky"] { background: #0284c7; } .theme-swatch[data-theme-value="purple"] { background: #9333ea; } .theme-swatch[data-theme-value="fuchsia"]{ background: #c026d3; } .theme-swatch[data-theme-value="rose"] { background: #e11d48; } .theme-swatch[data-theme-value="gray"] { background: #4b5563; } .theme-swatch[data-theme-value="zinc"] { background: #52525b; } .theme-swatch[data-theme-value="stone"] { background: #57534e; } .theme-swatch[data-theme-value="brown"] { background: #795548; } .theme-swatch[data-theme-value="navy"] { background: #1e40af; } .theme-swatch[data-theme-value="maroon"] { background: #7f1d1d; } .theme-swatch[data-theme-value="olive"] { background: #556b2f; } /* -------------------------------------------------------------------------- 9. SIDEBAR COLAPSADA Controlada via html.sidebar-collapsed (JS grava em localStorage) -------------------------------------------------------------------------- */ html.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); padding-left: var(--sp-3); padding-right: var(--sp-3); } html.sidebar-collapsed .nav-link-label, html.sidebar-collapsed .nav-section-label { display: none; } html.sidebar-collapsed .nav-link { justify-content: center; padding: 10px; gap: 0; } html.sidebar-collapsed .brand { justify-content: center; padding-bottom: var(--sp-3); } html.sidebar-collapsed .sidebar-close { display: none !important; } /* -------------------------------------------------------------------------- 10. SIDEBAR MOBILE (drawer) -------------------------------------------------------------------------- */ @media (max-width: 767px) { .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: var(--sidebar-width) !important; transform: translateX(-110%); transition: transform var(--transition-slow); z-index: 50; } .sidebar--open { transform: translateX(0); } .sidebar-close { display: flex !important; } } /* -------------------------------------------------------------------------- 11. NAVEGAÇÃO -------------------------------------------------------------------------- */ .nav-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .nav-menu::-webkit-scrollbar { display: none; } .nav-section-label { display: block; padding: var(--sp-3) var(--sp-2) var(--sp-1); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .38); white-space: nowrap; } .nav-link { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--radius-md); color: rgba(255, 255, 255, .68); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background var(--transition), color var(--transition); text-decoration: none; } .nav-link .material-symbols-rounded { font-size: 20px; flex-shrink: 0; line-height: 1; } .nav-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-link:hover { background: rgba(255, 255, 255, .10); color: #fff; } .nav-link.active { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset; } .nav-link-danger { justify-content: center; background: rgba(255, 90, 90, .10); border: 1px solid rgba(255, 90, 90, .22); color: rgba(255, 140, 140, .92); } .nav-link-danger:hover { background: rgba(255, 60, 60, .18); border-color: rgba(255, 90, 90, .4); color: #fff; } /* -------------------------------------------------------------------------- 12. TOPBAR -------------------------------------------------------------------------- */ .topbar { height: var(--topbar-height); flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6); border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, .88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 10; } html.dark .topbar { background: rgba(31, 41, 55, .92); } .topbar-left { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex-shrink: 0; } /* -------------------------------------------------------------------------- 13. SEARCHBOX -------------------------------------------------------------------------- */ .searchbox { display: flex; align-items: center; gap: var(--sp-2); flex: 1; max-width: 380px; height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-strong); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .searchbox:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--color-surface); } .searchbox .material-symbols-rounded { font-size: 18px; color: var(--color-text-muted); flex-shrink: 0; line-height: 1; } .searchbox input { flex: 1; border: 0; outline: none; background: transparent; font-size: 14px; min-width: 0; } .searchbox input::placeholder { color: var(--color-text-muted); opacity: .8; } /* -------------------------------------------------------------------------- 14. ICON BUTTON -------------------------------------------------------------------------- */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; position: relative; transition: background var(--transition), color var(--transition); padding: 0; } .btn-icon:hover { background: var(--color-surface-strong); color: var(--color-text); } .btn-icon:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* Ícone desabilitado (ex.: ação "Documentos" ainda não disponível em Features/Eventos/Detalhes.razor) — sem isso o botão fica com a mesma aparência de um ativo, mas não reage ao clique, o que é confuso. pointer-events:none também anula o :hover (evita ter que sobrescrever background/color de cada variante de botão desabilitada). */ .btn-icon:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } .btn-icon .material-symbols-rounded { font-size: 22px; line-height: 1; } .btn-icon-dot::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-danger); border: 2px solid var(--color-surface); } /* -------------------------------------------------------------------------- 15. USER MENU -------------------------------------------------------------------------- */ .user-menu { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition); max-width: 220px; } .user-menu:hover { background: var(--color-surface-strong); } .user-avatar { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-brand-soft); color: var(--color-brand-strong); font-weight: 800; font-size: 12px; } .user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; overflow: hidden; } .user-meta strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-meta span { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-chevron { font-size: 18px; color: var(--color-text-muted); flex-shrink: 0; } /* -------------------------------------------------------------------------- 16. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none; box-shadow: var(--shadow-sm); transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .btn:hover { box-shadow: var(--shadow-md); } .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* Botão desabilitado (ex.: "Ações rápidas" ainda não implementadas em Features/Eventos/Detalhes.razor) — pointer-events:none anula o :hover de qualquer variante (.btn-primary/.btn-ghost/.btn-danger) sem precisar de uma regra por variante. */ .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--color-brand); color: #fff; } .btn-primary:hover { background: var(--color-brand-strong); } .btn-ghost { background: var(--color-surface-strong); color: var(--color-brand-strong); } .btn-ghost:hover { background: var(--color-border); } html.dark .btn-ghost { color: var(--color-text); } .btn-danger { background: var(--color-danger-soft); color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger); color: #fff; } .btn-block { width: 100%; } .btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: 13px; } .btn-lg { min-height: 48px; padding: 0 var(--sp-6); font-size: 16px; } /* -------------------------------------------------------------------------- 17. FORMS -------------------------------------------------------------------------- */ .form-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .form-field { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: 14px; font-weight: 600; color: var(--color-text); } .form-input { width: 100%; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--focus-ring); } .form-input::placeholder { color: var(--color-text-muted); opacity: .7; } .form-hint { font-size: 12px; color: var(--color-text-muted); } .autocomplete { position: relative; } .autocomplete-list { position: absolute; z-index: 10; top: calc(100% + var(--sp-1)); left: 0; right: 0; max-height: 220px; overflow-y: auto; margin: 0; padding: var(--sp-1); list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .autocomplete-item { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: 14px; text-align: left; cursor: pointer; } .autocomplete-item:hover, .autocomplete-item:focus-visible { background: var(--color-surface-strong); outline: none; } .check-row { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; } .check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-brand); cursor: pointer; flex-shrink: 0; } .check-row span { font-size: 14px; color: var(--color-text-muted); } .form-input-sm { min-height: 34px; padding: 0 var(--sp-2); font-size: 13px; width: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-input-sm:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--focus-ring); } select.form-input, select.form-input-sm { appearance: auto; cursor: pointer; padding-right: var(--sp-4); } /* align-items: start evita que um .form-field seja esticado pra altura da linha inteira do grid — sem isso, dentro de .tab-panels (onde os painéis ficam empilhados na mesma célula e a linha é dimensionada pelo maior painel), um .form-field.autocomplete mais curto que o painel fica mais alto por dentro, e o dropdown (position:absolute, top:100% relativo à altura do .form-field) acaba aparecendo bem abaixo do input em vez de colado nele. */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sp-4); } .form-field.span-2 { grid-column: 1 / -1; } /* Só ocupa a linha inteira no mobile — em telas maiores entra no fluxo normal de 2 colunas do .form-grid (reduz a altura da modal em telas HD). */ .form-field.span-2-mobile { grid-column: auto; } .form-input.invalid, .form-input.modified.invalid, select.form-input.invalid { border-color: var(--color-validation); background: var(--color-validation-soft); color: var(--color-validation); } .form-input.invalid:focus { border-color: var(--color-validation); box-shadow: 0 0 0 3px var(--focus-ring-validation); } .validation-message { display: block; font-size: 12px; color: var(--color-validation); } /* -------------------------------------------------------------------------- 18. CARDS -------------------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .card-body { padding: var(--sp-5); } .card-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border); font-weight: 700; } .page-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-5); } /* Espaçamento entre .page-card empilhados fora de .content-grid. */ .page-card + .page-card { margin-top: var(--sp-4); } /* Mesmo espaçamento quando um .page-card é seguido de um .content-grid. */ .page-card + .content-grid { margin-top: var(--sp-4); } /* Mesmo espaçamento quando um .page-card é seguido de um grid de gráficos. */ .page-card + .chart-grid { margin-top: var(--sp-4); } .page-card.narrow { max-width: 720px; } .kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-5); } .kpi-card > span, .kpi-card-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-muted); } .kpi-card > strong, .kpi-card-value { display: block; font-size: 34px; font-weight: 800; line-height: 1.1; margin: var(--sp-2) 0 var(--sp-1); color: var(--color-brand); } .kpi-card > small, .kpi-card-sub { display: block; font-size: 12px; color: var(--color-text-muted); } /* Variante de .kpi-card-value pra texto (datas, nomes) em vez de número curto — 34px/800 fica largo/estoura num card pequeno com texto longo. Seletor precisa de ".kpi-card >" (não só a classe) pra ganhar de ".kpi-card > span" em especificidade, senão o span cai na regra do label (13px) por engano. */ .kpi-card > .kpi-card-value-text { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; margin: var(--sp-2) 0 var(--sp-1); color: var(--color-brand); } /* Lista de definição (rótulo + valor) pra dados completos dentro de um .page-card (ex.: "Informações do evento" em Features/Eventos/Detalhes.razor). */ .detail-list { display: grid; grid-template-columns: 180px 1fr; row-gap: var(--sp-3); column-gap: var(--sp-4); margin: var(--sp-4) 0 0; } .detail-list dt { font-size: 13px; font-weight: 600; color: var(--color-text-muted); } .detail-list dd { margin: 0; font-size: 14px; color: var(--color-text); } /* Estado vazio dentro de um .page-card, pra seções ainda sem dado real (ex.: "Participantes"/"Documentos" em Features/Eventos/Detalhes.razor). */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); text-align: center; } .empty-state .material-symbols-rounded { font-size: 36px; color: var(--color-text-muted); opacity: .6; } .empty-state-title { font-size: 14px; font-weight: 700; color: var(--color-text); } .empty-state-description { max-width: 320px; font-size: 13px; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 19. BADGES -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; line-height: 1.5; background: var(--color-brand-soft); color: var(--color-brand-strong); } .badge.success, .badge-success { background: var(--color-success-soft); color: var(--color-success); } .badge.warning, .badge-warning { background: var(--color-warning-soft); color: var(--color-warning); } .badge.danger, .badge-danger { background: var(--color-danger-soft); color: var(--color-danger); } /* -------------------------------------------------------------------------- 20. ALERTAS -------------------------------------------------------------------------- */ .alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; margin-bottom: var(--sp-4); } .alert-danger { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid rgba(180, 35, 24, .18); } .alert-success { background: var(--color-success-soft); color: var(--color-success); border: 1px solid rgba(2, 122, 72, .18); } .alert-warning { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid rgba(181, 71, 8, .18); } /* -------------------------------------------------------------------------- 21. TABELAS -------------------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14px; } .table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); } .table tbody tr:hover { background: var(--color-brand-ghost); } .table .btn-icon { width: 22px; height: 22px; } .table .btn-icon .material-symbols-rounded { font-size: 16px; } /* Agrupa múltiplos .btn-icon numa mesma célula "Ações" (ex.: Ver detalhes + Editar em Features/Eventos/Index.razor) — evita depender de espaço em branco incidental do HTML pra dar espaçamento entre os botões. */ .table-actions { display: flex; align-items: center; gap: var(--sp-1); } /* Célula de tabela com título em destaque + linha secundária discreta (ex.: Título/Tema em Features/Eventos/Index.razor). O texto já chega truncado por código (com "..."), então aqui é só o empilhamento visual. */ .table-cell-primary { display: block; font-weight: 700; color: var(--color-text); } .table-cell-secondary { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-muted); } .table-loading { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--color-text-muted); font-size: 14px; } .table-empty { padding: var(--sp-8) var(--sp-4) !important; text-align: center; color: var(--color-text-muted); font-size: 14px; } /* -------------------------------------------------------------------------- 22. PAGE HEADER -------------------------------------------------------------------------- */ .page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); } .page-header h1 { font-size: 20px; font-weight: 800; line-height: 1.2; margin: 0; } .page-header p { font-size: 13px; color: var(--color-text-muted); margin: 2px 0 0; } .eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--sp-1); } .task-list { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); color: var(--color-text-muted); font-size: 14px; } .task-list li + li { margin-top: var(--sp-2); } /* -------------------------------------------------------------------------- 23. GRIDS DE CONTEÚDO -------------------------------------------------------------------------- */ .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); } .content-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: var(--sp-4); } /* -------------------------------------------------------------------------- 24. LOGIN -------------------------------------------------------------------------- */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); background: radial-gradient(ellipse at top left, var(--color-brand-soft) 0%, transparent 55%), radial-gradient(ellipse at bottom right, var(--color-brand-soft) 0%, transparent 55%), var(--color-bg); } .login-card { width: min(100%, 440px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-8); } .login-brand { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--color-border); } /* Logo da entidade (wwwroot/images/logo.png) — já traz o nome desenhado, por isso substitui o antigo quadrado "GD" + textos "Gerenciador de Documentos"/"Sistema Web" por inteiro. Mesma técnica de escala proporcional de .brand-logo (Sidebar), só com altura máxima maior (mais espaço aqui). */ .login-brand-logo { max-height: 44px; max-width: 100%; width: auto; height: auto; object-fit: contain; } .login-title { font-size: 22px; font-weight: 800; margin: 0 0 var(--sp-1); } .login-subtitle { font-size: 14px; color: var(--color-text-muted); margin: 0 0 var(--sp-5); } /* -------------------------------------------------------------------------- 25. TABLE TOOLBAR & PAGINAÇÃO -------------------------------------------------------------------------- */ .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .table-filters { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .table-search-input { min-width: 220px; } .page-size-selector { display: flex; align-items: center; gap: var(--sp-2); } .page-size-selector .form-label { margin: 0; white-space: nowrap; font-size: 13px; } .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); } .pagination-info { font-size: 13px; color: var(--color-text-muted); } .pagination-controls { display: flex; align-items: center; gap: var(--sp-2); } .pagination-page { min-width: 56px; text-align: center; font-size: 13px; font-weight: 600; } /* -------------------------------------------------------------------------- 26. UTILITÁRIOS -------------------------------------------------------------------------- */ .text-muted { color: var(--color-text-muted); } .text-brand { color: var(--color-brand); } .text-danger { color: var(--color-danger); } .fw-medium { font-weight: 500; } .fw-bold { font-weight: 700; } .fw-black { font-weight: 800; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .d-none { display: none; } /* -------------------------------------------------------------------------- 27. CONFIGURAÇÕES (tema + switch) Cartões de cor e switch usados em Features/Configuracoes/Index.razor. -------------------------------------------------------------------------- */ .theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); } .theme-option { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .theme-option:hover { border-color: var(--color-brand); background: var(--color-surface-strong); } .theme-option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .theme-option[aria-checked="true"] { border-color: var(--color-brand); background: var(--color-brand-soft); box-shadow: 0 0 0 1px var(--color-brand) inset; } .theme-option .theme-swatch { width: 28px; height: 28px; pointer-events: none; } .theme-option-label { font-size: 12px; font-weight: 600; color: var(--color-text); text-align: center; } /* Switch (toggle) — preferências booleanas, ex.: menu lateral retraído */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; cursor: pointer; } .switch-row-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); } .switch-row-text small { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .switch { position: relative; display: inline-flex; flex-shrink: 0; width: 44px; height: 26px; } .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } .switch-track { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-border); transition: background var(--transition); } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition); } .switch input:checked ~ .switch-track { background: var(--color-brand); } .switch input:checked ~ .switch-track .switch-thumb { transform: translateX(18px); } .switch input:focus-visible ~ .switch-track { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* -------------------------------------------------------------------------- 28. MODAL Padrão oficial para telas de cadastro/edição rápida — não criar páginas cheias para isso. Ver CLAUDE.md > "Padrão de modal" e a implementação de referência em Features/Usuarios/NovoUsuarioModal.razor. -------------------------------------------------------------------------- */ .modal-wrapper { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .modal { width: min(100%, 520px); max-height: calc(100vh - var(--sp-8)); display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: modalIn var(--transition-slow); } /* O
do EditForm embrulha .modal-body + .modal-footer — sem isso ele vira um único bloco de altura livre dentro do .modal (flex column) e o .modal-body nunca fica realmente "constrangido" o bastante pra rolar, empurrando o footer (com os botões) pra fora da área visível, sobretudo no mobile. Com isso o form também vira flex column, só o body cresce/rola e o footer some. */ .modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Modal larga — formulários com muitos campos (ex.: NovoUsuarioModal). Em telas HD (prioridade do layout, ~1333px) dá pra abrir mão da altura e usar 2 colunas de verdade (nenhum campo em .span-2), o form fica bem mais baixo. */ .modal-lg { width: min(100%, 680px); } /* Modal larga+ — mesmo caso de uso de .modal-lg (formulário denso sem abas), mas quando 680px ainda deixa os campos apertados (ex.: NovoEventoModal, com Título/Tema ocupando as 2 colunas inteiras). Não é o mesmo motivo de .modal-xl (que existe pra compensar a barra de abas lateral) — por isso é uma classe própria, não a reaproveita. Usar no lugar de .modal-lg (não junto), mesma regra de combinação de .modal-xl. */ .modal-lg-wide { width: min(100%, 760px); } /* Modal extra larga — formulários com abas (.modal-tabs na lateral, ver abaixo). A barra de abas fica à esquerda do .modal-body só nela, então precisa de mais largura que .modal-lg pra sobrar espaço de verdade pro .form-grid de 2 colunas ao lado da barra. Usar no lugar de .modal-lg (não junto) — ver Features/Eventos/CadastroParticipante.razor. */ .modal-xl { width: min(100%, 860px); } /* Modal cheia — visualizador de documento (informações + preview do PDF lado a lado, ver .document-viewer-body abaixo). Usar só quando a modal precisa aproveitar boa parte da largura/altura da tela, não é o padrão comum de cadastro/edição — ver Features/Documentos/VisualizarArquivoModal.razor. */ .modal-full { width: min(96vw, 1400px); height: min(88vh, 880px); } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .modal-title { font-size: 18px; font-weight: 800; margin: 0; } .modal-subtitle { font-size: 13px; color: var(--color-text-muted); margin: var(--sp-1) 0 0; } /* Abas laterais dentro de uma modal — usar quando o formulário tem campos demais pra caber confortavelmente numa rolagem só (ver CLAUDE.md > "Padrão de modal": "se a modal continuar muito alta, o próximo recurso é dividir em etapas/abas"). .modal-columns é o wrapper que embrulha .modal-tabs + .modal-body lado a lado (fica entre .modal-header e .modal-footer, os dois fora do wrapper); só .modal-body rola, a barra de abas fica fixa. Cada painel de campos é um .form-grid normal dentro de .tab-panels, alternando .tab-panel-hidden (ver essa classe mais abaixo — mantém todo campo sempre no DOM e a altura da modal constante entre abas) — assim a validação do formulário inteiro continua funcionando mesmo numa aba escondida (ver CadastroParticipante.razor, troca automática pra aba com erro em OnInvalidSubmit). No mobile a barra volta a ficar horizontal em cima (ver media query no fim do arquivo) — largura é o recurso escasso ali, não altura. */ .modal-columns { display: flex; flex: 1 1 auto; min-height: 0; } .modal-tabs { display: flex; flex-direction: column; gap: var(--sp-1); width: 176px; flex-shrink: 0; padding: var(--sp-4) var(--sp-3); border-right: 1px solid var(--color-border); overflow-y: auto; } .modal-tab { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-left: 2px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color var(--transition), background-color var(--transition), border-color var(--transition); } .modal-tab:hover { color: var(--color-text); background: var(--color-surface-strong); } .modal-tab.active { color: var(--color-brand); background: var(--color-brand-soft); border-left-color: var(--color-brand); } .modal-tab .material-symbols-rounded { font-size: 18px; } .modal-tab:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .modal-body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; } /* Empilha os painéis de uma modal com abas na mesma célula de grid — a .modal (e por consequência o .modal-body) precisa manter sempre a mesma altura ao trocar de aba, mesmo abas com quantidades de campo bem diferentes (ex.: Endereço tem 1 campo, Dados pessoais tem 7). Com todos os painéis na mesma célula, a linha do grid é dimensionada pelo maior painel o tempo todo, então a altura não pula ao trocar de aba. Por isso o painel oculto usa .tab-panel-hidden (visibility:hidden — some da tela mas continua ocupando espaço/participando do cálculo de altura), nunca .d-none (display:none tiraria o painel do cálculo e a altura voltaria a variar por aba). */ .tab-panels { display: grid; grid-template-columns: minmax(0, 1fr); } .tab-panels > .form-grid { grid-column: 1; grid-row: 1; } .tab-panel-hidden { visibility: hidden; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); border-top: 1px solid var(--color-border); flex-shrink: 0; } /* Corpo do visualizador de documento — informações (esquerda) + preview do PDF (direita) lado a lado, ver Features/Documentos/VisualizarArquivoModal.razor. Substitui o .modal-body padrão (que teria padding único pra tudo): aqui cada coluna cuida do próprio padding pra o preview poder ocupar a área inteira, sem margem em volta do PDF. */ .document-viewer-body { display: flex; flex: 1 1 auto; min-height: 0; } .document-viewer-info { flex: 0 0 380px; padding: var(--sp-5); overflow-y: auto; border-right: 1px solid var(--color-border); } .document-viewer-info .detail-list { grid-template-columns: 1fr; row-gap: var(--sp-1); margin-top: 0; } .document-viewer-info .detail-list dd { margin-bottom: var(--sp-3); } .document-viewer-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; background: var(--color-surface-strong); } /* .empty-state, sozinho, só centraliza o próprio conteúdo — não a si mesmo dentro do pai. Aqui (nenhum documento selecionado ainda em DocumentosParticipanteModal) ele precisa esticar pra ocupar a coluna de preview inteira, senão fica colado no topo em vez de centralizado. */ .document-viewer-preview .empty-state { flex: 1 1 auto; } /* Visualizador de PDF via PDF.js (ver Components/Shared/PdfViewer.razor e wwwroot/js/pdf-viewer.js) — renderiza cada página num criado pelo JS dentro de .pdf-viewer-canvas-wrap. Usado dentro de .document-viewer-preview, mas genérico o bastante pra qualquer outro lugar que precise mostrar um PDF. */ .pdf-viewer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; } /* Envolve o container que o JS manipula direto (.pdf-viewer-canvas-wrap) — fica relative pra .pdf-viewer-loading poder se posicionar por cima via absolute, sem entrar como filho Blazor daquele container (o JS já controla o innerHTML dele; misturar os dois causaria conflito de DOM). */ .pdf-viewer-canvas-area { position: relative; flex: 1 1 auto; min-height: 0; display: flex; } .pdf-viewer-canvas-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; padding: var(--sp-4); } .pdf-viewer-canvas-wrap canvas { max-width: 100%; height: auto; box-shadow: var(--shadow-md); } .pdf-viewer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--color-surface-strong); } .pdf-viewer-loading .material-symbols-rounded { font-size: 36px; color: var(--color-text-muted); opacity: .6; } .pdf-viewer-loading-text { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text-muted); } /* Barra de progresso genérica (`` nativo) — usada no preview de PDF (download) e no modal de envio via FTP (upload). Nunca usar `style` inline pra largura da barra em si; `` já resolve isso via atributo `value`, só o container (largura/altura/cor) é CSS. */ .progress-bar { width: 220px; height: 6px; accent-color: var(--color-brand); } .pdf-viewer-empty { flex: 1 1 auto; min-height: 0; } .pdf-viewer-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-3); border-top: 1px solid var(--color-border); flex-shrink: 0; } .pdf-viewer-page { min-width: 120px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-align: center; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* -------------------------------------------------------------------------- 29. RESPONSIVO -------------------------------------------------------------------------- */ /* Notebook HD — 1333 × 760 */ @media (max-width: 1440px) { :root { --sidebar-width: 248px; --topbar-height: 60px; } .app-content { padding: var(--sp-5); } .kpi-grid { gap: var(--sp-3); } .searchbox { max-width: 300px; } } /* Tablet / notebook pequeno */ @media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid { grid-template-columns: 1fr; } .searchbox { max-width: 220px; } .user-meta { display: none; } .user-menu-chevron { display: none; } } /* Mobile */ @media (max-width: 767px) { :root { --topbar-height: 56px; } .app-content { padding: var(--sp-4); } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid { grid-template-columns: 1fr; } .detail-list { grid-template-columns: 1fr; row-gap: var(--sp-1); } .detail-list dd { margin-bottom: var(--sp-2); } .page-header { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .section-header { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .searchbox { display: none; } .table-toolbar { flex-direction: column; align-items: stretch; } .table-filters { flex-direction: column; align-items: stretch; } .table-search-input { min-width: 0; width: 100%; } .table { display: block; overflow-x: auto; } .pagination { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .user-meta { display: none; } .user-menu-chevron { display: none; } .login-card { padding: var(--sp-5); } /* Modal — mobile-first: manter 2 colunas nos campos curtos (não colapsar tudo pra 1 coluna, senão a modal fica bem mais alta no mobile do que no desktop) e reduzir os respiros verticais pra caber mais sem rolagem. */ .modal-wrapper { padding: var(--sp-3); } .modal { max-height: calc(100vh - var(--sp-6)); } .modal-header { padding: var(--sp-4) var(--sp-4) var(--sp-3); } .modal-body { padding: var(--sp-4); } .modal-footer { padding: var(--sp-3) var(--sp-4) var(--sp-4); } /* Abas: no mobile largura é o recurso escasso (não altura) — volta pra barra horizontal em cima do .modal-body, igual ao layout de desktop anterior a esta seção. */ .modal-columns { flex-direction: column; } .modal-tabs { flex-direction: row; width: auto; padding: 0 var(--sp-4); border-right: 0; border-bottom: 1px solid var(--color-border); overflow-x: auto; overflow-y: visible; } .modal-tab { width: auto; padding: var(--sp-3) var(--sp-2); border-left: 0; border-bottom: 2px solid transparent; } .modal-tab.active { border-bottom-color: var(--color-brand); } .form-field.span-2-mobile { grid-column: 1 / -1; } .form-grid { gap: var(--sp-3); } .form-stack { gap: var(--sp-3); } /* Visualizador de documento: no mobile largura também é escassa, então info e preview empilham (info primeiro, com altura limitada e rolagem própria) em vez de ficarem lado a lado. */ .modal-full { width: 100%; height: calc(100vh - var(--sp-6)); } .document-viewer-body { flex-direction: column; } .document-viewer-info { flex: 0 0 auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--color-border); } .document-viewer-preview { min-height: 280px; } } /* Mobile pequeno */ @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); } } /* -------------------------------------------------------------------------- 30. TABS DE PÁGINA Menu de abas horizontal no topo de uma seção inteira da página (diferente de .modal-tabs da seção 28, que é lateral e vive dentro de uma modal). Referência: Features/Eventos/Detalhes.razor (abas "Informações"/ "Participantes" logo abaixo do .kpi-grid) — cada aba troca qual .page-card aparece embaixo via @if simples (não precisa do truque de grid empilhado usado nas abas de modal, já que aqui é uma página normal com rolagem própria, não uma caixa de altura limitada). -------------------------------------------------------------------------- */ .page-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-4); overflow-x: auto; scrollbar-width: none; } .page-tabs::-webkit-scrollbar { display: none; } .page-tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--color-text-muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--transition), border-color var(--transition); } .page-tab:hover { color: var(--color-text); } .page-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); } .page-tab .material-symbols-rounded { font-size: 18px; } /* Título (h2) + ação lado a lado dentro de um .page-card — mesma ideia do .page-header da seção 22, só que para o cabeçalho de uma seção dentro de um card (ex.: "Participantes" + botão "Cadastrar participante"), não o h1 da página inteira. */ .section-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); } .section-header h2 { margin: 0; } /* Linha de botões de ação dentro de um .page-card (ex.: "Ações rápidas" na aba Informações de Features/Eventos/Detalhes.razor) — quebra pra próxima linha em telas estreitas em vez de espremer os botões. */ .quick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* -------------------------------------------------------------------------- 31. GRÁFICOS Gráfico de barras em SVG puro (sem lib JS), coordenadas calculadas em C# no code-behind — ver "### Gráfico de participantes por sexo e faixa etária" no CLAUDE.md. Cores sempre via var(--color-brand*)/--color-text- muted, nunca hex fixo, pra reagir ao tema de cor escolhido e ao dark mode automaticamente. Referência: Features/Eventos/Detalhes.razor. -------------------------------------------------------------------------- */ .chart-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } .chart-svg { display: block; width: 100%; max-width: 480px; height: auto; } .chart-svg text { font-family: inherit; } .chart-eixo-label { fill: var(--color-text); font-size: 11px; font-weight: 600; } .chart-eixo-label-sub { fill: var(--color-text-muted); font-size: 10px; font-weight: 400; } .chart-bar-valor { fill: var(--color-text); font-size: 11px; font-weight: 600; } .chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); } .chart-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--color-text-muted); } .chart-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-sm); } /* Cores das 3 séries (Homens/Mulheres/Não informado) — a mesma classe colore o preenchimento da barra (rect.chart-cor-x) e o quadradinho da legenda (.chart-legend-swatch.chart-cor-x), cada seletor pegando a propriedade certa pro tipo de elemento (fill vs background). */ rect.chart-cor-homens { fill: var(--color-brand-strong); } rect.chart-cor-mulheres { fill: var(--color-brand); } rect.chart-cor-neutro { fill: var(--color-text-muted); } .chart-legend-swatch.chart-cor-homens { background: var(--color-brand-strong); } .chart-legend-swatch.chart-cor-mulheres { background: var(--color-brand); } .chart-legend-swatch.chart-cor-neutro { background: var(--color-text-muted); } .chart-pie-svg { width: min(100%, 260px); height: auto; display: block; margin: 0 auto var(--sp-4); overflow: visible; } .chart-pie-track { fill: none; stroke: var(--color-surface-strong); stroke-width: 18; } .chart-pie-segment { fill: none; stroke-width: 18; stroke-linecap: round; transition: opacity var(--transition); } .chart-pie-segment:hover { opacity: .86; } .chart-pie-segment.chart-cor-homens { stroke: var(--color-brand); } .chart-pie-segment.chart-cor-mulheres { stroke: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-pie-total { fill: var(--color-text); font-size: 18px; font-weight: 800; } .chart-pie-caption { fill: var(--color-text-muted); font-size: 7px; font-weight: 600; text-transform: uppercase; } .chart-cor-homens { fill: var(--color-brand); } .chart-cor-mulheres { fill: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-cor-neutro { fill: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-brand)); } .chart-legend-swatch.chart-cor-homens { background: var(--color-brand); } .chart-legend-swatch.chart-cor-mulheres { background: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-legend-swatch.chart-cor-neutro { background: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-brand)); } .event-overview-card .detail-list { margin-bottom: var(--sp-5); } .event-overview-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: end; padding-top: var(--sp-4); border-top: 1px solid var(--color-border); } .event-overview-kpis { margin-bottom: 0; } .event-overview-actions { justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; } .event-charts-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); } .chart-donut-wrap { display: grid; place-items: center; padding: var(--sp-3) 0 var(--sp-4); } .chart-donut-svg { width: min(100%, 260px); height: auto; display: block; overflow: visible; } .chart-donut-track { fill: none; stroke: var(--color-surface-strong); stroke-width: 20; } .chart-donut-segment { fill: none; stroke-width: 20; stroke-linecap: butt; transition: opacity var(--transition); } .chart-donut-segment:hover { opacity: .86; } .chart-donut-segment.chart-cor-homens { stroke: var(--color-brand); } .chart-donut-segment.chart-cor-mulheres { stroke: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-donut-total { fill: var(--color-text); font-size: 20px; font-weight: 800; } .chart-donut-caption { fill: var(--color-text-muted); font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .chart-cor-homens { fill: var(--color-brand); } .chart-cor-mulheres { fill: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-cor-neutro { fill: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-brand)); } .chart-legend-swatch.chart-cor-homens { background: var(--color-brand); } .chart-legend-swatch.chart-cor-mulheres { background: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-legend-swatch.chart-cor-neutro { background: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-brand)); } @media (max-width: 1024px) { .event-overview-footer { grid-template-columns: 1fr; align-items: stretch; } .event-overview-actions { justify-content: flex-start; } .event-charts-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .event-overview-actions { flex-direction: column; align-items: stretch; } .event-overview-actions .btn { width: 100%; justify-content: flex-start; } } .event-overview-card { margin-bottom: var(--sp-4); } .event-overview-content { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--sp-5); align-items: start; } .event-overview-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; } .event-overview-list div { min-width: 0; } .event-overview-list dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); } .event-overview-list dd { margin: var(--sp-1) 0 0; color: var(--color-text); font-size: 14px; font-weight: 650; line-height: 1.35; } .event-overview-metric { padding: var(--sp-3); border-radius: var(--radius-md); background: var(--color-brand-ghost); } .event-overview-metric dt { color: var(--color-brand-strong); } .event-overview-metric dd { color: var(--color-brand); font-size: 22px; font-weight: 800; line-height: 1; } .event-overview-actions { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-5); border-left: 1px solid var(--color-border); } .event-overview-actions .btn { justify-content: flex-start; width: 100%; } .event-charts-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: stretch; } .event-charts-grid > .page-card { height: 100%; } .event-chart-card { display: flex; flex-direction: column; } .event-chart-body { flex: 1; display: flex; flex-direction: column; } .event-chart-body .chart-legend { margin-top: auto; } .chart-donut-wrap { flex: 1; display: grid; place-items: center; padding: var(--sp-3) 0 var(--sp-4); } .chart-donut-svg { width: min(100%, 260px); height: auto; display: block; overflow: visible; } .chart-donut-hole { fill: var(--color-surface); } .chart-donut-segment { transition: opacity var(--transition), filter var(--transition); } .chart-donut-segment:hover { opacity: .9; filter: brightness(.98); } .chart-donut-segment.chart-cor-homens, .chart-cor-homens { fill: var(--color-brand); } .chart-donut-segment.chart-cor-mulheres, .chart-cor-mulheres { fill: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-cor-neutro { fill: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-brand)); } .chart-donut-total { fill: var(--color-text); font-size: 20px; font-weight: 800; } .chart-donut-caption { fill: var(--color-text-muted); font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .chart-legend-swatch.chart-cor-homens { background: var(--color-brand); } .chart-legend-swatch.chart-cor-mulheres { background: color-mix(in srgb, var(--color-brand) 58%, #ffffff); } .chart-legend-swatch.chart-cor-neutro { background: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-brand)); } @media (max-width: 1024px) { .event-overview-content { grid-template-columns: 1fr; } .event-overview-actions { padding-left: 0; padding-top: var(--sp-4); border-left: 0; border-top: 1px solid var(--color-border); } .event-charts-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .event-overview-list { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- PAGE HEADER COMPONENT Cabeçalho padrão de páginas Blazor: título, subtítulo, badges, metadados e ações. -------------------------------------------------------------------------- */ .app-page-header { display: block; width: 100%; margin-bottom: var(--sp-5); } .app-page-header-main { width: 100%; min-width: 0; } .app-page-header-content-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); } .app-page-header-title-block { min-width: 0; flex: 1 1 auto; } .app-page-header-title-block h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--color-text); } .app-page-header-subtitle-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); } .app-page-header-subtitle-row p { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.35; } .app-page-header-badges { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .app-page-header-badges .badge { line-height: 1.3; } .app-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; } .app-page-header-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); color: var(--color-text-muted); font-size: 13px; } .app-page-header-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); } /* Mantém compatibilidade caso alguma página antiga ainda use VoltarUrl no PageHeader. Mas no novo padrão, o Voltar deve ir dentro de . */ .app-page-header-back { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-2); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; transition: background var(--transition), color var(--transition); } .app-page-header-back:hover { background: var(--color-surface-strong); color: var(--color-text); } .app-page-header-back:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .app-page-header-back .material-symbols-rounded { font-size: 20px; line-height: 1; } @media (max-width: 767px) { .app-page-header-content-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .app-page-header-actions { justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-left: 0; } .app-page-header-actions .btn { width: 100%; justify-content: flex-start; } } /* -------------------------------------------------------------------------- 31. AJUSTES FINAIS — PAGE HEADER, TABS E CHARTS DE EVENTO Mantido no final do arquivo para sobrescrever versões anteriores sem quebrar compatibilidade com telas já existentes. -------------------------------------------------------------------------- */ /* PageHeader reutilizável: título/subtítulo à esquerda e actions no canto direito. O botão "Voltar" deve ser usado dentro de , junto com as demais ações da página. */ .app-page-header { display: block; width: 100%; margin-bottom: var(--sp-5); } .app-page-header-main { width: 100%; min-width: 0; } .app-page-header-content-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); } .app-page-header-title-block { min-width: 0; flex: 1 1 auto; } .app-page-header-title-block h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--color-text); } .app-page-header-subtitle-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); } .app-page-header-subtitle-row p { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.35; } .app-page-header-badges { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .app-page-header-badges .badge { line-height: 1.3; } .app-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; } .app-page-header-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); color: var(--color-text-muted); font-size: 13px; } .app-page-header-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); } /* Compatibilidade para páginas que ainda renderizam VoltarUrl diretamente no PageHeader. No padrão novo, prefira colocar "Voltar" dentro de . */ .app-page-header-back { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-2); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; transition: background var(--transition), color var(--transition); } .app-page-header-back:hover { background: var(--color-surface-strong); color: var(--color-text); } .app-page-header-back:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .app-page-header-back .material-symbols-rounded { font-size: 20px; line-height: 1; } /* Tabs de página: permite rolagem horizontal quando necessário, mas impede o scrollbar vertical fino que estava aparecendo na tela de detalhes. */ .page-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .page-tabs::-webkit-scrollbar { display: none; } .page-tab { flex-shrink: 0; } /* Card de informações do evento. */ .event-overview-card { margin-bottom: var(--sp-4); } .event-overview-content { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--sp-5); align-items: start; } .event-overview-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; } .event-overview-list div { min-width: 0; } .event-overview-list dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); } .event-overview-list dd { margin: var(--sp-1) 0 0; color: var(--color-text); font-size: 14px; font-weight: 650; line-height: 1.35; } .event-overview-metric { padding: var(--sp-3); border-radius: var(--radius-md); background: var(--color-brand-ghost); } .event-overview-metric dt { color: var(--color-brand-strong); } .event-overview-metric dd { color: var(--color-brand); font-size: 22px; font-weight: 800; line-height: 1; } .event-overview-actions { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-5); border-left: 1px solid var(--color-border); } .event-overview-actions .btn { justify-content: flex-start; width: 100%; } /* -------------------------------------------------------------------------- CHARTS Componentes genéricos para gráficos com Chart.js. -------------------------------------------------------------------------- */ .chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; } .chart-grid-main-aside { grid-template-columns: minmax(0, 1.45fr) minmax(340px, .55fr); } .chart-grid > .chart-card { height: 100%; align-self: stretch; } .chart-card { display: flex; flex-direction: column; min-width: 0; min-height: 440px; } .chart-card-sm { min-height: 340px; } .chart-card-md { min-height: 440px; } .chart-card-lg { min-height: 500px; } .chart-header { flex: 0 0 auto; margin-bottom: var(--sp-4); } .chart-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .chart-empty { flex: 1 1 auto; min-height: 280px; } .app-chart { position: relative; width: 100%; height: 320px; min-height: 320px; max-height: 320px; flex: 0 0 auto; } .app-chart-sm { height: 260px; min-height: 260px; max-height: 260px; } .app-chart-md { height: 320px; min-height: 320px; max-height: 320px; } .app-chart-lg { height: 380px; min-height: 380px; max-height: 380px; } .app-chart-xl { height: 440px; min-height: 440px; max-height: 440px; } .app-chart canvas { display: block; width: 100% !important; height: 100% !important; } @media (max-width: 1024px) { .chart-grid, .chart-grid-main-aside { grid-template-columns: 1fr; } .chart-card, .chart-card-md, .chart-card-lg { min-height: 380px; } } @media (max-width: 767px) { .chart-card, .chart-card-md, .chart-card-lg { min-height: 340px; } .app-chart, .app-chart-md, .app-chart-lg, .app-chart-xl { height: 280px; min-height: 280px; max-height: 280px; } .app-chart-sm { height: 240px; min-height: 240px; max-height: 240px; } } /* -------------------------------------------------------------------------- SUMMARY CARD Card genérico para resumo de entidade/registro: dados, métricas e ações. -------------------------------------------------------------------------- */ .summary-card { display: flex; flex-direction: column; gap: var(--sp-4); } .summary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--sp-5); align-items: stretch; } .summary-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; } .summary-data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } .summary-data-item { min-width: 0; } .summary-data-item dt { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-muted); } .summary-data-item dd { margin: var(--sp-1) 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--color-text); } .summary-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } .summary-metric { padding: var(--sp-3); border-radius: var(--radius-md); background: var(--color-brand-ghost); min-width: 0; } .summary-metric dt { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--color-brand-strong); } .summary-metric dd { margin: var(--sp-1) 0 0; font-size: 24px; font-weight: 800; line-height: 1; color: var(--color-brand); } .summary-actions { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-5); border-left: 1px solid var(--color-border); } .summary-actions .btn { width: 100%; justify-content: flex-start; } @media (max-width: 1200px) { .summary-data-grid, .summary-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .summary-layout { grid-template-columns: 1fr; } .summary-actions { padding-left: 0; padding-top: var(--sp-4); border-left: 0; border-top: 1px solid var(--color-border); } } @media (max-width: 767px) { .summary-data-grid, .summary-metric-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 32. OVERRIDES FINAIS — COMPONENTES GENÉRICOS DE RESUMO E CHARTS -------------------------------------------------------------------------- Esta seção prevalece sobre regras antigas de gráficos SVG e classes antigas específicas de Eventos. O padrão novo é genérico e deve ser usado em qualquer página: chart-grid, chart-card, chart-header, chart-body, app-chart e summary-card. -------------------------------------------------------------------------- */ /* TABS: horizontal quando precisar, sem scrollbar vertical. */ .page-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .page-tabs::-webkit-scrollbar { display: none; } .page-tab { flex-shrink: 0; } /* -------------------------------------------------------------------------- CHART GRID / CARD — genérico -------------------------------------------------------------------------- */ .chart-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; } .page-card + .chart-grid { margin-top: var(--sp-4); } .chart-grid-main-aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .chart-grid > .page-card + .page-card { margin-top: 0; } .chart-grid > .chart-card, .chart-grid > .page-card.chart-card { align-self: stretch; } .chart-card { --chart-height: 330px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-width: 0; overflow: hidden; } .chart-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .chart-empty { flex: 1 1 auto; min-height: 0; } /* Chart.js precisa de uma caixa com altura fechada. Não usar height:100% aqui, porque isso pode gerar crescimento infinito dentro de flex/grid. */ .app-chart { position: relative; display: block; width: 100%; height: var(--chart-height, 330px); min-height: var(--chart-height, 330px); max-height: var(--chart-height, 330px); flex: 0 0 var(--chart-height, 330px); overflow: hidden; } .app-chart-sm { --chart-height: 250px; } .app-chart-md { --chart-height: 330px; } .app-chart-lg { --chart-height: 350px; } .app-chart-xl { --chart-height: 420px; } .app-chart canvas { display: block; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; } @media (max-width: 1024px) { .chart-grid, .chart-grid-main-aside, .chart-grid-3 { grid-template-columns: 1fr; } .chart-card, .chart-card-md, .chart-card-lg, .chart-card-xl { --chart-height: 310px; } } @media (max-width: 767px) { .chart-card, .chart-card-md, .chart-card-lg, .chart-card-xl { --chart-height: 250px; } .chart-card-sm { --chart-height: 220px; } } /* -------------------------------------------------------------------------- SUMMARY CARD — genérico -------------------------------------------------------------------------- */ .summary-card { display: flex; flex-direction: column; gap: var(--sp-4); } .summary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); align-items: stretch; } .summary-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); } .summary-data-grid, .summary-metric-grid { margin: 0; } .summary-data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } .summary-data-item { min-width: 0; } .summary-data-item dt { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-muted); } .summary-data-item dd { margin: var(--sp-1) 0 0; color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .summary-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } .summary-metric { min-width: 0; padding: var(--sp-3); border-radius: var(--radius-md); background: var(--color-brand-ghost); } .summary-metric dt { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--color-brand-strong); } .summary-metric dd { margin: var(--sp-1) 0 0; font-size: 24px; font-weight: 800; line-height: 1; color: var(--color-brand); } .summary-actions { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); padding-left: var(--sp-5); border-left: 1px solid var(--color-border); } .summary-actions .eyebrow { text-align: left; } .summary-actions .btn { width: 100%; justify-content: flex-start; } @media (max-width: 1200px) { .summary-data-grid, .summary-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .summary-layout { grid-template-columns: 1fr; } .summary-actions { justify-content: flex-start; padding-left: 0; padding-top: var(--sp-4); border-left: 0; border-top: 1px solid var(--color-border); } } @media (max-width: 767px) { .summary-data-grid, .summary-metric-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 32. BUSCA DE PARTICIPANTE POR CPF / LISTAS ESTÁTICAS DE ITEM + AÇÃO Origem: aba "Iniciar" do cadastro de participante (Features/Eventos/ CadastroParticipante.razor) — lista estática de candidatos encontrados (cadastro em outro evento / sócio), diferente de .autocomplete-list (que é um dropdown posicionado em cima de um input). Reaproveitada também pela lista de documentos anexados em Features/Eventos/ DocumentosParticipanteModal.razor — qualquer lista curta de "item com nome/detalhe + ação" pode reusar essas mesmas classes. -------------------------------------------------------------------------- */ .participante-busca-form-row { display: flex; gap: var(--sp-2); } .participante-busca-form-row .form-input { flex: 1 1 auto; } .participante-busca-lista { display: flex; flex-direction: column; gap: var(--sp-2); } .participante-busca-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } /* Item "selecionável" (DocumentosParticipanteModal — escolhe qual documento aparece no preview ao lado). A área clicável é um