/* ============================================
UNIFIED COMPONENTS - P8W Platform
Sistema Global Unificado de Componentes
IMPORTANTE:
- Prefixo unico: ui-* para todos os componentes
- Variaveis: --color-* (sem --token-color-*)
- Dark mode: .dark (sem html.dark)
- Sem duplicacoes
Data: 2026-02-03
============================================ */
/* ============================================
CSS VARIABLES - Complementares
Paletas de cores canônicas em design-tokens.css
Sizing/radius canônicos em design-tokens.css
============================================ */
:root {
/* Spacing - Extensões além do que design-tokens.css define.
--space-1 a --space-8 são canônicos em design-tokens.css.
Aqui ficam apenas os valores extras. */
--space-0: 0;
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Gaps padronizados (únicos deste arquivo) */
--gap-xs: 0.25rem;
--gap-sm: 0.5rem;
--gap-md: 1rem;
--gap-lg: 1.5rem;
--gap-xl: 2rem;
/* Aliases para plugins (compatibilidade) — usados por plugins SMM, Push,
Social-Proof, Uptime, SEO, Audit e views públicas */
--bg-primary: var(--color-white);
--bg-secondary: #f9fafb;
--bg-tertiary: var(--color-gray-100);
--text-primary: #111827;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--border-primary: var(--color-gray-200);
--border-secondary: var(--color-gray-100);
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-3xl: 3rem;
}
/* ============================================
DARK MODE - Aliases para plugins
Variáveis semânticas canônicas em design-tokens.css e ui-system.css
============================================ */
.dark {
/* Aliases para plugins (compatibilidade - dark mode) */
--bg-primary: #1f2937;
--bg-secondary: #111827;
--bg-tertiary: var(--color-gray-700);
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--text-muted: #9ca3af;
--border-primary: var(--color-gray-700);
--border-secondary: var(--color-gray-600);
}
/* .dark body - definição canônica em design-tokens.css */
/* ============================================
BUTTONS - .ui-btn-*
Todos os botões têm transições consistentes
============================================ */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: var(--button-height-md);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
color: var(--color-gray-700);
border: 1px solid transparent;
border-radius: var(--radius-md);
box-sizing: border-box;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.dark .ui-btn {
color: var(--color-gray-200);
}
.ui-btn i,
.ui-btn svg {
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
}
.ui-btn:disabled,
.ui-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Active state — feedback tátil (§44 microinterações) */
.ui-btn:active:not(:disabled) {
transform: scale(0.97);
opacity: 0.9;
}
/* Loading state (§45 padrão de estados) — usado via P8W.UI.setButtonLoading() */
.ui-btn-loading {
position: relative;
pointer-events: none;
opacity: 0.85;
cursor: wait;
}
@keyframes ui-spin {
to { transform: rotate(360deg); }
}
/* Spinner — definição canônica */
.ui-spinner {
width: 1.5rem;
height: 1.5rem;
border: 2px solid var(--color-gray-200);
border-top-color: var(--color-primary-600);
border-radius: var(--radius-full);
animation: ui-spin 0.6s linear infinite;
}
/* Primary - Azul sólido */
.ui-btn-primary {
background-color: var(--color-primary-600);
color: var(--color-white);
border-color: var(--color-primary-600);
}
.ui-btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-700);
border-color: var(--color-primary-700);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.ui-btn-primary:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(var(--color-primary-rgb), 0.4);
}
.dark .ui-btn-primary {
background-color: var(--color-primary-500);
border-color: var(--color-primary-500);
color: var(--color-white);
}
.dark .ui-btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
/* Secondary - Ghost/Outline neutro */
.ui-btn-secondary {
background-color: transparent;
color: var(--color-text-primary, var(--color-gray-700));
border-color: var(--color-border, var(--color-gray-300));
}
.ui-btn-secondary:hover:not(:disabled) {
background-color: var(--color-bg-hover, var(--color-gray-100));
border-color: var(--color-gray-400);
}
.ui-btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(107, 114, 128, 0.3);
}
.dark .ui-btn-secondary {
background-color: transparent;
color: var(--color-gray-200);
border-color: var(--color-gray-600);
}
.dark .ui-btn-secondary:hover:not(:disabled) {
background-color: var(--color-bg-hover, var(--color-gray-700));
border-color: var(--color-gray-500);
}
/* Secondary Active State — toggle button groups */
.ui-btn-secondary.active {
background-color: var(--color-primary-500);
color: var(--color-white);
border-color: var(--color-primary-500);
}
.ui-btn-secondary.active:hover:not(:disabled) {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
}
.dark .ui-btn-secondary.active {
background-color: var(--color-primary-500);
color: var(--color-white);
border-color: var(--color-primary-500);
}
.dark .ui-btn-secondary.active:hover:not(:disabled) {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
/* Success - Verde */
.ui-btn-success {
background-color: var(--color-success-600);
color: var(--color-white);
border-color: var(--color-success-600);
}
.ui-btn-success:hover:not(:disabled) {
background-color: var(--color-success-700);
border-color: var(--color-success-700);
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
.ui-btn-success:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(34, 197, 94, 0.4);
}
.dark .ui-btn-success {
background-color: var(--color-success-500);
border-color: var(--color-success-500);
color: var(--color-white);
}
.dark .ui-btn-success:hover:not(:disabled) {
background-color: var(--color-success-600);
border-color: var(--color-success-600);
color: var(--color-white);
}
/* Warning - Amarelo/Laranja */
.ui-btn-warning {
background-color: var(--color-warning-500);
color: var(--color-white);
border-color: var(--color-warning-500);
}
.ui-btn-warning:hover:not(:disabled) {
background-color: var(--color-warning-600);
border-color: var(--color-warning-600);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}
.ui-btn-warning:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(245, 158, 11, 0.4);
}
.dark .ui-btn-warning {
background-color: var(--color-warning-500);
border-color: var(--color-warning-500);
color: var(--color-white);
}
.dark .ui-btn-warning:hover:not(:disabled) {
background-color: var(--color-warning-600);
border-color: var(--color-warning-600);
color: var(--color-white);
}
/* Danger - Vermelho */
.ui-btn-danger {
background-color: var(--color-danger-600);
color: var(--color-white);
border-color: var(--color-danger-600);
}
.ui-btn-danger:hover:not(:disabled) {
background-color: var(--color-danger-700);
border-color: var(--color-danger-700);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.ui-btn-danger:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(239, 68, 68, 0.4);
}
.dark .ui-btn-danger {
background-color: var(--color-danger-500);
border-color: var(--color-danger-500);
color: var(--color-white);
}
.dark .ui-btn-danger:hover:not(:disabled) {
background-color: var(--color-danger-600);
border-color: var(--color-danger-600);
color: var(--color-white);
}
/* Info - Ciano */
.ui-btn-info {
background-color: var(--color-info-600);
color: var(--color-white);
border-color: var(--color-info-600);
}
.ui-btn-info:hover:not(:disabled) {
background-color: var(--color-info-700);
border-color: var(--color-info-700);
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}
.ui-btn-info:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(6, 182, 212, 0.4);
}
.dark .ui-btn-info {
background-color: var(--color-info-500);
border-color: var(--color-info-500);
color: var(--color-white);
}
.dark .ui-btn-info:hover:not(:disabled) {
background-color: var(--color-info-600);
border-color: var(--color-info-600);
color: var(--color-white);
}
/* Outline - Borda apenas */
.ui-btn-outline {
background-color: transparent;
color: var(--color-primary-600);
border-color: var(--color-primary-600);
}
.ui-btn-outline:hover:not(:disabled) {
background-color: var(--color-primary-600);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
}
.ui-btn-outline:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(var(--color-primary-rgb), 0.3);
}
.dark .ui-btn-outline {
color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.dark .ui-btn-outline:hover:not(:disabled) {
background-color: var(--color-primary-500);
border-color: var(--color-primary-500);
color: var(--color-white);
}
/* Outline Danger */
.ui-btn-outline-danger {
background-color: transparent;
color: var(--color-danger-600);
border-color: var(--color-danger-600);
}
.ui-btn-outline-danger:hover:not(:disabled) {
background-color: var(--color-danger-600);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.dark .ui-btn-outline-danger {
color: var(--color-danger-400);
border-color: var(--color-danger-400);
}
.dark .ui-btn-outline-danger:hover:not(:disabled) {
background-color: var(--color-danger-500);
border-color: var(--color-danger-500);
color: var(--color-white);
}
/* Outline Success */
.ui-btn-outline-success {
background-color: transparent;
color: var(--color-success-600);
border-color: var(--color-success-600);
}
.ui-btn-outline-success:hover:not(:disabled) {
background-color: var(--color-success-600);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.dark .ui-btn-outline-success {
color: var(--color-success-400);
border-color: var(--color-success-400);
}
.dark .ui-btn-outline-success:hover:not(:disabled) {
background-color: var(--color-success-500);
border-color: var(--color-success-500);
color: var(--color-white);
}
/* Ghost - Sem fundo, sem borda */
.ui-btn-ghost {
background-color: transparent;
color: var(--color-gray-700);
border-color: transparent;
}
.ui-btn-ghost:hover:not(:disabled) {
background-color: var(--color-gray-100);
color: var(--color-gray-900);
}
.ui-btn-ghost:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(107, 114, 128, 0.2);
}
.dark .ui-btn-ghost {
color: var(--color-gray-300);
}
.dark .ui-btn-ghost:hover:not(:disabled) {
background-color: var(--color-gray-700);
color: var(--color-gray-100);
}
/* Link - Parece um link */
.ui-btn-link {
background-color: transparent;
color: var(--color-primary-600);
border-color: transparent;
padding: 0;
height: auto;
text-decoration: none;
}
.ui-btn-link:hover:not(:disabled) {
color: var(--color-primary-700);
opacity: 0.85;
}
.dark .ui-btn-link {
color: var(--color-primary-400);
}
.dark .ui-btn-link:hover:not(:disabled) {
color: var(--color-primary-300);
}
/* Soft Variants - Fundo suave com cor */
.ui-btn-primary-soft {
background-color: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary-600);
border-color: transparent;
}
.ui-btn-primary-soft:hover:not(:disabled) {
background-color: rgba(var(--color-primary-rgb), 0.2);
box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.15);
}
.dark .ui-btn-primary-soft {
background-color: rgba(var(--color-primary-rgb), 0.2);
color: var(--color-primary-300, var(--color-primary-300));
}
.dark .ui-btn-primary-soft:hover:not(:disabled) {
background-color: rgba(var(--color-primary-rgb), 0.3);
}
.ui-btn-success-soft {
background-color: rgba(34, 197, 94, 0.1);
color: var(--color-success-600);
border-color: transparent;
}
.ui-btn-success-soft:hover:not(:disabled) {
background-color: rgba(34, 197, 94, 0.2);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}
.dark .ui-btn-success-soft {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-400);
}
.dark .ui-btn-success-soft:hover:not(:disabled) {
background-color: rgba(34, 197, 94, 0.3);
}
.ui-btn-warning-soft {
background-color: rgba(245, 158, 11, 0.1);
color: var(--color-warning-600);
border-color: transparent;
}
.ui-btn-warning-soft:hover:not(:disabled) {
background-color: rgba(245, 158, 11, 0.2);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.dark .ui-btn-warning-soft {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-400);
}
.dark .ui-btn-warning-soft:hover:not(:disabled) {
background-color: rgba(245, 158, 11, 0.3);
}
.ui-btn-danger-soft {
background-color: rgba(239, 68, 68, 0.1);
color: var(--color-danger-600);
border-color: transparent;
}
.ui-btn-danger-soft:hover:not(:disabled) {
background-color: rgba(239, 68, 68, 0.2);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}
.dark .ui-btn-danger-soft {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-400);
}
.dark .ui-btn-danger-soft:hover:not(:disabled) {
background-color: rgba(239, 68, 68, 0.3);
}
.ui-btn-info-soft {
background-color: rgba(6, 182, 212, 0.1);
color: var(--color-info-600);
border-color: transparent;
}
.ui-btn-info-soft:hover:not(:disabled) {
background-color: rgba(6, 182, 212, 0.2);
box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}
.dark .ui-btn-info-soft {
background-color: rgba(6, 182, 212, 0.2);
color: var(--color-info-400);
}
.dark .ui-btn-info-soft:hover:not(:disabled) {
background-color: rgba(6, 182, 212, 0.3);
}
/* Button Sizes */
.ui-btn-xs {
height: 1.75rem;
padding: 0 0.5rem;
font-size: 0.75rem;
border-radius: var(--radius-sm);
}
.ui-btn-sm {
height: var(--button-height-sm);
padding: 0 0.75rem;
font-size: 0.75rem;
gap: 0.375rem;
}
.ui-btn-sm i,
.ui-btn-sm svg {
font-size: 0.75rem;
width: 0.75rem;
height: 0.75rem;
}
.ui-btn-lg {
height: var(--button-height-lg);
padding: 0 1.5rem;
font-size: 1rem;
gap: 0.625rem;
}
.ui-btn-lg i,
.ui-btn-lg svg {
font-size: 1rem;
width: 1rem;
height: 1rem;
}
.ui-btn-xl {
height: 3.5rem;
padding: 0 2rem;
font-size: 1.125rem;
gap: 0.75rem;
}
.ui-btn-xl i,
.ui-btn-xl svg {
font-size: 1.125rem;
width: 1.125rem;
height: 1.125rem;
}
/* Icon Button (square) */
.ui-btn-icon {
width: var(--button-height-md);
padding: 0;
}
.ui-btn-icon.ui-btn-xs { width: 1.75rem; }
.ui-btn-icon.ui-btn-sm { width: var(--button-height-sm); }
.ui-btn-icon.ui-btn-lg { width: var(--button-height-lg); }
.ui-btn-icon.ui-btn-xl { width: 3.5rem; }
/* Medium size (explicit, same as default) */
.ui-btn-md {
height: var(--button-height-md);
padding: 0 1rem;
font-size: 0.875rem;
}
/* Full Width */
.ui-btn-block { width: 100%; }
/* Loading - definição canônica em .ui-btn-loading (§45, linhas 120-142) */
.ui-auth-btn-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-gray-300);
background-color: rgba(51, 65, 85, 0.5);
border: 1px solid rgba(71, 85, 105, 0.5);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
}
.ui-auth-btn-secondary:hover:not(:disabled) {
background-color: rgba(71, 85, 105, 0.5);
border-color: rgba(100, 116, 139, 0.5);
color: var(--color-gray-100);
}
.ui-auth-btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) rgba(107, 114, 128, 0.3);
}
.ui-auth-btn-secondary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ui-auth-btn-success {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-success-600);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
}
.ui-auth-btn-success:hover:not(:disabled) {
background-color: var(--color-success-700);
}
/* Auth Button Sizes */
.ui-auth-btn-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.ui-auth-btn-full {
width: 100%;
}
.ui-auth-btn-flex {
flex: 1;
}
/* Auth Button with Icon */
.ui-auth-btn-with-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.ui-auth-btn-with-icon svg,
.ui-auth-btn-with-icon i {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
/* Light mode overrides for auth buttons */
html:not(.dark) .ui-auth-btn-secondary {
color: var(--color-gray-700);
background-color: var(--color-gray-100);
border-color: var(--color-gray-300);
}
html:not(.dark) .ui-auth-btn-secondary:hover:not(:disabled) {
background-color: var(--color-gray-200);
border-color: var(--color-gray-400);
color: var(--color-gray-900);
}
/* ============================================
INPUTS - .ui-input
Estados: normal, hover, focus, error, success, disabled
============================================ */
.ui-input {
display: block;
width: 100%;
height: var(--input-height-md);
padding: 0.5rem 0.75rem;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--color-text-primary);
background-color: var(--surface);
border: 1px solid var(--color-border-input);
border-radius: var(--radius-md);
box-sizing: border-box;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.ui-input:hover:not(:disabled):not(:focus) {
border-color: var(--color-gray-400);
}
.ui-input:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
/* WCAG AA: 4.5:1 minimum contrast ratio */
.ui-input::placeholder {
color: var(--color-gray-500);
}
.ui-input:disabled {
background-color: var(--color-gray-100);
color: var(--color-gray-400);
cursor: not-allowed;
opacity: 0.7;
}
.ui-input:read-only {
background-color: var(--color-gray-50);
}
/* Input com ícone à esquerda: pl-* deve prevalecer sobre ui-input padding */
.ui-input.pl-10 { padding-left: 2.5rem !important; }
.ui-input.pl-9 { padding-left: 2.25rem !important; }
.ui-input.pl-8 { padding-left: 2rem !important; }
/* Search dentro de shell headers */
.settings-search-v2 input,
.settings-search-v2 input.ui-input {
padding-left: 2.5rem !important;
width: 200px;
min-width: 200px;
}
/* Input Sizes */
.ui-input-sm {
height: var(--input-height-sm);
padding: 0.375rem 0.625rem;
font-size: 0.875rem;
}
.ui-input-lg {
height: var(--input-height-lg);
padding: 0.75rem 1rem;
font-size: 1rem;
}
/* Input States */
.ui-input-error,
.ui-input.is-invalid,
.ui-input[aria-invalid="true"] {
border-color: var(--color-danger-500);
background-color: rgba(239, 68, 68, 0.02);
}
.ui-input-error:hover:not(:disabled):not(:focus),
.ui-input.is-invalid:hover:not(:disabled):not(:focus) {
border-color: var(--color-danger-600);
}
.ui-input-error:focus,
.ui-input.is-invalid:focus,
.ui-input[aria-invalid="true"]:focus {
border-color: var(--color-danger-500);
box-shadow: 0 0 0 var(--focus-ring-width) rgba(239, 68, 68, 0.15);
}
.ui-input-success,
.ui-input.is-valid,
.ui-input[aria-invalid="false"] {
border-color: var(--color-success-500);
background-color: rgba(34, 197, 94, 0.02);
}
.ui-input-success:hover:not(:disabled):not(:focus),
.ui-input.is-valid:hover:not(:disabled):not(:focus) {
border-color: var(--color-success-600);
}
.ui-input-success:focus,
.ui-input.is-valid:focus {
border-color: var(--color-success-500);
box-shadow: 0 0 0 var(--focus-ring-width) rgba(34, 197, 94, 0.15);
}
/* Dark Mode Input */
.dark .ui-input {
color: var(--color-text-primary);
background-color: var(--color-bg-card);
border-color: var(--color-border-input);
}
/* WCAG AA: 4.5:1 minimum contrast ratio */
.dark .ui-input::placeholder {
color: var(--color-text-disabled);
}
.dark .ui-input:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-input);
filter: brightness(1.2);
}
.dark .ui-input:focus {
border-color: var(--color-primary-400);
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
.dark .ui-input:disabled {
background-color: var(--color-bg-muted);
opacity: 0.6;
}
.dark .ui-input-error,
.dark .ui-input.is-invalid {
border-color: var(--color-danger-400);
background-color: rgba(239, 68, 68, 0.05);
}
.dark .ui-input-success,
.dark .ui-input.is-valid {
border-color: var(--color-success-400);
background-color: rgba(34, 197, 94, 0.05);
}
/* Textarea usando classe ui-input (compatibilidade) */
textarea.ui-input {
height: auto;
min-height: 4rem;
line-height: 1.6;
resize: vertical;
}
/* ============================================
SELECT - .ui-select
Estados: normal, hover, focus, error, disabled
============================================ */
.ui-select {
display: block;
width: 100%;
height: var(--input-height-md);
padding: 0.5rem 2.5rem 0.5rem 0.75rem;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--color-text-primary);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
border: 1px solid var(--color-border-input);
border-radius: var(--radius-md);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
box-sizing: border-box;
transition: all 0.15s ease;
}
.ui-select:hover:not(:disabled):not(:focus) {
border-color: var(--color-gray-400);
}
.ui-select:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
.ui-select:disabled {
background-color: var(--color-gray-100);
color: var(--color-gray-400);
cursor: not-allowed;
opacity: 0.7;
}
/* Select Error State */
.ui-select-error,
.ui-select.is-invalid {
border-color: var(--color-danger-500);
background-color: rgba(239, 68, 68, 0.02);
}
.ui-select-error:focus,
.ui-select.is-invalid:focus {
box-shadow: 0 0 0 var(--focus-ring-width) rgba(239, 68, 68, 0.15);
}
/* Select Sizes */
.ui-select-sm {
height: var(--input-height-sm);
padding: 0.375rem 2rem 0.375rem 0.625rem;
font-size: 0.875rem;
}
.ui-select-lg {
height: var(--input-height-lg);
padding: 0.75rem 3rem 0.75rem 1rem;
font-size: 1rem;
}
/* Dark Mode Select */
.dark .ui-select {
color: var(--color-text-primary);
background-color: var(--color-bg-card);
border-color: var(--color-border-input);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}
.dark .ui-select:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-input);
filter: brightness(1.2);
}
.dark .ui-select:focus {
border-color: var(--color-primary-400);
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
.dark .ui-select:disabled {
background-color: var(--color-bg-muted);
opacity: 0.6;
}
.dark .ui-select-error,
.dark .ui-select.is-invalid {
border-color: var(--color-danger-400);
background-color: rgba(239, 68, 68, 0.05);
}
/* ============================================
TEXTAREA - .ui-textarea
Estados: normal, hover, focus, error, disabled
============================================ */
.ui-textarea {
display: block;
width: 100%;
min-height: 100px;
padding: 0.75rem 1rem;
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--color-text-primary);
background-color: var(--surface);
border: 1px solid var(--color-border-input);
border-radius: var(--radius-md);
resize: vertical;
box-sizing: border-box;
transition: all 0.15s ease;
}
.ui-textarea:hover:not(:disabled):not(:focus) {
border-color: var(--color-gray-400);
}
.ui-textarea:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
/* WCAG AA: 4.5:1 minimum contrast ratio */
.ui-textarea::placeholder {
color: var(--color-gray-500);
}
.ui-textarea:disabled {
background-color: var(--color-gray-100);
cursor: not-allowed;
resize: none;
opacity: 0.7;
}
/* Textarea Error State */
.ui-textarea-error,
.ui-textarea.is-invalid {
border-color: var(--color-danger-500);
background-color: rgba(239, 68, 68, 0.02);
}
.ui-textarea-error:focus,
.ui-textarea.is-invalid:focus {
box-shadow: 0 0 0 var(--focus-ring-width) rgba(239, 68, 68, 0.15);
}
/* Dark Mode Textarea */
.dark .ui-textarea {
color: var(--color-text-primary);
background-color: var(--color-bg-card);
border-color: var(--color-border-input);
}
/* WCAG AA: 4.5:1 minimum contrast ratio */
.dark .ui-textarea::placeholder {
color: var(--color-text-disabled);
}
.dark .ui-textarea:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-input);
filter: brightness(1.2);
}
.dark .ui-textarea:focus {
border-color: var(--color-primary-400);
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
.dark .ui-textarea:disabled {
background-color: var(--color-bg-muted);
opacity: 0.6;
}
.dark .ui-textarea-error,
.dark .ui-textarea.is-invalid {
border-color: var(--color-danger-400);
background-color: rgba(239, 68, 68, 0.05);
}
/* ============================================
SWITCH / TOGGLE - .ui-switch
Componente padronizado para toggles on/off.
Uso:
============================================ */
.ui-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.ui-switch input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
.ui-switch-slider {
position: relative;
display: inline-block;
width: 2.75rem;
height: 1.5rem;
background-color: var(--color-gray-300);
border-radius: var(--radius-full);
transition: background-color var(--transition-fast);
flex-shrink: 0;
}
.ui-switch-slider::after {
content: '';
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 1.25rem;
height: 1.25rem;
background-color: var(--color-white);
border-radius: 50%;
transition: transform var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.ui-switch input:checked + .ui-switch-slider {
background-color: var(--color-primary-600);
}
.ui-switch input:checked + .ui-switch-slider::after {
transform: translateX(1.25rem);
}
.ui-switch input:focus-visible + .ui-switch-slider {
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
.ui-switch input:disabled + .ui-switch-slider {
opacity: 0.5;
cursor: not-allowed;
}
/* Dark mode */
.dark .ui-switch-slider {
background-color: var(--color-bg-hover);
}
.dark .ui-switch input:checked + .ui-switch-slider {
background-color: var(--color-primary-500);
}
.dark .ui-switch-slider::after {
background-color: var(--color-white);
}
/* Switch com label de texto ao lado */
.ui-switch-label {
margin-left: 0.75rem;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
}
.dark .ui-switch-label {
color: var(--color-text-primary);
}
/* ============================================
CHECKBOX & RADIO - .ui-checkbox, .ui-radio
Base: accent-color para radio e checkboxes nativos.
NOTA: input[type="checkbox"].ui-checkbox (mais abaixo) sobrescreve
com appearance:none + checkmark customizado para maior controle visual.
============================================ */
.ui-checkbox,
.ui-radio {
width: 1rem;
height: 1rem;
accent-color: var(--color-primary-600);
cursor: pointer;
}
.ui-checkbox:disabled,
.ui-radio:disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* Checkbox Card - Para checkboxes em grid */
.ui-checkbox-card {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
background-color: var(--color-gray-50);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
}
.ui-checkbox-card:hover {
background-color: var(--color-gray-100);
border-color: var(--color-gray-300);
}
.dark .ui-checkbox-card {
background-color: var(--color-gray-800);
border-color: var(--color-gray-700);
}
.dark .ui-checkbox-card:hover {
background-color: var(--color-gray-750, #2d3748);
border-color: var(--color-gray-600);
}
.ui-checkbox-card:has(input:checked) {
background-color: var(--color-primary-50);
border-color: var(--color-primary-500);
}
.dark .ui-checkbox-card:has(input:checked) {
background-color: rgba(var(--color-primary-rgb), 0.15);
border-color: var(--color-primary-500);
}
.ui-checkbox-label {
font-size: 0.875rem;
color: var(--color-gray-700);
font-weight: 500;
}
.dark .ui-checkbox-label {
color: var(--color-gray-300);
}
/* Checkbox Grid - Grid de checkboxes */
.ui-checkbox-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
@media (max-width: 480px) {
.ui-checkbox-grid {
grid-template-columns: 1fr;
}
}
/* Form Row - Linha com múltiplos campos */
.ui-form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (max-width: 480px) {
.ui-form-row {
grid-template-columns: 1fr;
}
}
/* Form Grid - Grid de campos */
.ui-form-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ============================================
TOGGLE - .ui-toggle
============================================ */
.ui-toggle {
position: relative;
display: inline-block;
width: 2.75rem;
height: 1.5rem;
}
.ui-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ui-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-gray-300);
border-radius: var(--radius-full);
}
.ui-toggle-slider::before {
position: absolute;
content: "";
height: 1.25rem;
width: 1.25rem;
left: 0.125rem;
bottom: 0.125rem;
background-color: var(--color-white);
border-radius: 50%;
}
.dark .ui-toggle-slider::before {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-toggle input:checked + .ui-toggle-slider {
background-color: var(--color-primary-600);
}
.ui-toggle input:checked + .ui-toggle-slider::before {
transform: translateX(1.25rem);
}
.ui-toggle input:disabled + .ui-toggle-slider {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================
TOGGLE LAYOUT HELPERS
Wrappers para linhas de toggle com label/descrição
============================================ */
/* ui-toggle-row e ui-toggle-wrapper são equivalentes — ambos suportados */
.ui-toggle-row,
.ui-toggle-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ui-toggle-content {
flex: 1;
min-width: 0;
}
.ui-toggle-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary, var(--color-gray-700));
cursor: pointer;
margin-bottom: 0;
}
.dark .ui-toggle-label {
color: var(--color-text-primary);
}
/* ============================================
LABEL - .ui-label
============================================ */
.ui-label {
display: block;
margin-bottom: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-700);
}
.ui-label-required::after {
content: " *";
color: var(--color-danger-500);
}
.dark .ui-label {
color: var(--color-gray-300);
}
/* ============================================
HELP TEXT - .ui-help, .ui-hint, .ui-error
============================================ */
.ui-help,
.ui-hint {
margin-top: 0.25rem;
font-size: 0.8125rem;
color: var(--color-gray-500);
}
.ui-error {
margin-top: 0.25rem;
font-size: 0.8125rem;
color: var(--color-danger-500);
}
.dark .ui-help,
.dark .ui-hint {
color: var(--color-gray-400);
}
.dark .ui-error {
color: var(--color-danger-400);
}
/* ============================================
FORM GROUP - .ui-form-group
Definicao canonica em components.css (grid responsivo)
============================================ */
/* ============================================
BADGE - .ui-badge-*
Variantes: primary, success, warning, danger, info, gray
Estilos: soft (default), solid, outline
============================================ */
.ui-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.5;
border-radius: var(--radius-full, 9999px);
white-space: nowrap;
transition: all 0.15s ease;
}
/* Badge Soft Variants (default) */
.ui-badge-primary {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
}
.dark .ui-badge-primary {
background-color: rgba(var(--color-primary-rgb), 0.2);
color: var(--color-primary-300);
}
.ui-badge-success {
background-color: var(--color-success-100);
color: var(--color-success-700);
}
.dark .ui-badge-success {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-300);
}
.ui-badge-warning {
background-color: var(--color-warning-100);
color: var(--color-warning-700);
}
.dark .ui-badge-warning {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-300);
}
.ui-badge-danger {
background-color: var(--color-danger-100);
color: var(--color-danger-700);
}
.dark .ui-badge-danger {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-300);
}
.ui-badge-info {
background-color: var(--color-info-100);
color: var(--color-info-700);
}
.dark .ui-badge-info {
background-color: rgba(6, 182, 212, 0.2);
color: var(--color-info-300);
}
.ui-badge-gray,
.ui-badge-secondary {
background-color: var(--color-gray-100);
color: var(--color-gray-700);
}
.dark .ui-badge-gray,
.dark .ui-badge-secondary {
background-color: var(--color-gray-700);
color: var(--color-gray-300);
}
/* Badge Named Color Variants */
.ui-badge-blue {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
}
.dark .ui-badge-blue {
background-color: rgba(var(--color-primary-rgb), 0.2);
color: var(--color-primary-300);
}
.ui-badge-cyan {
background-color: var(--color-info-100);
color: var(--color-info-700);
}
.dark .ui-badge-cyan {
background-color: rgba(6, 182, 212, 0.2);
color: var(--color-info-300);
}
.ui-badge-red {
background-color: var(--color-danger-100);
color: var(--color-danger-700);
}
.dark .ui-badge-red {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-300);
}
.ui-badge-slate {
background-color: var(--color-gray-100);
color: var(--color-gray-600);
}
.dark .ui-badge-slate {
background-color: var(--color-gray-700);
color: var(--color-gray-400);
}
.ui-badge-amber {
background-color: var(--color-warning-100);
color: var(--color-warning-700);
}
.dark .ui-badge-amber {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-300);
}
.ui-badge-emerald {
background-color: var(--color-success-100);
color: var(--color-success-700);
}
.dark .ui-badge-emerald {
background-color: rgba(16, 185, 129, 0.2);
color: var(--color-success-300);
}
.ui-badge-green {
background-color: var(--color-success-100);
color: var(--color-success-700);
}
.dark .ui-badge-green {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-300);
}
.ui-badge-yellow {
background-color: var(--color-warning-100);
color: var(--color-warning-700);
}
.dark .ui-badge-yellow {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-300);
}
.ui-badge-orange {
background-color: var(--color-warning-50);
color: var(--color-danger-700);
}
.dark .ui-badge-orange {
background-color: rgba(249, 115, 22, 0.2);
color: var(--color-warning-300);
}
.ui-badge-purple {
background-color: var(--color-accent-50);
color: var(--color-accent-600);
}
.dark .ui-badge-purple {
background-color: rgba(139, 92, 246, 0.2);
color: var(--color-accent-300);
}
/* Badge Solid Variants */
.ui-badge-primary-solid {
background-color: var(--color-primary-600);
color: var(--color-white);
}
.ui-badge-success-solid {
background-color: var(--color-success-600);
color: var(--color-white);
}
.ui-badge-warning-solid {
background-color: var(--color-warning-500);
color: var(--color-white);
}
.ui-badge-danger-solid {
background-color: var(--color-danger-600);
color: var(--color-white);
}
.ui-badge-info-solid {
background-color: var(--color-info-600);
color: var(--color-white);
}
.ui-badge-gray-solid {
background-color: var(--color-gray-600);
color: var(--color-white);
}
/* Badge Outline Variants */
.ui-badge-primary-outline {
background-color: transparent;
color: var(--color-primary-600);
border: 1px solid var(--color-primary-300);
}
.dark .ui-badge-primary-outline {
color: var(--color-primary-400);
border-color: var(--color-primary-600);
}
.ui-badge-success-outline {
background-color: transparent;
color: var(--color-success-600);
border: 1px solid var(--color-success-300);
}
.dark .ui-badge-success-outline {
color: var(--color-success-400);
border-color: var(--color-success-600);
}
.ui-badge-warning-outline {
background-color: transparent;
color: var(--color-warning-600);
border: 1px solid var(--color-warning-300);
}
.dark .ui-badge-warning-outline {
color: var(--color-warning-400);
border-color: var(--color-warning-600);
}
.ui-badge-danger-outline {
background-color: transparent;
color: var(--color-danger-600);
border: 1px solid var(--color-danger-300);
}
.dark .ui-badge-danger-outline {
color: var(--color-danger-400);
border-color: var(--color-danger-600);
}
/* Badge Sizes */
.ui-badge-xs {
padding: 0 0.25rem;
font-size: 0.625rem;
}
.ui-badge-sm {
padding: 0 0.375rem;
font-size: 0.6875rem;
}
.ui-badge-lg {
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
}
/* Badge with Dot */
.ui-badge-dot::before {
content: "";
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: currentColor;
flex-shrink: 0;
}
/* Badge Clickable */
.ui-badge-clickable {
cursor: pointer;
}
.ui-badge-clickable:hover {
filter: brightness(0.95);
}
.dark .ui-badge-clickable:hover {
filter: brightness(1.1);
}
/* Badge Dismissible */
.ui-badge-dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.875rem;
height: 0.875rem;
margin-left: 0.125rem;
margin-right: -0.25rem;
padding: 0;
font-size: 0.75rem;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0.7;
}
.ui-badge-dismiss:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.1);
}
.dark .ui-badge-dismiss:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Badge Pill (mais arredondado, espaçamento confortável) */
.ui-badge-pill {
border-radius: var(--radius-full);
padding: 0.4375rem 1rem;
gap: 0.5rem;
}
/* Badge Count (número apenas) */
.ui-badge-count {
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
text-align: center;
border-radius: var(--radius-full);
}
/* ============================================
ALERT - .ui-alert-*
============================================ */
.ui-alert {
display: flex;
gap: 0.75rem;
padding: 1rem;
border-radius: var(--radius-lg);
border: 1px solid transparent;
}
.ui-alert-icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
}
.ui-alert-content {
flex: 1;
min-width: 0;
}
.ui-alert-title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.ui-alert-message,
.ui-alert-text {
font-size: 0.875rem;
}
.ui-alert-dismiss {
flex-shrink: 0;
background: transparent;
border: none;
cursor: pointer;
padding: 0.25rem;
opacity: 0.7;
}
.ui-alert-dismiss:hover {
opacity: 1;
}
/* Alert Variants */
.ui-alert-success {
background-color: var(--color-success-50);
border-color: var(--color-success-200);
color: var(--color-success-800);
}
.ui-alert-success .ui-alert-icon {
color: var(--color-success-500);
}
.dark .ui-alert-success {
background-color: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-300);
}
.ui-alert-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-200);
color: var(--color-warning-800);
}
.ui-alert-warning .ui-alert-icon {
color: var(--color-warning-500);
}
.dark .ui-alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-300);
}
.ui-alert-danger,
.ui-alert-error {
background-color: var(--color-danger-50);
border-color: var(--color-danger-200);
color: var(--color-danger-800);
}
.ui-alert-danger .ui-alert-icon,
.ui-alert-error .ui-alert-icon {
color: var(--color-danger-500);
}
.dark .ui-alert-danger,
.dark .ui-alert-error {
background-color: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-300);
}
/* ============================================
CARD - .ui-card
Variantes: default, hover, clickable, colored
IMPORTANTE: Cards sempre com fundo branco/cinza
============================================ */
.ui-card {
--card-padding: 1.25rem;
--card-gap: 0.75rem;
background-color: var(--color-bg-card);
background-image: none;
border: 1px solid var(--color-border);
border-radius: var(--card-radius, var(--radius-lg, 0.75rem));
overflow: visible;
transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
}
/* Card Hierarchy — padding e gap por nível */
.ui-card.ui-card--parent {
--card-padding: 1.5rem;
--card-gap: 1rem;
box-shadow: var(--shadow);
}
.ui-card.ui-card--child {
--card-padding: 1rem;
--card-gap: 0.75rem;
background-color: var(--color-bg-muted);
box-shadow: none;
}
.ui-card.ui-card--grandchild {
--card-padding: 0.75rem;
--card-gap: 0.5rem;
background-color: var(--color-bg-subtle);
box-shadow: none;
}
/* Card Body */
.ui-card .ui-card__body {
padding: var(--card-padding);
display: flex;
flex-direction: column;
gap: var(--card-gap);
}
.ui-card .ui-card__body--no-padding {
padding: 0;
}
/* Card Footer — ações dentro do card com separador */
.ui-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--color-border);
gap: 0.75rem;
}
/* Card Header */
.ui-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: var(--card-padding);
border-bottom: 1px solid var(--color-border);
}
.ui-card__header-content {
display: flex;
align-items: flex-start;
gap: 0.75rem;
flex: 1;
min-width: 0;
}
.ui-card__header-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: var(--color-primary-50);
color: var(--color-primary-500);
}
.dark .ui-card__header-icon {
background: var(--color-primary-900, rgba(var(--color-primary-rgb), 0.2));
color: var(--color-primary-400);
}
.ui-card__header-text {
flex: 1;
min-width: 0;
}
.ui-card__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
line-height: 1.4;
}
.dark .ui-card__title {
color: var(--color-text-primary);
}
.ui-card__subtitle {
font-size: 0.813rem;
color: var(--color-text-muted);
margin: 0.125rem 0 0;
}
.dark .ui-card__subtitle {
color: var(--color-text-muted);
}
.ui-card__header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* Card Collapse */
.ui-card__collapse-btn {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--color-text-muted);
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ui-card__collapse-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.dark .ui-card__collapse-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.ui-card__collapse-btn[aria-expanded="false"] .ui-card__collapse-icon {
transform: rotate(-90deg);
}
/* Card Divider — separador visual dentro do card body */
.ui-card__divider {
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--color-border);
}
/* Card com hover padrão */
.ui-card-hover:hover {
border-color: var(--color-gray-300);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dark .ui-card-hover:hover {
border-color: var(--color-gray-600);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* Card clicável (link/button) */
.ui-card-clickable {
cursor: pointer;
}
.ui-card-clickable:hover {
border-color: var(--color-primary-300);
box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.12);
}
.ui-card-clickable:active {
opacity: 0.9;
}
.dark .ui-card-clickable:hover {
border-color: var(--color-primary-600);
box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.2);
}
/* Card com destaque (selected/active) */
.ui-card-selected,
.ui-card.active {
border-color: var(--color-primary-500);
box-shadow: 0 0 0 1px var(--color-primary-500);
}
.dark .ui-card-selected,
.dark .ui-card.active {
border-color: var(--color-primary-400);
box-shadow: 0 0 0 1px var(--color-primary-400);
}
/* Card Header */
.ui-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-border);
}
.ui-card-header-sm {
padding: 0.75rem 1rem;
}
.ui-card-header-lg {
padding: 1.25rem 1.5rem;
}
/* Card Header Color Variants */
.ui-card-header-green {
background-color: rgba(34, 197, 94, 0.05);
border-bottom-color: rgba(34, 197, 94, 0.2);
}
.dark .ui-card-header-green {
background-color: rgba(34, 197, 94, 0.08);
border-bottom-color: rgba(34, 197, 94, 0.15);
}
.ui-card-header-red {
background-color: rgba(239, 68, 68, 0.05);
border-bottom-color: rgba(239, 68, 68, 0.2);
}
.dark .ui-card-header-red {
background-color: rgba(239, 68, 68, 0.08);
border-bottom-color: rgba(239, 68, 68, 0.15);
}
.ui-card-header-amber {
background-color: rgba(245, 158, 11, 0.05);
border-bottom-color: rgba(245, 158, 11, 0.2);
}
.dark .ui-card-header-amber {
background-color: rgba(245, 158, 11, 0.08);
border-bottom-color: rgba(245, 158, 11, 0.15);
}
/* Card Header Nav (for tabs inside card) */
.ui-card-header-nav {
border-bottom: 1px solid var(--color-border);
padding: 0;
}
/* Card Footer Bordered */
.ui-card-footer-bordered {
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--color-border);
}
.dark .ui-card-footer-bordered {
border-top-color: var(--color-gray-700, #2a2a4e);
}
/* Card Title */
.ui-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.ui-card-title-sm {
font-size: 0.875rem;
}
.ui-card-title-lg {
font-size: 1.125rem;
}
/* Card Subtitle */
.ui-card-subtitle {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-top: 0.25rem;
}
/* Card Body → definição canônica mais abaixo (seção spacing) */
.ui-card-body--no-padding,
.ui-card-body-flush {
padding: 0;
}
/* Card Footer */
.ui-card-footer {
padding: 1rem 1.25rem;
border-top: 1px solid var(--color-border);
background-color: var(--color-bg-secondary);
}
.ui-card-footer-sm {
padding: 0.75rem 1rem;
}
.ui-card-footer-transparent {
background-color: transparent;
}
/* Card Actions (dentro do header) */
.ui-card-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Card coloridos (para métricas/stats) */
.ui-card-primary {
border-left: 4px solid var(--color-primary-500);
}
.ui-card-success {
border-left: 4px solid var(--color-success-500);
}
.ui-card-warning {
border-left: 4px solid var(--color-warning-500);
}
.ui-card-danger {
border-left: 4px solid var(--color-danger-500);
}
.ui-card-info {
border-left: 4px solid var(--color-info-500);
}
.dark .ui-card-primary {
border-left-color: var(--color-primary-400);
}
.dark .ui-card-success {
border-left-color: var(--color-success-400);
}
.dark .ui-card-warning {
border-left-color: var(--color-warning-400);
}
.dark .ui-card-danger {
border-left-color: var(--color-danger-400);
}
.dark .ui-card-info {
border-left-color: var(--color-info-400);
}
/* Dark Mode */
.dark .ui-card {
background-color: var(--color-bg-card) !important;
background-image: none !important;
border-color: var(--color-border) !important;
}
.dark .ui-card-footer {
background-color: var(--color-bg-secondary);
}
/* Card Item (item secundário dentro de card) */
.ui-card-item {
padding: 0.75rem;
border-radius: var(--radius-lg);
background-color: var(--color-bg-secondary);
transition: background-color 0.15s ease;
}
.ui-card-item:hover {
background-color: var(--color-gray-100);
}
.dark .ui-card-item {
background-color: var(--color-bg-subtle);
}
.dark .ui-card-item:hover {
background-color: var(--color-bg-hover);
}
/* Empty State → definição canônica mais abaixo neste arquivo */
/* ============================================
TABLE - .ui-table
============================================ */
.ui-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ui-table th {
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
color: var(--color-gray-600);
background-color: var(--color-gray-50);
border-bottom: 1px solid var(--color-border);
}
.ui-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-primary);
}
.ui-table tbody tr:hover {
background-color: var(--color-gray-50);
}
.dark .ui-table th {
color: var(--color-text-muted);
background-color: var(--color-bg-secondary);
}
.dark .ui-table tbody tr:hover {
background-color: var(--color-bg-hover);
}
/* Table Sizes */
.ui-table-sm th,
.ui-table-sm td {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
}
/* ============================================
DATA TABLE - .ui-data-table-*
Classes complementares para tabelas de dados
============================================ */
/* Header do thead */
.ui-data-table-header {
background-color: var(--color-gray-50);
}
.dark .ui-data-table-header {
background-color: var(--color-gray-800);
}
/* Células th de data table - padding maior e estilo uppercase */
.ui-data-table-th {
padding: 0.75rem 1.25rem;
text-align: left;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
white-space: nowrap;
}
/* Células td de data table */
.ui-data-table-td {
padding: 0.875rem 1.25rem;
color: var(--color-text-primary);
vertical-align: middle;
}
/* Responsive: reduce padding on mobile */
@media (max-width: 640px) {
.ui-data-table-th {
padding: 0.5rem 0.75rem;
font-size: 0.6875rem;
}
.ui-data-table-td {
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
}
}
/* ============================================
MODAL - .ui-modal
Estrutura: .ui-modal > .ui-modal-backdrop + .ui-modal-dialog
============================================ */
/* Container principal - overlay fullscreen centralizado */
.ui-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
overflow-y: auto;
}
.ui-modal.hidden {
display: none !important;
}
/* Backdrop - apenas visual, sem bloquear cliques no dialog */
.ui-modal-backdrop {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Dialog - o card branco/escuro do modal */
.ui-modal-dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 28rem;
max-height: calc(100vh - 2rem);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-xl, 0.75rem);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.dark .ui-modal-dialog {
background-color: var(--color-bg-card);
border-color: var(--color-border);
}
/* Form dentro do dialog */
.ui-modal-dialog > form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* Tamanhos do dialog */
.ui-modal-sm .ui-modal-dialog,
.ui-modal-dialog.ui-modal-sm { max-width: 24rem; }
.ui-modal-md .ui-modal-dialog,
.ui-modal-dialog.ui-modal-md { max-width: 28rem; }
.ui-modal-lg .ui-modal-dialog,
.ui-modal-dialog.ui-modal-lg { max-width: 36rem; }
.ui-modal-xl .ui-modal-dialog,
.ui-modal-dialog.ui-modal-xl { max-width: 48rem; }
.ui-modal-2xl .ui-modal-dialog,
.ui-modal-dialog.ui-modal-2xl { max-width: 64rem; }
.ui-modal-full .ui-modal-dialog,
.ui-modal-dialog.ui-modal-full { max-width: calc(100vw - 2rem); }
/* Header do modal */
.ui-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.dark .ui-modal-header {
border-bottom-color: var(--color-gray-700);
}
/* Título do modal */
.ui-modal-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
line-height: 1.4;
}
.dark .ui-modal-title {
color: var(--color-white);
}
/* Botão fechar */
.ui-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
color: var(--color-gray-400);
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.ui-modal-close:hover {
color: var(--color-gray-600);
background-color: var(--color-gray-100);
}
.dark .ui-modal-close:hover {
color: var(--color-gray-300);
background-color: var(--color-gray-700);
}
/* Body do modal - com scroll */
.ui-modal-body {
padding: 1.5rem;
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
min-width: 0;
}
/* Footer do modal */
.ui-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-border);
background-color: transparent;
flex-shrink: 0;
}
.dark .ui-modal-footer {
border-top-color: var(--color-gray-700);
}
/* Modal Icon (para modais de confirmação/alerta) */
.ui-modal-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-lg);
flex-shrink: 0;
}
.ui-modal-icon i,
.ui-modal-icon svg {
font-size: 1.25rem;
}
.ui-modal-icon-danger {
background-color: rgba(239, 68, 68, 0.1);
color: var(--color-danger-600);
}
.dark .ui-modal-icon-danger {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-400);
}
.ui-modal-icon-warning {
background-color: rgba(245, 158, 11, 0.1);
color: var(--color-warning-600);
}
.dark .ui-modal-icon-warning {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-400);
}
.ui-modal-icon-success {
background-color: rgba(34, 197, 94, 0.1);
color: var(--color-success-600);
}
.dark .ui-modal-icon-success {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-400);
}
.ui-modal-icon-info {
background-color: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary-600);
}
.dark .ui-modal-icon-info {
background-color: rgba(var(--color-primary-rgb), 0.2);
color: var(--color-primary-400);
}
/* Modal Subtitle */
.ui-modal-subtitle {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-top: 0.25rem;
}
.dark .ui-modal-subtitle {
color: var(--color-gray-400);
}
/* Modal Container (alias para dialog) */
.ui-modal-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 28rem;
max-height: calc(100vh - 2rem);
margin: auto;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.dark .ui-modal-container {
background-color: var(--color-gray-800);
border-color: var(--color-gray-700);
}
/* Modal Close Button (alternativo) */
.ui-modal-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
color: var(--color-gray-400);
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.ui-modal-close-btn:hover {
color: var(--color-gray-600);
background-color: var(--color-gray-100);
}
.dark .ui-modal-close-btn:hover {
color: var(--color-gray-300);
background-color: var(--color-gray-700);
}
/* Modal Tall (mais altura) */
.ui-modal-tall .ui-modal-dialog,
.ui-modal-dialog.ui-modal-tall,
.ui-modal-tall.ui-modal-dialog {
max-height: calc(100vh - 4rem);
}
/* Modal Body Scroll */
.ui-modal-body-scroll {
overflow-y: auto;
flex: 1 1 auto;
min-height: 200px;
}
/* Modal Footer Stacked (botões empilhados) */
.ui-modal-footer-stacked {
flex-direction: column;
gap: 0.5rem;
}
.ui-modal-footer-stacked .ui-btn {
width: 100%;
}
/* Overlay alternativo (para compatibilidade) */
.ui-modal-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.6);
}
.ui-modal-overlay.hidden {
display: none !important;
}
/* ============================================
MODAL ALIASES - Compatibilidade de padroes
============================================ */
/* ui-modal-wrapper = overlay fixo com backdrop automatico */
.ui-modal-wrapper {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
overflow-y: auto;
}
/* Backdrop automatico via ::before — garante que TODOS os modais
tenham overlay escuro, mesmo sem child .ui-modal-overlay */
.ui-modal-wrapper::before {
content: '';
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: none;
}
/* Ocultar ::before quando existe backdrop explicito (evita sobreposição dupla) */
.ui-modal-wrapper:has(> .ui-modal-overlay)::before,
.ui-modal-wrapper:has(> .ui-modal-backdrop)::before {
display: none;
}
.ui-modal-wrapper.hidden {
display: none !important;
}
/* Backdrop explicito dentro de wrapper (override do ::before) */
.ui-modal-wrapper > .ui-modal-overlay,
.ui-modal-wrapper > .ui-modal-backdrop {
position: absolute;
inset: 0;
z-index: auto;
display: block;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
padding: 0;
}
/* ui-modal-content = alias para ui-modal-dialog */
.ui-modal-content {
position: relative;
z-index: 1;
width: 100%;
max-height: calc(100vh - 2rem);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-xl, 0.75rem);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Default max-width quando nenhuma classe Tailwind max-w-* é usada */
.ui-modal-content:not([class*="max-w-"]) {
max-width: 28rem;
}
.dark .ui-modal-content {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
/* .ui-modal como child direto de wrapper — vira dialog (nao overlay) */
.ui-modal-wrapper > .ui-modal {
position: relative;
inset: auto;
z-index: 1;
padding: 0;
overflow: hidden;
/* Herda visual de ui-modal-dialog */
background-color: var(--color-white);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-xl, 0.75rem);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 28rem;
max-height: calc(100vh - 2rem);
display: flex;
flex-direction: column;
}
.dark .ui-modal-wrapper > .ui-modal {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
/* .ui-modal dentro de ui-modal-dialog (ex: confirm-modal) — reset transparent */
.ui-modal-dialog .ui-modal {
position: static;
inset: auto;
z-index: auto;
padding: 0;
overflow: visible;
background: transparent;
border: none;
box-shadow: none;
max-width: none;
max-height: none;
display: flex;
flex-direction: column;
}
/* .ui-modal dentro de overlay — vira dialog */
.ui-modal-overlay > .ui-modal,
.ui-modal-container > .ui-modal {
position: relative;
inset: auto;
z-index: 1;
padding: 0;
overflow: hidden;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-xl, 0.75rem);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 28rem;
max-height: calc(100vh - 2rem);
display: flex;
flex-direction: column;
}
.dark .ui-modal-overlay > .ui-modal,
.dark .ui-modal-container > .ui-modal {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
/* Tamanhos do .ui-modal aninhado via max-w-* do Tailwind */
.ui-modal-wrapper > .ui-modal.max-w-xs { max-width: 20rem; }
.ui-modal-wrapper > .ui-modal.max-w-sm { max-width: 24rem; }
.ui-modal-wrapper > .ui-modal.max-w-md { max-width: 28rem; }
.ui-modal-wrapper > .ui-modal.max-w-lg { max-width: 32rem; }
.ui-modal-wrapper > .ui-modal.max-w-xl { max-width: 36rem; }
.ui-modal-wrapper > .ui-modal.max-w-2xl { max-width: 42rem; }
.ui-modal-wrapper > .ui-modal.max-w-3xl { max-width: 48rem; }
.ui-modal-wrapper > .ui-modal.max-w-4xl { max-width: 56rem; }
/* ui-modal-content dentro de ui-modal (parent já é dialog visual) — reset */
.ui-modal > .ui-modal-content {
position: static;
border: none;
box-shadow: none;
background: transparent;
border-radius: 0;
max-width: none;
max-height: none;
}
/* ============================================
DROPDOWN - .ui-dropdown
============================================ */
.ui-dropdown {
position: relative;
display: inline-block;
}
.ui-dropdown-menu {
position: absolute;
top: 100%;
z-index: var(--z-dropdown);
min-width: 14rem;
margin-top: 0.25rem;
padding: 0.25rem 0;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.ui-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: var(--color-text-primary);
background: transparent;
border: none;
cursor: pointer;
text-align: left;
}
.ui-dropdown-item:hover {
background-color: var(--color-bg-hover);
}
.dark .ui-dropdown-item:hover {
background-color: var(--color-bg-hover);
}
.ui-dropdown-item-danger {
color: var(--color-danger-600);
}
.ui-dropdown-item-danger:hover {
background-color: var(--color-danger-50);
}
.dark .ui-dropdown-item-danger:hover {
background-color: rgba(239, 68, 68, 0.1);
}
.ui-dropdown-divider {
height: 1px;
margin: 0.25rem 0;
background-color: var(--color-border);
}
.ui-dropdown-label {
padding: 0.375rem 1rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
pointer-events: none;
}
.dark .ui-dropdown-menu {
background-color: var(--color-bg-card);
border-color: var(--color-border);
}
/* ============================================
TABS - .ui-tabs
============================================ */
.ui-tabs {
display: flex;
border-bottom: 1px solid var(--color-border);
gap: 0.5rem;
}
.ui-tab {
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
margin-bottom: -1px;
}
.ui-tab:hover {
color: var(--color-text-primary);
}
.ui-tab.active,
.ui-tab[aria-selected="true"] {
color: var(--color-primary-600);
border-bottom-color: var(--color-primary-600);
}
.dark .ui-tab.active,
.dark .ui-tab[aria-selected="true"] {
color: var(--color-primary-400);
border-bottom-color: var(--color-primary-400);
}
.ui-tab-panel {
padding: 1rem 0;
}
.ui-tab-panel[hidden] {
display: none;
}
/* ============================================
EMPTY STATE - .ui-empty
============================================ */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
text-align: center;
}
.ui-empty-icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.ui-empty-icon {
width: 4rem;
height: 4rem;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-300);
}
.ui-empty-icon-wrapper > .ui-empty-icon {
margin-bottom: 0;
}
.dark .ui-empty-icon {
color: var(--color-gray-600);
}
.ui-empty-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.ui-empty-message,
.ui-empty-description,
.ui-empty-text {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: 1.5rem;
max-width: 24rem;
}
.ui-empty-centered,
.ui-empty-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
text-align: center;
}
.ui-empty-icon-lg {
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
color: var(--color-gray-300);
display: flex;
align-items: center;
justify-content: center;
}
.dark .ui-empty-icon-lg {
color: var(--color-gray-600);
}
/* Utility: Background muted */
.ui-bg-muted {
background-color: var(--color-bg-muted);
}
/* ============================================
PROGRESS - .ui-progress
============================================ */
.ui-progress {
display: block;
width: 100%;
height: 0.5rem;
background-color: var(--color-gray-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.ui-progress-sm { height: 0.375rem; }
.ui-progress-md { height: 0.5rem; }
.ui-progress-lg { height: 0.75rem; }
.ui-progress-bar {
height: 100%;
background-color: var(--color-primary-600);
border-radius: var(--radius-full);
width: var(--progress-width, 0%) !important;
transition: width 0.3s ease, all 0.5s ease;
}
.ui-progress-bar-success { background-color: var(--color-success-600); }
.ui-progress-bar-warning { background-color: var(--color-warning-500); }
.ui-progress-bar-danger { background-color: var(--color-danger-600); }
.ui-progress-bar-slate {
background-color: var(--color-slate-500);
}
.dark .ui-progress-bar-slate {
background-color: var(--color-slate-400);
}
.ui-progress-bar-gradient {
background: linear-gradient(to right, var(--color-primary-500), var(--color-indigo-600));
}
.dark .ui-progress {
background-color: var(--color-gray-700);
}
/* ============================================
AVATAR - .ui-avatar
============================================ */
.ui-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-gray-200);
color: var(--color-gray-600);
font-weight: 600;
font-size: 0.875rem;
overflow: hidden;
}
.ui-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
.ui-avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.ui-avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
.dark .ui-avatar {
background-color: var(--color-gray-700);
color: var(--color-gray-300);
}
/* ============================================
ICON BOX - .ui-icon-box
============================================ */
.ui-icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-lg);
font-size: 1rem;
}
.ui-icon-box-sm { width: 2rem; height: 2rem; font-size: 0.875rem; }
.ui-icon-box-lg { width: 3rem; height: 3rem; font-size: 1.25rem; }
.ui-icon-box-primary { background-color: var(--color-primary-100); color: var(--color-primary-600); }
.ui-icon-box-success { background-color: var(--color-success-100); color: var(--color-success-600); }
.ui-icon-box-warning { background-color: var(--color-warning-100); color: var(--color-warning-600); }
.ui-icon-box-danger { background-color: var(--color-danger-100); color: var(--color-danger-600); }
.ui-icon-box-info { background-color: var(--color-info-100); color: var(--color-info-600); }
.ui-icon-box-purple { background-color: var(--color-purple-100); color: var(--color-purple-600); }
.ui-icon-box-emerald { background-color: var(--color-emerald-100); color: var(--color-emerald-600); }
.ui-icon-box-cyan { background-color: var(--color-cyan-100); color: var(--color-cyan-600); }
.ui-icon-box-amber { background-color: var(--color-amber-100); color: var(--color-amber-600); }
.dark .ui-icon-box-primary { background-color: rgba(var(--color-primary-rgb), 0.2); color: var(--color-primary-400); }
.dark .ui-icon-box-success { background-color: rgba(34, 197, 94, 0.2); color: var(--color-success-400); }
.dark .ui-icon-box-warning { background-color: rgba(245, 158, 11, 0.2); color: var(--color-warning-400); }
.dark .ui-icon-box-danger { background-color: rgba(239, 68, 68, 0.2); color: var(--color-danger-400); }
.dark .ui-icon-box-info { background-color: rgba(6, 182, 212, 0.2); color: var(--color-info-400); }
.dark .ui-icon-box-purple { background-color: rgba(168, 85, 247, 0.2); color: var(--color-purple-400); }
.dark .ui-icon-box-emerald { background-color: rgba(16, 185, 129, 0.2); color: var(--color-emerald-400); }
.dark .ui-icon-box-cyan { background-color: rgba(6, 182, 212, 0.2); color: var(--color-cyan-400); }
.dark .ui-icon-box-amber { background-color: rgba(245, 158, 11, 0.2); color: var(--color-amber-400); }
/* ============================================
STATUS - .ui-status
============================================ */
.ui-status {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
}
.ui-status-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
.ui-status-success .ui-status-dot { background-color: var(--color-success-500); }
.ui-status-warning .ui-status-dot { background-color: var(--color-warning-500); }
.ui-status-danger .ui-status-dot { background-color: var(--color-danger-500); }
.ui-status-info .ui-status-dot { background-color: var(--color-info-500); }
.ui-status-neutral .ui-status-dot { background-color: var(--color-gray-400); }
/* ============================================
DIVIDER - .ui-divider
============================================ */
.ui-divider {
height: 1px;
background-color: var(--color-border);
margin: 1rem 0;
}
.dark .ui-divider {
background-color: var(--color-gray-700);
}
/* ============================================
LINK - .ui-link
============================================ */
.ui-link {
color: var(--color-primary-600);
text-decoration: none;
}
.ui-link:hover {
opacity: 0.85;
}
.dark .ui-link {
color: var(--color-primary-400);
}
/* ============================================
TEXT UTILITIES
============================================ */
.ui-text-default { color: var(--color-text-primary); }
.ui-text-primary { color: var(--color-text-primary); }
.ui-text-secondary { color: var(--color-text-secondary); }
.ui-text-label { color: var(--color-text-label); }
.ui-text-muted { color: var(--color-text-muted); }
/* WCAG AA: 4.5:1 minimum contrast ratio */
.ui-text-disabled { color: var(--color-gray-500); }
.dark .ui-text-disabled { color: var(--color-gray-400); }
.ui-text-success { color: var(--color-success-600); }
.ui-text-warning { color: var(--color-warning-600); }
.ui-text-danger { color: var(--color-danger-600); }
.ui-text-info { color: var(--color-info-600); }
.dark .ui-text-success { color: var(--color-success-400); }
.dark .ui-text-warning { color: var(--color-warning-400); }
.dark .ui-text-danger { color: var(--color-danger-400); }
.dark .ui-text-info { color: var(--color-info-400); }
/* Text Sizes */
.ui-text-2xs { font-size: 0.625rem; line-height: 0.875rem; } /* 10px */
.ui-text-xs { font-size: 0.75rem; line-height: 1rem; } /* 12px */
.ui-text-sm { font-size: 0.875rem; line-height: 1.25rem; } /* 14px */
.ui-text-base { font-size: 1rem; line-height: 1.5rem; } /* 16px */
.ui-text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* 18px */
.ui-text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* 20px */
.ui-text-2xl { font-size: 1.5rem; line-height: 2rem; } /* 24px */
.ui-text-3xl { font-size: 1.875rem; line-height: 2.25rem; } /* 30px */
.ui-text-purple { color: var(--color-accent-600); }
.dark .ui-text-purple { color: var(--color-accent-300); }
/* Link text colors */
.ui-text-link { color: var(--color-primary-600); text-decoration: none; }
.ui-text-link-hover:hover { color: var(--color-primary-700); text-decoration: underline; }
.dark .ui-text-link { color: var(--color-primary-400); }
.dark .ui-text-link-hover:hover { color: var(--color-primary-300); }
/* Ring colors semânticas */
.ui-ring-primary { --tw-ring-color: var(--color-primary-500); }
.ui-ring-success { --tw-ring-color: var(--color-success-500); }
.ui-ring-danger { --tw-ring-color: var(--color-danger-500); }
.ui-ring-warning { --tw-ring-color: var(--color-warning-500); }
.ui-ring-info { --tw-ring-color: var(--color-info-500); }
/* Inline icon utility - para ícones dentro de texto corrido */
.ui-icon-inline {
display: inline;
vertical-align: middle;
margin-right: 0.25rem;
}
/* Dot indicators */
.ui-dot {
width: 4px;
height: 4px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.ui-dot-primary { background-color: var(--color-primary-500, var(--color-primary-500)); }
.ui-dot-success { background-color: var(--color-success-500, var(--color-success-500)); }
.ui-dot-danger { background-color: var(--color-danger-500, var(--color-danger-500)); }
.ui-dot-warning { background-color: var(--color-warning-500, var(--color-warning-500)); }
/* Border color variants — inclui border-style e border-width para funcionar standalone */
.ui-border-default { border: 1px solid var(--color-border); }
.ui-border-top { border-top: 1px solid var(--color-border); }
.ui-border-input { border: 1px solid var(--color-border-input); }
.ui-border-light { border-color: var(--color-gray-200); }
.dark .ui-border-light { border-color: var(--color-gray-700); }
.ui-border-warning { border: 1px solid var(--color-warning-500, var(--color-warning-500)); }
.ui-border-danger { border: 1px solid var(--color-danger-500, var(--color-danger-500)); }
.ui-border-success { border: 1px solid var(--color-success-500, var(--color-success-500)); }
.ui-border-info { border: 1px solid var(--color-primary-500, var(--color-primary-500)); }
.ui-border-primary { border: 1px solid var(--color-primary-500, var(--color-primary-500)); }
.dark .ui-border-warning { border: 1px solid var(--color-warning-400, var(--color-warning-400)); }
.dark .ui-border-danger { border: 1px solid var(--color-danger-400, var(--color-danger-400)); }
.dark .ui-border-success { border: 1px solid var(--color-success-400, var(--color-success-400)); }
.dark .ui-border-info { border: 1px solid var(--color-primary-400, var(--color-primary-400)); }
.dark .ui-border-primary { border: 1px solid var(--color-primary-400, var(--color-primary-400)); }
/* Background color semantic variants */
.ui-bg-info { background-color: var(--color-primary-600, var(--color-primary-600)); }
.dark .ui-bg-info { background-color: var(--color-primary-500, var(--color-primary-500)); }
.ui-bg-info-light { background-color: var(--color-primary-50, #eff6ff); }
.dark .ui-bg-info-light { background-color: rgba(59, 130, 246, 0.1); }
.ui-bg-primary-light { background-color: var(--color-primary-50, #eff6ff); }
.dark .ui-bg-primary-light { background-color: rgba(59, 130, 246, 0.1); }
.ui-bg-success-light { background-color: var(--color-success-50, #f0fdf4); }
.dark .ui-bg-success-light { background-color: rgba(34, 197, 94, 0.1); }
.ui-bg-warning-light { background-color: var(--color-warning-50, #fffbeb); }
.dark .ui-bg-warning-light { background-color: rgba(245, 158, 11, 0.1); }
.ui-bg-danger-light { background-color: var(--color-danger-50, #fef2f2); }
.dark .ui-bg-danger-light { background-color: rgba(239, 68, 68, 0.1); }
/* Hover border primary — interactive card borders */
.ui-hover-border-primary {
border: 1px solid var(--color-border);
}
.ui-hover-border-primary:hover {
border-color: var(--color-primary-500);
}
.dark .ui-hover-border-primary {
border-color: var(--color-gray-700);
}
.dark .ui-hover-border-primary:hover {
border-color: var(--color-primary-400);
}
/* Border primary */
.ui-border-primary { border: 1px solid var(--color-primary-500); }
.dark .ui-border-primary { border-color: var(--color-primary-400); }
/* Shadow utilities */
.ui-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.ui-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.ui-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.ui-shadow-none { box-shadow: none; }
/* Disabled button state */
.ui-btn-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================
BACKGROUND UTILITIES
============================================ */
.ui-bg-primary { background-color: var(--color-bg-primary); }
.ui-bg-secondary { background-color: var(--color-bg-secondary); }
.ui-bg-card { background-color: var(--color-bg-card); }
.ui-bg-hover { background-color: var(--color-bg-hover); }
.ui-bg-subtle { background-color: var(--color-bg-subtle); }
.ui-bg-progress-track { background-color: var(--color-gray-200); }
.dark .ui-bg-progress-track { background-color: var(--color-gray-600); }
/* Semantic background utilities */
.ui-bg-success { background-color: var(--color-success-500); }
.ui-bg-warning { background-color: var(--color-warning-500); }
.ui-bg-danger { background-color: var(--color-danger-500); }
.dark .ui-bg-success { background-color: var(--color-success-600); }
.dark .ui-bg-warning { background-color: var(--color-warning-600); }
.dark .ui-bg-danger { background-color: var(--color-danger-600); }
/* Background pink — for plugin category indicators */
.ui-bg-pink { background-color: var(--color-primary-500, var(--color-primary-500)); }
.dark .ui-bg-pink { background-color: var(--color-primary-400, var(--color-primary-400)); }
/* Text cyan stat — for stat card values */
.ui-text-cyan-stat { color: var(--color-info-500); }
.dark .ui-text-cyan-stat { color: var(--color-info-400); }
/* Gradient hero background — hero sections com gradiente primário vibrante */
.ui-bg-gradient-hero {
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
}
.dark .ui-bg-gradient-hero {
background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
}
/* Gradient muted background — card containers com fundo sutil */
.ui-bg-gradient-muted {
background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}
.dark .ui-bg-gradient-muted {
background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
}
/* Health card indicator backgrounds (Infraestrutura) */
.ui-health-card-green {
background-color: var(--color-success-100);
}
.dark .ui-health-card-green {
background-color: rgba(34, 197, 94, 0.15);
}
.ui-health-card-yellow {
background-color: var(--color-warning-100);
}
.dark .ui-health-card-yellow {
background-color: rgba(245, 158, 11, 0.15);
}
.ui-health-card-red {
background-color: var(--color-danger-100);
}
.dark .ui-health-card-red {
background-color: rgba(239, 68, 68, 0.15);
}
/* Stat card colored backgrounds — for hero/KPI cards with white text */
.ui-stat-card-info {
background: linear-gradient(135deg, var(--color-info-500, var(--color-info-500)) 0%, var(--color-info-600, var(--color-info-600)) 100%);
}
.dark .ui-stat-card-info {
background: linear-gradient(135deg, var(--color-info-600, var(--color-info-600)) 0%, var(--color-info-700, var(--color-info-700)) 100%);
}
.ui-stat-card-purple {
background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
}
.dark .ui-stat-card-purple {
background: linear-gradient(135deg, var(--color-accent-600) 0%, var(--color-accent-700) 100%);
}
.ui-stat-card-success {
background: linear-gradient(135deg, var(--color-success-500, var(--color-success-500)) 0%, var(--color-success-600, var(--color-success-600)) 100%);
}
.dark .ui-stat-card-success {
background: linear-gradient(135deg, var(--color-success-600, var(--color-success-600)) 0%, var(--color-success-700, var(--color-success-700)) 100%);
}
.ui-stat-card-warning {
background: linear-gradient(135deg, var(--color-warning-500, var(--color-warning-500)) 0%, var(--color-warning-600, var(--color-warning-700)) 100%);
}
.dark .ui-stat-card-warning {
background: linear-gradient(135deg, var(--color-warning-600, var(--color-warning-700)) 0%, var(--color-warning-700, var(--color-warning-700)) 100%);
}
.ui-stat-card-primary {
background: linear-gradient(135deg, var(--color-primary-500, var(--color-primary-500)) 0%, var(--color-primary-600, #db2777) 100%);
}
.dark .ui-stat-card-primary {
background: linear-gradient(135deg, var(--color-primary-600, #db2777) 0%, var(--color-primary-700, var(--color-primary-700)) 100%);
}
.ui-stat-card-danger {
background: linear-gradient(135deg, var(--color-danger-500, var(--color-danger-500)) 0%, var(--color-danger-600, var(--color-danger-600)) 100%);
}
.dark .ui-stat-card-danger {
background: linear-gradient(135deg, var(--color-danger-600, var(--color-danger-600)) 0%, var(--color-danger-700, var(--color-danger-700)) 100%);
}
/* Light text variants — for use on colored backgrounds */
.ui-text-info-light { color: rgba(255, 255, 255, 0.85); }
.ui-text-purple-light { color: rgba(255, 255, 255, 0.85); }
.ui-text-success-light { color: rgba(255, 255, 255, 0.85); }
.ui-text-warning-light { color: rgba(255, 255, 255, 0.85); }
.ui-text-white-muted { color: rgba(255, 255, 255, 0.7); }
/* ============================================
MISSING SEMANTIC BACKGROUNDS — gradient, muted, subtle variants
============================================ */
.ui-bg-gradient-primary {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
}
.dark .ui-bg-gradient-primary {
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
}
.ui-bg-gradient-info {
background: linear-gradient(135deg, var(--color-info-500, var(--color-info-500)) 0%, var(--color-info-700, var(--color-info-700)) 100%);
}
.dark .ui-bg-gradient-info {
background: linear-gradient(135deg, var(--color-info-600, var(--color-info-600)) 0%, var(--color-info-800, #155e75) 100%);
}
.ui-bg-gradient-danger {
background: linear-gradient(135deg, var(--color-danger-500) 0%, var(--color-danger-700) 100%);
}
.dark .ui-bg-gradient-danger {
background: linear-gradient(135deg, var(--color-danger-600) 0%, var(--color-danger-800) 100%);
}
.ui-bg-gradient-danger-solid {
background: var(--color-danger-600);
}
.dark .ui-bg-gradient-danger-solid {
background: var(--color-danger-700);
}
.ui-bg-gradient-purple {
background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-700) 100%);
}
.dark .ui-bg-gradient-purple {
background: linear-gradient(135deg, var(--color-accent-600) 0%, #5b21b6 100%);
}
.ui-bg-gradient-warning {
background: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-700) 100%);
}
.dark .ui-bg-gradient-warning {
background: linear-gradient(135deg, var(--color-warning-600) 0%, var(--color-warning-800) 100%);
}
.ui-bg-gradient-subtle {
background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
}
.dark .ui-bg-gradient-subtle {
background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
}
/* Muted/Soft/Subtle background variants */
.ui-bg-danger-dark { background-color: var(--color-danger-700); }
.dark .ui-bg-danger-dark { background-color: var(--color-danger-800); }
.ui-bg-danger-muted { background-color: var(--color-danger-100); }
.dark .ui-bg-danger-muted { background-color: rgba(239, 68, 68, 0.15); }
.ui-bg-danger-soft { background-color: var(--color-danger-50); }
.dark .ui-bg-danger-soft { background-color: rgba(239, 68, 68, 0.08); }
.ui-bg-danger-subtle { background-color: rgba(239, 68, 68, 0.06); }
.dark .ui-bg-danger-subtle { background-color: rgba(239, 68, 68, 0.06); }
.ui-bg-info-muted { background-color: var(--color-primary-100, var(--color-primary-100)); }
.dark .ui-bg-info-muted { background-color: rgba(59, 130, 246, 0.15); }
.ui-bg-info-soft { background-color: var(--color-primary-50, #eff6ff); }
.dark .ui-bg-info-soft { background-color: rgba(59, 130, 246, 0.08); }
.ui-bg-info-solid { background-color: var(--color-primary-600, var(--color-primary-600)); }
.dark .ui-bg-info-solid { background-color: var(--color-primary-500, var(--color-primary-500)); }
.ui-bg-info-subtle { background-color: rgba(59, 130, 246, 0.06); }
.dark .ui-bg-info-subtle { background-color: rgba(59, 130, 246, 0.06); }
.ui-bg-success-muted { background-color: var(--color-success-100); }
.dark .ui-bg-success-muted { background-color: rgba(34, 197, 94, 0.15); }
.ui-bg-success-subtle { background-color: rgba(34, 197, 94, 0.06); }
.dark .ui-bg-success-subtle { background-color: rgba(34, 197, 94, 0.06); }
.ui-bg-warning-muted { background-color: var(--color-warning-100); }
.dark .ui-bg-warning-muted { background-color: rgba(245, 158, 11, 0.15); }
.ui-bg-warning-soft { background-color: var(--color-warning-50); }
.dark .ui-bg-warning-soft { background-color: rgba(245, 158, 11, 0.08); }
.ui-bg-warning-subtle { background-color: rgba(245, 158, 11, 0.06); }
.dark .ui-bg-warning-subtle { background-color: rgba(245, 158, 11, 0.06); }
.ui-bg-purple-subtle { background-color: rgba(139, 92, 246, 0.06); }
.dark .ui-bg-purple-subtle { background-color: rgba(139, 92, 246, 0.06); }
.ui-bg-primary-dark { background-color: var(--color-primary-700); }
.dark .ui-bg-primary-dark { background-color: var(--color-primary-800); }
.ui-bg-primary-medium { background-color: var(--color-primary-500); }
.dark .ui-bg-primary-medium { background-color: var(--color-primary-600); }
.ui-bg-primary-subtle { background-color: rgba(236, 72, 153, 0.06); }
.dark .ui-bg-primary-subtle { background-color: rgba(236, 72, 153, 0.06); }
.ui-bg-yellow-light { background-color: var(--color-warning-100); }
.dark .ui-bg-yellow-light { background-color: rgba(234, 179, 8, 0.1); }
.ui-bg-accent-subtle { background-color: rgba(139, 92, 246, 0.06); }
.dark .ui-bg-accent-subtle { background-color: rgba(139, 92, 246, 0.06); }
/* ============================================
MISSING TEXT COLOR VARIANTS
============================================ */
.ui-text-white { color: var(--color-white); }
.ui-text-inverse { color: var(--color-white, var(--color-white)); }
.dark .ui-text-inverse { color: var(--color-gray-900, #111827); }
.ui-text-on-primary { color: var(--color-white); }
.ui-text-fuchsia { color: var(--color-accent-500); }
.dark .ui-text-fuchsia { color: var(--color-accent-400); }
.ui-text-lime { color: var(--color-success-700); }
.dark .ui-text-lime { color: var(--color-success-500); }
.ui-text-orange { color: var(--color-warning-600); }
.dark .ui-text-orange { color: var(--color-warning-500); }
.ui-text-rose { color: var(--color-danger-600); }
.dark .ui-text-rose { color: var(--color-danger-400); }
.ui-text-sky { color: var(--color-info-600); }
.dark .ui-text-sky { color: var(--color-info-400); }
.ui-text-slate { color: var(--color-slate-600); }
.dark .ui-text-slate { color: var(--color-slate-400); }
.ui-text-stone { color: var(--color-gray-500); }
.dark .ui-text-stone { color: var(--color-gray-400); }
.ui-text-teal { color: var(--color-info-600); }
.dark .ui-text-teal { color: var(--color-info-400); }
.ui-text-zinc { color: var(--color-gray-600); }
.dark .ui-text-zinc { color: var(--color-gray-400); }
/* Specialized text color variants — compound names for semantic contexts */
.ui-text-amber-title { color: var(--color-warning-700); }
.dark .ui-text-amber-title { color: var(--color-warning-400); }
.ui-text-cyan-secondary { color: var(--color-info-700); }
.dark .ui-text-cyan-secondary { color: var(--color-info-300); }
.ui-text-indigo-secondary { color: var(--color-primary-700); }
.dark .ui-text-indigo-secondary { color: var(--color-primary-300); }
.ui-text-indigo-stat { color: var(--color-primary-600); }
.dark .ui-text-indigo-stat { color: var(--color-primary-400); }
.ui-text-pink-secondary { color: var(--color-primary-700); }
.dark .ui-text-pink-secondary { color: var(--color-primary-300); }
.ui-text-pink-stat { color: var(--color-primary-500); }
.dark .ui-text-pink-stat { color: var(--color-primary-400); }
.ui-text-purple-content { color: var(--color-accent-600); }
.dark .ui-text-purple-content { color: var(--color-accent-300); }
.ui-text-purple-title { color: var(--color-accent-700); }
.dark .ui-text-purple-title { color: var(--color-accent-400); }
/* Misc semantic backgrounds */
.ui-bg-title { background-color: var(--color-gray-700); }
.dark .ui-bg-title { background-color: var(--color-gray-500); }
.ui-bg-terminal { background-color: var(--color-slate-900); color: #cdd6f4; }
.dark .ui-bg-terminal { background-color: var(--color-slate-950); }
/* Table alignment helpers */
.ui-data-table-td-center { text-align: center; }
.ui-data-table-td-right { text-align: right; }
.ui-data-table-td-muted { color: var(--color-text-muted); font-size: 0.8125rem; }
.ui-data-table-th-center { text-align: center; }
.ui-data-table-th-right { text-align: right; }
.ui-data-table-body { }
.ui-data-table-row { }
.ui-data-table-row:hover { background-color: var(--color-bg-hover); }
/* Badge variants — status-specific */
.ui-badge-muted { background-color: var(--color-gray-100); color: var(--color-gray-600); }
.dark .ui-badge-muted { background-color: var(--color-gray-800); color: var(--color-gray-400); }
.ui-badge-overdue { background-color: var(--color-danger-100); color: var(--color-danger-700); }
.dark .ui-badge-overdue { background-color: rgba(239, 68, 68, 0.15); color: var(--color-danger-400); }
.ui-badge-refunded { background-color: var(--color-warning-100); color: var(--color-warning-700); }
.dark .ui-badge-refunded { background-color: rgba(245, 158, 11, 0.15); color: var(--color-warning-400); }
.ui-badge-rounded { border-radius: 9999px; }
/* Border divider/purple */
.ui-border-divider { border-color: var(--color-border); }
.ui-border-purple { border: 1px solid var(--color-accent-500); }
.dark .ui-border-purple { border: 1px solid var(--color-accent-400); }
/* Code blocks */
.ui-code { font-family: ui-monospace, monospace; font-size: 0.8125rem; background: var(--color-gray-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem; }
.dark .ui-code { background: var(--color-gray-800); }
.ui-code-block { font-family: ui-monospace, monospace; font-size: 0.8125rem; background: var(--color-gray-50); padding: 0.75rem 1rem; border-radius: 0.5rem; overflow-x: auto; border: 1px solid var(--color-border); }
.dark .ui-code-block { background: var(--color-gray-900); }
/* Category icon backgrounds — light colored circles for icon containers */
.ui-category-icon-amber { background-color: rgba(245, 158, 11, 0.12); }
.dark .ui-category-icon-amber { background-color: rgba(245, 158, 11, 0.15); }
.ui-category-icon-blue { background-color: rgba(59, 130, 246, 0.12); }
.dark .ui-category-icon-blue { background-color: rgba(59, 130, 246, 0.15); }
.ui-category-icon-cyan { background-color: rgba(6, 182, 212, 0.12); }
.dark .ui-category-icon-cyan { background-color: rgba(6, 182, 212, 0.15); }
.ui-category-icon-indigo { background-color: rgba(99, 102, 241, 0.12); }
.dark .ui-category-icon-indigo { background-color: rgba(99, 102, 241, 0.15); }
.ui-category-icon-orange { background-color: rgba(249, 115, 22, 0.12); }
.dark .ui-category-icon-orange { background-color: rgba(249, 115, 22, 0.15); }
.ui-category-icon-pink { background-color: rgba(236, 72, 153, 0.12); }
.dark .ui-category-icon-pink { background-color: rgba(236, 72, 153, 0.15); }
.ui-category-icon-purple { background-color: rgba(139, 92, 246, 0.12); }
.dark .ui-category-icon-purple { background-color: rgba(139, 92, 246, 0.15); }
.ui-category-icon-red { background-color: rgba(239, 68, 68, 0.12); }
.dark .ui-category-icon-red { background-color: rgba(239, 68, 68, 0.15); }
.ui-category-icon-slate { background-color: rgba(100, 116, 139, 0.12); }
.dark .ui-category-icon-slate { background-color: rgba(100, 116, 139, 0.15); }
.ui-category-icon-teal { background-color: rgba(20, 184, 166, 0.12); }
.dark .ui-category-icon-teal { background-color: rgba(20, 184, 166, 0.15); }
/* Channel badge backgrounds */
.ui-channel-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.ui-channel-badge-amber { background-color: rgba(245, 158, 11, 0.12); color: var(--color-warning-700); }
.dark .ui-channel-badge-amber { background-color: rgba(245, 158, 11, 0.15); color: var(--color-warning-400); }
.ui-channel-badge-blue { background-color: rgba(59, 130, 246, 0.12); color: var(--color-primary-600); }
.dark .ui-channel-badge-blue { background-color: rgba(59, 130, 246, 0.15); color: var(--color-primary-400); }
.ui-channel-badge-emerald { background-color: rgba(16, 185, 129, 0.12); color: var(--color-success-600); }
.dark .ui-channel-badge-emerald { background-color: rgba(16, 185, 129, 0.15); color: var(--color-success-400); }
.ui-channel-badge-green { background-color: rgba(34, 197, 94, 0.12); color: var(--color-success-600); }
.dark .ui-channel-badge-green { background-color: rgba(34, 197, 94, 0.15); color: var(--color-success-400); }
.ui-channel-badge-slate { background-color: rgba(100, 116, 139, 0.12); color: var(--color-slate-600); }
.dark .ui-channel-badge-slate { background-color: rgba(100, 116, 139, 0.15); color: var(--color-slate-400); }
.ui-channel-badge-violet { background-color: rgba(139, 92, 246, 0.12); color: var(--color-accent-600); }
.dark .ui-channel-badge-violet { background-color: rgba(139, 92, 246, 0.15); color: var(--color-accent-400); }
/* Animation */
.ui-animate-spin { animation: ui-spin 1s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
/* Focus ring */
.ui-focus-ring:focus { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.dark .ui-focus-ring:focus { outline-color: var(--color-primary-400); }
/* Flex shrink */
.ui-flex-shrink-0 { flex-shrink: 0; }
/* Checkbox inline */
.ui-checkbox-inline { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Alert text variants */
.ui-alert-info-text { color: var(--color-primary-700); }
.dark .ui-alert-info-text { color: var(--color-primary-300); }
.ui-alert-warning-text { color: var(--color-warning-700); }
.dark .ui-alert-warning-text { color: var(--color-warning-300); }
/* Spacing ui-mt-* / ui-mb-* → definidos em design-tokens.css com !important */
/* ============================================
FLEX UTILITIES
============================================ */
.ui-flex { display: flex; }
.ui-inline-flex { display: inline-flex; }
.ui-block { display: block; }
.ui-inline-block { display: inline-block; }
.ui-hidden { display: none; }
.ui-flex-col { flex-direction: column; }
.ui-flex-row { flex-direction: row; }
.ui-flex-wrap { flex-wrap: wrap; }
.ui-flex-1 { flex: 1 1 0%; }
.ui-shrink-0 { flex-shrink: 0; }
.ui-items-center { align-items: center; }
.ui-items-start { align-items: flex-start; }
.ui-items-end { align-items: flex-end; }
.ui-justify-between { justify-content: space-between; }
.ui-justify-center { justify-content: center; }
.ui-justify-end { justify-content: flex-end; }
/* Position */
.ui-relative { position: relative; }
.ui-absolute { position: absolute; }
/* Overflow */
.ui-overflow-hidden { overflow: hidden; }
.ui-overflow-x-auto { overflow-x: auto; }
/* Misc utilities */
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-whitespace-nowrap { white-space: nowrap; }
.ui-cursor-pointer { cursor: pointer; }
.ui-min-w-0 { min-width: 0; }
.ui-w-full { width: 100%; }
.ui-h-full { height: 100%; }
/* ui-gap-* → definidos na seção Spacing System abaixo */
/* Flex Combinations (padrões mais usados) */
.ui-flex-row-center {
display: flex;
align-items: center;
}
/* ============================================
GRID UTILITIES
============================================ */
.ui-grid { display: grid; }
.ui-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
/* mobile-first: 1 coluna por padrão, expande em telas maiores */
.ui-grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
.ui-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ui-grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
.ui-grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.ui-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ui-grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
.ui-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.ui-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ui-grid-cols-5 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ui-grid-cols-6 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ui-grid-cols-7 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 480px) {
.ui-grid-cols-5,
.ui-grid-cols-6,
.ui-grid-cols-7 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.ui-grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-cols-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.ui-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ui-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
.ui-sm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-sm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.ui-md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-md-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-md-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.ui-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ui-lg-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ui-lg-col-span-2 { grid-column: span 2 / span 2; }
.ui-lg-col-span-3 { grid-column: span 3 / span 3; }
.ui-lg-order-first { order: -1; }
.ui-lg-order-last { order: 9999; }
}
@media (min-width: 1280px) {
.ui-xl-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-xl-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ui-xl-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
/* ============================================
VISIBILITY UTILITIES
============================================ */
.ui-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;
}
/* ============================================
SIZING UTILITIES
============================================ */
.ui-pattern-container {
position: relative;
width: 240px;
height: 240px;
}
/* ============================================
BORDER RADIUS UTILITIES
============================================ */
.ui-rounded-card {
border-radius: var(--card-border-radius, 1rem);
}
.ui-rounded-sm {
border-radius: var(--radius-sm, 0.25rem);
}
.ui-rounded-md {
border-radius: var(--radius-md, 0.375rem);
}
.ui-rounded-lg {
border-radius: var(--radius-lg, 0.5rem);
}
.ui-rounded-xl {
border-radius: var(--radius-xl, 0.75rem);
}
.ui-rounded-full {
border-radius: var(--radius-full, 9999px);
}
/* Directional rounding */
.ui-rounded-t { border-top-left-radius: var(--radius-md, 0.375rem); border-top-right-radius: var(--radius-md, 0.375rem); }
.ui-rounded-b { border-bottom-left-radius: var(--radius-md, 0.375rem); border-bottom-right-radius: var(--radius-md, 0.375rem); }
.ui-rounded-l { border-top-left-radius: var(--radius-md, 0.375rem); border-bottom-left-radius: var(--radius-md, 0.375rem); }
.ui-rounded-r { border-top-right-radius: var(--radius-md, 0.375rem); border-bottom-right-radius: var(--radius-md, 0.375rem); }
/* ============================================
SIZE UTILITIES — ui-w-* / ui-h-*
Equivalentes às classes Tailwind w-* / h-*
============================================ */
.ui-w-1 { width: 0.25rem; }
.ui-w-2 { width: 0.5rem; }
.ui-w-3 { width: 0.75rem; }
.ui-w-4 { width: 1rem; }
.ui-w-5 { width: 1.25rem; }
.ui-w-6 { width: 1.5rem; }
.ui-w-7 { width: 1.75rem; }
.ui-w-8 { width: 2rem; }
.ui-w-9 { width: 2.25rem; }
.ui-w-10 { width: 2.5rem; }
.ui-w-11 { width: 2.75rem; }
.ui-w-12 { width: 3rem; }
.ui-w-14 { width: 3.5rem; }
.ui-w-16 { width: 4rem; }
.ui-w-20 { width: 5rem; }
.ui-w-24 { width: 6rem; }
.ui-w-32 { width: 8rem; }
.ui-w-48 { width: 12rem; }
.ui-w-64 { width: 16rem; }
.ui-h-1 { height: 0.25rem; }
.ui-h-2 { height: 0.5rem; }
.ui-h-3 { height: 0.75rem; }
.ui-h-4 { height: 1rem; }
.ui-h-5 { height: 1.25rem; }
.ui-h-6 { height: 1.5rem; }
.ui-h-7 { height: 1.75rem; }
.ui-h-8 { height: 2rem; }
.ui-h-9 { height: 2.25rem; }
.ui-h-10 { height: 2.5rem; }
.ui-h-11 { height: 2.75rem; }
.ui-h-12 { height: 3rem; }
.ui-h-14 { height: 3.5rem; }
.ui-h-16 { height: 4rem; }
.ui-h-20 { height: 5rem; }
.ui-h-24 { height: 6rem; }
.ui-h-32 { height: 8rem; }
.ui-h-64 { height: 16rem; }
.ui-h-72 { height: 18rem; }
/* ============================================
DIVIDER UTILITIES
============================================ */
.ui-card-header-divider {
border-bottom: 1px solid var(--color-gray-200);
}
.dark .ui-card-header-divider {
border-bottom-color: var(--color-gray-700);
}
/* ============================================
TRANSITION UTILITIES
============================================ */
.ui-transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
/* ============================================
STAT CARDS - .ui-stat-card
Cards de estatísticas — usa tokens semânticos
============================================ */
.ui-stat-card {
background-color: var(--color-bg-card);
background-image: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg, 0.5rem);
padding: 1.25rem 1.5rem;
position: relative;
overflow: hidden;
color: var(--color-text-primary);
}
.dark .ui-stat-card {
background-color: var(--color-bg-card) !important;
background-image: none !important;
border-color: var(--color-border) !important;
color: var(--color-text-primary) !important;
}
.ui-stat-card-title,
.ui-stat-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-gray-500, #6b7280);
margin-bottom: 0.25rem;
display: block;
}
@media (min-width: 768px) {
.ui-stat-card-title,
.ui-stat-label {
font-size: var(--font-size-sm);
}
}
.dark .ui-stat-card-title,
.dark .ui-stat-label {
color: var(--color-gray-400, #9ca3af);
}
.ui-stat-card-value,
.ui-stat-value {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-gray-900, #0f0f22);
display: block;
}
@media (min-width: 768px) {
.ui-stat-card-value,
.ui-stat-value {
font-size: var(--font-size-2xl);
}
}
.dark .ui-stat-card-value,
.dark .ui-stat-value {
color: var(--color-gray-100, var(--color-gray-100));
}
.ui-stat-card-footer {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-gray-100, var(--color-gray-100));
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.375rem;
}
.ui-stat-card-footer > :last-child:not(:first-child) {
margin-left: auto;
}
.dark .ui-stat-card-footer {
color: var(--color-gray-400, #9ca3af);
border-top-color: var(--color-gray-700, #2a2a4e);
}
/* TYPOGRAPHY — definições canônicas na seção Text Colors/Sizes acima */
/* Font weight e line-height utilities */
.ui-font-normal { font-weight: 400; }
.ui-font-medium { font-weight: 500; }
.ui-font-semibold { font-weight: 600; }
.ui-font-bold { font-weight: 700; }
.ui-leading-none { line-height: 1; }
.ui-leading-tight { line-height: 1.25; }
.ui-leading-normal { line-height: 1.5; }
.ui-leading-relaxed { line-height: 1.625; }
.ui-tracking-tight { letter-spacing: -0.025em; }
.ui-tracking-normal { letter-spacing: 0; }
.ui-tracking-wide { letter-spacing: 0.025em; }
/* ============================================
TOAST/NOTIFICATION - .ui-toast
============================================ */
.ui-toast-container {
position: fixed;
z-index: var(--z-max);
pointer-events: none;
padding: 1rem;
}
.ui-toast-container-top-right {
top: 0;
right: 0;
}
.ui-toast-container-top-left {
top: 0;
left: 0;
}
.ui-toast-container-bottom-right {
bottom: 0;
right: 0;
}
.ui-toast-container-bottom-left {
bottom: 0;
left: 0;
}
.ui-toast-container-top-center {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.ui-toast {
display: flex;
align-items: flex-start;
gap: 0.75rem;
min-width: 300px;
max-width: 400px;
padding: 1rem;
margin-bottom: 0.75rem;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
pointer-events: auto;
animation: ui-toast-slide-in 0.3s ease;
}
@keyframes ui-toast-slide-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ui-toast-icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.ui-toast-content {
flex: 1;
min-width: 0;
}
.ui-toast-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.25rem;
}
.ui-toast-message {
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.ui-toast-close {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--color-gray-400);
cursor: pointer;
}
.ui-toast-close:hover {
background-color: var(--color-gray-100);
color: var(--color-gray-600);
}
/* Toast Variants */
.ui-toast-success {
border-left: 4px solid var(--color-success-500);
}
.ui-toast-success .ui-toast-icon {
background-color: var(--color-success-100);
color: var(--color-success-600);
}
.ui-toast-error,
.ui-toast-danger {
border-left: 4px solid var(--color-danger-500);
}
.ui-toast-error .ui-toast-icon,
.ui-toast-danger .ui-toast-icon {
background-color: var(--color-danger-100);
color: var(--color-danger-600);
}
.ui-toast-warning {
border-left: 4px solid var(--color-warning-500);
}
.ui-toast-warning .ui-toast-icon {
background-color: var(--color-warning-100);
color: var(--color-warning-600);
}
.ui-toast-info {
border-left: 4px solid var(--color-info-500);
}
.ui-toast-info .ui-toast-icon {
background-color: var(--color-info-100);
color: var(--color-info-600);
}
.dark .ui-toast {
background-color: var(--color-gray-800);
border-color: var(--color-gray-700);
}
.dark .ui-toast-close:hover {
background-color: var(--color-gray-700);
color: var(--color-gray-300);
}
.dark .ui-toast-success .ui-toast-icon {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-400);
}
.dark .ui-toast-error .ui-toast-icon,
.dark .ui-toast-danger .ui-toast-icon {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-400);
}
.dark .ui-toast-warning .ui-toast-icon {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-400);
}
.dark .ui-toast-info .ui-toast-icon {
background-color: rgba(6, 182, 212, 0.2);
color: var(--color-info-400);
}
/* ============================================
INPUT GROUP - Input com ícone
============================================ */
.ui-input-group {
position: relative;
display: flex;
align-items: center;
}
.ui-input-group .ui-input {
padding-left: 2.5rem;
}
.ui-input-group .ui-input-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-gray-400);
pointer-events: none;
z-index: 1;
}
.ui-input-group-right .ui-input {
padding-left: 0.75rem;
padding-right: 2.5rem;
}
.ui-input-group-right .ui-input-icon {
left: auto;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
}
/* Input com addon (prefix/suffix) */
.ui-input-addon {
display: flex;
align-items: center;
padding: 0 0.75rem;
height: var(--input-height-md);
background-color: var(--color-gray-100);
border: 1px solid var(--color-gray-300);
color: var(--color-gray-600);
font-size: 0.875rem;
}
.ui-input-addon-left {
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ui-input-addon-right {
border-left: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ui-input-addon + .ui-input {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ui-input + .ui-input-addon {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ui-input-addon + .ui-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.dark .ui-input-addon {
background-color: var(--color-gray-700);
border-color: var(--color-gray-600);
color: var(--color-gray-400);
}
/* Form input with icon (used in security.php etc.) */
/* Utilities width */
.ui-w-auto { width: auto; }
/* Padding utilities → definidos na seção Spacing System */
.ui-pt-3 { padding-top: 0.75rem; }
.ui-pb-3 { padding-bottom: 0.75rem; }
/* Border utilities */
.ui-border-t { border-top: 1px solid var(--color-border); }
.ui-border-b { border-bottom: 1px solid var(--color-border); }
/* Divide utilities */
.ui-divide-default > * + * { border-top: 1px solid var(--color-border); }
/* Space utilities */
.ui-space-y-0 > * + * { margin-top: 0; }
.ui-space-y-1 > * + * { margin-top: 0.25rem; }
.ui-space-y-2 > * + * { margin-top: 0.5rem; }
.ui-space-y-3 > * + * { margin-top: 0.75rem; }
.ui-space-y-4 > * + * { margin-top: 1rem; }
.ui-space-y-5 > * + * { margin-top: 1.25rem; }
.ui-space-y-6 > * + * { margin-top: 1.5rem; }
.ui-space-y-8 > * + * { margin-top: 2rem; }
.ui-space-y-10 > * + * { margin-top: 2.5rem; }
/* Overflow */
.ui-overflow-auto { overflow: auto; }
/* Table wrapper: card with rounded corners + horizontal scroll for responsiveness */
.ui-table-wrapper {
overflow-x: auto;
}
/* Card wrapper pattern for tables: the card clips border-radius, inner div scrolls */
.ui-card-table > .ui-table-wrapper,
.ui-card > .ui-table-wrapper {
border-radius: inherit;
}
/* Input with icon utility — override .ui-input padding for icon space.
Tailwind's pl-*/pr-* are overridden by .ui-input because custom CSS loads
after tailwind.css. These compound selectors (.ui-input.pl-10) have higher
specificity (0-2-0) and restore the correct padding. */
.ui-input-icon-left,
.ui-input.pl-10 { padding-left: 2.5rem; }
.ui-input.pl-9 { padding-left: 2.25rem; }
.ui-input.pl-8 { padding-left: 2rem; }
.ui-input-icon-right,
.ui-input.pr-10 { padding-right: 2.5rem; }
.ui-input.pr-9 { padding-right: 2.25rem; }
.ui-input.pr-8 { padding-right: 2rem; }
.ui-input-icon-both { padding-left: 2.5rem; padding-right: 2.5rem; }
/* Icon sizes */
.ui-icon-xs { font-size: 0.75rem; }
.ui-icon-sm { font-size: 0.875rem; }
.ui-icon-md { font-size: 1rem; }
.ui-icon-lg { font-size: 1.25rem; }
.ui-icon-xl { font-size: 1.5rem; }
/* Text colors */
.ui-text-red { color: var(--color-danger-500); }
.ui-text-green { color: var(--color-success-500); }
.ui-text-yellow { color: var(--color-warning-500); }
.ui-text-blue { color: var(--color-primary-500); }
.dark .ui-text-red { color: var(--color-danger-400); }
.dark .ui-text-green { color: var(--color-success-400); }
.dark .ui-text-yellow { color: var(--color-warning-400); }
.dark .ui-text-blue { color: var(--color-primary-400); }
/* Status indicators */
.ui-status-active,
.ui-status-inactive {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
}
.ui-status-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
.ui-status-dot-green { background-color: var(--color-success-500); }
.ui-status-dot-gray { background-color: var(--color-gray-400); }
.ui-status-dot-red { background-color: var(--color-danger-500); }
.ui-status-dot-yellow { background-color: var(--color-warning-500); }
.dark .ui-status-dot-green { background-color: var(--color-success-400); }
.dark .ui-status-dot-gray { background-color: var(--color-gray-500); }
.dark .ui-status-dot-red { background-color: var(--color-danger-400); }
.dark .ui-status-dot-yellow { background-color: var(--color-warning-400); }
/* Gateway logo */
.ui-gateway-logo {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: white;
border-radius: var(--radius-lg);
background-color: var(--color-primary-600);
}
.ui-gateway-logo-blue { background-color: var(--color-primary-600); }
.ui-gateway-logo-orange { background-color: var(--color-orange-500); }
.ui-gateway-logo-cyan { background-color: var(--color-info-600); }
.ui-gateway-logo-purple { background-color: var(--color-purple-600); }
.ui-gateway-logo-green { background-color: var(--color-success-600); }
.ui-gateway-logo-slate { background-color: var(--color-slate-600); }
/* Method tag */
.ui-method-tag {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.375rem;
font-size: 0.625rem;
font-weight: 500;
color: var(--color-gray-600);
background-color: var(--color-gray-100);
border-radius: var(--radius-sm);
}
.dark .ui-method-tag {
color: var(--color-gray-300);
background-color: var(--color-gray-700);
}
/* Expandable card */
.ui-card-expandable-header {
padding: 1rem;
cursor: pointer;
transition: background-color 0.15s ease;
}
.ui-card-expandable-header:hover {
background-color: var(--color-gray-50);
}
.dark .ui-card-expandable-header:hover {
background-color: var(--color-gray-800);
}
.ui-card-expandable-body {
border-top: 1px solid var(--color-border);
}
/* Chevron rotation */
.ui-chevron {
transition: transform 0.2s ease;
color: var(--color-gray-400);
}
.ui-chevron.rotated {
transform: rotate(180deg);
}
/* Section header */
.ui-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Text title (para dark mode) */
.ui-text-title {
color: var(--color-text-primary);
}
/* Alert info box (custom) */
.ui-alert-info {
display: flex;
gap: 0.75rem;
padding: 1rem;
background-color: var(--color-info-50);
border: 1px solid var(--color-info-200);
border-radius: var(--radius-lg);
color: var(--color-info-800);
}
.ui-alert-info .ui-alert-icon {
color: var(--color-info-500);
}
.dark .ui-alert-info {
background-color: rgba(6, 182, 212, 0.1);
border-color: rgba(6, 182, 212, 0.2);
color: var(--color-info-300);
}
.ui-alert-info-icon {
color: var(--color-info-500);
flex-shrink: 0;
}
.ui-alert-info-title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.ui-alert-info-code {
display: block;
margin-top: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-family: monospace;
background-color: var(--color-info-100);
border-radius: var(--radius-md);
word-break: break-all;
}
.dark .ui-alert-info-code {
background-color: rgba(6, 182, 212, 0.15);
}
/* ============================================
ACCORDION - Acordeões Padronizados
============================================ */
.ui-accordion {
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.dark .ui-accordion {
border-color: var(--color-gray-700);
}
.ui-accordion-item {
border-bottom: 1px solid var(--color-gray-200);
}
.dark .ui-accordion-item {
border-color: var(--color-gray-700);
}
.ui-accordion-item:last-child {
border-bottom: none;
}
.ui-accordion-header {
display: flex;
align-items: center;
width: 100%;
padding: 1rem 1.25rem;
text-align: left;
background-color: transparent;
border: none;
cursor: pointer;
transition: background-color 0.15s ease;
}
.ui-accordion-header:hover {
background-color: var(--color-gray-50);
}
.dark .ui-accordion-header:hover {
background-color: var(--color-gray-800);
}
.ui-accordion-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 1rem;
color: var(--color-white);
}
.ui-accordion-icon.primary { background-color: var(--color-primary-600); }
.ui-accordion-icon.success { background-color: var(--color-success-600); }
.ui-accordion-icon.warning { background-color: var(--color-warning-600); }
.ui-accordion-icon.danger { background-color: var(--color-danger-600); }
.ui-accordion-icon.info { background-color: var(--color-info-600); }
.ui-accordion-icon.purple { background-color: var(--color-purple-600); }
.ui-accordion-icon.gray { background-color: var(--color-gray-500); }
.ui-accordion-icon.emerald { background-color: var(--color-emerald-600); }
.ui-accordion-icon.orange { background-color: var(--color-orange-600); }
.ui-accordion-content {
flex: 1;
}
.ui-accordion-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 0.125rem;
}
.dark .ui-accordion-title {
color: var(--color-gray-100);
}
.ui-accordion-desc {
font-size: 0.8125rem;
color: var(--color-gray-500);
}
.dark .ui-accordion-desc {
color: var(--color-gray-400);
}
.ui-accordion-chevron {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
color: var(--color-gray-400);
background-color: var(--color-gray-100);
transition: all 0.2s ease;
}
.dark .ui-accordion-chevron {
background-color: var(--color-gray-700);
color: var(--color-gray-400);
}
.ui-accordion-header:hover .ui-accordion-chevron {
background-color: var(--color-gray-200);
}
.dark .ui-accordion-header:hover .ui-accordion-chevron {
background-color: var(--color-gray-600);
}
.ui-accordion-chevron.open {
transform: rotate(180deg);
}
.ui-accordion-body {
padding: 0 1.25rem 1.25rem;
display: none;
}
.ui-accordion-body.open {
display: block;
}
/* Badge no accordion */
.ui-accordion-badge {
margin-left: 0.75rem;
}
/* ============================================
CARD COLLAPSIBLE - Variante Colapsável
Alias para ui-accordion para compatibilidade
============================================ */
.ui-card-collapsible {
background-color: var(--color-bg-card);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
margin-bottom: 1.5rem;
overflow: hidden;
}
.dark .ui-card-collapsible {
background-color: var(--color-gray-800);
border-color: var(--color-gray-700);
}
/* Acordeons dentro de card principal */
.ui-card > .ui-card-collapsible {
background-color: transparent;
border-radius: 0;
border: none;
border-bottom: 1px solid var(--color-gray-200);
margin-bottom: 0;
}
.dark .ui-card > .ui-card-collapsible {
border-bottom-color: var(--color-gray-700) !important;
}
/* Espaçamento entre acordeons via padding no header */
.ui-card > .ui-card-collapsible .ui-card-collapsible-header {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
/* Último acordeon sem borda inferior */
.ui-card > .ui-card-collapsible:last-child {
border-bottom: none;
}
.ui-card-collapsible-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
cursor: default;
transition: background-color 0.15s ease;
}
/* Hover removed - only toggle button is interactive */
.ui-card-collapsible-info {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
.ui-card-collapsible-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-white);
}
.ui-card-collapsible-icon i,
.ui-card-collapsible-icon svg {
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Icon Colors - Base + 6 variantes semânticas com CSS variables + dark mode */
.ui-icon-bg-primary,
.ui-icon-bg-secondary,
.ui-icon-bg-success,
.ui-icon-bg-warning,
.ui-icon-bg-danger,
.ui-icon-bg-info {
width: 2.75rem;
height: 2.75rem;
min-width: 2.75rem;
border-radius: var(--radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.125rem;
}
.ui-icon-bg-primary { background-color: var(--color-primary-600); color: var(--color-white); }
.dark .ui-icon-bg-primary { background-color: var(--color-primary-500); }
.ui-icon-bg-secondary { background-color: var(--color-gray-500); color: var(--color-white); }
.dark .ui-icon-bg-secondary { background-color: var(--color-gray-600); }
.ui-icon-bg-success { background-color: var(--color-success-600); color: var(--color-white); }
.dark .ui-icon-bg-success { background-color: var(--color-success-500); }
.ui-icon-bg-warning { background-color: var(--color-warning-500); color: var(--color-white); }
.dark .ui-icon-bg-warning { background-color: var(--color-warning-400); }
.ui-icon-bg-danger { background-color: var(--color-danger-600); color: var(--color-white); }
.dark .ui-icon-bg-danger { background-color: var(--color-danger-500); }
.ui-icon-bg-info { background-color: var(--color-info-600); color: var(--color-white); }
.dark .ui-icon-bg-info { background-color: var(--color-info-500); }
/* Light/Pastel Icon Backgrounds - fundo claro + texto colorido (para ícones em contextos claros) */
.ui-icon-bg-primary-light,
.ui-icon-bg-secondary-light,
.ui-icon-bg-success-light,
.ui-icon-bg-warning-light,
.ui-icon-bg-danger-light,
.ui-icon-bg-info-light {
width: 2.75rem;
height: 2.75rem;
min-width: 2.75rem;
border-radius: var(--radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.125rem;
}
.ui-icon-bg-primary-light { background-color: var(--color-primary-100); color: var(--color-primary-600); }
.dark .ui-icon-bg-primary-light { background-color: color-mix(in srgb, var(--color-primary-500) 20%, transparent); color: var(--color-primary-400); }
.ui-icon-bg-secondary-light { background-color: var(--color-gray-100); color: var(--color-gray-600); }
.dark .ui-icon-bg-secondary-light { background-color: color-mix(in srgb, var(--color-gray-500) 20%, transparent); color: var(--color-gray-400); }
.ui-icon-bg-success-light { background-color: var(--color-success-100); color: var(--color-success-600); }
.dark .ui-icon-bg-success-light { background-color: color-mix(in srgb, var(--color-success-500) 20%, transparent); color: var(--color-success-400); }
.ui-icon-bg-warning-light { background-color: var(--color-warning-100); color: var(--color-warning-600); }
.dark .ui-icon-bg-warning-light { background-color: color-mix(in srgb, var(--color-warning-500) 20%, transparent); color: var(--color-warning-400); }
.ui-icon-bg-danger-light { background-color: var(--color-danger-100); color: var(--color-danger-600); }
.dark .ui-icon-bg-danger-light { background-color: color-mix(in srgb, var(--color-danger-500) 20%, transparent); color: var(--color-danger-400); }
.ui-icon-bg-info-light { background-color: var(--color-info-100); color: var(--color-info-600); }
.dark .ui-icon-bg-info-light { background-color: color-mix(in srgb, var(--color-info-500) 20%, transparent); color: var(--color-info-400); }
/* Stat/Card section backgrounds - pastel semântico para cards de estatísticas */
.ui-stat-bg-success { background-color: var(--color-success-50); }
.dark .ui-stat-bg-success { background-color: color-mix(in srgb, var(--color-success-500) 10%, transparent); }
.ui-stat-bg-primary { background-color: var(--color-primary-50); }
.dark .ui-stat-bg-primary { background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent); }
.ui-stat-bg-warning { background-color: var(--color-warning-50); }
.dark .ui-stat-bg-warning { background-color: color-mix(in srgb, var(--color-warning-500) 10%, transparent); }
.ui-stat-bg-danger { background-color: var(--color-danger-50); }
.dark .ui-stat-bg-danger { background-color: color-mix(in srgb, var(--color-danger-500) 10%, transparent); }
.ui-stat-bg-info { background-color: var(--color-info-50); }
.dark .ui-stat-bg-info { background-color: color-mix(in srgb, var(--color-info-500) 10%, transparent); }
/* Row highlight for error/warning states */
.ui-row-highlight-danger { background-color: var(--color-danger-50); }
.dark .ui-row-highlight-danger { background-color: color-mix(in srgb, var(--color-danger-500) 5%, transparent); }
.ui-row-highlight-warning { background-color: var(--color-warning-50); }
.dark .ui-row-highlight-warning { background-color: color-mix(in srgb, var(--color-warning-500) 5%, transparent); }
/* Aliases (backwards compat) - todos apontam para primary */
.ui-icon-bg-purple,
.ui-icon-bg-indigo,
.ui-icon-bg-slate,
.ui-icon-bg-teal,
.ui-icon-bg-emerald,
.ui-icon-bg-orange,
.ui-icon-bg-cyan,
.ui-icon-bg-amber,
.ui-icon-bg-blue,
.ui-accordion-icon-purple,
.ui-accordion-icon-emerald,
.ui-accordion-icon-blue,
.ui-accordion-icon-indigo,
.ui-accordion-icon-orange,
.ui-accordion-icon-teal,
.ui-accordion-icon-green,
.ui-accordion-icon-red,
.ui-accordion-icon-yellow {
background-color: var(--color-primary-600);
color: var(--color-white);
}
.dark .ui-icon-bg-purple,
.dark .ui-icon-bg-indigo,
.dark .ui-icon-bg-slate,
.dark .ui-icon-bg-teal,
.dark .ui-icon-bg-emerald,
.dark .ui-icon-bg-orange,
.dark .ui-icon-bg-cyan,
.dark .ui-icon-bg-amber,
.dark .ui-icon-bg-blue,
.dark .ui-accordion-icon-purple,
.dark .ui-accordion-icon-emerald,
.dark .ui-accordion-icon-blue,
.dark .ui-accordion-icon-indigo,
.dark .ui-accordion-icon-orange,
.dark .ui-accordion-icon-teal,
.dark .ui-accordion-icon-green,
.dark .ui-accordion-icon-red,
.dark .ui-accordion-icon-yellow {
background-color: var(--color-primary-500);
}
.ui-accordion-icon-amber { background-color: var(--color-warning-500); color: var(--color-white); }
.ui-accordion-icon-slate { background-color: #64748b; color: var(--color-white); }
.dark .ui-accordion-icon-amber { background-color: var(--color-warning-700); }
.dark .ui-accordion-icon-slate { background-color: var(--color-slate-600); }
/* Action Buttons (ícones pequenos de ação) */
.ui-action-btn {
padding: 0.375rem;
border-radius: var(--radius-md);
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.ui-action-btn-purple {
color: var(--color-accent-600);
background-color: transparent;
}
.ui-action-btn-purple:hover {
background-color: var(--color-accent-100);
}
.dark .ui-action-btn-purple {
color: var(--color-accent-300);
}
.dark .ui-action-btn-purple:hover {
background-color: rgba(147, 51, 234, 0.2);
}
.ui-action-btn-danger {
color: var(--color-danger-600);
background-color: transparent;
}
.ui-action-btn-danger:hover {
background-color: var(--color-danger-100);
}
.dark .ui-action-btn-danger {
color: var(--color-danger-500);
}
.dark .ui-action-btn-danger:hover {
background-color: rgba(220, 38, 38, 0.2);
}
/* Action btn color variants */
.ui-action-btn-green,
.ui-action-btn-success {
color: var(--color-success-600, var(--color-success-600));
background-color: transparent;
}
.ui-action-btn-green:hover,
.ui-action-btn-success:hover {
background-color: rgba(34, 197, 94, 0.1);
}
.dark .ui-action-btn-green,
.dark .ui-action-btn-success {
color: var(--color-success-400, var(--color-success-400));
}
.dark .ui-action-btn-green:hover,
.dark .ui-action-btn-success:hover {
background-color: rgba(34, 197, 94, 0.15);
}
.ui-action-btn-gray,
.ui-action-btn-secondary {
color: var(--color-gray-500, #6b7280);
background-color: transparent;
}
.ui-action-btn-gray:hover,
.ui-action-btn-secondary:hover {
background-color: var(--color-gray-100, var(--color-gray-100));
}
.dark .ui-action-btn-gray,
.dark .ui-action-btn-secondary {
color: var(--color-gray-400, #9ca3af);
}
.dark .ui-action-btn-gray:hover,
.dark .ui-action-btn-secondary:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-action-btn-red {
color: var(--color-danger-600, var(--color-danger-600));
background-color: transparent;
}
.ui-action-btn-red:hover {
background-color: rgba(239, 68, 68, 0.1);
}
.dark .ui-action-btn-red {
color: var(--color-danger-400, var(--color-danger-400));
}
.dark .ui-action-btn-red:hover {
background-color: rgba(239, 68, 68, 0.15);
}
.ui-action-btn-blue,
.ui-action-btn-primary {
color: var(--color-primary-600, #db2777);
background-color: transparent;
}
.ui-action-btn-blue:hover,
.ui-action-btn-primary:hover {
background-color: rgba(var(--color-primary-rgb), 0.1);
}
.dark .ui-action-btn-blue,
.dark .ui-action-btn-primary {
color: var(--color-primary-400, var(--color-primary-400));
}
.dark .ui-action-btn-blue:hover,
.dark .ui-action-btn-primary:hover {
background-color: rgba(var(--color-primary-rgb), 0.15);
}
.ui-action-btn-warning {
color: var(--color-warning-600, var(--color-warning-700));
background-color: transparent;
}
.ui-action-btn-warning:hover {
background-color: rgba(245, 158, 11, 0.1);
}
.dark .ui-action-btn-warning {
color: var(--color-warning-400, var(--color-warning-400));
}
.dark .ui-action-btn-warning:hover {
background-color: rgba(245, 158, 11, 0.15);
}
.ui-card-collapsible-text {
flex: 1;
}
.ui-card-collapsible-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-gray-900);
margin: 0;
line-height: 1.3;
}
.dark .ui-card-collapsible-title {
color: var(--color-gray-100);
}
.ui-card-collapsible-subtitle {
font-size: 0.8125rem;
color: var(--color-gray-500);
margin: 0.125rem 0 0 0;
}
.dark .ui-card-collapsible-subtitle {
color: var(--color-gray-400);
}
.ui-card-collapsible-toggle {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gray-100);
color: var(--color-gray-500);
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.dark .ui-card-collapsible-toggle {
background-color: var(--color-gray-700);
color: var(--color-gray-400);
}
.ui-card-collapsible-toggle:hover {
background-color: var(--color-gray-200);
color: var(--color-gray-700);
}
.dark .ui-card-collapsible-toggle:hover {
background-color: var(--color-gray-600);
color: var(--color-gray-300);
}
.ui-card-collapsible-toggle i,
.ui-card-collapsible-toggle svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.ui-card-collapsible-toggle.open i,
.ui-card-collapsible-toggle.open svg {
transform: rotate(180deg);
}
.ui-card-collapsible-body {
padding: 1.25rem;
border-top: 1px solid var(--color-gray-200);
}
.dark .ui-card-collapsible-body {
border-top-color: var(--color-gray-700);
}
.ui-card-collapsible-body.hidden {
display: none;
}
.ui-card-collapsible-body-no-padding {
padding: 0;
}
/* ============================================
SIDEBAR COLLAPSED - Correções
Suporta .sidebar-collapsed na sidebar ou html
============================================ */
.app-sidebar.sidebar-collapsed,
html.sidebar-collapsed .app-sidebar {
width: var(--sidebar-width-collapsed, 64px) !important;
min-width: var(--sidebar-width-collapsed, 64px) !important;
}
.app-sidebar.sidebar-collapsed .sidebar-item,
html.sidebar-collapsed .app-sidebar .sidebar-item,
.sidebar-collapsed .sidebar-item {
justify-content: center;
padding: 0.75rem;
margin: 0.125rem 0.375rem;
border-radius: var(--radius-md);
}
.app-sidebar.sidebar-collapsed .sidebar-item-text,
html.sidebar-collapsed .app-sidebar .sidebar-item-text,
.sidebar-collapsed .sidebar-item-text,
.sidebar-collapsed .sidebar-item-badge,
.sidebar-collapsed .sidebar-group-title,
.sidebar-collapsed .sidebar-submenu {
display: none !important;
}
.app-sidebar.sidebar-collapsed .sidebar-item-icon,
html.sidebar-collapsed .app-sidebar .sidebar-item-icon,
.sidebar-collapsed .sidebar-item-icon {
margin-right: 0;
width: 24px;
height: 24px;
}
.app-sidebar.sidebar-collapsed .sidebar-item-icon svg,
html.sidebar-collapsed .app-sidebar .sidebar-item-icon svg,
.sidebar-collapsed .sidebar-item-icon svg,
.app-sidebar.sidebar-collapsed .sidebar-item-icon i,
html.sidebar-collapsed .app-sidebar .sidebar-item-icon i,
.sidebar-collapsed .sidebar-item-icon i {
width: 22px;
height: 22px;
font-size: 18px;
line-height: 22px;
}
.app-sidebar.sidebar-collapsed .sidebar-section-header,
html.sidebar-collapsed .app-sidebar .sidebar-section-header,
.sidebar-collapsed .sidebar-section-header {
padding: 0.5rem;
justify-content: center;
}
.app-sidebar.sidebar-collapsed .sidebar-section-header span,
html.sidebar-collapsed .app-sidebar .sidebar-section-header span,
.sidebar-collapsed .sidebar-section-header span {
display: none;
}
.app-sidebar.sidebar-collapsed .sidebar-nav,
html.sidebar-collapsed .app-sidebar .sidebar-nav,
.sidebar-collapsed .sidebar-nav {
padding: 0.5rem 0.25rem;
}
/* Tooltip inline na sidebar (oculto — texto é usado pelo JS flutuante) */
.sidebar-tooltip {
display: none !important;
}
/* Tooltip flutuante da sidebar — renderizado via JS em position:fixed no body
Definições em app.css (.sidebar-tooltip-floating) */
/* ============================================
TEXT CONTRAST FIXES - Correções de Contraste
============================================ */
/* Garantir texto legível em fundos coloridos */
.text-on-primary,
.bg-primary .text-auto,
[class*="ui-stat-card-"] .text-auto {
color: var(--color-white) !important;
}
/* Labels em fundos escuros */
.dark .ui-label,
.dark label,
.dark .form-label {
color: var(--color-gray-200);
}
/* Textos primários em dark mode */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
color: var(--color-gray-100);
}
.dark p:not([class]),
.dark .text-primary,
.dark .text-default {
color: var(--color-gray-200);
}
/* Placeholder em dark mode */
/* WCAG AA: 4.5:1 minimum contrast ratio */
.dark input::placeholder,
.dark textarea::placeholder,
.dark .ui-input::placeholder,
.dark select::placeholder {
color: var(--color-gray-400);
}
/* Inputs em dark mode */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.dark textarea,
.dark select {
background-color: var(--color-gray-800);
color: var(--color-gray-100);
border-color: var(--color-gray-600);
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
border-color: var(--color-primary-500);
background-color: var(--color-gray-800);
}
/* Links em dark mode */
.dark a:not(.ui-btn):not([class*="nav"]):not([class*="sidebar"]) {
color: var(--color-primary-300, var(--color-primary-300));
}
.dark a:not(.ui-btn):not([class*="nav"]):not([class*="sidebar"]):hover {
color: var(--color-primary-200, #fbcfe8);
}
/* Text muted para dark mode */
.dark .text-muted,
.dark .text-gray-500,
.dark .text-slate-500,
.dark .text-secondary {
color: var(--color-gray-400);
}
/* .card genérico em dark mode (compatibilidade Bootstrap-style) */
.dark .card {
background-color: var(--color-bg-card);
border-color: var(--color-border);
}
/* Nota: .dark .ui-card já definido com !important em linha ~1743 — não duplicar */
/* Tables em dark mode */
.dark table {
border-color: var(--color-gray-700);
}
.dark th {
color: var(--color-gray-200);
background-color: var(--color-gray-750, #2d3748);
}
.dark td {
color: var(--color-gray-300);
border-color: var(--color-gray-700);
}
.dark tr:hover td {
background-color: var(--color-gray-750, #2d3748);
}
/* Bordas em dark mode */
.dark .border,
.dark [class*="border-gray"] {
border-color: var(--color-gray-700);
}
/* Dividers em dark mode */
.dark hr,
.dark .divider {
border-color: var(--color-gray-700);
}
/* Dropdowns em dark mode */
.dark .dropdown-menu,
.dark [class*="-dropdown"] {
background-color: var(--color-gray-800);
border-color: var(--color-gray-700);
}
/* Badges em dark mode - melhor contraste */
.dark .ui-badge {
background-color: var(--color-gray-700);
color: var(--color-gray-200);
}
/* Alerts em dark mode */
.dark .ui-alert,
.dark .alert {
border-color: var(--color-gray-600);
}
/* Code em dark mode */
.dark code,
.dark pre {
background-color: var(--color-gray-900);
color: var(--color-gray-100);
}
/* Checkbox e Radio labels em dark mode */
.dark .checkbox-label,
.dark .radio-label,
.dark [class*="checkbox"] label,
.dark [class*="radio"] label {
color: var(--color-gray-200);
}
/* Nota: .dark .ui-stat-card, .dark .ui-stat-card-title e .dark .ui-stat-card-value
já definidos com !important acima (~linha 2954) usando tokens semânticos — não duplicar */
/* Tabs em dark mode */
.dark .ui-tabs-nav,
.dark [class*="-tabs"] {
border-color: var(--color-gray-700);
}
.dark .ui-tab {
color: var(--color-gray-400);
}
.dark .ui-tab:hover {
color: var(--color-gray-200);
}
.dark .ui-tab.active {
color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
/* Modal overlay em dark mode */
.dark .ui-modal-overlay,
.dark [class*="-overlay"] {
background-color: rgba(0, 0, 0, 0.75);
}
/* Tooltips em dark mode */
.dark .ui-tooltip,
.dark [class*="-tooltip"] {
background-color: var(--color-gray-700);
color: var(--color-gray-100);
}
/* ============================================
SPACING UTILITIES - Espaçamentos Padronizados
============================================ */
/* Margin */
.ui-m-0 { margin: var(--space-0); }
.ui-m-1 { margin: var(--space-1); }
.ui-m-2 { margin: var(--space-2); }
.ui-m-3 { margin: var(--space-3); }
.ui-m-4 { margin: var(--space-4); }
.ui-m-5 { margin: var(--space-5); }
.ui-m-6 { margin: var(--space-6); }
.ui-m-8 { margin: var(--space-8); }
.ui-mx-auto { margin-left: auto; margin-right: auto; }
.ui-my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.ui-my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.ui-my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.ui-my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.ui-my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.ui-ml-0 { margin-left: 0; }
.ui-ml-1 { margin-left: 0.25rem; }
.ui-ml-2 { margin-left: 0.5rem; }
.ui-ml-3 { margin-left: 0.75rem; }
.ui-ml-4 { margin-left: 1rem; }
.ui-ml-6 { margin-left: 1.5rem; }
.ui-ml-8 { margin-left: 2rem; }
.ui-ml-auto { margin-left: auto; }
.ui-mr-0 { margin-right: 0; }
.ui-mr-1 { margin-right: 0.25rem; }
.ui-mr-2 { margin-right: 0.5rem; }
.ui-mr-3 { margin-right: 0.75rem; }
.ui-mr-4 { margin-right: 1rem; }
.ui-mr-6 { margin-right: 1.5rem; }
.ui-mr-8 { margin-right: 2rem; }
/* ui-mt-*/ui-mb-* → definidos em design-tokens.css com !important */
/* Padding */
.ui-p-0 { padding: var(--space-0); }
.ui-p-1 { padding: var(--space-1); }
.ui-p-2 { padding: var(--space-2); }
.ui-p-3 { padding: var(--space-3); }
.ui-p-4 { padding: var(--space-4); }
.ui-p-5 { padding: var(--space-5); }
.ui-p-6 { padding: var(--space-6); }
.ui-p-8 { padding: var(--space-8); }
.ui-px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.ui-px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.ui-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.ui-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.ui-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.ui-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.ui-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.ui-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.ui-py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.ui-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.ui-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.ui-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.ui-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.ui-py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.ui-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.ui-py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* Gap for Flex/Grid */
.ui-gap-0 { gap: var(--space-0); }
.ui-gap-1 { gap: var(--space-1); }
.ui-gap-2 { gap: var(--space-2); }
.ui-gap-3 { gap: var(--space-3); }
.ui-gap-4 { gap: var(--space-4); }
.ui-gap-5 { gap: var(--space-5); }
.ui-gap-6 { gap: var(--space-6); }
.ui-gap-8 { gap: var(--space-8); }
/* Section spacing */
.ui-section {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.ui-section-sm {
padding-top: var(--space-4);
padding-bottom: var(--space-4);
}
.ui-section-lg {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
/* Card body padding padrão */
.ui-card-body {
padding: var(--space-4);
}
.ui-card-body-sm {
padding: var(--space-3);
}
.ui-card-body-lg {
padding: var(--space-6);
}
/* Form group → definição canônica acima (seção Form Elements) */
/* Grid padrão
DEPRECADO: .ui-grid-2, .ui-grid-3, .ui-grid-4
Usar ui-grid-cols-* (seção GRID UTILITIES) como sistema canônico.
Uso restante: Accounts/Views/user/index.php (ui-grid-2) */
.ui-grid {
display: grid;
gap: var(--gap-md);
}
.ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Responsivo */
@media (max-width: 768px) {
.ui-grid-2,
.ui-grid-3,
.ui-grid-4 {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ui-grid-3,
.ui-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ============================================
STAT ICON - OVERRIDE PARA MODO NEUTRO
Remove cores vibrantes, usa tons neutros
============================================ */
/* TODAS as variantes de stat icon - cores neutras */
/* Stat icon colors are defined in design-tokens.css
Removed destructive !important override that forced all stat icons to gray.
Specific color variants (.ui-stat-icon-blue, -green, etc.) are in design-tokens.css */
/* Ícones dentro de stat icons - herdar cor do container */
.ui-stat-icon i,
.ui-stat-icon svg,
[class*="ui-stat-icon-"] i,
[class*="ui-stat-icon-"] svg {
color: inherit;
}
/* ============================================
BADGE - Modo Escuro
Badges sem variante semântica ficam neutros.
Badges semânticos preservam suas cores.
Cores específicas definidas em design-tokens.css
============================================ */
.dark .ui-badge {
background-color: var(--color-gray-700);
color: var(--color-gray-300);
border-color: var(--color-gray-600);
}
/* Badges semânticos preservam cores no dark mode (override do .dark .ui-badge acima) */
.dark .ui-badge-danger {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-danger-300);
}
.dark .ui-badge-success {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-success-300);
}
.dark .ui-badge-warning {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-warning-300);
}
.dark .ui-badge-primary,
.dark .ui-badge-info {
background-color: rgba(var(--color-primary-rgb), 0.2);
color: var(--color-primary-300);
}
.dark .ui-badge-secondary {
background-color: rgba(107, 114, 128, 0.2);
color: var(--color-gray-300);
}
/* ============================================
OVERRIDE GLOBAL - Remover Gradientes Coloridos
Substitui gradientes por cores sólidas
============================================ */
.dark [class*="bg-gradient-to-"] {
background-image: none !important;
background-color: var(--color-gray-800) !important;
}
/* Cards com gradientes vibrantes - neutralizar */
.dark .bg-gradient-to-br,
.dark .bg-gradient-to-r,
.dark .bg-gradient-to-b,
.dark .bg-gradient-to-t,
.dark .bg-gradient-to-l,
.dark .bg-gradient-to-tr,
.dark .bg-gradient-to-tl,
.dark .bg-gradient-to-bl {
background-image: none !important;
}
/* ============================================
SIDEBAR SEARCH + CLICK-TO-EXPAND (rc.524)
Campo de busca interno + scroll · click em item com submenu expande
============================================ */
.app-sidebar .sidebar-inner {
/* rc.524: scroll interno quando muitas seções */
max-height: 100vh;
display: flex;
flex-direction: column;
}
.app-sidebar .sidebar-nav {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
/* Custom scrollbar fina */
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar {
width: 6px;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
/* Search box */
.sidebar-search {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: var(--space-2, 8px);
padding: var(--space-3, 12px);
background: var(--color-bg-card);
border-bottom: 1px solid var(--color-border);
flex: 0 0 auto;
}
.sidebar-search-icon {
flex: 0 0 auto;
color: var(--color-text-muted);
display: inline-flex;
}
.sidebar-search-input {
flex: 1 1 auto;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-input);
border-radius: var(--radius-sm, 4px);
padding: 6px 10px;
font-size: var(--font-size-sm, 14px);
color: var(--color-text-primary);
min-height: 32px;
transition: border-color var(--transition-fast, 150ms ease);
}
.sidebar-search-input:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}
.sidebar-search-input::placeholder {
color: var(--color-text-muted);
}
.sidebar-search-kbd {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
font-size: 11px;
line-height: 1;
padding: 0 5px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-muted);
font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 600;
box-shadow: 0 1px 0 0 var(--color-border);
user-select: none;
}
.sidebar-search-empty {
padding: var(--space-4, 16px);
text-align: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm, 14px);
font-style: italic;
}
/* Sidebar collapsed: esconde search input mas mantém ícone clicável (abre Cmd+K) */
.sidebar-collapsed .sidebar-search-input,
.sidebar-collapsed .sidebar-search-kbd {
display: none;
}
.sidebar-collapsed .sidebar-search {
justify-content: center;
padding: var(--space-2, 8px);
}
/* ============================================================
rc.531 — sidebar item alignment polish
Garante que nomes dos módulos fiquem ALINHADOS À ESQUERDA
após o ícone, não centralizados entre ícone e chevron.
============================================================ */
.app-sidebar .sidebar-item .sidebar-item-text,
.app-sidebar .sidebar-item-button .sidebar-item-text {
flex: 1 1 auto;
text-align: left;
min-width: 0; /* permite ellipsis funcionar com flex */
}
.app-sidebar .sidebar-item .sidebar-item-chevron,
.app-sidebar .sidebar-item-button .sidebar-item-chevron {
flex: 0 0 auto;
margin-left: auto;
color: var(--color-text-muted);
opacity: 0.6;
}
/* ============================================================
rc.536 — sidebar item alignment HARD FIX (P0)
Owner reportou que rc.531 não resolveu — labels ainda aparecem
centralizados nos itens com submenu (botões dos MÓDULOS).
Esta seção força com !important e cobre TODA combinação possível
de classes (item, item-button, has-subitems, sidebar-item-active).
============================================================ */
.app-sidebar:not(.sidebar-collapsed) .sidebar-item,
.app-sidebar:not(.sidebar-collapsed) .sidebar-item-button {
justify-content: flex-start !important;
text-align: left !important;
gap: var(--space-3, 12px) !important;
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-item .sidebar-item-text,
.app-sidebar:not(.sidebar-collapsed) .sidebar-item-button .sidebar-item-text {
flex: 1 1 auto !important;
text-align: left !important;
min-width: 0 !important;
margin-right: auto !important; /* empurra chevron para a direita */
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-item .sidebar-item-icon,
.app-sidebar:not(.sidebar-collapsed) .sidebar-item-button .sidebar-item-icon {
flex: 0 0 auto !important;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Subitens (terceiro nível) também alinhados à esquerda */
.app-sidebar:not(.sidebar-collapsed) .sidebar-subitem {
justify-content: flex-start !important;
text-align: left !important;
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-subitem .sidebar-subitem-text {
flex: 1 1 auto !important;
text-align: left !important;
min-width: 0 !important;
}
/* ============================================================
rc.536 — sidebar search polish (P0)
Owner reportou que o search da sidebar não foi ajustado.
Visual unificado com command bar do header (Ctrl+K style).
============================================================ */
.app-sidebar:not(.sidebar-collapsed) .sidebar-search {
padding: var(--space-3, 12px) var(--space-4, 16px);
gap: var(--space-2, 8px);
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-search-input {
flex: 1 1 auto;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-input, var(--color-border));
border-radius: var(--radius-md, 6px);
padding: 8px 12px;
font-size: var(--font-size-sm, 14px);
color: var(--color-text-primary);
min-height: 36px;
transition: border-color var(--transition-fast, 150ms ease),
box-shadow var(--transition-fast, 150ms ease);
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-search-input:hover {
border-color: var(--color-border-strong, var(--color-text-muted));
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-search-input:focus,
.app-sidebar:not(.sidebar-collapsed) .sidebar-search-input:focus-visible {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 56, 189, 248), 0.15);
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-search-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-sidebar:not(.sidebar-collapsed) .sidebar-search-kbd {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
font-weight: 600;
line-height: 1;
color: var(--color-text-muted);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 4px);
box-shadow: 0 1px 0 var(--color-border);
}
/* ============================================================
rc.531 — sidebar plan card (Stack8-style)
Aparece no rodapé da sidebar para usuários (não admin).
Mostra plano, status, expiração, créditos consumidos e CTA.
============================================================ */
.sidebar-plan-card {
margin: var(--space-3, 12px);
padding: var(--space-3, 12px) var(--space-4, 16px);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px);
display: flex;
flex-direction: column;
gap: var(--space-2, 8px);
flex: 0 0 auto;
}
.plan-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2, 8px);
}
.plan-card-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.plan-card-status {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
line-height: 1.4;
}
.plan-card-status-active {
color: var(--color-success-600, #16a34a);
background: rgba(34, 197, 94, 0.12);
}
.plan-card-status-inactive {
color: var(--color-warning-600, #ca8a04);
background: rgba(234, 179, 8, 0.12);
}
.plan-card-name {
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plan-card-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2, 8px);
font-size: 12px;
color: var(--color-text-muted);
}
.plan-card-label {
flex: 0 0 auto;
}
.plan-card-value {
flex: 1 1 auto;
text-align: right;
color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plan-card-progress {
width: 100%;
height: 4px;
background: var(--color-bg-muted);
border-radius: 999px;
overflow: hidden;
margin-top: 2px;
}
.plan-card-progress-fill {
display: block;
height: 100%;
background: linear-gradient(90deg,
var(--color-primary-500),
var(--color-primary-600));
border-radius: 999px;
transition: width var(--transition-normal, 200ms ease);
}
.plan-card-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: var(--space-1, 4px);
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
color: var(--color-primary-600);
background: transparent;
border: 1px solid var(--color-primary-500);
border-radius: var(--radius-sm, 6px);
text-decoration: none;
transition: background var(--transition-fast, 150ms ease),
color var(--transition-fast, 150ms ease);
}
.plan-card-cta:hover {
background: var(--color-primary-500);
color: #fff;
}
/* Plan card oculta quando sidebar colapsada */
.app-sidebar.sidebar-collapsed .sidebar-plan-card,
html.sidebar-collapsed .app-sidebar .sidebar-plan-card {
display: none;
}
/* sidebar-item-button (rc.524) — visualmente idêntico a sidebar-item · não navega */
.sidebar-item-button {
background: none;
border: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
display: flex;
align-items: center;
}
.sidebar-item-button:focus-visible {
outline: 2px solid var(--color-primary-500);
outline-offset: -2px;
border-radius: var(--radius-sm, 4px);
}
/* Chevron rotaciona quando expandido */
.sidebar-item-group.has-subitems .sidebar-item-chevron {
transition: transform var(--transition-fast, 150ms ease);
}
.sidebar-item-group.has-subitems.is-expanded > .sidebar-item-button .sidebar-item-chevron,
.sidebar-item-group.has-subitems.is-expanded > .sidebar-item .sidebar-item-chevron {
transform: rotate(180deg);
}
/* Subitems collapsible */
.sidebar-item-group.has-subitems .sidebar-subitems {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-normal, 200ms ease);
}
.sidebar-item-group.has-subitems.is-expanded .sidebar-subitems {
max-height: 500px; /* large enough · auto não funciona com transition */
}
@media (prefers-reduced-motion: reduce) {
.sidebar-item-group.has-subitems .sidebar-subitems,
.sidebar-item-group.has-subitems .sidebar-item-chevron {
transition: none !important;
}
}
/* Visão geral subitem · destacar com ícone home */
.sidebar-subitem-overview {
font-weight: var(--font-weight-medium, 500);
}
.sidebar-subitem-overview .sidebar-subitem-icon {
color: var(--color-primary-500);
}
/* ============================================
VIRTUAL LIST (rc.511)
Container virtualizado para listas longas (10k+ items).
Renderiza apenas linhas visíveis no viewport.
Markup:
...
============================================ */
[data-ui="virtual-list"] {
position: relative;
overflow: auto;
max-height: 600px;
border: 1px solid var(--ui-border-default, var(--color-border));
border-radius: var(--radius-md, 0.5rem);
background: var(--color-bg-card);
/* Reduz layout shift no scroll · permite browser otimizar */
contain: strict;
/* Scroll suave · respeita reduced-motion */
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
[data-ui="virtual-list"] {
scroll-behavior: auto;
}
}
.ui-virtual-row {
display: flex;
align-items: center;
padding: 0 var(--space-4, 1rem);
height: var(--virtual-row-height, 48px);
border-bottom: 1px solid var(--ui-divide-default, var(--color-border));
transition: background-color var(--transition-fast, 150ms ease);
}
.ui-virtual-row:hover {
background: var(--color-bg-hover);
}
.ui-virtual-row:focus-visible {
outline: 2px solid var(--color-primary-500);
outline-offset: -2px;
background: var(--color-bg-hover);
}
/* Mobile: reduzir altura mínima dos rows */
@media (max-width: 767px) {
[data-ui="virtual-list"] {
max-height: 70vh;
}
.ui-virtual-row {
padding: 0 var(--space-3, 0.75rem);
font-size: 0.9375rem;
}
}
/* ============================================
EMPTY STATE - Componente Padronizado
Usar em todas as páginas quando não há dados
============================================ */
/* rc.439 — Aplicação total: estilos do --illustrated mergidos no base.
Visual canônico aplicado a TODAS as ~250 views que usam .ui-empty-state
automaticamente, sem refatoração de markup. Modificador --illustrated
preservado como no-op (estilos idênticos) para backward compat. */
.ui-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem 1.5rem;
min-height: 200px;
/* Visual canônico (era --illustrated, agora default em rc.439) */
background: var(--color-bg-card);
border: 0.5px dashed var(--color-border);
border-radius: var(--radius-md, 8px);
}
.ui-empty-state-icon {
width: 5rem; /* rc.439: 5rem (era 4rem) — consistência com canônico */
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-subtle);
border-radius: 50%;
margin-bottom: 1.25rem;
opacity: 0.85;
transition: opacity var(--transition-fast, 150ms ease),
transform var(--transition-fast, 150ms ease);
}
.ui-empty-state:hover .ui-empty-state-icon {
opacity: 1;
transform: scale(1.02);
}
.dark .ui-empty-state-icon {
background-color: var(--color-bg-subtle);
}
.ui-empty-state-icon i,
.ui-empty-state-icon svg {
font-size: 2rem; /* rc.439: 2rem (era 1.75rem) — consistência com canônico */
color: var(--color-text-muted);
opacity: 0.9;
}
.dark .ui-empty-state-icon i,
.dark .ui-empty-state-icon svg {
color: var(--color-text-muted);
}
.ui-empty-state-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
max-width: 32rem;
text-align: center;
word-break: normal;
overflow-wrap: break-word;
}
.dark .ui-empty-state-title {
color: var(--color-text-primary);
}
.ui-empty-state-description {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: 1.25rem;
max-width: 42ch; /* rc.439: 42ch (era 24rem) — mais respiro de leitura */
}
.dark .ui-empty-state-description {
color: var(--color-text-muted);
}
/* Reduced motion — neutraliza scale do hover */
@media (prefers-reduced-motion: reduce) {
.ui-empty-state-icon {
transition: none !important;
transform: none !important;
}
}
.ui-empty-state .ui-btn {
margin-top: 0.5rem;
}
/* Ícones inline em empty states antigos - neutralizar */
.ui-empty-state > i {
font-size: 2.5rem;
color: var(--color-gray-300);
margin-bottom: 1rem;
}
.dark .ui-empty-state > i {
color: var(--color-gray-600);
}
/* MODAL - centralização já definida na seção principal (linha ~1787) */
/* (ui-btn e tamanhos sm/lg/xl consolidados na seção BUTTONS acima) */
/* ============================================
TEMPLATE CARDS - Cards de Sugestão/Template
Para usar em templates de automação, segmentos, etc.
============================================ */
.ui-template-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
min-height: 120px;
}
.dark .ui-template-card {
background-color: var(--color-gray-800);
border-color: var(--color-gray-700);
}
.ui-template-card:hover {
border-color: var(--color-primary-300);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.dark .ui-template-card:hover {
border-color: var(--color-primary-600);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ui-template-card-icon {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gray-100);
border-radius: var(--radius-md);
color: var(--color-gray-600);
}
.dark .ui-template-card-icon {
background-color: var(--color-gray-700);
color: var(--color-gray-300);
}
.ui-template-card-icon i {
font-size: 1.125rem;
}
.ui-template-card-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-800);
}
.dark .ui-template-card-title {
color: var(--color-gray-100);
}
.ui-template-card-description {
font-size: 0.75rem;
color: var(--color-gray-500);
line-height: 1.4;
}
.dark .ui-template-card-description {
color: var(--color-gray-400);
}
/* ============================================
OVERRIDES FINAIS - ALTA ESPECIFICIDADE
Garantem que os estilos corretos sejam aplicados
independente da ordem de carregamento
============================================ */
/* Stat Cards e UI Cards: Definições base em .ui-stat-card (linha ~2680) e .ui-card (linha ~1648).
Dark mode usa !important para garantir override. Removidos overrides redundantes com seletores de
alta especificidade (div.ui-stat-card, .ui-stat-grid .ui-stat-card, etc.) que duplicavam os mesmos valores. */
/* Stat Icon - fundo neutro APENAS quando sem variante de cor (ui-icon-bg-*) */
.ui-stat-icon:not([class*="ui-icon-bg-"]) {
background-color: var(--color-gray-100, var(--color-gray-100)) !important;
background-image: none !important;
color: var(--color-gray-600, #3e3860) !important;
}
.dark .ui-stat-icon:not([class*="ui-icon-bg-"]),
html.dark .ui-stat-icon:not([class*="ui-icon-bg-"]) {
background-color: var(--color-gray-700, #2a2a4e) !important;
background-image: none !important;
color: var(--color-gray-300, #d1d5db) !important;
}
/* ============================================
ACCORDION - TRIGGER E CONTENT (Correções)
Estilos para suportar a estrutura HTML atual
============================================ */
/* Accordion Trigger Button */
.ui-accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 1.25rem;
background-color: transparent;
border: none;
cursor: pointer;
transition: background-color 0.15s ease;
text-align: left;
}
.ui-accordion-trigger:hover {
background-color: var(--color-gray-50, #f9fafb);
}
.dark .ui-accordion-trigger:hover {
background-color: var(--color-gray-800, #1e1e38);
}
/* Accordion Header dentro do Trigger */
.ui-accordion-trigger .ui-accordion-header {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
/* Accordion Subtitle */
.ui-accordion-subtitle {
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
margin: 0;
}
.dark .ui-accordion-subtitle {
color: var(--color-gray-400, #9ca3af);
}
/* Accordion Content (usa hidden do Tailwind) */
.ui-accordion-content {
border-top: 1px solid var(--color-gray-200, var(--color-gray-200));
background-color: var(--color-gray-50, #f9fafb);
}
.dark .ui-accordion-content {
border-color: var(--color-gray-700, #2a2a4e);
background-color: var(--color-gray-800, #1e1e38);
}
/* Accordion Body dentro do Content */
.ui-accordion-content .ui-accordion-body {
padding: 1.25rem;
display: block;
}
/* Chevron Rotation */
.ui-accordion-chevron {
width: 32px;
height: 32px;
border-radius: var(--radius-md, 0.375rem);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-gray-400, #9ca3af);
background-color: var(--color-gray-100, var(--color-gray-100));
transition: all 0.2s ease;
}
.dark .ui-accordion-chevron {
background-color: var(--color-gray-700, #2a2a4e);
color: var(--color-gray-400, #9ca3af);
}
.ui-accordion-trigger:hover .ui-accordion-chevron {
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-accordion-trigger:hover .ui-accordion-chevron {
background-color: var(--color-gray-600, #3e3860);
}
.ui-accordion-chevron.rotate-180 {
transform: rotate(180deg);
}
/* Accordion Icon Colors (para Financial) */
.ui-accordion-icon-amber {
background-color: var(--color-warning-500, var(--color-warning-500));
color: var(--color-white);
}
.ui-accordion-icon-slate {
background-color: var(--color-gray-500, #6b7280);
color: var(--color-white);
}
/* ============================================
AUTH COMPONENTS - Sistema de Autenticação
Estilos completos para telas de login/registro
============================================ */
/* Auth Header */
.ui-auth-header {
text-align: center;
margin-bottom: 1.5rem;
}
/* Auth Logo */
.ui-auth-logo {
width: 3.5rem;
height: 3.5rem;
margin: 0 auto 1rem;
border-radius: var(--radius-xl, 0.75rem);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary-600, #db2777);
color: var(--color-white);
}
.ui-auth-logo-purple { background-color: var(--color-purple-600, var(--color-accent-600)); }
.ui-auth-logo-warning { background-color: var(--color-warning-500, var(--color-warning-500)); }
.ui-auth-logo-emerald { background-color: var(--color-emerald-600, var(--color-success-600)); }
.ui-auth-logo-green { background-color: var(--color-success-600, var(--color-success-600)); }
.ui-auth-logo-teal { background-color: var(--color-teal-600, var(--color-info-600)); }
.ui-auth-logo-cyan { background-color: var(--color-info-600, var(--color-info-600)); }
/* Auth Title and Subtitle */
.ui-auth-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gray-900, #0f0f22);
margin: 0 0 0.5rem;
}
.dark .ui-auth-title {
color: var(--color-white);
}
.ui-auth-subtitle {
font-size: 0.9375rem;
color: var(--color-gray-500, #6b7280);
margin: 0;
}
.dark .ui-auth-subtitle {
color: var(--color-gray-400, #9ca3af);
}
/* Auth Alerts */
.ui-auth-alert {
padding: 1rem;
border-radius: var(--radius-lg, 0.5rem);
margin-bottom: 1.5rem;
}
.ui-auth-alert-error {
background-color: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.ui-auth-alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.3);
}
.ui-auth-alert-success {
background-color: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ui-auth-alert-content {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.ui-auth-alert-icon {
flex-shrink: 0;
font-size: 1.125rem;
margin-top: 0.125rem;
}
.ui-auth-alert-error .ui-auth-alert-icon { color: var(--color-danger-500, var(--color-danger-500)); }
.ui-auth-alert-warning .ui-auth-alert-icon { color: var(--color-warning-500, var(--color-warning-500)); }
.ui-auth-alert-success .ui-auth-alert-icon { color: var(--color-success-500, var(--color-success-500)); }
.ui-auth-alert-body { flex: 1; }
.ui-auth-alert-text {
font-size: 0.875rem;
color: var(--color-gray-700, #2a2a4e);
margin: 0;
}
.dark .ui-auth-alert-text {
color: var(--color-gray-300, #d1d5db);
}
.ui-auth-alert-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-gray-900, #0f0f22);
margin: 0 0 0.25rem;
}
.dark .ui-auth-alert-title {
color: var(--color-white);
}
.ui-auth-alert-message {
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
margin: 0;
}
.dark .ui-auth-alert-message {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-alert-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.ui-auth-alert-action {
margin-top: 0.5rem;
}
.ui-auth-alert-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-primary-600, #db2777);
text-decoration: none;
}
.ui-auth-alert-link:hover {
color: var(--color-primary-700, var(--color-primary-700));
opacity: 0.85;
}
/* Auth Method Selector */
.ui-auth-method-selector {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.25rem;
background-color: var(--color-gray-100, var(--color-gray-100));
border-radius: var(--radius-lg, 0.5rem);
}
.dark .ui-auth-method-selector {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-auth-method-btn {
flex: 1;
min-width: 0;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
background-color: transparent;
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ui-auth-method-btn:hover {
color: var(--color-gray-900, #0f0f22);
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-auth-method-btn {
color: var(--color-gray-400, #9ca3af);
}
.dark .ui-auth-method-btn:hover {
color: var(--color-gray-100, var(--color-gray-100));
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-method-btn.active {
color: var(--color-white);
background-color: var(--color-primary-600, #db2777);
}
.dark .ui-auth-method-btn.active {
background-color: var(--color-primary-600, #db2777);
color: var(--color-white);
}
/* Auth Method Item - Linha de método de autenticação na tab segurança */
.ui-auth-method-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
gap: 1rem;
border-bottom: 1px solid var(--color-gray-200, var(--color-gray-200));
}
.ui-auth-method-item:last-child {
border-bottom: none;
}
.dark .ui-auth-method-item {
border-bottom-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-method-info {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
min-width: 0;
}
.ui-auth-method-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md, 0.375rem);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-white);
font-size: 1rem;
}
.ui-auth-method-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-900, #0f0f22);
line-height: 1.25;
}
.dark .ui-auth-method-title {
color: var(--color-gray-100, var(--color-gray-100));
}
.ui-auth-method-subtitle {
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
line-height: 1.25;
margin-top: 0.125rem;
}
.dark .ui-auth-method-subtitle {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-method-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
/* Status Badge */
.ui-status-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-full, 9999px);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.ui-status-badge-active {
background-color: var(--color-green-100, var(--color-success-100));
color: var(--color-green-700, var(--color-success-700));
}
.dark .ui-status-badge-active {
background-color: rgba(22, 163, 74, 0.15);
color: var(--color-green-400, var(--color-success-400));
}
.ui-status-badge-inactive {
background-color: var(--color-gray-100, var(--color-gray-100));
color: var(--color-gray-500, #6b7280);
}
.dark .ui-status-badge-inactive {
background-color: var(--color-gray-700, #2a2a4e);
color: var(--color-gray-400, #9ca3af);
}
/* Form Input with Icon (eye toggle for password) */
.ui-form-input-with-icon {
padding-right: 2.75rem;
}
.ui-form-input-icon {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
color: var(--color-gray-400, #9ca3af);
background: transparent;
border: none;
cursor: pointer;
transition: color 0.15s ease;
}
.ui-form-input-icon:hover {
color: var(--color-gray-600, #3e3860);
}
.dark .ui-form-input-icon {
color: var(--color-gray-500, #6b7280);
}
.dark .ui-form-input-icon:hover {
color: var(--color-gray-300, #d1d5db);
}
/* Password Strength Progress Background */
.ui-progress-bg {
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-progress-bg {
background-color: var(--color-gray-700, #2a2a4e);
}
/* Auth Section */
.ui-auth-section-icon {
width: 3rem;
height: 3rem;
margin: 0 auto 0.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.ui-auth-section-icon-primary { background-color: var(--color-primary-600, #db2777); }
.ui-auth-section-icon-success { background-color: var(--color-success-600, var(--color-success-600)); }
.ui-auth-section-icon-warning { background-color: var(--color-warning-600, var(--color-warning-700)); }
.ui-auth-section-icon-indigo { background-color: var(--color-indigo-600, var(--color-primary-600)); }
.ui-auth-section-text {
font-size: 0.875rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-section-text {
color: var(--color-gray-400, #9ca3af);
}
/* Auth Form Elements */
.ui-auth-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ui-auth-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.ui-auth-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-700, #2a2a4e);
}
.dark .ui-auth-label {
color: var(--color-gray-300, #d1d5db);
}
.ui-mb-0 {
margin-bottom: 0;
}
.ui-auth-input {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
color: var(--color-gray-900, #0f0f22);
background-color: rgba(15, 23, 42, 0.05);
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-lg, 0.5rem);
transition: all 0.15s ease;
}
.dark .ui-auth-input {
color: var(--color-white);
background-color: rgba(15, 23, 42, 0.6);
border-color: rgba(71, 85, 105, 0.5);
}
.ui-auth-input:focus {
outline: none;
border-color: var(--color-primary-500, var(--color-primary-500));
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
.dark .ui-auth-input:focus {
background-color: rgba(15, 23, 42, 0.8);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}
/* WCAG AA: 4.5:1 minimum contrast ratio */
.ui-auth-input::placeholder {
color: var(--color-gray-500);
}
.ui-auth-input-password {
padding-right: 3rem;
}
/* Ocultar botão nativo de revelar senha do navegador (Edge/Chrome) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none !important;
}
.ui-auth-password-toggle {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
padding: 0.25rem;
color: var(--color-gray-400, #9ca3af);
background: transparent;
border: none;
cursor: pointer;
transition: color 0.15s ease;
}
/* Garantir que .hidden funcione dentro do toggle (FontAwesome carrega depois do Tailwind,
.fas { display: inline-block } sobrescreve .hidden { display: none } por ordem de cascata) */
.ui-auth-password-toggle .hidden {
display: none !important;
}
.ui-auth-password-toggle:hover {
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-password-toggle:hover {
color: var(--color-gray-300, #d1d5db);
}
.ui-auth-help-text {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.25rem;
}
/* Auth Link */
.ui-auth-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-primary-600, #db2777);
text-decoration: none;
}
.ui-auth-link:hover {
color: var(--color-primary-700, var(--color-primary-700));
opacity: 0.85;
}
/* Auth Credential Toggle */
.ui-auth-credential-toggle {
display: flex;
gap: 0.5rem;
padding: 0.25rem;
background-color: var(--color-gray-100, var(--color-gray-100));
border-radius: var(--radius-lg, 0.5rem);
}
.dark .ui-auth-credential-toggle {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-auth-credential-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
background-color: transparent;
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
}
.ui-auth-credential-btn:hover {
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-auth-credential-btn {
color: var(--color-gray-400, #9ca3af);
}
.dark .ui-auth-credential-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-credential-btn.active {
color: var(--color-white);
background-color: var(--color-primary-600, #db2777);
}
/* Auth Channel Grid (Token) */
.ui-auth-channel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.ui-auth-channel-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 0.75rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
cursor: pointer;
transition: all 0.15s ease;
}
.dark .ui-auth-channel-option {
color: var(--color-gray-400, #9ca3af);
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-channel-option:hover {
border-color: var(--color-primary-400, var(--color-primary-400));
}
.ui-auth-channel-option:has(input:checked) {
color: var(--color-primary-700, var(--color-primary-700));
border-color: var(--color-primary-500, var(--color-primary-500));
background-color: var(--color-primary-50, #fdf2f8);
}
.dark .ui-auth-channel-option:has(input:checked) {
color: var(--color-primary-400, var(--color-primary-400));
border-color: var(--color-primary-500, var(--color-primary-500));
background-color: rgba(var(--color-primary-rgb), 0.1);
}
.ui-auth-channel-option-whatsapp:has(input:checked) {
color: var(--color-success-600);
border-color: var(--color-success-500);
background-color: rgba(34, 197, 94, 0.1);
}
/* Auth Info Box */
.ui-auth-info-box {
padding: 1rem;
background-color: var(--color-primary-50, #fdf2f8);
border: 1px solid var(--color-primary-200, #fbcfe8);
border-radius: var(--radius-lg, 0.5rem);
margin-top: 1.5rem;
}
.dark .ui-auth-info-box {
background-color: rgba(var(--color-primary-rgb), 0.1);
border-color: rgba(var(--color-primary-rgb), 0.3);
}
.ui-auth-info-box-icon {
color: var(--color-primary-600, #db2777);
flex-shrink: 0;
}
.ui-auth-info-box-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary-900, #831843);
margin: 0 0 0.25rem;
}
.dark .ui-auth-info-box-title {
color: var(--color-primary-400, var(--color-primary-400));
}
.ui-auth-info-box-text {
font-size: 0.8125rem;
color: var(--color-primary-700, var(--color-primary-700));
margin: 0 0 0.5rem;
}
.dark .ui-auth-info-box-text {
color: var(--color-primary-300, var(--color-primary-300));
}
.ui-auth-info-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-900, #0f0f22);
margin: 0 0 0.75rem;
}
.dark .ui-auth-info-title {
color: var(--color-white);
}
.ui-auth-info-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ui-auth-info-list-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-info-list-item {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-info-list-number {
font-weight: 600;
color: var(--color-primary-600, #db2777);
flex-shrink: 0;
}
.dark .ui-auth-info-list-number {
color: var(--color-primary-400, var(--color-primary-400));
}
/* Auth Tips Box */
.ui-auth-tips-box {
padding: 1rem;
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
margin-top: 1.5rem;
}
.dark .ui-auth-tips-box {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-tips-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-900, #0f0f22);
margin: 0 0 0.75rem;
}
.dark .ui-auth-tips-title {
color: var(--color-white);
}
.ui-auth-tips-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ui-auth-tips-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-tips-item {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-tips-icon {
color: var(--color-success-500, var(--color-success-500));
flex-shrink: 0;
margin-top: 0.125rem;
}
/* Auth Security Notice */
.ui-auth-security-notice {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem;
background-color: var(--color-gray-50, #f9fafb);
border-radius: var(--radius-lg, 0.5rem);
margin-top: 1rem;
}
.dark .ui-auth-security-notice {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-auth-security-icon {
color: var(--color-success-600, var(--color-success-600));
flex-shrink: 0;
}
.ui-auth-security-text {
font-size: 0.75rem;
color: var(--color-gray-600, #3e3860);
margin: 0;
}
.dark .ui-auth-security-text {
color: var(--color-gray-400, #9ca3af);
}
/* Auth Footer */
.ui-auth-footer {
text-align: center;
margin-top: 1.5rem;
}
.ui-auth-footer-link {
font-size: 0.875rem;
color: var(--color-gray-600, #3e3860);
display: inline-flex;
align-items: center;
gap: 0.25rem;
text-decoration: none;
}
.dark .ui-auth-footer-link {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-footer-link-action {
font-weight: 500;
color: var(--color-primary-600, #db2777);
margin-left: 0.25rem;
}
.ui-auth-footer-link-action:hover {
color: var(--color-primary-700, var(--color-primary-700));
opacity: 0.85;
}
.ui-auth-footer-link-secondary {
color: var(--color-gray-500, #6b7280);
margin-top: 0.75rem;
}
/* Auth Dividers */
.ui-auth-or-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: 1.5rem 0;
font-size: 0.875rem;
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-or-divider::before,
.ui-auth-or-divider::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-auth-or-divider::before,
.dark .ui-auth-or-divider::after {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-divider {
text-align: center;
margin-top: 1rem;
}
/* Auth Alternative Methods */
.ui-auth-alt-methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
gap: 0.5rem;
}
.ui-auth-alt-method-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 0.75rem 0.5rem;
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
text-decoration: none;
transition: all 0.15s ease;
}
.dark .ui-auth-alt-method-btn {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-alt-method-btn:hover {
background-color: var(--color-gray-100, var(--color-gray-100));
border-color: var(--color-gray-300, #d1d5db);
}
.dark .ui-auth-alt-method-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-alt-method-icon {
font-size: 1.25rem;
color: var(--color-gray-500, #6b7280);
}
.dark .ui-auth-alt-method-icon {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-alt-method-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-alt-method-label {
color: var(--color-gray-400, #9ca3af);
}
/* Auth Alt Buttons */
.ui-auth-alt-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-md, 0.375rem);
text-decoration: none;
transition: all 0.15s ease;
}
.ui-auth-alt-btn-slate {
color: var(--color-gray-600, #3e3860);
background-color: var(--color-gray-100, var(--color-gray-100));
}
.dark .ui-auth-alt-btn-slate {
color: var(--color-gray-400, #9ca3af);
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-alt-btn-purple {
color: var(--color-white);
background-color: var(--color-purple-600, var(--color-accent-600));
}
.ui-auth-alt-btn-cyan {
color: var(--color-white);
background-color: var(--color-info-600, var(--color-info-600));
}
/* Auth Mini Buttons */
.ui-auth-btn-mini {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-md, 0.375rem);
text-decoration: none;
transition: all 0.15s ease;
}
.ui-auth-btn-mini-secondary {
color: var(--color-gray-700, #2a2a4e);
background-color: var(--color-gray-100, var(--color-gray-100));
}
.dark .ui-auth-btn-mini-secondary {
color: var(--color-gray-300, #d1d5db);
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-btn-mini-cyan {
color: var(--color-white);
background-color: var(--color-info-600, var(--color-info-600));
}
/* Auth WhatsApp Button */
.ui-auth-btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-white);
background-color: #25D366;
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
}
.ui-auth-btn-whatsapp:hover {
background-color: #1da851;
}
/* Auth Button Group */
.ui-auth-btn-group {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.ui-auth-btn-group > * {
flex: 1;
}
/* Auth Social Grid */
.ui-auth-social-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.ui-auth-social-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem 0.75rem;
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
text-decoration: none;
transition: all 0.15s ease;
}
.dark .ui-auth-social-btn {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-social-btn:hover {
background-color: var(--color-gray-100, var(--color-gray-100));
border-color: var(--color-gray-300, #d1d5db);
}
.dark .ui-auth-social-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-social-btn i {
font-size: 1.5rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-social-btn i {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-social-btn-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-social-btn-label {
color: var(--color-gray-400, #9ca3af);
}
/* Auth Terms */
.ui-auth-terms-text {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
text-align: center;
margin-top: 1rem;
}
.dark .ui-auth-terms-text {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-terms-link {
color: var(--color-primary-600, #db2777);
text-decoration: none;
}
.ui-auth-terms-link:hover {
opacity: 0.85;
}
/* Auth Account Info */
.ui-auth-account-info {
font-size: 0.8125rem;
color: var(--color-gray-400, #9ca3af);
margin-top: 0.375rem;
}
/* Auth Toast */
.ui-auth-toast {
position: fixed;
top: 1rem;
right: 1rem;
z-index: var(--z-dropdown);
color: var(--color-white);
padding: 0.75rem 1.25rem;
border-radius: var(--radius-lg, 0.5rem);
font-size: 0.875rem;
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
transform: translateX(120%);
transition: transform 0.3s ease;
}
.ui-auth-toast-visible {
transform: translateX(0);
}
/* Auth Recovery Section */
.ui-auth-recovery-section {
margin-top: 1.5rem;
}
.ui-auth-recovery-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-gray-500, #6b7280);
background: none;
border: none;
cursor: pointer;
justify-content: center;
}
.ui-auth-recovery-toggle:hover {
color: var(--color-primary-600, #db2777);
}
.ui-auth-recovery-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
}
.ui-auth-recovery-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-700, #2a2a4e);
margin-bottom: 0.5rem;
}
.dark .ui-auth-recovery-title {
color: var(--color-gray-300, #d1d5db);
}
.ui-auth-recovery-btn {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem;
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.dark .ui-auth-recovery-btn {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-recovery-btn:hover {
background-color: var(--color-gray-100, var(--color-gray-100));
border-color: var(--color-gray-300, #d1d5db);
}
.dark .ui-auth-recovery-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-recovery-btn-icon {
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 0.375rem);
color: var(--color-white);
}
.ui-auth-recovery-btn-icon-amber {
background-color: var(--color-warning-500, var(--color-warning-500));
}
.ui-auth-recovery-btn-icon-green {
background-color: var(--color-success-500, var(--color-success-500));
}
.ui-auth-recovery-btn-icon-blue {
background-color: var(--color-primary-500, var(--color-primary-500));
}
.ui-auth-recovery-btn-content {
flex: 1;
min-width: 0;
}
.ui-auth-recovery-btn-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-800, #1e1e38);
}
.dark .ui-auth-recovery-btn-title {
color: var(--color-gray-200, var(--color-gray-200));
}
.ui-auth-recovery-btn-desc {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.125rem;
}
.dark .ui-auth-recovery-btn-desc {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-recovery-btn-arrow {
color: var(--color-gray-400, #9ca3af);
font-size: 0.75rem;
flex-shrink: 0;
}
.ui-auth-recovery-support {
text-align: center;
margin-top: 0.5rem;
}
.ui-auth-recovery-support-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
text-decoration: none;
}
.ui-auth-recovery-support-link:hover {
color: var(--color-primary-600, #db2777);
}
/* Auth Modal */
.ui-auth-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
}
.ui-auth-modal.hidden {
display: none;
}
.ui-auth-modal-backdrop {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.ui-auth-modal-container {
position: relative;
z-index: var(--z-content);
width: 100%;
max-width: 24rem;
margin: 1rem;
}
.ui-auth-modal-content {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-xl, 0.75rem);
padding: 1.5rem;
box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
}
.dark .ui-auth-modal-content {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-modal-header {
text-align: center;
margin-bottom: 1.25rem;
}
.ui-auth-modal-icon {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--color-white);
margin-bottom: 0.75rem;
}
.ui-auth-modal-icon-amber {
background-color: var(--color-warning-500, var(--color-warning-500));
}
.ui-auth-modal-icon-green {
background-color: var(--color-success-500, var(--color-success-500));
}
.ui-auth-modal-icon-blue {
background-color: var(--color-primary-500, var(--color-primary-500));
}
.ui-auth-modal-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-gray-900, #0f0f22);
}
.dark .ui-auth-modal-title {
color: var(--color-white);
}
.ui-auth-modal-desc {
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.375rem;
}
.dark .ui-auth-modal-desc {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-modal-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ui-auth-modal-actions {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
.ui-auth-modal-actions > * {
flex: 1;
}
.ui-auth-modal-resend {
text-align: center;
margin-top: 0.5rem;
}
.ui-auth-resend-btn {
font-size: 0.8125rem;
color: var(--color-primary-600, #db2777);
background: none;
border: none;
cursor: pointer;
}
.ui-auth-resend-btn:disabled {
color: var(--color-gray-400, #9ca3af);
cursor: not-allowed;
}
/* Auth OTP Group & Container */
.ui-auth-otp-group {
text-align: center;
}
.ui-auth-otp-inputs {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: nowrap;
}
/* Auth OTP Input */
.ui-auth-otp-input {
width: 2.75rem;
height: 3.25rem;
font-size: 1.25rem;
font-weight: 600;
text-align: center;
color: var(--color-gray-900, #0f0f22);
background-color: var(--color-gray-50, #f9fafb);
border: 2px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
transition: all 0.15s ease;
}
.dark .ui-auth-otp-input {
color: var(--color-white);
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-600, #3e3860);
}
.ui-auth-otp-input:focus {
outline: none;
border-color: var(--color-primary-500, var(--color-primary-500));
background-color: var(--color-white);
}
.dark .ui-auth-otp-input:focus {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-otp-separator {
display: flex;
align-items: center;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-300, #d1d5db);
padding: 0 0.25rem;
}
.dark .ui-auth-otp-separator {
color: var(--color-gray-600, #3e3860);
}
.ui-auth-otp-status {
text-align: center;
margin-top: 0.75rem;
}
.ui-auth-otp-status-text {
font-size: 0.875rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-otp-status-text {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-otp-timer {
font-weight: 600;
color: var(--color-primary-600, #db2777);
}
.ui-auth-otp-resend {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary-600, #db2777);
background: none;
border: none;
cursor: pointer;
text-decoration: none;
}
.ui-auth-otp-resend:disabled {
color: var(--color-gray-400, #9ca3af);
cursor: not-allowed;
}
.ui-auth-otp-resend:not(:disabled):hover {
opacity: 0.85;
}
/* Auth PIN Components */
.ui-auth-pin-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.ui-auth-pin-dots {
display: flex;
gap: 0.75rem;
}
.ui-auth-pin-dot {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gray-100, var(--color-gray-100));
border: 2px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
transition: all 0.15s ease;
}
.dark .ui-auth-pin-dot {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-600, #3e3860);
}
.ui-auth-pin-dot-active {
background-color: var(--color-primary-100, #fce7f3);
border-color: var(--color-primary-500, var(--color-primary-500));
}
.dark .ui-auth-pin-dot-active {
background-color: rgba(var(--color-primary-rgb), 0.2);
border-color: var(--color-primary-500, var(--color-primary-500));
}
.ui-auth-pin-dot .pin-digit {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gray-900, #0f0f22);
}
.dark .ui-auth-pin-dot .pin-digit {
color: var(--color-white);
}
/* Auth Keypad */
.ui-auth-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
max-width: 16rem;
}
.ui-auth-keypad-btn {
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-gray-900, #0f0f22);
background-color: var(--color-gray-100, var(--color-gray-100));
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-xl, 0.75rem);
cursor: pointer;
transition: all 0.15s ease;
}
.dark .ui-auth-keypad-btn {
color: var(--color-white);
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-keypad-btn:hover {
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-auth-keypad-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-keypad-btn:active {
opacity: 0.9;
}
/* Auth Pattern Components */
.ui-auth-pattern-container {
position: relative;
width: 100%;
max-width: 300px;
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.ui-auth-pattern-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 1rem;
}
.ui-auth-pattern-dot {
width: 2.5rem;
height: 2.5rem;
background-color: var(--color-gray-200, var(--color-gray-200));
border: 3px solid var(--color-gray-300, #d1d5db);
border-radius: 50%;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.dark .ui-auth-pattern-dot {
background-color: var(--color-gray-700, #2a2a4e);
border-color: var(--color-gray-600, #3e3860);
}
.ui-auth-pattern-dot:hover {
border-color: var(--color-primary-400);
}
.ui-auth-pattern-dot.active {
background-color: var(--color-teal-500, #14b8a6);
border-color: var(--color-teal-600, var(--color-info-600));
}
.ui-auth-pattern-dot-inner {
width: 1rem;
height: 1rem;
background-color: transparent;
border-radius: 50%;
transition: all 0.15s ease;
}
.ui-auth-pattern-dot-inner-active {
background-color: var(--color-white);
}
.ui-auth-pattern-status {
font-size: 0.875rem;
color: var(--color-gray-500, #6b7280);
transition: color 0.15s ease;
}
.dark .ui-auth-pattern-status {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-pattern-status-warning {
color: var(--color-warning-600, var(--color-warning-700));
}
.ui-auth-pattern-status-success {
color: var(--color-success-600, var(--color-success-600));
}
/* Auth Biometric */
.ui-auth-biometric-status {
text-align: center;
}
.ui-auth-biometric-status-icon {
font-size: 4rem;
color: var(--color-primary-500, var(--color-primary-500));
}
.ui-auth-biometric-status-icon.animate {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Fade In - Animação genérica */
@keyframes ui-fadeIn {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
animation: ui-fadeIn 0.2s ease-out;
}
.ui-auth-status-message {
font-size: 0.9375rem;
color: var(--color-gray-700, #2a2a4e);
margin: 0 0 0.25rem;
}
.dark .ui-auth-status-message {
color: var(--color-gray-300, #d1d5db);
}
.ui-auth-status-hint {
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
margin: 0;
}
.dark .ui-auth-status-hint {
color: var(--color-gray-400, #9ca3af);
}
/* Auth QR Code */
.ui-auth-qr-container {
display: flex;
justify-content: center;
margin: 1rem 0;
}
.ui-auth-qr-code {
padding: 1rem;
background-color: var(--color-white);
border-radius: var(--radius-lg, 0.5rem);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
}
.ui-auth-qr-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--color-gray-100, var(--color-gray-100));
border-radius: var(--radius-md, 0.375rem);
margin-bottom: 1rem;
}
.dark .ui-auth-qr-timer {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-auth-qr-timer-warning {
background-color: var(--color-warning-100, var(--color-warning-100));
}
.dark .ui-auth-qr-timer-warning {
background-color: rgba(245, 158, 11, 0.1);
}
.ui-auth-qr-timer-icon {
color: var(--color-gray-500, #6b7280);
}
.ui-auth-qr-timer-text {
font-size: 0.875rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-qr-timer-text {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-qr-timer-value {
font-weight: 600;
color: var(--color-warning-600, var(--color-warning-700));
}
.ui-auth-qr-status {
text-align: center;
padding: 0.75rem;
border-radius: var(--radius-md, 0.375rem);
margin-top: 1rem;
}
.ui-auth-qr-status-pending {
background-color: var(--color-primary-50, #fdf2f8);
color: var(--color-primary-700, var(--color-primary-700));
}
.dark .ui-auth-qr-status-pending {
background-color: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary-400, var(--color-primary-400));
}
/* Auth Icon Colors */
.ui-auth-icon-blue { color: var(--color-primary-600, #db2777); }
.ui-auth-alert-icon-warning { color: var(--color-warning-500, var(--color-warning-500)); }
.ui-auth-alert-icon-error { color: var(--color-danger-500, var(--color-danger-500)); }
/* ============================================
AUTH RESPONSIVE - Mobile Breakpoints
============================================ */
/* Prevent horizontal overflow on auth card */
.auth-card {
overflow-x: hidden;
}
/* --- 480px breakpoint --- */
@media (max-width: 480px) {
/* OTP inputs - smaller on mobile */
.ui-auth-otp-input {
width: 2.25rem;
height: 2.75rem;
font-size: 1.125rem;
}
.ui-auth-otp-separator {
padding: 0 0.125rem;
font-size: 1rem;
}
.ui-auth-otp-inputs {
gap: 0.375rem;
}
/* PIN dots - smaller on mobile */
.ui-auth-pin-dots {
gap: 0.5rem;
}
.ui-auth-pin-dot {
width: 2.5rem;
height: 2.5rem;
}
.ui-auth-pin-dot .pin-digit {
font-size: 1.25rem;
}
/* Keypad - slightly smaller on mobile */
.ui-auth-keypad {
gap: 0.5rem;
max-width: 14rem;
}
.ui-auth-keypad-btn {
width: 3.5rem;
height: 3.5rem;
font-size: 1.25rem;
}
/* Social grid - 2 columns on mobile */
.ui-auth-social-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.ui-auth-social-btn {
padding: 0.75rem 0.5rem;
}
/* Alt methods grid - shrink min */
.ui-auth-alt-methods-grid {
grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
gap: 0.375rem;
}
.ui-auth-alt-method-btn {
padding: 0.5rem 0.25rem;
}
.ui-auth-alt-method-label {
font-size: 0.625rem;
}
/* Method selector - wrap on mobile */
.ui-auth-method-selector {
flex-wrap: wrap;
}
.ui-auth-method-btn {
font-size: 0.75rem;
padding: 0.375rem 0.625rem;
}
/* Credential toggle - smaller */
.ui-auth-credential-toggle {
flex-wrap: wrap;
}
.ui-auth-credential-btn {
font-size: 0.8125rem;
padding: 0.375rem 0.75rem;
}
/* Channel grid - 3 cols with less gap */
.ui-auth-channel-grid {
gap: 0.5rem;
}
.ui-auth-channel-option {
padding: 0.5rem;
font-size: 0.75rem;
}
.ui-auth-channel-option i {
font-size: 1rem;
}
/* Button group - stack vertically */
.ui-auth-btn-group {
flex-direction: column;
gap: 0.5rem;
}
/* Recovery buttons - tighter */
.ui-auth-recovery-btn {
padding: 0.625rem;
}
.ui-auth-recovery-btn-desc {
font-size: 0.6875rem;
}
/* Modal - full width on mobile */
.ui-auth-modal-container {
margin: 1rem;
max-width: calc(100vw - 2rem);
}
.ui-auth-modal-content {
padding: 1.25rem;
}
.ui-auth-modal-actions {
flex-direction: column;
gap: 0.5rem;
}
.ui-auth-modal-actions > * {
width: 100%;
}
/* Pattern grid - tighter */
.ui-auth-pattern-grid {
gap: 1.5rem;
padding: 0.75rem;
}
.ui-auth-pattern-dot {
width: 2.25rem;
height: 2.25rem;
}
.ui-auth-pattern-dot-inner {
width: 0.875rem;
height: 0.875rem;
}
/* Info box - tighter padding */
.ui-auth-info-box {
padding: 0.75rem;
}
/* Biometric icon - smaller */
.ui-auth-biometric-status-icon {
font-size: 3rem;
}
/* Button text wrapping */
.ui-auth-btn-primary,
.ui-auth-btn-secondary {
font-size: 0.875rem;
padding: 0.625rem 1rem;
}
}
/* --- 360px breakpoint (very small phones) --- */
@media (max-width: 360px) {
/* OTP inputs - even smaller */
.ui-auth-otp-input {
width: 1.875rem;
height: 2.5rem;
font-size: 1rem;
border-width: 1.5px;
}
.ui-auth-otp-separator {
padding: 0;
font-size: 0.875rem;
}
.ui-auth-otp-inputs {
gap: 0.25rem;
}
/* PIN dots - even smaller */
.ui-auth-pin-dots {
gap: 0.375rem;
}
.ui-auth-pin-dot {
width: 2rem;
height: 2rem;
}
.ui-auth-pin-dot .pin-digit {
font-size: 1rem;
}
/* Keypad - smaller but still tappable */
.ui-auth-keypad {
gap: 0.375rem;
max-width: 12rem;
}
.ui-auth-keypad-btn {
width: 3rem;
height: 3rem;
font-size: 1.125rem;
border-radius: var(--radius-lg, 0.5rem);
}
/* Social grid - 2 columns even tighter */
.ui-auth-social-grid {
gap: 0.375rem;
}
.ui-auth-social-btn {
padding: 0.5rem 0.375rem;
gap: 0.25rem;
}
.ui-auth-social-btn i {
font-size: 1.125rem;
}
.ui-auth-social-btn-label {
font-size: 0.625rem;
}
/* Alt methods - 3 per row max */
.ui-auth-alt-methods-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
}
.ui-auth-alt-method-btn {
padding: 0.375rem 0.125rem;
gap: 0.25rem;
}
.ui-auth-alt-method-icon {
font-size: 1rem;
}
.ui-auth-alt-method-label {
font-size: 0.5625rem;
}
/* Method selector - even tighter */
.ui-auth-method-btn {
font-size: 0.6875rem;
padding: 0.25rem 0.5rem;
min-width: 0;
}
/* Channel grid */
.ui-auth-channel-option {
padding: 0.375rem;
font-size: 0.6875rem;
gap: 0.25rem;
}
/* Pattern grid - compact */
.ui-auth-pattern-grid {
gap: 1.25rem;
padding: 0.5rem;
}
.ui-auth-pattern-dot {
width: 2rem;
height: 2rem;
}
/* Recovery options - compact */
.ui-auth-recovery-btn {
padding: 0.5rem;
gap: 0.5rem;
}
.ui-auth-recovery-btn-icon {
width: 2rem;
height: 2rem;
min-width: 2rem;
}
.ui-auth-recovery-btn-icon i {
font-size: 0.875rem;
}
.ui-auth-recovery-btn-title {
font-size: 0.8125rem;
}
.ui-auth-recovery-btn-desc {
font-size: 0.625rem;
}
}
/* --- intl-tel-input mobile fixes --- */
@media (max-width: 480px) {
.iti__dropdown-content {
max-width: calc(100vw - 2rem);
}
.iti__country-container {
max-width: 90px;
}
.iti__selected-dial-code {
font-size: 0.8125rem;
}
}
/* ============================================
BALANCE CARD - Cards de Saldo (Financial)
============================================ */
.ui-balance-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-lg, 0.5rem);
padding: 1rem;
transition: all 0.15s ease;
}
.dark .ui-balance-card {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-balance-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.ui-balance-card-icon {
width: 2rem;
height: 2rem;
border-radius: var(--radius-md, 0.375rem);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
flex-shrink: 0;
}
.ui-balance-card-icon:not([class*="ui-icon-bg"]) {
background-color: var(--color-gray-500);
color: var(--color-white);
}
.ui-balance-card-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-500, #6b7280);
}
.dark .ui-balance-card-label {
color: var(--color-gray-400, #9ca3af);
}
.ui-balance-card-value {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-gray-900, #0f0f22);
margin: 0;
}
.dark .ui-balance-card-value {
color: var(--color-white);
}
.ui-balance-card-highlight {
background-color: var(--color-primary-50, #fdf2f8);
border-color: var(--color-primary-200, #fbcfe8);
}
.dark .ui-balance-card-highlight {
background-color: rgba(var(--color-primary-rgb), 0.1);
border-color: rgba(var(--color-primary-rgb), 0.3);
}
/* ============================================
STATUS UTILITIES
============================================ */
.ui-status-info { color: var(--color-primary-600, #db2777); }
.ui-status-danger { color: var(--color-danger-500, var(--color-danger-500)); }
/* ============================================
NOTIFICAÇÕES - Tabela de Preferências
============================================ */
/* Tabela de notificações responsiva */
.ui-notif-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.ui-notif-table thead th {
padding: 0.75rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--color-gray-500, #6b7280);
text-align: center;
white-space: nowrap;
background-color: var(--color-gray-50, #f9fafb);
}
.dark .ui-notif-table thead th {
background-color: var(--color-gray-800, #1e1e38);
color: var(--color-gray-400, #9ca3af);
}
.ui-notif-table thead th:first-child {
text-align: left;
width: 40%;
padding-left: 1rem;
}
.ui-notif-table tbody td {
padding: 0.625rem 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-900, #0f0f22);
border-bottom: 1px solid var(--color-gray-100, var(--color-gray-100));
}
.dark .ui-notif-table tbody td {
color: var(--color-gray-100, var(--color-gray-100));
border-bottom-color: var(--color-gray-700, #2a2a4e);
}
.ui-notif-table tbody td:first-child {
padding-left: 1rem;
}
.ui-notif-table tbody tr:hover {
background-color: var(--color-gray-50, #f9fafb);
}
.dark .ui-notif-table tbody tr:hover {
background-color: var(--color-gray-750, #2d3748);
}
.ui-notif-table tbody td:not(:first-child) {
text-align: center;
}
/* Checkbox customizado para tabela de notificações */
.ui-notif-checkbox {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.ui-notif-checkbox input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: var(--z-base);
}
.ui-notif-checkbox-box {
width: 18px;
height: 18px;
border: 2px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-sm, 0.25rem);
background-color: var(--color-gray-50, #f9fafb);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.dark .ui-notif-checkbox-box {
border-color: var(--color-gray-600, #3e3860);
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-notif-checkbox-icon {
width: 10px;
height: 10px;
color: var(--color-white);
opacity: 0;
transform: scale(0.5);
transition: all 0.15s ease;
}
.ui-notif-checkbox input:checked + .ui-notif-checkbox-box {
background-color: var(--color-primary-600, #db2777);
border-color: var(--color-primary-600, #db2777);
}
.ui-notif-checkbox input:checked + .ui-notif-checkbox-box .ui-notif-checkbox-icon {
opacity: 1;
transform: scale(1);
}
.ui-notif-checkbox input:focus + .ui-notif-checkbox-box {
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}
/* Checkbox padrão estilizado (para formulários em geral) */
input[type="checkbox"].ui-checkbox {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 2px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-sm, 0.25rem);
background-color: var(--color-gray-50, #f9fafb);
cursor: pointer;
transition: all 0.15s ease;
position: relative;
}
.dark input[type="checkbox"].ui-checkbox {
border-color: var(--color-gray-600, #3e3860);
background-color: var(--color-gray-700, #2a2a4e);
}
input[type="checkbox"].ui-checkbox:checked {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
}
input[type="checkbox"].ui-checkbox:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 9px;
border: solid var(--color-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type="checkbox"].ui-checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}
/* Toggle switch customizado */
.ui-toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.ui-toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ui-toggle-switch-track {
width: 2.75rem;
height: 1.5rem;
background-color: var(--color-gray-300);
border-radius: var(--radius-full, 9999px);
transition: background-color 0.2s ease;
position: relative;
}
.dark .ui-toggle-switch-track {
background-color: var(--color-gray-600);
}
.ui-toggle-switch-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 1.25rem;
height: 1.25rem;
background-color: var(--color-white);
border-radius: var(--radius-full, 9999px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.ui-toggle-switch input:checked + .ui-toggle-switch-track {
background-color: var(--color-primary-600);
}
.ui-toggle-switch input:checked + .ui-toggle-switch-track::after {
transform: translateX(1.25rem);
}
.ui-toggle-switch input:focus + .ui-toggle-switch-track {
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}
/* ============================================
OTIMIZAÇÕES DE AUTENTICAÇÃO v2
Modo escuro/claro, alinhamentos, botões
============================================ */
/* --- BOTÕES SMS/WHATSAPP COMPACTOS --- */
.ui-auth-btn-compact {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.375rem 0.5rem;
font-size: 0.6875rem;
font-weight: 500;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
min-width: 0;
flex-shrink: 1;
}
/* Botão SMS Compacto */
.ui-auth-btn-sms {
color: var(--color-gray-700, #2a2a4e);
background-color: var(--color-gray-100, var(--color-gray-100));
border: 1px solid var(--color-gray-300, #d1d5db);
}
.ui-auth-btn-sms:hover:not(:disabled) {
background-color: var(--color-gray-200, var(--color-gray-200));
border-color: var(--color-gray-400, #9ca3af);
}
.dark .ui-auth-btn-sms {
color: var(--color-gray-300, #d1d5db);
background-color: var(--color-gray-700, #2a2a4e);
border-color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-btn-sms:hover:not(:disabled) {
background-color: var(--color-gray-600, #3e3860);
border-color: var(--color-gray-500, #6b7280);
}
/* WhatsApp Button Otimizado */
.ui-auth-btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.375rem 0.5rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-white);
background-color: #25D366;
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
min-width: 0;
flex-shrink: 1;
}
.ui-auth-btn-whatsapp:hover:not(:disabled) {
background-color: #1da851;
}
.ui-auth-btn-whatsapp:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Secondary Button Compacto */
.ui-auth-btn-secondary.ui-auth-btn-compact {
padding: 0.375rem 0.5rem;
font-size: 0.6875rem;
}
/* --- GRUPO DE BOTÕES RESPONSIVO --- */
.ui-auth-btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.ui-auth-btn-row > * {
flex: 1 1 auto;
min-width: 0;
}
/* Em telas muito pequenas, empilhar */
@media (max-width: 360px) {
.ui-auth-btn-row {
flex-direction: column;
}
.ui-auth-btn-row > * {
flex: 1 1 100%;
}
}
/* --- ÍCONE DO WHATSAPP NO LABEL --- */
.ui-auth-label-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.ui-auth-label-icon-success {
color: #25D366;
}
.ui-auth-label-with-icon {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.ui-auth-label-with-icon svg {
width: 1rem;
height: 1rem;
}
/* --- INFO BOX OTIMIZADA --- */
.ui-auth-info-box {
background-color: var(--color-primary-50, #fdf2f8);
border: 1px solid var(--color-primary-200, #fbcfe8);
border-radius: var(--radius-md, 0.375rem);
padding: 0.75rem;
margin-top: 0.75rem;
}
.dark .ui-auth-info-box {
background-color: rgba(var(--color-primary-rgb), 0.1);
border-color: rgba(var(--color-primary-rgb), 0.3);
}
.ui-auth-info-box-icon {
color: var(--color-primary-500, var(--color-primary-500));
flex-shrink: 0;
margin-top: 0.125rem;
}
.ui-auth-info-box-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-gray-800, #1e1e38);
margin-bottom: 0.25rem;
}
.dark .ui-auth-info-box-title {
color: var(--color-gray-200, var(--color-gray-200));
}
.ui-auth-info-box-text {
font-size: 0.6875rem;
color: var(--color-gray-600, #3e3860);
margin-bottom: 0.5rem;
}
.dark .ui-auth-info-box-text {
color: var(--color-gray-400, #9ca3af);
}
/* --- INPUTS PADRONIZADOS --- */
.ui-auth-input {
display: block;
width: 100%;
height: 2.75rem;
padding: 0 0.875rem;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-gray-900, #0f0f22);
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-md, 0.375rem);
transition: all 0.15s ease;
}
.dark .ui-auth-input {
color: var(--color-white);
background-color: rgba(15, 23, 42, 0.6);
border-color: rgba(71, 85, 105, 0.5);
}
.ui-auth-input:focus {
outline: none;
border-color: var(--color-primary-500, var(--color-primary-500));
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.dark .ui-auth-input:focus {
background-color: rgba(15, 23, 42, 0.8);
border-color: rgba(var(--color-primary-rgb), 0.5);
}
/* WCAG AA: 4.5:1 minimum contrast ratio */
.ui-auth-input::placeholder {
color: var(--color-gray-500);
}
.dark .ui-auth-input::placeholder {
color: var(--color-gray-400);
}
/* Input com ícone de status */
.ui-auth-input-with-status {
padding-right: 2.75rem;
}
.ui-auth-input-status {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
}
/* --- LABELS PADRONIZADOS --- */
.ui-auth-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-700, #2a2a4e);
margin-bottom: 0.5rem;
}
.dark .ui-auth-label {
color: var(--color-gray-300, #d1d5db);
}
.ui-auth-label.ui-mb-0 {
margin-bottom: 0;
}
.ui-auth-required {
color: var(--color-danger-500, var(--color-danger-500));
}
.ui-auth-optional {
font-weight: 400;
color: var(--color-gray-500, #6b7280);
}
.dark .ui-auth-optional {
color: var(--color-gray-500, #6b7280);
}
/* --- FEEDBACK E HELP TEXT --- */
.ui-auth-feedback {
font-size: 0.75rem;
margin-top: 0.375rem;
}
.ui-auth-help-text {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.375rem;
}
.dark .ui-auth-help-text {
color: var(--color-gray-500, #6b7280);
}
/* --- CHECKBOX E TERMOS --- */
.ui-auth-checkbox-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.ui-auth-checkbox {
position: relative;
cursor: pointer;
flex-shrink: 0;
}
.ui-auth-checkbox-box {
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-sm, 0.25rem);
background-color: var(--color-gray-50, #f9fafb);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.dark .ui-auth-checkbox-box {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-600, #3e3860);
}
.ui-auth-checkbox-icon {
font-size: 0.75rem;
color: var(--color-white);
opacity: 0;
transition: opacity 0.15s ease;
}
.ui-auth-checkbox input:checked + .ui-auth-checkbox-box {
background-color: var(--color-primary-600, #db2777);
border-color: var(--color-primary-600, #db2777);
}
.ui-auth-checkbox input:checked + .ui-auth-checkbox-box .ui-auth-checkbox-icon {
opacity: 1;
}
.ui-auth-terms-text {
font-size: 0.8125rem;
color: var(--color-gray-600, #3e3860);
line-height: 1.4;
}
.dark .ui-auth-terms-text {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-terms-link {
color: var(--color-primary-600, #db2777);
text-decoration: none;
font-weight: 500;
}
.ui-auth-terms-link:hover {
opacity: 0.85;
}
/* --- BOTÃO PRIMÁRIO PADRONIZADO --- */
.ui-auth-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: 2.75rem;
padding: 0 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-white);
background-color: var(--color-primary-600, #db2777);
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.2s ease;
}
.ui-auth-btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-700, var(--color-primary-700));
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.ui-auth-btn-primary:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width, 3px) rgba(var(--color-primary-rgb), 0.3);
}
.ui-auth-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.ui-auth-btn-primary:active:not(:disabled) {
opacity: 0.9;
}
/* --- HEADER DE AUTENTICAÇÃO --- */
.ui-auth-header {
text-align: center;
margin-bottom: 1.5rem;
}
.ui-auth-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: var(--radius-xl, 0.75rem);
background-color: var(--color-primary-600, #db2777);
color: var(--color-white);
margin-bottom: 1rem;
}
.ui-auth-logo-success {
background-color: var(--color-success-600, var(--color-success-600));
}
.ui-auth-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gray-900, #0f0f22);
margin-bottom: 0.5rem;
}
.dark .ui-auth-title {
color: var(--color-white);
}
.ui-auth-subtitle {
font-size: 0.9375rem;
color: var(--color-gray-500, #6b7280);
}
.dark .ui-auth-subtitle {
color: var(--color-gray-400, #9ca3af);
}
/* --- ALERTAS --- */
.ui-auth-alert {
padding: 0.875rem 1rem;
border-radius: var(--radius-md, 0.375rem);
margin-bottom: 1.25rem;
}
.ui-auth-alert-error {
background-color: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.ui-auth-alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.3);
}
.ui-auth-alert-success {
background-color: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ui-auth-alert-content {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.ui-auth-alert-icon {
flex-shrink: 0;
font-size: 1.125rem;
margin-top: 0.125rem;
}
.ui-auth-alert-error .ui-auth-alert-icon { color: var(--color-danger-500, var(--color-danger-500)); }
.ui-auth-alert-warning .ui-auth-alert-icon { color: var(--color-warning-500, var(--color-warning-500)); }
.ui-auth-alert-success .ui-auth-alert-icon { color: var(--color-success-500, var(--color-success-500)); }
.ui-auth-alert-body { flex: 1; }
.ui-auth-alert-text {
font-size: 0.875rem;
color: var(--color-gray-700, #2a2a4e);
}
.dark .ui-auth-alert-text {
color: var(--color-gray-300, #d1d5db);
}
.ui-auth-alert-action {
margin-top: 0.5rem;
}
.ui-auth-alert-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary-600, #db2777);
text-decoration: none;
}
.ui-auth-alert-link:hover {
opacity: 0.85;
}
/* --- SELETOR DE MÉTODO --- */
.ui-auth-method-selector {
display: flex;
gap: 0.25rem;
padding: 0.25rem;
background-color: var(--color-gray-100, var(--color-gray-100));
border-radius: var(--radius-lg, 0.5rem);
overflow-x: auto;
}
.dark .ui-auth-method-selector {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-auth-method-btn {
flex: 1;
padding: 0.625rem 1rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
background: none;
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.ui-auth-method-btn:hover {
color: var(--color-gray-900, #0f0f22);
}
.dark .ui-auth-method-btn {
color: var(--color-gray-400, #9ca3af);
}
.dark .ui-auth-method-btn:hover {
color: var(--color-gray-200, var(--color-gray-200));
}
.ui-auth-method-btn.active {
color: var(--color-white);
background-color: var(--color-primary-600, #db2777);
}
.dark .ui-auth-method-btn.active {
color: var(--color-white);
background-color: var(--color-primary-600, #db2777);
}
/* --- TOGGLE EMAIL/TELEFONE --- */
.ui-auth-credential-toggle {
display: flex;
gap: 0.25rem;
padding: 0.25rem;
background-color: var(--color-gray-100, var(--color-gray-100));
border-radius: var(--radius-lg, 0.5rem);
margin-bottom: 1.25rem;
}
.dark .ui-auth-credential-toggle {
background-color: var(--color-gray-800, #1e1e38);
}
.ui-auth-credential-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
background: none;
border: none;
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
}
.ui-auth-credential-btn:hover {
color: var(--color-gray-900, #0f0f22);
}
.dark .ui-auth-credential-btn {
color: var(--color-gray-400, #9ca3af);
}
.dark .ui-auth-credential-btn:hover {
color: var(--color-gray-200, var(--color-gray-200));
}
.ui-auth-credential-btn.active {
color: var(--color-white);
background-color: var(--color-primary-600, #db2777);
}
/* --- CANAL DE TOKEN (EMAIL/SMS/WHATSAPP) --- */
.ui-auth-channel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.ui-auth-channel-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 0.75rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-600, #3e3860);
background-color: var(--color-gray-50, #f9fafb);
border: 2px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-md, 0.375rem);
cursor: pointer;
transition: all 0.15s ease;
}
.dark .ui-auth-channel-option {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-channel-option:hover {
border-color: var(--color-gray-300, #d1d5db);
}
.ui-auth-channel-option:has(input:checked) {
border-color: var(--color-primary-500, var(--color-primary-500));
background-color: var(--color-primary-50, #fdf2f8);
color: var(--color-primary-700, var(--color-primary-700));
}
.dark .ui-auth-channel-option:has(input:checked) {
border-color: var(--color-primary-500, var(--color-primary-500));
background-color: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary-400, var(--color-primary-400));
}
.ui-auth-channel-option-whatsapp:has(input:checked) {
border-color: #25D366;
background-color: rgba(37, 211, 102, 0.1);
color: #1da851;
}
/* --- DIVISOR "OU" --- */
.ui-auth-or-divider {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.8125rem;
color: var(--color-gray-500, #6b7280);
margin: 1.5rem 0;
}
.ui-auth-or-divider::before,
.ui-auth-or-divider::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--color-gray-200, var(--color-gray-200));
}
.dark .ui-auth-or-divider::before,
.dark .ui-auth-or-divider::after {
background-color: var(--color-gray-700, #2a2a4e);
}
/* --- MÉTODOS ALTERNATIVOS --- */
.ui-auth-alt-methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
gap: 0.5rem;
}
.ui-auth-alt-method-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 0.75rem 0.5rem;
font-size: 0.6875rem;
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-md, 0.375rem);
text-decoration: none;
transition: all 0.15s ease;
}
.dark .ui-auth-alt-method-btn {
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-alt-method-btn:hover {
background-color: var(--color-gray-100, var(--color-gray-100));
border-color: var(--color-gray-300, #d1d5db);
}
.dark .ui-auth-alt-method-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-alt-method-icon {
font-size: 1.125rem;
color: var(--color-gray-500, #6b7280);
}
.dark .ui-auth-alt-method-icon {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-alt-method-label {
font-weight: 500;
color: var(--color-gray-700, #2a2a4e);
}
.dark .ui-auth-alt-method-label {
color: var(--color-gray-300, #d1d5db);
}
/* --- SOCIAL GRID --- */
.ui-auth-social-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media (max-width: 400px) {
.ui-auth-social-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- LINKS DO RODAPÉ --- */
.ui-auth-footer-link {
text-align: center;
font-size: 0.875rem;
color: var(--color-gray-600, #3e3860);
margin-top: 1.25rem;
}
.dark .ui-auth-footer-link {
color: var(--color-gray-400, #9ca3af);
}
.ui-auth-footer-link-action {
font-weight: 600;
color: var(--color-primary-600, #db2777);
text-decoration: none;
}
.ui-auth-footer-link-action:hover {
opacity: 0.85;
}
.ui-auth-footer-link-secondary {
font-size: 0.8125rem;
margin-top: 0.75rem;
}
/* --- LINK SIMPLES --- */
.ui-auth-link {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary-600, #db2777);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.ui-auth-link:hover {
opacity: 0.85;
}
/* --- TOGGLE LEMBRAR DISPOSITIVO --- */
.ui-auth-remember-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ui-auth-remember-toggle {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
flex-shrink: 0;
}
.ui-auth-toggle-track {
width: 2.5rem;
height: 1.375rem;
background-color: var(--color-gray-300, #d1d5db);
border-radius: var(--radius-full, 9999px);
transition: background-color 0.15s ease;
}
.ui-auth-remember-toggle input:checked + .ui-auth-toggle-track {
background-color: var(--color-primary-600, #db2777);
}
.ui-auth-toggle-track::after {
content: '';
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 1.125rem;
height: 1.125rem;
background-color: var(--color-white);
border-radius: var(--radius-full, 9999px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.15s ease;
}
.ui-auth-remember-toggle input:checked + .ui-auth-toggle-track::after {
transform: translateX(1.125rem);
}
.ui-auth-remember-text {
font-size: 0.8125rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-remember-text {
color: var(--color-gray-400, #9ca3af);
}
/* --- FORÇA DA SENHA --- */
.ui-auth-password-strength {
margin-top: 0.5rem;
}
.ui-auth-strength-track {
height: 0.25rem;
background-color: var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-full, 9999px);
overflow: hidden;
}
.dark .ui-auth-strength-track {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-strength-bar {
height: 100%;
width: 0;
transition: all 0.3s ease;
border-radius: var(--radius-full, 9999px);
}
.ui-auth-strength-text {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.25rem;
}
/* --- SEÇÕES --- */
.ui-auth-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-full, 9999px);
color: var(--color-white);
margin-bottom: 0.75rem;
}
.ui-auth-section-icon-primary { background-color: var(--color-primary-600, #db2777); }
.ui-auth-section-icon-success { background-color: var(--color-success-600, var(--color-success-600)); }
.ui-auth-section-icon-warning { background-color: var(--color-warning-600, var(--color-warning-700)); }
.ui-auth-section-icon-purple { background-color: var(--color-purple-600, var(--color-accent-600)); }
.ui-auth-section-icon-cyan { background-color: var(--color-info-600, var(--color-info-600)); }
.ui-auth-section-icon-indigo { background-color: var(--color-indigo-600, var(--color-primary-600)); }
.ui-auth-section-text {
font-size: 0.875rem;
color: var(--color-gray-600, #3e3860);
}
.dark .ui-auth-section-text {
color: var(--color-gray-400, #9ca3af);
}
/* --- PADRÃO (PATTERN) --- */
.ui-auth-pattern-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding: 1.5rem;
touch-action: none;
}
.ui-auth-pattern-dot {
width: 3rem;
height: 3rem;
border-radius: var(--radius-full, 9999px);
background-color: var(--color-gray-200, var(--color-gray-200));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.dark .ui-auth-pattern-dot {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-pattern-dot-inner {
width: 1rem;
height: 1rem;
border-radius: var(--radius-full, 9999px);
background-color: var(--color-gray-400, #9ca3af);
transition: all 0.15s ease;
}
.dark .ui-auth-pattern-dot-inner {
background-color: var(--color-gray-500, #6b7280);
}
.ui-auth-pattern-dot-active {
background-color: var(--color-primary-100, #fce7f3);
}
.dark .ui-auth-pattern-dot-active {
background-color: rgba(var(--color-primary-rgb), 0.2);
}
.ui-auth-pattern-dot-inner-active {
background-color: var(--color-primary-600, #db2777);
transform: scale(1.2);
}
/* --- SOCIAL LOGIN BUTTONS --- */
.ui-auth-social-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-700, #2a2a4e);
background-color: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-200, var(--color-gray-200));
border-radius: var(--radius-md, 0.375rem);
text-decoration: none;
transition: all 0.15s ease;
}
.dark .ui-auth-social-login-btn {
color: var(--color-gray-300, #d1d5db);
background-color: var(--color-gray-800, #1e1e38);
border-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-social-login-btn:hover {
background-color: var(--color-gray-100, var(--color-gray-100));
border-color: var(--color-gray-300, #d1d5db);
}
.dark .ui-auth-social-login-btn:hover {
background-color: var(--color-gray-700, #2a2a4e);
}
.ui-auth-social-login-btn svg {
width: 1.25rem;
height: 1.25rem;
}
/* ============================================
CORREÇÕES VISUAIS - 2026-02-04
============================================ */
/* --- FIX: Header card z-index para dropdown aparecer sobre o conteúdo --- */
/* Aplica a todos os settings-header-card, não só ao admin */
.settings-header-card {
z-index: var(--z-card);
overflow: visible;
}
.settings-content-card-v2 {
z-index: var(--z-base);
}
.settings-header-actions {
position: relative;
z-index: var(--z-card-actions);
}
/* --- FIX: Dropdowns inline devem usar z-index do design system --- */
.plugin-status-dropdown > [id^="plugin-menu-"],
.plugin-grid-dropdown > [id^="plugin-menu-"],
[data-ui="dropdown"] .dropdown-menu,
.ui-admin-settings-card .relative > [class*="absolute"][class*="shadow"] {
z-index: var(--z-dropdown);
}
/* Dropdown container — precisa de posição relativa e overflow visível */
.plugin-status-dropdown,
.plugin-grid-dropdown {
overflow: visible;
}
/* --- FIX: Menu dropdown z-index e posicionamento --- */
.settings-menu-container-v2 {
position: relative;
z-index: var(--z-card-actions);
}
.settings-menu-dropdown-v2 {
z-index: var(--z-popover);
}
/* --- FIX: Ícone do header consistente com plugins --- */
.settings-header-card .settings-header-icon,
.page-shell .page-header-icon {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: var(--radius-xl, 0.75rem);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
font-size: 1.25rem;
background: linear-gradient(135deg, var(--color-primary-500, var(--color-primary-500)), var(--color-primary-700, var(--color-primary-700)));
}
/* Inner span must fill parent and center icon — override ui-w-*/ui-h-* constraints */
.settings-header-icon > span,
.page-header-icon > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
line-height: 1;
}
.settings-header-icon i,
.settings-header-icon svg,
.page-header-icon i,
.page-header-icon svg {
font-size: 1.25rem;
width: 1.25rem;
height: 1.25rem;
line-height: 1;
}
/* --- FIX: Campo de busca - ícone não sobrepor texto --- */
.settings-search-v2 input,
.settings-header-card .settings-search-v2 input {
padding-left: 2.5rem !important;
}
.settings-search-v2 .settings-search-icon,
.settings-header-card .settings-search-v2 .settings-search-icon {
left: 0.875rem;
}
/* --- FIX: Sidebar active state - remover efeito quando não ativo --- */
.app-sidebar .sidebar-item:not(.sidebar-item-active) {
background: transparent;
}
.app-sidebar .sidebar-item:not(.sidebar-item-active):hover {
background: var(--color-slate-100);
}
.dark .app-sidebar .sidebar-item:not(.sidebar-item-active):hover {
background: var(--color-slate-800);
}
/* --- FIX: Remover focus/hover persistente na sidebar --- */
.app-sidebar .sidebar-item:focus {
outline: none;
}
.app-sidebar .sidebar-item:focus:not(:focus-visible) {
background: transparent;
}
.app-sidebar .sidebar-item.sidebar-item-active:focus:not(:focus-visible) {
background: var(--color-primary-50, #fdf2f8);
}
.dark .app-sidebar .sidebar-item.sidebar-item-active:focus:not(:focus-visible) {
background: var(--color-primary-900);
}
/* --- FIX: Company dropdown overlay z-index --- */
.header-company-selector {
position: relative;
z-index: var(--z-dropdown);
}
.company-dropdown {
z-index: var(--z-overlay-dropdown);
}
/* --- FIX: Shortcuts modal centralizado --- */
.shortcuts-modal.ui-modal {
align-items: center;
justify-content: center;
}
.shortcuts-modal .shortcuts-modal-dialog {
margin-top: 0;
margin: auto;
}
/* --- FIX: Toggles dropdown - fonte e z-index --- */
.toggles-dropdown {
z-index: var(--z-overlay-dropdown);
}
.toggles-dropdown .toggles-dropdown-title {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-slate-500);
}
.dark .toggles-dropdown .toggles-dropdown-title {
color: var(--color-slate-400);
}
.toggles-dropdown .toggles-dropdown-item {
font-size: 0.8125rem;
}
/* Hover com fundo sutil */
.toggles-dropdown .toggles-dropdown-item:hover {
background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
color: var(--color-slate-800);
text-decoration: none;
}
.toggles-dropdown .toggles-dropdown-item:hover i {
color: var(--color-primary-500);
}
.dark .toggles-dropdown .toggles-dropdown-item:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-slate-200);
}
.dark .toggles-dropdown .toggles-dropdown-item:hover i {
color: var(--color-primary-400);
}
/* Estado ativo — fundo sutil + indicador visual (check) */
.toggles-dropdown .toggles-dropdown-item.active {
background: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary-600);
font-weight: 500;
position: relative;
}
.toggles-dropdown .toggles-dropdown-item.active::after {
content: '\f00c';
font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.625rem;
margin-left: auto;
color: var(--color-primary-500);
}
.toggles-dropdown .toggles-dropdown-item.active i {
color: var(--color-primary-500);
}
.toggles-dropdown .toggles-dropdown-item.active:hover {
background: rgba(var(--color-primary-rgb), 0.15);
}
.dark .toggles-dropdown .toggles-dropdown-item.active {
background: rgba(var(--color-primary-rgb), 0.12);
color: var(--color-primary-400);
}
.dark .toggles-dropdown .toggles-dropdown-item.active::after {
color: var(--color-primary-400);
}
.dark .toggles-dropdown .toggles-dropdown-item.active i {
color: var(--color-primary-400);
}
.dark .toggles-dropdown .toggles-dropdown-item.active:hover {
background: rgba(var(--color-primary-rgb), 0.18);
}
/* Focus sem outline intrusivo */
.toggles-dropdown .toggles-dropdown-item:focus {
outline: none;
}
/* --- FIX: Theme toggle — mesmo padrão dos demais header-action-icon --- */
#header-theme-toggle i {
font-size: 1rem;
}
/* --- FIX: Header action icons consistentes --- */
.app-header .header-action-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg, 0.5rem);
background: transparent;
transition: none;
}
/* Busca mobile — ocultar no desktop, mostrar no mobile */
.header-mobile-search-btn.header-action-icon {
display: none !important;
}
@media (max-width: 768px) {
.header-mobile-search-btn.header-action-icon {
display: flex !important;
}
}
.dark .app-header .header-action-icon {
color: var(--color-gray-300);
}
.app-header .header-action-icon:hover {
background: transparent;
color: var(--color-gray-600);
}
.dark .app-header .header-action-icon:hover {
background: transparent;
color: var(--color-gray-100);
}
.header-action-icon i {
font-size: 1rem;
}
/* Bandeira SVG no seletor de idioma — usa flag-icons.css (.fi .fi-XX) */
/* .lang-flag removido — substituído por .fi.fi-XX via flag-icons.css */
/* ============================================
FIX: FontAwesome icons com Tailwind size classes
FA usa font-size para dimensionar, não width/height.
Quando tem h-6/w-6 etc, centralizar glifo no box.
============================================ */
i.fas[class*="h-"],
i.far[class*="h-"],
i.fab[class*="h-"],
i.fal[class*="h-"],
i.fad[class*="h-"] {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================
CORREÇÕES AUTH PAGES - 2026-02-04
============================================ */
/* --- FIX: Checkbox alinhado com texto --- */
.ui-auth-checkbox-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ui-auth-checkbox {
flex-shrink: 0;
margin-top: 0;
}
.ui-auth-checkbox-box {
width: 1.125rem;
height: 1.125rem;
border-radius: var(--radius-sm, 0.25rem);
}
.ui-auth-terms-text {
font-size: 0.8125rem;
line-height: 1.4;
color: var(--color-slate-500);
margin: 0;
text-align: left;
}
.dark .ui-auth-terms-text {
color: var(--color-slate-400);
}
/* --- FIX: Links padronizados (cor consistente via --color-primary-600) --- */
.ui-auth-terms-link,
.ui-auth-link,
.ui-auth-footer-link-action {
color: var(--color-primary-600);
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease;
}
.ui-auth-terms-link:hover,
.ui-auth-link:hover,
.ui-auth-footer-link-action:hover {
color: var(--color-primary-700, var(--color-primary-700));
opacity: 0.85;
}
.dark .ui-auth-terms-link,
.dark .ui-auth-link,
.dark .ui-auth-footer-link-action {
color: var(--color-primary-400);
}
.dark .ui-auth-terms-link:hover,
.dark .ui-auth-link:hover,
.dark .ui-auth-footer-link-action:hover {
color: var(--color-primary-300);
}
/* --- FIX: Footer link secundário --- */
.ui-auth-footer-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
font-size: 0.875rem;
color: var(--color-slate-500);
}
.dark .ui-auth-footer-link {
color: var(--color-slate-400);
}
/* --- FIX: Espaçamentos padronizados --- */
.ui-auth-card {
padding: 2rem;
}
@media (max-width: 480px) {
.ui-auth-card {
padding: 1.5rem;
}
}
.ui-auth-form > * + * {
margin-top: 1.25rem;
}
.ui-auth-info-box {
margin-top: 1.5rem;
padding: 1rem;
background: var(--color-primary-50, #fdf2f8);
border: 1px solid var(--color-primary-100, #fce7f3);
border-radius: 0.75rem;
}
.dark .ui-auth-info-box {
background: rgba(var(--color-primary-rgb), 0.1);
border-color: rgba(var(--color-primary-rgb), 0.2);
}
.ui-auth-info-box-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary-800);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.dark .ui-auth-info-box-title {
color: var(--color-primary-400);
}
.ui-auth-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.ui-auth-info-list-item {
font-size: 0.8125rem;
color: var(--color-primary-800);
padding: 0.25rem 0;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.dark .ui-auth-info-list-item {
color: var(--color-primary-300);
}
.ui-auth-info-list-number {
font-weight: 600;
min-width: 1rem;
}
/* --- FIX: Security notice --- */
.ui-auth-security-notice {
margin-top: 1rem;
padding: 0.75rem 1rem;
background: var(--color-success-50);
border: 1px solid var(--color-success-200);
border-radius: 0.75rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.dark .ui-auth-security-notice {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.2);
}
.ui-auth-security-icon {
color: var(--color-success-600);
flex-shrink: 0;
margin-top: 0.125rem;
}
.dark .ui-auth-security-icon {
color: var(--color-success-400);
}
.ui-auth-security-text {
font-size: 0.8125rem;
color: var(--color-success-800);
line-height: 1.4;
margin: 0;
}
.dark .ui-auth-security-text {
color: var(--color-success-300);
}
/* --- FIX: Footer consistente --- */
.ui-auth-footer {
margin-top: 1.5rem;
text-align: center;
}
/* ============================================
MELHORIAS DE VISUAL - 2026-02-04
Ajustes para consistência, espaçamento e UX
============================================ */
/* --- ÍCONES PERFEITAMENTE ALINHADOS --- */
.ui-auth-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
.ui-auth-logo i,
.ui-auth-logo svg {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
}
/* --- ESPAÇAMENTOS OTIMIZADOS (INPUTS E BOTÕES) --- */
.space-y-5 > * + * {
margin-top: 1rem !important;
}
.ui-auth-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Espaçamento entre campo e botão (ainda menor) */
.ui-auth-field {
margin-bottom: 0;
}
.ui-auth-field + button,
.ui-auth-field + .ui-auth-btn-primary,
.ui-auth-field + .ui-auth-btn-with-icon {
margin-top: 1rem;
}
/* Espaçamento menor entre label e input */
.ui-auth-label {
margin-bottom: 0.5rem;
display: block;
}
/* --- ORIENTAÇÕES E DICAS (ESPAÇAMENTO REDUZIDO) --- */
.ui-auth-info-box {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 0.75rem 0.875rem;
}
.ui-auth-info-box-title {
margin-bottom: 0.5rem;
font-size: 0.8125rem;
}
.ui-auth-info-list {
gap: 0.25rem;
}
.ui-auth-info-list-item {
padding: 0.125rem 0;
gap: 0.375rem;
font-size: 0.8125rem;
line-height: 1.4;
}
/* Security notice também com espaçamento reduzido */
.ui-auth-security-notice {
margin-top: 1rem;
margin-bottom: 0;
padding: 0.625rem 0.75rem;
}
.ui-auth-alert.ui-auth-alert-success {
margin-bottom: 1rem;
padding: 0.75rem 0.875rem;
}
/* --- LINKS PADRONIZADOS E CONSISTENTES --- */
.ui-auth-link,
.ui-auth-footer-link-action,
.ui-auth-terms-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary-600);
text-decoration: none;
transition: all 0.15s ease;
}
.ui-auth-link:hover,
.ui-auth-footer-link-action:hover,
.ui-auth-terms-link:hover {
color: var(--color-primary-700, var(--color-primary-700));
opacity: 0.85;
}
.dark .ui-auth-link,
.dark .ui-auth-footer-link-action,
.dark .ui-auth-terms-link {
color: var(--color-primary-400);
}
.dark .ui-auth-link:hover,
.dark .ui-auth-footer-link-action:hover,
.dark .ui-auth-terms-link:hover {
color: var(--color-primary-300);
}
/* Link de rodapé (voltar, usar outro método, etc) */
.ui-auth-footer-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-slate-500);
text-align: center;
}
.dark .ui-auth-footer-link {
color: var(--color-slate-400);
}
.ui-auth-footer-link i {
font-size: 0.75rem;
}
/* --- BOTÕES DE AÇÃO SECUNDÁRIA (VOLTAR, GERAR NOVO) --- */
.ui-auth-btn-group {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
.ui-auth-btn-outline {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-slate-500);
background-color: transparent;
border: 1px solid var(--color-slate-300);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
}
.ui-auth-btn-outline:hover:not(:disabled) {
background-color: var(--color-slate-50);
border-color: var(--color-slate-400);
color: var(--color-slate-600);
}
.dark .ui-auth-btn-outline {
color: var(--color-slate-400);
border-color: var(--color-slate-600);
}
.dark .ui-auth-btn-outline:hover:not(:disabled) {
background-color: rgba(51, 65, 85, 0.3);
border-color: var(--color-slate-500);
color: var(--color-slate-300);
}
/* --- QR CODE: TIMER E STATUS --- */
.ui-auth-qr-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
margin-bottom: 1.25rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
}
.ui-auth-qr-timer-warning {
background-color: var(--color-warning-100);
border: 1px solid var(--color-warning-200);
color: var(--color-warning-800);
}
.dark .ui-auth-qr-timer-warning {
background-color: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.3);
color: var(--color-warning-400);
}
.ui-auth-qr-timer-danger {
background-color: var(--color-danger-100);
border: 1px solid var(--color-danger-200);
color: var(--color-danger-800);
}
.dark .ui-auth-qr-timer-danger {
background-color: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: var(--color-danger-400);
}
.ui-auth-qr-status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
margin-top: 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.ui-auth-qr-status-pending {
background-color: var(--color-slate-100);
color: var(--color-slate-600);
}
.dark .ui-auth-qr-status-pending {
background-color: rgba(71, 85, 105, 0.2);
color: var(--color-slate-300);
}
/* --- QR CODE: CONTAINER E AÇÕES --- */
.ui-auth-qr-container {
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background-color: var(--color-white);
border-radius: 1rem;
margin: 1rem 0;
}
.dark .ui-auth-qr-container {
background-color: var(--color-white);
}
.ui-auth-qr-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
/* --- MODERNO E LIMPO: SHADOWS E TRANSITIONS --- */
.ui-auth-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}
.dark .ui-auth-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
}
/* Inputs e botões com transições suaves */
.ui-auth-input,
.ui-auth-btn-primary,
.ui-auth-btn-secondary {
transition: all 0.15s ease;
}
/* --- AJUSTES FINAIS DE ESPAÇAMENTO --- */
.ui-auth-header {
margin-bottom: 1.5rem;
}
.ui-auth-alert {
margin-bottom: 1rem;
}
/* .ui-mb-6 canonical definition in design-tokens.css */
.ui-auth-divider {
margin: 1.5rem 0;
}
/* --- ESPAÇAMENTOS ESPECÍFICOS PARA FORMULÁRIOS --- */
/* Reduz espaçamento entre div wrapper e botão */
#email-step > button,
#qrcode-step > button,
#biometric-step > button {
margin-top: 1rem !important;
}
/* Espaçamento consistente após info boxes */
.ui-auth-info-box + .ui-auth-alert,
.ui-auth-alert + .ui-auth-info-box {
margin-top: 1rem !important;
}
/* Garante que security notice e alert success tenham espaçamento reduzido */
.ui-auth-security-notice,
.ui-auth-alert-success {
margin-top: 1rem;
margin-bottom: 0;
}
/* Reduz gap nos elementos de formulário auth */
form.ui-auth-form,
form.space-y-5,
form[id^="form-"] {
gap: 1rem !important;
}
/* Espaçamento entre elementos de form com data-ajax */
form[data-ajax] > div + div,
form[data-ajax] > div + button {
margin-top: 1rem !important;
}
/* --- BOTÃO VOLTAR AO LOGIN PADRÃO --- */
.ui-auth-back-to-password {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.75rem;
padding: 0.625rem;
background-color: rgba(var(--color-primary-rgb), 0.05);
border: 1px solid rgba(var(--color-primary-rgb), 0.2);
border-radius: 0.5rem;
transition: all 0.15s ease;
}
.ui-auth-back-to-password:hover {
background-color: rgba(var(--color-primary-rgb), 0.1);
border-color: rgba(var(--color-primary-rgb), 0.3);
}
.dark .ui-auth-back-to-password {
background-color: rgba(var(--color-primary-rgb), 0.1);
border-color: rgba(var(--color-primary-rgb), 0.25);
}
.dark .ui-auth-back-to-password:hover {
background-color: rgba(var(--color-primary-rgb), 0.15);
border-color: rgba(var(--color-primary-rgb), 0.35);
}
.ui-auth-back-to-password button {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
}
.ui-auth-back-to-password.hidden {
display: none !important;
}
/* --- MÉTODO ALTERNATIVO: BOTÕES E LINKS IDÊNTICOS --- */
/* Garantir que