/* Auto-generated bundle. Do not edit. Source: app.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
/* === design-tokens.css === */
/* ===================================
BEBOP DESIGN SYSTEM - DESIGN TOKENS
=================================== */
:root {
/* ===================================
CORES PRIMÁRIAS - PALM GREEN BEBOP
=================================== */
/* Paleta Palm Green (base: #40AD3A) */
--color-primary-50: hsl(115, 43%, 97%);
--color-primary-100: hsl(115, 50%, 93%);
--color-primary-200: hsl(116, 55%, 85%);
--color-primary-300: hsl(116, 55%, 73%);
--color-primary-400: hsl(116, 50%, 58%);
--color-primary-500: hsl(116, 50%, 45%);
--color-primary-600: hsl(116, 54%, 36%);
--color-primary-700: hsl(116, 50%, 29%);
--color-primary-800: hsl(116, 45%, 24%);
--color-primary-900: hsl(118, 44%, 20%);
--color-primary-950: hsl(120, 57%, 9%);
/* ===================================
CORES SECUNDÁRIAS - DERIVADAS DO VERDE
=================================== */
/* Verde Secundário (variações do verde principal) */
--color-secondary-50: hsl(127, 99%, 92%);
--color-secondary-100: hsl(127, 99%, 85%);
--color-secondary-200: hsl(127, 99%, 75%);
--color-secondary-300: hsl(127, 99%, 65%);
--color-secondary-400: hsl(141, 79%, 43%);
--color-secondary-500: hsl(127, 99%, 45%);
--color-secondary-600: hsl(127, 99%, 35%);
--color-secondary-700: hsl(127, 99%, 25%);
--color-secondary-800: hsl(127, 99%, 15%);
--color-secondary-900: hsl(127, 99%, 10%);
/* ===================================
CORES SEMÂNTICAS - BASEADAS NA PALETA OFICIAL
=================================== */
/* Sucesso - Usa Palm Green como base */
--color-success-50: hsl(115, 43%, 97%); /* #F3FBF2 */
--color-success-100: hsl(115, 50%, 93%); /* #E3F7E1 */
--color-success-200: hsl(116, 50%, 84%);
--color-success-300: hsl(116, 50%, 72%);
--color-success-400: hsl(116, 50%, 58%);
--color-success-500: hsl(116, 50%, 45%); /* #40AD3A */
--color-success-600: hsl(116, 54%, 36%); /* #308E2B */
--color-success-700: hsl(116, 50%, 29%); /* #287025 */
--color-success-800: hsl(116, 50%, 22%);
--color-bootstrap-success-border: hsl(152, 69%, 25%); /* #146c43 */
--color-bootstrap-success: hsl(152, 69%, 31%); /* #198754 */
/* Aviso - Variação do verde com saturação reduzida */
--color-warning-50: hsl(127, 80%, 95%);
--color-warning-100: hsl(127, 80%, 90%);
--color-warning-200: hsl(127, 80%, 85%);
--color-warning-300: hsl(127, 80%, 80%);
--color-warning-400: hsl(127, 80%, 70%);
--color-warning-500: hsl(127, 80%, 60%);
--color-warning-600: hsl(127, 80%, 50%);
--color-warning-700: hsl(127, 80%, 40%);
--color-warning-800: hsl(127, 80%, 30%);
/* Erro - Variação do verde com matiz alterado para vermelho */
--color-error-50: hsl(0, 99%, 95%);
--color-error-100: hsl(0, 99%, 90%);
--color-error-400: hsl(354, 70%, 54%); /* #dc3545 */
--color-error-500: hsl(0, 99%, 56%);
--color-error-600: hsl(0, 99%, 50%);
--color-error-650: hsl(354, 70%, 46%); /* #dc2626 */
--color-error-700: hsl(0, 99%, 40%);
--color-error-750: hsl(354, 70%, 38%); /* #b91c1c */
--color-error-800: hsl(354, 63%, 32%); /* #b02a37 */
/* Informação - Variação do verde com matiz alterado para azul */
--color-info-50: hsl(200, 99%, 95%);
--color-info-100: hsl(200, 99%, 90%);
--color-info-400: hsl(189, 99%, 43%);
--color-info-500: hsl(200, 99%, 56%);
--color-info-600: hsl(200, 99%, 50%);
--color-info-700: hsl(200, 99%, 40%);
--color-info-800: hsl(200, 99%, 30%);
/* Branco (#FFFFFF) e variações */
--color-neutral-50: hsl(0, 0%, 100%); /* Branco puro */
--color-neutral-100: hsl(0, 0%, 98%); /* Branco quase puro */
--color-neutral-200: hsl(0, 0%, 95%); /* Branco com leve tom */
--color-neutral-300: hsl(0, 0%, 90%); /* Branco com tom suave */
--color-neutral-400: hsl(0, 0%, 85%); /* Branco com tom médio */
--color-neutral-500: hsl(0, 0%, 64%); /* #94a3b8 */
--color-neutral-600: hsl(0, 0%, 40%); /* Preto com tom claro */
--color-neutral-700: hsl(0, 0%, 30%); /* Preto com tom médio */
--color-neutral-800: hsl(0, 0%, 20%); /* Preto com tom escuro */
--color-neutral-900: hsl(0, 0%, 10%); /* Preto quase puro */
--color-neutral-950: hsl(0, 0%, 0%); /* Preto puro */
/* ===================================
TIPOGRAFIA
=================================== */
/* Família de fontes */
--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-family-secondary:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-family-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
/* Tamanhos de fonte */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.8; /* 30px */
--font-size-4xl: 2.2rem; /* 36px */
--font-size-5xl: 2.5rem; /* 48px */
/* Pesos de fonte */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Altura de linha */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* ===================================
ESPAÇAMENTOS
=================================== */
/* Sistema baseado em 8px */
--spacing-0: 0;
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-28: 7rem; /* 112px */
/* ===================================
BORDAS E SOMBRAS
=================================== */
/* Raios de borda */
--border-radius-none: 0;
--border-radius-sm: 0.125rem; /* 2px */
--border-radius-base: 0.25rem; /* 4px */
--border-radius-md: 0.375rem; /* 6px */
--border-radius-lg: 0.5rem; /* 8px */
--border-radius-xl: 0.75rem; /* 12px */
--border-radius-2xl: 1rem; /* 16px - Cards */
--border-radius-3xl: 1.5rem; /* 24px - Large cards */
--border-radius-full: 9999px;
/* Espessuras de borda */
--border-width-0: 0;
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-4: 4px;
/* Sombras */
--shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* ===================================
ANIMAÇÕES E TRANSITIONS
=================================== */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* ===================================
Z-INDEX
=================================== */
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
--z-index-dropdown: 1075;
--z-index-toast: 1080;
/* ===================================
BREAKPOINTS
=================================== */
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;
--breakpoint-wide: 1440px;
--breakpoint-xxxl: 1650px;
--breakpoint-xs: 480px;
--breakpoint-desktop: 1024px;
/* Component sizes */
--size-btn-height: 3.5rem;
--height-bg-mobile: 16rem;
/*Refatorar: Excluir eventualmente*/
--bebop-tab-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--bebop-tab-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
--bebop-tab-shadow-active: 0 2px 8px rgba(0, 0, 0, 0.1);
--bebop-tab-shadow-primary: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3);
--bebop-tab-shadow-hover: 0 4px 12px rgba(var(--bs-primary-rgb), 0.1);
--bebop-tab-shadow-hover-strong: 0 4px 12px rgba(var(--bs-primary-rgb), 0.15);
--bebop-tab-shadow-volume: 0 4px 16px rgba(var(--bs-primary-rgb), 0.25);
--bebop-tab-border-divider: 2px solid var(--color-neutral-200);
}
/* === colors.css === */
/* ===================================
BEBOP DESIGN SYSTEM - SISTEMA DE CORES
=================================== */
/* ===================================
CORES DE FUNDO
=================================== */
/* Fundos primários */
.bg-primary-50 {
background-color: var(--color-primary-50) !important;
}
.bg-primary-100 {
background-color: var(--color-primary-100) !important;
}
.bg-primary-200 {
background-color: var(--color-primary-200) !important;
}
.bg-primary-300 {
background-color: var(--color-primary-300) !important;
}
.bg-primary-400 {
background-color: var(--color-primary-400) !important;
}
.bg-primary-500 {
background-color: var(--color-primary-500) !important;
}
.bg-primary-600 {
background-color: var(--color-primary-600) !important;
}
.bg-primary-700 {
background-color: var(--color-primary-700) !important;
}
.bg-primary-800 {
background-color: var(--color-primary-800) !important;
}
.bg-primary-900 {
background-color: var(--color-primary-900) !important;
}
.bg-primary-950 {
background-color: var(--color-primary-950) !important;
}
/* Fundos secundários */
.bg-secondary-50 {
background-color: var(--color-secondary-50) !important;
}
.bg-secondary-100 {
background-color: var(--color-secondary-100) !important;
}
.bg-secondary-200 {
background-color: var(--color-secondary-200) !important;
}
.bg-secondary-300 {
background-color: var(--color-secondary-300) !important;
}
.bg-secondary-400 {
background-color: var(--color-secondary-400) !important;
}
.bg-secondary-500 {
background-color: var(--color-secondary-500) !important;
}
.bg-secondary-600 {
background-color: var(--color-secondary-600) !important;
}
.bg-secondary-700 {
background-color: var(--color-secondary-700) !important;
}
.bg-secondary-800 {
background-color: var(--color-secondary-800) !important;
}
.bg-secondary-900 {
background-color: var(--color-secondary-900) !important;
}
/* Fundos semânticos */
.bg-success-50 {
background-color: var(--color-success-50) !important;
}
.bg-success-100 {
background-color: var(--color-success-100) !important;
}
.bg-success-500 {
background-color: var(--color-success-500) !important;
}
.bg-success-600 {
background-color: var(--color-success-600) !important;
}
.bg-success-700 {
background-color: var(--color-success-700) !important;
}
.bg-warning-50 {
background-color: var(--color-warning-50) !important;
}
.bg-warning-100 {
background-color: var(--color-warning-100) !important;
}
.bg-warning-500 {
background-color: var(--color-warning-500) !important;
}
.bg-warning-600 {
background-color: var(--color-warning-600) !important;
}
.bg-warning-700 {
background-color: var(--color-warning-700) !important;
}
.bg-error-50 {
background-color: var(--color-error-50) !important;
}
.bg-error-100 {
background-color: var(--color-error-100) !important;
}
.bg-error-500 {
background-color: var(--color-error-500) !important;
}
.bg-error-600 {
background-color: var(--color-error-600) !important;
}
.bg-error-700 {
background-color: var(--color-error-700) !important;
}
.bg-info-50 {
background-color: var(--color-info-50) !important;
}
.bg-info-100 {
background-color: var(--color-info-100) !important;
}
.bg-info-500 {
background-color: var(--color-info-500) !important;
}
.bg-info-600 {
background-color: var(--color-info-600) !important;
}
.bg-info-700 {
background-color: var(--color-info-700) !important;
}
/* Fundos neutros */
.bg-neutral-50 {
background-color: var(--color-neutral-50) !important;
}
.bg-neutral-100 {
background-color: var(--color-neutral-100) !important;
}
.bg-neutral-200 {
background-color: var(--color-neutral-200) !important;
}
.bg-neutral-300 {
background-color: var(--color-neutral-300) !important;
}
.bg-neutral-400 {
background-color: var(--color-neutral-400) !important;
}
.bg-neutral-500 {
background-color: var(--color-neutral-500) !important;
}
.bg-neutral-600 {
background-color: var(--color-neutral-600) !important;
}
.bg-neutral-700 {
background-color: var(--color-neutral-700) !important;
}
.bg-neutral-800 {
background-color: var(--color-neutral-800) !important;
}
.bg-neutral-900 {
background-color: var(--color-neutral-900) !important;
}
/* ===================================
CORES DE TEXTO
=================================== */
/* Textos primários */
.text-primary-50 {
color: var(--color-primary-50) !important;
}
.text-primary-100 {
color: var(--color-primary-100) !important;
}
.text-primary-200 {
color: var(--color-primary-200) !important;
}
.text-primary-300 {
color: var(--color-primary-300) !important;
}
.text-primary-400 {
color: var(--color-primary-400) !important;
}
.text-primary-500 {
color: var(--color-primary-500) !important;
}
.text-primary-600 {
color: var(--color-primary-600) !important;
}
.text-primary-700 {
color: var(--color-primary-700) !important;
}
.text-primary-800 {
color: var(--color-primary-800) !important;
}
.text-primary-900 {
color: var(--color-primary-900) !important;
}
.text-primary-950 {
color: var(--color-primary-950) !important;
}
/* Textos secundários */
.text-secondary-50 {
color: var(--color-secondary-50) !important;
}
.text-secondary-100 {
color: var(--color-secondary-100) !important;
}
.text-secondary-200 {
color: var(--color-secondary-200) !important;
}
.text-secondary-300 {
color: var(--color-secondary-300) !important;
}
.text-secondary-400 {
color: var(--color-secondary-400) !important;
}
.text-secondary-500 {
color: var(--color-secondary-500) !important;
}
.text-secondary-600 {
color: var(--color-secondary-600) !important;
}
.text-secondary-700 {
color: var(--color-secondary-700) !important;
}
.text-secondary-800 {
color: var(--color-secondary-800) !important;
}
.text-secondary-900 {
color: var(--color-secondary-900) !important;
}
/* Textos semânticos */
.text-success-50 {
color: var(--color-success-50) !important;
}
.text-success-100 {
color: var(--color-success-100) !important;
}
.text-success-500 {
color: var(--color-success-500) !important;
}
.text-success-600 {
color: var(--color-success-600) !important;
}
.text-success-700 {
color: var(--color-success-700) !important;
}
.text-warning-50 {
color: var(--color-warning-50) !important;
}
.text-warning-100 {
color: var(--color-warning-100) !important;
}
.text-warning-500 {
color: var(--color-warning-500) !important;
}
.text-warning-600 {
color: var(--color-warning-600) !important;
}
.text-warning-700 {
color: var(--color-warning-700) !important;
}
.text-error-50 {
color: var(--color-error-50) !important;
}
.text-error-100 {
color: var(--color-error-100) !important;
}
.text-error-500 {
color: var(--color-error-500) !important;
}
.text-error-600 {
color: var(--color-error-600) !important;
}
.text-error-700 {
color: var(--color-error-700) !important;
}
.text-info-50 {
color: var(--color-info-50) !important;
}
.text-info-100 {
color: var(--color-info-100) !important;
}
.text-info-500 {
color: var(--color-info-500) !important;
}
.text-info-600 {
color: var(--color-info-600) !important;
}
.text-info-700 {
color: var(--color-info-700) !important;
}
/* Textos neutros */
.text-neutral-50 {
color: var(--color-neutral-50) !important;
}
.text-neutral-100 {
color: var(--color-neutral-100) !important;
}
.text-neutral-200 {
color: var(--color-neutral-200) !important;
}
.text-neutral-300 {
color: var(--color-neutral-300) !important;
}
.text-neutral-400 {
color: var(--color-neutral-400) !important;
}
.text-neutral-500 {
color: var(--color-neutral-500) !important;
}
.text-neutral-600 {
color: var(--color-neutral-600) !important;
}
.text-neutral-700 {
color: var(--color-neutral-700) !important;
}
.text-neutral-800 {
color: var(--color-neutral-800) !important;
}
.text-neutral-900 {
color: var(--color-neutral-900) !important;
}
/* ===================================
CORES DE BORDA
=================================== */
/* Bordas primárias */
.border-primary-50 {
border-color: var(--color-primary-50) !important;
}
.border-primary-100 {
border-color: var(--color-primary-100) !important;
}
.border-primary-200 {
border-color: var(--color-primary-200) !important;
}
.border-primary-300 {
border-color: var(--color-primary-300) !important;
}
.border-primary-400 {
border-color: var(--color-primary-400) !important;
}
.border-primary-500 {
border-color: var(--color-primary-500) !important;
}
.border-primary-600 {
border-color: var(--color-primary-600) !important;
}
.border-primary-700 {
border-color: var(--color-primary-700) !important;
}
.border-primary-800 {
border-color: var(--color-primary-800) !important;
}
.border-primary-900 {
border-color: var(--color-primary-900) !important;
}
.border-primary-950 {
border-color: var(--color-primary-950) !important;
}
/* Bordas semânticas */
.border-success-500 {
border-color: var(--color-success-500) !important;
}
.border-warning-500 {
border-color: var(--color-warning-500) !important;
}
.border-error-500 {
border-color: var(--color-error-500) !important;
}
.border-info-500 {
border-color: var(--color-info-500) !important;
}
/* Bordas neutras */
.border-neutral-100 {
border-color: var(--color-neutral-100) !important;
}
.border-neutral-200 {
border-color: var(--color-neutral-200) !important;
}
.border-neutral-300 {
border-color: var(--color-neutral-300) !important;
}
.border-neutral-400 {
border-color: var(--color-neutral-400) !important;
}
/* ===================================
UTILITÁRIOS DE COR
=================================== */
/* Cores de destaque para elementos interativos */
.text-brand {
color: var(--color-primary-600) !important;
}
.bg-brand {
background-color: var(--color-primary-600) !important;
}
.border-brand {
border-color: var(--color-primary-600) !important;
}
/* Cores para estado */
.text-muted {
color: var(--color-neutral-500) !important;
}
.text-disabled {
color: var(--color-neutral-400) !important;
}
.bg-disabled {
background-color: var(--color-neutral-100) !important;
}
/* Cores para links */
.text-link {
color: var(--color-primary-600) !important;
}
.text-link:hover {
color: var(--color-primary-700) !important;
}
/* Cores para feedback */
.text-success {
color: var(--color-success-600) !important;
}
.text-warning {
color: var(--color-warning-600) !important;
}
.text-error {
color: var(--color-error-600) !important;
}
.text-info {
color: var(--color-info-600) !important;
}
/* ===================================
GRADIENTES
=================================== */
.bg-gradient-primary {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
}
.bg-gradient-secondary {
background: linear-gradient(
135deg,
var(--color-secondary-500) 0%,
var(--color-secondary-600) 100%
) !important;
}
.bg-gradient-brand {
background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%) !important;
}
/* ===================================
OVERLAYS E TRANSPARÊNCIAS
=================================== */
.overlay-primary-10 {
background-color: rgba(59, 130, 246, 0.1) !important;
}
.overlay-primary-20 {
background-color: rgba(59, 130, 246, 0.2) !important;
}
.overlay-primary-30 {
background-color: rgba(59, 130, 246, 0.3) !important;
}
.overlay-neutral-10 {
background-color: rgba(0, 0, 0, 0.1) !important;
}
.overlay-neutral-20 {
background-color: rgba(0, 0, 0, 0.2) !important;
}
.overlay-neutral-30 {
background-color: rgba(0, 0, 0, 0.3) !important;
}
/* ===================================
CLASSES DE CONTRASTE GARANTIDO
=================================== */
/* Texto em fundos claros - usa 900/950 para alto contraste */
.text-on-light {
color: var(--color-primary-950) !important;
}
/* Texto em fundo verde médio (400/500) - usa branco */
.text-on-green-500 {
color: var(--color-neutral-50) !important;
}
/* Texto em fundo verde escuro (700+) - sempre branco */
.text-on-green-700 {
color: var(--color-neutral-50) !important;
}
.text-on-green-800 {
color: var(--color-neutral-50) !important;
}
.text-on-green-900 {
color: var(--color-neutral-50) !important;
}
/* === typography.css === */
/* ===================================
BEBOP DESIGN SYSTEM - SISTEMA TIPOGRÁFICO
=================================== */
/* ===================================
CONFIGURAÇÃO BASE
=================================== */
body {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-primary-950);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===================================
CABEÇALHOS
=================================== */
/* H1 - Título principal da página */
h1,
.h1 {
font-family: var(--font-family-primary);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-primary-950);
margin-bottom: var(--spacing-6);
letter-spacing: -0.025em;
}
/* H2 - Títulos de seção */
h2,
.h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-primary-950);
margin-bottom: var(--spacing-5);
letter-spacing: -0.025em;
}
/* H3 - Subtítulos */
h3,
.h3 {
font-family: var(--font-family-primary);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-primary-950);
margin-bottom: var(--spacing-4);
}
/* H4 - Títulos de subseção */
h4,
.h4 {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-neutral-700);
margin-bottom: var(--spacing-3);
}
/* H5 - Títulos pequenos */
h5,
.h5 {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-neutral-700);
margin-bottom: var(--spacing-2);
}
/* H6 - Títulos muito pequenos */
h6,
.h6 {
font-family: var(--font-family-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-neutral-600);
margin-bottom: var(--spacing-2);
}
/* ===================================
TEXTOS CORRIDOS
=================================== */
/* Texto base */
.text-base {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-neutral-700);
}
/* Texto grande */
.text-lg {
font-family: var(--font-family-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
/* Texto pequeno */
.text-sm {
font-family: var(--font-family-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-neutral-600);
}
/* Texto extra pequeno */
.text-xs {
font-family: var(--font-family-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-neutral-500);
}
/* ===================================
PESOS DE FONTE
=================================== */
.font-light {
font-weight: var(--font-weight-light);
}
.font-normal {
font-weight: var(--font-weight-normal);
}
.font-medium {
font-weight: var(--font-weight-medium);
}
.font-semibold {
font-weight: var(--font-weight-semibold);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
.font-extrabold {
font-weight: var(--font-weight-extrabold);
}
/* ===================================
ALTURAS DE LINHA
=================================== */
.leading-tight {
line-height: var(--line-height-tight);
}
.leading-normal {
line-height: var(--line-height-normal);
}
.leading-relaxed {
line-height: var(--line-height-relaxed);
}
/* ===================================
ALINHAMENTOS
=================================== */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
/* ===================================
TRANSFORMAÇÕES
=================================== */
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.normal-case {
text-transform: none;
}
/* ===================================
DECORAÇÕES
=================================== */
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.no-underline {
text-decoration: none;
}
/* ===================================
ESPAÇAMENTOS
=================================== */
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-normal {
letter-spacing: 0;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
/* ===================================
CORES DE TEXTO
=================================== */
.text-heading {
color: var(--color-primary-950);
}
.text-body {
color: var(--color-primary-800);
}
.text-muted {
color: var(--color-neutral-500);
}
.text-disabled {
color: var(--color-neutral-400);
}
/* ===================================
ESTILOS ESPECIAIS
=================================== */
/* Texto de destaque */
.text-emphasis {
font-weight: var(--font-weight-semibold);
color: var(--color-primary-600);
}
/* Texto de código */
.text-code {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
background-color: var(--color-neutral-100);
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--border-radius-base);
color: var(--color-neutral-700);
}
/* Texto de citação */
.text-quote {
font-style: italic;
color: var(--color-neutral-600);
border-left: 4px solid var(--color-primary-200);
padding-left: var(--spacing-4);
margin: var(--spacing-4) 0;
}
/* ===================================
RESPONSIVIDADE
=================================== */
@media (max-width: 1650px) {
h1,
.h1 {
font-size: var(--font-size-4xl);
}
h2,
.h2 {
font-size: var(--font-size-3xl);
}
h3,
.h3 {
font-size: var(--font-size-2xl);
}
h4,
.h4 {
font-size: var(--font-size-xl);
}
h5,
.h5 {
font-size: var(--font-size-lg);
}
h6,
.h6 {
font-size: var(--font-size-base);
}
}
@media (max-width: 576px) {
h1,
.h1 {
font-size: var(--font-size-3xl);
}
h2,
.h2 {
font-size: var(--font-size-2xl);
}
h3,
.h3 {
font-size: var(--font-size-xl);
}
h4,
.h4 {
font-size: var(--font-size-lg);
}
h5,
.h5 {
font-size: var(--font-size-base);
}
h6,
.h6 {
font-size: var(--font-size-sm);
}
}
/* ===================================
UTILITÁRIOS DE TEXTO
=================================== */
/* Truncamento de texto */
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Quebra de palavras */
.break-words {
word-wrap: break-word;
}
.break-all {
word-break: break-all;
}
/* Seleção de texto */
::selection {
background-color: var(--color-primary-200);
color: var(--color-primary-950);
}
::-moz-selection {
background-color: var(--color-primary-200);
color: var(--color-primary-950);
}
/* ===================================
CLASSES TIPOGRÁFICAS ESPECÍFICAS
=================================== */
/* Hero Headlines - Títulos principais / Feature titles */
.text-hero {
font-family: var(--font-family-primary);
font-size: clamp(2.25rem, 5vw, 3rem); /* 36px - 48px responsivo */
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-primary-950);
letter-spacing: -0.025em;
}
/* Card Titles - Títulos de cards */
.text-card-title {
font-family: var(--font-family-primary);
font-size: clamp(1.25rem, 2vw, 1.5rem); /* 20px - 24px responsivo */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-primary-950);
}
/* Numeric Values - Valores numéricos / Dados financeiros */
.text-numeric {
font-family: var(--font-family-primary);
font-size: clamp(1.5rem, 3vw, 2rem); /* 24px - 32px responsivo */
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-primary-950);
}
/* Secondary Text - Texto secundário / Detalhes */
.text-secondary {
font-family: var(--font-family-primary);
font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px - 16px responsivo */
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-primary-800);
}
/* === spacing.css === */
/* ===================================
BEBOP DESIGN SYSTEM - SISTEMA DE ESPAÇAMENTOS
=================================== */
/* ===================================
MARGENS
=================================== */
/* Margem 0 */
.m-0 {
margin: var(--spacing-0) !important;
}
.m-1 {
margin: var(--spacing-1) !important;
}
.m-2 {
margin: var(--spacing-2) !important;
}
.m-3 {
margin: var(--spacing-3) !important;
}
.m-4 {
margin: var(--spacing-4) !important;
}
.m-5 {
margin: var(--spacing-5) !important;
}
.m-6 {
margin: var(--spacing-6) !important;
}
.m-8 {
margin: var(--spacing-8) !important;
}
.m-10 {
margin: var(--spacing-10) !important;
}
.m-12 {
margin: var(--spacing-12) !important;
}
.m-16 {
margin: var(--spacing-16) !important;
}
.m-20 {
margin: var(--spacing-20) !important;
}
.m-24 {
margin: var(--spacing-24) !important;
}
/* Margem automática */
.m-auto {
margin: auto !important;
}
/* Margens horizontais */
.mx-0 {
margin-left: var(--spacing-0) !important;
margin-right: var(--spacing-0) !important;
}
.mx-1 {
margin-left: var(--spacing-1) !important;
margin-right: var(--spacing-1) !important;
}
.mx-2 {
margin-left: var(--spacing-2) !important;
margin-right: var(--spacing-2) !important;
}
.mx-3 {
margin-left: var(--spacing-3) !important;
margin-right: var(--spacing-3) !important;
}
.mx-4 {
margin-left: var(--spacing-4) !important;
margin-right: var(--spacing-4) !important;
}
.mx-5 {
margin-left: var(--spacing-5) !important;
margin-right: var(--spacing-5) !important;
}
.mx-6 {
margin-left: var(--spacing-6) !important;
margin-right: var(--spacing-6) !important;
}
.mx-8 {
margin-left: var(--spacing-8) !important;
margin-right: var(--spacing-8) !important;
}
.mx-10 {
margin-left: var(--spacing-10) !important;
margin-right: var(--spacing-10) !important;
}
.mx-12 {
margin-left: var(--spacing-12) !important;
margin-right: var(--spacing-12) !important;
}
.mx-16 {
margin-left: var(--spacing-16) !important;
margin-right: var(--spacing-16) !important;
}
.mx-20 {
margin-left: var(--spacing-20) !important;
margin-right: var(--spacing-20) !important;
}
.mx-24 {
margin-left: var(--spacing-24) !important;
margin-right: var(--spacing-24) !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
/* Margens verticais */
.my-0 {
margin-top: var(--spacing-0) !important;
margin-bottom: var(--spacing-0) !important;
}
.my-1 {
margin-top: var(--spacing-1) !important;
margin-bottom: var(--spacing-1) !important;
}
.my-2 {
margin-top: var(--spacing-2) !important;
margin-bottom: var(--spacing-2) !important;
}
.my-3 {
margin-top: var(--spacing-3) !important;
margin-bottom: var(--spacing-3) !important;
}
.my-4 {
margin-top: var(--spacing-4) !important;
margin-bottom: var(--spacing-4) !important;
}
.my-5 {
margin-top: var(--spacing-5) !important;
margin-bottom: var(--spacing-5) !important;
}
.my-6 {
margin-top: var(--spacing-6) !important;
margin-bottom: var(--spacing-6) !important;
}
.my-8 {
margin-top: var(--spacing-8) !important;
margin-bottom: var(--spacing-8) !important;
}
.my-10 {
margin-top: var(--spacing-10) !important;
margin-bottom: var(--spacing-10) !important;
}
.my-12 {
margin-top: var(--spacing-12) !important;
margin-bottom: var(--spacing-12) !important;
}
.my-16 {
margin-top: var(--spacing-16) !important;
margin-bottom: var(--spacing-16) !important;
}
.my-20 {
margin-top: var(--spacing-20) !important;
margin-bottom: var(--spacing-20) !important;
}
.my-24 {
margin-top: var(--spacing-24) !important;
margin-bottom: var(--spacing-24) !important;
}
/* Margens individuais */
.mt-0 {
margin-top: var(--spacing-0) !important;
}
.mt-1 {
margin-top: var(--spacing-1) !important;
}
.mt-2 {
margin-top: var(--spacing-2) !important;
}
.mt-3 {
margin-top: var(--spacing-3) !important;
}
.mt-4 {
margin-top: var(--spacing-4) !important;
}
.mt-5 {
margin-top: var(--spacing-5) !important;
}
.mt-6 {
margin-top: var(--spacing-6) !important;
}
.mt-8 {
margin-top: var(--spacing-8) !important;
}
.mt-10 {
margin-top: var(--spacing-10) !important;
}
.mt-12 {
margin-top: var(--spacing-12) !important;
}
.mt-16 {
margin-top: var(--spacing-16) !important;
}
.mt-20 {
margin-top: var(--spacing-20) !important;
}
.mt-24 {
margin-top: var(--spacing-24) !important;
}
.mt-28 {
margin-top: var(--spacing-28) !important;
}
.mb-0 {
margin-bottom: var(--spacing-0) !important;
}
.mb-1 {
margin-bottom: var(--spacing-1) !important;
}
.mb-2 {
margin-bottom: var(--spacing-2) !important;
}
.mb-3 {
margin-bottom: var(--spacing-3) !important;
}
.mb-4 {
margin-bottom: var(--spacing-4) !important;
}
.mb-5 {
margin-bottom: var(--spacing-5) !important;
}
.mb-6 {
margin-bottom: var(--spacing-6) !important;
}
.mb-8 {
margin-bottom: var(--spacing-8) !important;
}
.mb-10 {
margin-bottom: var(--spacing-10) !important;
}
.mb-12 {
margin-bottom: var(--spacing-12) !important;
}
.mb-16 {
margin-bottom: var(--spacing-16) !important;
}
.mb-20 {
margin-bottom: var(--spacing-20) !important;
}
.mb-24 {
margin-bottom: var(--spacing-24) !important;
}
.mb-28 {
margin-bottom: var(--spacing-28) !important;
}
.mb-100 {
/* margin-bottom: 100px !important;*/
}
.ml-0 {
margin-left: var(--spacing-0) !important;
}
.ml-1 {
margin-left: var(--spacing-1) !important;
}
.ml-2 {
margin-left: var(--spacing-2) !important;
}
.ml-3 {
margin-left: var(--spacing-3) !important;
}
.ml-4 {
margin-left: var(--spacing-4) !important;
}
.ml-5 {
margin-left: var(--spacing-5) !important;
}
.ml-6 {
margin-left: var(--spacing-6) !important;
}
.ml-8 {
margin-left: var(--spacing-8) !important;
}
.ml-10 {
margin-left: var(--spacing-10) !important;
}
.ml-12 {
margin-left: var(--spacing-12) !important;
}
.ml-16 {
margin-left: var(--spacing-16) !important;
}
.ml-20 {
margin-left: var(--spacing-20) !important;
}
.ml-24 {
margin-left: var(--spacing-24) !important;
}
.mr-0 {
margin-right: var(--spacing-0) !important;
}
.mr-1 {
margin-right: var(--spacing-1) !important;
}
.mr-2 {
margin-right: var(--spacing-2) !important;
}
.mr-3 {
margin-right: var(--spacing-3) !important;
}
.mr-4 {
margin-right: var(--spacing-4) !important;
}
.mr-5 {
margin-right: var(--spacing-5) !important;
}
.mr-6 {
margin-right: var(--spacing-6) !important;
}
.mr-8 {
margin-right: var(--spacing-8) !important;
}
.mr-10 {
margin-right: var(--spacing-10) !important;
}
.mr-12 {
margin-right: var(--spacing-12) !important;
}
.mr-16 {
margin-right: var(--spacing-16) !important;
}
.mr-20 {
margin-right: var(--spacing-20) !important;
}
.mr-24 {
margin-right: var(--spacing-24) !important;
}
/* ===================================
PADDINGS
=================================== */
/* Padding 0 */
.p-0 {
padding: var(--spacing-0) !important;
}
.p-1 {
padding: var(--spacing-1) !important;
}
.p-2 {
padding: var(--spacing-2) !important;
}
.p-3 {
padding: var(--spacing-3) !important;
}
.p-4 {
padding: var(--spacing-4) !important;
}
.p-5 {
padding: var(--spacing-5) !important;
}
.p-6 {
padding: var(--spacing-6) !important;
}
.p-8 {
padding: var(--spacing-8) !important;
}
.p-10 {
padding: var(--spacing-10) !important;
}
.p-12 {
padding: var(--spacing-12) !important;
}
.p-16 {
padding: var(--spacing-16) !important;
}
.p-20 {
padding: var(--spacing-20) !important;
}
.p-24 {
padding: var(--spacing-24) !important;
}
/* Paddings horizontais */
.px-0 {
padding-left: var(--spacing-0) !important;
padding-right: var(--spacing-0) !important;
}
.px-1 {
padding-left: var(--spacing-1) !important;
padding-right: var(--spacing-1) !important;
}
.px-2 {
padding-left: var(--spacing-2) !important;
padding-right: var(--spacing-2) !important;
}
.px-3 {
padding-left: var(--spacing-3) !important;
padding-right: var(--spacing-3) !important;
}
.px-4 {
padding-left: var(--spacing-4) !important;
padding-right: var(--spacing-4) !important;
}
.px-5 {
padding-left: var(--spacing-5) !important;
padding-right: var(--spacing-5) !important;
}
.px-6 {
padding-left: var(--spacing-6) !important;
padding-right: var(--spacing-6) !important;
}
.px-8 {
padding-left: var(--spacing-8) !important;
padding-right: var(--spacing-8) !important;
}
.px-10 {
padding-left: var(--spacing-10) !important;
padding-right: var(--spacing-10) !important;
}
.px-12 {
padding-left: var(--spacing-12) !important;
padding-right: var(--spacing-12) !important;
}
.px-16 {
padding-left: var(--spacing-16) !important;
padding-right: var(--spacing-16) !important;
}
.px-20 {
padding-left: var(--spacing-20) !important;
padding-right: var(--spacing-20) !important;
}
.px-24 {
padding-left: var(--spacing-24) !important;
padding-right: var(--spacing-24) !important;
}
/* Paddings verticais */
.py-0 {
padding-top: var(--spacing-0) !important;
padding-bottom: var(--spacing-0) !important;
}
.py-1 {
padding-top: var(--spacing-1) !important;
padding-bottom: var(--spacing-1) !important;
}
.py-2 {
padding-top: var(--spacing-2) !important;
padding-bottom: var(--spacing-2) !important;
}
.py-3 {
padding-top: var(--spacing-3) !important;
padding-bottom: var(--spacing-3) !important;
}
.py-4 {
padding-top: var(--spacing-4) !important;
padding-bottom: var(--spacing-4) !important;
}
.py-5 {
padding-top: var(--spacing-5) !important;
padding-bottom: var(--spacing-5) !important;
}
.py-6 {
padding-top: var(--spacing-6) !important;
padding-bottom: var(--spacing-6) !important;
}
.py-8 {
padding-top: var(--spacing-8) !important;
padding-bottom: var(--spacing-8) !important;
}
.py-10 {
padding-top: var(--spacing-10) !important;
padding-bottom: var(--spacing-10) !important;
}
.py-12 {
padding-top: var(--spacing-12) !important;
padding-bottom: var(--spacing-12) !important;
}
.py-16 {
padding-top: var(--spacing-16) !important;
padding-bottom: var(--spacing-16) !important;
}
.py-20 {
padding-top: var(--spacing-20) !important;
padding-bottom: var(--spacing-20) !important;
}
.py-24 {
padding-top: var(--spacing-24) !important;
padding-bottom: var(--spacing-24) !important;
}
/* Paddings individuais */
.pt-0 {
padding-top: var(--spacing-0) !important;
}
.pt-1 {
padding-top: var(--spacing-1) !important;
}
.pt-2 {
padding-top: var(--spacing-2) !important;
}
.pt-3 {
padding-top: var(--spacing-3) !important;
}
.pt-4 {
padding-top: var(--spacing-4) !important;
}
.pt-5 {
padding-top: var(--spacing-5) !important;
}
.pt-6 {
padding-top: var(--spacing-6) !important;
}
.pt-8 {
padding-top: var(--spacing-8) !important;
}
.pt-10 {
padding-top: var(--spacing-10) !important;
}
.pt-12 {
padding-top: var(--spacing-12) !important;
}
.pt-16 {
padding-top: var(--spacing-16) !important;
}
.pt-20 {
padding-top: var(--spacing-20) !important;
}
.pt-24 {
padding-top: var(--spacing-24) !important;
}
.pb-0 {
padding-bottom: var(--spacing-0) !important;
}
.pb-1 {
padding-bottom: var(--spacing-1) !important;
}
.pb-2 {
padding-bottom: var(--spacing-2) !important;
}
.pb-3 {
padding-bottom: var(--spacing-3) !important;
}
.pb-4 {
padding-bottom: var(--spacing-4) !important;
}
.pb-5 {
padding-bottom: var(--spacing-5) !important;
}
.pb-6 {
padding-bottom: var(--spacing-6) !important;
}
.pb-8 {
padding-bottom: var(--spacing-8) !important;
}
.pb-10 {
padding-bottom: var(--spacing-10) !important;
}
.pb-12 {
padding-bottom: var(--spacing-12) !important;
}
.pb-16 {
padding-bottom: var(--spacing-16) !important;
}
.pb-20 {
padding-bottom: var(--spacing-20) !important;
}
.pb-24 {
padding-bottom: var(--spacing-24) !important;
}
.pl-0 {
padding-left: var(--spacing-0) !important;
}
.pl-1 {
padding-left: var(--spacing-1) !important;
}
.pl-2 {
padding-left: var(--spacing-2) !important;
}
.pl-3 {
padding-left: var(--spacing-3) !important;
}
.pl-4 {
padding-left: var(--spacing-4) !important;
}
.pl-5 {
padding-left: var(--spacing-5) !important;
}
.pl-6 {
padding-left: var(--spacing-6) !important;
}
.pl-8 {
padding-left: var(--spacing-8) !important;
}
.pl-10 {
padding-left: var(--spacing-10) !important;
}
.pl-12 {
padding-left: var(--spacing-12) !important;
}
.pl-16 {
padding-left: var(--spacing-16) !important;
}
.pl-20 {
padding-left: var(--spacing-20) !important;
}
.pl-24 {
padding-left: var(--spacing-24) !important;
}
.pr-0 {
padding-right: var(--spacing-0) !important;
}
.pr-1 {
padding-right: var(--spacing-1) !important;
}
.pr-2 {
padding-right: var(--spacing-2) !important;
}
.pr-3 {
padding-right: var(--spacing-3) !important;
}
.pr-4 {
padding-right: var(--spacing-4) !important;
}
.pr-5 {
padding-right: var(--spacing-5) !important;
}
.pr-6 {
padding-right: var(--spacing-6) !important;
}
.pr-8 {
padding-right: var(--spacing-8) !important;
}
.pr-10 {
padding-right: var(--spacing-10) !important;
}
.pr-12 {
padding-right: var(--spacing-12) !important;
}
.pr-16 {
padding-right: var(--spacing-16) !important;
}
.pr-20 {
padding-right: var(--spacing-20) !important;
}
.pr-24 {
padding-right: var(--spacing-24) !important;
}
/* ===================================
GAPS
=================================== */
.gap-0 {
gap: var(--spacing-0) !important;
}
.gap-1 {
gap: var(--spacing-1) !important;
}
.gap-2 {
gap: var(--spacing-2) !important;
}
.gap-3 {
gap: var(--spacing-3) !important;
}
.gap-4 {
gap: var(--spacing-4) !important;
}
.gap-5 {
gap: var(--spacing-5) !important;
}
.gap-6 {
gap: var(--spacing-6) !important;
}
.gap-8 {
gap: var(--spacing-8) !important;
}
.gap-10 {
gap: var(--spacing-10) !important;
}
.gap-12 {
gap: var(--spacing-12) !important;
}
.gap-16 {
gap: var(--spacing-16) !important;
}
.gap-20 {
gap: var(--spacing-20) !important;
}
.gap-24 {
gap: var(--spacing-24) !important;
}
/* ===================================
ESPAÇAMENTOS ESPECIAIS
=================================== */
/* Espaçamento entre elementos */
.space-y-1 > * + * {
margin-top: var(--spacing-1) !important;
}
.space-y-2 > * + * {
margin-top: var(--spacing-2) !important;
}
.space-y-3 > * + * {
margin-top: var(--spacing-3) !important;
}
.space-y-4 > * + * {
margin-top: var(--spacing-4) !important;
}
.space-y-5 > * + * {
margin-top: var(--spacing-5) !important;
}
.space-y-6 > * + * {
margin-top: var(--spacing-6) !important;
}
.space-y-8 > * + * {
margin-top: var(--spacing-8) !important;
}
.space-y-10 > * + * {
margin-top: var(--spacing-10) !important;
}
.space-y-12 > * + * {
margin-top: var(--spacing-12) !important;
}
.space-y-16 > * + * {
margin-top: var(--spacing-16) !important;
}
.space-y-20 > * + * {
margin-top: var(--spacing-20) !important;
}
.space-y-24 > * + * {
margin-top: var(--spacing-24) !important;
}
.space-x-1 > * + * {
margin-left: var(--spacing-1) !important;
}
.space-x-2 > * + * {
margin-left: var(--spacing-2) !important;
}
.space-x-3 > * + * {
margin-left: var(--spacing-3) !important;
}
.space-x-4 > * + * {
margin-left: var(--spacing-4) !important;
}
.space-x-5 > * + * {
margin-left: var(--spacing-5) !important;
}
.space-x-6 > * + * {
margin-left: var(--spacing-6) !important;
}
.space-x-8 > * + * {
margin-left: var(--spacing-8) !important;
}
.space-x-10 > * + * {
margin-left: var(--spacing-10) !important;
}
.space-x-12 > * + * {
margin-left: var(--spacing-12) !important;
}
.space-x-16 > * + * {
margin-left: var(--spacing-16) !important;
}
.space-x-20 > * + * {
margin-left: var(--spacing-20) !important;
}
.space-x-24 > * + * {
margin-left: var(--spacing-24) !important;
}
/* ===================================
UTILITÁRIOS DE LAYOUT
=================================== */
/* Container com espaçamento automático */
.container {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--spacing-4) !important;
padding-right: var(--spacing-4) !important;
}
@media (min-width: 640px) {
.container {
max-width: 640px !important;
}
}
@media (min-width: 768px) {
.container {
max-width: 1650px !important;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px !important;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px !important;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px !important;
}
}
/* Seções com espaçamento padrão */
.section {
padding: var(--spacing-16) 0 !important;
}
.section-sm {
padding: var(--spacing-8) 0 !important;
}
.section-lg {
padding: var(--spacing-24) 0 !important;
}
/* Formulários com espaçamento entre campos */
.form-group {
margin-bottom: var(--spacing-4) !important;
}
.form-group-sm {
margin-bottom: var(--spacing-2) !important;
}
.form-group-lg {
margin-bottom: var(--spacing-6) !important;
}
/* === keyframes.css === */
@keyframes bebop-skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@keyframes bebop-skeleton-pulse {
0% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
@keyframes bebop-skeleton-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes bebop-skeleton-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes bebop-skeleton-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Fade in */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Slide up */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scale in */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Animação Shake do botão */
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-3px);
}
50% {
transform: translateX(3px);
}
75% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
/* Animação slideDown */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(1.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.shake-animation {
animation: shake 0.3s ease-in-out;
animation-iteration-count: 2;
}
.shake-animation:hover {
animation: shake 0.3s ease-in-out;
}
.fade-in {
animation: fadeIn var(--transition-normal) ease-in-out;
}
.slide-up {
animation: slideUp var(--transition-normal) ease-out;
}
.scale-in {
animation: scaleIn var(--transition-normal) ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bebopDotMove {
0% {
opacity: 0.25;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
transform: translateY(-0.375rem) scale(1.2);
}
50% {
opacity: 0.6;
transform: translateY(0) scale(1);
}
100% {
opacity: 0.25;
transform: translateY(0) scale(1);
}
}
@keyframes bebop-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(var(--bs-info-rgb), 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(var(--bs-info-rgb), 0);
}
}
@keyframes logoFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.3125rem);
}
}
@keyframes bounceIn {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse-badge {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* === google-icon.css === */
/* Google "G" logo – use with */
.google-icon {
display: inline-block;
flex-shrink: 0;
width: 20px;
height: 20px;
background-image: url('/design-system/icons/google-icon.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* === app.css === */
/* ===================================
APP LAYOUT
=================================== */
/* Background da aplicação - painel admin apos login */
.app-background {
background-color: var(--color-neutral-100); /* Cinza claro */
min-height: 100vh;
width: 100%;
}
/* === btn.css === */
/* Botão base */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: var(--spacing-3) var(--spacing-4);
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
text-decoration: none;
border: var(--border-width-1) solid transparent;
border-radius: var(--border-radius-lg);
cursor: pointer;
transition: all var(--transition-normal);
user-select: none;
white-space: nowrap;
vertical-align: middle;
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(64, 173, 58, 0.25);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* .btn-primary (filled) - overrides Bootstrap */
.btn-primary {
background: var(--color-primary-500);
border-color: var(--color-primary-500);
color: var(--color-neutral-50);
}
.btn-primary:hover:not(:disabled) {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
color: var(--color-neutral-50);
box-shadow: 0 4px 12px rgba(64, 173, 58, 0.25);
transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
box-shadow: none;
}
.btn-secondary {
background: var(--color-neutral-50);
border: var(--border-width-2) solid var(--color-primary-200);
color: var(--color-primary-950);
}
.btn-secondary:hover:not(:disabled) {
border-color: var(--color-primary-500);
background: var(--color-primary-50);
color: var(--color-primary-950);
box-shadow: 0 4px 12px rgba(64, 173, 58, 0.15);
transform: translateY(-1px);
}
.btn-secondary:active:not(:disabled) {
transform: translateY(0);
box-shadow: none;
}
.btn-secondary .bi {
color: var(--color-primary-600);
}
.btn-secondary:hover:not(:disabled) .bi {
color: var(--color-primary-700);
}
/* Tamanhos de botão */
.btn-sm {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
border-radius: var(--border-radius-md);
}
.btn-lg {
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-lg);
border-radius: var(--border-radius-xl);
}
.btn-xl {
padding: var(--spacing-5) var(--spacing-8);
font-size: var(--font-size-xl);
border-radius: var(--border-radius-xl);
}
.btn-filter {
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-lg);
font-size: var(--font-size-sm);
transition: all var(--transition-fast);
padding: var(--spacing-3) 16px;
background: var(--color-neutral-50);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.btn-filter:hover:not(:disabled) {
background: var(--color-neutral-50);
border-color: var(--color-primary-300);
}
/* ===================================
ACTION ICON BUTTONS (38x38 square)
=================================== */
.btn-action-download,
.btn-action-remove,
.btn-action-select,
.btn-action-upload {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
padding: 0;
border-radius: 10px;
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
font-size: 1rem;
}
.btn-action-download {
background: var(--color-neutral-100);
color: var(--color-info-600);
border-color: var(--color-neutral-200);
}
.btn-action-download:hover:not(:disabled) {
background: var(--color-info-600);
color: var(--color-neutral-50);
border-color: var(--color-info-600);
}
.btn-action-remove {
background: var(--color-neutral-100);
color: var(--color-error-500);
border-color: var(--color-neutral-200);
}
.btn-action-remove:hover:not(:disabled) {
background: var(--color-error-500);
color: var(--color-neutral-50);
border-color: var(--color-error-500);
}
.btn-action-select {
background: linear-gradient(135deg, var(--color-info-600) 0%, var(--color-info-700) 100%);
color: var(--color-neutral-50);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.btn-action-select:hover:not(:disabled),
.btn-action-select.active {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.btn-action-upload {
background: linear-gradient(
135deg,
var(--color-secondary-600) 0%,
var(--color-secondary-400) 100%
);
color: var(--color-neutral-50);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.btn-action-upload:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}
.back-btn {
order: 2;
border: 1px solid var(--color-error-650) !important;
background: var(--color-error-650) !important;
color: var(--color-neutral-50) !important;
}
.back-btn:hover {
background: var(--color-error-750) !important;
border-color: var(--color-error-750) !important;
color: var(--color-neutral-50) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}
@media (min-width: 768px) {
.back-btn {
order: 0;
flex: 1;
}
}
.btn-shortcut {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: 0.625rem 1.25rem;
background: transparent;
color: var(--color-primary-500);
border: 2px solid var(--color-primary-500);
border-radius: var(--border-radius-lg);
font-size: 0.5625rem;
font-weight: 500;
text-decoration: none;
transition: all var(--transition-fast);
cursor: pointer;
}
.btn-shortcut:hover {
background: var(--color-primary-500);
color: var(--color-neutral-50);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(33, 254, 51, 0.2);
}
.btn-shortcut:active {
transform: translateY(0);
}
.btn-shortcut i {
font-size: 0.625rem;
}
@media (max-width: 1650px) {
.btn-shortcut {
font-size: 0.53125rem;
padding: var(--spacing-2) 1rem;
}
}
.btn-desktop-view {
display: none !important;
}
.btn-mobile-view {
display: flex !important;
}
@media (min-width: 1536px) {
.btn-desktop-view {
display: flex !important;
}
.btn-mobile-view {
display: none !important;
}
}
/* === card.css === */
/* Card base */
.card {
background-color: white;
border: var(--border-width-1) solid var(--color-primary-200);
border-radius: var(--border-radius-2xl);
box-shadow: var(--shadow-sm);
transition:
transform 0.3s ease-in-out,
box-shadow 0.3s ease-in-out,
all var(--transition-normal);
overflow: hidden;
padding: var(--spacing-4);
}
/* Card com fundo verde claro */
.card-light-green {
background-color: var(--color-primary-50);
border-color: var(--color-primary-200);
}
/* Cabeçalho do card */
.card-header {
padding: var(--spacing-3) var(--spacing-4);
border-bottom: var(--border-width-1) solid var(--color-primary-200);
background-color: transparent !important;
background: transparent !important;
}
.card-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-primary-950);
margin: 0;
}
.card-subtitle {
font-family: var(--font-family-primary);
font-size: var(--font-size-sm);
color: var(--color-neutral-500);
margin: var(--spacing-1) 0 0 0;
}
/* Corpo do card */
.card-body {
padding: var(--spacing-4) var(--spacing-5);
}
/* Rodapé do card */
.card-footer {
padding: var(--spacing-4) var(--spacing-5);
border-top: var(--border-width-1) solid var(--color-primary-200);
background-color: var(--color-primary-50);
border-radius: 0 0 var(--border-radius-2xl) var(--border-radius-2xl);
}
/* Variantes de card */
.card-primary {
border-color: var(--color-primary-200);
}
.card-primary .card-header {
background-color: var(--color-primary-50);
border-bottom-color: var(--color-primary-200);
}
.card-success {
border-color: var(--color-success-200);
}
.card-success .card-header {
background-color: var(--color-success-50);
border-bottom-color: var(--color-success-200);
}
.card-warning {
border-color: var(--color-warning-200);
}
.card-warning .card-header {
background-color: var(--color-warning-50);
border-bottom-color: var(--color-warning-200);
}
.card-error {
border-color: var(--color-error-200);
}
.card-error .card-header {
background-color: var(--color-error-50);
border-bottom-color: var(--color-error-200);
}
.card-badges {
position: absolute;
top: 8px;
left: 8px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 6px;
}
.card-sm {
padding: var(--spacing-3);
}
.card-lg {
padding: var(--spacing-8);
}
.card-header {
background-color: transparent !important;
background: transparent !important;
}
@media (max-width: 768px) {
.card-badges {
top: 6px;
left: 6px;
gap: 4px;
}
}
/* === badge.css === */
/* ===================================
BADGES
=================================== */
/* Badge base */
.badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-1) var(--spacing-2);
font-family: var(--font-family-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
border-radius: var(--border-radius-full);
white-space: nowrap;
}
/* Variantes de badge */
.badge-primary {
background-color: var(--color-primary-100);
color: var(--color-primary-800);
}
.badge-secondary {
background-color: var(--color-secondary-100);
color: var(--color-secondary-800);
}
.badge-success {
background-color: var(--color-success-100);
color: var(--color-success-800);
}
.badge-warning {
background-color: var(--color-warning-100);
color: var(--color-warning-800);
}
.badge-error {
background-color: var(--color-error-100);
color: var(--color-error-800);
}
.badge-neutral {
background-color: var(--color-neutral-100);
color: var(--color-neutral-800);
}
/* Tamanhos de badge */
.badge-sm {
padding: var(--spacing-1);
font-size: 0.75rem;
}
.badge-lg {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
}
/* === alert.css === */
/* ===================================
ALERTS BOOTSTRAP (SEM SOBRESCRITA)
=================================== */
/* Manter apenas estilos básicos sem interferir nas cores do Bootstrap */
.alert {
font-family: var(--font-family-primary);
border-radius: var(--border-radius-lg);
}
/* Estilos para ícones dentro dos alerts (opcional) */
.alert i,
.alert .bi {
margin-right: var(--spacing-2);
font-size: var(--font-size-lg);
}
/* === nav.css === */
/* ===================================
NAVEGAÇÃO
=================================== */
/* Navegação base */
.nav {
display: flex;
align-items: center;
gap: var(--spacing-1);
}
.nav-item {
display: flex;
align-items: center;
}
.nav-link {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-4);
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-neutral-600);
text-decoration: none;
border-radius: var(--border-radius-lg);
transition: all var(--transition-normal);
}
.nav-link:hover {
background-color: var(--color-neutral-100);
color: var(--color-neutral-900);
}
.nav-link.active {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
}
/* Navegação vertical */
.nav-vertical {
flex-direction: column;
align-items: stretch;
}
.nav-vertical .nav-link {
justify-content: flex-start;
}
/* === modal.css === */
/* ===================================
MODAIS
=================================== */
/* Overlay do modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-index-modal-backdrop);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(4px);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.3s ease;
}
.modal-overlay .modal-dialog {
max-width: 800px;
width: 100%;
margin: 0;
animation: slideUp 0.3s ease;
}
.modal-overlay .modal-content {
border: none;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-height: 90vh;
overflow: hidden;
background: linear-gradient(
135deg,
var(--color-neutral-50) 0%,
var(--color-neutral-100) 100%
) !important;
}
.modal-overlay .modal-header {
border-bottom: 1px solid var(--color-neutral-200);
padding: 1.5rem;
background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.modal-overlay .modal-body {
padding: 1.5rem;
overflow-y: auto;
max-height: calc(90vh - 180px);
background-color: var(--color-neutral-50) !important;
}
.modal-overlay .modal-footer {
border-top: 1px solid var(--color-neutral-200);
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
@media (max-width: 768px) {
.modal-overlay {
padding: 0.5rem;
}
.modal-overlay .modal-dialog {
max-width: 100%;
}
.modal-overlay .modal-body {
max-height: calc(90vh - 200px);
}
}
/* Modal */
.modal {
background-color: white;
border-radius: var(--border-radius-2xl);
box-shadow: var(--shadow-xl);
max-width: 90vw;
max-height: 90vh;
overflow: auto;
z-index: var(--z-index-modal);
}
.modal-header {
padding: var(--spacing-6);
border-bottom: var(--border-width-1) solid var(--color-neutral-200);
}
.modal-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-900);
margin: 0;
}
.modal-body {
padding: var(--spacing-6);
}
.modal-footer {
padding: var(--spacing-6);
border-top: var(--border-width-1) solid var(--color-neutral-200);
display: flex;
gap: var(--spacing-3);
justify-content: flex-end;
}
/* === forms.css === */
/* Form group custom (modal/form layout) */
.form-group-custom {
margin-bottom: var(--spacing-6);
}
.form-group-custom:last-child {
margin-bottom: 0;
}
/* Form field base (shared layout) */
.form-field {
position: relative;
width: 100%;
min-width: 0;
outline: none;
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-4);
display: block;
}
.form-field-label {
position: absolute;
top: -8px;
left: 10px;
background: var(--color-neutral-50);
padding: 0 4px;
font-size: var(--font-size-xs);
color: var(--color-neutral-600);
z-index: 1;
pointer-events: none;
line-height: 1;
}
.form-field.focused .form-field-label {
color: var(--color-primary-500);
}
.form-field.disabled .form-field-wrapper {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
border-color: var(--color-neutral-300);
}
.form-field-wrapper {
display: flex;
align-items: center;
min-height: 44px;
min-width: 0;
padding: var(--spacing-2) var(--spacing-4);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-lg);
transition: all var(--transition-normal);
gap: var(--spacing-2);
}
.form-field.focused .form-field-wrapper {
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(64, 173, 58, 0.25);
}
.form-field-prefix-icon,
.form-field-suffix-icon {
color: var(--color-neutral-500);
font-size: var(--font-size-base);
flex-shrink: 0;
}
.form-field-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
width: 100%;
font-family: inherit;
font-size: inherit;
color: var(--color-neutral-900);
background: transparent;
padding: 0;
}
.form-field-input::placeholder {
color: var(--color-neutral-500);
}
.form-field.disabled .form-field-input {
cursor: not-allowed;
color: var(--color-neutral-500);
}
.form-field-actions {
display: flex;
align-items: center;
gap: var(--spacing-2);
color: var(--color-neutral-500);
flex-shrink: 0;
}
.form-field-textarea .form-field-wrapper {
align-items: flex-start;
min-height: auto;
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-3);
}
.form-field-textarea textarea.form-field-input {
resize: vertical;
min-height: 6rem;
line-height: 1.5;
}
.form-field-clear {
cursor: pointer;
font-size: 1.2rem;
}
.form-field-clear:hover {
color: var(--color-error-500);
}
/* -----------------------------------
Extension: .form-field.textbox
Unique: charcount
----------------------------------- */
.form-field.textbox .form-field-charcount {
display: block;
text-align: right;
font-size: var(--font-size-xs);
color: var(--color-neutral-500);
margin-top: var(--spacing-1);
}
/* -----------------------------------
Extension: .form-field.numeric
Unique: prefix text, step buttons, suffix text
----------------------------------- */
.form-field.numeric .form-field-prefix {
color: var(--color-neutral-600);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
flex-shrink: 0;
user-select: none;
}
/* Stepper: minimal icon controls (aligned with .form-dropdown-actions chevron) */
.form-field.numeric .form-field-stepper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: calc(var(--spacing-1) * -1) 0;
gap: 0;
}
.form-field.numeric .form-field-stepper-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.125rem;
margin: 0;
padding: 0;
border: none;
border-radius: var(--border-radius-sm);
background: transparent;
color: var(--color-neutral-500);
cursor: pointer;
line-height: 1;
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.form-field.numeric .form-field-stepper-btn .bi {
font-size: 0.6875rem;
}
.form-field.numeric .form-field-stepper-btn:hover:not(:disabled) {
color: var(--color-neutral-800);
background-color: var(--color-neutral-100);
}
.form-field.numeric .form-field-stepper-btn:active:not(:disabled) {
color: var(--color-primary-600);
}
.form-field.numeric .form-field-stepper-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.form-field.numeric .form-field-suffix-text {
display: block;
font-size: var(--font-size-xs);
color: var(--color-neutral-500);
margin-top: var(--spacing-1);
}
/* -----------------------------------
Extension: .form-field.password
Unique: visibility toggle
----------------------------------- */
.form-field.password .form-field-toggle {
cursor: pointer;
font-size: var(--font-size-base);
transition: color var(--transition-normal);
}
.form-field.password .form-field-toggle:hover {
color: var(--color-primary-500);
}
/* -----------------------------------
Form input (standalone input styling)
----------------------------------- */
.form-input {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-primary-950);
background-color: white;
border: var(--border-width-1) solid var(--color-primary-200);
border-radius: var(--border-radius-lg);
transition: all var(--transition-normal);
}
.form-input:focus {
outline: none;
border: var(--border-width-2) solid var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(227, 247, 225, 0.5);
}
.form-input:disabled {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
}
.form-input.error {
border-color: var(--color-error-500);
}
.form-input.success {
border-color: var(--color-success-500);
}
/* -----------------------------------
Form label (standalone)
----------------------------------- */
.form-label {
display: block;
margin-bottom: var(--spacing-2);
font-family: var(--font-family-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-neutral-700);
}
/* -----------------------------------
Form toggle (.form-toggle)
----------------------------------- */
.form-toggle {
display: flex;
align-items: center;
gap: var(--spacing-3);
cursor: pointer;
user-select: none;
padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--border-radius-lg);
border: var(--border-width-1) solid var(--color-neutral-300);
background: var(--color-neutral-50);
transition:
border-color var(--transition-normal),
background-color var(--transition-normal),
box-shadow var(--transition-normal);
min-height: 52px;
}
.form-toggle:hover:not(.disabled) {
border-color: var(--color-primary-300);
box-shadow: var(--shadow-xs);
}
.form-toggle.active {
border-color: var(--color-primary-200);
background: var(--color-primary-50);
}
.form-toggle.active:hover:not(.disabled) {
border-color: var(--color-primary-400);
}
.form-toggle.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.form-toggle-track {
position: relative;
width: 44px;
min-width: 44px;
height: 24px;
border-radius: var(--border-radius-full);
background: var(--color-neutral-400);
transition: background-color var(--transition-normal);
}
.form-toggle.active .form-toggle-track {
background: var(--color-primary-500);
}
.form-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: var(--border-radius-full);
background: var(--color-neutral-50);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal);
}
.form-toggle.active .form-toggle-thumb {
transform: translateX(20px);
}
.form-toggle-label-area {
display: flex;
flex-direction: column;
gap: 2px;
}
.form-toggle-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-neutral-700);
line-height: var(--line-height-tight);
}
.form-toggle-status {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: var(--line-height-tight);
transition: color var(--transition-normal);
}
.form-toggle.active .form-toggle-status {
color: var(--color-primary-600);
}
.form-toggle.inactive .form-toggle-status {
color: var(--color-neutral-500);
}
/* -----------------------------------
Form button group (.form-button-group)
----------------------------------- */
.form-button-group {
position: relative;
width: 100%;
outline: none;
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
}
.form-button-group-label {
position: absolute;
top: -8px;
left: 10px;
background: var(--color-neutral-50);
padding: 0 4px;
font-size: var(--font-size-xs);
color: var(--color-neutral-600);
z-index: 1;
pointer-events: none;
line-height: 1;
display: flex;
align-items: center;
gap: var(--spacing-1);
}
.form-button-group-label i {
font-size: var(--font-size-xs);
}
.form-button-group.focused .form-button-group-label {
color: var(--color-primary-500);
}
.form-button-group.disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.form-button-group-items {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-1);
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-lg);
background-color: var(--color-neutral-50);
transition: all var(--transition-normal);
}
.form-button-group:not(.has-label) .form-button-group-items {
border: none;
padding: 0;
background-color: transparent;
}
.form-button-group.nowrap .form-button-group-items {
flex-wrap: nowrap;
overflow-x: auto;
}
.form-button-group-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-lg);
background-color: var(--color-neutral-50);
color: var(--color-neutral-700);
font-family: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-normal);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.form-button-group-btn:hover {
border-color: var(--color-primary-400);
color: var(--color-primary-700);
background-color: var(--color-primary-50);
}
.form-button-group-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(64, 173, 58, 0.25);
}
.form-button-group-btn.active {
border-color: var(--color-primary-500);
background-color: var(--color-primary-500);
color: white;
}
.form-button-group-btn.active:hover {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
color: white;
}
.form-button-group.pills .form-button-group-btn {
border-radius: var(--border-radius-full);
}
.form-button-group.size-sm .form-button-group-btn {
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
}
.form-button-group.size-md .form-button-group-btn {
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-sm);
}
/* -----------------------------------
Form dropdown (.form-dropdown)
----------------------------------- */
.form-dropdown {
position: relative;
width: 100%;
outline: none;
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-4);
}
.form-dropdown-label {
position: absolute;
top: -8px;
left: 10px;
background: var(--color-neutral-50);
padding: 0 4px;
font-size: var(--font-size-xs);
color: var(--color-neutral-600);
z-index: 1;
pointer-events: none;
line-height: 1;
}
.form-dropdown.open .form-dropdown-label,
.form-dropdown:focus .form-dropdown-label {
color: var(--color-primary-500);
}
.form-dropdown.disabled .form-dropdown-trigger {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
border-color: var(--color-neutral-300);
}
.form-dropdown-trigger {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: var(--spacing-2) var(--spacing-4);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-lg);
cursor: pointer;
transition: all var(--transition-normal);
}
.form-dropdown:focus .form-dropdown-trigger,
.form-dropdown.open .form-dropdown-trigger {
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(64, 173, 58, 0.25);
}
.form-dropdown-selection {
display: flex;
flex-wrap: wrap;
flex: 1;
overflow: hidden;
gap: var(--spacing-2);
}
.form-dropdown-placeholder {
color: var(--color-neutral-500);
}
.form-dropdown-text {
color: var(--color-neutral-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form-dropdown-actions {
display: flex;
align-items: center;
gap: var(--spacing-2);
color: var(--color-neutral-500);
}
.form-dropdown-clear {
cursor: pointer;
font-size: 1.2rem;
}
.form-dropdown-clear:hover {
color: var(--color-error-500);
}
.form-dropdown-panel {
position: absolute;
top: calc(100% + var(--spacing-1));
left: 0;
width: 100%;
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
z-index: var(--z-index-dropdown);
max-height: 500px;
height: fit-content;
display: flex;
flex-direction: column;
overflow: hidden;
}
.form-dropdown-search {
padding: var(--spacing-3);
border-bottom: 1px solid var(--color-neutral-200);
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.form-dropdown-search i {
color: var(--color-neutral-500);
}
.form-dropdown-search-input {
border: none;
outline: none;
width: 100%;
font-family: inherit;
font-size: inherit;
color: var(--color-neutral-900);
}
.form-dropdown-items {
flex: 0 0 auto;
max-height: calc(300px - 7rem);
overflow-y: auto;
padding: var(--spacing-2) 0;
}
.form-dropdown-item {
display: flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-4);
cursor: pointer;
color: var(--color-neutral-700);
transition: background-color var(--transition-fast);
}
.form-dropdown-item:hover,
.form-dropdown-item.highlighted {
background-color: var(--color-neutral-100);
color: var(--color-neutral-900);
}
.form-dropdown-item.selected {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
font-weight: var(--font-weight-medium);
}
.form-dropdown-item-content {
flex: 1;
}
.form-dropdown-empty {
padding: var(--spacing-4);
text-align: center;
color: var(--color-neutral-500);
}
.form-dropdown-chips {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.form-chip {
display: inline-flex;
align-items: center;
background-color: var(--color-primary-100);
color: var(--color-primary-800);
border-radius: var(--border-radius-full);
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.form-chip i:hover {
color: var(--color-primary-950);
}
.form-dropdown-loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-3);
padding: var(--spacing-4);
color: var(--color-neutral-500);
font-size: var(--font-size-sm);
}
.form-dropdown-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
border-top: 1px solid var(--color-neutral-200);
background-color: var(--color-neutral-50);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.form-dropdown-page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-md);
background: var(--color-neutral-50);
color: var(--color-neutral-700);
cursor: pointer;
font-size: var(--font-size-xs);
transition: all var(--transition-fast);
padding: 0;
}
.form-dropdown-page-btn:hover:not(:disabled) {
border-color: var(--color-primary-500);
color: var(--color-primary-600);
background-color: var(--color-primary-50);
}
.form-dropdown-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.form-dropdown-page-info {
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
min-width: 48px;
text-align: center;
}
/* -----------------------------------
Checkbox e Radio
----------------------------------- */
.form-check,
.form-checkbox,
.form-radio {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-bottom: var(--spacing-2);
}
.form-check input[type="checkbox"],
.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--color-primary-500);
}
.form-checkbox label,
.form-radio label,
.form-check-label {
font-size: var(--font-size-sm);
color: var(--color-neutral-700);
cursor: pointer;
}
/* === utilities.css === */
/* ===================================
UTILITÁRIOS
=================================== */
/* Visibilidade */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Cursor */
.cursor-pointer {
cursor: pointer;
}
.cursor-not-allowed {
cursor: not-allowed;
}
/* Overflow */
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.overflow-scroll {
overflow: scroll;
}
/* Posicionamento */
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.sticky {
position: sticky;
}
/* Display */
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
/* Flexbox */
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
/* Grid */
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Responsividade */
@media (max-width: 640px) {
.sm\:hidden {
display: none;
}
.sm\:block {
display: block;
}
.sm\:flex {
display: flex;
}
}
@media (max-width: 1650px) {
.md\:hidden {
display: none;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
}
@media (max-width: 1024px) {
.lg\:hidden {
display: none;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
}
/* === bootstrap-override.css === */
:root {
/* ===================================
BOOTSTRAP THEME CUSTOMIZATION
Customizar Bootstrap via CSS variables (design tokens)
=================================== */
/* ===================================
BOOTSTRAP PRIMARY COLORS - VERDE BEBOP (design tokens)
=================================== */
--bs-primary: var(--color-primary-500);
--bs-primary-rgb: 64, 173, 58;
/* Primary Button States - Palm Green */
--bs-btn-primary-bg: var(--color-primary-500);
--bs-btn-primary-border-color: var(--color-primary-500);
--bs-btn-primary-color: var(--color-neutral-50);
--bs-btn-primary-hover-bg: var(--color-primary-600);
--bs-btn-primary-hover-border-color: var(--color-primary-600);
--bs-btn-primary-hover-color: var(--color-neutral-50);
--bs-btn-primary-focus-bg: var(--color-primary-600);
--bs-btn-primary-focus-border-color: var(--color-primary-600);
--bs-btn-primary-focus-color: var(--color-neutral-50);
--bs-btn-primary-active-bg: var(--color-primary-700);
--bs-btn-primary-active-border-color: var(--color-primary-700);
--bs-btn-primary-active-color: var(--color-neutral-50);
--bs-btn-primary-disabled-bg: var(--color-primary-500);
--bs-btn-primary-disabled-border-color: var(--color-primary-500);
--bs-btn-primary-disabled-color: var(--color-neutral-50);
/* Primary Text & Background */
--bs-primary-text-emphasis: var(--color-primary-500);
--bs-primary-bg-subtle: var(--color-primary-50);
--bs-primary-border-subtle: var(--color-primary-200);
/* ===================================
BOOTSTRAP SUCCESS COLORS - VERDE BEBOP (design tokens)
=================================== */
--bs-success: var(--color-success-500);
--bs-success-rgb: 64, 173, 58;
/* Success Button States */
--bs-btn-success-bg: var(--color-success-500);
--bs-btn-success-border-color: var(--color-success-500);
--bs-btn-success-color: var(--color-neutral-50);
--bs-btn-success-hover-bg: var(--color-success-600);
--bs-btn-success-hover-border-color: var(--color-success-600);
--bs-btn-success-hover-color: var(--color-neutral-50);
--bs-btn-success-focus-bg: var(--color-success-600);
--bs-btn-success-focus-border-color: var(--color-success-600);
--bs-btn-success-focus-color: var(--color-neutral-50);
--bs-btn-success-active-bg: var(--color-success-700);
--bs-btn-success-active-border-color: var(--color-success-700);
--bs-btn-success-active-color: var(--color-neutral-50);
--bs-success-text-emphasis: var(--color-success-500);
--bs-success-bg-subtle: var(--color-success-50);
--bs-success-border-subtle: var(--color-success-100);
--bs-secondary: var(--color-neutral-500);
--bs-secondary-rgb: 108, 117, 125;
--bs-btn-secondary-bg: var(--color-neutral-50);
--bs-btn-secondary-border-color: var(--color-primary-200);
--bs-btn-secondary-color: var(--color-primary-950);
--bs-btn-secondary-hover-bg: var(--color-primary-50);
--bs-btn-secondary-hover-border-color: var(--color-primary-500);
--bs-btn-secondary-hover-color: var(--color-primary-950);
--bs-btn-secondary-focus-bg: var(--color-primary-50);
--bs-btn-secondary-focus-border-color: var(--color-primary-500);
--bs-btn-secondary-focus-color: var(--color-primary-950);
--bs-btn-secondary-active-bg: var(--color-primary-100);
--bs-btn-secondary-active-border-color: var(--color-primary-600);
--bs-btn-secondary-active-color: var(--color-primary-950);
--bs-secondary-text-emphasis: var(--color-neutral-500);
--bs-secondary-bg-subtle: var(--color-neutral-100);
--bs-secondary-border-subtle: var(--color-neutral-200);
/* ===================================
BOOTSTRAP WARNING COLORS (design tokens)
=================================== */
--bs-warning: var(--color-warning-500);
--bs-warning-rgb: 127, 199, 127;
--bs-btn-warning-bg: var(--color-warning-500);
--bs-btn-warning-border-color: var(--color-warning-500);
--bs-btn-warning-color: var(--color-neutral-950);
--bs-btn-warning-hover-bg: var(--color-warning-600);
--bs-btn-warning-hover-border-color: var(--color-warning-600);
--bs-btn-warning-hover-color: var(--color-neutral-950);
--bs-btn-warning-focus-bg: var(--color-warning-600);
--bs-btn-warning-focus-border-color: var(--color-warning-600);
--bs-btn-warning-focus-color: var(--color-neutral-950);
--bs-btn-warning-active-bg: var(--color-warning-700);
--bs-btn-warning-active-border-color: var(--color-warning-700);
--bs-btn-warning-active-color: var(--color-neutral-950);
--bs-warning-text-emphasis: var(--color-warning-500);
--bs-warning-bg-subtle: var(--color-warning-50);
--bs-warning-border-subtle: var(--color-warning-100);
/* ===================================
BOOTSTRAP DANGER COLORS (design tokens)
=================================== */
--bs-danger: var(--color-error-500);
--bs-danger-rgb: 220, 53, 69;
--bs-btn-danger-bg: var(--color-error-500);
--bs-btn-danger-border-color: var(--color-error-500);
--bs-btn-danger-color: var(--color-neutral-50);
--bs-btn-danger-hover-bg: var(--color-error-600);
--bs-btn-danger-hover-border-color: var(--color-error-600);
--bs-btn-danger-hover-color: var(--color-neutral-50);
--bs-btn-danger-focus-bg: var(--color-error-600);
--bs-btn-danger-focus-border-color: var(--color-error-600);
--bs-btn-danger-focus-color: var(--color-neutral-50);
--bs-btn-danger-active-bg: var(--color-error-700);
--bs-btn-danger-active-border-color: var(--color-error-700);
--bs-btn-danger-active-color: var(--color-neutral-50);
--bs-danger-text-emphasis: var(--color-error-500);
--bs-danger-bg-subtle: var(--color-error-50);
--bs-danger-border-subtle: var(--color-error-100);
/* ===================================
BOOTSTRAP INFO COLORS (design tokens)
=================================== */
--bs-info: var(--color-info-500);
--bs-info-rgb: 59, 130, 246;
--bs-btn-info-bg: var(--color-info-500);
--bs-btn-info-border-color: var(--color-info-500);
--bs-btn-info-color: var(--color-neutral-50);
--bs-btn-info-hover-bg: var(--color-info-600);
--bs-btn-info-hover-border-color: var(--color-info-600);
--bs-btn-info-hover-color: var(--color-neutral-50);
--bs-btn-info-focus-bg: var(--color-info-600);
--bs-btn-info-focus-border-color: var(--color-info-600);
--bs-btn-info-focus-color: var(--color-neutral-50);
--bs-btn-info-active-bg: var(--color-info-700);
--bs-btn-info-active-border-color: var(--color-info-700);
--bs-btn-info-active-color: var(--color-neutral-50);
--bs-info-text-emphasis: var(--color-info-500);
--bs-info-bg-subtle: var(--color-info-50);
--bs-info-border-subtle: var(--color-info-100);
/* ===================================
BOOTSTRAP LIGHT & DARK COLORS (design tokens)
=================================== */
--bs-light: var(--color-neutral-100);
--bs-light-rgb: 248, 249, 250;
--bs-btn-light-bg: var(--color-neutral-100);
--bs-btn-light-border-color: var(--color-neutral-100);
--bs-btn-light-color: var(--color-neutral-950);
--bs-btn-light-hover-bg: var(--color-neutral-200);
--bs-btn-light-hover-border-color: var(--color-neutral-200);
--bs-btn-light-hover-color: var(--color-neutral-950);
--bs-btn-light-focus-bg: var(--color-neutral-200);
--bs-btn-light-focus-border-color: var(--color-neutral-200);
--bs-btn-light-focus-color: var(--color-neutral-950);
--bs-btn-light-active-bg: var(--color-neutral-300);
--bs-btn-light-active-border-color: var(--color-neutral-300);
--bs-btn-light-active-color: var(--color-neutral-950);
--bs-light-text-emphasis: var(--color-neutral-100);
--bs-light-bg-subtle: var(--color-neutral-100);
--bs-light-border-subtle: var(--color-neutral-200);
/* Dark Colors */
--bs-dark: var(--color-neutral-800);
--bs-dark-rgb: 33, 37, 41;
--bs-btn-dark-bg: var(--color-neutral-800);
--bs-btn-dark-border-color: var(--color-neutral-800);
--bs-btn-dark-color: var(--color-neutral-50);
--bs-btn-dark-hover-bg: var(--color-neutral-900);
--bs-btn-dark-hover-border-color: var(--color-neutral-900);
--bs-btn-dark-hover-color: var(--color-neutral-50);
--bs-btn-dark-focus-bg: var(--color-neutral-900);
--bs-btn-dark-focus-border-color: var(--color-neutral-900);
--bs-btn-dark-focus-color: var(--color-neutral-50);
--bs-btn-dark-active-bg: var(--color-neutral-950);
--bs-btn-dark-active-border-color: var(--color-neutral-950);
--bs-btn-dark-active-color: var(--color-neutral-50);
--bs-dark-text-emphasis: var(--color-neutral-800);
--bs-dark-bg-subtle: var(--color-neutral-200);
--bs-dark-border-subtle: var(--color-neutral-300);
/* ===================================
BOOTSTRAP BUTTON CUSTOMIZATIONS (design tokens)
=================================== */
--bs-btn-border-radius: var(--border-radius-lg);
--bs-btn-font-weight: var(--font-weight-medium);
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25);
/* ===================================
BOOTSTRAP 5.2.3 COMPATIBILITY - design tokens
=================================== */
--bs-primary: var(--color-primary-500);
--bs-success: var(--color-success-500);
--bs-warning: var(--color-warning-500);
--bs-danger: var(--color-error-500);
--bs-info: var(--color-info-500);
--bs-secondary: var(--color-neutral-500);
--bs-light: var(--color-neutral-100);
--bs-dark: var(--color-neutral-800);
/* ===================================
BOOTSTRAP OUTLINE BUTTON STATES (design tokens)
=================================== */
/* Primary Outline */
--bs-btn-outline-primary-color: var(--color-primary-500);
--bs-btn-outline-primary-border-color: var(--color-primary-500);
--bs-btn-outline-primary-hover-color: var(--color-neutral-50);
--bs-btn-outline-primary-hover-bg: var(--color-primary-500);
--bs-btn-outline-primary-hover-border-color: var(--color-primary-500);
--bs-btn-outline-primary-focus-color: var(--color-neutral-50);
--bs-btn-outline-primary-focus-bg: var(--color-primary-500);
--bs-btn-outline-primary-focus-border-color: var(--color-primary-500);
--bs-btn-outline-primary-active-color: var(--color-neutral-50);
--bs-btn-outline-primary-active-bg: var(--color-primary-600);
--bs-btn-outline-primary-active-border-color: var(--color-primary-600);
/* Secondary Outline */
--bs-btn-outline-secondary-color: var(--color-neutral-500);
--bs-btn-outline-secondary-border-color: var(--color-neutral-500);
--bs-btn-outline-secondary-hover-color: var(--color-neutral-50);
--bs-btn-outline-secondary-hover-bg: var(--color-neutral-500);
--bs-btn-outline-secondary-hover-border-color: var(--color-neutral-500);
--bs-btn-outline-secondary-focus-color: var(--color-neutral-50);
--bs-btn-outline-secondary-focus-bg: var(--color-neutral-500);
--bs-btn-outline-secondary-focus-border-color: var(--color-neutral-500);
--bs-btn-outline-secondary-active-color: var(--color-neutral-50);
--bs-btn-outline-secondary-active-bg: var(--color-neutral-600);
--bs-btn-outline-secondary-active-border-color: var(--color-neutral-600);
/* Success Outline */
--bs-btn-outline-success-color: var(--color-success-500);
--bs-btn-outline-success-border-color: var(--color-success-500);
--bs-btn-outline-success-hover-color: var(--color-neutral-50);
--bs-btn-outline-success-hover-bg: var(--color-success-500);
--bs-btn-outline-success-hover-border-color: var(--color-success-500);
--bs-btn-outline-success-focus-color: var(--color-neutral-50);
--bs-btn-outline-success-focus-bg: var(--color-success-500);
--bs-btn-outline-success-focus-border-color: var(--color-success-500);
--bs-btn-outline-success-active-color: var(--color-neutral-50);
--bs-btn-outline-success-active-bg: var(--color-success-600);
--bs-btn-outline-success-active-border-color: var(--color-success-600);
/* Warning Outline */
--bs-btn-outline-warning-color: var(--color-warning-500);
--bs-btn-outline-warning-border-color: var(--color-warning-500);
--bs-btn-outline-warning-hover-color: var(--color-neutral-950);
--bs-btn-outline-warning-hover-bg: var(--color-warning-500);
--bs-btn-outline-warning-hover-border-color: var(--color-warning-500);
--bs-btn-outline-warning-focus-color: var(--color-neutral-950);
--bs-btn-outline-warning-focus-bg: var(--color-warning-500);
--bs-btn-outline-warning-focus-border-color: var(--color-warning-500);
--bs-btn-outline-warning-active-color: var(--color-neutral-950);
--bs-btn-outline-warning-active-bg: var(--color-warning-600);
--bs-btn-outline-warning-active-border-color: var(--color-warning-600);
/* Danger Outline */
--bs-btn-outline-danger-color: var(--color-error-500);
--bs-btn-outline-danger-border-color: var(--color-error-500);
--bs-btn-outline-danger-hover-color: var(--color-neutral-50);
--bs-btn-outline-danger-hover-bg: var(--color-error-500);
--bs-btn-outline-danger-hover-border-color: var(--color-error-500);
--bs-btn-outline-danger-focus-color: var(--color-neutral-50);
--bs-btn-outline-danger-focus-bg: var(--color-error-500);
--bs-btn-outline-danger-focus-border-color: var(--color-error-500);
--bs-btn-outline-danger-active-color: var(--color-neutral-50);
--bs-btn-outline-danger-active-bg: var(--color-error-600);
--bs-btn-outline-danger-active-border-color: var(--color-error-600);
/* Info Outline */
--bs-btn-outline-info-color: var(--color-info-500);
--bs-btn-outline-info-border-color: var(--color-info-500);
--bs-btn-outline-info-hover-color: var(--color-neutral-50);
--bs-btn-outline-info-hover-bg: var(--color-info-500);
--bs-btn-outline-info-hover-border-color: var(--color-info-500);
--bs-btn-outline-info-focus-color: var(--color-neutral-50);
--bs-btn-outline-info-focus-bg: var(--color-info-500);
--bs-btn-outline-info-focus-border-color: var(--color-info-500);
--bs-btn-outline-info-active-color: var(--color-neutral-50);
--bs-btn-outline-info-active-bg: var(--color-info-600);
--bs-btn-outline-info-active-border-color: var(--color-info-600);
/* Light Outline */
--bs-btn-outline-light-color: var(--color-neutral-100);
--bs-btn-outline-light-border-color: var(--color-neutral-100);
--bs-btn-outline-light-hover-color: var(--color-neutral-950);
--bs-btn-outline-light-hover-bg: var(--color-neutral-100);
--bs-btn-outline-light-hover-border-color: var(--color-neutral-100);
--bs-btn-outline-light-focus-color: var(--color-neutral-950);
--bs-btn-outline-light-focus-bg: var(--color-neutral-100);
--bs-btn-outline-light-focus-border-color: var(--color-neutral-100);
--bs-btn-outline-light-active-color: var(--color-neutral-950);
--bs-btn-outline-light-active-bg: var(--color-neutral-300);
--bs-btn-outline-light-active-border-color: var(--color-neutral-300);
/* Dark Outline */
--bs-btn-outline-dark-color: var(--color-neutral-800);
--bs-btn-outline-dark-border-color: var(--color-neutral-800);
--bs-btn-outline-dark-hover-color: var(--color-neutral-50);
--bs-btn-outline-dark-hover-bg: var(--color-neutral-800);
--bs-btn-outline-dark-hover-border-color: var(--color-neutral-800);
--bs-btn-outline-dark-focus-color: var(--color-neutral-50);
--bs-btn-outline-dark-focus-bg: var(--color-neutral-800);
--bs-btn-outline-dark-focus-border-color: var(--color-neutral-800);
--bs-btn-outline-dark-active-color: var(--color-neutral-50);
--bs-btn-outline-dark-active-bg: var(--color-neutral-900);
--bs-btn-outline-dark-active-border-color: var(--color-neutral-900);
/* ===================================
BOOTSTRAP COMPONENT COLORS (design tokens)
=================================== */
--bs-link-color: var(--color-primary-500);
--bs-link-hover-color: var(--color-primary-600);
--bs-link-hover-color-rgb: 48, 142, 43;
--bs-form-control-focus-border-color: var(--color-primary-500);
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25);
--bs-progress-bar-bg: var(--color-primary-500);
--bs-spinner-border-color: var(--color-primary-500);
}
/* === dashboard-layout.css === */
/* Prevenir scroll lateral global */
html,
body {
overflow-x: clip;
max-width: 100vw;
}
/* Ajuste do conteúdo principal */
main {
padding-top: 5rem !important;
width: 100%;
}
/* Mobile adjustments */
@media (max-width: 991.98px) {
main {
padding-top: 4.5rem !important;
}
/* Prevenir scroll lateral no mobile */
body {
overflow-x: clip !important;
}
}
/* Part-12: Base typography and element styles */
p {
color: var(--color-neutral-800);
font-weight: var(--font-weight-light);
}
a {
transition: var(--transition-normal) all ease;
}
h2 {
font-size: var(--font-size-xl);
}
/* === radzen-override.css === */
/* ===================================
BEBOP DESIGN SYSTEM - RADZEN OVERRIDE
===================================
Este arquivo sobrescreve as configurações padrão do Radzen
para usar as cores e estilos do novo design system.
=================================== */
:root {
--rz-primary: var(--color-primary-500) !important;
--rz-secondary: var(--color-neutral-500) !important;
--rz-success: var(--color-primary-500) !important;
--rz-info: var(--color-info-600);
--rz-warning: var(--color-warning-600);
--rz-danger: var(--color-error-600);
}
/* ===================================
CORES PRIMÁRIAS DO RADZEN
=================================== */
/* Botões */
.rz-button.rz-button-primary {
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
color: #ffffff !important;
}
.rz-button.rz-button-primary:hover {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
color: #ffffff !important;
}
.rz-button.rz-button-primary:active {
background-color: var(--color-primary-700) !important;
border-color: var(--color-primary-700) !important;
color: #ffffff !important;
}
.rz-button.rz-button-primary:focus {
color: #ffffff !important;
box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25) !important;
}
/* Garantir texto branco mesmo com classes Bootstrap aplicadas */
.rz-button.rz-button-primary.text-white,
.rz-button.btn-primary.text-white,
.rz-button[class*="primary"].text-white {
color: #ffffff !important;
}
.rz-button.rz-button-primary.text-white:hover,
.rz-button.btn-primary.text-white:hover,
.rz-button[class*="primary"].text-white:hover {
color: #ffffff !important;
}
.rz-button.rz-button-primary.text-white:focus,
.rz-button.btn-primary.text-white:focus,
.rz-button[class*="primary"].text-white:focus {
color: #ffffff !important;
}
.rz-button.rz-button-primary.text-white:active,
.rz-button.btn-primary.text-white:active,
.rz-button[class*="primary"].text-white:active {
color: #ffffff !important;
}
.rz-button.rz-button-secondary {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #ffffff !important;
}
.rz-button.rz-button-secondary:hover {
background-color: #5a6268 !important;
border-color: #5a6268 !important;
color: #ffffff !important;
}
.rz-button.rz-button-secondary:active {
background-color: #545b62 !important;
border-color: #545b62 !important;
color: #ffffff !important;
}
.rz-button.rz-button-secondary:focus {
background-color: #5a6268 !important;
border-color: #5a6268 !important;
color: #ffffff !important;
box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}
/* Botões Success - Idêntico ao Primary (Palm Green) */
.rz-button.rz-button-success,
.rz-button[class*="success"],
.rz-button.btn-success {
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
color: #ffffff !important;
}
.rz-button.rz-button-success:hover,
.rz-button[class*="success"]:hover,
.rz-button.btn-success:hover {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
color: #ffffff !important;
}
.rz-button.rz-button-success:active,
.rz-button[class*="success"]:active,
.rz-button.btn-success:active,
.rz-button.rz-button-success.active,
.rz-button[class*="success"].active,
.rz-button.btn-success.active {
background-color: var(--color-primary-700) !important;
border-color: var(--color-primary-700) !important;
color: #ffffff !important;
}
.rz-button.rz-button-success:focus,
.rz-button[class*="success"]:focus,
.rz-button.btn-success:focus {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
color: #ffffff !important;
box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25) !important;
}
/* Garantir texto branco mesmo com classes Bootstrap aplicadas */
.rz-button.btn-success.text-white,
.rz-button[class*="success"].text-white,
.rz-button.rz-button-success.text-white {
color: #ffffff !important;
}
.rz-button.btn-success.text-white:hover,
.rz-button[class*="success"].text-white:hover,
.rz-button.rz-button-success.text-white:hover {
color: #ffffff !important;
}
.rz-button.btn-success.text-white:focus,
.rz-button[class*="success"].text-white:focus,
.rz-button.rz-button-success.text-white:focus {
color: #ffffff !important;
}
.rz-button.btn-success.text-white:active,
.rz-button[class*="success"].text-white:active,
.rz-button.rz-button-success.text-white:active {
color: #ffffff !important;
}
/* Links */
.rz-button.rz-button-link {
color: var(--color-primary-600) !important;
background-color: transparent !important;
border-color: transparent !important;
}
.rz-button.rz-button-link:hover {
color: var(--color-primary-700) !important;
background-color: var(--color-primary-50) !important;
}
/* ===================================
FORMULÁRIOS
=================================== */
/* Campos de entrada */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-multiselect,
.rz-datepicker,
.rz-timepicker,
.rz-numberbox {
border-color: var(--color-neutral-300) !important;
border-radius: var(--border-radius-lg) !important;
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-base) !important;
padding: var(--spacing-3) var(--spacing-4) !important;
transition: all var(--transition-normal) !important;
}
.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown:focus,
.rz-multiselect:focus,
.rz-datepicker:focus,
.rz-timepicker:focus,
.rz-numberbox:focus {
border-color: var(--color-primary-500) !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
outline: none !important;
}
/* Labels */
.rz-form-field-label {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-sm) !important;
font-weight: var(--font-weight-medium) !important;
color: var(--color-neutral-700) !important;
margin-bottom: var(--spacing-2) !important;
}
/* Validação */
.rz-textbox.rz-state-invalid,
.rz-textarea.rz-state-invalid,
.rz-dropdown.rz-state-invalid,
.rz-multiselect.rz-state-invalid,
.rz-datepicker.rz-state-invalid,
.rz-timepicker.rz-state-invalid,
.rz-numberbox.rz-state-invalid {
border-color: var(--color-error-500) !important;
}
.rz-textbox.rz-state-valid,
.rz-textarea.rz-state-valid,
.rz-dropdown.rz-state-valid,
.rz-multiselect.rz-state-valid,
.rz-datepicker.rz-state-valid,
.rz-timepicker.rz-state-valid,
.rz-numberbox.rz-state-valid {
border-color: var(--color-success-500) !important;
}
/* Mensagens de validação */
.rz-field-validation-message {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-sm) !important;
margin-top: var(--spacing-1) !important;
}
.rz-field-validation-message.rz-error {
color: var(--color-error-600) !important;
}
.rz-field-validation-message.rz-success {
color: var(--color-success-600) !important;
}
/* ===================================
TABELAS
=================================== */
/* Cabeçalho da tabela */
.rz-data-table thead th {
background-color: var(--color-neutral-50) !important;
border-bottom-color: var(--color-neutral-200) !important;
color: var(--color-neutral-900) !important;
font-weight: var(--font-weight-semibold) !important;
padding: var(--spacing-4) !important;
}
/* Linhas da tabela */
.rz-data-table tbody tr {
border-bottom-color: var(--color-neutral-100) !important;
}
.rz-data-table tbody tr:hover {
background-color: var(--color-neutral-50) !important;
}
.rz-data-table tbody tr.rz-state-selected {
background-color: var(--color-primary-100) !important;
}
/* Células da tabela */
.rz-data-table tbody td {
padding: var(--spacing-4) !important;
color: var(--color-neutral-700) !important;
}
/* ===================================
PAGINAÇÃO
=================================== */
/* Botões de paginação */
.rz-paginator .rz-paginator-page,
.rz-paginator .rz-paginator-first,
.rz-paginator .rz-paginator-prev,
.rz-paginator .rz-paginator-next,
.rz-paginator .rz-paginator-last {
border-color: var(--color-neutral-300) !important;
color: var(--color-neutral-600) !important;
background-color: white !important;
border-radius: var(--border-radius-base) !important;
margin: 0 var(--spacing-1) !important;
padding: var(--spacing-2) var(--spacing-3) !important;
}
.rz-paginator .rz-paginator-page:hover,
.rz-paginator .rz-paginator-first:hover,
.rz-paginator .rz-paginator-prev:hover,
.rz-paginator .rz-paginator-next:hover,
.rz-paginator .rz-paginator-last:hover {
background-color: var(--color-neutral-100) !important;
border-color: var(--color-neutral-400) !important;
}
.rz-paginator .rz-paginator-page.rz-state-active {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
color: white !important;
}
/* ===================================
DROPDOWNS
=================================== */
/* Correção para texto cortado nos dropdowns */
.rz-dropdown,
.rz-multiselect {
min-height: 44px !important;
line-height: 1.5 !important;
}
/* Texto selecionado dentro do dropdown */
.rz-dropdown .rz-dropdown-trigger,
.rz-multiselect .rz-multiselect-trigger {
height: 100% !important;
padding: 0 !important;
width: var(--rz-dropdown-trigger-icon-width) !important;
justify-content: center;
z-index: 1;
}
/* Ícone de limpar (AllowClear) - evitar sobreposição com o ícone de abrir */
.rz-dropdown .rz-dropdown-clear-icon,
.rz-multiselect .rz-dropdown-clear-icon {
inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + var(--spacing-2)) !important;
z-index: 2;
}
/* Valor selecionado */
.rz-dropdown .rz-dropdown-trigger .rz-dropdown-trigger-icon,
.rz-multiselect .rz-multiselect-trigger .rz-multiselect-trigger-icon {
margin-left: auto !important;
}
/* Dropdown aberto */
.rz-dropdown-panel {
border-color: var(--color-neutral-200) !important;
border-radius: var(--border-radius-lg) !important;
box-shadow: var(--shadow-lg) !important;
background-color: white !important;
}
/* Itens do dropdown */
.rz-dropdown-item {
padding: var(--spacing-3) var(--spacing-4) !important;
color: var(--color-neutral-700) !important;
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-base) !important;
}
.rz-dropdown-item:hover {
background-color: var(--color-neutral-100) !important;
color: var(--color-neutral-900) !important;
}
.rz-dropdown-item.rz-state-selected {
background-color: var(--color-primary-100) !important;
color: var(--color-primary-700) !important;
}
/* ===================================
MODAIS
=================================== */
/* Overlay do modal */
.rz-overlay-panel {
background-color: rgba(0, 0, 0, 0.5) !important;
}
/* Modal */
.rz-dialog {
border-radius: var(--border-radius-xl) !important;
box-shadow: var(--shadow-xl) !important;
border: none !important;
}
/* Cabeçalho do modal */
.rz-dialog-titlebar {
background-color: var(--color-neutral-50) !important;
border-bottom-color: var(--color-neutral-200) !important;
border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0 !important;
padding: var(--spacing-6) !important;
}
.rz-dialog-title {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-xl) !important;
font-weight: var(--font-weight-semibold) !important;
color: var(--color-neutral-900) !important;
}
/* Corpo do modal */
.rz-dialog-content {
padding: var(--spacing-6) !important;
}
/* Rodapé do modal */
.rz-dialog-titlebar-toolbar {
border-top-color: var(--color-neutral-200) !important;
background-color: var(--color-neutral-50) !important;
border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl) !important;
padding: var(--spacing-6) !important;
}
/* ===================================
MODAIS DE CONFIRMAÇÃO
=================================== */
/* Botões do modal de confirmação - Seletores mais específicos */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-sm) !important;
font-weight: var(--font-weight-medium) !important;
border-radius: var(--border-radius-lg) !important;
padding: var(--spacing-3) var(--spacing-6) !important;
transition: all var(--transition-normal) !important;
border: 2px solid transparent !important;
min-width: 100px !important;
}
/* Botão de confirmação (Sim) - Primeiro botão */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child {
background-color: var(--color-error-600) !important;
border-color: var(--color-error-600) !important;
color: white !important;
}
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:hover,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:hover {
background-color: var(--color-error-700) !important;
border-color: var(--color-error-700) !important;
transform: translateY(-1px) !important;
box-shadow: var(--shadow-md) !important;
}
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:active,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:active {
background-color: var(--color-error-800) !important;
border-color: var(--color-error-800) !important;
transform: translateY(0) !important;
}
/* Botão de cancelamento (Não) - Último botão */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child {
background-color: transparent !important;
border-color: var(--color-neutral-400) !important;
color: var(--color-neutral-700) !important;
}
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:hover,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:hover {
background-color: var(--color-neutral-100) !important;
border-color: var(--color-neutral-500) !important;
color: var(--color-neutral-800) !important;
transform: translateY(-1px) !important;
box-shadow: var(--shadow-md) !important;
}
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:active,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:active {
background-color: var(--color-neutral-200) !important;
border-color: var(--color-neutral-600) !important;
transform: translateY(0) !important;
}
/* Espaçamento entre os botões */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button + .rz-button,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button + .rz-button {
margin-left: var(--spacing-3) !important;
}
/* Forçar cores específicas para botões de confirmação */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="ok"],
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="ok"] {
background-color: var(--color-error-600) !important;
border-color: var(--color-error-600) !important;
color: white !important;
}
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="cancel"],
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="cancel"] {
background-color: transparent !important;
border-color: var(--color-neutral-400) !important;
color: var(--color-neutral-700) !important;
}
/* ===================================
NOTIFICAÇÕES
=================================== */
/* Toast de sucesso */
.rz-toast.rz-toast-success {
background-color: var(--color-success-50) !important;
border-color: var(--color-success-200) !important;
color: var(--color-success-800) !important;
}
/* Toast de erro */
.rz-toast.rz-toast-error {
background-color: var(--color-error-50) !important;
border-color: var(--color-error-200) !important;
color: var(--color-error-800) !important;
}
/* Toast de aviso */
.rz-toast.rz-toast-warning {
background-color: var(--color-warning-50) !important;
border-color: var(--color-warning-200) !important;
color: var(--color-warning-800) !important;
}
/* Toast de informação */
.rz-toast.rz-toast-info {
background-color: var(--color-info-50) !important;
border-color: var(--color-info-200) !important;
color: var(--color-info-800) !important;
}
/* ===================================
PROGRESS BARS
=================================== */
/* Barra de progresso */
.rz-progressbar {
background-color: var(--color-neutral-200) !important;
border-radius: var(--border-radius-full) !important;
overflow: hidden !important;
}
.rz-progressbar-value {
background-color: var(--color-primary-600) !important;
border-radius: var(--border-radius-full) !important;
}
/* ===================================
SLIDERS
=================================== */
/* Slider */
.rz-slider {
background-color: var(--color-neutral-200) !important;
}
.rz-slider .rz-slider-handle {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
border-radius: 50% !important;
}
.rz-slider .rz-slider-bar {
background-color: var(--color-primary-600) !important;
}
/* ===================================
CHECKBOXES E RADIOS
=================================== */
/* Checkbox */
.rz-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.rz-checkbox-box {
border-color: var(--color-neutral-300) !important;
border-radius: var(--border-radius-base) !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rz-checkbox-box.rz-state-checked {
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
}
.rz-checkbox-box.rz-state-checked .rz-checkbox-icon {
color: white !important;
}
.rz-checkbox-box:hover {
border-color: var(--color-primary-400) !important;
}
.rz-checkbox-box.rz-state-checked:hover {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
}
.rz-checkbox-label {
margin-left: 8px;
cursor: pointer;
user-select: none;
}
/* Switch */
.rz-switch {
border-color: var(--color-neutral-300) !important;
border-radius: 20px !important;
background-color: var(--color-neutral-200) !important;
transition: all var(--transition-normal) !important;
width: 44px !important;
height: 24px !important;
}
.rz-switch.rz-state-checked {
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
}
.rz-switch.rz-state-checked:hover {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
}
.rz-switch:hover:not(.rz-state-checked) {
border-color: var(--color-primary-400) !important;
}
.rz-switch-handle {
background-color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
/* Radio */
.rz-radiobutton-box {
border-color: var(--color-neutral-300) !important;
}
.rz-radiobutton-box.rz-state-checked {
border-color: var(--color-primary-600) !important;
}
.rz-radiobutton-box.rz-state-checked .rz-radiobutton-icon {
background-color: var(--color-primary-600) !important;
}
/* ===================================
RESPONSIVIDADE
=================================== */
@media (max-width: 1650px) {
.rz-dialog {
margin: var(--spacing-4) !important;
max-width: calc(100vw - var(--spacing-8)) !important;
}
.rz-dialog-titlebar,
.rz-dialog-content,
.rz-dialog-titlebar-toolbar {
padding: var(--spacing-4) !important;
}
.rz-data-table thead th,
.rz-data-table tbody td {
padding: var(--spacing-3) !important;
}
}
/* ===================================
DATEPICKER ESPECÍFICO
=================================== */
/* Ajuste do padding interno do DatePicker para ficar consistente com outros campos */
.rz-datepicker {
padding: 0px 5px !important;
min-height: 22px !important;
}
/* Ajuste do padding quando o DatePicker tem ShowTime=true */
.rz-datepicker.rz-has-time {
padding: 6px 12px !important; /* Reduzindo ainda mais para campos com tempo */
}
/* Forçar padding específico para campos de data */
.rz-datepicker input[type="text"] {
padding: 8px 12px !important;
min-height: 44px !important;
}
/* Ajuste específico para campos com tempo */
.rz-datepicker.rz-has-time input[type="text"] {
padding: 6px 12px !important;
min-height: 44px !important;
}
/* Sobrescrever qualquer padding inline do Radzen */
.rz-datepicker[style*="padding"] {
padding: 8px 12px !important;
}
.rz-datepicker.rz-has-time[style*="padding"] {
padding: 6px 12px !important;
}
/* Tema do calendário - alterando cor de seleção de vermelho para preto */
/* Usando seletores mais específicos para sobrescrever o tema material */
.rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected {
background-color: #000000 !important; /* Preto sólido */
color: white !important;
}
.rz-calendar .rz-calendar-cell.rz-state-selected:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected:hover {
background-color: #1a1a1a !important; /* Preto mais claro no hover */
color: white !important;
}
/* Cabeçalho do calendário */
.rz-calendar .rz-calendar-header,
.rz-calendar-popup .rz-calendar .rz-calendar-header {
background-color: #f3f4f6 !important;
border-bottom-color: #e5e7eb !important;
}
/* Navegação do calendário */
.rz-calendar .rz-calendar-nav,
.rz-calendar-popup .rz-calendar .rz-calendar-nav {
color: #374151 !important;
}
.rz-calendar .rz-calendar-nav:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-nav:hover {
color: #111827 !important;
}
/* Células do calendário */
.rz-calendar .rz-calendar-cell,
.rz-calendar-popup .rz-calendar .rz-calendar-cell {
color: #374151 !important;
}
.rz-calendar .rz-calendar-cell:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-cell:hover {
background-color: #f3f4f6 !important;
}
/* Células de outros meses */
.rz-calendar .rz-calendar-cell.rz-calendar-other-month,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-calendar-other-month {
color: #9ca3af !important;
}
/* Célula de hoje */
.rz-calendar .rz-calendar-cell.rz-calendar-today,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-calendar-today {
background-color: #e5e7eb !important;
color: #111827 !important;
font-weight: 600 !important;
}
/* Botões de navegação do calendário */
.rz-calendar .rz-calendar-nav-button,
.rz-calendar-popup .rz-calendar .rz-calendar-nav-button {
color: #6b7280 !important;
}
.rz-calendar .rz-calendar-nav-button:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-nav-button:hover {
color: #374151 !important;
background-color: #f3f4f6 !important;
}
/* Popup do calendário */
.rz-calendar-popup {
border-color: #e5e7eb !important;
border-radius: 8px !important;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
/* Campos de tempo (quando ShowTime=true) */
.rz-timepicker {
padding: 6px 12px !important; /* Reduzindo padding para consistência */
min-height: 44px !important;
}
/* Botões de incremento/decremento do tempo */
.rz-timepicker .rz-spinner-button {
color: #6b7280 !important;
}
.rz-timepicker .rz-spinner-button:hover {
color: #374151 !important;
background-color: #f3f4f6 !important;
}
/* ===================================
SOBRESCRITA FINAL DO TEMA MATERIAL
=================================== */
/* Regra final para sobrescrever completamente o tema material do Radzen */
.rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar .rz-calendar-cell.rz-state-selected[style*="background-color"],
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected[style*="background-color"] {
background-color: #000000 !important;
color: white !important;
}
/* === design-system-config.css === */
/* Navegação responsiva */
@media (max-width: 991.98px) {
.offcanvas-collapse {
background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
box-shadow: var(--shadow-xl);
}
}
/* Seção de conteúdo */
.bebop-content-section {
padding: var(--spacing-8) 0;
}
/* ===================================
RESPONSIVIDADE ESPECÍFICA
=================================== */
/* ===================================
ANIMAÇÕES ESPECÍFICAS
=================================== */
/* Fade in para elementos da página */
.bebop-fade-in {
animation: bebopFadeIn 0.6s ease-out;
}
@keyframes bebopFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Slide in para cards */
.bebop-slide-in {
animation: bebopSlideIn 0.5s ease-out;
}
@keyframes bebopSlideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Scale in para botões */
.bebop-scale-in {
animation: bebopScaleIn 0.3s ease-out;
}
@keyframes bebopScaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===================================
UTILITÁRIOS ESPECÍFICOS
=================================== */
/* Texto com destaque */
.text-highlight {
color: var(--color-primary-600);
font-weight: var(--font-weight-semibold);
}
/* Separador visual */
.bebop-divider {
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-neutral-300) 50%,
transparent 100%
);
margin: var(--spacing-6) 0;
}
/* Loading spinner customizado */
.bebop-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-primary-200);
border-top: 3px solid var(--color-primary-500);
border-radius: 50%;
animation: bebopSpin 1s linear infinite;
}
@keyframes bebopSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Overlay de loading */
.bebop-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* === arquivo.css === */
.arquivo-documento {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.5rem;
margin-top: 0.35rem;
padding: 0.2rem 0.5rem;
border-radius: var(--border-radius-md);
}
.arquivo-enviado {
background: var(--color-success-200);
color: var(--color-success-700);
}
.arquivo-pendente {
background: var(--color-info-50);
color: var(--color-info-600);
}
.arquivo-pendente small {
opacity: 0.75;
font-size: 0.45rem;
}
.arquivo-thumb-img {
object-fit: cover;
height: 10rem;
}
.arquivo-thumb-placeholder {
height: 10rem;
}
.arquivo-documento {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.5rem;
margin-top: 0.35rem;
padding: 0.2rem 0.5rem;
border-radius: var(--border-radius-md);
}
/* === badge.css === */
.badge {
font-size: var(--font-size-xs);
padding: var(--spacing-2) var(--spacing-3);
font-weight: var(--font-weight-semibold);
}
.badge-document {
font-size: 0.45rem;
font-weight: 600;
padding: 0.15625rem 0.35rem;
border-radius: var(--border-radius-md);
display: inline-flex;
align-items: center;
}
.badge-pending {
background: var(--color-info-50);
color: var(--color-info-600);
}
.badge-processing {
background: var(--color-info-50);
color: var(--color-info-700);
}
.badge-success {
background: var(--color-success-200);
color: var(--color-success-700);
}
.badge-interest {
display: inline-flex;
align-items: center;
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--border-radius-full);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
transition: all var(--transition-normal);
}
.badge-new {
background: var(--color-primary-500);
color: var(--color-neutral-50);
font-size: var(--font-size-xs);
padding: 0.25rem 0.6rem;
border-radius: var(--border-radius-xl);
font-weight: 600;
box-shadow: 0 2px 8px rgba(64, 173, 58, 0.3);
}
.badge-offer {
background: var(--color-primary-500);
color: var(--color-neutral-50);
font-size: var(--font-size-xs);
padding: 0.25rem 0.6rem;
border-radius: var(--border-radius-xl);
font-weight: 600;
box-shadow: 0 2px 8px rgba(64, 173, 58, 0.3);
}
.badge-opcional {
padding: 0.35rem 0.75rem;
border: 1.5px solid var(--color-neutral-200);
border-radius: 999px;
background-color: var(--color-neutral-50);
color: var(--color-neutral-900);
font-size: var(--font-size-sm);
font-weight: 500;
white-space: nowrap;
}
.badge-status {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.75rem;
border-radius: 20px;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0.75rem;
}
.badge-status-table {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.6rem;
border-radius: var(--border-radius-xl);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
width: fit-content;
align-self: flex-start;
color: var(--color-neutral-100);
}
.badge-status-table.bebop-status-ativo {
background: color-mix(in srgb, var(--color-primary-500) 26.6%, transparent);
color: var(--color-primary-700);
border: 1px solid var(--color-primary-200);
}
.badge-status-table.bebop-status-info {
background-color: var(--color-primary-100);
color: var(--color-primary-600);
}
.badge-status-table.bebop-status-inativo {
background: color-mix(in srgb, var(--color-neutral-500) 10%, transparent);
color: var(--color-neutral-700);
border: 1px solid var(--color-neutral-300);
}
@media (max-width: 768px) {
.badge-interest {
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-sm);
}
.badge-offer,
.badge-new {
font-size: 0.4rem;
padding: var(--spacing-1) 0.5rem;
}
}
/* === bebop-action.css === */
.bebop-action-btn-table {
min-width: 2rem;
height: 2rem;
border-radius: var(--border-radius-md);
border: 1px solid var(--color-neutral-200);
background: var(--color-neutral-50);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
}
.bebop-action-btn-table:hover {
background: var(--color-primary-50);
border-color: var(--color-primary-300);
color: var(--color-primary-600);
transform: scale(1.05);
}
.bebop-action-btn-table.danger:hover {
background: rgba(239, 68, 68, 0.05);
border-color: rgba(239, 68, 68, 0.3);
color: var(--color-error-650);
}
.bebop-actions-inline {
display: flex;
gap: 0.25rem;
}
/* === bebop-carta.css === */
.bebop-carta-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bebop-carta-item {
padding: 1rem;
position: relative;
background: var(--bs-light);
border: 2px solid var(--color-neutral-200);
border-radius: var(--border-radius-xl);
transition: all var(--transition-normal);
}
.bebop-carta-item:hover {
border-color: var(--bs-primary);
box-shadow: var(--bebop-tab-shadow-hover-strong);
transform: translateY(-0.125rem);
}
.bebop-carta-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-6);
padding-bottom: 0.6rem;
border-bottom: var(--bebop-tab-border-divider);
}
.bebop-carta-item-title {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--bs-dark);
}
.bebop-carta-item-value {
font-size: 0.8rem;
font-weight: 700;
color: var(--bs-primary);
}
.bebop-carta-item {
padding: 0.6rem;
background: var(--bs-light);
}
@media (min-width: 768px) and (max-width: 991px) {
.bebop-carta-item {
padding: 0.8rem;
}
}
@media (min-width: 992px) {
.bebop-carta-list {
gap: 1.25rem;
}
}
@media print {
.bebop-carta-item {
page-break-inside: avoid;
}
}
/* === bebop-checklist.css === */
.bebop-checklist-group {
padding: 1rem;
margin-bottom: 1.25rem;
background: var(--color-neutral-50);
border: 2px solid var(--color-neutral-200);
border-radius: var(--border-radius-xl);
transition: all var(--transition-normal);
}
.bebop-checklist-group:hover {
border-color: var(--bs-primary);
box-shadow: var(--bebop-tab-shadow-hover);
}
.bebop-checklist-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-6);
padding-bottom: 0.6rem;
border-bottom: var(--bebop-tab-border-divider);
}
.bebop-checklist-title {
margin: 0;
font-weight: 600;
color: var(--bs-dark);
}
.bebop-checklist-description {
margin: 0;
font-size: var(--font-size-sm);
color: var(--bs-secondary);
line-height: 1.5;
}
@media (min-width: 992px) {
.bebop-checklist-group {
padding: 1.25rem;
}
.bebop-checklist-group {
padding: 1.25rem;
}
}
@media (max-width: 768px) {
.bebop-checklist-header {
flex-direction: column;
gap: 0.6rem;
}
}
/* === bebop-controls.css === */
.bebop-controls-section {
background: var(--color-neutral-50);
border-radius: var(--border-radius-xl);
border: 1px solid var(--color-neutral-200);
box-shadow: var(--shadow-sm);
}
.bebop-controls-section {
padding: var(--spacing-5);
margin-bottom: var(--spacing-6);
}
.bebop-search-bar {
display: flex;
gap: var(--spacing-3);
align-items: center;
flex-wrap: wrap;
}
.bebop-filters-expanded .form-select:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(64, 173, 58, 0.1);
}
.bebop-filters-expanded {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-neutral-200);
}
.bebop-filters-expanded .form-label {
font-size: var(--font-size-base);
color: var(--color-neutral-600);
margin-bottom: 0.5rem;
}
.bebop-filters-expanded .form-select {
background-color: var(--color-neutral-50);
padding: 0.6rem 0.875rem;
box-shadow: var(--shadow-xs);
}
.bebop-filters-expanded .btn-outline-secondary {
border: 1px solid var(--color-neutral-300);
color: var(--color-neutral-700);
background: var(--color-neutral-50);
transition: all var(--transition-fast);
font-weight: 500;
}
.bebop-filters-expanded .btn-outline-secondary:hover {
background: var(--color-neutral-50);
border-color: var(--color-neutral-400);
color: var(--color-neutral-800);
}
.bebop-filters-expanded .btn-outline-secondary:active {
background: var(--color-neutral-100);
transform: translateY(1px);
}
.bebop-pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-4) 0;
}
.bebop-pagination .pagination {
gap: var(--spacing-1);
margin: 0;
}
.bebop-pagination .page-link {
border: 1px solid var(--color-primary-200);
color: var(--color-primary-700);
border-radius: var(--border-radius-lg);
min-width: 1.40625rem;
height: 1.40625rem;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
padding: 0 var(--spacing-2);
}
.bebop-pagination .page-link:hover {
background-color: var(--color-primary-50);
border-color: var(--color-primary-400);
color: var(--color-primary-800);
}
.bebop-pagination .page-item.active .page-link {
background-color: var(--color-primary-500);
border-color: var(--color-primary-500);
color: var(--color-neutral-50);
box-shadow: var(--shadow-sm);
}
.bebop-pagination .page-item.disabled .page-link {
background-color: var(--color-neutral-100);
border-color: var(--color-neutral-200);
color: var(--color-neutral-400);
}
.bebop-icon {
width: 3rem;
height: 3rem;
margin: 0.4rem 0 1rem 0;
display: block;
}
@media (max-width: 1650px) {
.bebop-controls-section {
padding: var(--spacing-4);
}
.bebop-filters-expanded .row {
margin: 0;
}
.bebop-filters-expanded .col-md-4,
.bebop-filters-expanded .col-md-2 {
padding: 0 0.5rem;
margin-bottom: 1rem;
}
.bebop-filters-expanded .form-select {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.bebop-search-bar {
flex-direction: column;
align-items: stretch;
}
.bebop-icon {
width: 2.5rem;
height: 2.5rem;
margin: 0.4rem auto 1rem auto;
}
}
@media (max-width: 480px) {
.bebop-icon {
width: 2.25rem;
height: 2.25rem;
}
}
/* === bebop-dot.css === */
.bebop-dot-loader {
display: flex;
gap: var(--spacing-3);
}
.bebop-dot-loader--centered {
justify-content: center;
align-items: center;
width: 100%;
height: 90%;
}
.bebop-dot {
--dot-speed: 0.9s;
width: 0.875rem;
height: 0.875rem;
border-radius: var(--border-radius-full);
opacity: 0.25;
transform: translateY(0) scale(1);
animation: bebopDotMove var(--dot-speed) infinite ease-in-out;
}
.bebop-dot-loader--sm {
gap: var(--spacing-2);
}
.bebop-dot-loader--xl {
gap: var(--spacing-4);
}
.bebop-dot-loader--sm .bebop-dot {
width: 0.6rem;
height: 0.6rem;
}
.bebop-dot-loader--xl .bebop-dot {
width: 1.25rem;
height: 1.25rem;
}
.bebop-dot:nth-child(2) {
animation-delay: calc(var(--dot-speed) / 6);
}
.bebop-dot:nth-child(3) {
animation-delay: calc(var(--dot-speed) / 3);
}
/* === bebop-status.css === */
.bebop-status-timeline {
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
padding-left: 2.5rem;
}
.bebop-status-timeline::before {
content: "";
position: absolute;
left: 1.5rem;
top: 1.5rem;
bottom: 1.5rem;
width: 2px;
background: var(--color-neutral-200);
}
.bebop-status-timeline-item {
display: flex;
gap: 1rem;
position: relative;
}
.bebop-status-timeline-icon {
width: 3rem;
height: 3rem;
flex-shrink: 0;
position: absolute;
left: -2.5rem;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bs-light);
border: 3px solid var(--color-neutral-200);
font-size: 0.8rem;
transition: all var(--transition-normal);
}
.bebop-status-timeline-item.completed .bebop-status-timeline-icon {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: var(--color-neutral-950);
}
.bebop-status-timeline-item.in-progress .bebop-status-timeline-icon {
background: var(--bs-info);
border-color: var(--bs-info);
color: var(--color-neutral-50);
animation: bebop-pulse 2s infinite;
}
.bebop-status-timeline-item.pending .bebop-status-timeline-icon {
background: var(--color-neutral-50);
border-color: var(--color-neutral-200);
color: var(--bs-secondary);
}
.bebop-status-timeline-content {
flex: 1;
padding-bottom: 0.6rem;
}
.bebop-status-timeline-title {
margin-bottom: 0.35rem;
font-weight: 600;
color: var(--bs-dark);
}
.bebop-status-timeline-description {
margin-bottom: 0.6rem;
font-size: var(--font-size-sm);
color: var(--bs-secondary);
line-height: 1.6;
}
.bebop-status-timeline-meta {
display: flex;
gap: 1rem;
font-size: var(--font-size-sm);
color: var(--bs-secondary);
}
.bebop-status-timeline-meta span {
display: flex;
align-items: center;
gap: 0.15625rem;
}
.bebop-status-timeline-meta i {
color: var(--bs-primary);
}
.bebop-status-ativo {
background: color-mix(in srgb, var(--color-primary-500) 26.6%, transparent);
color: var(--color-primary-700);
border: 1px solid var(--color-primary-200);
}
.bebop-status-info {
background-color: var(--color-primary-100);
color: var(--color-primary-600);
}
.bebop-status-info {
background-color: var(--color-primary-100);
color: var(--color-primary-600);
}
.bebop-status-inativo {
background: color-mix(in srgb, var(--color-neutral-500) 10%, transparent);
color: var(--color-neutral-700);
border: 1px solid var(--color-neutral-300);
}
@media (max-width: 768px) {
.bebop-status-timeline {
padding-left: 1.5625rem;
}
.bebop-status-timeline::before {
left: 1.125rem;
}
.bebop-status-timeline-icon {
left: -1.5625rem;
width: 2.25rem;
height: 2.25rem;
font-size: 0.6rem;
}
.bebop-status-timeline-meta {
flex-direction: column;
gap: 0.35rem;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.bebop-status-timeline {
padding-left: 2.2rem;
}
.bebop-status-timeline-icon {
left: -2.2rem;
}
.bebop-status-timeline {
padding-left: 2.2rem;
}
.bebop-status-timeline-icon {
left: -2.2rem;
}
}
/* === bebop-tab.css === */
.bebop-tab-nav {
display: flex;
align-items: stretch;
gap: 0;
margin-bottom: 1.25rem;
overflow: hidden;
background: var(--bs-light);
border-radius: var(--border-radius-xl);
box-shadow: var(--bebop-tab-shadow-sm);
}
.bebop-tab-item {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
position: relative;
background: transparent;
border: none;
border-right: 1px solid var(--color-neutral-300);
cursor: pointer;
transition: all var(--transition-normal);
}
.bebop-tab-item:last-child {
border-right: none;
}
.bebop-tab-item:hover:not(.disabled) {
background: var(--color-neutral-200);
}
.bebop-tab-item.active {
background: var(--color-neutral-50);
box-shadow: var(--bebop-tab-shadow-active);
}
.bebop-tab-item.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--bs-primary);
}
.bebop-tab-item.completed {
background: var(--bs-primary-bg-subtle);
}
.bebop-tab-item.completed .bebop-tab-icon {
background: var(--bs-primary);
color: var(--color-neutral-950);
}
.bebop-tab-item.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.bebop-tab-icon {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-neutral-200);
font-weight: 600;
transition: all var(--transition-normal);
}
.bebop-tab-item.active .bebop-tab-icon {
background: var(--bs-primary);
color: var(--color-neutral-950);
box-shadow: var(--bebop-tab-shadow-primary);
}
.bebop-tab-number {
font-size: 0.6rem;
font-weight: 600;
}
.bebop-tab-title {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--bs-dark);
margin-bottom: 0.078125rem;
}
.bebop-tab-subtitle {
font-size: var(--font-size-xs);
color: var(--bs-secondary);
line-height: 1.4;
}
.bebop-tab-item.active .bebop-tab-title {
color: var(--bs-primary);
}
.bebop-mobile-tab-current {
padding: 0.35rem 0;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--bs-dark);
}
.bebop-mobile-tab-current i {
color: var(--bs-primary);
}
.bebop-tab-content {
flex: 1;
text-align: left;
}
.bebop-tab-content-card {
padding: 1.25rem;
margin-bottom: 1.25rem;
background: var(--color-neutral-50);
border-radius: var(--border-radius-xl);
box-shadow: var(--bebop-tab-shadow-md);
animation: fadeInUp var(--transition-slow) ease-in-out;
}
.bebop-tab-content-card h5,
.bebop-tab-content-card h6 {
font-weight: 600;
color: var(--bs-dark);
margin-bottom: 0.6rem;
}
.bebop-tab-content-card h5 i,
.bebop-tab-content-card h6 i {
color: var(--bs-primary);
}
.bebop-tab-content-card .alert {
padding: 0.6rem 1rem;
border-width: 2px;
border-radius: var(--border-radius-lg);
}
.bebop-tab-content-card .alert-info {
background-color: var(--bs-info-bg-subtle);
border-color: var(--bs-info);
color: var(--color-info-700);
}
.bebop-tab-content-card .alert-warning {
background-color: var(--bs-warning-bg-subtle);
border-color: var(--bs-warning);
color: var(--color-warning-800);
}
.bebop-tab-content-card .card {
border: 2px solid var(--color-neutral-200);
border-radius: var(--border-radius-xl);
transition: all var(--transition-normal);
}
.bebop-tab-content-card .card:hover {
border-color: var(--bs-primary);
box-shadow: var(--bebop-tab-shadow-hover);
}
.bebop-tab-content-card .card-header {
padding: 0.6rem 1rem;
background: var(--bs-light);
border-bottom: var(--bebop-tab-border-divider);
font-weight: 600;
}
.bebop-tab-content-card .card-body {
padding: 1rem;
}
.bebop-tab-content-card .rounded-circle {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
background: var(--bs-primary);
color: var(--color-neutral-950);
box-shadow: var(--bebop-tab-shadow-primary);
}
.bebop-tab-content-card .border-warning {
border-width: 2px !important;
border-color: var(--bs-warning) !important;
}
.bebop-tab-content-card .bg-warning {
background-color: var(--bs-warning-bg-subtle) !important;
}
.bebop-tab-content-card .text-warning {
color: var(--bs-warning-text-emphasis) !important;
}
@media (max-width: 768px) {
.bebop-tab-nav {
margin-bottom: var(--spacing-6);
border-radius: var(--border-radius-lg);
}
.bebop-tab-item {
flex-direction: column;
padding: 0.5rem 0.35rem;
gap: 0.35rem;
text-align: center;
}
.bebop-tab-icon {
width: 2.25rem;
height: 2.25rem;
}
.bebop-tab-content {
text-align: center;
}
.bebop-tab-title {
font-size: var(--font-size-xs);
}
.bebop-tab-subtitle {
display: none;
}
.bebop-tab-content-card {
padding: 1rem;
border-radius: var(--border-radius-lg);
}
.bebop-tab-content-card h5 {
font-size: 0.8rem;
}
}
@media (min-width: 992px) {
.bebop-tab-content-card {
padding: 1.5625rem;
}
.bebop-tab-content-card {
padding: 1.5625rem;
}
}
/* Browser-style letter tabs: compact, horizontal scroll, + control at end */
.bebop-tab-nav--letter {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
align-items: stretch;
-webkit-overflow-scrolling: touch;
}
.bebop-tab-nav--letter .bebop-tab-item {
flex: 0 1 auto;
min-width: fit-content;
padding: 0.5rem, 1rem;
}
.bebop-tab-nav--letter .bebop-tab-item-select {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
padding: 0.5rem 0.35rem 0.5rem 0.75rem;
background: transparent;
border: none;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
transition: background var(--transition-normal);
}
.bebop-tab-nav--letter .bebop-tab-item-select:hover:not(:disabled) {
background: var(--color-neutral-200);
}
.bebop-tab-nav--letter .bebop-tab-item.active .bebop-tab-item-select:hover:not(:disabled) {
background: var(--color-neutral-50);
}
.bebop-tab-nav--letter .bebop-tab-item-title-inline {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--bs-dark);
white-space: nowrap;
}
.bebop-tab-nav--letter .bebop-tab-item.active .bebop-tab-item-title-inline {
color: var(--bs-primary);
}
.bebop-tab-nav--letter .bebop-tab-item-close {
flex-shrink: 0;
display: flex;
align-items: center;
padding-right: 0.25rem;
}
.bebop-tab-nav--letter .bebop-tab-nav-addon {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 0.35rem 0 0.25rem;
border-left: 1px solid var(--color-neutral-300);
background: var(--bs-light);
}
.bebop-tab-nav--letter .bebop-tab-new-letter-btn {
width: 3rem;
height: 3rem;
}
/* === bebop-table.css === */
.bebop-accordion-list {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}
.bebop-accordion-list-header-actions {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
background: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: var(--border-radius-xl);
margin-bottom: var(--spacing-2);
}
.bebop-accordion-item {
background: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: var(--border-radius-xl);
overflow: hidden;
transition:
box-shadow var(--transition-normal),
border-color var(--transition-normal);
}
.bebop-accordion-item:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-neutral-300);
}
.bebop-accordion-item.expanded {
border-color: var(--color-primary-300);
box-shadow: 0 2px 8px rgba(64, 173, 58, 0.12);
}
.bebop-accordion-item-header {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-4);
cursor: pointer;
user-select: none;
transition: background var(--transition-fast);
position: relative;
}
.bebop-accordion-item-header:hover {
background: var(--color-primary-50);
}
.bebop-accordion-item-header::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.bebop-accordion-item.expanded .bebop-accordion-item-header::before {
transform: scaleY(1);
}
.bebop-accordion-item-summary {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.bebop-accordion-item-summary .bebop-cell-main {
flex: 1;
min-width: 0;
}
.bebop-accordion-item-chevron {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--border-radius-md);
color: var(--color-neutral-500);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color var(--transition-fast),
background var(--transition-fast);
flex-shrink: 0;
}
.bebop-accordion-item.expanded .bebop-accordion-item-chevron {
transform: rotate(180deg);
color: var(--color-primary-600);
}
.bebop-accordion-item-header:hover .bebop-accordion-item-chevron {
background: var(--color-primary-100);
color: var(--color-primary-600);
}
.bebop-accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bebop-accordion-item.expanded .bebop-accordion-item-body {
max-height: 37.5rem;
}
.bebop-accordion-item-detail {
padding: var(--spacing-4);
border-top: 1px solid var(--color-neutral-200);
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}
.bebop-accordion-detail-row {
display: flex;
align-items: flex-start;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
}
.bebop-accordion-detail-label {
font-weight: 600;
color: var(--color-neutral-700);
text-transform: uppercase;
letter-spacing: 0.3px;
font-size: var(--font-size-xs);
min-width: 5.625rem;
flex-shrink: 0;
padding-top: 0.125rem;
}
.bebop-accordion-detail-value {
color: var(--color-neutral-900);
flex: 1;
min-width: 0;
}
.bebop-accordion-detail-actions {
display: flex;
gap: var(--spacing-2);
padding-top: var(--spacing-2);
border-top: 1px solid var(--color-neutral-100);
flex-wrap: wrap;
}
.bebop-desktop-view {
display: none;
}
.bebop-mobile-view {
display: block;
}
@media (min-width: 1536px) {
.bebop-desktop-view {
display: block;
}
.bebop-mobile-view {
display: none;
}
}
.bebop-cell-main {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.bebop-cell-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
color: var(--color-neutral-50);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
flex-shrink: 0;
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
}
.bebop-cell-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.bebop-cell-avatar-placeholder {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--color-neutral-100);
color: var(--color-neutral-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
}
.bebop-cell-content {
flex: 1;
min-width: 0;
}
.bebop-cell-title {
font-weight: 600;
color: var(--color-neutral-900);
margin-bottom: 0.125rem;
font-size: var(--font-size-sm);
}
.bebop-cell-subtitle {
color: var(--color-neutral-500);
font-size: var(--font-size-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bebop-cell-date {
color: var(--color-neutral-500);
font-size: var(--font-size-base);
white-space: nowrap;
}
.bebop-table-container {
overflow: hidden;
}
.bebop-table-container {
background: var(--color-neutral-50);
border-radius: var(--border-radius-xl);
border: 1px solid var(--color-neutral-200);
box-shadow: var(--shadow-sm);
}
.bebop-table {
width: 100%;
border-collapse: collapse;
}
.bebop-table thead {
background: var(--color-neutral-50);
}
.bebop-table th {
padding: var(--spacing-4) 1.25rem;
text-align: left;
font-weight: 600;
color: var(--color-neutral-700);
font-size: var(--font-size-base);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--color-neutral-200);
position: relative;
}
.bebop-table-row {
transition: all var(--transition-fast);
border-bottom: 1px solid var(--color-neutral-100);
}
.bebop-table-row:hover {
background: var(--color-primary-200);
}
.bebop-table-row:last-child {
border-bottom: none;
}
.bebop-table td {
padding: var(--spacing-3) 1rem;
vertical-align: middle;
}
.bebop-table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.02);
}
/* === bebop-total-volume.css === */
.bebop-total-volume-label {
font-weight: 600;
}
.bebop-total-volume-value {
font-size: 1.25rem;
font-weight: 700;
}
.bebop-total-volume {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem;
margin-top: 1.25rem;
background: linear-gradient(135deg, var(--bs-primary) 0%, var(--color-success-600) 100%);
color: var(--color-neutral-950);
border-radius: var(--border-radius-xl);
box-shadow: var(--bebop-tab-shadow-volume);
}
@media (max-width: 767px) {
.bebop-total-volume {
flex-direction: column;
gap: 0.6rem;
padding: 1rem;
text-align: center;
}
.bebop-total-volume-value {
font-size: 1rem;
}
}
/* === carousel.css === */
.carousel-carta-container {
height: 100%;
width: 100%;
position: relative;
}
.carousel-carta-container .carousel,
.carousel-carta-container .carousel-inner,
.carousel-carta-container .carousel-item {
height: 100%;
}
.carousel-carta-container .carousel-indicators {
bottom: 0.25rem;
margin-bottom: 0;
}
.carousel-carta-container .carousel-indicators button {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--color-neutral-300);
border: none;
margin: 0 0.2rem;
opacity: 0.5;
transition: all var(--transition-normal);
}
.carousel-carta-container .carousel-indicators button.active {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-400) 100%);
opacity: 1;
transform: scale(1.2);
}
.carousel-nav-container {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
.carousel-nav-container .carousel-control-prev,
.carousel-nav-container .carousel-control-next {
position: static;
width: auto;
height: auto;
padding: 0.15625rem;
background: transparent;
border: none;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.carousel-nav-container .carousel-control-prev:hover,
.carousel-nav-container .carousel-control-next:hover {
opacity: 1;
}
.carousel-nav-icon {
color: var(--color-primary-500);
font-size: 0.6rem;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
color: var(--color-primary-500);
font-size: 1.5625rem;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
transition: background-color 0.3s ease;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background-color: rgba(33, 254, 51, 0.7);
}
.carousel-vehicle-card {
border-radius: var(--border-radius-xl);
}
.carousel-vehicle-control-prev,
.carousel-vehicle-control-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3.125rem;
height: 3.125rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
border: none;
z-index: 2;
}
.carousel-vehicle-control-prev {
left: 1rem;
}
.carousel-vehicle-control-next {
right: 1rem;
}
.carousel-vehicle-indicators {
bottom: 1rem;
}
.carousel-vehicle-indicators button {
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
}
.carousel-vehicle-img-wrap {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--color-neutral-100);
}
.carousel-vehicle-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.carousel {
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.carousel-control-prev,
.carousel-control-next {
width: 40px;
}
/* === collapse.css === */
.checkbox-wrapper {
position: relative;
flex-shrink: 0;
}
.collapse-group {
border-bottom: 1px solid var(--color-neutral-200);
transition: all var(--transition-normal);
}
.collapse-group:last-child {
border-bottom: none;
}
.collapse-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.collapse-header::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.collapse-header:hover {
background: var(--color-primary-50);
}
.collapse-header:hover::before {
transform: scaleY(1);
}
/* === document-item.css === */
.documento-acoes {
display: flex;
gap: 0.35rem;
flex-shrink: 0;
}
.documento-card-action {
color: var(--color-info-600);
font-size: 0.8rem;
opacity: 0;
transition: all var(--transition-fast);
}
.documento-card:hover .documento-card-action {
opacity: 1;
transform: translateX(4px);
}
.documento-card-icon {
width: 2.625rem;
height: 2.625rem;
background: var(--color-neutral-50);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: var(--color-info-600);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.documento-card-content {
flex: 1;
min-width: 0;
}
.documento-card-meta {
display: flex;
gap: 0.6rem;
margin-top: 0.15625rem;
}
.documento-details {
flex: 1;
min-width: 0;
}
.documento-card-nome {
display: block;
font-weight: 600;
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.documento-card {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.6rem;
background: var(--color-neutral-100);
border-radius: 10px;
cursor: pointer;
transition: all var(--transition-fast);
border: 2px solid transparent;
}
.documento-card:hover {
background: var(--color-info-50);
border-color: var(--color-info-600);
transform: translateX(4px);
}
.documento-card.disabled {
opacity: 0.5;
pointer-events: none;
}
.documento-descricao {
color: var(--color-neutral-500);
margin: 0;
line-height: 1.4;
}
.documento-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.2rem;
}
.documento-item-container {
background: var(--color-neutral-100);
border-radius: var(--border-radius-xl);
padding: 0.6rem 0.8rem;
margin-bottom: 0.5rem;
border: 2px solid transparent;
transition: all 0.25s ease;
}
.documento-item-container:hover {
background: var(--color-neutral-100);
border-color: var(--color-neutral-200);
}
.documento-item-container.documento-enviado {
background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-200) 100%);
border-color: var(--color-success-100);
}
.documento-item-container.processing {
opacity: 0.7;
pointer-events: none;
}
.documento-item-info {
display: flex;
align-items: flex-start;
gap: 0.6rem;
flex: 1;
min-width: 0;
}
.documento-item-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
}
.documento-nome {
font-weight: 600;
color: var(--color-neutral-700);
}
.documento-nome.has-document {
color: var(--color-success-700);
}
.documentos-disponiveis-panel {
margin-top: 0.6rem;
background: var(--color-neutral-50);
border-radius: var(--border-radius-xl);
border: 2px solid var(--color-info-600);
overflow: hidden;
animation: slideDown 0.3s ease;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
.documentos-grid {
padding: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
max-height: 15.625rem;
overflow-y: auto;
}
@media (max-width: 640px) {
.documentos-grid {
max-height: 12.5rem;
}
.documento-item-main {
flex-direction: column;
gap: 0.5rem;
}
.documento-card-meta {
flex-direction: column;
gap: 0.15625rem;
}
.documento-acoes {
width: 100%;
justify-content: flex-end;
}
}
/* === dropdown.css === */
.dropdown-item {
transition: all var(--transition-normal);
}
.dropdown-item:hover {
color: var(--color-primary-500) !important;
background-color: rgba(33, 254, 51, 0.1) !important;
}
.dropdown-item i {
margin-right: 0.35rem;
}
.dropdown-toggle {
color: var(--color-neutral-50) !important;
background: transparent !important;
border: none !important;
transition: all var(--transition-fast);
position: relative;
padding-bottom: 0.35rem !important;
}
.dropdown-toggle:hover {
color: var(--color-primary-500) !important;
background-color: transparent !important;
transform: translateY(-1px);
}
.dropdown-toggle::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 2px !important;
background: var(--color-primary-500) !important;
transition: width 0.3s ease !important;
border-radius: 1px !important;
border: none !important;
margin-left: 0 !important;
vertical-align: unset !important;
}
.dropdown-toggle:hover::after {
width: 80% !important;
}
.dropdown-toggle:active,
.dropdown-toggle:focus,
.dropdown-toggle.active,
.dropdown-toggle.show {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.dropdown-toggle:active,
.dropdown-toggle.active,
.dropdown-toggle.show {
color: var(--color-primary-500) !important;
}
.dropdown-toggle::before {
content: "▼";
font-size: 0.45rem;
margin-left: 0.35rem;
color: inherit;
}
/* === empty-state.css === */
.empty-state-badge {
background: rgba(107, 114, 128, 0.1);
color: var(--color-neutral-600);
}
.empty-state-card {
opacity: 0.7;
}
.empty-state-link {
color: var(--color-neutral-600);
font-weight: 500;
}
.empty-state-link::after {
content: " +";
}
.empty-state-value {
font-size: 1rem;
color: var(--color-neutral-500);
font-style: italic;
}
/* === error.css === */
.error-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 1.25rem;
}
.error-card {
background: var(--color-neutral-50);
border-radius: var(--border-radius-xl);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.875rem 1.25rem;
max-width: 31.25rem;
width: 100%;
}
.error-icon {
font-size: 2.5rem;
color: var(--color-warning-400);
margin-bottom: var(--spacing-6);
}
.error-title {
color: var(--color-neutral-900);
font-weight: 600;
margin-bottom: 0.6rem;
}
.error-description {
color: var(--color-neutral-500);
margin-bottom: 1.25rem;
}
.error-actions {
margin-top: 1rem;
}
@media (max-width: 991.98px) {
.error-card {
padding: 1.25rem 1rem;
}
.error-icon {
font-size: 1.875rem;
}
}
/* === home-card-credit-letter.css === */
.carta-counter {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--color-neutral-500);
}
.carta-progress-label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
}
/* === limited-access-alert.css === */
.limited-access-alert .alert-heading {
color: var(--color-warning-700);
}
.limited-access-alert p {
color: var(--color-warning-700);
}
.limited-access-alert i.bi-exclamation-triangle-fill {
color: var(--color-warning-500);
}
.limited-access-alert {
border-left: var(--border-width-4) solid var(--color-warning-500);
background: linear-gradient(135deg, var(--color-warning-50) 0%, var(--color-warning-100) 100%);
border-radius: var(--border-radius-xl);
}
@media (max-width: 1650px) {
.limited-access-alert .bi-exclamation-triangle-fill {
font-size: var(--font-size-2xl) !important;
}
}
/* === login.css === */
.login-container {
display: flex;
min-height: 100vh;
width: 100%;
}
.login-container .alert {
border-radius: var(--border-radius-xl);
border: none;
padding: 0.6rem;
margin-top: 0.6rem;
font-weight: 500;
}
.login-form-column {
flex: 1 1 100%;
width: 100%;
min-height: 100vh;
max-width: 100%;
max-height: 99.99vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.25rem 1rem;
background: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
position: relative;
z-index: 10;
overflow-y: auto;
}
.login-form-column-loading {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0;
}
.login-content {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
flex-shrink: 0;
margin-top: auto;
margin-bottom: auto;
}
.login-header {
text-align: center;
margin-bottom: 1.25rem;
}
.login-divider {
display: flex;
align-items: center;
margin: 0.6rem 0;
gap: 0.5rem;
}
.login-divider::before,
.login-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-primary-200);
}
.login-divider span {
font-size: var(--font-size-sm);
color: var(--color-primary-800);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.login-logo {
height: 3.75rem;
animation: logoFloat 3s ease-in-out infinite;
}
.card.login {
padding: var(--spacing-5);
padding-top: var(--spacing-8);
}
.login-submit-btn {
width: 100% !important;
height: 3.5rem !important;
border-radius: var(--border-radius-xl) !important;
font-weight: 600 !important;
font-size: 0.6rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all var(--transition-normal) !important;
position: relative !important;
overflow: hidden !important;
}
.login-submit-btn:hover {
transform: translateY(-0.125rem) !important;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
}
.login-submit-btn:active {
transform: translateY(0) !important;
}
.login-image-column {
display: none;
flex: 0 0 60%;
position: relative;
overflow: hidden;
}
.login-image {
width: 100%;
height: 100%;
background-image: url("/images/login.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.login-image-primary-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
}
.login-image-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
height: 100%;
padding: 2.5rem 2rem;
box-sizing: border-box;
}
.login-image-title {
margin: 0;
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-primary-100);
}
.login-image-subtitle {
margin: 0;
max-width: 28rem;
font-size: var(--font-size-base, 1rem);
line-height: 1.5;
font-weight: 400;
color: color-mix(in srgb, var(--color-neutral-50) 92%, transparent);
}
@media (min-width: 768px) {
.login-form-column {
padding: 1.875rem 1.25rem;
}
}
/* Image + 50/50 split only above 1024px; at 1024px and below the form uses the full viewport. */
@media (min-width: 1025px) {
.login-image-column {
display: block;
flex: 0 0 50%;
}
.login-form-column {
flex: 0 0 50%;
max-width: 50%;
min-height: 100%;
padding: 2.5rem 1.875rem;
}
.login-content {
max-width: 32.5rem;
}
}
@media (min-width: 1440px) {
.login-form-column {
padding: 3rem 2.5rem;
}
.login-content {
max-width: 36rem;
}
}
@media (max-width: 1024px) {
.login-content {
max-width: none;
width: 100%;
}
}
/* === marketplace.css === */
.marketplace-grid {
padding: 0;
}
.marketplace-chips-row {
padding: 0.35rem 0;
}
.marketplace-filters-toggle-btn {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.marketplace-chip,
.marketplace-filter-tag {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: var(--font-size-xs);
font-weight: 500;
}
.marketplace-chip {
padding: 0.2rem 0.40625rem;
color: var(--color-neutral-50);
background: linear-gradient(135deg, var(--color-neutral-800) 0%, var(--color-neutral-700) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
transition:
background 0.2s,
box-shadow 0.2s,
transform 0.15s;
}
.marketplace-chip:hover {
background: linear-gradient(135deg, var(--color-neutral-700) 0%, var(--color-neutral-800) 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.marketplace-chip-remove,
.marketplace-filter-tag-remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
width: 1rem;
height: 1rem;
border: none;
cursor: pointer;
}
.marketplace-chip-remove {
margin-left: 0.09375rem;
font-size: 0.45rem;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
transition:
color 0.15s,
background 0.15s;
}
.marketplace-chip-remove:hover {
color: var(--color-neutral-50);
background: rgba(255, 255, 255, 0.25);
}
.marketplace-filter-tag {
padding: 0.15625rem 0.35rem;
color: var(--color-neutral-600);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius-md);
transition:
background-color 0.15s,
border-color 0.15s;
}
.marketplace-filter-tag:hover {
background-color: var(--color-neutral-200);
border-color: var(--color-neutral-200);
}
.marketplace-filter-tag-remove {
margin: 0;
font-size: 0.40625rem;
color: var(--color-neutral-500);
background: transparent;
border-radius: var(--border-radius-base);
transition:
color 0.15s,
background-color 0.15s;
}
.marketplace-filter-tag-remove:hover {
color: var(--color-error-400);
background-color: rgba(220, 53, 69, 0.1);
}
/* Sticky wrapper; scrolling lives on inner .card.filters-sidebar (same node breaks sticky in browsers). */
.marketplace-filters-sticky {
position: sticky;
top: 7rem;
z-index: 2;
}
.filters-sidebar {
max-height: calc(100vh - 10.25rem);
overflow-y: visible;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
scrollbar-gutter: stable;
}
@media (max-width: 992px) {
.marketplace-filters-hidden {
display: none !important;
}
}
@media (min-width: 1200px) and (max-width: 1280px) {
.marketplace-grid .row > .col-xl-3 {
flex: 0 0 auto;
width: 50%;
max-width: 50%;
}
}
@media (max-width: 1535px) {
.disable-mobile-title > span {
display: none;
}
.disable-mobile-title .me-2 {
margin-right: 0 !important;
}
}
/* === metric.css === */
.metric-card {
background: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
border-radius: var(--border-radius-3xl);
border: none;
box-shadow: var(--shadow-lg);
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
height: 10rem;
}
.metric-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--border-width-4);
background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.metric-card:hover::before,
.metric-card-link:hover::before {
opacity: 1;
}
.metric-card:hover,
.metric-card-link:hover {
transform: translateY(calc(-1 * var(--spacing-2)));
box-shadow: var(--shadow-xl);
}
.metric-card:hover .metric-icon,
.metric-card-link:hover .metric-icon {
transform: scale(1.1) rotate(5deg);
}
.metric-card-link {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.metric-card-link:hover {
text-decoration: none;
color: inherit;
}
.metric-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.metric-value {
font-size: 1.40625rem;
font-weight: 700;
color: var(--color-neutral-900);
margin: 0;
line-height: 1;
min-height: 2.25rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.metric-value .progress {
border-radius: var(--border-radius-base);
background-color: var(--color-neutral-200);
}
.metric-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: var(--border-radius-2xl);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
color: var(--color-neutral-50);
font-size: var(--font-size-2xl);
transition: transform var(--transition-slow);
}
.metric-icon-sm {
width: var(--spacing-10);
height: var(--spacing-10);
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.metric-indicator {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-top: var(--spacing-1);
}
.metric-link {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary-500);
transition: all var(--transition-normal);
}
.metric-link::after {
content: " →";
transition: transform 0.3s ease;
}
.metric-link:hover,
.metric-card-link:hover .metric-link {
transform: translateX(var(--spacing-1));
}
.metric-card-link:hover .metric-link::after {
transform: translateX(var(--spacing-1));
}
.metric-period {
font-size: var(--font-size-xs);
color: var(--color-neutral-500);
font-weight: 500;
}
.metrics-legend {
display: flex;
gap: var(--spacing-6);
justify-content: center;
flex-wrap: wrap;
padding: var(--spacing-4);
background: var(--color-neutral-50);
border-radius: var(--border-radius-lg);
}
.metric-supplier {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-3);
background: var(--color-neutral-0);
border-radius: var(--border-radius-md);
height: 100%;
transition: all var(--transition-normal);
}
.metric-supplier:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.metrics-supplier {
background: var(--color-neutral-50);
padding: var(--spacing-4);
border-radius: var(--border-radius-lg);
}
@media (max-width: 1650px) {
.metric-info {
flex: 1;
}
.metric-content {
flex-direction: row;
align-items: flex-start;
}
}
@media (max-width: 767.98px) {
.metrics-legend {
flex-direction: column;
gap: var(--spacing-3);
}
}
@media (max-width: var(--breakpoint-sm)) {
.metric-icon {
width: var(--spacing-12);
height: var(--spacing-12);
font-size: var(--font-size-xl);
}
.metric-value {
font-size: 1.171875rem;
}
.metric-card {
height: 8.75rem;
border-radius: var(--border-radius-2xl);
}
}
/* === navbar.css === */
.navbar-custom {
background: var(--color-neutral-950) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
height: 4.4rem;
}
.navbar a {
text-decoration: none;
}
.navbar-brand img {
height: 1.8rem;
transition: transform var(--transition-slow);
}
.navbar-brand img:hover {
transform: scale(1.05);
}
.navbar-brand:active,
.navbar-brand:focus,
.navbar-brand:active img,
.navbar-brand:focus img,
.navbar-brand img:active,
.navbar-brand img:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav .nav-link {
color: var(--color-neutral-50) !important;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
position: relative;
padding-bottom: 0.35rem !important;
}
.navbar-nav .nav-link:hover {
color: var(--color-primary-500) !important;
transform: translateY(-0.0625rem);
background-color: transparent !important;
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--color-primary-500);
transition: width var(--transition-slow);
border-radius: 1px;
}
.navbar-nav .nav-link:hover::after {
width: 80%;
}
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.navbar-nav .nav-link:active,
.navbar-nav .nav-link.active {
color: var(--color-primary-500) !important;
}
/* Main nav expands at 1602px (Bootstrap lg is 992px; no built-in token for this width). */
@media (min-width: 1602px) {
.navbar-expand-bebop {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-bebop .navbar-nav {
flex-direction: row;
}
.navbar-expand-bebop .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-bebop .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-bebop .navbar-nav-scroll {
overflow: visible;
}
.navbar-expand-bebop .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-expand-bebop .navbar-toggler {
display: none;
}
.navbar-expand-bebop .offcanvas-header {
display: none;
}
.navbar-expand-bebop .offcanvas {
position: inherit;
bottom: 0;
z-index: 1000;
flex-grow: 1;
visibility: visible !important;
background-color: transparent;
border-right: 0;
border-left: 0;
transition: none;
transform: none;
}
.navbar-expand-bebop .offcanvas-bottom,
.navbar-expand-bebop .offcanvas-top {
height: auto;
border-top: 0;
border-bottom: 0;
}
.navbar-expand-bebop .offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
/*
* Bootstrap `*-lg-*` utilities still use 992px; keep them aligned with navbar-expand-bebop
* so the offcanvas layout and labels match the burger breakpoint.
*/
@media (min-width: 992px) and (max-width: 1601.98px) {
.navbar-custom .flex-lg-row.flex-column {
flex-direction: column !important;
}
.navbar-custom .mb-lg-0.mb-2 {
margin-bottom: 0.5rem !important;
}
.navbar-custom .me-lg-0.me-2 {
margin-right: 0.5rem !important;
}
.navbar-custom .px-lg-2.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.navbar-custom .d-lg-none.d-inline {
display: inline !important;
}
}
/*
* Offcanvas uses a transformed panel; Popper can pin the menu beside the toggle.
* Below the expanded breakpoint, stack toggle and menu vertically and keep the menu in normal flow (no color changes).
*/
@media (max-width: 1601.98px) {
/*
* Offcanvas lives inside .fixed-top (z-index 1030). Bootstrap appends the
* backdrop to body at 1040, which paints over the panel. Lift the navbar
* stacking context above the backdrop so the menu stays visible.
*/
.navbar-custom.fixed-top {
z-index: 1050;
}
.navbar-custom .offcanvas.show {
visibility: visible;
}
.navbar-nav {
max-width: 100%;
}
.navbar-custom #offcanvasNavbar .nav-item.dropdown {
display: flex;
flex-direction: column;
align-items: stretch;
}
.navbar-custom #offcanvasNavbar .dropdown-menu {
position: static !important;
float: none;
width: 100%;
max-width: 100%;
margin-top: 0 !important;
margin-bottom: 0.25rem;
transform: none !important;
inset: auto !important;
}
.navbar-custom #offcanvasNavbar .dropdown-menu[data-bs-popper] {
top: auto !important;
left: auto !important;
right: auto !important;
}
}
/* === notification.css === */
.notification-card {
width: 26.25rem;
border-radius: var(--border-radius-md);
overflow: hidden;
}
.notification-description {
line-height: 1.6;
color: var(--color-neutral-600);
}
.notification-description p {
margin-bottom: 0.35rem;
}
.notification-header {
background-color: var(--bs-success, var(--color-primary-500));
color: var(--color-neutral-50);
padding: 0.6rem 1rem;
font-weight: 600;
}
.notification-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
}
.notification-icon.padrao {
background: linear-gradient(135deg, var(--color-neutral-500) 0%, var(--color-neutral-600) 100%);
color: var(--color-neutral-50);
}
.notification-icon.mensagem {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
color: var(--color-neutral-50);
}
.notification-icon.aprovacao {
background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-800) 100%);
color: var(--color-neutral-50);
}
.notification-icon.reprovacao {
background: linear-gradient(135deg, var(--color-error-400) 0%, var(--color-error-800) 100%);
color: var(--color-neutral-50);
}
.notification-icon.interessados {
background: linear-gradient(135deg, var(--color-warning-400) 0%, var(--color-warning-500) 100%);
color: var(--color-neutral-900);
}
.notification-img {
max-width: 7.5rem;
max-height: 5rem;
object-fit: cover;
}
.notification-wrapper {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -120%);
z-index: 9999;
transition: transform 0.5s ease;
}
.notification-wrapper.show {
transform: translate(-50%, 1.25rem);
}
.notification-wrapper.hide {
transform: translate(-50%, -120%);
}
.notification-card {
width: 26.25rem;
border-radius: var(--border-radius-md);
overflow: hidden;
}
/* === panel.css === */
.panel-title {
display: flex;
align-items: center;
gap: 0.35rem;
font-weight: 600;
}
.panel-title i {
font-size: 0.6875rem;
}
.panel-footer {
padding: 0.5rem 0.8rem;
background: var(--color-neutral-100);
border-top: 1px solid var(--color-neutral-200);
}
.panel-header {
background: linear-gradient(135deg, var(--color-info-600) 0%, var(--color-info-700) 100%);
color: var(--color-neutral-50);
padding: 0.6rem 0.8rem;
}
.panel-subtitle {
display: block;
font-size: 0.5rem;
opacity: 0.9;
}
.panel-title {
display: flex;
align-items: center;
gap: 0.35rem;
font-weight: 600;
}
/* === plan-card.css === */
.plan-card {
border: 1px solid rgba(0, 0, 0, 0.1) !important;
transition: all var(--transition-normal);
}
.plan-card:hover {
transform: translateY(-0.5rem) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15) !important;
}
.plan-card-featured {
border: 2px solid var(--color-primary-500) !important;
box-shadow: 0 10px 40px rgba(33, 254, 51, 0.2) !important;
transform: scale(1.02);
}
.plan-card-featured:hover {
transform: scale(1.05) translateY(-0.35rem) !important;
box-shadow: 0 15px 50px rgba(33, 254, 51, 0.3) !important;
}
.plan-card-premium {
border: 2px solid rgba(255, 193, 7, 0.4) !important;
background: var(--color-neutral-50);
}
.plan-card-premium:hover {
border-color: rgba(255, 193, 7, 0.6) !important;
box-shadow: 0 12px 40px rgba(255, 193, 7, 0.25) !important;
}
@media only screen and (max-width: 991px) {
.plan-card {
margin-bottom: 1.25rem;
}
.plan-card-premium {
margin-bottom: 1.25rem;
}
.plan-card-featured {
transform: scale(1) !important;
margin-bottom: 1.25rem;
}
.plan-card-featured:hover {
transform: scale(1.02) translateY(-0.35rem) !important;
}
}
@media only screen and (max-width: 768px) {
.plan-card {
transform: none !important;
margin-bottom: var(--spacing-6);
}
.plan-card:hover {
transform: translateY(-0.2rem) !important;
}
.plan-card-premium {
transform: none !important;
margin-bottom: var(--spacing-6);
}
.plan-card-premium:hover {
transform: translateY(-0.2rem) !important;
}
.plan-card-featured {
transform: none !important;
margin-bottom: var(--spacing-6);
}
.plan-card-featured:hover {
transform: translateY(-0.2rem) !important;
}
}
/* === price.css === */
.price-main {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.price-discount-info {
margin-bottom: 0.375rem;
}
.price-current {
font-size: 1rem;
font-weight: 700;
color: var(--bs-dark);
line-height: 1;
}
.price-original {
display: block;
color: var(--color-neutral-500);
text-decoration: line-through;
margin-bottom: 0.125rem;
font-weight: 500;
}
.price-tag {
display: inline-block;
padding: var(--spacing-1) var(--spacing-2);
background: var(--color-neutral-0);
border-radius: var(--border-radius-md);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-primary-600);
border: var(--border-width-1) solid var(--color-primary-100);
}
@media (max-width: 768px) {
.price-tag {
margin-top: var(--spacing-1);
}
}
/* === product.css === */
.product-card {
background: var(--color-neutral-50);
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all var(--transition-fast);
height: 100%;
border: 1px solid var(--color-neutral-200);
cursor: pointer;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border-color: var(--color-primary-500);
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-card:hover .product-title {
color: var(--color-primary-500);
}
.product-card .product-info {
padding: 0.6rem;
flex: 1;
display: flex;
flex-direction: column;
}
.product-actions {
margin-top: auto;
}
.product-description {
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
margin-bottom: 0.5rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.product-highlights {
display: flex;
gap: var(--spacing-2);
margin-bottom: 1rem;
flex-wrap: wrap;
}
.product-image {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--color-neutral-100);
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-info {
padding: var(--spacing-4);
background: var(--color-neutral-50);
border-radius: var(--border-radius-lg);
border: var(--border-width-1) solid var(--color-neutral-200);
}
.product-info h5 {
font-weight: var(--font-weight-semibold);
}
.product-location {
display: flex;
align-items: center;
gap: 0.375rem;
color: var(--color-neutral-600);
font-weight: 500;
}
.product-location i {
color: var(--color-neutral-500);
font-size: var(--font-size-sm);
}
.product-pricing {
margin-bottom: 1rem;
background: var(--color-neutral-50);
border-radius: var(--border-radius-lg);
}
.product-title {
font-weight: 600;
color: var(--color-neutral-900);
margin: 0 0 0.35rem 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.product-title {
font-size: 1rem;
}
.product-info {
padding: 0.5rem;
}
.product-highlights {
gap: 0.375rem;
}
.product-card {
margin-bottom: 0.6rem;
}
}
/* === products.css === */
.products-list {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
.products-item {
display: flex;
align-items: center;
padding: var(--spacing-2);
background: var(--color-neutral-50);
border-radius: var(--border-radius-md);
border-left: 3px solid var(--color-primary-500);
transition: all var(--transition-normal);
}
.products-item:hover {
background: var(--color-neutral-100);
transform: translateX(4px);
}
.products-item strong {
font-size: var(--font-size-sm);
color: var(--color-neutral-900);
}
.products-type-value {
color: var(--color-primary-500);
}
.products-type-card {
background: var(--color-neutral-50);
border: var(--border-width-1) solid var(--color-neutral-200);
border-radius: var(--border-radius-lg);
transition: all var(--transition-normal);
height: 100%;
}
.products-type-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary-500);
}
@media (max-width: 768px) {
.products-item {
flex-direction: column;
align-items: flex-start;
}
}
/* === profile-avatar.css === */
/* Circular profile picture preview (read-only + upload) */
.profile-avatar-wrap {
display: inline-block;
border-radius: 50%;
overflow: hidden;
}
.profile-avatar-wrap--96 {
width: 96px;
height: 96px;
}
.profile-avatar-wrap--120 {
width: 120px;
height: 120px;
background: var(--bs-secondary-bg, #e9ecef);
}
.profile-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* === registration.css === */
/* ----- Button ----- */
.registration-btn {
width: 100% !important;
height: 3rem !important;
border-radius: 10px !important;
font-weight: 500 !important;
transition: all var(--transition-fast) !important;
border: 1px solid var(--color-neutral-200) !important;
background: var(--color-neutral-50) !important;
color: var(--color-neutral-500) !important;
}
.registration-btn:hover {
background: var(--color-neutral-100) !important;
border-color: var(--color-success-400) !important;
color: var(--color-success-400) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}
/* ----- Section & copy ----- */
.registration-intro {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.registration-section {
margin-top: 1.5rem;
text-align: center;
}
.registration-subtitle {
color: var(--color-neutral-500);
font-size: 1rem;
margin-bottom: 0;
line-height: 1.4;
}
.registration-subtitle-text {
font-size: 0.95rem;
color: var(--color-neutral-500);
margin-bottom: 1rem;
}
/* ----- Cards container ----- */
.registration-cards {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* ----- Base card ----- */
.registration-card {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: var(--color-neutral-50);
border: 2px solid var(--color-neutral-200);
border-radius: 10px;
text-decoration: none;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.registration-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0.25rem;
height: 100%;
background: var(--color-neutral-200);
transition: all var(--transition-normal);
}
.registration-card:hover .registration-card-icon {
transform: scale(1.1);
}
.registration-card-arrow {
flex-shrink: 0;
color: var(--color-neutral-50);
font-size: 0.6rem;
transition: all var(--transition-normal);
}
.registration-card-content {
flex: 1;
text-align: left;
}
.registration-card-description {
font-size: 1rem;
color: var(--color-neutral-500);
margin: 0;
line-height: 1.3;
}
.registration-card-icon {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
transition: all var(--transition-normal);
}
.registration-card-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-neutral-600);
margin: 0 0 0.125rem 0;
transition: color var(--transition-normal);
line-height: 1.3;
}
/* ----- Card variants (customer, supplier, seller) ----- */
.registration-card-customer:hover,
.registration-card-supplier:hover,
.registration-card-seller:hover {
transform: translateY(-2px);
}
.registration-card-customer:hover {
border-color: var(--color-info-700);
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-info-700) 15%, transparent);
}
.registration-card-supplier:hover {
border-color: var(--color-success-500);
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-success-500) 15%, transparent);
}
.registration-card-seller:hover {
border-color: var(--color-warning-500);
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-warning-500) 15%, transparent);
}
.registration-card-customer:hover::before,
.registration-card-supplier:hover::before,
.registration-card-seller:hover::before {
width: 100%;
opacity: 0.1;
}
.registration-card-customer:hover::before {
background: var(--color-info-700);
}
.registration-card-supplier:hover::before {
background: var(--color-success-500);
}
.registration-card-seller:hover::before {
background: var(--color-warning-500);
}
.registration-card-customer .registration-card-icon {
background: linear-gradient(135deg, var(--color-info-700) 0%, var(--color-info-800) 100%);
color: var(--color-neutral-50);
}
.registration-card-supplier .registration-card-icon {
background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-warning-700) 100%);
color: var(--color-neutral-50);
}
.registration-card-seller .registration-card-icon {
background: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-600) 100%);
color: var(--color-neutral-50);
}
@media (min-width: 1024px) {
.registration-section {
margin-top: 1.25rem;
}
.registration-subtitle-text {
margin-bottom: 0.875rem;
}
.registration-card {
padding: 0.6rem 0.75rem;
}
.registration-card-icon {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
}
/* === stat.css === */
.stat-card {
border-radius: var(--border-radius-xl);
transition:
transform var(--transition-normal),
box-shadow var(--transition-normal);
border: var(--border-width-1) solid var(--color-neutral-200);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg) !important;
border-color: var(--color-primary-500);
}
.stat-card h6 {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.stat-card h2 {
font-size: var(--font-size-2xl);
}
.stat-icon {
width: 3.75rem;
height: 3.75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-xl);
font-size: var(--font-size-3xl);
flex-shrink: 0;
}
.stat-icon-primary {
background-color: var(--color-primary-100);
color: var(--color-primary-500);
}
.stat-icon-info {
background-color: var(--color-neutral-200);
color: var(--color-neutral-900);
}
.stat-icon-success {
background-color: var(--color-primary-200);
color: var(--color-primary-600);
}
.stat-icon-warning {
background-color: var(--color-warning-100);
color: var(--color-warning-700);
}
.stat-value-sm {
font-size: var(--font-size-xl) !important;
}
@media (max-width: 1650px) {
.stat-value-sm {
font-size: var(--font-size-lg) !important;
}
.stat-card h2 {
font-size: var(--font-size-2xl);
}
.stat-card .stat-icon {
width: 3.125rem;
height: 3.125rem;
font-size: var(--font-size-2xl);
}
}
/* === summary-card.css === */
.summary-card {
border-radius: var(--border-radius-xl);
transition:
transform var(--transition-normal),
box-shadow var(--transition-normal);
border: var(--border-width-1) solid var(--color-neutral-200);
}
.summary-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg) !important;
border-color: var(--color-primary-500);
}
.summary-value {
font-size: var(--font-size-lg);
color: var(--color-neutral-900);
}
/* === toggle-btn.css === */
.toggle-btn {
display: flex;
align-items: center;
gap: 0.375rem;
padding: var(--spacing-2) 1rem;
border: none;
background: transparent;
border-radius: var(--border-radius-lg);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-neutral-600);
cursor: pointer;
transition: all var(--transition-fast);
}
.toggle-btn:hover:not(.active) {
background: var(--color-neutral-200);
color: var(--color-neutral-800);
}
.toggle-btn.active {
background: var(--bs-dark, var(--color-neutral-900));
color: var(--color-neutral-50);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.toggle-btn i {
font-size: 0.6rem;
}
@media (max-width: 576px) {
.toggle-btn span {
display: none;
}
.toggle-btn {
padding: var(--spacing-2) 0.75rem;
}
}
/* === transfer-responsability-modal.css === */
.custom-label {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.6rem;
font-weight: 600;
color: var(--color-neutral-600);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.custom-label i {
color: var(--color-primary-500);
font-size: 0.6rem;
}
.counter-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.5rem;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-400) 100%);
color: var(--color-neutral-50);
border-radius: 20px;
font-size: var(--font-size-sm);
font-weight: 700;
letter-spacing: 0.3px;
box-shadow: 0 2px 8px rgba(33, 254, 51, 0.3);
animation: pulse-badge 2s ease-in-out infinite;
}
.subordinado-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1rem;
margin-bottom: 0.35rem;
background: var(--color-neutral-50);
border: 2px solid var(--color-neutral-300);
border-radius: var(--border-radius-xl);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
animation: slideIn 0.4s ease backwards;
}
.subordinado-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.25rem;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-400) 100%);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.subordinado-item:hover {
background: var(--color-primary-50);
border-color: var(--color-primary-500);
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(33, 254, 51, 0.15);
}
.subordinado-item:hover::before {
transform: scaleY(1);
}
.subordinado-item.selected {
background: linear-gradient(135deg, rgba(33, 254, 51, 0.1) 0%, rgba(23, 198, 83, 0.05) 100%);
border-color: var(--color-primary-500);
box-shadow: 0 4px 12px rgba(33, 254, 51, 0.2);
}
.subordinado-item.selected::before {
transform: scaleY(1);
}
.subordinado-item:last-child {
margin-bottom: 0;
}
.subordinado-item:nth-child(1) {
animation-delay: 0.05s;
}
.subordinado-item:nth-child(2) {
animation-delay: 0.1s;
}
.subordinado-item:nth-child(3) {
animation-delay: 0.15s;
}
.subordinado-item:nth-child(4) {
animation-delay: 0.2s;
}
.subordinado-item:nth-child(5) {
animation-delay: 0.25s;
}
.subordinado-item:nth-child(6) {
animation-delay: 0.3s;
}
.subordinado-item:nth-child(7) {
animation-delay: 0.35s;
}
.subordinado-item:nth-child(8) {
animation-delay: 0.4s;
}
@media (max-width: 576px) {
.subordinado-item {
padding: 0.5rem;
}
}
/* === upgrade-card.css === */
.upgrade-card {
border-radius: var(--border-radius-xl);
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-200) 100%);
border: var(--border-width-2) solid var(--color-primary-500);
}
.upgrade-card .upgrade-icon {
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-500);
color: var(--color-neutral-950);
border-radius: var(--border-radius-full);
font-size: var(--font-size-3xl);
flex-shrink: 0;
}
@media (max-width: 1650px) {
.upgrade-card .upgrade-icon {
width: 3.75rem;
height: 3.75rem;
font-size: var(--font-size-2xl);
}
}
/* === user-form.css === */
/* ----------------------------------------------------------------------------
* User form
* The UserForm is rendered in multiple contexts:
* - App pages (InsertUser, ProfileUser): wide container
* - Signup pages (UserSignup, Customer): half-screen LoginLayout column
* Bootstrap column breakpoints (col-md-*) react to the viewport, so on
* desktop signup the form column is only ~520px wide yet triggers the
* two-column layout, making fields cramped. Container queries scoped to
* .bebop-user-form fix this by reacting to the form's own width.
* ----------------------------------------------------------------------------*/
.bebop-user-form {
container-type: inline-size;
container-name: bebop-user-form;
}
/* Spacing between sibling sections (hierarchy, company, seller). */
.bebop-user-form-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-neutral-200);
}
/* Collapse col-md-6 inside this form when the container is narrow,
* regardless of the viewport width. 640px ≈ the point at which two
* stacked form fields start feeling cramped. */
@container bebop-user-form (max-width: 640px) {
.bebop-user-form .row > .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Progressive enhancement fallback for browsers without @container support.
* Forces single-column layout when the viewport is narrow enough that the
* form is also guaranteed to be narrow (mobile / sub-tablet). */
@supports not (container-type: inline-size) {
@media (max-width: 768px) {
.bebop-user-form .row > .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
}
/* === view-subscription.css === */
.subscription-card-height {
min-height: 12.5rem;
height: auto;
}
.subscription-card-height .card-body {
padding: 0.6rem !important;
}
.subscription-info-icon {
width: 3.75rem;
height: 3.75rem;
margin: 0 auto 0.6rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(33, 254, 51, 0.1) 0%, rgba(33, 254, 51, 0.05) 100%);
transition: all var(--transition-normal);
}
.subscription-info-icon:hover {
transform: scale(1.1);
background: linear-gradient(135deg, rgba(33, 254, 51, 0.15) 0%, rgba(33, 254, 51, 0.1) 100%);
}
.subscription-info-icon i {
transition: all var(--transition-normal);
}
.subscription-info-item {
flex: 1;
max-width: 18.75rem;
padding: 0.6rem;
}
.subscription-info-section {
padding: 1.25rem 0;
}
.subscription-status-card {
background: var(--color-neutral-50);
border: 1px solid rgba(0, 0, 0, 0.08) !important;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.subscription-status-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.subscription-status-card .progress {
border-radius: var(--border-radius-lg);
overflow: hidden;
background-color: var(--color-neutral-200);
}
.subscription-status-card .progress-bar {
border-radius: var(--border-radius-lg);
transition: width 0.6s ease;
}
.subscription-status-card .progress-bar.bg-success {
background-color: var(--bs-progress-bar-bg, var(--color-primary-500)) !important;
}
@media only screen and (max-width: 991px) {
.subscription-info-item {
max-width: 100%;
}
.subscription-info-section {
flex-direction: column;
gap: 1.25rem !important;
}
}
@media only screen and (max-width: 767px) {
.subscription-info-icon {
width: 3.125rem;
height: 3.125rem;
}
.subscription-info-icon i {
font-size: 1rem !important;
}
.subscription-info-section {
gap: 1rem !important;
padding: 1rem 0;
}
.subscription-status-card .badge {
margin-top: 0.6rem;
align-self: flex-start;
}
}
/* === warning-layout.css === */
.accent-circle {
width: 1.875rem;
height: 1.875rem;
border: 2px solid var(--color-primary-950);
border-radius: 50%;
position: absolute;
opacity: 0.2;
}
.accent-circle.circle-1 {
top: 15%;
right: 12%;
}
.accent-circle.circle-2 {
top: 50%;
left: 12%;
}
.accent-circle.circle-3.is-bigger {
top: auto;
bottom: -17%;
left: -7.6vw;
right: auto;
transform: scale(2);
}
.access-denied-message {
font-size: 0.8rem;
}
.content-column {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
}
.content-column .btn {
align-self: flex-start;
}
.decorative-x {
position: absolute;
opacity: 0.15;
filter: brightness(0);
}
.decorative-x.x-1 {
top: 10%;
left: 5%;
width: 5rem;
height: 5rem;
}
.decorative-x.x-2 {
top: 60%;
left: 8%;
width: 3.75rem;
height: 3.75rem;
}
.decorative-x.x-3 {
bottom: 10%;
right: 8%;
width: 6.25rem;
height: 6.25rem;
}
.sem-permissao-container {
position: relative;
width: 100vw;
height: 100vh;
min-height: 100vh;
background-color: var(--color-primary-50);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.decorative-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.subordinados-actions {
display: flex;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.sem-permissao-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 87.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
}
.subordinados-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.subordinados-list {
max-height: 20rem;
overflow-y: auto;
padding: 0.35rem;
background: var(--color-neutral-100);
border-radius: var(--border-radius-xl);
border: 2px solid var(--color-neutral-200);
scrollbar-width: thin;
scrollbar-color: var(--color-primary-500) var(--color-neutral-200);
}
.subordinados-list::-webkit-scrollbar {
width: 0.5rem;
}
.subordinados-list::-webkit-scrollbar-track {
background: var(--color-neutral-200);
border-radius: var(--border-radius-base);
}
.subordinados-list::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-400) 100%);
border-radius: var(--border-radius-base);
}
.subordinados-list::-webkit-scrollbar-thumb:hover {
background: var(--color-secondary-400);
}
@media (max-width: 1024px) {
.content-column {
order: 1;
align-items: center;
}
.content-column .btn {
align-self: center;
}
.sem-permissao-content {
grid-template-columns: 1fr;
gap: 1.8rem;
text-align: center;
}
}
@media (max-width: 992px) {
.access-denied-message {
}
}
@media (max-width: 768px) {
.access-denied-message {
font-size: 0.6rem;
}
.content-column {
padding: 0.6rem;
gap: 0.8rem;
}
.content-column .btn {
width: 100%;
max-width: 20rem;
}
.sem-permissao-container {
padding: 1rem;
}
.sem-permissao-content {
gap: 1.25rem;
}
}
@media (max-width: 576px) {
.subordinados-list {
max-height: 15rem;
}
.subordinados-actions {
flex-direction: column;
gap: 0.35rem;
}
.content-column .btn {
font-size: 0.6rem;
padding: 0.390625rem 1rem;
}
}
/* === file-1.css === */
.timeline-item {
position: relative;
padding-bottom: 1rem;
display: flex;
gap: 0.6rem;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-marker {
position: absolute;
left: -2rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
color: var(--color-neutral-50);
z-index: 1;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.fab-import {
bottom: 1.25rem;
right: 1.25rem;
width: 3.75rem;
height: 3.75rem;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.footer-hint {
font-size: var(--font-size-xs);
color: var(--color-neutral-500);
display: flex;
align-items: center;
gap: 0.35rem;
}
.footer-hint i {
color: var(--color-warning-500);
}
.forgot-password {
text-align: center;
margin-bottom: var(--spacing-6);
}
.forgot-password-link {
color: var(--color-success-400);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
transition: all var(--transition-fast);
position: relative;
}
.forgot-password-link:hover {
color: var(--color-success-400);
transform: translateY(-1px);
}
.forgot-password-link::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--color-success-400);
transition: width 0.3s ease;
}
.forgot-password-link:hover::after {
width: 100%;
}
.form-check-input {
cursor: pointer;
width: 1.2em;
height: 1.2em;
}
.form-check-input:checked {
background-color: var(--color-primary-500);
border-color: var(--color-primary-500);
}
.supplier-avatar {
width: 3rem;
height: 3rem;
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
color: var(--color-neutral-0);
font-size: var(--font-size-2xl);
flex-shrink: 0;
}
.supplier-card {
border-radius: var(--border-radius-xl);
border: var(--border-width-1) solid var(--color-neutral-200);
transition: all var(--transition-normal);
}
.supplier-card:hover {
border-color: var(--color-primary-500);
box-shadow: var(--shadow-lg) !important;
}
.supplier-card .card-header {
border-bottom: var(--border-width-1) solid var(--color-neutral-200);
padding: var(--spacing-4) var(--spacing-6);
}
.timeline-content {
flex: 1;
background: var(--color-neutral-100);
border-radius: var(--border-radius-xl);
padding: 0.6rem 0.8rem;
border-left: 3px solid var(--color-neutral-200);
transition: all var(--transition-fast);
}
.timeline-content:hover {
background: var(--color-neutral-100);
border-left-color: var(--bs-primary, var(--color-primary-500));
transform: translateX(4px);
}
.carousel-vehicle-inner {
border-radius: var(--border-radius-xl) 12px 0 0;
.vehicle-highlight-badge i {
margin-right: 0.25rem;
}
.vehicle-price-value {
font-size: 1.25rem;
}
.veiculo-card {
transition: all var(--transition-normal);
border: 2px solid var(--color-neutral-300);
}
.veiculo-card.selected {
border-color: var(--color-bootstrap-success);
box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1) !important;
}
.veiculo-card:hover {
transform: translateY(-4px);
}
.visualizar-descricao-body {
line-height: 1.8;
}
.visualizar-descricao-curta {
font-size: 0.6875rem;
}
.visualizar-layout {
display: block;
}
@media (min-width: 992px) {
.visualizar-layout {
display: grid;
grid-template-columns: 1fr 22.5rem;
grid-auto-rows: auto;
gap: 0.5rem 1rem;
align-items: start;
}
.visualizar-gallery {
grid-column: 1;
grid-row: 1;
}
.visualizar-sidebar {
grid-column: 2;
grid-row: 1 / -1;
align-self: start;
}
.visualizar-desc-curta,
.visualizar-desc,
.visualizar-specs,
.visualizar-opcionais {
grid-column: 1;
}
.visualizar-layout .visualizar-gallery .card,
.visualizar-layout .visualizar-desc-curta .card,
.visualizar-layout .visualizar-desc .card,
.visualizar-layout .visualizar-specs .card,
.visualizar-layout .visualizar-opcionais .card {
margin-bottom: 0;
}
}
.visualizar-gallery .card {
margin-bottom: 0.6rem !important;
}
.row.g-4 {
--bs-gutter-y: 0.6rem;
--bs-gutter-x: 0.6rem;
}
.visualizar-sidebar-card {
position: sticky;
top: 1.25rem;
border-radius: var(--border-radius-xl);
z-index: 10;
max-height: calc(100vh - 6.25rem);
overflow-y: auto;
}
.visualizar-sidebar-card {
position: static !important;
margin-top: 0;
margin-bottom: var(--spacing-6);
top: auto !important;
}
}
@media (max-width: 1650px) {
.content.mb-4 .container-fluid {
padding-left: 0;
padding-right: 0;
}
.content.mb-4 .container-fluid .row.mb-2 {
margin-left: 1rem;
margin-right: 1rem;
}
.supplier-avatar {
width: 2.5rem;
height: 2.5rem;
font-size: var(--font-size-xl);
}
}
@media (max-width: 768px) {
.timeline-content {
padding: 0.5rem 0.6rem;
}
.timeline-marker {
left: -1.5rem;
width: 1.5rem;
height: 1.5rem;
font-size: var(--font-size-xs);
}
}
/* === file-2.css === */
.user-profile-card {
margin-bottom: 3.75rem;
}
.user-profile-card-edit {
margin-bottom: 6.25rem;
}
.visualizar-veiculo-card,
.section-card {
border-radius: var(--border-radius-xl);
}
.section-card {
border: var(--border-width-1) solid var(--color-neutral-200);
}
.section-card .card-header {
border-bottom: var(--border-width-1) solid var(--color-neutral-200);
padding: var(--spacing-4) var(--spacing-6);
}
.section-card .card-title {
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-900);
}
.offcanvas {
background: var(--color-neutral-950) !important;
}
.offcanvas .icon {
width: 1.25rem;
}
.upload-area {
border: 3px dashed var(--color-bootstrap-success);
border-radius: 15px;
padding: 3.75rem 1.25rem;
text-align: center;
background: var(--color-neutral-100);
transition: all var(--transition-normal);
cursor: pointer;
}
.upload-area:hover {
background: var(--color-neutral-200);
border-color: var(--color-bootstrap-success-border);
transform: translateY(-0.125rem);
}
.view-mode-toggle {
display: inline-flex;
background: var(--color-neutral-100);
border-radius: var(--border-radius-lg);
padding: 0.25rem;
gap: 0.25rem;
}
.lead-timeline {
position: relative;
padding-left: 2.5rem;
}
.lead-timeline::before {
content: "";
position: absolute;
left: 1rem;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--color-neutral-200), var(--color-neutral-300));
}
.legend-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: var(--border-radius-full);
display: inline-block;
}
.legend-high {
background: linear-gradient(135deg, var(--color-error-650) 0%, var(--color-error-500) 100%);
}
.legend-medium {
background: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-700) 100%);
}
.legend-low {
background: linear-gradient(135deg, var(--color-primary-300) 0%, var(--color-primary-400) 100%);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
}
.list-group-item:last-child {
border-bottom: none;
}
.list-unstyled li i {
width: 1.25rem;
}
.list-unstyled li.border-bottom {
border-color: rgba(0, 0, 0, 0.08) !important;
}
.loading-container {
display: flex;
justify-content: center;
margin-top: 0.6rem;
}
.spinner-border {
width: var(--spacing-12);
height: var(--spacing-12);
}
.status-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
flex-shrink: 0;
transition: all var(--transition-normal);
}
.status-icon.status-success {
background: linear-gradient(
135deg,
var(--color-secondary-600) 0%,
var(--color-secondary-400) 100%
);
color: var(--color-neutral-50);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.status-icon.status-pending {
background: linear-gradient(135deg, var(--color-info-400) 0%, var(--color-info-600) 100%);
color: var(--color-neutral-50);
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
.status-icon.status-empty {
background: var(--color-neutral-200);
color: var(--color-neutral-500);
}
.visualizar-specs-grid {
--bs-gutter-y: 0.35rem;
}
.spec-icon {
font-size: 0.8rem;
}
.selected-indicator {
flex-shrink: 0;
color: var(--color-primary-500);
font-size: 0.8rem;
animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.selection-counter {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.list-unstyled li {
font-size: 0.6rem;
}
.lead-timeline {
padding-left: 1.875rem;
}
}
@media (max-width: 992px) {
.offcanvas-body {
overflow-x: hidden;
}
.visualizar-specs-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0.35rem;
margin-left: 0 !important;
margin-right: 0 !important;
}
.visualizar-specs-grid .spec-item {
max-width: none;
flex: none;
}
.visualizar-specs-grid .spec-ano {
order: 1;
grid-column: 1;
}
.visualizar-specs-grid .spec-quilometragem {
order: 2;
grid-column: 2;
}
.visualizar-specs-grid .spec-estado {
order: 3;
grid-column: 1;
}
.visualizar-specs-grid .spec-transmissao {
order: 4;
grid-column: 2;
}
.visualizar-specs-grid .spec-marca {
order: 5;
grid-column: 1 / -1;
}
.visualizar-specs-grid .spec-modelo {
order: 6;
grid-column: 1 / -1;
}
.visualizar-specs-grid .spec-combustivel {
order: 7;
grid-column: 1;
}
.visualizar-specs-grid .spec-categoria {
order: 8;
grid-column: 2;
}
}
@media (max-width: 1650px) {
.container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
/* === file-3.css === */
.growth-arrow {
font-size: var(--font-size-xs);
}
.growth-badge {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: var(--font-size-xs);
font-weight: 600;
}
.growth-badge.growth-warning {
background: rgba(255, 193, 7, 0.15);
color: var(--color-warning-800);
}
.growth-badge.growth-positive {
background: rgba(34, 197, 94, 0.15);
color: var(--color-secondary-400);
}
.growth-badge.growth-negative {
background: rgba(239, 68, 68, 0.15);
color: var(--color-error-650);
}
.growth-badge {
display: flex;
align-items: center;
gap: 0.15625rem;
padding: 0.15625rem 0.5rem;
border-radius: 20px;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.3px;
}
.growth-positive {
background: rgba(34, 197, 94, 0.1);
color: var(--color-secondary-400);
}
.growth-negative {
background: rgba(239, 68, 68, 0.1);
color: var(--color-error-650);
}
.guide-alert {
border-left: var(--border-width-4) solid var(--color-primary-500);
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
border-radius: var(--border-radius-xl);
}
.guide-alert .alert-heading {
color: var(--color-neutral-900);
}
.header-content {
flex: 1;
z-index: 1;
}
.header-icon {
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-2xl);
backdrop-filter: blur(10px);
font-size: 1rem;
flex-shrink: 0;
animation: float 3s ease-in-out infinite;
z-index: 1;
}
.header-subtitle {
margin: 0.15625rem 0 0;
font-size: var(--font-size-sm);
opacity: 0.95;
font-weight: 400;
}
.header-subtitle strong {
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.header-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.5px;
}
.highlight-item {
display: flex;
align-items: center;
gap: 0.375rem;
color: var(--color-neutral-700);
font-weight: 500;
padding: 0.25rem 0.5rem;
background: var(--color-neutral-100);
border-radius: var(--border-radius-md);
}
.highlight-item i {
color: var(--color-primary-600);
font-size: var(--font-size-sm);
}
.illustration-column {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.illustration-column img {
width: 100%;
max-width: 31.25rem;
height: auto;
object-fit: contain;
}
.info-card {
border-radius: var(--border-radius-xl);
transition:
transform var(--transition-normal),
box-shadow var(--transition-normal);
border: var(--border-width-1) solid var(--color-neutral-200);
}
.info-card:hover {
box-shadow: var(--shadow-lg) !important;
}
.info-card .card-header {
border-bottom: var(--border-width-1) solid var(--color-neutral-200);
padding: var(--spacing-4) var(--spacing-6);
}
.info-card .card-title {
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-900);
}
.content {
padding: var(--spacing-28) 0;
}
.credits-card-vibrant {
background: var(--color-neutral-50) !important;
border: none !important;
position: relative;
overflow: hidden;
}
.credits-card-vibrant .card-body {
position: relative;
z-index: 1;
padding: 0.6rem !important;
}
.display-5 {
font-weight: 700;
}
.divider-text {
position: relative;
text-align: center;
}
.divider-text::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--color-neutral-300);
}
.divider-text span {
position: relative;
background: var(--color-neutral-50);
padding: 0 1.25rem;
color: var(--color-neutral-500);
font-weight: 600;
}
.discount-amount {
display: block;
font-size: var(--font-size-xs);
color: var(--color-primary-600);
font-weight: 600;
}
@media (max-width: 576px) {
.header-icon {
width: 3rem;
height: 3rem;
font-size: 1rem;
}
.illustration-column img {
max-width: 16rem;
}
}
@media (max-width: 768px) {
.highlight-item {
font-size: var(--font-size-xs);
padding: var(--spacing-1) 0.375rem;
}
.illustration-column {
padding: 0.6rem;
}
.illustration-column img {
max-width: 18.75rem;
}
.credits-card-vibrant {
margin-bottom: var(--spacing-6);
}
.display-5 {
font-size: 1.25rem;
}
}
@media only screen and (max-width: 992px) {
.credits-card-vibrant {
margin-bottom: var(--spacing-6);
}
}
@media (max-width: 1024px) {
.illustration-column {
order: 2;
}
}
/* === classes.index.css === */
/* === components.css === */
/* ===================================
BEBOP DESIGN SYSTEM - COMPONENTES BASE
=================================== */
/* === bebop-design-system.css === */
/* ===================================
CONFIGURAÇÕES GLOBAIS ADICIONAIS
=================================== */
/* Reset básico para elementos HTML */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background-color: var(--color-neutral-50);
color: var(--color-neutral-900);
font-family: var(--font-family-primary);
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Links globais */
a {
color: var(--color-primary-600);
text-decoration: none;
transition: color var(--transition-normal);
}
a:hover {
color: var(--color-primary-700);
}
/* Imagens responsivas */
img {
max-width: 100%;
height: auto;
}
/* Seleção de texto */
::selection {
background-color: var(--color-primary-200);
color: var(--color-neutral-900);
}
::-moz-selection {
background-color: var(--color-primary-200);
color: var(--color-neutral-900);
}
/* ===================================
UTILITÁRIOS GLOBAIS
=================================== */
/* Visibilidade */
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
/* Opacidade */
.opacity-0 {
opacity: 0;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-100 {
opacity: 1;
}
/* Z-index utilitários */
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
/* Estados de erro */
.has-error {
border-color: var(--color-error-500) !important;
}
.error-message {
color: var(--color-error-600);
font-size: var(--font-size-sm);
margin-top: var(--spacing-1);
}
/* Estados de sucesso */
.has-success {
border-color: var(--color-success-500) !important;
}
.success-message {
color: var(--color-success-600);
font-size: var(--font-size-sm);
margin-top: var(--spacing-1);
}
/* ===================================
ACESSIBILIDADE
=================================== */
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip link para navegação por teclado */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--color-primary-600);
color: white;
padding: 8px;
text-decoration: none;
border-radius: var(--border-radius-base);
z-index: 10000;
}
.skip-link:focus {
top: 6px;
}
/* ===================================
IMPORTAÇÃO DE FONTES
=================================== */
/* Fallback para fontes do sistema */
@supports (font-variation-settings: normal) {
:root {
--font-family-primary:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
}
/* === app.css === */
/*
Bebop - Stylesheet
Quando a gente builda este arquivo é compilado em wwwroot/app.bundle.css com cada @import sendo incorporado recursivamente.
Adicione novas entradas do sistema de design aqui como instruções @import;
NÃO adicione múltiplas tags no App.razor.
*/
.text-custom-primary {
--bs-text-opacity: 1;
color: var(--color-primary-500) !important;
}
/* tabs tela configuracoes */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: var(--color-neutral-50);
background-color: var(--color-primary-500) !important;
}
.nav .nav-link {
color: var(--color-primary-600);
}
body {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-style: normal;
font-size: var(--font-size-base);
background-color: var(--color-neutral-50);
}
h1,
h2,
h3,
h4,
h5 {
font-weight: var(--font-weight-bold);
}
nav.bg-theme {
background-color: var(--color-primary-500) !important;
height: 4.688rem;
}
.nav-item a {
color: var(--color-neutral-50);
text-decoration: none;
}
.nav-item .dropdown-item {
color: var(--color-neutral-800);
}
.nav-item i {
font-size: var(--font-size-lg);
cursor: pointer;
}
.nav-item i.emp,
.nav-item span {
color: var(--color-neutral-50);
}
.navbar-dark .navbar-nav .nav-link {
color: var(--color-neutral-50);
}
.navbar-dark .navbar-nav .nav-link:hover {
opacity: 0.7;
}
.navbar-dark .navbar-nav .nav-link.active {
font-weight: var(--font-weight-bold);
}
@media only screen and (max-width: 767px) {
.navbar-dark .navbar-nav {
font-size: var(--font-size-lg);
}
}
@media (max-width: 991.98px) {
.offcanvas-collapse {
position: fixed;
top: 4.688rem; /* Height of navbar */
bottom: 0;
left: 100%;
width: 100%;
padding-right: var(--spacing-4);
padding-left: var(--spacing-4);
overflow-y: auto;
visibility: hidden;
background-color: var(--color-primary-600);
transition: transform var(--transition-normal), visibility var(--transition-normal);
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: var(--spacing-4);
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-neutral-500);
}
.nav-underline .nav-link:hover {
color: var(--color-primary-500);
}
.nav-underline .active {
font-weight: var(--font-weight-medium);
color: var(--color-neutral-700);
}
.content {
margin-top: var(--spacing-3);
padding: 0 var(--spacing-5) 0 var(--spacing-5);
}
/* telas que usam lista */
.list-actions {
position: absolute;
right: var(--spacing-3);
top: 50%;
transform: translateY(-50%);
}
.fab {
bottom: var(--spacing-5);
right: var(--spacing-5);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
border: none;
border-radius: var(--border-radius-full);
color: var(--color-neutral-50);
transition: all var(--transition-normal);
}
.fab:hover {
transform: scale(1.1);
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
}
.fab:active {
transform: scale(0.95);
}
.fab i {
font-size: var(--font-size-2xl);
}
.subnav {
position: fixed;
top: 75px;
left: 0;
right: 0;
z-index: var(--z-index-sticky);
}
.content-subnav {
padding-top: 140px;
}
.form-subnav {
width: 50%;
}
@media only screen and (max-width: 767px) {
.form-subnav {
width: 100%;
}
}
.table th {
font-size: var(--font-size-sm);
}
.rz-form-field-label {
font-size: var(--font-size-sm) !important;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat var(--spacing-4) / 1.8rem, var(--color-error-700);
padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 3.7rem;
color: var(--color-neutral-50);
}
.blazor-error-boundary::after {
content: "An error has occurred.";
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: var(--z-index-toast);
}
/* ===================================
BOOTSTRAP 5.2.3 CUSTOMIZATION
CSS customizado para sobrescrever cores padrão
=================================== */
/* Primary Buttons - Palm Green Bebop (design tokens) */
.btn-primary {
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
color: var(--color-neutral-50) !important;
}
.btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
color: var(--color-neutral-50) !important;
box-shadow: 0 4px 12px rgba(64, 173, 58, 0.25) !important;
transform: translateY(-1px);
}
.btn-primary:focus {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
color: var(--color-neutral-50) !important;
box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25) !important;
}
/* ===================================
UTILITÁRIOS DE GRID (apoio a badges)
=================================== */
/* Evita que elementos dentro de células grid estiquem a largura */
.bebop-grid-self-start {
justify-self: start;
width: fit-content;
}
/* Item da grid de tabela (celular/desktop) iniciado na coluna de conteúdo */
.bebop-grid-cell-start {
grid-column: 2;
justify-self: start;
align-self: start;
}
/* Garantir que badges dentro do contêiner não estiquem */
.bebop-grid-cell-start > .badge {
width: fit-content;
}
.btn-primary:active,
.btn-primary.active {
background-color: var(--color-primary-700) !important;
border-color: var(--color-primary-700) !important;
color: var(--color-neutral-50) !important;
transform: translateY(0);
box-shadow: none !important;
}
/* Success Buttons - Palm Green Bebop (design tokens) */
.btn-success {
background-color: var(--color-success-500) !important;
border-color: var(--color-success-500) !important;
color: var(--color-neutral-50) !important;
}
.btn-success:hover {
background-color: var(--color-success-600) !important;
border-color: var(--color-success-600) !important;
color: var(--color-neutral-50) !important;
}
.btn-success:focus {
background-color: var(--color-success-600) !important;
border-color: var(--color-success-600) !important;
color: var(--color-neutral-50) !important;
box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25) !important;
}
.btn-success:active,
.btn-success.active {
background-color: var(--color-success-700) !important;
border-color: var(--color-success-700) !important;
color: var(--color-neutral-50) !important;
}
/* Warning Buttons (design tokens) */
.btn-warning {
background-color: var(--color-warning-500) !important;
border-color: var(--color-warning-500) !important;
color: var(--color-neutral-950) !important;
}
.btn-warning:hover {
background-color: var(--color-warning-600) !important;
border-color: var(--color-warning-600) !important;
color: var(--color-neutral-950) !important;
}
.btn-warning:focus {
background-color: var(--color-warning-600) !important;
border-color: var(--color-warning-600) !important;
color: var(--color-neutral-950) !important;
box-shadow: 0 0 0 0.25rem rgba(127, 199, 127, 0.25) !important;
}
.btn-warning:active,
.btn-warning.active {
background-color: var(--color-warning-700) !important;
border-color: var(--color-warning-700) !important;
color: var(--color-neutral-950) !important;
}
/* Danger Buttons (design tokens) */
.btn-danger {
background-color: var(--color-error-500) !important;
border-color: var(--color-error-500) !important;
color: var(--color-neutral-50) !important;
}
.btn-danger:hover {
background-color: var(--color-error-600) !important;
border-color: var(--color-error-600) !important;
color: var(--color-neutral-50) !important;
}
.btn-danger:focus {
background-color: var(--color-error-600) !important;
border-color: var(--color-error-600) !important;
color: var(--color-neutral-50) !important;
box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25) !important;
}
.btn-danger:active,
.btn-danger.active {
background-color: var(--color-error-700) !important;
border-color: var(--color-error-700) !important;
color: var(--color-neutral-50) !important;
}
/* Info Buttons (design tokens) */
.btn-info {
background-color: var(--color-info-500) !important;
border-color: var(--color-info-500) !important;
color: var(--color-neutral-50) !important;
}
.btn-info:hover {
background-color: var(--color-info-600) !important;
border-color: var(--color-info-600) !important;
color: var(--color-neutral-50) !important;
}
.btn-info:focus {
background-color: var(--color-info-600) !important;
border-color: var(--color-info-600) !important;
color: var(--color-neutral-50) !important;
box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}
.btn-info:active,
.btn-info.active {
background-color: var(--color-info-700) !important;
border-color: var(--color-info-700) !important;
color: var(--color-neutral-50) !important;
}
/* Outline Buttons (design tokens) */
.btn-outline-primary {
color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
background-color: transparent !important;
}
.btn-outline-primary:hover {
color: var(--color-neutral-50) !important;
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
}
.btn-outline-success {
color: var(--color-success-500) !important;
border-color: var(--color-success-500) !important;
background-color: transparent !important;
}
.btn-outline-success:hover {
color: var(--color-neutral-50) !important;
background-color: var(--color-success-500) !important;
border-color: var(--color-success-500) !important;
}
.btn-outline-warning {
color: var(--color-warning-500) !important;
border-color: var(--color-warning-500) !important;
background-color: transparent !important;
}
.btn-outline-warning:hover {
color: var(--color-neutral-950) !important;
background-color: var(--color-warning-500) !important;
border-color: var(--color-warning-500) !important;
}
.btn-outline-danger {
color: var(--color-error-500) !important;
border-color: var(--color-error-500) !important;
background-color: transparent !important;
}
.btn-outline-danger:hover {
color: var(--color-neutral-50) !important;
background-color: var(--color-error-500) !important;
border-color: var(--color-error-500) !important;
}
.btn-outline-info {
color: var(--color-info-500) !important;
border-color: var(--color-info-500) !important;
background-color: transparent !important;
}
.btn-outline-info:hover {
color: var(--color-neutral-50) !important;
background-color: var(--color-info-500) !important;
border-color: var(--color-info-500) !important;
}
.btn-outline-dark {
color: var(--color-neutral-800) !important;
border-color: var(--color-neutral-800) !important;
background-color: transparent !important;
}
.btn-outline-dark:hover {
color: var(--color-neutral-50) !important;
background-color: var(--color-neutral-800) !important;
border-color: var(--color-neutral-800) !important;
}
.btn-outline-dark:focus {
color: var(--color-neutral-50) !important;
background-color: var(--color-neutral-800) !important;
border-color: var(--color-neutral-800) !important;
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25) !important;
}
.btn-outline-dark:active,
.btn-outline-dark.active {
color: var(--color-neutral-50) !important;
background-color: var(--color-neutral-900) !important;
border-color: var(--color-neutral-900) !important;
}
/* Text Colors (design tokens) */
.text-primary {
color: var(--color-primary-500) !important;
}
.text-success {
color: var(--color-success-500) !important;
}
.text-warning {
color: var(--color-warning-500) !important;
}
.text-danger {
color: var(--color-error-500) !important;
}
.text-info {
color: var(--color-info-500) !important;
}
/* Background Colors (design tokens) */
.bg-primary {
background-color: var(--color-primary-500) !important;
}
.bg-success {
background-color: var(--color-success-500) !important;
}
.bg-warning {
background-color: var(--color-warning-500) !important;
color: var(--color-neutral-950) !important;
}
.bg-danger {
background-color: var(--color-error-500) !important;
}
.bg-info {
background-color: var(--color-info-500) !important;
}
/* Form Controls Focus (design tokens) */
.form-control:focus {
border-color: var(--color-primary-500) !important;
box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25) !important;
}
/* Links (design tokens) */
.link-primary {
color: var(--color-primary-500) !important;
}
.link-primary:hover {
color: var(--color-primary-600) !important;
}
.btn-group .btn-outline-primary {
border-color: var(--color-primary-500) !important;
border-width: 1px !important;
border-style: solid !important;
}
.btn-group .btn-outline-primary:not(:first-child) {
border-left: 1px solid var(--color-primary-500) !important;
margin-left: -1px;
}
.btn-group .btn-outline-primary:not(:last-child) {
border-right: 1px solid var(--color-primary-500) !important;
}
.btn-group .btn-outline-primary,
.btn-group .btn-outline-primary:not(:first-child),
.btn-group .btn-outline-primary:not(:last-child) {
border-top-color: var(--color-primary-500) !important;
border-bottom-color: var(--color-primary-500) !important;
}
.btn-group .btn-outline-primary:hover {
border-color: var(--color-primary-500) !important;
background-color: var(--color-primary-500) !important;
color: var(--color-neutral-50) !important;
}
.btn-group .btn-check:checked + .btn-outline-primary,
.btn-group .btn-outline-primary.active {
background-color: var(--color-primary-500) !important;
border-color: var(--color-primary-500) !important;
color: var(--color-neutral-50) !important;
z-index: 1;
}
.btn-group .btn-outline-primary:focus {
border-color: var(--color-primary-500) !important;
box-shadow: 0 0 0 0.25rem rgba(64, 173, 58, 0.25) !important;
}
.btn-group .btn-outline-dark {
border-color: var(--color-neutral-900) !important;
border-width: 1px !important;
border-style: solid !important;
}
.btn-group .btn-outline-dark:not(:first-child) {
border-left: 1px solid var(--color-neutral-900) !important;
margin-left: -1px;
}
.btn-group .btn-outline-dark:not(:last-child) {
border-right: 1px solid var(--color-neutral-900) !important;
}
.btn-group .btn-outline-dark:hover {
border-color: var(--color-neutral-900) !important;
background-color: var(--color-neutral-900) !important;
color: var(--color-neutral-50) !important;
}
.btn-group .btn-check:checked + .btn-outline-dark,
.btn-group .btn-outline-dark.active {
background-color: var(--color-neutral-900) !important;
border-color: var(--color-neutral-900) !important;
color: var(--color-neutral-50) !important;
z-index: 1;
}
.btn-group .btn-outline-dark:focus {
border-color: var(--color-neutral-900) !important;
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25) !important;
}