/* ============================================ VARIÁVEIS EXTRAS (personalização avançada) - Mantém compatibilidade com temas antigos (theme-*) - Pode ser sobrescrito via .env (theme-env-override) ============================================ */ :root { /* Links */ --link: var(--primary); --link-hover: var(--primary); /* Gradientes */ --hero-from: var(--primary); --hero-to: var(--secondary); --header-from: var(--primary); --header-to: var(--secondary); /* Status */ --success: 145 60% 40%; --success-foreground: 0 0% 100%; --warning: 45 95% 55%; --warning-foreground: 215 25% 15%; --info: 195 90% 55%; --info-foreground: 215 25% 15%; /* Brand */ --brand-1: var(--primary); --brand-2: var(--accent); --brand-3: var(--gov-green); /* Sombras */ --shadow-color: 0 0% 0%; --shadow-opacity: 0.12; } /* ============================================ SISTEMA DE TEMAS - PORTAL PREFEITURA Sistema completo de design que replica o projeto React/Tailwind. Para trocar o tema, altere a classe no : - theme-institucional (padrão - azul/dourado) - theme-verde (verde institucional) - theme-marrom (marrom terra) - theme-moderno (roxo moderno) - theme-classico (azul marinho clássico) - theme-dark (modo escuro) ============================================ */ /* ============================================ MODO ALTO CONTRASTE (Acessibilidade) Usa !important para sobrescrever qualquer tema ativo ============================================ */ html.high-contrast, html.high-contrast.theme-institucional, html.high-contrast.theme-verde, html.high-contrast.theme-marrom, html.high-contrast.theme-moderno, html.high-contrast.theme-classico, html.high-contrast.theme-dark, html.high-contrast.theme-oceano, html.high-contrast.theme-cereja, html.high-contrast.theme-lavanda, html.high-contrast.theme-solar, html.high-contrast.theme-slate, html.high-contrast.theme-tropical { --background: 0 0% 0% !important; --foreground: 0 0% 100% !important; --card: 0 0% 5% !important; --card-foreground: 0 0% 100% !important; --popover: 0 0% 5% !important; --popover-foreground: 0 0% 100% !important; --primary: 60 100% 50% !important; --primary-foreground: 0 0% 0% !important; --secondary: 0 0% 10% !important; --secondary-foreground: 0 0% 100% !important; --muted: 0 0% 15% !important; --muted-foreground: 0 0% 80% !important; --accent: 60 100% 50% !important; --accent-foreground: 0 0% 0% !important; --border: 0 0% 30% !important; --input: 0 0% 20% !important; --ring: 60 100% 50% !important; } .high-contrast img { filter: grayscale(100%) contrast(1.2); } .high-contrast a { text-decoration: underline; } .high-contrast button, .high-contrast [role="button"] { border: 2px solid hsl(0 0% 100%) !important; } /* ============================================ RESET E BASE STYLES ============================================ */ *, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); } body { margin: 0; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Open Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em; } /* TEMA 1: Institucional (Padrão - Azul/Dourado) */ .theme-institucional { --background: 210 20% 98%; --foreground: 215 25% 15%; --card: 0 0% 100%; --card-foreground: 215 25% 15%; --popover: 0 0% 100%; --popover-foreground: 215 25% 15%; --primary: 210 85% 35%; --primary-foreground: 0 0% 100%; --secondary: 215 65% 20%; --secondary-foreground: 0 0% 100%; --muted: 210 20% 94%; --muted-foreground: 215 15% 45%; --accent: 45 95% 55%; --accent-foreground: 215 25% 15%; --destructive: 0 75% 55%; --destructive-foreground: 0 0% 100%; --border: 210 20% 88%; --input: 210 20% 88%; --ring: 210 85% 35%; --radius: 0.5rem; --gov-blue: 210 85% 35%; --gov-blue-dark: 215 65% 20%; --gov-blue-light: 210 75% 50%; --gov-gold: 45 95% 55%; --gov-gold-dark: 40 90% 45%; --gov-green: 145 60% 40%; --gov-green-light: 145 55% 50%; /* Sidebar */ --sidebar-background: 215 65% 20%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 45 95% 55%; --sidebar-primary-foreground: 215 25% 15%; --sidebar-accent: 215 55% 30%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 215 55% 30%; --sidebar-ring: 45 95% 55%; } /* TEMA 2: Verde Institucional */ .theme-verde { --background: 140 15% 97%; --foreground: 145 30% 15%; --card: 0 0% 100%; --card-foreground: 145 30% 15%; --popover: 0 0% 100%; --popover-foreground: 145 30% 15%; --primary: 145 65% 35%; --primary-foreground: 0 0% 100%; --secondary: 145 45% 22%; --secondary-foreground: 0 0% 100%; --muted: 140 15% 92%; --muted-foreground: 145 15% 45%; --accent: 45 90% 50%; --accent-foreground: 145 30% 15%; --destructive: 0 75% 55%; --destructive-foreground: 0 0% 100%; --border: 140 15% 85%; --input: 140 15% 85%; --ring: 145 65% 35%; --radius: 0.5rem; --gov-blue: 145 65% 35%; --gov-blue-dark: 145 45% 22%; --gov-blue-light: 145 55% 45%; --gov-gold: 45 90% 50%; --gov-gold-dark: 40 85% 42%; --gov-green: 145 65% 35%; --gov-green-light: 145 55% 50%; /* Sidebar */ --sidebar-background: 145 45% 22%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 45 90% 50%; --sidebar-primary-foreground: 145 30% 15%; --sidebar-accent: 145 40% 30%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 145 40% 30%; --sidebar-ring: 45 90% 50%; } /* TEMA 3: Marrom Terra */ .theme-marrom { --background: 30 15% 97%; --foreground: 25 30% 18%; --card: 0 0% 100%; --card-foreground: 25 30% 18%; --popover: 0 0% 100%; --popover-foreground: 25 30% 18%; --primary: 25 55% 35%; --primary-foreground: 0 0% 100%; --secondary: 25 40% 25%; --secondary-foreground: 0 0% 100%; --muted: 30 15% 92%; --muted-foreground: 25 15% 45%; --accent: 35 85% 55%; --accent-foreground: 25 30% 15%; --destructive: 0 75% 55%; --destructive-foreground: 0 0% 100%; --border: 30 15% 85%; --input: 30 15% 85%; --ring: 25 55% 35%; --radius: 0.5rem; --gov-blue: 25 55% 35%; --gov-blue-dark: 25 40% 25%; --gov-blue-light: 25 50% 48%; --gov-gold: 35 85% 55%; --gov-gold-dark: 30 80% 45%; --gov-green: 145 50% 40%; --gov-green-light: 145 45% 50%; /* Sidebar */ --sidebar-background: 25 40% 25%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 35 85% 55%; --sidebar-primary-foreground: 25 30% 15%; --sidebar-accent: 25 35% 32%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 25 35% 32%; --sidebar-ring: 35 85% 55%; } /* TEMA 4: Moderno (Roxo) */ .theme-moderno { --background: 270 15% 98%; --foreground: 270 25% 15%; --card: 0 0% 100%; --card-foreground: 270 25% 15%; --popover: 0 0% 100%; --popover-foreground: 270 25% 15%; --primary: 270 65% 45%; --primary-foreground: 0 0% 100%; --secondary: 270 45% 30%; --secondary-foreground: 0 0% 100%; --muted: 270 15% 92%; --muted-foreground: 270 15% 45%; --accent: 330 85% 60%; --accent-foreground: 0 0% 100%; --destructive: 0 75% 55%; --destructive-foreground: 0 0% 100%; --border: 270 15% 85%; --input: 270 15% 85%; --ring: 270 65% 45%; --radius: 0.75rem; --gov-blue: 270 65% 45%; --gov-blue-dark: 270 45% 30%; --gov-blue-light: 270 55% 55%; --gov-gold: 330 85% 60%; --gov-gold-dark: 330 80% 50%; --gov-green: 145 55% 45%; --gov-green-light: 145 50% 55%; /* Sidebar */ --sidebar-background: 270 45% 30%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 330 85% 60%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 270 40% 38%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 270 40% 38%; --sidebar-ring: 330 85% 60%; } /* TEMA 5: Clássico (Azul Marinho) */ .theme-classico { --background: 220 20% 97%; --foreground: 220 35% 15%; --card: 0 0% 100%; --card-foreground: 220 35% 15%; --popover: 0 0% 100%; --popover-foreground: 220 35% 15%; --primary: 220 75% 28%; --primary-foreground: 0 0% 100%; --secondary: 220 60% 18%; --secondary-foreground: 0 0% 100%; --muted: 220 20% 92%; --muted-foreground: 220 15% 45%; --accent: 15 85% 55%; --accent-foreground: 0 0% 100%; --destructive: 0 75% 55%; --destructive-foreground: 0 0% 100%; --border: 220 20% 85%; --input: 220 20% 85%; --ring: 220 75% 28%; --radius: 0.375rem; --gov-blue: 220 75% 28%; --gov-blue-dark: 220 60% 18%; --gov-blue-light: 220 65% 42%; --gov-gold: 15 85% 55%; --gov-gold-dark: 15 80% 45%; --gov-green: 145 55% 40%; --gov-green-light: 145 50% 50%; /* Sidebar */ --sidebar-background: 220 60% 18%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 15 85% 55%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 220 50% 25%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 220 50% 25%; --sidebar-ring: 15 85% 55%; } /* TEMA 6: Modo Escuro */ .theme-dark { --background: 215 35% 10%; --foreground: 210 20% 98%; --card: 215 35% 12%; --card-foreground: 210 20% 98%; --popover: 215 35% 12%; --popover-foreground: 210 20% 98%; --primary: 210 80% 55%; --primary-foreground: 0 0% 100%; --secondary: 215 50% 25%; --secondary-foreground: 210 20% 98%; --muted: 215 35% 18%; --muted-foreground: 210 15% 65%; --accent: 45 90% 55%; --accent-foreground: 215 25% 15%; --destructive: 0 70% 45%; --destructive-foreground: 210 20% 98%; --border: 215 35% 20%; --input: 215 35% 20%; --ring: 210 80% 55%; --radius: 0.5rem; --gov-blue: 210 80% 55%; --gov-blue-dark: 215 50% 25%; --gov-blue-light: 210 70% 65%; --gov-gold: 45 90% 55%; --gov-gold-dark: 40 85% 45%; --gov-green: 145 55% 50%; --gov-green-light: 145 50% 60%; /* Sidebar */ --sidebar-background: 215 45% 8%; --sidebar-foreground: 210 20% 98%; --sidebar-primary: 45 90% 55%; --sidebar-primary-foreground: 215 25% 15%; --sidebar-accent: 215 35% 15%; --sidebar-accent-foreground: 210 20% 98%; --sidebar-border: 215 35% 15%; --sidebar-ring: 45 90% 55%; } /* TEMA 7: Oceano */ .theme-oceano { --background: 195 20% 97%; --foreground: 200 30% 15%; --card: 0 0% 100%; --card-foreground: 200 30% 15%; --popover: 0 0% 100%; --popover-foreground: 200 30% 15%; --primary: 195 80% 38%; --primary-foreground: 0 0% 100%; --secondary: 200 60% 22%; --secondary-foreground: 0 0% 100%; --muted: 195 18% 93%; --muted-foreground: 200 15% 45%; --accent: 175 70% 45%; --accent-foreground: 0 0% 100%; --destructive: 0 65% 50%; --destructive-foreground: 0 0% 100%; --border: 195 18% 86%; --input: 195 18% 86%; --ring: 195 80% 38%; --radius: 0.625rem; --gov-blue: 195 80% 38%; --gov-blue-dark: 200 60% 22%; --gov-blue-light: 195 70% 50%; --gov-gold: 175 70% 45%; --gov-gold-dark: 175 65% 35%; --gov-green: 160 55% 42%; --gov-green-light: 160 50% 52%; --sidebar-background: 200 60% 22%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 175 70% 45%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 200 50% 30%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 200 50% 18%; --sidebar-ring: 175 70% 45%; } /* TEMA 8: Cereja */ .theme-cereja { --background: 350 15% 97%; --foreground: 345 30% 15%; --card: 0 0% 100%; --card-foreground: 345 30% 15%; --popover: 0 0% 100%; --popover-foreground: 345 30% 15%; --primary: 350 70% 42%; --primary-foreground: 0 0% 100%; --secondary: 345 55% 28%; --secondary-foreground: 0 0% 100%; --muted: 350 15% 93%; --muted-foreground: 345 12% 45%; --accent: 20 85% 58%; --accent-foreground: 0 0% 100%; --destructive: 0 65% 50%; --destructive-foreground: 0 0% 100%; --border: 350 15% 86%; --input: 350 15% 86%; --ring: 350 70% 42%; --radius: 0.5rem; --gov-blue: 350 70% 42%; --gov-blue-dark: 345 55% 28%; --gov-blue-light: 350 60% 55%; --gov-gold: 20 85% 58%; --gov-gold-dark: 18 80% 48%; --gov-green: 145 50% 42%; --gov-green-light: 145 45% 52%; --sidebar-background: 345 55% 28%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 20 85% 58%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 345 45% 35%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 345 45% 22%; --sidebar-ring: 20 85% 58%; } /* TEMA 9: Lavanda */ .theme-lavanda { --background: 260 20% 97%; --foreground: 255 25% 15%; --card: 0 0% 100%; --card-foreground: 255 25% 15%; --popover: 0 0% 100%; --popover-foreground: 255 25% 15%; --primary: 260 50% 55%; --primary-foreground: 0 0% 100%; --secondary: 255 40% 35%; --secondary-foreground: 0 0% 100%; --muted: 260 18% 93%; --muted-foreground: 255 12% 48%; --accent: 290 60% 65%; --accent-foreground: 0 0% 100%; --destructive: 0 65% 50%; --destructive-foreground: 0 0% 100%; --border: 260 18% 87%; --input: 260 18% 87%; --ring: 260 50% 55%; --radius: 0.75rem; --gov-blue: 260 50% 55%; --gov-blue-dark: 255 40% 35%; --gov-blue-light: 260 45% 65%; --gov-gold: 290 60% 65%; --gov-gold-dark: 290 55% 52%; --gov-green: 145 50% 42%; --gov-green-light: 145 45% 52%; --sidebar-background: 255 40% 35%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 290 60% 65%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 255 35% 42%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 255 35% 28%; --sidebar-ring: 290 60% 65%; } /* TEMA 10: Solar */ .theme-solar { --background: 40 25% 97%; --foreground: 25 35% 15%; --card: 0 0% 100%; --card-foreground: 25 35% 15%; --popover: 0 0% 100%; --popover-foreground: 25 35% 15%; --primary: 30 90% 50%; --primary-foreground: 0 0% 100%; --secondary: 25 70% 30%; --secondary-foreground: 0 0% 100%; --muted: 40 20% 93%; --muted-foreground: 25 15% 45%; --accent: 50 95% 55%; --accent-foreground: 25 40% 15%; --destructive: 0 65% 50%; --destructive-foreground: 0 0% 100%; --border: 40 20% 86%; --input: 40 20% 86%; --ring: 30 90% 50%; --radius: 0.5rem; --gov-blue: 30 90% 50%; --gov-blue-dark: 25 70% 30%; --gov-blue-light: 30 80% 60%; --gov-gold: 50 95% 55%; --gov-gold-dark: 45 90% 45%; --gov-green: 145 55% 42%; --gov-green-light: 145 50% 52%; --sidebar-background: 25 70% 30%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 50 95% 55%; --sidebar-primary-foreground: 25 40% 15%; --sidebar-accent: 25 55% 38%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 25 55% 25%; --sidebar-ring: 50 95% 55%; } /* TEMA 11: Slate */ .theme-slate { --background: 210 12% 96%; --foreground: 215 20% 18%; --card: 0 0% 100%; --card-foreground: 215 20% 18%; --popover: 0 0% 100%; --popover-foreground: 215 20% 18%; --primary: 215 20% 40%; --primary-foreground: 0 0% 100%; --secondary: 215 18% 28%; --secondary-foreground: 0 0% 100%; --muted: 210 10% 91%; --muted-foreground: 215 10% 48%; --accent: 200 50% 50%; --accent-foreground: 0 0% 100%; --destructive: 0 65% 50%; --destructive-foreground: 0 0% 100%; --border: 210 12% 84%; --input: 210 12% 84%; --ring: 215 20% 40%; --radius: 0.375rem; --gov-blue: 215 20% 40%; --gov-blue-dark: 215 18% 28%; --gov-blue-light: 215 18% 52%; --gov-gold: 200 50% 50%; --gov-gold-dark: 200 45% 40%; --gov-green: 145 40% 42%; --gov-green-light: 145 35% 52%; --sidebar-background: 215 18% 28%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 200 50% 50%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 215 15% 35%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 215 15% 22%; --sidebar-ring: 200 50% 50%; } /* TEMA 12: Tropical */ .theme-tropical { --background: 165 18% 97%; --foreground: 170 30% 15%; --card: 0 0% 100%; --card-foreground: 170 30% 15%; --popover: 0 0% 100%; --popover-foreground: 170 30% 15%; --primary: 170 70% 35%; --primary-foreground: 0 0% 100%; --secondary: 175 55% 22%; --secondary-foreground: 0 0% 100%; --muted: 165 15% 93%; --muted-foreground: 170 12% 45%; --accent: 45 95% 55%; --accent-foreground: 170 35% 15%; --destructive: 0 65% 50%; --destructive-foreground: 0 0% 100%; --border: 165 15% 86%; --input: 165 15% 86%; --ring: 170 70% 35%; --radius: 0.625rem; --gov-blue: 170 70% 35%; --gov-blue-dark: 175 55% 22%; --gov-blue-light: 170 60% 48%; --gov-gold: 45 95% 55%; --gov-gold-dark: 42 90% 45%; --gov-green: 155 60% 40%; --gov-green-light: 155 55% 50%; --sidebar-background: 175 55% 22%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 45 95% 55%; --sidebar-primary-foreground: 170 35% 15%; --sidebar-accent: 175 45% 30%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 175 45% 18%; --sidebar-ring: 45 95% 55%; } /* ============================================ CLASSES UTILITÁRIAS ============================================ */ /* Container padrão */ .container { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } /* Gradientes dinâmicos usando variáveis */ .gradient-hero { background: linear-gradient(135deg, hsl(var(--hero-from)) 0%, hsl(var(--hero-to)) 100%); } .gradient-accent { background: linear-gradient(135deg, hsl(var(--brand-2)) 0%, hsl(var(--brand-1)) 100%); } .gradient-primary { background: linear-gradient( 135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100% ); } /* Sombras */ .shadow-card { box-shadow: 0 4px 20px -5px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.8333)); } /* Efeitos de hover */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -10px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 1.25)); } /* Classes de hover para backgrounds (simulando Tailwind) */ .hover\:bg-accent:hover { background-color: hsl(var(--accent)); } .hover\:bg-primary:hover { background-color: hsl(var(--primary)); } .hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); } .hover\:bg-muted:hover { background-color: hsl(var(--muted)); } .hover\:text-accent-foreground:hover { color: hsl(var(--accent-foreground)); } /* Sombras personalizadas */ .shadow-card { box-shadow: 0 4px 6px -1px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.6667)), 0 2px 4px -1px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.3333)); } .shadow-card-hover { box-shadow: 0 10px 25px -3px hsl(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -2px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.5)); } .shadow-hero { box-shadow: 0 25px 50px -12px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 2.0833)); } /* Sombra de texto */ .text-shadow { text-shadow: 0 2px 4px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 2.5)); } /* ============================================ ANIMAÇÕES ============================================ */ @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .animate-fade-in { animation: fade-in 0.5s ease-out forwards; } .animate-slide-in-left { animation: slide-in-left 0.5s ease-out forwards; } .animate-scale-in { animation: scale-in 0.3s ease-out forwards; } /* ============================================ COMPONENTES ADICIONAIS ============================================ */ /* Botões com gradiente */ .btn-gradient { background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%); color: hsl(var(--primary-foreground)); transition: all 0.3s ease; } .btn-gradient:hover { filter: brightness(1.1); transform: translateY(-2px); } /* Links com underline animado */ .link-underline { position: relative; } .link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: hsl(var(--accent)); transition: width 0.3s ease; } .link-underline:hover::after { width: 100%; } /* Badge/Tag styles */ .badge-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .badge-accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } /* Focus states para acessibilidade */ .focus-ring:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Scrollbar personalizada */ .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: hsl(var(--muted)); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground)); border-radius: 4px; } /* ============================================ COMPONENTES DE LAYOUT ============================================ */ /* Card base */ .card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: var(--radius); border: 1px solid hsl(var(--border)); } /* Button base */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: calc(var(--radius) - 2px); transition: all 0.2s ease; cursor: pointer; border: none; } .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { background-color: hsl(var(--primary) / 0.9); } .btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn-secondary:hover { background-color: hsl(var(--secondary) / 0.9); } .btn-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-accent:hover { background-color: hsl(var(--accent) / 0.9); } .btn-outline { background-color: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } .btn-outline:hover { background-color: hsl(var(--muted)); } .btn-ghost { background-color: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background-color: hsl(var(--muted)); } /* Input base */ .input { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; background-color: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); color: hsl(var(--foreground)); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); } .input::placeholder { color: hsl(var(--muted-foreground)); } /* ============================================ RESPONSIVE UTILITIES ============================================ */ @media (max-width: 768px) { .container { padding-left: 1rem; padding-right: 1rem; } } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); } /* ============================================ NEWS SECTION COMPONENTS ============================================ */ /* News card image container with overflow hidden */ .news-image-container { overflow: hidden; position: relative; } .news-image-container img, .news-image-container .news-bg-image { transition: transform 0.5s ease; } .news-card:hover .news-image-container img, .news-card:hover .news-image-container .news-bg-image { transform: scale(1.05); } /* News featured card */ .news-featured { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 1024px) { .news-featured { grid-template-columns: repeat(2, 1fr); } } /* News grid 2x2 */ .news-grid-small { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Line clamp utilities */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================ QUICK SERVICES COMPONENTS ============================================ */ /* Tabs container */ .tabs-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .tab-button { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 9999px; background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: none; cursor: pointer; transition: all 0.2s ease; } .tab-button:hover { background-color: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .tab-button.active { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } /* Search input styling */ .search-input-wrapper { position: relative; } .search-input-wrapper .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; } .search-input-wrapper input { padding-left: 2.5rem; } /* Services grid */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(6, 1fr); } } /* Service card */ .service-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem 1rem; background-color: hsl(var(--card)); border-radius: var(--radius); text-align: center; text-decoration: none; color: hsl(var(--foreground)); transition: all 0.3s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -10px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 1.25)); } .service-card .icon-wrapper { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%); border-radius: var(--radius); color: hsl(var(--primary-foreground)); transition: transform 0.3s ease; } .service-card:hover .icon-wrapper { transform: scale(1.1); } .service-card .title { font-size: 0.875rem; font-weight: 600; line-height: 1.25; } .service-card .subtitle { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* ============================================ LEGACY COMPATIBILITY STYLES (app2026.css) Estilos para compatibilidade com views existentes ============================================ */ /* Títulos principais com underline animado */ .tituloPrincipal { display: inline-block; position: relative; font-size: 2.25rem !important; font-weight: 800; color: hsl(var(--primary)); text-decoration: none !important; padding: 5px 15px; transition: color 0.3s ease; margin: 10px 0 15px 0; } .tituloPrincipal::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30%; height: 3px; background-color: hsl(var(--primary)); transition: width 0.3s ease; } @media (max-width: 1024px) { .tituloPrincipal { margin-top: 10px; font-size: 1.875rem !important; } } /* Título secundário */ .tituloSecundario { display: inline-block; position: relative; font-size: 1.55rem !important; font-weight: 900; color: hsl(var(--primary)); text-decoration: none !important; padding: 5px 15px; transition: color 0.3s ease; margin: 10px 0 15px 0; } .tituloSecundario::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background-color: hsl(var(--accent)); transition: width 0.3s ease; } /* ============================================ QUICK ACCESS BUTTONS (Acesso Rápido) ============================================ */ .rowbuttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .quick-access { --qa-color: hsl(var(--primary)); display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: hsl(var(--card)); text-decoration: none; border: 1px solid hsl(var(--border)); box-shadow: 0 12px 25px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.6667)); transition: all 0.25s ease; } .quick-access:hover { transform: translateY(-6px); background: linear-gradient( 135deg, hsl(var(--primary)), hsl(var(--secondary)) ); box-shadow: 0 22px 45px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 1.5)); } .quick-access:hover .qa-title, .quick-access:hover .qa-subtitle, .quick-access:hover .qa-icon { color: hsl(var(--primary-foreground)); } .qa-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: hsl(var(--primary)); background: hsl(var(--muted)); transition: all 0.25s ease; } .quick-access:hover .qa-icon { background: rgba(255, 255, 255, 0.22); } .qa-title { font-size: 1.05rem; font-weight: 700; color: hsl(var(--foreground)); line-height: 1.2; } .qa-subtitle { font-size: 0.85rem; color: hsl(var(--muted-foreground)); } /* ============================================ TRANSPARENCY PAGE COMPONENTS ============================================ */ /* Buttons de transparência */ .buttontrans { background-color: hsl(var(--card)); border-radius: 13px; box-shadow: 0px 4px 10px hsl(var(--border)); display: flex; flex-direction: row; align-content: center; align-items: center; padding: 17px; height: 75px; margin-top: 10px; margin-bottom: 5px; text-decoration: none; color: hsl(var(--foreground)); transition: all 0.3s ease; } .buttontrans:hover { background-color: hsl(var(--muted)); transform: translateY(-2px); } .img-card-section-1 { cursor: pointer; margin-left: 10px; height: 35px; } .text-card-section-1 { font-weight: bold; font-size: 14px; margin-left: 10px; margin-bottom: auto; margin-top: auto; line-height: 14px; color: hsl(var(--foreground)); } /* Icon images para transparência */ .highlight-image { width: 100%; max-height: 100px; object-fit: cover; } .icon-image { height: 107px; width: auto; } /* ============================================ CATEGORY COLOR SYSTEM (Transparência) ============================================ */ .cor-cat-0 { background-color: hsl(var(--card)); color: rgb(116, 110, 2); --qa-color: rgb(116, 110, 2); } .cor-cat-0:not(.semhover):hover { background-color: rgb(116, 110, 2); color: hsl(var(--card)); } .cor-cat-1 { background-color: hsl(var(--card)); color: rgb(46, 125, 50); --qa-color: rgb(46, 125, 50); } .cor-cat-1:not(.semhover):hover { background-color: rgb(46, 125, 50); color: hsl(var(--card)); } .cor-cat-2 { background-color: hsl(var(--card)); color: rgb(193, 108, 0); --qa-color: rgb(193, 108, 0); } .cor-cat-2:not(.semhover):hover { background-color: rgb(193, 108, 0); color: hsl(var(--card)); } .cor-cat-3 { background-color: hsl(var(--card)); color: rgb(162, 11, 11); --qa-color: rgb(162, 11, 11); } .cor-cat-3:not(.semhover):hover { background-color: rgb(162, 11, 11); color: hsl(var(--card)); } .cor-cat-4 { background-color: hsl(var(--card)); color: rgb(112, 112, 112); --qa-color: rgb(112, 112, 112); } .cor-cat-4:not(.semhover):hover { background-color: rgb(112, 112, 112); color: hsl(var(--card)); } .cor-cat-5 { background-color: hsl(var(--card)); color: rgb(25, 130, 196); --qa-color: rgb(25, 130, 196); } .cor-cat-5:not(.semhover):hover { background-color: rgb(25, 130, 196); color: hsl(var(--card)); } .cor-cat-6 { background-color: hsl(var(--card)); color: rgb(15, 91, 138); --qa-color: rgb(15, 91, 138); } .cor-cat-6:not(.semhover):hover { background-color: rgb(15, 91, 138); color: hsl(var(--card)); } .cor-cat-7 { background-color: hsl(var(--card)); color: rgb(28, 132, 176); --qa-color: rgb(28, 132, 176); } .cor-cat-7:not(.semhover):hover { background-color: rgb(28, 132, 176); color: hsl(var(--card)); } .cor-cat-8 { background-color: hsl(var(--card)); color: rgb(106, 76, 147); --qa-color: rgb(106, 76, 147); } .cor-cat-8:not(.semhover):hover { background-color: rgb(106, 76, 147); color: hsl(var(--card)); } .cor-cat-9 { background-color: hsl(var(--card)); color: rgb(22, 160, 133); --qa-color: rgb(22, 160, 133); } .cor-cat-9:not(.semhover):hover { background-color: rgb(22, 160, 133); color: hsl(var(--card)); } .cor-cat-10 { background-color: hsl(var(--card)); color: rgb(234, 52, 52); --qa-color: rgb(234, 52, 52); } .cor-cat-10:not(.semhover):hover { background-color: rgb(234, 52, 52); color: hsl(var(--card)); } .cor-cat-11 { background-color: hsl(var(--card)); color: rgb(24, 175, 26); --qa-color: rgb(24, 175, 26); } .cor-cat-11:not(.semhover):hover { background-color: rgb(24, 175, 26); color: hsl(var(--card)); } .cor-cat-12 { background-color: hsl(var(--card)); color: rgb(51, 15, 87); --qa-color: rgb(51, 15, 87); } .cor-cat-12:not(.semhover):hover { background-color: rgb(51, 15, 87); color: hsl(var(--card)); } .cor-cat-13 { background-color: hsl(var(--card)); color: rgb(45, 64, 139); --qa-color: rgb(45, 64, 139); } .cor-cat-13:not(.semhover):hover { background-color: rgb(45, 64, 139); color: hsl(var(--card)); } .cor-cat-14 { background-color: hsl(var(--card)); color: rgb(111, 29, 27); --qa-color: rgb(111, 29, 27); } .cor-cat-14:not(.semhover):hover { background-color: rgb(111, 29, 27); color: hsl(var(--card)); } /* SVG fills for category colors */ .cor-cat-0 svg, .cor-cat-1 svg, .cor-cat-2 svg, .cor-cat-3 svg, .cor-cat-4 svg, .cor-cat-5 svg, .cor-cat-6 svg, .cor-cat-7 svg, .cor-cat-8 svg, .cor-cat-9 svg, .cor-cat-10 svg, .cor-cat-11 svg, .cor-cat-12 svg, .cor-cat-13 svg, .cor-cat-14 svg { fill: currentColor; } .cor-cat-0:not(.semhover):hover svg, .cor-cat-1:not(.semhover):hover svg, .cor-cat-2:not(.semhover):hover svg, .cor-cat-3:not(.semhover):hover svg, .cor-cat-4:not(.semhover):hover svg, .cor-cat-5:not(.semhover):hover svg, .cor-cat-6:not(.semhover):hover svg, .cor-cat-7:not(.semhover):hover svg, .cor-cat-8:not(.semhover):hover svg, .cor-cat-9:not(.semhover):hover svg, .cor-cat-10:not(.semhover):hover svg, .cor-cat-11:not(.semhover):hover svg, .cor-cat-12:not(.semhover):hover svg, .cor-cat-13:not(.semhover):hover svg, .cor-cat-14:not(.semhover):hover svg { fill: hsl(var(--card)); } /* ============================================ TRANSPARENCY PAGE GRID LAYOUT (show.blade) ============================================ */ .tp-grid { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header header" "sidebar content"; gap: 14px; } .tp-header { grid-area: header; } .tp-sidebar { grid-area: sidebar; min-width: 0; } .tp-content { grid-area: content; min-width: 0; } @media (max-width: 992px) { .tp-grid { grid-template-columns: 1fr; grid-template-areas: "header" "sidebar" "content"; } } /* Divider with text label */ .divider-texto { position: relative; margin: 50px 0; } .divider-linha { height: 3px; border: 0; background-color: currentColor; } .divider-label { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 10px 15px; background: currentColor; color: currentColor; font-size: 14px; font-weight: bold; letter-spacing: .32em; text-transform: uppercase; } /* ============================================ DECLARATION CARD COMPONENTS (Declarações) ============================================ */ .decl-wrap { min-height: calc(100vh - 40px); display: flex; align-items: center; justify-content: center; padding: 28px 14px; background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%); } .decl-card { width: min(920px, 100%); background: hsl(var(--card)); border-radius: 14px; box-shadow: 0 8px 30px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.6667)); overflow: hidden; border: 1px solid hsl(var(--border)); } .decl-head { padding: 18px 20px; background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.04)); border-bottom: 1px solid hsl(var(--border)); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .decl-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.2px; color: hsl(var(--foreground)); } .decl-subtitle { margin: 6px 0 0 0; color: hsl(var(--muted-foreground)); font-size: 13px; } .decl-actions { display: flex; gap: 10px; align-items: center; } .decl-btn { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.08s ease, background 0.2s ease; user-select: none; text-decoration: none; } .decl-btn:hover { background: hsl(var(--muted)); } .decl-btn:active { transform: scale(0.98); } .decl-body { padding: 22px 20px; } .decl-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 12px; font-weight: 700; } .decl-section { margin-top: 16px; padding-top: 16px; border-top: 1px dashed hsl(var(--border)); } .decl-h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 800; color: hsl(var(--foreground)); } .decl-p { margin: 0; color: hsl(var(--muted-foreground)); line-height: 1.6; font-size: 14px; } .decl-url { word-break: break-all; color: hsl(var(--primary)); text-decoration: none; font-weight: 700; } .decl-url:hover { text-decoration: underline; } .decl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .decl-item { padding: 10px 12px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5); } .decl-item small { display: block; color: hsl(var(--muted-foreground)); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; } .decl-item div { color: hsl(var(--foreground)); font-weight: 700; font-size: 13px; word-break: break-word; } .decl-foot { padding: 14px 20px; background: hsl(var(--muted) / 0.5); border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } @media (max-width: 720px) { .decl-grid { grid-template-columns: 1fr; } .decl-head { align-items: stretch; } } /* Print styles for declarations */ #decl-print { position: relative; width: 100%; background: transparent; padding: 0; margin: 0; } @media print { body * { visibility: hidden !important; } #decl-print, #decl-print * { visibility: visible !important; } #decl-print { position: fixed; left: 0; top: 0; width: 100%; background: #fff; } } /* ============================================ CALLOUT BOXES (bd-callout) ============================================ */ .bd-callout { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; margin-left: 2rem; border: 1px solid hsl(var(--border)); border-left-width: 0.25rem; border-radius: 0.25rem; background-color: hsl(var(--card)); } .bd-callout-info { border-left-color: hsl(var(--primary)); } .bd-callout-secondary { border-left-color: hsl(var(--secondary)); } .bd-callout-danger { border-left-color: hsl(var(--destructive)); } .bd-callout-primary { border-left-color: hsl(var(--primary)); } .bd-callout-warning { border-left-color: hsl(var(--accent)); } .bd-callout-success { border-left-color: hsl(var(--gov-green)); } /* ============================================ LINKS ÚTEIS GRID ============================================ */ .linksuteis-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; justify-items: center; } .linksuteis { position: relative; width: 150px; max-width: 180px; height: 150px; background: hsl(var(--card)); box-shadow: 0 6px 18px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.6667)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; text-decoration: none; color: hsl(var(--foreground)); overflow: hidden; border-radius: 14px; border: 0px solid currentColor; transition: color 0.4s ease; } .linksuteis img { width: 48px; height: 48px; object-fit: contain; display: block; position: relative; z-index: 2; } .linksuteis span { font-weight: 700; font-size: 0.95rem; line-height: 1.2; position: relative; z-index: 2; } .linksuteis::before, .linksuteis::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; background: hsl(var(--muted)); transition: width 0.4s ease; z-index: 0; } .linksuteis::before { left: 0; } .linksuteis::after { right: 0; } .linksuteis:hover { color: hsl(var(--primary)); } .linksuteis:hover::before, .linksuteis:hover::after { width: 50%; } /* ============================================ EFFECT CLASSES ============================================ */ .fx-slide-sides { position: relative; overflow: hidden; } .fx-slide-sides::before, .fx-slide-sides::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; background: hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.6667)); transition: width 0.35s ease; pointer-events: none; z-index: 0; } .fx-slide-sides::before { left: 0; } .fx-slide-sides::after { right: 0; } .fx-slide-sides:hover::before, .fx-slide-sides:hover::after { width: 50%; } .feito1:hover { transform: translateY(-3px); box-shadow: 0 10px 28px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 1.1667)); } /* ============================================ BUTTON "MAIS" WITH ANIMATED UNDERLINE ============================================ */ .btnMais { display: inline-block; position: relative; font-size: 18px; font-weight: bold; color: hsl(var(--primary)); text-decoration: none !important; padding: 5px 10px; transition: color 0.3s ease; } .btnMais::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30%; height: 3px; background-color: hsl(var(--primary)); transition: width 0.3s ease; } .btnMais:hover { color: hsl(var(--secondary)); } .btnMais:hover::after { width: 100%; } /* ============================================ EFEITO LINHAS (Títulos decorativos) ============================================ */ .efeitolinhas { position: relative; display: block; padding: 10px; background-color: transparent; width: max-content; } .efeitolinhas .text-content { font-size: 24px; font-weight: bold; color: hsl(var(--primary)); background-color: transparent; margin-left: 5px; margin-bottom: 0; } .efeitolinhas .vertical-line { border-radius: 5px; position: absolute; left: 10px; top: 0; width: 3.5px; height: 100%; min-height: 30px; background: linear-gradient(to bottom, transparent 0%, hsl(var(--gov-green)) 100%); transition: transform 0.3s ease-in-out; box-shadow: -2px 2px 5px 0px rgba(139, 121, 121, 0.76); } .efeitolinhas .horizontal-line { border-radius: 5px; position: absolute; left: 0; bottom: 7px; width: 100%; min-width: 50px; height: 3.5px; background: linear-gradient(to right, hsl(var(--gov-green)) 0%, transparent 100%); box-shadow: -2px 2px 5px 0px rgba(139, 121, 121, 0.76); } .efeitolinhas:hover .vertical-line, .efeitolinhas .text-content:hover + .vertical-line { transform: rotate(15deg); background: linear-gradient(to bottom, transparent 0%, hsl(var(--accent)) 100%); } .efeitolinhas:hover .horizontal-line, .efeitolinhas .text-content:hover ~ .horizontal-line { background: linear-gradient(to right, hsl(var(--accent)) 0%, transparent 100%); } .efeitolinhas:hover .text-content, .efeitolinhas .text-content:hover { font-style: italic; } /* ============================================ ALERT COMPATIBILITY ============================================ */ .alert-info { background-color: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2); color: hsl(var(--foreground)); padding: 1rem 1.25rem; border-radius: var(--radius); } .alert-light { background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); padding: 1rem 1.25rem; border-radius: var(--radius); } /* ============================================ LIST GROUP COMPATIBILITY ============================================ */ .list-group-item { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); padding: 0.75rem 1.25rem; color: hsl(var(--foreground)); } .list-group-item.active { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .list-group-item-action:focus, .list-group-item-action:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } /* ============================================ SIDEBAR COMPATIBILITY ============================================ */ .sidebar { background-color: hsl(var(--muted)); border-radius: var(--radius); padding: 1rem; } .sidebar .btn-group-vertical { width: 100%; } /* ============================================ FORM CONTROLS COMPATIBILITY ============================================ */ .form-select { background-color: hsl(var(--card)); border: 1px solid hsl(var(--input)); border-radius: var(--radius); padding: 0.5rem 0.75rem; color: hsl(var(--foreground)); } .form-select:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); outline: none; } /* ============================================ PARAGRAPH TEXT ALIGNMENT ============================================ */ p { text-align: justify; } /* ============================================ FLOATING BUTTON ============================================ */ #floating-button { position: fixed; bottom: 20px; left: 20px; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 4px 6px hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.8333)); cursor: pointer; z-index: 99; transition: background-color 0.3s ease; } #floating-button:hover { background-color: hsl(var(--accent)); } /* ============================================ BACK TO TOP BUTTON ============================================ */ .back-to-top { background-color: hsl(var(--primary)); opacity: 0.8; border-radius: 65px; bottom: 14px; box-shadow: 2px 3px 10px -2px hsl(var(--primary) / 0.5); cursor: pointer; height: 40px; position: fixed; right: 22px; width: 40px; z-index: 3; } .back-to-top:after { content: '▲'; display: flex; justify-content: center; padding-top: 10px; opacity: 1; z-index: 5; color: hsl(var(--primary-foreground)); } .back-to-top:hover { background-color: hsl(var(--accent)); } /* ============================================ ADDITIONAL FORM & INTERACTION UTILITIES ============================================ */ /* Focus ring offset for inputs (matching Tailwind) */ .focus\:ring-ring:focus { --tw-ring-color: hsl(var(--ring)); } .focus\:ring-2:focus { box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3); } .focus\:ring-offset-2:focus { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.3); } /* Hover states for interactive elements */ .hover\:bg-accent:hover { background-color: hsl(var(--accent)); } .hover\:text-accent-foreground:hover { color: hsl(var(--accent-foreground)); } .hover\:text-foreground:hover { color: hsl(var(--foreground)); } .hover\:text-primary:hover { color: hsl(var(--primary)); } .hover\:text-primary-foreground:hover { color: hsl(var(--primary-foreground)); } /* Group hover states */ .group:hover .group-hover\:text-primary { color: hsl(var(--primary)); } .group:hover .group-hover\:opacity-100 { opacity: 1; } .group:hover .group-hover\:scale-110 { transform: scale(1.1); } /* Transition utilities */ .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: ease; transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: ease; transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: ease; transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } /* Opacity utilities */ .opacity-0 { opacity: 0; } /* Height utilities for inputs */ .h-10 { height: 2.5rem; } .h-8 { height: 2rem; } .w-8 { width: 2rem; } /* Rounded utilities */ .rounded-md { border-radius: calc(var(--radius) - 2px); } /* Background utilities */ .bg-background { background-color: hsl(var(--background)); } .bg-card { background-color: hsl(var(--card)); } .bg-muted { background-color: hsl(var(--muted)); } .bg-primary { background-color: hsl(var(--primary)); } .bg-secondary { background-color: hsl(var(--secondary)); } .bg-accent { background-color: hsl(var(--accent)); } .bg-gov-green { background-color: hsl(var(--gov-green)); } .bg-gov-blue { background-color: hsl(var(--gov-blue)); } /* Text color utilities */ .text-foreground { color: hsl(var(--foreground)); } .text-muted-foreground { color: hsl(var(--muted-foreground)); } .text-primary { color: hsl(var(--primary)); } .text-primary-foreground { color: hsl(var(--primary-foreground)); } .text-accent-foreground { color: hsl(var(--accent-foreground)); } /* Border utilities */ .border-border { border-color: hsl(var(--border)); } .border-input { border-color: hsl(var(--input)); } /* Gradient utilities */ .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } .from-primary { --tw-gradient-from: hsl(var(--primary)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); } .to-primary\/80 { --tw-gradient-to: hsl(var(--primary) / 0.8); } /* Text opacity utilities */ .text-primary-foreground\/70 { color: hsl(var(--primary-foreground) / 0.7); } .text-primary-foreground\/90 { color: hsl(var(--primary-foreground) / 0.9); } /* Sticky positioning */ .sticky { position: sticky; } .top-0 { top: 0; } /* Z-index */ .z-20 { z-index: 20; } /* Flex utilities */ .flex-shrink-0 { flex-shrink: 0; } .min-w-0 { min-width: 0; } /* Truncate text */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ UTILITÁRIOS (personalização avançada) ============================================ */ /* Links (semântico) */ .text-link { color: hsl(var(--link)) !important; } .hover\:text-link-hover:hover { color: hsl(var(--link-hover)) !important; } /* Status (alerts) */ .bg-success { background-color: hsl(var(--success)) !important; } .text-success { color: hsl(var(--success)) !important; } .text-success-foreground { color: hsl(var(--success-foreground)) !important; } .bg-warning { background-color: hsl(var(--warning)) !important; } .text-warning { color: hsl(var(--warning)) !important; } .text-warning-foreground { color: hsl(var(--warning-foreground)) !important; } .bg-info { background-color: hsl(var(--info)) !important; } .text-info { color: hsl(var(--info)) !important; } .text-info-foreground { color: hsl(var(--info-foreground)) !important; }