/**
 * Cometa CRM UI - Estilos Padronizados
 * Design System com suporte a modo claro e escuro
 */

:root {
    /* Cores Primárias */
    --crm-cometa-ui-primary-color: #a50dee;
    --crm-cometa-ui-primary-dark: #8a0bc7;
    --crm-cometa-ui-primary-light: #c448ff;
    --crm-cometa-ui-primary-bg: var(--crm-cometa-ui-primary-bg);
    
    /* Cores Modo Claro */
    --crm-cometa-ui-bg: #ffffff;
    --crm-cometa-ui-bg-secondary: #f5f5f5;
    --crm-cometa-ui-bg-tertiary: #e9e9e9;
    --crm-cometa-ui-text: #1a1a1a;
    --crm-cometa-ui-text-secondary: #666666;
    --crm-cometa-ui-text-tertiary: #999999;
    --crm-cometa-ui-border: #dddddd;
    --crm-cometa-ui-border-light: #eeeeee;
    
    /* Cores de Feedback */
    --crm-cometa-ui-success: #10b981;
    --crm-cometa-ui-success-light: #34d399;
    --crm-cometa-ui-success-dark: #059669;
    --crm-cometa-ui-success-bg: #d1fae5;
    --crm-cometa-ui-error: #ef4444;
    --crm-cometa-ui-error-light: #fee2e2;
    --crm-cometa-ui-warning: #f59e0b;
    --crm-cometa-ui-warning-light: #fef3c7;
    --crm-cometa-ui-info: #3b82f6;
    --crm-cometa-ui-info-light: #dbeafe;
    --crm-cometa-ui-info-bg: #dbeafe;
    
    /* Espaçamentos */
    --crm-cometa-ui-spacing-xs: 4px;
    --crm-cometa-ui-spacing-sm: 8px;
    --crm-cometa-ui-spacing-md: 12px;
    --crm-cometa-ui-spacing-lg: 16px;
    --crm-cometa-ui-spacing-xl: 24px;
    --crm-cometa-ui-spacing-2xl: 32px;
    
    /* Fontes */
    --crm-cometa-ui-font-size-xs: 11px;
    --crm-cometa-ui-font-size-sm: 13px;
    --crm-cometa-ui-font-size-base: 14px;
    --crm-cometa-ui-font-size-md: 15px;
    --crm-cometa-ui-font-size-lg: 17px;
    --crm-cometa-ui-font-size-xl: 19px;
    --crm-cometa-ui-font-size-2xl: 21px;
    
    /* Bordas */
    --crm-cometa-ui-radius-sm: 6px;
    --crm-cometa-ui-radius-md: 8px;
    --crm-cometa-ui-radius-lg: 10px;
    --crm-cometa-ui-radius-xl: 14px;
    
    /* Sombras */
    --crm-cometa-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --crm-cometa-ui-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --crm-cometa-ui-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
    --crm-cometa-ui-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Transições */
    --crm-cometa-ui-transition: all 0.2s ease;

    /* Barra de rolagem global (flat, slim) */
    --crm-cometa-ui-scrollbar-width: 6px;
    --crm-cometa-ui-scrollbar-track: #f0f0f0;
    --crm-cometa-ui-scrollbar-thumb: #c0c0c0;
    --crm-cometa-ui-scrollbar-thumb-hover: #a0a0a0;
    --crm-cometa-ui-scrollbar-thumb-active: #909090;
    --crm-cometa-ui-scrollbar-radius: 3px;

    /* Cores de texto dos botões */
    --crm-cometa-ui-button-primary-text: #ffffff;
    --crm-cometa-ui-button-secondary-text: var(--crm-cometa-ui-text);

    /* LED indicator – cores reutilizáveis (prefixo crm-led) */
    --crm-led-primary: var(--crm-cometa-ui-primary-color);
    --crm-led-red: #dc2626;
    --crm-led-orange: #ea580c;
}

/* ========== LED indicator (reutilizável em cards, listas, status) ========== */
.crm-led {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--crm-cometa-ui-bg);
}
.crm-led--primary {
    background-color: var(--crm-led-primary);
    box-shadow: 0 0 0 2px var(--crm-cometa-ui-bg), 0 0 8px var(--crm-led-primary);
}
.crm-led--red {
    background-color: var(--crm-led-red);
    box-shadow: 0 0 0 2px var(--crm-cometa-ui-bg), 0 0 6px rgba(220, 38, 38, 0.5);
}
.crm-led--orange {
    background-color: var(--crm-led-orange);
    box-shadow: 0 0 0 2px var(--crm-cometa-ui-bg), 0 0 6px rgba(234, 88, 12, 0.5);
}
/* Tamanhos opcionais */
.crm-led.crm-led--sm {
    width: 8px;
    height: 8px;
}
.crm-led.crm-led--lg {
    width: 12px;
    height: 12px;
}

/* Ícone – tamanhos (utilitários) */
.material-symbols-rounded.crm-cometa-ui-icon-size-16 { font-size: 16px !important; }
.material-symbols-rounded.crm-cometa-ui-icon-size-18 { font-size: 18px !important; }
.material-symbols-rounded.crm-cometa-ui-icon-size-20 { font-size: 20px !important; }

/* Modo Escuro */
[data-theme="dark"] {
    --crm-cometa-ui-primary-bg: var(--crm-cometa-ui-primary-bg);
    --crm-cometa-ui-bg: #1a1a1a;
    --crm-cometa-ui-bg-secondary: #2a2a2a;
    --crm-cometa-ui-bg-tertiary: #3a3a3a;
    --crm-cometa-ui-text: #e9e9e9;
    --crm-cometa-ui-text-secondary: #b0b0b0;
    --crm-cometa-ui-text-tertiary: #808080;
    --crm-cometa-ui-border: #404040;
    --crm-cometa-ui-border-light: #333333;
    
    --crm-cometa-ui-success-light: #34d399;
    --crm-cometa-ui-success-dark: #059669;
    --crm-cometa-ui-success-bg: #064e3b;
    --crm-cometa-ui-error-light: #7f1d1d;
    --crm-cometa-ui-error-bg: #fee2e2;
    --crm-cometa-ui-warning-light: #78350f;
    --crm-cometa-ui-warning-bg: #fef3c7;
    --crm-cometa-ui-info-light: rgba(59, 130, 246, 0.25);
    --crm-cometa-ui-info-bg: rgba(59, 130, 246, 0.12);
    
    --crm-cometa-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --crm-cometa-ui-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
    --crm-cometa-ui-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
    --crm-cometa-ui-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.6);

    /* Barra de rolagem – modo escuro */
    --crm-cometa-ui-scrollbar-track: #2a2a2a;
    --crm-cometa-ui-scrollbar-thumb: #505050;
    --crm-cometa-ui-scrollbar-thumb-hover: #606060;
    --crm-cometa-ui-scrollbar-thumb-active: #707070;

    /* LED – modo escuro (mesmas variáveis, brilho ajustado pelo componente) */
    --crm-led-primary: var(--crm-cometa-ui-primary-color);
    --crm-led-red: #ef4444;
    --crm-led-orange: #f97316;
}

/* ========== Barra de rolagem global (flat, slim) ========== */
/* Aplica a todos os elementos com overflow scroll/auto em todo o sistema */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--crm-cometa-ui-scrollbar-thumb) var(--crm-cometa-ui-scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--crm-cometa-ui-scrollbar-width);
    height: var(--crm-cometa-ui-scrollbar-width);
}

*::-webkit-scrollbar-track {
    background: var(--crm-cometa-ui-scrollbar-track);
    border-radius: var(--crm-cometa-ui-scrollbar-radius);
}

*::-webkit-scrollbar-thumb {
    background: var(--crm-cometa-ui-scrollbar-thumb);
    border-radius: var(--crm-cometa-ui-scrollbar-radius);
    border: none;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--crm-cometa-ui-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--crm-cometa-ui-scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
    background: var(--crm-cometa-ui-scrollbar-track);
    border-radius: var(--crm-cometa-ui-scrollbar-radius);
}

/* Reset e Base */
.crm-cometa-ui-wrapper {
    
    background: var(--crm-cometa-ui-bg);
    color: var(--crm-cometa-ui-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: var(--crm-cometa-ui-font-size-base) !important;
    line-height: 1.5;
   
    transition: var(--crm-cometa-ui-transition);
}

/* Isolar do WordPress - Resetar cores */
.crm-cometa-ui-wrapper * {
    box-sizing: border-box;
}

/* Links textuais - excluir botões que têm suas próprias cores */
.crm-cometa-ui-wrapper a:not(.crm-cometa-ui-button):not(.crm-cometa-ui-button-icon):not(.crm-cometa-ui-button-fab):not(.crm-cometa-ui-button-mobile):not(.crm-cometa-ui-button-icon-mobile) {
    color: var(--crm-cometa-ui-primary-color) !important;
}

.crm-cometa-ui-wrapper a:not(.crm-cometa-ui-button):not(.crm-cometa-ui-button-icon):not(.crm-cometa-ui-button-fab):not(.crm-cometa-ui-button-mobile):not(.crm-cometa-ui-button-icon-mobile):hover {
    color: #fff !important;
}

/* Resetar estilos do WordPress para inputs - Sobrescrever completamente */
.crm-cometa-ui-wrapper input,
.crm-cometa-ui-wrapper textarea,
.crm-cometa-ui-wrapper select {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: var(--crm-cometa-ui-shadow-sm) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.crm-cometa-ui-wrapper input:focus:not([type="range"]):not(.crm-cometa-ui-range),
.crm-cometa-ui-wrapper textarea:focus,
.crm-cometa-ui-wrapper select:focus {
    -webkit-box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg), var(--crm-cometa-ui-shadow-sm) !important;
    -moz-box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg), var(--crm-cometa-ui-shadow-sm) !important;
    box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg), var(--crm-cometa-ui-shadow-sm) !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Garantir que range não tenha box-shadow no focus */
.crm-cometa-ui-wrapper input[type="range"]:focus,
.crm-cometa-ui-wrapper .crm-cometa-ui-range:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Remover outline do WordPress */
.crm-cometa-ui-wrapper input:focus:not([type="range"]):not(.crm-cometa-ui-range),
.crm-cometa-ui-wrapper textarea:focus,
.crm-cometa-ui-wrapper select:focus {
    outline: none !important;
    outline-offset: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
}

/* Remover cores de foco do WordPress */
.crm-cometa-ui-wrapper input:focus-visible:not([type="range"]):not(.crm-cometa-ui-range),
.crm-cometa-ui-wrapper textarea:focus-visible,
.crm-cometa-ui-wrapper select:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Header */
.crm-cometa-ui-header {
    background: var(--crm-cometa-ui-bg-secondary);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
    padding: var(--crm-cometa-ui-spacing-lg);
    margin: calc(var(--crm-cometa-ui-spacing-lg) * -1) calc(var(--crm-cometa-ui-spacing-lg) * -1) var(--crm-cometa-ui-spacing-lg);
    border-radius: var(--crm-cometa-ui-radius-md) var(--crm-cometa-ui-radius-md) 0 0;
}

.crm-cometa-ui-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crm-cometa-ui-title {
    font-size: var(--crm-cometa-ui-font-size-2xl);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-title .material-symbols-rounded {
    font-size: 28px;
}

/* Theme Toggle */
.crm-cometa-ui-theme-toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.crm-cometa-ui-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.crm-cometa-ui-switch-slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background: var(--crm-cometa-ui-bg-tertiary);
    border-radius: 26px;
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: var(--crm-cometa-ui-bg);
    border-radius: 50%;
    transition: var(--crm-cometa-ui-transition);
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-switch-input:checked + .crm-cometa-ui-switch-slider {
    background: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-switch-input:checked + .crm-cometa-ui-switch-slider::before {
    transform: translateX(24px);
}

.crm-cometa-ui-switch-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--crm-cometa-ui-text);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-switch-icon:first-child {
    left: 6px;
}

.crm-cometa-ui-switch-icon:last-child {
    right: 6px;
}

.crm-cometa-ui-switch-input:checked + .crm-cometa-ui-switch-slider .crm-cometa-ui-switch-icon:first-child {
    opacity: 0;
}

.crm-cometa-ui-switch-input:not(:checked) + .crm-cometa-ui-switch-slider .crm-cometa-ui-switch-icon:last-child {
    opacity: 0;
}

/* Tabs */
.crm-cometa-ui-tabs {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-xs);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
    overflow-x: auto;
}

.crm-cometa-ui-tab {
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--crm-cometa-ui-text-secondary);
    font-size: var(--crm-cometa-ui-font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    transition: var(--crm-cometa-ui-transition);
    white-space: nowrap;
}

.crm-cometa-ui-tab:hover {
    color: var(--crm-cometa-ui-text);
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-tab.active {
    color: var(--crm-cometa-ui-primary-color);
    border-bottom-color: var(--crm-cometa-ui-primary-color);
    font-weight: 500;
}

.crm-cometa-ui-tab .material-symbols-rounded {
    font-size: 18px;
}

/* Tab Content */
.crm-cometa-ui-tab-content {
    display: none;
}

.crm-cometa-ui-tab-content.active {
    display: block;
}

/* Sections */
.crm-cometa-ui-section {
    margin-bottom: var(--crm-cometa-ui-spacing-2xl);
}

.crm-cometa-ui-section-title {
    font-size: var(--crm-cometa-ui-font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--crm-cometa-ui-spacing-lg) 0;
    color: var(--crm-cometa-ui-text);
}

/* Grid */
.crm-cometa-ui-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--crm-cometa-ui-spacing-lg);
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
}

/* ========== Gráficos (template-graficos.php) – Flat & Slim ========== */
.crm-cometa-grafico {
    background: transparent;
    padding: var(--crm-cometa-ui-spacing-md) 0;
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
    min-height: var(--crm-grafico-altura, 220px);
}
.crm-cometa-grafico__titulo {
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 600;
    color: var(--crm-cometa-ui-text-secondary);
    margin-bottom: var(--crm-cometa-ui-spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.crm-cometa-grafico__canvas-wrap {
    width: 100%;
    height: var(--crm-grafico-altura, 220px);
    position: relative;
}
.crm-cometa-grafico__canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-height: var(--crm-grafico-altura, 220px);
}
.crm-cometa-grafico__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-cometa-ui-spacing-md);
    margin-top: var(--crm-cometa-ui-spacing-sm);
}
.crm-cometa-grafico__legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-secondary);
}
.crm-cometa-grafico__legenda-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.crm-cometa-grafico--donut .crm-cometa-grafico__canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tooltip dos gráficos */
.crm-grafico-tooltip {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.crm-grafico-tooltip strong {
    font-size: 14px;
    display: block;
}
.crm-grafico-tooltip small {
    opacity: 0.85;
    font-size: 11px;
}

/* Form Groups */
.crm-cometa-ui-form-group {
    position: relative;
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--crm-cometa-ui-spacing-lg);
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-form-group-full {
    grid-column: span 2 / span 2;
}

@media (max-width: 768px) {
    .crm-cometa-ui-form-row {
        grid-template-columns: 1fr;
    }
    .crm-cometa-ui-form-group-full {
        grid-column: span 1 / span 1;
    }
}


.crm-cometa-ui-label {
    display: block;
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    color: var(--crm-cometa-ui-text-secondary);
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
    white-space: nowrap;
}

/* Ajuste específico para label do range */
.crm-cometa-ui-form-group:has(.crm-cometa-ui-range) .crm-cometa-ui-label {
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
    grid-column: 1 / -1;
    grid-row: 1;
}

.crm-cometa-ui-form-group:has(.crm-cometa-ui-input:focus) .crm-cometa-ui-label,
.crm-cometa-ui-form-group:has(.crm-cometa-ui-textarea:focus) .crm-cometa-ui-label,
.crm-cometa-ui-form-group:has(.crm-cometa-ui-select:focus) .crm-cometa-ui-label,
.crm-cometa-ui-form-group.crm-cometa-ui-has-focus .crm-cometa-ui-label {
    color: var(--crm-cometa-ui-primary-color);
}

/* Inputs - Resetar estilos do WordPress */
.crm-cometa-ui-wrapper input[type="text"],
.crm-cometa-ui-wrapper input[type="password"],
.crm-cometa-ui-wrapper input[type="email"],
.crm-cometa-ui-wrapper input[type="number"],
.crm-cometa-ui-wrapper input[type="tel"],
.crm-cometa-ui-wrapper input[type="url"],
.crm-cometa-ui-wrapper input[type="search"],
.crm-cometa-ui-wrapper input[type="date"],
.crm-cometa-ui-wrapper input[type="time"],
.crm-cometa-ui-wrapper input[type="datetime-local"],
.crm-cometa-ui-wrapper input[type="month"],
.crm-cometa-ui-wrapper input[type="week"],
.crm-cometa-ui-wrapper input[type="file"],
.crm-cometa-ui-wrapper textarea,
.crm-cometa-ui-wrapper select,
input.crm-cometa-ui-input:not([type="checkbox"]):not([type="color"]),
.crm-cometa-ui-textarea,
.crm-cometa-ui-select {
    width: 100%;
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-xl) var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-md);
    padding-right: calc(var(--crm-cometa-ui-spacing-xl) + 20px);
    font-size: var(--crm-cometa-ui-font-size-sm);
  
    border-radius: var(--crm-cometa-ui-radius-md) !important;
    background: var(--crm-cometa-ui-bg) !important;
    background-color: var(--crm-cometa-ui-bg) !important;
    background-image: none;
    color: var(--crm-cometa-ui-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: 46px !important;
    font-family: inherit;
    line-height: 1.5;
    margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: -webkit-fill-available;
    cursor: pointer;
}

/* Seta customizada do select – apenas via background-image no .crm-cometa-ui-select; sem ::after para evitar seta duplicada */
.crm-cometa-ui-form-group:has(.crm-cometa-ui-select) {
    position: relative;
}

/* Remover qualquer seta no ::after do form-group para select (evita duplicidade com a seta do background do input) */
.crm-cometa-ui-form-group:has(.crm-cometa-ui-select)::after {
    display: none !important;
    content: none !important;
}

/* Estados hover */
.crm-cometa-ui-wrapper input[type="text"]:hover,
.crm-cometa-ui-wrapper input[type="password"]:hover,
.crm-cometa-ui-wrapper input[type="email"]:hover,
.crm-cometa-ui-wrapper input[type="number"]:hover,
.crm-cometa-ui-wrapper input[type="tel"]:hover,
.crm-cometa-ui-wrapper input[type="url"]:hover,
.crm-cometa-ui-wrapper input[type="search"]:hover,
.crm-cometa-ui-wrapper input[type="date"]:hover,
.crm-cometa-ui-wrapper input[type="time"]:hover,
.crm-cometa-ui-wrapper input[type="datetime-local"]:hover,
.crm-cometa-ui-wrapper input[type="month"]:hover,
.crm-cometa-ui-wrapper input[type="week"]:hover,
.crm-cometa-ui-wrapper input[type="file"]:hover,
.crm-cometa-ui-wrapper textarea:hover,
.crm-cometa-ui-wrapper select:hover,
input.crm-cometa-ui-input:not([type="checkbox"]):not([type="color"]):hover,
.crm-cometa-ui-textarea:hover,
.crm-cometa-ui-select:hover {
    border-color: var(--crm-cometa-ui-text-tertiary) !important;
    background: var(--crm-cometa-ui-bg) !important;
    background-color: var(--crm-cometa-ui-bg) !important;
    color: var(--crm-cometa-ui-text) !important;
}

/* Estados focus */
.crm-cometa-ui-wrapper input[type="text"]:focus,
.crm-cometa-ui-wrapper input[type="password"]:focus,
.crm-cometa-ui-wrapper input[type="email"]:focus,
.crm-cometa-ui-wrapper input[type="number"]:focus,
.crm-cometa-ui-wrapper input[type="tel"]:focus,
.crm-cometa-ui-wrapper input[type="url"]:focus,
.crm-cometa-ui-wrapper input[type="search"]:focus,
.crm-cometa-ui-wrapper input[type="date"]:focus,
.crm-cometa-ui-wrapper input[type="time"]:focus,
.crm-cometa-ui-wrapper input[type="datetime-local"]:focus,
.crm-cometa-ui-wrapper input[type="month"]:focus,
.crm-cometa-ui-wrapper input[type="week"]:focus,
.crm-cometa-ui-wrapper input[type="file"]:focus,
.crm-cometa-ui-wrapper textarea:focus,
.crm-cometa-ui-wrapper select:focus,
input.crm-cometa-ui-input:not([type="checkbox"]):not([type="color"]):focus,
.crm-cometa-ui-textarea:focus,
.crm-cometa-ui-select:focus {
    outline: none !important;
    border-color: var(--crm-cometa-ui-primary-color) !important;
    box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg), var(--crm-cometa-ui-shadow-sm) !important;
    background: var(--crm-cometa-ui-bg) !important;
    background-color: var(--crm-cometa-ui-bg) !important;
    color: var(--crm-cometa-ui-text) !important;
}

/* Estados active */
.crm-cometa-ui-wrapper input[type="text"]:active,
.crm-cometa-ui-wrapper input[type="password"]:active,
.crm-cometa-ui-wrapper input[type="email"]:active,
.crm-cometa-ui-wrapper input[type="number"]:active,
.crm-cometa-ui-wrapper input[type="tel"]:active,
.crm-cometa-ui-wrapper input[type="url"]:active,
.crm-cometa-ui-wrapper input[type="search"]:active,
.crm-cometa-ui-wrapper input[type="date"]:active,
.crm-cometa-ui-wrapper input[type="time"]:active,
.crm-cometa-ui-wrapper input[type="datetime-local"]:active,
.crm-cometa-ui-wrapper input[type="month"]:active,
.crm-cometa-ui-wrapper input[type="week"]:active,
.crm-cometa-ui-wrapper input[type="file"]:active,
.crm-cometa-ui-wrapper textarea:active,
.crm-cometa-ui-wrapper select:active,
input.crm-cometa-ui-input:not([type="checkbox"]):not([type="color"]):active,
.crm-cometa-ui-textarea:active,
.crm-cometa-ui-select:active {
    border-color: var(--crm-cometa-ui-primary-color) !important;
    background: var(--crm-cometa-ui-bg) !important;
    background-color: var(--crm-cometa-ui-bg) !important;
    color: var(--crm-cometa-ui-text) !important;
    outline: none !important;
}

/* Estados disabled */
.crm-cometa-ui-wrapper input[type="text"]:disabled,
.crm-cometa-ui-wrapper input[type="password"]:disabled,
.crm-cometa-ui-wrapper input[type="email"]:disabled,
.crm-cometa-ui-wrapper input[type="number"]:disabled,
.crm-cometa-ui-wrapper input[type="tel"]:disabled,
.crm-cometa-ui-wrapper input[type="url"]:disabled,
.crm-cometa-ui-wrapper input[type="search"]:disabled,
.crm-cometa-ui-wrapper input[type="date"]:disabled,
.crm-cometa-ui-wrapper input[type="time"]:disabled,
.crm-cometa-ui-wrapper input[type="datetime-local"]:disabled,
.crm-cometa-ui-wrapper input[type="month"]:disabled,
.crm-cometa-ui-wrapper input[type="week"]:disabled,
.crm-cometa-ui-wrapper input[type="file"]:disabled,
.crm-cometa-ui-wrapper textarea:disabled,
.crm-cometa-ui-wrapper select:disabled,
input.crm-cometa-ui-input:not([type="checkbox"]):not([type="color"]):disabled,
.crm-cometa-ui-textarea:disabled,
.crm-cometa-ui-select:disabled {
    background: var(--crm-cometa-ui-bg-tertiary) !important;
    background-color: var(--crm-cometa-ui-bg-tertiary) !important;
    color: var(--crm-cometa-ui-text-tertiary) !important;
    border-color: var(--crm-cometa-ui-border) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Placeholders */
.crm-cometa-ui-wrapper input::placeholder,
.crm-cometa-ui-wrapper textarea::placeholder,
.crm-cometa-ui-input::placeholder,
.crm-cometa-ui-textarea::placeholder {
    color: var(--crm-cometa-ui-text-tertiary) !important;
    opacity: 0.7 !important;
}

/* Input type="number" – padrão Cometa UI */
.crm-cometa-ui-wrapper input[type="number"],
.crm-cometa-ui-wrapper input[type="number"].crm-cometa-ui-input {
    padding-right: var(--crm-cometa-ui-spacing-md) !important;
    cursor: text !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.crm-cometa-ui-wrapper input[type="number"]::-webkit-outer-spin-button,
.crm-cometa-ui-wrapper input[type="number"]::-webkit-inner-spin-button,
.crm-cometa-ui-wrapper input[type="number"].crm-cometa-ui-input::-webkit-outer-spin-button,
.crm-cometa-ui-wrapper input[type="number"].crm-cometa-ui-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.crm-cometa-ui-wrapper input[type="number"]:hover,
.crm-cometa-ui-wrapper input[type="number"].crm-cometa-ui-input:hover {
    cursor: text !important;
}
.crm-cometa-ui-wrapper input[type="number"]:disabled,
.crm-cometa-ui-wrapper input[type="number"].crm-cometa-ui-input:disabled {
    cursor: not-allowed !important;
}

/* Input type="date" / "time" / "datetime-local" – ícone visível, texto legível, compatível light/dark */
.crm-cometa-ui-wrapper input[type="date"],
.crm-cometa-ui-wrapper input[type="time"],
.crm-cometa-ui-wrapper input[type="datetime-local"],
.crm-cometa-ui-wrapper input[type="month"],
.crm-cometa-ui-wrapper input[type="week"],
input[type="date"].crm-cometa-ui-input,
input[type="time"].crm-cometa-ui-input,
input[type="datetime-local"].crm-cometa-ui-input,
input[type="month"].crm-cometa-ui-input,
input[type="week"].crm-cometa-ui-input,
.crm-cometa-ui-modal input[type="date"],
.crm-cometa-ui-modal input[type="time"],
.crm-cometa-ui-modal input[type="datetime-local"],
.crm-cometa-ui-modal input[type="month"],
.crm-cometa-ui-modal input[type="week"] {
    -webkit-appearance: revert !important;
    -moz-appearance: revert !important;
    appearance: revert !important;
    position: relative !important;
    padding-right: 40px !important;
    padding-left: var(--crm-cometa-ui-spacing-md) !important;
    color: var(--crm-cometa-ui-text) !important;
}
/* Cor do texto da data/hora selecionada – evita fonte transparente */
.crm-cometa-ui-wrapper input[type="date"]::-webkit-datetime-edit,
.crm-cometa-ui-wrapper input[type="time"]::-webkit-datetime-edit,
.crm-cometa-ui-wrapper input[type="datetime-local"]::-webkit-datetime-edit,
.crm-cometa-ui-wrapper input[type="month"]::-webkit-datetime-edit,
.crm-cometa-ui-wrapper input[type="week"]::-webkit-datetime-edit,
input[type="date"].crm-cometa-ui-input::-webkit-datetime-edit,
input[type="time"].crm-cometa-ui-input::-webkit-datetime-edit,
input[type="datetime-local"].crm-cometa-ui-input::-webkit-datetime-edit,
input[type="month"].crm-cometa-ui-input::-webkit-datetime-edit,
input[type="week"].crm-cometa-ui-input::-webkit-datetime-edit,
.crm-cometa-ui-modal input[type="date"]::-webkit-datetime-edit,
.crm-cometa-ui-modal input[type="time"]::-webkit-datetime-edit,
.crm-cometa-ui-modal input[type="datetime-local"]::-webkit-datetime-edit,
.crm-cometa-ui-modal input[type="month"]::-webkit-datetime-edit,
.crm-cometa-ui-modal input[type="week"]::-webkit-datetime-edit {
    color: var(--crm-cometa-ui-text) !important;
}
.crm-cometa-ui-wrapper input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.crm-cometa-ui-wrapper input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.crm-cometa-ui-wrapper input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"].crm-cometa-ui-input::-webkit-datetime-edit-fields-wrapper,
input[type="time"].crm-cometa-ui-input::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"].crm-cometa-ui-input::-webkit-datetime-edit-fields-wrapper,
.crm-cometa-ui-modal input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.crm-cometa-ui-modal input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.crm-cometa-ui-modal input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    color: var(--crm-cometa-ui-text) !important;
}
/* Ícone do calendário/hora – visível e à direita */
.crm-cometa-ui-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-wrapper input[type="time"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-wrapper input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-wrapper input[type="month"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-wrapper input[type="week"]::-webkit-calendar-picker-indicator,
input[type="date"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
input[type="time"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
input[type="month"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
input[type="week"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
.crm-cometa-ui-modal input[type="date"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-modal input[type="time"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-modal input[type="month"]::-webkit-calendar-picker-indicator,
.crm-cometa-ui-modal input[type="week"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 40px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    opacity: 1 !important;
}
/* Modo escuro: inverter ícone para ficar visível em fundo escuro */
[data-theme="dark"] .crm-cometa-ui-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-wrapper input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-wrapper input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-wrapper input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-wrapper input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"].crm-cometa-ui-input::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-modal input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-modal input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-modal input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-cometa-ui-modal input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    opacity: 1 !important;
}

/* Checkbox – padrão Cometa UI (tabelas, seleção em massa) */
.crm-cometa-ui-wrapper input[type="checkbox"],
input[type="checkbox"].cliente-checkbox,
input[type="checkbox"].contrato-checkbox,
input[type="checkbox"].fatura-checkbox,
input[type="checkbox"].pagebriefing-checkbox-briefing,
input[type="checkbox"].briefing-checkbox,
#select-all-clientes,
#select-all-contratos,
#pagebriefing-checkbox-todos,
#pagelead-checkbox-todos,
input[type="checkbox"].pagelead-checkbox-lead,
input[type="checkbox"].crm-cometa-ui-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 2px solid var(--crm-cometa-ui-primary-color);
    border-radius: var(--crm-cometa-ui-radius-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    background: var(--crm-cometa-ui-bg);
    transition: var(--crm-cometa-ui-transition);
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}
.crm-cometa-ui-wrapper input[type="checkbox"]::before,
input[type="checkbox"].cliente-checkbox::before,
input[type="checkbox"].contrato-checkbox::before,
input[type="checkbox"].fatura-checkbox::before,
input[type="checkbox"].pagebriefing-checkbox-briefing::before,
input[type="checkbox"].briefing-checkbox::before,
#select-all-clientes::before,
#select-all-contratos::before,
#pagebriefing-checkbox-todos::before,
#pagelead-checkbox-todos::before,
input[type="checkbox"].pagelead-checkbox-lead::before,
input[type="checkbox"].crm-cometa-ui-checkbox::before { display: none; content: none; }
.crm-cometa-ui-wrapper input[type="checkbox"]::after,
input[type="checkbox"].cliente-checkbox::after,
input[type="checkbox"].contrato-checkbox::after,
input[type="checkbox"].fatura-checkbox::after,
input[type="checkbox"].pagebriefing-checkbox-briefing::after,
input[type="checkbox"].briefing-checkbox::after,
#select-all-clientes::after,
#select-all-contratos::after,
#pagebriefing-checkbox-todos::after,
#pagelead-checkbox-todos::after,
input[type="checkbox"].pagelead-checkbox-lead::after,
input[type="checkbox"].crm-cometa-ui-checkbox::after { display: none; content: none; }

.crm-cometa-ui-wrapper input[type="checkbox"]:checked,
input[type="checkbox"].cliente-checkbox:checked,
input[type="checkbox"].contrato-checkbox:checked,
input[type="checkbox"].fatura-checkbox:checked,
input[type="checkbox"].pagebriefing-checkbox-briefing:checked,
input[type="checkbox"].briefing-checkbox:checked,
#select-all-clientes:checked,
#select-all-contratos:checked,
#pagebriefing-checkbox-todos:checked,
#pagelead-checkbox-todos:checked,
input[type="checkbox"].pagelead-checkbox-lead:checked,
input[type="checkbox"].crm-cometa-ui-checkbox:checked {
    background: var(--crm-cometa-ui-primary-color);
    border-color: var(--crm-cometa-ui-primary-color);
}
.crm-cometa-ui-wrapper input[type="checkbox"]:checked::after,
input[type="checkbox"].cliente-checkbox:checked::after,
input[type="checkbox"].contrato-checkbox:checked::after,
input[type="checkbox"].fatura-checkbox:checked::after,
input[type="checkbox"].pagebriefing-checkbox-briefing:checked::after,
input[type="checkbox"].briefing-checkbox:checked::after,
#select-all-clientes:checked::after,
#select-all-contratos:checked::after,
#pagebriefing-checkbox-todos:checked::after,
#pagelead-checkbox-todos:checked::after,
input[type="checkbox"].pagelead-checkbox-lead:checked::after,
input[type="checkbox"].crm-cometa-ui-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid var(--crm-cometa-ui-bg);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
    display: block;
}

.crm-cometa-ui-wrapper input[type="checkbox"]:hover,
input[type="checkbox"].cliente-checkbox:hover,
input[type="checkbox"].contrato-checkbox:hover,
input[type="checkbox"].fatura-checkbox:hover,
input[type="checkbox"].pagebriefing-checkbox-briefing:hover,
input[type="checkbox"].briefing-checkbox:hover,
#select-all-clientes:hover,
#select-all-contratos:hover,
#pagebriefing-checkbox-todos:hover,
#pagelead-checkbox-todos:hover,
input[type="checkbox"].pagelead-checkbox-lead:hover,
input[type="checkbox"].crm-cometa-ui-checkbox:hover {
    border-color: var(--crm-cometa-ui-primary-dark);
    box-shadow: 0 0 0 2px var(--crm-cometa-ui-primary-bg);
}
.crm-cometa-ui-wrapper input[type="checkbox"]:focus,
input[type="checkbox"].cliente-checkbox:focus,
input[type="checkbox"].contrato-checkbox:focus,
input[type="checkbox"].pagebriefing-checkbox-briefing:focus,
input[type="checkbox"].briefing-checkbox:focus,
#select-all-clientes:focus,
#select-all-contratos:focus,
#pagebriefing-checkbox-todos:focus,
#pagelead-checkbox-todos:focus,
input[type="checkbox"].pagelead-checkbox-lead:focus,
input[type="checkbox"].crm-cometa-ui-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg);
}
.crm-cometa-ui-wrapper input[type="checkbox"]:indeterminate,
#select-all-clientes:indeterminate,
#select-all-contratos:indeterminate,
#pagebriefing-checkbox-todos:indeterminate,
#pagelead-checkbox-todos:indeterminate {
    background: var(--crm-cometa-ui-primary-color);
    border-color: var(--crm-cometa-ui-primary-color);
}
.crm-cometa-ui-wrapper input[type="checkbox"]:indeterminate::after,
#select-all-clientes:indeterminate::after,
#select-all-contratos:indeterminate::after,
#pagebriefing-checkbox-todos:indeterminate::after,
#pagelead-checkbox-todos:indeterminate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 2px;
    background: var(--crm-cometa-ui-bg);
    display: block;
}

.crm-cometa-ui-textarea {
    resize: vertical;
    min-height: 100px;
}

.crm-cometa-ui-input-color {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    cursor: pointer !important;
    border: 1.5px solid var(--crm-cometa-ui-border) !important;
    border-radius: var(--crm-cometa-ui-radius-md) !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Webkit (Chrome, Safari, Edge) - mostrar a cor selecionada */
.crm-cometa-ui-input-color::-webkit-color-swatch-wrapper {
    padding: 2px !important;
    border: 2px solid #ffffff !important;
    border-radius: calc(var(--crm-cometa-ui-radius-md) - 1.5px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.crm-cometa-ui-input-color::-webkit-color-swatch {
    border: none !important;
    border-radius: calc(var(--crm-cometa-ui-radius-md) - 3.5px) !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Firefox - mostrar a cor selecionada */
.crm-cometa-ui-input-color::-moz-color-swatch {
    border: 2px solid #ffffff !important;
    border-radius: calc(var(--crm-cometa-ui-radius-md) - 1.5px) !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
    padding: 0 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.crm-cometa-ui-input-color:hover {
    border-color: var(--crm-cometa-ui-text-tertiary) !important;
}

.crm-cometa-ui-input-color:focus {
    outline: none !important;
    border-color: var(--crm-cometa-ui-primary-color) !important;
    box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg), var(--crm-cometa-ui-shadow-sm) !important;
}

/* File Input Wrapper */
.crm-cometa-ui-file-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-input-file {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

.crm-cometa-ui-file-button {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-lg);
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--crm-cometa-ui-radius-md);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
    white-space: nowrap;
}

.crm-cometa-ui-file-button:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    box-shadow: 0 4px 8px var(--crm-cometa-ui-primary-bg);
    transform: translateY(-1px);
}

.crm-cometa-ui-file-button:active {
    transform: translateY(0);
}

.crm-cometa-ui-file-button .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
}

.crm-cometa-ui-file-button-text {
    font-size: var(--crm-cometa-ui-font-size-sm);
}

.crm-cometa-ui-file-name {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-secondary);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-cometa-ui-file-wrapper:has(input:not(:placeholder-shown)) .crm-cometa-ui-file-name,
.crm-cometa-ui-file-wrapper:has(input[value]) .crm-cometa-ui-file-name {
    color: var(--crm-cometa-ui-text);
    font-style: normal;
}

/* Range */
.crm-cometa-ui-range {
    width: 100%;
    height: 20px;
    border-radius: 0;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    display: block;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* Fundo cinza do slider - dentro do range */
.crm-cometa-ui-range::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 6px;
    width: calc(100% - 20px);
    height: 8px;
    background: var(--crm-cometa-ui-bg-tertiary) !important;
    border-radius: 4px;
    pointer-events: none;
    z-index: 0;
    border: none !important;
    box-shadow: none !important;
    display: block;
}

/* Barra de progresso com cor primária - dentro do range */
.crm-cometa-ui-range::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 6px;
    height: 8px;
    width: calc((var(--range-progress, 0) / 100) * (100% - 20px));
    background: var(--crm-cometa-ui-primary-color) !important;
    background-color: var(--crm-cometa-ui-primary-color) !important;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    transition: width 0.1s ease;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 20px) !important;
}

/* Garantir que o range não herde estilos de input */
.crm-cometa-ui-range,
.crm-cometa-ui-range:focus,
.crm-cometa-ui-range:active,
.crm-cometa-ui-range:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Garantir que o ::after não seja afetado por estilos globais */
.crm-cometa-ui-range::after,
.crm-cometa-ui-range:focus::after,
.crm-cometa-ui-range:active::after,
.crm-cometa-ui-range:hover::after {
    background: var(--crm-cometa-ui-primary-color) !important;
    background-color: var(--crm-cometa-ui-primary-color) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Track - Webkit (Chrome, Safari, Edge) */
.crm-cometa-ui-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: transparent;
    border: none !important;
    outline: none !important;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 0;
}

/* Track - Firefox */
.crm-cometa-ui-range::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: transparent;
    border: none !important;
    outline: none !important;
}

/* Progress fill - Webkit */
.crm-cometa-ui-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--crm-cometa-ui-primary-color);
    cursor: pointer;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin-top: -6px;
    position: relative;
    z-index: 10;
}

/* Progress fill - Firefox */
.crm-cometa-ui-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--crm-cometa-ui-primary-color);
    cursor: pointer;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 10;
}

/* Hover states */
.crm-cometa-ui-range:hover::-webkit-slider-thumb {
    box-shadow: none !important;
    transform: none !important;
}

.crm-cometa-ui-range:hover::-moz-range-thumb {
    box-shadow: none !important;
    transform: none !important;
}

/* Active/Focus states */
.crm-cometa-ui-range:focus,
.crm-cometa-ui-range:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.crm-cometa-ui-range:focus::-webkit-slider-thumb,
.crm-cometa-ui-range:active::-webkit-slider-thumb {
    box-shadow: none !important;
    transform: none !important;
}

.crm-cometa-ui-range:focus::-moz-range-thumb,
.crm-cometa-ui-range:active::-moz-range-thumb {
    box-shadow: none !important;
    transform: none !important;
}

/* Container para mostrar o progresso */
.crm-cometa-ui-form-group:has(.crm-cometa-ui-range) {
    position: relative;
    padding-bottom: var(--crm-cometa-ui-spacing-md);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-form-group:has(.crm-cometa-ui-range) .crm-cometa-ui-range {
    min-width: 0;
    grid-column: 1;
    grid-row: 2;
}

.crm-cometa-ui-range-value {
    font-size: var(--crm-cometa-ui-font-size-md);
    color: var(--crm-cometa-ui-text-tertiary);
    font-weight: 500;
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    margin-left: 0;
    text-align: right;
}

/* Select – seta única, sem repeat (hover/focus/active usam background shorthand, precisamos reaplicar) */
.crm-cometa-ui-select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--crm-cometa-ui-spacing-md) center !important;
    background-size: 12px 12px !important;
    padding-right: calc(var(--crm-cometa-ui-spacing-xl) + var(--crm-cometa-ui-spacing-sm)) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--crm-cometa-ui-bg) !important;
}

.crm-cometa-ui-select:hover,
.crm-cometa-ui-select:focus,
.crm-cometa-ui-select:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--crm-cometa-ui-spacing-md) center !important;
    background-size: 12px 12px !important;
    background-color: var(--crm-cometa-ui-bg) !important;
}

[data-theme="dark"] .crm-cometa-ui-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--crm-cometa-ui-spacing-md) center !important;
    background-size: 12px 12px !important;
}

[data-theme="dark"] .crm-cometa-ui-select:hover,
[data-theme="dark"] .crm-cometa-ui-select:focus,
[data-theme="dark"] .crm-cometa-ui-select:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--crm-cometa-ui-spacing-md) center !important;
    background-size: 12px 12px !important;
    background-color: var(--crm-cometa-ui-bg) !important;
}

.crm-cometa-ui-select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--crm-cometa-ui-spacing-md) center !important;
    background-size: 12px 12px !important;
    background-color: var(--crm-cometa-ui-bg-tertiary) !important;
}

[data-theme="dark"] .crm-cometa-ui-select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--crm-cometa-ui-spacing-md) center !important;
    background-size: 12px 12px !important;
    background-color: var(--crm-cometa-ui-bg-tertiary) !important;
}



/* Radio */
.crm-cometa-ui-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-radio {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
    cursor: pointer;
    position: relative;
    padding: var(--crm-cometa-ui-spacing-xs) 0;
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-radio:hover {
    opacity: 0.8;
}

.crm-cometa-ui-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}

.crm-cometa-ui-radio input[type="radio"]:disabled {
    cursor: not-allowed;
}

.crm-cometa-ui-radio input[type="radio"]:disabled + .crm-cometa-ui-radio-custom {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-cometa-ui-radio input[type="radio"]:disabled ~ .crm-cometa-ui-radio-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Radio customizado */
.crm-cometa-ui-radio-custom {
    position: relative;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 2px solid var(--crm-cometa-ui-border);
    border-radius: 50%;
    background: var(--crm-cometa-ui-bg);
    transition: var(--crm-cometa-ui-transition);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-cometa-ui-radio-custom::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--crm-cometa-ui-primary-color);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.crm-cometa-ui-radio input[type="radio"]:checked + .crm-cometa-ui-radio-custom {
    border-color: var(--crm-cometa-ui-primary-color);
    background: var(--crm-cometa-ui-bg);
    box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-radio input[type="radio"]:checked + .crm-cometa-ui-radio-custom::after {
    opacity: 1;
    transform: scale(1);
}

.crm-cometa-ui-radio input[type="radio"]:focus + .crm-cometa-ui-radio-custom {
    outline: none;
    box-shadow: 0 0 0 3px rgba(165, 13, 238, 0.15);
}

.crm-cometa-ui-radio:hover .crm-cometa-ui-radio-custom {
    border-color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-radio-label {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text);
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

/* Modo escuro - Radio */
[data-theme="dark"] .crm-cometa-ui-radio-custom {
    border-color: var(--crm-cometa-ui-border);
    background: var(--crm-cometa-ui-bg-secondary);
}

[data-theme="dark"] .crm-cometa-ui-radio input[type="radio"]:checked + .crm-cometa-ui-radio-custom {
    border-color: var(--crm-cometa-ui-primary-color);
    background: var(--crm-cometa-ui-bg-secondary);
}

/* Toggle Switch */
.crm-cometa-ui-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.crm-cometa-ui-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.crm-cometa-ui-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--crm-cometa-ui-bg-tertiary);
    border-radius: 24px;
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--crm-cometa-ui-bg);
    border-radius: 50%;
    transition: var(--crm-cometa-ui-transition);
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-toggle input:checked + .crm-cometa-ui-toggle-slider {
    background: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-toggle input:checked + .crm-cometa-ui-toggle-slider::before {
    transform: translateX(20px);
}

.crm-cometa-ui-toggle input:disabled + .crm-cometa-ui-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-cometa-ui-toggle-label {
    color: var(--crm-cometa-ui-text-color-secondary);
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    user-select: none;
}

/* Buttons */
.crm-cometa-ui-button {
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-lg);
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--crm-cometa-ui-radius-sm);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-button:hover {
    background: var(--crm-cometa-ui-bg-tertiary);
}

.crm-cometa-ui-button-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
    position: relative;
    z-index: 1;
}

.crm-cometa-ui-button-primary:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    box-shadow: 0 4px 8px var(--crm-cometa-ui-primary-bg);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-secondary {
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-button-secondary-text);
}

.crm-cometa-ui-button-success,
.crm-cometa-ui-button-confirm {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success) 0%, var(--crm-cometa-ui-success-light) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.crm-cometa-ui-button-success:hover,
.crm-cometa-ui-button-confirm:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success-dark) 0%, var(--crm-cometa-ui-success) 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-error {
    background: linear-gradient(135deg, var(--crm-cometa-ui-error) 0%, #ff6b6b 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.crm-cometa-ui-button-error:hover {
    background: linear-gradient(135deg, #dc2626 0%, var(--crm-cometa-ui-error) 100%);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-small {
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-md);
    font-size: var(--crm-cometa-ui-font-size-xs);
}

.crm-cometa-ui-button:disabled,
.crm-cometa-ui-button.disabled,
.crm-cometa-ui-button.limite-atingido {
    cursor: not-allowed;
    opacity: 0.85;
    pointer-events: none;
}

.crm-cometa-ui-button.limite-atingido:hover {
    transform: none;
}

.crm-cometa-ui-buttons-demo {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
    flex-wrap: wrap;
}

.crm-cometa-ui-subsection-title {
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 600;
    margin: 0 0 var(--crm-cometa-ui-spacing-md) 0;
    color: var(--crm-cometa-ui-text);
}

/* Botões Mobile */
.crm-cometa-ui-buttons-mobile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-button-mobile {
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-md);
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 500;
    border: none;
    border-radius: var(--crm-cometa-ui-radius-md);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    min-height: 70px;
    justify-content: center;
}

.crm-cometa-ui-button-mobile .material-symbols-rounded {
    font-size: 24px;
    line-height: 1;
}

.crm-cometa-ui-button-mobile span:not(.material-symbols-rounded) {
    font-size: var(--crm-cometa-ui-font-size-xs);
    text-align: center;
}

.crm-cometa-ui-button-mobile.crm-cometa-ui-button-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    color: var(--crm-cometa-ui-button-primary-text);
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-button-mobile.crm-cometa-ui-button-primary:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    box-shadow: 0 4px 8px var(--crm-cometa-ui-primary-bg);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-mobile.crm-cometa-ui-button-secondary {
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-button-secondary-text);
}

.crm-cometa-ui-button-mobile.crm-cometa-ui-button-secondary:hover {
    background: var(--crm-cometa-ui-bg-tertiary);
}

.crm-cometa-ui-button-mobile.crm-cometa-ui-button-success {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success) 0%, var(--crm-cometa-ui-success-light) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.crm-cometa-ui-button-mobile.crm-cometa-ui-button-success:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success-dark) 0%, var(--crm-cometa-ui-success) 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* Botões apenas com ícone (Mobile) */
.crm-cometa-ui-buttons-mobile-icons {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
    flex-wrap: wrap;
}

.crm-cometa-ui-button-icon-mobile {
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: var(--crm-cometa-ui-radius-md);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.crm-cometa-ui-button-icon-mobile .material-symbols-rounded {
    font-size: 24px;
    line-height: 1;
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    color: var(--crm-cometa-ui-button-primary-text);
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-primary:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    box-shadow: 0 4px 8px var(--crm-cometa-ui-primary-bg);
    transform: translateY(-2px) scale(1.05);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-secondary {
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-button-secondary-text);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-secondary:hover {
    background: var(--crm-cometa-ui-bg-tertiary);
    transform: translateY(-2px) scale(1.05);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-error {
    background: linear-gradient(135deg, var(--crm-cometa-ui-error) 0%, #ff6b6b 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-error:hover {
    background: linear-gradient(135deg, #dc2626 0%, var(--crm-cometa-ui-error) 100%);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px) scale(1.05);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-success {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success) 0%, var(--crm-cometa-ui-success-light) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.crm-cometa-ui-button-icon-mobile.crm-cometa-ui-button-success:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success-dark) 0%, var(--crm-cometa-ui-success) 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px) scale(1.05);
}

/* Botão Grande */
.crm-cometa-ui-button-large {
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-xl);
    font-size: var(--crm-cometa-ui-font-size-md);
}

.crm-cometa-ui-button-large .material-symbols-rounded {
    font-size: 20px;
}

/* FAB - Floating Action Button (Mobile) */
.crm-cometa-ui-fab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--crm-cometa-ui-spacing-xl);
}

.crm-cometa-ui-button-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--crm-cometa-ui-primary-bg);
    transition: var(--crm-cometa-ui-transition);
    position: relative;
    z-index: 10;
}

.crm-cometa-ui-button-fab .material-symbols-rounded {
    font-size: 28px;
    line-height: 1;
    color: #ffffff;
}

.crm-cometa-ui-button-fab.crm-cometa-ui-button-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
}

.crm-cometa-ui-button-fab:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 6px 16px rgba(165, 13, 238, 0.5);
}

.crm-cometa-ui-button-fab:active {
    transform: translateY(0) scale(1.05);
}

/* Botões de Redes Sociais */
.crm-cometa-ui-button-social {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-lg);
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--crm-cometa-ui-radius-md);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.crm-cometa-ui-social-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

.crm-cometa-ui-button-facebook {
    background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
}

.crm-cometa-ui-button-facebook:hover {
    background: linear-gradient(135deg, #1565c0 0%, #1877f2 100%);
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-instagram {
    background: linear-gradient(135deg, #e4405f 0%, #f77737 50%, #fccc63 100%);
}

.crm-cometa-ui-button-instagram:hover {
    background: linear-gradient(135deg, #c13584 0%, #e4405f 50%, #f77737 100%);
    box-shadow: 0 4px 8px rgba(228, 64, 95, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-twitter {
    background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}

.crm-cometa-ui-button-twitter:hover {
    background: linear-gradient(135deg, #0d8bd9 0%, #1da1f2 100%);
    box-shadow: 0 4px 8px rgba(29, 161, 242, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-linkedin {
    background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);
}

.crm-cometa-ui-button-linkedin:hover {
    background: linear-gradient(135deg, #005885 0%, #0077b5 100%);
    box-shadow: 0 4px 8px rgba(0, 119, 181, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-youtube {
    background: linear-gradient(135deg, #ff0000 0%, #ff4444 100%);
}

.crm-cometa-ui-button-youtube:hover {
    background: linear-gradient(135deg, #cc0000 0%, #ff0000 100%);
    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.crm-cometa-ui-button-whatsapp:hover {
    background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
    box-shadow: 0 4px 8px rgba(37, 211, 102, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-tiktok {
    background: linear-gradient(135deg, #000000 0%, #ff0050 100%);
}

.crm-cometa-ui-button-tiktok:hover {
    background: linear-gradient(135deg, #ff0050 0%, #000000 100%);
    box-shadow: 0 4px 8px rgba(255, 0, 80, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-pinterest {
    background: linear-gradient(135deg, #bd081c 0%, #e60023 100%);
}

.crm-cometa-ui-button-pinterest:hover {
    background: linear-gradient(135deg, #8b0614 0%, #bd081c 100%);
    box-shadow: 0 4px 8px rgba(189, 8, 28, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-telegram {
    background: linear-gradient(135deg, #0088cc 0%, #229ed9 100%);
}

.crm-cometa-ui-button-telegram:hover {
    background: linear-gradient(135deg, #006699 0%, #0088cc 100%);
    box-shadow: 0 4px 8px rgba(0, 136, 204, 0.4);
    transform: translateY(-1px);
}

/* Botão Gerar com IA - Animado */
.crm-cometa-ui-button-ai {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    background-size: 200% 200%;
    animation: ai-gradient-shift 3s ease infinite;
    color: #ffffff;
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
    z-index: 1;
    border: none;
}

.crm-cometa-ui-button-ai-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    background-size: 200% 200%;
    animation: ai-gradient-shift 3s ease infinite;
    z-index: -1;
    opacity: 0.8;
}

.crm-cometa-ui-button-ai-sparks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.crm-cometa-ui-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Spark 1 - Animação rápida, delay curto */
.crm-cometa-ui-spark:nth-child(1) {
    top: 20%;
    left: 20%;
    animation: spark-animation-1 1.8s ease-in-out infinite;
    animation-delay: 0s;
    --spark-x: 12px;
    --spark-y: -8px;
}

/* Spark 2 - Animação média, delay médio */
.crm-cometa-ui-spark:nth-child(2) {
    top: 30%;
    right: 25%;
    animation: spark-animation-2 2.3s ease-in-out infinite;
    animation-delay: 0.4s;
    --spark-x: -14px;
    --spark-y: 12px;
}

/* Spark 3 - Animação lenta, delay longo */
.crm-cometa-ui-spark:nth-child(3) {
    bottom: 25%;
    left: 30%;
    animation: spark-animation-3 2.7s ease-in-out infinite;
    animation-delay: 0.8s;
    --spark-x: 16px;
    --spark-y: 14px;
}

/* Spark 4 - Animação rápida, delay aleatório */
.crm-cometa-ui-spark:nth-child(4) {
    bottom: 30%;
    right: 20%;
    animation: spark-animation-4 1.6s ease-in-out infinite;
    animation-delay: 1.2s;
    --spark-x: -11px;
    --spark-y: -13px;
}

/* Spark 5 - Animação média, delay curto */
.crm-cometa-ui-spark:nth-child(5) {
    top: 50%;
    left: 15%;
    animation: spark-animation-5 2.1s ease-in-out infinite;
    animation-delay: 0.2s;
    --spark-x: 18px;
    --spark-y: 6px;
}

/* Spark 6 - Animação lenta, delay médio */
.crm-cometa-ui-spark:nth-child(6) {
    top: 50%;
    right: 15%;
    animation: spark-animation-6 2.5s ease-in-out infinite;
    animation-delay: 0.6s;
    --spark-x: -19px;
    --spark-y: -7px;
}

/* Spark 7 - Animação rápida, delay longo */
.crm-cometa-ui-spark:nth-child(7) {
    top: 15%;
    left: 50%;
    animation: spark-animation-7 1.9s ease-in-out infinite;
    animation-delay: 1.0s;
    --spark-x: 7px;
    --spark-y: 18px;
}

/* Spark 8 - Animação média, delay aleatório */
.crm-cometa-ui-spark:nth-child(8) {
    bottom: 15%;
    left: 50%;
    animation: spark-animation-8 2.4s ease-in-out infinite;
    animation-delay: 0.3s;
    --spark-x: -6px;
    --spark-y: -19px;
}

@keyframes ai-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-button-ai-bg {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    background-size: 200% 200%;
}

/* Animações individuais para cada spark - mais transparentes e contínuas */
@keyframes spark-animation-1 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    15% {
        opacity: 0.4;
        transform: scale(0.8) translate(calc(var(--spark-x, 0) * 0.3), calc(var(--spark-y, 0) * 0.3)) rotate(90deg);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(180deg);
    }
    85% {
        opacity: 0.3;
        transform: scale(0.6) translate(calc(var(--spark-x, 0) * 1.5), calc(var(--spark-y, 0) * 1.5)) rotate(270deg);
    }
}

@keyframes spark-animation-2 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    20% {
        opacity: 0.5;
        transform: scale(0.9) translate(calc(var(--spark-x, 0) * 0.4), calc(var(--spark-y, 0) * 0.4)) rotate(120deg);
    }
    45% {
        opacity: 0.6;
        transform: scale(1.0) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(200deg);
    }
    80% {
        opacity: 0.2;
        transform: scale(0.5) translate(calc(var(--spark-x, 0) * 1.8), calc(var(--spark-y, 0) * 1.8)) rotate(320deg);
    }
}

@keyframes spark-animation-3 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    18% {
        opacity: 0.3;
        transform: scale(0.7) translate(calc(var(--spark-x, 0) * 0.5), calc(var(--spark-y, 0) * 0.5)) rotate(60deg);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(180deg);
    }
    82% {
        opacity: 0.25;
        transform: scale(0.4) translate(calc(var(--spark-x, 0) * 2), calc(var(--spark-y, 0) * 2)) rotate(300deg);
    }
}

@keyframes spark-animation-4 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    12% {
        opacity: 0.45;
        transform: scale(0.85) translate(calc(var(--spark-x, 0) * 0.35), calc(var(--spark-y, 0) * 0.35)) rotate(75deg);
    }
    48% {
        opacity: 0.65;
        transform: scale(1.15) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(190deg);
    }
    88% {
        opacity: 0.2;
        transform: scale(0.55) translate(calc(var(--spark-x, 0) * 1.6), calc(var(--spark-y, 0) * 1.6)) rotate(340deg);
    }
}

@keyframes spark-animation-5 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    22% {
        opacity: 0.5;
        transform: scale(0.95) translate(calc(var(--spark-x, 0) * 0.45), calc(var(--spark-y, 0) * 0.45)) rotate(110deg);
    }
    52% {
        opacity: 0.7;
        transform: scale(1.05) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(195deg);
    }
    78% {
        opacity: 0.3;
        transform: scale(0.65) translate(calc(var(--spark-x, 0) * 1.7), calc(var(--spark-y, 0) * 1.7)) rotate(280deg);
    }
}

@keyframes spark-animation-6 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    16% {
        opacity: 0.35;
        transform: scale(0.75) translate(calc(var(--spark-x, 0) * 0.4), calc(var(--spark-y, 0) * 0.4)) rotate(85deg);
    }
    47% {
        opacity: 0.65;
        transform: scale(1.18) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(175deg);
    }
    84% {
        opacity: 0.25;
        transform: scale(0.5) translate(calc(var(--spark-x, 0) * 1.9), calc(var(--spark-y, 0) * 1.9)) rotate(310deg);
    }
}

@keyframes spark-animation-7 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    14% {
        opacity: 0.4;
        transform: scale(0.8) translate(calc(var(--spark-x, 0) * 0.38), calc(var(--spark-y, 0) * 0.38)) rotate(95deg);
    }
    49% {
        opacity: 0.68;
        transform: scale(1.12) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(185deg);
    }
    86% {
        opacity: 0.22;
        transform: scale(0.58) translate(calc(var(--spark-x, 0) * 1.75), calc(var(--spark-y, 0) * 1.75)) rotate(330deg);
    }
}

@keyframes spark-animation-8 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0) rotate(0deg);
    }
    19% {
        opacity: 0.42;
        transform: scale(0.88) translate(calc(var(--spark-x, 0) * 0.42), calc(var(--spark-y, 0) * 0.42)) rotate(105deg);
    }
    51% {
        opacity: 0.66;
        transform: scale(1.08) translate(var(--spark-x, 0), var(--spark-y, 0)) rotate(200deg);
    }
    81% {
        opacity: 0.28;
        transform: scale(0.62) translate(calc(var(--spark-x, 0) * 1.65), calc(var(--spark-y, 0) * 1.65)) rotate(290deg);
    }
}

.crm-cometa-ui-button-ai:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    background-size: 200% 200%;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--crm-cometa-ui-primary-bg);
    border: none;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark {
    opacity: 0.8;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.5);
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(1) {
    animation-duration: 1.4s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(2) {
    animation-duration: 1.8s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(3) {
    animation-duration: 2.1s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(4) {
    animation-duration: 1.2s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(5) {
    animation-duration: 1.6s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(6) {
    animation-duration: 1.9s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(7) {
    animation-duration: 1.5s;
}

.crm-cometa-ui-button-ai:hover .crm-cometa-ui-spark:nth-child(8) {
    animation-duration: 1.9s;
}

.crm-cometa-ui-button-ai:active {
    transform: translateY(0);
}

.crm-cometa-ui-button-ai .material-symbols-rounded {
    position: relative;
    z-index: 3;
    animation: ai-icon-pulse 2s ease-in-out infinite;
}

@keyframes ai-icon-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }
}

.crm-cometa-ui-button-ai > span:not(.crm-cometa-ui-button-ai-bg):not(.crm-cometa-ui-button-ai-sparks):not(.material-symbols-rounded) {
    position: relative;
    z-index: 3;
}

/* Autocomplete */
.crm-cometa-ui-autocomplete {
    position: relative;
}

.crm-cometa-ui-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crm-cometa-ui-bg);
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-sm);
    margin-top: var(--crm-cometa-ui-spacing-xs);
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: var(--crm-cometa-ui-shadow-lg);
}

.crm-cometa-ui-autocomplete-dropdown.active {
    display: block;
}

.crm-cometa-ui-autocomplete-item {
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-md);
    cursor: pointer;
    font-size: var(--crm-cometa-ui-font-size-sm);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-autocomplete-item:hover {
    background: var(--crm-cometa-ui-bg-secondary);
}

/* Tags */
.crm-cometa-ui-tags-input {
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-sm);
    padding: var(--crm-cometa-ui-spacing-xs);
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-xs);
    background: var(--crm-cometa-ui-bg);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-tags-input:focus-within {
    border-color: var(--crm-cometa-ui-primary-color);
    box-shadow: 0 0 0 2px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-tags-input input {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text);
    padding: var(--crm-cometa-ui-spacing-xs);
    min-height: 40px;
    box-sizing: border-box;
}

.crm-cometa-ui-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-cometa-ui-spacing-xs);
    padding-top: var(--crm-cometa-ui-spacing-xs);
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease;
}

.crm-cometa-ui-tags-list:not(:empty) {
    min-height: auto;
    max-height: 500px;
    opacity: 1;
    padding-top: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
    animation: tag-fade-in 0.3s ease;
    transform-origin: center;
}

@keyframes tag-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.crm-cometa-ui-tag-remove {
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    transition: var(--crm-cometa-ui-transition);
    opacity: 0.8;
}

.crm-cometa-ui-tag-remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Image Upload */
.crm-cometa-ui-image-upload {
    position: relative;
}

.crm-cometa-ui-image-preview {
    border: 2px dashed var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-lg);
    padding: var(--crm-cometa-ui-spacing-2xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--crm-cometa-ui-bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-md);
    min-height: 180px;
    justify-content: center;
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-image-preview:hover {
    border-color: var(--crm-cometa-ui-primary-color);
    background: var(--crm-cometa-ui-bg-tertiary);
    box-shadow: var(--crm-cometa-ui-shadow-md);
    transform: translateY(-2px);
}

.crm-cometa-ui-image-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--crm-cometa-ui-radius-md);
    box-shadow: var(--crm-cometa-ui-shadow-md);
}

.crm-cometa-ui-image-preview .material-symbols-rounded {
    font-size: 56px;
    color: var(--crm-cometa-ui-text-tertiary);
    transition: color 0.2s ease;
}

.crm-cometa-ui-image-preview:hover .material-symbols-rounded {
    color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-image-preview span:not(.material-symbols-rounded) {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-image-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Drag & Drop */
.crm-cometa-ui-drag-drop {
    border: 2px dashed var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-lg);
    padding: var(--crm-cometa-ui-spacing-2xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--crm-cometa-ui-bg-secondary);
    position: relative;
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-drag-drop:hover {
    border-color: var(--crm-cometa-ui-primary-color);
    background: var(--crm-cometa-ui-bg-tertiary);
    box-shadow: var(--crm-cometa-ui-shadow-md);
    transform: translateY(-2px);
}

.crm-cometa-ui-drag-drop.dragover {
    border-color: var(--crm-cometa-ui-primary-color);
    border-style: solid;
    background: var(--crm-cometa-ui-primary-bg);
    box-shadow: 0 0 0 3px var(--crm-cometa-ui-primary-bg), var(--crm-cometa-ui-shadow-md);
    transform: scale(1.02);
}

.crm-cometa-ui-drag-drop .material-symbols-rounded {
    font-size: 56px;
    color: var(--crm-cometa-ui-text-tertiary);
    display: block;
    margin-bottom: var(--crm-cometa-ui-spacing-md);
    transition: color 0.2s ease;
}

.crm-cometa-ui-drag-drop:hover .material-symbols-rounded {
    color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-drag-drop p {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-secondary);
    margin: 0;
}

.crm-cometa-ui-drag-drop input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Progress */
.crm-cometa-ui-progress {
    width: 100%;
    height: 8px;
    background: var(--crm-cometa-ui-bg-tertiary);
    border-radius: var(--crm-cometa-ui-radius-sm);
    overflow: hidden;
}

.crm-cometa-ui-progress-bar {
    height: 100%;
    background: var(--crm-cometa-ui-primary-color);
    border-radius: var(--crm-cometa-ui-radius-sm);
    transition: width 0.3s ease;
}

/* Barra de progresso indeterminada (animada) */
.crm-cometa-ui-progress-indeterminate .crm-cometa-ui-progress-bar {
    width: 40% !important;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
    0% { margin-left: 0; }
    50% { margin-left: 60%; }
    100% { margin-left: 0; }
}

/* Spinner */
.crm-cometa-ui-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--crm-cometa-ui-bg-tertiary);
    border-top-color: var(--crm-cometa-ui-primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.crm-cometa-ui-spinner-pulse {
    animation: pulse 1.5s ease-in-out infinite;
    border: none;
    background: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-loading-text {
    margin: 0;
    font-size: var(--crm-cometa-ui-font-size-md);
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-modal-loading-content .crm-cometa-ui-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* Badges */
.crm-cometa-ui-badges {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
    flex-wrap: wrap;
}

.crm-cometa-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 500;
    border-radius: var(--crm-cometa-ui-radius-sm);
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-text);
}
.crm-cometa-ui-badge .material-symbols-rounded,
.crm-cometa-ui-badge .material-icons,
.crm-cometa-ui-badge svg {
    flex-shrink: 0;
    font-size: 1em;
    width: 1em;
    height: 1em;
    color: inherit;
}

.crm-cometa-ui-badge-primary {
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    font-size: var(--crm-cometa-ui-font-size-sm);
}
.crm-cometa-ui-badge-primary .material-symbols-rounded,
.crm-cometa-ui-badge-primary .material-icons,
.crm-cometa-ui-badge-primary svg {
    font-size: 1.1em;
    width: 1.1em;
    height: 1.1em;
    color: #ffffff;
}

.crm-cometa-ui-badge-success {
    background: var(--crm-cometa-ui-success);
    color: #ffffff;
}
.crm-cometa-ui-badge-success .material-symbols-rounded,
.crm-cometa-ui-badge-success .material-icons,
.crm-cometa-ui-badge-success svg {
    color: #ffffff;
}

.crm-cometa-ui-badge-warning {
    background: var(--crm-cometa-ui-warning);
    color: #ffffff;
}
.crm-cometa-ui-badge-warning .material-symbols-rounded,
.crm-cometa-ui-badge-warning .material-icons,
.crm-cometa-ui-badge-warning svg {
    color: #ffffff;
}

.crm-cometa-ui-badge-error {
    background: var(--crm-cometa-ui-error);
    color: #ffffff;
}
.crm-cometa-ui-badge-error .material-symbols-rounded,
.crm-cometa-ui-badge-error .material-icons,
.crm-cometa-ui-badge-error svg {
    color: #ffffff;
}

.crm-cometa-ui-badge-info {
    background: var(--crm-cometa-ui-info);
    color: #ffffff;
}
.crm-cometa-ui-badge-info .material-symbols-rounded,
.crm-cometa-ui-badge-info .material-icons,
.crm-cometa-ui-badge-info svg {
    color: #ffffff;
}

.crm-cometa-ui-badge-secondary {
    background: var(--crm-cometa-ui-bg-tertiary, #f3f4f6);
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
}
.crm-cometa-ui-badge-secondary .material-symbols-rounded,
.crm-cometa-ui-badge-secondary .material-icons,
.crm-cometa-ui-badge-secondary svg {
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
}

/* Alerts */
.crm-cometa-ui-alert {
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-lg);
    border-radius: var(--crm-cometa-ui-radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--crm-cometa-ui-spacing-md);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
    font-size: var(--crm-cometa-ui-font-size-sm);
    position: relative;
    border-left: 4px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: var(--crm-cometa-ui-transition);
    animation: alert-fade-in 0.3s ease-out;
}

.crm-cometa-ui-alert:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

@keyframes alert-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crm-cometa-ui-alert-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    box-sizing: border-box;
}

.crm-cometa-ui-alert .material-symbols-rounded {
    font-size: 20px;
    flex-shrink: 0;
}

.crm-cometa-ui-alert-icon-wrapper .material-symbols-rounded {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.crm-cometa-ui-alert-content {
    flex: 1;
    min-width: 0;
}

.crm-cometa-ui-alert-title {
    font-weight: 600;
    font-size: var(--crm-cometa-ui-font-size-sm);
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
    line-height: 1.4;
}

.crm-cometa-ui-alert-message {
    font-size: var(--crm-cometa-ui-font-size-sm);
    line-height: 1.5;
    opacity: 0.9;
}

.crm-cometa-ui-alert-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--crm-cometa-ui-spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--crm-cometa-ui-radius-sm);
    opacity: 0.6;
    transition: var(--crm-cometa-ui-transition);
    flex-shrink: 0;
    margin-top: -2px;
    margin-right: -4px;
}

.crm-cometa-ui-alert-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.crm-cometa-ui-alert-close .material-symbols-rounded {
    font-size: 18px;
}

.crm-cometa-ui-alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--crm-cometa-ui-success);
    border-left-color: var(--crm-cometa-ui-success);
    border-top: 1px solid rgba(16, 185, 129, 0.2);
    border-right: 1px solid rgba(16, 185, 129, 0.2);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.crm-cometa-ui-alert-success .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(16, 185, 129, 0.15);
    color: var(--crm-cometa-ui-success);
}

.crm-cometa-ui-alert-success .crm-cometa-ui-alert-close:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--crm-cometa-ui-success);
}

.crm-cometa-ui-alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--crm-cometa-ui-error);
    border-left-color: var(--crm-cometa-ui-error);
    border-top: 1px solid rgba(239, 68, 68, 0.2);
    border-right: 1px solid rgba(239, 68, 68, 0.2);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.crm-cometa-ui-alert-error .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(239, 68, 68, 0.15);
    color: var(--crm-cometa-ui-error);
}

.crm-cometa-ui-alert-error .crm-cometa-ui-alert-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--crm-cometa-ui-error);
}

.crm-cometa-ui-alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: var(--crm-cometa-ui-warning);
    border-left-color: var(--crm-cometa-ui-warning);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-right: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.crm-cometa-ui-alert-warning .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(245, 158, 11, 0.15);
    color: var(--crm-cometa-ui-warning);
}

.crm-cometa-ui-alert-warning .crm-cometa-ui-alert-close:hover {
    background: rgba(245, 158, 11, 0.1);
    color: var(--crm-cometa-ui-warning);
}

.crm-cometa-ui-alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: var(--crm-cometa-ui-info);
    border-left-color: var(--crm-cometa-ui-info);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.crm-cometa-ui-alert-info .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(59, 130, 246, 0.15);
    color: var(--crm-cometa-ui-info);
}

.crm-cometa-ui-alert-info .crm-cometa-ui-alert-close:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--crm-cometa-ui-info);
}

/* Ajuste específico para ícones nas labels do modal de agendamento em massa */
#gerador-ideias-agendamento-massa .crm-cometa-ui-label .material-symbols-rounded {
    font-size: 18px !important;
    vertical-align: middle;
    position: relative;
    top: -2px !important;
    margin-right: 4px;
}

.crm-cometa-ui-alert-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-bg) 0%, var(--crm-cometa-ui-primary-bg) 100%);
    color: var(--crm-cometa-ui-primary-color);
    border-left-color: var(--crm-cometa-ui-primary-color);
    border-top: 1px solid var(--crm-cometa-ui-primary-bg);
    border-right: 1px solid var(--crm-cometa-ui-primary-bg);
    border-bottom: 1px solid var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-alert-primary .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(165, 13, 238, 0.15);
    color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-alert-primary .crm-cometa-ui-alert-close:hover {
    background: var(--crm-cometa-ui-primary-bg);
    color: var(--crm-cometa-ui-primary-color);
}

/* Modo escuro - Alertas */
[data-theme="dark"] .crm-cometa-ui-alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-top-color: rgba(16, 185, 129, 0.3);
    border-right-color: rgba(16, 185, 129, 0.3);
    border-bottom-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .crm-cometa-ui-alert-success .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .crm-cometa-ui-alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    border-top-color: rgba(239, 68, 68, 0.3);
    border-right-color: rgba(239, 68, 68, 0.3);
    border-bottom-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .crm-cometa-ui-alert-error .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .crm-cometa-ui-alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-top-color: rgba(245, 158, 11, 0.3);
    border-right-color: rgba(245, 158, 11, 0.3);
    border-bottom-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .crm-cometa-ui-alert-warning .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .crm-cometa-ui-alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-top-color: rgba(59, 130, 246, 0.3);
    border-right-color: rgba(59, 130, 246, 0.3);
    border-bottom-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .crm-cometa-ui-alert-info .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .crm-cometa-ui-alert-primary {
    background: linear-gradient(135deg, rgba(165, 13, 238, 0.15) 0%, var(--crm-cometa-ui-primary-bg) 100%);
    border-top-color: var(--crm-cometa-ui-primary-bg);
    border-right-color: var(--crm-cometa-ui-primary-bg);
    border-bottom-color: var(--crm-cometa-ui-primary-bg);
}

[data-theme="dark"] .crm-cometa-ui-alert-primary .crm-cometa-ui-alert-icon-wrapper {
    background: rgba(165, 13, 238, 0.25);
}

[data-theme="dark"] .crm-cometa-ui-alert-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Tooltips */
.crm-cometa-ui-tooltip-demo {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-md);
    flex-wrap: wrap;
}

.crm-cometa-ui-tooltip {
    position: relative;
}

.crm-cometa-ui-tooltip-text {
    position: absolute;
    background: var(--crm-cometa-ui-text);
    color: var(--crm-cometa-ui-bg);
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: var(--crm-cometa-ui-transition);
    box-shadow: var(--crm-cometa-ui-shadow-lg);
}

.crm-cometa-ui-tooltip:hover .crm-cometa-ui-tooltip-text {
    opacity: 1;
}

.crm-cometa-ui-tooltip-text[data-pos="top"] {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-tooltip-text[data-pos="right"] {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    margin-left: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-tooltip-text[data-pos="bottom"] {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-top: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-tooltip-text[data-pos="left"] {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    margin-right: var(--crm-cometa-ui-spacing-xs);
}

/* Modals */
.crm-cometa-ui-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999999 !important;
    align-items: center;
    justify-content: center;
    padding: var(--crm-cometa-ui-spacing-lg);
}

/* Modais de alerta/confirmação/loading acima de outros modais (ex: modal-fatura) */
.crm-cometa-ui-modal[id^="modal-alert-"],
.crm-cometa-ui-modal[id^="modal-confirmacao-"],
.crm-cometa-ui-modal[id^="modal-loading-"],
.crm-cometa-ui-modal-success,
.crm-cometa-ui-modal-error {
    z-index: 2147483647 !important;
}

.crm-cometa-ui-modal[id^="modal-alert-"] .crm-cometa-ui-modal-content,
.crm-cometa-ui-modal[id^="modal-confirmacao-"] .crm-cometa-ui-modal-content,
.crm-cometa-ui-modal[id^="modal-loading-"] .crm-cometa-ui-modal-content {
    z-index: 2147483647 !important;
}

.crm-cometa-ui-modal.active {
    display: flex;
}

.crm-cometa-ui-modal-content {
    background: var(--crm-cometa-ui-bg);
    border-radius: var(--crm-cometa-ui-radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--crm-cometa-ui-shadow-xl);
    position: relative;
    z-index: 999999 !important;
}

.crm-cometa-ui-modal-large {
    max-width: 700px;
}

/* Modal tela cheia */
.crm-cometa-ui-modal-fullscreen {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}
.crm-cometa-ui-modal-fullscreen .crm-cometa-ui-modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.crm-cometa-ui-modal-fullscreen .crm-cometa-ui-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.crm-cometa-ui-modal-header {
    padding: var(--crm-cometa-ui-spacing-lg);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crm-cometa-ui-modal-header h3 {
    margin: 0;
    font-size: var(--crm-cometa-ui-font-size-lg);
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
}
[data-theme="dark"] .crm-cometa-ui-modal-header h3 .material-symbols-rounded,
.crm-cometa-ui-modal-header h3 .material-symbols-rounded {
    position: relative;
    top: 2px;
}

[data-theme="dark"] .crm-cometa-ui-modal-header h3 {
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--crm-cometa-ui-text-secondary);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    border-radius: var(--crm-cometa-ui-radius-sm);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-modal-close .material-symbols-rounded {
    font-size: 24px;
    line-height: 1;
    position: relative;
    top: 2px;
}

.crm-cometa-ui-modal-close:hover {
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-modal-close:hover .material-symbols-rounded {
    color: var(--crm-cometa-ui-text);
}

/* Botão de fechar no header (apenas ícone) */
.crm-cometa-ui-modal-header .crm-cometa-ui-modal-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
}

/* Botão de cancelar no footer (com texto) */
.crm-cometa-ui-modal-footer .crm-cometa-ui-modal-close {
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-modal-body {
    padding: var(--crm-cometa-ui-spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.crm-cometa-ui-modal-footer {
    padding: var(--crm-cometa-ui-spacing-lg);
    border-top: 1px solid var(--crm-cometa-ui-border);
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
    justify-content: flex-end;
}

/* Modal Ecossistema Cometa */
.crm-cometa-ui-modal-ecosystem .crm-cometa-ui-modal-content {
    max-width: 720px;
}
.crm-cometa-ui-modal-ecosystem .crm-cometa-ui-modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
}
.crm-cometa-ui-modal-ecosystem .crm-cometa-ui-modal-header h3 .material-symbols-rounded {
    font-size: 22px;
    color: var(--crm-cometa-ui-primary-color);
}
.crm-cometa-ui-modal-ecosystem-body {
    padding: var(--crm-cometa-ui-spacing-xl) !important;
}
.crm-cometa-ui-ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--crm-cometa-ui-spacing-md);
}
.crm-cometa-ui-ecosystem-card {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-md);
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-lg);
    background: var(--crm-cometa-ui-bg-secondary);
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-md);
    text-decoration: none;
    color: var(--crm-cometa-ui-text);
    transition: var(--crm-cometa-ui-transition);
}
.crm-cometa-ui-ecosystem-card:hover {
    background: var(--crm-cometa-ui-bg-tertiary);
    border-color: var(--crm-cometa-ui-primary-color);
    box-shadow: var(--crm-cometa-ui-shadow-md);
}
.crm-cometa-ui-ecosystem-card-icon {
    font-size: 28px !important;
    color: var(--crm-cometa-ui-primary-color);
    flex-shrink: 0;
}
.crm-cometa-ui-ecosystem-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.crm-cometa-ui-ecosystem-card-name {
    font-weight: 600;
    font-size: var(--crm-cometa-ui-font-size-sm);
}
.crm-cometa-ui-ecosystem-card-desc {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
}
.crm-cometa-ui-ecosystem-card-external {
    font-size: 16px !important;
    color: var(--crm-cometa-ui-text-tertiary);
    margin-left: auto;
}

/* Modal Sucesso (verde) e Modal Erro (vermelho) */
.crm-cometa-ui-modal-status {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
}
.crm-cometa-ui-modal-status-icon .material-symbols-rounded {
    font-size: 28px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.crm-cometa-ui-modal-status h3 { margin: 0; }

.crm-cometa-ui-modal-success .crm-cometa-ui-modal-content {
    border-top: 4px solid var(--crm-cometa-ui-success);
}
.crm-cometa-ui-modal-success-header .crm-cometa-ui-modal-status-icon .material-symbols-rounded {
    color: var(--crm-cometa-ui-success);
}
.crm-cometa-ui-modal-success-header h3 {
    color: var(--crm-cometa-ui-success-dark);
}

.crm-cometa-ui-modal-error .crm-cometa-ui-modal-content {
    border-top: 4px solid var(--crm-cometa-ui-error);
}
.crm-cometa-ui-modal-error-header .crm-cometa-ui-modal-status-icon .material-symbols-rounded {
    color: var(--crm-cometa-ui-error);
}
.crm-cometa-ui-modal-error-header h3 {
    color: var(--crm-cometa-ui-error);
}
.crm-cometa-ui-modal-feedback-message {
    margin: 0;
    color: var(--crm-cometa-ui-text-secondary);
    font-size: var(--crm-cometa-ui-font-size-sm);
    line-height: 1.5;
}

/* Empty State */
.crm-cometa-ui-empty-state {
    text-align: center;
    padding: var(--crm-cometa-ui-spacing-2xl);
    background: var(--crm-cometa-ui-bg-secondary);
    border-radius: var(--crm-cometa-ui-radius-md);
}

.crm-cometa-ui-empty-state .material-symbols-rounded {
    font-size: 128px;
    color: var(--crm-cometa-ui-text-tertiary);
    display: block;
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-empty-state h3 {
    margin: 0 0 var(--crm-cometa-ui-spacing-sm) 0;
    font-size: var(--crm-cometa-ui-font-size-lg);
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-empty-state p {
    margin: 0 0 var(--crm-cometa-ui-spacing-lg) 0;
    color: var(--crm-cometa-ui-text-secondary);
    font-size: var(--crm-cometa-ui-font-size-sm);
}

.crm-cometa-ui-empty-state-error .material-symbols-rounded {
    color: var(--crm-cometa-ui-warning);
}

.crm-cometa-ui-empty-state-error h3 {
    color: var(--crm-cometa-ui-text);
}

/* Skeleton */
.crm-cometa-ui-skeleton {
    padding: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-skeleton-line {
    background: linear-gradient(90deg, var(--crm-cometa-ui-bg-tertiary) 25%, var(--crm-cometa-ui-bg-secondary) 50%, var(--crm-cometa-ui-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--crm-cometa-ui-radius-sm);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Breadcrumb */
.crm-cometa-ui-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    font-size: var(--crm-cometa-ui-font-size-sm);
    padding: var(--crm-cometa-ui-spacing-md);
    background: var(--crm-cometa-ui-bg-secondary);
    border-radius: var(--crm-cometa-ui-radius-sm);
}

.crm-cometa-ui-breadcrumb a {
    color: var(--crm-cometa-ui-primary-color);
    text-decoration: none;
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-breadcrumb a:hover {
    text-decoration: underline;
}

.crm-cometa-ui-breadcrumb .material-symbols-rounded {
    font-size: 16px;
    color: var(--crm-cometa-ui-text-tertiary);
}

.crm-cometa-ui-breadcrumb span:last-child {
    color: var(--crm-cometa-ui-text-secondary);
}

/* Pagination */
.crm-cometa-ui-pagination {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-xs);
    align-items: center;
}

.crm-cometa-ui-pagination-btn {
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    border: 1px solid var(--crm-cometa-ui-border);
    background: var(--crm-cometa-ui-bg);
    color: var(--crm-cometa-ui-text);
    border-radius: var(--crm-cometa-ui-radius-sm);
    cursor: pointer;
    font-size: var(--crm-cometa-ui-font-size-sm);
    transition: var(--crm-cometa-ui-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.crm-cometa-ui-pagination-btn:hover:not(:disabled) {
    background: var(--crm-cometa-ui-bg-secondary);
    border-color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-pagination-btn.active {
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    border-color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-cometa-ui-pagination-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Cards */
.crm-cometa-ui-card {
    background: var(--crm-cometa-ui-bg);
    border: none; /* Borda removida conforme solicitação do usuário */
    border-radius: var(--crm-cometa-ui-radius-md);
    overflow: hidden;
    box-shadow: var(--crm-cometa-ui-shadow-sm);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-card:hover {
    box-shadow: var(--crm-cometa-ui-shadow-md);
}

.crm-cometa-ui-card-header {
    padding: var(--crm-cometa-ui-spacing-lg);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
}

.crm-cometa-ui-card-header h3 {
    margin: 0;
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 600;
}



.crm-cometa-ui-card-body p {
    margin: 0;
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-card-footer {
    padding: var(--crm-cometa-ui-spacing-lg);
    border-top: 1px solid var(--crm-cometa-ui-border);
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--crm-cometa-ui-spacing-lg);
}

@media (max-width: 1200px) {
    .crm-cometa-ui-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .crm-cometa-ui-grid-2,
    .crm-cometa-ui-grid-3,
    .crm-cometa-ui-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Cards de Posts */
.crm-cometa-ui-card-post {
    display: flex;
    flex-direction: column;
}

.crm-cometa-ui-card-post-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-card-post-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--crm-cometa-ui-bg-secondary) 0%, var(--crm-cometa-ui-bg-tertiary) 100%);
}

.crm-cometa-ui-card-post-image-placeholder .material-symbols-rounded {
    font-size: 48px;
    color: var(--crm-cometa-ui-text-tertiary);
}

.crm-cometa-ui-card-post-badge {
    position: absolute;
    top: var(--crm-cometa-ui-spacing-sm);
    right: var(--crm-cometa-ui-spacing-sm);
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 600;
}

.crm-cometa-ui-card-post-title {
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 600;
    margin: 0 0 var(--crm-cometa-ui-spacing-sm) 0;
    color: var(--crm-cometa-ui-text);
    line-height: 1.4;
}

.crm-cometa-ui-card-post-excerpt {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--crm-cometa-ui-spacing-md) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crm-cometa-ui-card-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-cometa-ui-spacing-md);
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
}

.crm-cometa-ui-card-post-meta-item {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-post-meta-item .material-symbols-rounded {
    font-size: 16px;
}

.crm-cometa-ui-card-post-actions {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-action-btn {
    background: transparent;
    border: none;
    padding: var(--crm-cometa-ui-spacing-xs);
    cursor: pointer;
    border-radius: var(--crm-cometa-ui-radius-sm);
    color: var(--crm-cometa-ui-text-secondary);
    transition: var(--crm-cometa-ui-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-cometa-ui-card-action-btn:hover {
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-card-action-btn .material-symbols-rounded {
    font-size: 18px;
}

.crm-cometa-ui-card-post-category {
    display: inline-block;
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 500;
    margin-bottom: var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-card-post-compact {
    border-left: 3px solid var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-card-post-header-compact {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-card-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--crm-cometa-ui-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-cometa-ui-card-post-avatar .material-symbols-rounded {
    font-size: 24px;
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-card-post-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-cometa-ui-card-post-author-info strong {
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-card-post-author-info span {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
}

/* Cards de Produtos */
.crm-cometa-ui-card-product {
    display: flex;
    flex-direction: column;
}

.crm-cometa-ui-card-product-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-card-product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--crm-cometa-ui-bg-secondary) 0%, var(--crm-cometa-ui-bg-tertiary) 100%);
}

.crm-cometa-ui-card-product-image-placeholder .material-symbols-rounded {
    font-size: 64px;
    color: var(--crm-cometa-ui-text-tertiary);
}

.crm-cometa-ui-card-product-badge {
    position: absolute;
    top: var(--crm-cometa-ui-spacing-sm);
    left: var(--crm-cometa-ui-spacing-sm);
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 600;
    color: #ffffff;
}

.crm-cometa-ui-card-product-badge-sale {
    background: var(--crm-cometa-ui-error);
}

.crm-cometa-ui-card-product-badge-new {
    background: var(--crm-cometa-ui-success);
}

.crm-cometa-ui-card-product-favorite {
    position: absolute;
    top: var(--crm-cometa-ui-spacing-sm);
    right: var(--crm-cometa-ui-spacing-sm);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-card-product-favorite:hover {
    background: #ffffff;
    transform: scale(1.1);
}

.crm-cometa-ui-card-product-favorite .material-symbols-rounded {
    font-size: 20px;
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-card-product-category {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-product-title {
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 600;
    margin: 0 0 var(--crm-cometa-ui-spacing-sm) 0;
    color: var(--crm-cometa-ui-text);
    line-height: 1.4;
}

.crm-cometa-ui-card-product-rating {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-card-product-rating .material-symbols-rounded {
    font-size: 16px;
    color: #fbbf24;
}

.crm-cometa-ui-card-product-rating-text {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
    margin-left: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-product-price {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
    margin-bottom: var(--crm-cometa-ui-spacing-sm);
}

.crm-cometa-ui-card-product-price-current {
    font-size: var(--crm-cometa-ui-font-size-lg);
    font-weight: 700;
    color: var(--crm-cometa-ui-success);
}

.crm-cometa-ui-card-product-price-old {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-tertiary);
    text-decoration: line-through;
}

/* Cards de Eventos */
.crm-cometa-ui-card-event {
    display: flex;
    flex-direction: column;
}

.crm-cometa-ui-card-event-header {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-md);
    padding: var(--crm-cometa-ui-spacing-lg);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
}

.crm-cometa-ui-card-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: var(--crm-cometa-ui-spacing-sm);
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    border-radius: var(--crm-cometa-ui-radius-md);
    text-align: center;
}

.crm-cometa-ui-card-event-day {
    font-size: var(--crm-cometa-ui-font-size-xl);
    font-weight: 700;
    line-height: 1;
}

.crm-cometa-ui-card-event-month {
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    margin-top: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-event-info {
    flex: 1;
}

.crm-cometa-ui-card-event-title {
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 600;
    margin: 0 0 var(--crm-cometa-ui-spacing-sm) 0;
    color: var(--crm-cometa-ui-text);
    line-height: 1.4;
}

.crm-cometa-ui-card-event-meta {
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-event-meta-item {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-card-event-meta-item .material-symbols-rounded {
    font-size: 16px;
}

/* Cards de Perfil/Usuário */
.crm-cometa-ui-card-profile {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.crm-cometa-ui-card-profile-header {
    position: relative;
    padding: var(--crm-cometa-ui-spacing-xl) var(--crm-cometa-ui-spacing-lg) var(--crm-cometa-ui-spacing-md);
    display: flex;
    justify-content: center;
}

.crm-cometa-ui-card-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--crm-cometa-ui-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--crm-cometa-ui-bg);
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-card-profile-avatar .material-symbols-rounded {
    font-size: 48px;
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-card-profile-status {
    position: absolute;
    bottom: var(--crm-cometa-ui-spacing-md);
    right: calc(50% - 40px + 24px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--crm-cometa-ui-bg);
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-card-profile-status-online {
    background: var(--crm-cometa-ui-success);
}

.crm-cometa-ui-card-profile-status-away {
    background: var(--crm-cometa-ui-warning);
}

.crm-cometa-ui-card-profile-status-offline {
    background: var(--crm-cometa-ui-text-tertiary);
}

.crm-cometa-ui-card-profile-name {
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 600;
    margin: 0 0 var(--crm-cometa-ui-spacing-xs) 0;
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-card-profile-role {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-secondary);
    margin: 0 0 var(--crm-cometa-ui-spacing-md) 0;
}

.crm-cometa-ui-card-profile-stats {
    display: flex;
    justify-content: space-around;
    padding: var(--crm-cometa-ui-spacing-md) 0;
    border-top: 1px solid var(--crm-cometa-ui-border);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-card-profile-stat {
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-profile-stat strong {
    font-size: var(--crm-cometa-ui-font-size-md);
    font-weight: 700;
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-card-profile-stat span {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
}

/* Cards de Estatísticas */
.crm-cometa-ui-card-stat {
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative; /* para o badge-ilimitado (position: absolute) ficar sobre o card */
}

.crm-cometa-ui-card-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--crm-cometa-ui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-card-stat-icon .material-symbols-rounded {
    font-size: 28px;
    color: #ffffff;
}

.crm-cometa-ui-card-stat-icon-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
}

.crm-cometa-ui-card-stat-icon-success {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success) 0%, var(--crm-cometa-ui-success-light) 100%);
}

.crm-cometa-ui-card-stat-icon-warning {
    background: linear-gradient(135deg, var(--crm-cometa-ui-warning) 0%, #fbbf24 100%);
}

.crm-cometa-ui-card-stat-icon-info {
    background: linear-gradient(135deg, var(--crm-cometa-ui-info) 0%, #60a5fa 100%);
}

.crm-cometa-ui-card-stat-icon-error {
    background: linear-gradient(135deg, var(--crm-cometa-ui-error) 0%, #f87171 100%);
}

.crm-cometa-ui-card-stat-value {
    font-size: var(--crm-cometa-ui-font-size-2xl);
    font-weight: 700;
    color: var(--crm-cometa-ui-text);
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
    line-height: 1.2;
}

.crm-cometa-ui-card-stat-label {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-secondary);
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-stat-change {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    font-size: var(--crm-cometa-ui-font-size-xs);
    font-weight: 600;
    padding: var(--crm-cometa-ui-spacing-xs) var(--crm-cometa-ui-spacing-sm);
    border-radius: var(--crm-cometa-ui-radius-sm);
}

.crm-cometa-ui-card-stat-change .material-symbols-rounded {
    font-size: 14px;
}

.crm-cometa-ui-card-stat-change-positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--crm-cometa-ui-success);
}

.crm-cometa-ui-card-stat-change-negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--crm-cometa-ui-error);
}

/* Card com ícone e descrição (selecionável) */
.crm-cometa-ui-card-icon-desc {
    display: block;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    overflow: hidden;
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-bg) 0%, var(--crm-cometa-ui-primary-bg) 50%, var(--crm-cometa-ui-primary-bg) 100%) !important;
    border-radius: var(--crm-cometa-ui-radius-lg);
    position: relative;
}

.crm-cometa-ui-card-icon-desc::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    border-radius: inherit;
    background: radial-gradient(ellipse 100% 120% at 0% 50%, var(--crm-cometa-ui-primary-bg) 0%, var(--crm-cometa-ui-primary-bg) 45%, var(--crm-cometa-ui-primary-bg) 75%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.crm-cometa-ui-card-icon-desc:hover {
    box-shadow: var(--crm-cometa-ui-shadow-md);
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-bg) 0%, var(--crm-cometa-ui-primary-bg) 50%, var(--crm-cometa-ui-primary-bg) 100%) !important;
}

.crm-cometa-ui-card-icon-desc-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.crm-cometa-ui-card-icon-desc-check {
    position: absolute;
    top: var(--crm-cometa-ui-spacing-sm);
    right: var(--crm-cometa-ui-spacing-sm);
    font-size: 22px;
    color: var(--crm-cometa-ui-success);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.crm-cometa-ui-card-icon-desc-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--crm-cometa-ui-spacing-md);
    padding: var(--crm-cometa-ui-spacing-lg);
    padding-right: calc(var(--crm-cometa-ui-spacing-lg) + 28px);
    position: relative;
    z-index: 1;
}

.crm-cometa-ui-card-icon-desc-icon {
    font-size: 52px;
    color: var(--crm-cometa-ui-primary-color);
    flex-shrink: 0;
    width: auto;
    opacity: 0.7;
    height: auto;
    background: none !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
}

.crm-cometa-ui-card-icon-desc-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-card-icon-desc-label {
    font-weight: 600;
    font-size: var(--crm-cometa-ui-font-size-md);
    color: var(--crm-cometa-ui-text);
    line-height: 1.3;
}

.crm-cometa-ui-card-icon-desc-desc {
    font-size: var(--crm-cometa-ui-font-size-sm);
    color: var(--crm-cometa-ui-text-tertiary);
    line-height: 1.4;
}

/* Modo escuro - melhorar clareza da descrição nos cards de tipo de post */
[data-theme="dark"] .crm-cometa-ui-card-icon-desc-desc {
    color: var(--crm-cometa-ui-text-secondary, #b0b0b0);
    opacity: 0.9;
    font-weight: 400;
}

[data-theme="dark"] .crm-cometa-ui-card-icon-desc-label {
    color: var(--crm-cometa-ui-text, #e9e9e9);
    font-weight: 600;
}

.crm-cometa-ui-card-icon-desc-selected,
.crm-cometa-ui-card-icon-desc:has(.crm-cometa-ui-card-icon-desc-checkbox:checked) {
    border-color: var(--crm-cometa-ui-primary-color);
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-bg) 0%, var(--crm-cometa-ui-primary-bg) 50%, var(--crm-cometa-ui-primary-bg) 100%) !important;
    box-shadow: 0 0 0 1px var(--crm-cometa-ui-primary-color), var(--crm-cometa-ui-shadow-sm);
}

.crm-cometa-ui-card-icon-desc-selected .crm-cometa-ui-card-icon-desc-check,
.crm-cometa-ui-card-icon-desc:has(.crm-cometa-ui-card-icon-desc-checkbox:checked) .crm-cometa-ui-card-icon-desc-check {
    opacity: 1;
}

/* Grupo de checkboxes (lista de opções) – padrão UI, 1 coluna */
.form-editor-checkbox-group.crm-cometa-ui-checkbox-group,
.crm-cometa-ui-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-sm);
    background: var(--crm-cometa-ui-bg-secondary);
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-md);
    padding: var(--crm-cometa-ui-spacing-md);
    max-width: 100%;
}

.crm-cometa-ui-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
    padding: var(--crm-cometa-ui-spacing-sm) var(--crm-cometa-ui-spacing-md);
    background: var(--crm-cometa-ui-bg);
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-md);
    font-size: var(--crm-cometa-ui-font-size-sm, 0.9rem);
    font-weight: 500;
    color: var(--crm-cometa-ui-text);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.crm-cometa-ui-checkbox-item:has(> input[type="checkbox"]) {
    cursor: pointer;
}
.crm-cometa-ui-checkbox-item .crm-cometa-ui-toggle {
    flex-shrink: 0;
}

.crm-cometa-ui-checkbox-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--crm-cometa-ui-primary-bg), transparent);
    transition: left 0.3s ease;
    pointer-events: none;
}

.crm-cometa-ui-checkbox-item:hover {
    border-color: var(--crm-cometa-ui-primary-color);
    background: var(--crm-cometa-ui-bg-secondary);
    box-shadow: 0 2px 8px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-checkbox-item:hover::before {
    left: 100%;
}

.crm-cometa-ui-checkbox-item > input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--crm-cometa-ui-primary-color);
    cursor: pointer;
}

.crm-cometa-ui-checkbox-item > span:first-of-type {
    flex: 1;
    font-weight: 500;
}

.crm-cometa-ui-checkbox-item .obrigatorio-label {
    font-size: 0.75rem;
    color: var(--crm-cometa-ui-text-secondary);
    font-weight: 400;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: var(--crm-cometa-ui-bg-secondary);
    border-radius: var(--crm-cometa-ui-radius-sm);
    border: 1px solid var(--crm-cometa-ui-border);
}

.crm-cometa-ui-checkbox-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--crm-cometa-ui-bg-secondary);
    border-color: var(--crm-cometa-ui-border);
}

.crm-cometa-ui-checkbox-item.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--crm-cometa-ui-border);
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-checkbox-item.disabled .obrigatorio-label {
    background: var(--crm-cometa-ui-primary-color);
    color: #fff;
    border-color: var(--crm-cometa-ui-primary-color);
}

/* Modo Escuro - Cards */
[data-theme="dark"] .crm-cometa-ui-card-post-image-placeholder,
[data-theme="dark"] .crm-cometa-ui-card-product-image-placeholder {
    background: linear-gradient(135deg, var(--crm-cometa-ui-bg-secondary) 0%, var(--crm-cometa-ui-bg-tertiary) 100%);
}

[data-theme="dark"] .crm-cometa-ui-card-post-avatar,
[data-theme="dark"] .crm-cometa-ui-card-profile-avatar {
    background: var(--crm-cometa-ui-bg-tertiary);
    border-color: var(--crm-cometa-ui-bg-secondary);
}

[data-theme="dark"] .crm-cometa-ui-card-product-favorite {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .crm-cometa-ui-card-product-favorite:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Date/Time Picker */
.crm-cometa-ui-datetime-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.crm-cometa-ui-datetime-input {
    padding-right: 40px !important;
}

.crm-cometa-ui-datetime-trigger {
    position: absolute;
    right: var(--crm-cometa-ui-spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: var(--crm-cometa-ui-spacing-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--crm-cometa-ui-radius-sm);
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-datetime-trigger:hover {
    background: var(--crm-cometa-ui-bg-secondary, #f3f4f6);
    color: var(--crm-cometa-ui-primary-color, var(--crm-cometa-ui-primary-color));
}

.crm-cometa-ui-datetime-trigger .material-symbols-rounded {
    font-size: 20px;
    color: inherit;
}

.crm-cometa-ui-datetime-picker {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999999999999 !important; /* Z-index máximo para aparecer sobre qualquer modal */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
}

.crm-cometa-ui-datetime-picker.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999999999999 !important;
    pointer-events: auto !important;
}

.crm-cometa-ui-datetime-picker-content {
    background: var(--crm-cometa-ui-bg);
    border-radius: var(--crm-cometa-ui-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 280px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: datetime-picker-slide-up 0.3s ease;
    position: relative;
    z-index: 9999999999999 !important; /* Garantir que o conteúdo também tenha z-index alto */
}

/* Desktop - layout lado a lado */
@media (min-width: 768px) {
    .crm-cometa-ui-datetime-picker-content {
        width: 500px;
    }
}

@keyframes datetime-picker-slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.crm-cometa-ui-datetime-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-lg);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-datetime-picker-nav {
    background: transparent;
    border: none;
    padding: var(--crm-cometa-ui-spacing-xs);
    cursor: pointer;
    border-radius: var(--crm-cometa-ui-radius-sm);
    color: var(--crm-cometa-ui-text);
    transition: var(--crm-cometa-ui-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.crm-cometa-ui-datetime-picker-nav:hover {
    background: var(--crm-cometa-ui-bg-tertiary);
    color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-datetime-picker-nav .material-symbols-rounded {
    font-size: 20px;
}

.crm-cometa-ui-datetime-picker-month-year {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    font-size: var(--crm-cometa-ui-font-size-base);
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
}

.crm-cometa-ui-datetime-picker-body {
    display: flex;
    flex-direction: column;
}

/* Desktop - data e hora lado a lado */
@media (min-width: 768px) {
    .crm-cometa-ui-datetime-picker-body {
        flex-direction: row;
        align-items: stretch;
    }
    
    /* Quando apenas hora (calendário escondido), centralizar no desktop também */
    .crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-calendar[style*="display: none"]) .crm-cometa-ui-datetime-picker-body {
        justify-content: center;
        align-items: center;
        min-height: 200px;
        flex: 1;
    }
    
    .crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-calendar[style*="display: none"]) .crm-cometa-ui-datetime-picker-time {
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-right: none;
        padding: var(--crm-cometa-ui-spacing-lg);
        width: 100%;
        min-width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    /* Esconder header quando apenas hora */
    .crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-header[style*="display: none"]) .crm-cometa-ui-datetime-picker-header {
        display: none !important;
    }
}

.crm-cometa-ui-datetime-picker-calendar {
    padding: var(--crm-cometa-ui-spacing-sm);
    flex: 1;
}

.crm-cometa-ui-datetime-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--crm-cometa-ui-spacing-xs);
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-datetime-picker-weekday {
    text-align: center;
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 600;
    color: var(--crm-cometa-ui-text-secondary);
    padding: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-datetime-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-datetime-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-sm);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    background: transparent;
    border: none;
    color: var(--crm-cometa-ui-text);
    padding: var(--crm-cometa-ui-spacing-xs);
    min-height: 28px;
}

.crm-cometa-ui-datetime-picker-day:hover {
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-datetime-picker-day.other-month {
    color: var(--crm-cometa-ui-text-tertiary);
    opacity: 0.5;
}

.crm-cometa-ui-datetime-picker-day.today {
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    font-weight: 600;
}

.crm-cometa-ui-datetime-picker-day.selected {
    background: var(--crm-cometa-ui-primary-color);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-datetime-picker-time {
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-lg);
    border-top: 1px solid var(--crm-cometa-ui-border);
    border-bottom: 1px solid var(--crm-cometa-ui-border);
    flex: 0 0 auto;
}

/* Quando apenas hora (calendário escondido), centralizar a seção de hora */
.crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-calendar[style*="display: none"]) .crm-cometa-ui-datetime-picker-body {
    justify-content: center;
    align-items: center;
    min-height: 200px;
    flex: 1;
}

.crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-calendar[style*="display: none"]) .crm-cometa-ui-datetime-picker-time {
    border-top: none;
    border-bottom: none;
    padding: var(--crm-cometa-ui-spacing-lg);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Desktop - ajustes para layout lado a lado */
@media (min-width: 768px) {
    .crm-cometa-ui-datetime-picker-time:not([style*="display: none"]) {
        border-top: none;
        border-bottom: none;
        border-left: 1px solid var(--crm-cometa-ui-border);
        width: 220px;
        min-width: 220px;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }
    
    /* Quando for apenas time, manter layout vertical no desktop também */
    .crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-calendar[style*="display: none"]) .crm-cometa-ui-datetime-picker-body {
        flex-direction: column;
    }
    
    /* Quando for apenas date, manter layout vertical no desktop também */
    .crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-time[style*="display: none"]) .crm-cometa-ui-datetime-picker-body {
        flex-direction: column;
    }
    
    /* Garantir que quando escondido, não apareça */
    .crm-cometa-ui-datetime-picker-time[style*="display: none"] {
        display: none !important;
    }
    
    .crm-cometa-ui-datetime-picker-calendar[style*="display: none"] {
        display: none !important;
    }
}

.crm-cometa-ui-datetime-picker-time-label {
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
    text-align: center;
}

.crm-cometa-ui-datetime-picker-time-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.crm-cometa-ui-time-wheel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--crm-cometa-ui-spacing-sm);
   
    position: relative;
}

.crm-cometa-ui-time-wheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
    position: relative;
}

.crm-cometa-ui-time-wheel-arrow {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    padding: 0;
    color: var(--crm-cometa-ui-text);
    flex-shrink: 0;
}

.crm-cometa-ui-time-wheel-arrow:hover {
    background: transparent !important;
    border: none !important;
    color: var(--crm-cometa-ui-primary-color);
}

.crm-cometa-ui-time-wheel-arrow:active {
    background: transparent !important;
    color: var(--crm-cometa-ui-primary-color);
    border: none !important;
}

.crm-cometa-ui-time-wheel-arrow .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
}

.crm-cometa-ui-time-wheel {
    position: relative;
    width: 80px;
    height: 120px;
    overflow: hidden;
    border-radius: var(--crm-cometa-ui-radius-md);
}

.crm-cometa-ui-time-wheel-items {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.crm-cometa-ui-time-wheel-items:active {
    cursor: grabbing;
}

.crm-cometa-ui-time-wheel-items::-webkit-scrollbar {
    display: none;
}

.crm-cometa-ui-time-wheel-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--crm-cometa-ui-font-size-lg);
    font-weight: 400;
    color: var(--crm-cometa-ui-text-tertiary);
    transition: all 0.15s ease;
    user-select: none;
    cursor: pointer;
    opacity: 0.5;
    transform: scale(0.85);
}

.crm-cometa-ui-time-wheel-item.selected {
    color: var(--crm-cometa-ui-text) !important;
    font-weight: 700 !important;
    font-size: var(--crm-cometa-ui-font-size-2xl) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1.15) !important;
    z-index: 10;
    position: relative;
}

.crm-cometa-ui-time-wheel-item:hover {
    color: var(--crm-cometa-ui-primary-color);
    opacity: 0;
    visibility: hidden;
}

/* Esconder itens não selecionados */
.crm-cometa-ui-time-wheel-item:not(.selected) {
    opacity: 0.5;
    transform: scale(0.85);
}

/* Gradiente de fade nas bordas */
.crm-cometa-ui-time-wheel::before,
.crm-cometa-ui-time-wheel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 2;
}

.crm-cometa-ui-time-wheel::before {
    top: 0;
    background: linear-gradient(to bottom, var(--crm-cometa-ui-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-theme="dark"] .crm-cometa-ui-time-wheel::before {
    background: linear-gradient(to bottom, var(--crm-cometa-ui-bg) 0%, rgba(26, 26, 26, 0) 100%);
}

.crm-cometa-ui-time-wheel::after {
    bottom: 0;
    background: linear-gradient(to top, var(--crm-cometa-ui-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-theme="dark"] .crm-cometa-ui-time-wheel::after {
    background: linear-gradient(to top, var(--crm-cometa-ui-bg) 0%, rgba(26, 26, 26, 0) 100%);
}

/* Linha de seleção central - área destacada */
.crm-cometa-ui-time-wheel {
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-time-wheel::before {
    border-top: none;
    box-shadow: none;
}

.crm-cometa-ui-time-wheel::after {
    border-bottom: none;
    box-shadow: none;
}

.crm-cometa-ui-time-wheel-separator {
    font-size: var(--crm-cometa-ui-font-size-2xl);
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
    padding: 0 var(--crm-cometa-ui-spacing-xs);
    align-self: center;
}

.crm-cometa-ui-datetime-picker-footer {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
    padding: var(--crm-cometa-ui-spacing-md) var(--crm-cometa-ui-spacing-lg);
    border-top: 1px solid var(--crm-cometa-ui-border);
    justify-content: flex-end;
}

/* Quando for apenas hora (calendário escondido), ajustar footer */
.crm-cometa-ui-datetime-picker-content:has(.crm-cometa-ui-datetime-picker-calendar[style*="display: none"]) .crm-cometa-ui-datetime-picker-footer {
    border-top: none;
    justify-content: center;
    margin-top: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-datetime-picker-footer .crm-cometa-ui-button {
    min-width: 80px;
}

/* Modo escuro - Date/Time Picker */
[data-theme="dark"] .crm-cometa-ui-datetime-picker {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .crm-cometa-ui-datetime-picker-content {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ===== Modal Histórico de Notificações (padrão UI) ===== */
/* Modal fora de blocos – centralizado na tela (viewport) */
.crm-modal-historico-notificacoes {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--crm-cometa-ui-spacing-lg) !important;
    z-index: 999999999 !important;
    box-sizing: border-box !important;
}
.crm-modal-historico-notificacoes.active {
    display: flex !important;
}
/* Conteúdo do modal sempre centralizado na viewport (evita deslocamento por transform no admin) */
.crm-modal-historico-notificacoes .crm-cometa-ui-modal-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
}

.crm-modal-historico-notificacoes .historico-modal-inner .crm-cometa-ui-section-title {
    margin-bottom: var(--crm-cometa-ui-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
    color: var(--crm-cometa-ui-text);
    font-size: var(--crm-cometa-ui-font-size-base);
    font-weight: 600;
}
.crm-modal-historico-notificacoes .historico-fatura-info .historico-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--crm-cometa-ui-spacing-md);
}
.crm-modal-historico-notificacoes .historico-info-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-modal-historico-notificacoes .historico-info-value-small { font-size: 1rem; font-weight: 500; }
.crm-modal-historico-notificacoes .historico-info-value-xsmall { font-size: 0.875rem; }
.crm-modal-historico-notificacoes .historico-lista {
    max-height: 400px;
    overflow-y: auto;
}
.crm-modal-historico-notificacoes .historico-item {
    padding: var(--crm-cometa-ui-spacing-md);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
    background: var(--crm-cometa-ui-bg);
    border-radius: var(--crm-cometa-ui-radius-md);
    border: 1px solid var(--crm-cometa-ui-border);
    box-shadow: var(--crm-cometa-ui-shadow-sm);
}
.crm-modal-historico-notificacoes .historico-item.email-aberto { border-left: 4px solid var(--crm-cometa-ui-success); }
.crm-modal-historico-notificacoes .historico-item.email-nao-aberto { border-left: 4px solid var(--crm-cometa-ui-border); }
.crm-modal-historico-notificacoes .historico-item.whatsapp { border-left: 4px solid #25d366; }
.crm-modal-historico-notificacoes .historico-item.webhook { border-left: 4px solid var(--crm-cometa-ui-text-tertiary); }
.crm-modal-historico-notificacoes .historico-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--crm-cometa-ui-spacing-xs);
}
.crm-modal-historico-notificacoes .historico-item-content {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-md);
    flex: 1;
}
.crm-modal-historico-notificacoes .historico-item-icon { font-size: 1rem; flex-shrink: 0; }
.crm-modal-historico-notificacoes .historico-item-icon.email-aberto { color: var(--crm-cometa-ui-success); }
.crm-modal-historico-notificacoes .historico-item-icon.email-nao-aberto { color: var(--crm-cometa-ui-text-tertiary); }
.crm-modal-historico-notificacoes .historico-item-icon.whatsapp { color: #25d366; }
.crm-modal-historico-notificacoes .historico-item-icon.webhook { color: var(--crm-cometa-ui-text-tertiary); }
.crm-modal-historico-notificacoes .historico-item-info { flex: 1; }
.crm-modal-historico-notificacoes .historico-item-title {
    font-weight: 500;
    color: var(--crm-cometa-ui-text);
    font-size: var(--crm-cometa-ui-font-size-sm);
    margin-bottom: 0.125rem;
}
.crm-modal-historico-notificacoes .historico-item-date {
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.crm-modal-historico-notificacoes .historico-item-status { text-align: right; font-size: var(--crm-cometa-ui-font-size-xs); }
.crm-modal-historico-notificacoes .historico-item-status.aberto,
.crm-modal-historico-notificacoes .historico-item-status.whatsapp { color: var(--crm-cometa-ui-success); font-weight: 600; }
.crm-modal-historico-notificacoes .historico-item-status.enviado,
.crm-modal-historico-notificacoes .historico-item-status.webhook { color: var(--crm-cometa-ui-text-secondary); }
.crm-modal-historico-notificacoes .historico-item-status.error { color: var(--crm-cometa-ui-error); font-weight: 600; }
.crm-modal-historico-notificacoes .historico-detalhes {
    margin-top: var(--crm-cometa-ui-spacing-sm);
    padding: var(--crm-cometa-ui-spacing-sm);
    border-radius: var(--crm-cometa-ui-radius-sm);
    font-size: var(--crm-cometa-ui-font-size-xs);
}
.crm-modal-historico-notificacoes .historico-detalhes.email { background: rgba(34, 197, 94, 0.08); border-left: 2px solid var(--crm-cometa-ui-success); }
.crm-modal-historico-notificacoes .historico-detalhes.whatsapp { background: rgba(37, 211, 102, 0.08); border-left: 2px solid #25d366; }
.crm-modal-historico-notificacoes .historico-detalhes.webhook { background: var(--crm-cometa-ui-bg-secondary); border-left: 2px solid var(--crm-cometa-ui-text-tertiary); }
.crm-modal-historico-notificacoes .historico-detalhe-linha {
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--crm-cometa-ui-text);
}
.crm-modal-historico-notificacoes .historico-detalhe-linha:last-child { margin-bottom: 0; }
.crm-modal-historico-notificacoes .historico-detalhe-valor { font-family: monospace; font-size: 0.75rem; }
.crm-modal-historico-notificacoes .historico-empty { text-align: center; padding: var(--crm-cometa-ui-spacing-xl); }
.crm-modal-historico-notificacoes .historico-empty-icon {
    margin-bottom: var(--crm-cometa-ui-spacing-md);
    opacity: 0.5;
    color: var(--crm-cometa-ui-text-tertiary);
}
.crm-modal-historico-notificacoes .crm-modal-historico-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-cometa-ui-spacing-md);
}
.crm-modal-historico-notificacoes .crm-modal-historico-footer-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm);
}
.crm-modal-historico-notificacoes .crm-modal-historico-footer-botoes .btn-acao-notificacao {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
}
@media (min-width: 769px) {
    .crm-modal-historico-notificacoes .historico-fatura-info .historico-info-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--crm-cometa-ui-spacing-lg);
    }
}
@media (max-width: 768px) {
    .crm-modal-historico-notificacoes .historico-fatura-info .historico-info-grid { grid-template-columns: repeat(2, 1fr); }
    .crm-modal-historico-notificacoes .historico-item-header { flex-direction: column; gap: var(--crm-cometa-ui-spacing-sm); }
    .crm-modal-historico-notificacoes .historico-item-status { text-align: left; }
}

/* Accordion */
.crm-cometa-ui-accordion {
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-md);
    overflow: hidden;
}

.crm-cometa-ui-accordion-item {
    border-bottom: 1px solid var(--crm-cometa-ui-border);
}

.crm-cometa-ui-accordion-item:last-child {
    border-bottom: none;
}

.crm-cometa-ui-accordion-header {
    width: 100%;
    padding: var(--crm-cometa-ui-spacing-lg);
    background: var(--crm-cometa-ui-bg);
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    color: var(--crm-cometa-ui-text);
    transition: var(--crm-cometa-ui-transition);
}

.crm-cometa-ui-accordion-header:hover {
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-accordion-header .material-symbols-rounded {
    font-size: 20px;
    transition: var(--crm-cometa-ui-transition);
    color: var(--crm-cometa-ui-text-secondary);
}

.crm-cometa-ui-accordion-item.active .crm-cometa-ui-accordion-header .material-symbols-rounded {
    transform: rotate(180deg);
}

.crm-cometa-ui-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-accordion-item.active .crm-cometa-ui-accordion-content {
    max-height: 500px;
}

.crm-cometa-ui-accordion-content > * {
    padding: var(--crm-cometa-ui-spacing-lg);
}

/* Table */
.crm-cometa-ui-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--crm-cometa-ui-border);
    border-radius: var(--crm-cometa-ui-radius-md);
    background: transparent;
}

.crm-cometa-ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--crm-cometa-ui-font-size-sm);
}

.crm-cometa-ui-table thead {
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-table th {
    padding: var(--crm-cometa-ui-spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--crm-cometa-ui-text);
    border-bottom: 2px solid var(--crm-cometa-ui-border);
    font-size: var(--crm-cometa-ui-font-size-sm);
}

.crm-cometa-ui-table td {
    padding: var(--crm-cometa-ui-spacing-md);
    border-bottom: 1px solid var(--crm-cometa-ui-border-light);
    color: var(--crm-cometa-ui-text);
    background: transparent;
}

.crm-cometa-ui-table tbody tr:hover {
    background: var(--crm-cometa-ui-bg-secondary);
}

.crm-cometa-ui-table tbody tr:last-child td {
    border-bottom: none;
}

[data-theme="dark"] .crm-cometa-ui-table-wrapper {
    background: var(--crm-cometa-ui-bg);
}

[data-theme="dark"] .crm-cometa-ui-table tbody td {
    background: var(--crm-cometa-ui-bg);
}

[data-theme="dark"] .crm-cometa-ui-table tbody tr:hover td {
    background: var(--crm-cometa-ui-bg-secondary);
}

/* Table Filters */
.crm-cometa-ui-table-filters {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-md);
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
    flex-wrap: wrap;
}

.crm-cometa-ui-table-filters .crm-cometa-ui-form-group {
    flex: 1;
    min-width: 200px;
}

/* Botões de ação da tabela - apenas ícones */
.crm-cometa-ui-table-actions {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-xs);
    align-items: center;
}

.crm-cometa-ui-button-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--crm-cometa-ui-radius-sm);
    cursor: pointer;
    transition: var(--crm-cometa-ui-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-text);
    text-decoration: none !important;
}

.crm-cometa-ui-button-icon .material-symbols-rounded,
.crm-cometa-ui-button-icon i {
    font-size: 18px;
    line-height: 1;
    text-decoration: none !important;
}

.crm-cometa-ui-button-icon:hover {
    transform: translateY(-1px);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-primary {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-color) 0%, var(--crm-cometa-ui-primary-light) 100%);
    color: var(--crm-cometa-ui-button-primary-text);
    box-shadow: 0 2px 4px var(--crm-cometa-ui-primary-bg);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-primary:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-primary-dark) 0%, var(--crm-cometa-ui-primary-color) 100%);
    box-shadow: 0 4px 8px var(--crm-cometa-ui-primary-bg);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-secondary {
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-button-secondary-text);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-secondary:hover {
    background: var(--crm-cometa-ui-bg-tertiary);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-error {
    background: linear-gradient(135deg, var(--crm-cometa-ui-error) 0%, #ff6b6b 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-error:hover {
    background: linear-gradient(135deg, #dc2626 0%, var(--crm-cometa-ui-error) 100%);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-success {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success) 0%, var(--crm-cometa-ui-success-light) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-success:hover {
    background: linear-gradient(135deg, var(--crm-cometa-ui-success-dark) 0%, var(--crm-cometa-ui-success) 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-warning {
    background: linear-gradient(135deg, var(--crm-cometa-ui-warning) 0%, #fbbf24 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, var(--crm-cometa-ui-warning) 100%);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-info {
    background: linear-gradient(135deg, var(--crm-cometa-ui-info) 0%, #60a5fa 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.crm-cometa-ui-button-icon.crm-cometa-ui-button-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, var(--crm-cometa-ui-info) 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

/* Character Count */
.crm-cometa-ui-char-count {
    text-align: right;
    font-size: var(--crm-cometa-ui-font-size-xs);
    color: var(--crm-cometa-ui-text-tertiary);
    margin-top: var(--crm-cometa-ui-spacing-xs);
}

/* Responsive */
@media (max-width: 768px) {
    .crm-cometa-ui-grid {
        grid-template-columns: 1fr;
    }
    
    .crm-cometa-ui-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .crm-cometa-ui-modal-content {
        max-width: 100%;
        margin: var(--crm-cometa-ui-spacing-md);
    }
}
/* Loading Overlay (Agendamento em Massa) */
#crm-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999999999 !important;
    padding: var(--crm-cometa-ui-spacing-lg);
}

#crm-loading-overlay .crm-loading-container {
    background: var(--crm-cometa-ui-bg);
    color: var(--crm-cometa-ui-text);
    border-radius: var(--crm-cometa-ui-radius-lg);
    box-shadow: var(--crm-cometa-ui-shadow-xl);
    padding: var(--crm-cometa-ui-spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-md);
    min-width: 320px;
    max-width: 520px;
}

#crm-loading-overlay .crm-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

#crm-loading-overlay .crm-loading-spinner svg circle {
    fill: var(--crm-cometa-ui-primary-color) !important;
    stroke: var(--crm-cometa-ui-primary-color) !important;
}

#crm-loading-overlay .crm-loading-text {
    font-size: var(--crm-cometa-ui-font-size-md);
    color: var(--crm-cometa-ui-text);
    text-align: center;
}

#crm-loading-overlay .posts-scheduling-progress {
    width: 100%;
}

#crm-loading-overlay .progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--crm-cometa-ui-bg-secondary);
    border-radius: var(--crm-cometa-ui-radius-md);
    overflow: hidden;
}

#crm-loading-overlay .progress-bar {
    width: 0%;
    height: 100%;
    background: var(--crm-cometa-ui-primary-color);
    transition: width 0.3s ease;
}

[data-theme="dark"] #crm-loading-overlay {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] #crm-loading-overlay .crm-loading-container {
    background: var(--crm-cometa-ui-bg);
    color: var(--crm-cometa-ui-text);
}

/* Variante com blur para carregamentos sutis */
#crm-loading-overlay.blur {
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
[data-theme="dark"] #crm-loading-overlay.blur {
    background: rgba(0, 0, 0, 0.25);
}

/* ===== Template Buscador (template-buscador.php) ===== */
.buscador-mobile-wrapper {
    display: none;
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.buscador-mobile-box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
}

.buscador-mobile-icon-right {
    position: absolute;
    right: var(--crm-cometa-ui-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--crm-cometa-ui-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.buscador-mobile-icon-right .material-symbols-rounded,
.buscador-mobile-icon-right i { font-size: 20px !important; }

/* Input de busca: borda sutil + padding para ícone não sobrepor texto/placeholder */
.buscador-mobile-box .buscador-mobile-input {
    border: 1px solid var(--crm-cometa-ui-border) !important;
    padding-right: 2.75rem !important;
}
.buscador-mobile-box .buscador-mobile-input:focus {
    border-color: var(--crm-cometa-ui-primary-color) !important;
}

/* Botão limpar: mesma altura dos inputs, largura = altura (quadrado), ícone perfeitamente centralizado */
.buscador-clear-btn {
    height: 42px;
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    border: none;
    position: relative;
}

.buscador-clear-btn .material-symbols-rounded,
.buscador-clear-btn i {
    font-size: 18px !important;
    color: var(--crm-cometa-ui-primary-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    width: 1em;
    height: 1em;
    position: absolute;
    inset: 0;
    margin: auto !important;
}
.buscador-clear-btn:hover .material-symbols-rounded,
.buscador-clear-btn:hover i { color: var(--crm-cometa-ui-primary-dark) !important; }

.buscador-mobile-box .buscador-clear-btn {
    position: absolute;
    right: var(--crm-cometa-ui-spacing-sm);
    top: 0;
    bottom: 0;
    height: 100%;
    aspect-ratio: 1;
    width: auto;
    min-width: 0;
    padding: 0 !important;
}

.buscador-clear-btn.buscador-clear-hidden { display: none !important; }

#buscador-clientes-clear {
    min-height: 42px !important;
    height: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
}

.buscador-desktop-wrapper {
    display: none;
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.buscador-desktop-filters { padding: 0; }

.buscador-desktop-group {
    display: flex;
    align-items: flex-end;
    gap: var(--crm-cometa-ui-spacing-md);
    flex-wrap: wrap;
}

.buscador-desktop-search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.buscador-desktop-icon {
    position: absolute;
    left: var(--crm-cometa-ui-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--crm-cometa-ui-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.buscador-desktop-icon .material-symbols-rounded,
.buscador-desktop-icon i { font-size: 18px !important; }

/* Input de busca desktop: borda sutil + padding-left para ícone lupa não sobrepor texto/placeholder */
.buscador-desktop-search-box .buscador-desktop-input,
#buscador-contratos-wrapper .buscador-desktop-search-box input.buscador-desktop-input,
.buscador-desktop-group .buscador-desktop-input {
    border: 1px solid var(--crm-cometa-ui-border) !important;
    padding-left: 3.5rem !important;
}
.buscador-desktop-search-box .buscador-desktop-input:focus,
#buscador-contratos-wrapper .buscador-desktop-search-box input.buscador-desktop-input:focus,
.buscador-desktop-group .buscador-desktop-input:focus {
    border-color: var(--crm-cometa-ui-primary-color) !important;
}

.buscador-desktop-filters-options {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-md);
    align-items: flex-end;
    flex-wrap: wrap;
}

.buscador-desktop-filter-group {
    margin-bottom: 0;
}

.buscador-desktop-filter-group .crm-cometa-ui-label { margin-bottom: var(--crm-cometa-ui-spacing-xs); }

.buscador-desktop-filter-group .crm-cometa-ui-select,
.buscador-desktop-filter-group .crm-cometa-ui-input[type="date"] {
    min-width: 140px;
}

@media (max-width: 768px) {
    .buscador-mobile-wrapper { display: block; }
    .buscador-desktop-wrapper { display: none !important; }
    .buscador-mobile-box .buscador-mobile-input { padding-right: 3.25rem !important; }
}

@media (min-width: 769px) {
    .buscador-mobile-wrapper { display: none !important; }
    .buscador-desktop-wrapper { display: block !important; }
}

.mensagem-busca-vazia {
    text-align: center;
    padding: var(--crm-cometa-ui-spacing-2xl);
    background: var(--crm-cometa-ui-bg-secondary);
    border-radius: var(--crm-cometa-ui-radius-md);
    margin: var(--crm-cometa-ui-spacing-lg) 0;
}

.mensagem-busca-vazia .material-symbols-rounded,
.mensagem-busca-vazia i {
    font-size: 48px !important;
    color: var(--crm-cometa-ui-primary-color);
    display: block;
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.mensagem-busca-vazia p { margin: 0; font-size: var(--crm-cometa-ui-font-size-sm); }
.mensagem-busca-vazia strong { color: var(--crm-cometa-ui-primary-color); }

/* ===== Template Cards Limites (template-cards-limites.php) – usa modelo Cards de Estatísticas ===== */
.cards-limites-container { margin-bottom: 0; }

@media (min-width: 769px) {
    .cards-limites-container,
    .estatisticas-faturas {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        position: relative;
        z-index: 10;
    }
    .page-title-wrapper + .cards-limites-container,
    .page-title-wrapper + .estatisticas-faturas { margin-top: 0; }
    .dashboard-overview .cards-limites-container,
    .cards-estatisticas-clientes,
    .monitor-faturas .cards-limites-container,
    .monitor-faturas .estatisticas-faturas {
        margin-top: 0 ;
        margin-bottom: 0;
    }
}


/* Cards limites: padding, ícone à esquerda perfeitamente centralizado, textos à direita */
.cards-limites-grid .crm-cometa-ui-card-stat {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--crm-cometa-ui-spacing-md);
    padding: var(--crm-cometa-ui-spacing-lg);
}
.cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-icon {
    width: 54px;
    height: 54px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-icon .material-symbols-rounded {
    font-size: 28px;
}
.cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-body {
    position: relative;
    flex: 1;
    min-width: 0;
    text-align: left;
}
.cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-label {
    text-align: left;
}
.cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-value {
    justify-content: flex-start;
}

.crm-cometa-ui-card-stat-value {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}
.crm-cometa-ui-card-stat-unit {
    font-size: 0.8rem;
    color: var(--crm-cometa-ui-text-tertiary);
    font-weight: 500;
}

.crm-cometa-ui-card-stat-valor {
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 600;
    color: var(--crm-cometa-ui-primary-color);
    margin-top: var(--crm-cometa-ui-spacing-xs);
    display: block;
}

.card-limite-progress {
    background: var(--crm-cometa-ui-bg-tertiary);
    border-radius: var(--crm-cometa-ui-radius-sm);
    height: 8px;
    margin: 0.75rem 0 0.5rem 0;
    overflow: hidden;
    position: relative;
}

.card-limite-progress-bar {
    height: 100%;
    border-radius: var(--crm-cometa-ui-radius-sm);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card-limite.cor-primary .card-limite-progress-bar {
    background: linear-gradient(90deg, var(--crm-cometa-ui-primary-color), var(--crm-cometa-ui-primary-dark));
}
.card-limite.cor-sucesso .card-limite-progress-bar {
    background: linear-gradient(90deg, var(--crm-cometa-ui-success), #1a9f8f);
}
.card-limite.cor-aviso .card-limite-progress-bar {
    background: linear-gradient(90deg, var(--crm-cometa-ui-warning), #d97706);
}
.card-limite.cor-alerta .card-limite-progress-bar {
    background: linear-gradient(90deg, var(--crm-cometa-ui-error), #dc2626);
}

@keyframes card-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.card-limite-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: card-shimmer 2s infinite;
}

.card-limite-progress-text {
    font-size: 0.7rem;
    color: var(--crm-cometa-ui-text-secondary);
    font-weight: 500;
}

.card-info-icon {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.8rem;
    color: var(--crm-cometa-ui-text-tertiary);
    opacity: 0.7;
    cursor: help;
    transition: opacity 0.2s ease;
}
.card-info-icon:hover { opacity: 1; }

/* Ícone de info dos cards: apenas tooltip padrão do UI (data-tooltip + .crm-cometa-ui-tooltip-text), sem tooltips antigos */
.card-info-icon.crm-cometa-ui-tooltip::before,
.card-info-icon.crm-cometa-ui-tooltip::after {
    display: none !important;
    content: none !important;
}

.crm-cometa-ui-card-stat.card-infinito {
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(29,78,216,0.12)) !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.2) !important;
}
.crm-cometa-ui-card-stat.card-infinito:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(29,78,216,0.16)) !important;
    border-color: #2563eb !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3) !important;
}

.badge-ilimitado.crm-cometa-ui-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    pointer-events: none;
    margin: 0;
}

.crm-cometa-ui-card-stat.cor-infinito .crm-cometa-ui-card-stat-value { color: #3b82f6 !important; }

.crm-cometa-ui-card-stat.card-alerta {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(220,38,38,0.12)) !important;
    border: 2px solid var(--crm-cometa-ui-error) !important;
    box-shadow: 0 2px 8px rgba(220,38,38,0.2) !important;
}
.crm-cometa-ui-card-stat.card-alerta:hover {
    background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(220,38,38,0.16)) !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220,38,38,0.3) !important;
}

.cards-estatisticas-clientes { margin-bottom: 0; }

@media (max-width: 768px) {
    .badge-ilimitado { font-size: 0.55rem; padding: 0.2rem 0.4rem; top: 0.4rem; right: 0.4rem; }
    .cards-limites-container {
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    .pagebriefing-stats-container {
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    .cards-limites-grid {
        display: flex;
        flex-direction: row;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        padding: 0.5rem 1rem 10px 1rem;
        margin: 0 0 16px 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box !important;
    }
    .cards-limites-grid::-webkit-scrollbar { display: none; }
    .cards-limites-grid .crm-cometa-ui-card-stat {
        padding: 1rem !important;
        min-width: 120px;
        max-width: 140px;
        flex-shrink: 0;
        text-align: left;
        align-items: center;
    }
    .cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-icon {
        margin-left: 0;
        margin-right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
    }
    .cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-label {
        margin: 0;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: left;
    }
    .cards-limites-grid .crm-cometa-ui-card-stat .crm-cometa-ui-card-stat-value {
        margin: 0;
        justify-content: flex-start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.25rem;
        width: 100%;
    }
    .card-limite-progress,
    .card-limite-progress-text,
    .card-info-icon { display: none; }
}

/* ============================================
   CRM Card – Fatura, Orçamento, Briefing, Plano
   Prefixo único: crm-card-* (#modal-cliente)
   ============================================ */

/* Listas */
#modal-cliente .faturas-lista,
#modal-cliente .briefings-lista,
#modal-cliente .orcamentos-lista,
#modal-cliente .planos-lista {
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-md, 0.75rem);
}

/* Base: todos os cards */
#modal-cliente .crm-card {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin-bottom: 0;
    background: var(--crm-cometa-ui-bg, #fff) !important;
    border: 1px solid var(--crm-cometa-ui-border, #e5e7eb);
    border-radius: var(--crm-cometa-ui-radius-md, 8px);
    box-shadow: var(--crm-cometa-ui-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
#modal-cliente .crm-card:hover {
    border-color: var(--crm-cometa-ui-primary-color, var(--crm-cometa-ui-primary-color));
    box-shadow: var(--crm-cometa-ui-shadow-md, 0 4px 6px -1px rgba(0,0,0,.1));
}

/* Fundo do card de fatura baseado no status (com opacidade para compatibilidade dark/light) */
#modal-cliente .crm-card-fatura--pago {
    background: rgba(16, 185, 129, 0.12) !important; /* success com 12% opacidade */
}
#modal-cliente .crm-card-fatura--pendente {
    background: rgba(245, 158, 11, 0.12) !important; /* warning com 12% opacidade */
}
#modal-cliente .crm-card-fatura--vencido,
#modal-cliente .crm-card-fatura.fatura-vencida,
#modal-cliente .crm-card-fatura[data-vencida="true"] {
    background: rgba(239, 68, 68, 0.1) !important; /* error com 10% opacidade */
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

[data-theme="dark"] #modal-cliente .crm-card-fatura--vencido,
[data-theme="dark"] #modal-cliente .crm-card-fatura.fatura-vencida,
[data-theme="dark"] #modal-cliente .crm-card-fatura[data-vencida="true"] {
    background: rgba(239, 68, 68, 0.15) !important; /* error com 15% opacidade no dark */
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
#modal-cliente .crm-card-fatura--cancelado {
    background: var(--crm-cometa-ui-bg-tertiary, #f3f4f6) !important;
}

/* Header comum (fatura, briefing, orçamento) */
#modal-cliente .crm-card-fatura__header,
#modal-cliente .crm-card-briefing__header,
#modal-cliente .crm-card-orcamento__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-cometa-ui-spacing-sm, 0.5rem);
    flex-wrap: wrap;
    padding: var(--crm-cometa-ui-spacing-md, 0.75rem) var(--crm-cometa-ui-spacing-lg, 1rem);
}
#modal-cliente .crm-card-fatura__checkbox { flex-shrink: 0; }
#modal-cliente .crm-card-fatura__title,
#modal-cliente .crm-card-briefing__title,
#modal-cliente .crm-card-orcamento__title {
    margin: 0;
    font-size: var(--crm-cometa-ui-font-size-md, 1rem);
    font-weight: 600;
    color: var(--crm-cometa-ui-primary-color, var(--crm-cometa-ui-primary-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
#modal-cliente .crm-card-fatura__body,
#modal-cliente .crm-card-briefing__body,
#modal-cliente .crm-card-orcamento__body {
    padding: var(--crm-cometa-ui-spacing-md, 0.75rem) var(--crm-cometa-ui-spacing-lg, 1rem);
    border: none;
}
#modal-cliente .crm-card-fatura__meta,
#modal-cliente .crm-card-briefing__meta,
#modal-cliente .crm-card-orcamento__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-cometa-ui-spacing-md, 0.75rem);
    font-size: var(--crm-cometa-ui-font-size-sm, 0.875rem);
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
}
#modal-cliente .crm-card-fatura__meta { flex-wrap: nowrap; min-width: 0; }
#modal-cliente .crm-card-fatura__meta .crm-cometa-ui-card-post-meta-item,
#modal-cliente .crm-card-briefing__meta .crm-cometa-ui-card-post-meta-item,
#modal-cliente .crm-card-orcamento__meta .crm-cometa-ui-card-post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
/* Apenas ícones dos itens de meta (person, event, payments). Não afetar ícones dentro de badges (fat-vencimento-badge etc.) */
#modal-cliente .crm-card-fatura__meta .crm-cometa-ui-card-post-meta-item > .material-symbols-rounded,
#modal-cliente .crm-card-briefing__meta .crm-cometa-ui-card-post-meta-item > .material-symbols-rounded,
#modal-cliente .crm-card-orcamento__meta .crm-cometa-ui-card-post-meta-item > .material-symbols-rounded {
    font-size: 1rem;
    color: var(--crm-cometa-ui-text-tertiary, #9ca3af);
}
/* Status select: coluna de ações, primeira posição, mesma altura dos botões */
#modal-cliente .crm-card-fatura__status-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
#modal-cliente .crm-card-fatura__status-wrap .crm-cometa-ui-select,
#modal-cliente .crm-card-fatura__status-select {
    padding: var(--crm-cometa-ui-spacing-xs, 4px) 1.5rem var(--crm-cometa-ui-spacing-xs, 4px) var(--crm-cometa-ui-spacing-md, 12px) !important;
    font-size: var(--crm-cometa-ui-font-size-xs, 11px) !important;
    font-weight: 500;
    min-height: unset;
    height: 35px;
    line-height: 1.25;
    max-width: 120px;
    box-sizing: border-box;
    background-color: transparent !important;
    color: var(--crm-cometa-ui-text, #1a1a1a) !important;
    border: 1px solid var(--crm-cometa-ui-border, #ddd) !important;
    border-radius: var(--crm-cometa-ui-radius-sm, 6px) !important;
}
#modal-cliente .crm-card-fatura__status-select.status-pago {
    border-color: var(--crm-cometa-ui-success, #10b981) !important;
}
#modal-cliente .crm-card-fatura__status-select.status-pendente {
    border-color: var(--crm-cometa-ui-warning, #f59e0b) !important;
}
#modal-cliente .crm-card-fatura__status-select.status-vencido {
    border-color: var(--crm-cometa-ui-error, #ef4444) !important;
}
#modal-cliente .crm-card-fatura__status-select.status-cancelado {
    border-color: var(--crm-cometa-ui-border, #ddd) !important;
}
#modal-cliente .crm-card-fatura__status-select:hover,
#modal-cliente .crm-card-fatura__status-select:focus {
    background-color: transparent !important;
    color: var(--crm-cometa-ui-text, #1a1a1a) !important;
}
#modal-cliente .crm-card-fatura__status-select.loading {
    opacity: 0.7;
    pointer-events: none;
}
/* Dark mode: select de status da fatura */
[data-theme="dark"] #modal-cliente .crm-card-fatura__status-select {
    background-color: var(--crm-cometa-ui-bg, #1f2937) !important;
    color: var(--crm-cometa-ui-text, #f9fafb) !important;
    border-color: var(--crm-cometa-ui-border, #374151) !important;
}
[data-theme="dark"] #modal-cliente .crm-card-fatura__status-select:hover,
[data-theme="dark"] #modal-cliente .crm-card-fatura__status-select:focus {
    background-color: var(--crm-cometa-ui-bg-secondary, #374151) !important;
    color: var(--crm-cometa-ui-text, #f9fafb) !important;
}
[data-theme="dark"] #modal-cliente .crm-card-fatura__status-select option {
    background-color: var(--crm-cometa-ui-bg, #1f2937) !important;
    color: var(--crm-cometa-ui-text, #f9fafb) !important;
}
#modal-cliente .crm-card-fatura__body {
    display: block;
}
#modal-cliente .crm-card-fatura__actions,
#modal-cliente .crm-card-briefing__actions,
#modal-cliente .crm-card-orcamento__actions {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs, 0.25rem);
    padding: var(--crm-cometa-ui-spacing-sm, 0.5rem) var(--crm-cometa-ui-spacing-lg, 1rem);
    justify-content: flex-end;
}
#modal-cliente .crm-card-fatura__actions .crm-cometa-ui-button,
#modal-cliente .crm-card-fatura__actions a.crm-cometa-ui-button,
#modal-cliente .crm-card-briefing__actions .crm-cometa-ui-button,
#modal-cliente .crm-card-orcamento__actions .crm-cometa-ui-button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

#modal-cliente .crm-card-briefing__actions .crm-cometa-ui-button,
#modal-cliente .crm-card-orcamento__actions .crm-cometa-ui-button {
    width: 32px;
    height: 32px;
    justify-content: center;
    box-sizing: border-box;
}
#modal-cliente .crm-card-fatura__actions .material-symbols-rounded,
#modal-cliente .crm-card-briefing__actions .material-symbols-rounded,
#modal-cliente .crm-card-orcamento__actions .material-symbols-rounded { font-size: 1rem; }

/* Badge expirado (secondary: fundo claro → ícone escuro) */
#modal-cliente .crm-card-orcamento__badge.crm-cometa-ui-badge-secondary .material-symbols-rounded,
#modal-cliente .crm-card-orcamento__badge.crm-cometa-ui-badge-secondary .material-icons,
#modal-cliente .crm-card-orcamento__badge.crm-cometa-ui-badge-secondary svg,
#modal-cliente .crm-cometa-ui-badge-secondary .material-symbols-rounded,
#modal-cliente .crm-cometa-ui-badge-secondary .material-icons,
#modal-cliente .crm-cometa-ui-badge-secondary svg {
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
}

/* Desktop: Fatura – 2 linhas, ações à direita, header alinhado à esquerda */
@media (min-width: 769px) {
    #modal-cliente .faturas-lista .crm-card-fatura {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 0;
        align-items: center;
    }
    #modal-cliente .faturas-lista .crm-card-fatura .crm-card-fatura__header {
        grid-column: 1;
        grid-row: 1;
        border: none;
        padding: var(--crm-cometa-ui-spacing-md, 0.75rem) var(--crm-cometa-ui-spacing-lg, 1rem);
        padding-bottom: var(--crm-cometa-ui-spacing-xs, 0.25rem);
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    #modal-cliente .faturas-lista .crm-card-fatura .crm-card-fatura__title {
        flex: 0 1 auto;
        min-width: 0;
    }
    #modal-cliente .faturas-lista .crm-card-fatura .crm-card-fatura__badge {
        flex-shrink: 0;
    }
    #modal-cliente .faturas-lista .crm-card-fatura .crm-card-fatura__body {
        grid-column: 1;
        grid-row: 2;
        border: none;
        padding: var(--crm-cometa-ui-spacing-xs, 0.25rem) var(--crm-cometa-ui-spacing-lg, 1rem);
        padding-top: 0;
        padding-bottom: var(--crm-cometa-ui-spacing-md, 0.75rem);
        min-width: 0;
    }
    #modal-cliente .faturas-lista .crm-card-fatura .crm-card-fatura__actions {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        justify-self: end;
        margin-left: auto;
        border: none;
        padding: var(--crm-cometa-ui-spacing-sm, 0.5rem) var(--crm-cometa-ui-spacing-lg, 1rem);
        padding-left: var(--crm-cometa-ui-spacing-md, 0.75rem);
    }
}

/* Desktop: Briefing e Orçamento – mesma linha, ações à direita */
@media (min-width: 769px) {
    #modal-cliente .briefings-lista .crm-card-briefing,
    #modal-cliente .orcamentos-lista .crm-card-orcamento {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
    }
    #modal-cliente .briefings-lista .crm-card-briefing .crm-card-briefing__header,
    #modal-cliente .orcamentos-lista .crm-card-orcamento .crm-card-orcamento__header {
        flex: 0 1 200px;
        min-width: 100px;
        border: none;
        padding-right: var(--crm-cometa-ui-spacing-sm, 0.5rem);
    }
    #modal-cliente .briefings-lista .crm-card-briefing .crm-card-briefing__body,
    #modal-cliente .orcamentos-lista .crm-card-orcamento .crm-card-orcamento__body {
        flex: 1;
        min-width: 0;
        border: none;
        padding-left: 0;
        padding-right: var(--crm-cometa-ui-spacing-sm, 0.5rem);
    }
    #modal-cliente .briefings-lista .crm-card-briefing .crm-card-briefing__actions,
    #modal-cliente .orcamentos-lista .crm-card-orcamento .crm-card-orcamento__actions {
        flex: 0 0 auto;
        margin-left: auto;
        border: none;
        padding: var(--crm-cometa-ui-spacing-sm, 0.5rem) var(--crm-cometa-ui-spacing-lg, 1rem);
        padding-left: 0;
    }
}

/* ============================================
   CARD DE PLANO DO CLIENTE - CSS COMPLETO
   Prefixo único: crm-card-plano-
   ============================================ */

/* Base: Card de Plano - Sobrescrever estilos antigos */
#modal-cliente .planos-lista .crm-card-plano.plano-item {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin-bottom: var(--crm-cometa-ui-spacing-md, 0.75rem) !important;
    background: var(--crm-cometa-ui-bg, #fff) !important;
    border: 1px solid var(--crm-cometa-ui-border, #e5e7eb) !important;
    border-radius: var(--crm-cometa-ui-radius-md, 8px) !important;
    box-shadow: var(--crm-cometa-ui-shadow-sm, 0 1px 2px rgba(0,0,0,.05)) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    overflow: hidden !important;
    position: relative !important;
    transform: none !important;
    animation: none !important;
}
#modal-cliente .planos-lista .crm-card-plano.plano-item::before {
    display: none !important;
}
#modal-cliente .planos-lista .crm-card-plano.plano-item:hover {
    border-color: var(--crm-cometa-ui-primary-color, var(--crm-cometa-ui-primary-color)) !important;
    box-shadow: var(--crm-cometa-ui-shadow-md, 0 4px 6px -1px rgba(0,0,0,.1)) !important;
    transform: none !important;
}

/* Wrapper de informações - Sobrescrever estilos antigos */
#modal-cliente .crm-card-plano__info.plano-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    align-items: stretch !important;
    text-align: left !important;
}

/* Header: Título + Badge + Toggle na mesma linha - Sobrescrever estilos antigos */
#modal-cliente .crm-card-plano__header.plano-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--crm-cometa-ui-spacing-sm, 0.5rem) !important;
    flex-wrap: nowrap !important;
    padding: var(--crm-cometa-ui-spacing-md, 0.75rem) var(--crm-cometa-ui-spacing-lg, 1rem) !important;
    padding-bottom: var(--crm-cometa-ui-spacing-xs, 0.25rem) !important;
    border: none !important;
    margin: 0 !important;
    min-height: auto !important;
}

/* Título do plano - Sobrescrever estilos antigos */
#modal-cliente .crm-card-plano__title.plano-nome-valor {
    font-size: var(--crm-cometa-ui-font-size-md, 1rem) !important;
    font-weight: 600 !important;
    color: var(--crm-cometa-ui-primary-color, var(--crm-cometa-ui-primary-color)) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
#modal-cliente .crm-card-plano__title.plano-nome-valor::before {
    display: none !important;
}
#modal-cliente .crm-card-plano__title.plano-nome-valor::after {
    display: none !important;
}

/* Grupo de status (badge + toggle) */
#modal-cliente .plano-status-group {
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-sm, 0.5rem);
    flex-shrink: 0;
    margin-left: auto;
}

/* Badge de status */
#modal-cliente .crm-card-plano__badge {
    flex-shrink: 0;
}

/* Toggle de status */
#modal-cliente .crm-card-plano__toggle.crm-cometa-ui-toggle {
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
#modal-cliente .crm-card-plano__toggle .crm-cometa-ui-toggle-slider {
    border-radius: 20px;
}

/* Body: Descrição, contrato, meta informações - Sobrescrever estilos antigos */
#modal-cliente .crm-card-plano__body.plano-body {
    padding: var(--crm-cometa-ui-spacing-xs, 0.25rem) var(--crm-cometa-ui-spacing-lg, 1rem) !important;
    padding-top: 0 !important;
    padding-bottom: var(--crm-cometa-ui-spacing-md, 0.75rem) !important;
    border: none !important;
    display: block !important;
    min-width: 0 !important;
}

/* Descrição do plano */
#modal-cliente .crm-card-plano__desc {
    font-size: var(--crm-cometa-ui-font-size-sm, 0.875rem);
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
    margin-bottom: var(--crm-cometa-ui-spacing-sm, 0.5rem);
    line-height: 1.5;
    word-wrap: break-word;
}

/* Informações de contrato */
#modal-cliente .crm-card-plano__contrato {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs, 0.25rem);
    padding: var(--crm-cometa-ui-spacing-xs, 0.25rem) var(--crm-cometa-ui-spacing-sm, 0.5rem);
    margin-bottom: var(--crm-cometa-ui-spacing-sm, 0.5rem);
    font-size: var(--crm-cometa-ui-font-size-sm, 0.875rem);
    background: rgba(16, 185, 129, 0.1);
    color: var(--crm-cometa-ui-success, #059669);
    border-radius: var(--crm-cometa-ui-radius, 6px);
    width: fit-content;
}
#modal-cliente .crm-card-plano__contrato a {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}
#modal-cliente .crm-card-plano__contrato a:hover {
    text-decoration: underline;
}

/* Meta informações (datas, vencimento, pagamento) */
#modal-cliente .crm-card-plano__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-cometa-ui-spacing-md, 0.75rem);
    font-size: var(--crm-cometa-ui-font-size-sm, 0.875rem);
    color: var(--crm-cometa-ui-text-secondary, #6b7280);
}
#modal-cliente .crm-card-plano__meta .crm-cometa-ui-card-post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
#modal-cliente .crm-card-plano__meta .crm-cometa-ui-card-post-meta-item > .material-symbols-rounded {
    font-size: 1rem;
    color: var(--crm-cometa-ui-text-tertiary, #9ca3af);
}

/* Ações: Botões à direita - Sobrescrever estilos antigos */
#modal-cliente .crm-card-plano__actions.plano-acoes {
    display: flex !important;
    align-items: center !important;
    gap: var(--crm-cometa-ui-spacing-xs, 0.25rem) !important;
    padding: var(--crm-cometa-ui-spacing-sm, 0.5rem) var(--crm-cometa-ui-spacing-lg, 1rem) !important;
    justify-content: flex-end !important;
    border: none !important;
    background: transparent !important;
}
#modal-cliente .crm-card-plano__actions.plano-acoes .crm-cometa-ui-button,
#modal-cliente .crm-card-plano__actions.plano-acoes a.crm-cometa-ui-button,
#modal-cliente .crm-card-plano__actions.plano-acoes button.crm-cometa-ui-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    border-radius: var(--crm-cometa-ui-radius, 6px) !important;
}

#modal-cliente .crm-card-plano__actions.plano-acoes .material-symbols-rounded {
    font-size: 1rem !important;
}

/* Desktop: Layout em grid - 2 linhas, ações à direita */
@media (min-width: 769px) {
    #modal-cliente .planos-lista .crm-card-plano.plano-item {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 0 !important;
        align-items: center !important;
    }
    
    /* Wrapper info não deve interferir no grid */
    #modal-cliente .planos-lista .crm-card-plano.plano-item .crm-card-plano__info.plano-info {
        display: contents !important;
    }
    
    /* Header na primeira linha, primeira coluna */
    #modal-cliente .planos-lista .crm-card-plano.plano-item .crm-card-plano__header.plano-header-row {
        grid-column: 1 !important;
        grid-row: 1 !important;
        border: none !important;
        padding: var(--crm-cometa-ui-spacing-md, 0.75rem) var(--crm-cometa-ui-spacing-lg, 1rem) !important;
        padding-bottom: var(--crm-cometa-ui-spacing-xs, 0.25rem) !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }
    
    /* Body na segunda linha, primeira coluna */
    #modal-cliente .planos-lista .crm-card-plano.plano-item .crm-card-plano__body.plano-body {
        grid-column: 1 !important;
        grid-row: 2 !important;
        border: none !important;
        padding: var(--crm-cometa-ui-spacing-xs, 0.25rem) var(--crm-cometa-ui-spacing-lg, 1rem) !important;
        padding-top: 0 !important;
        padding-bottom: var(--crm-cometa-ui-spacing-md, 0.75rem) !important;
        min-width: 0 !important;
    }
    
    /* Actions na coluna direita, ocupando ambas as linhas */
    #modal-cliente .planos-lista .crm-card-plano.plano-item .crm-card-plano__actions.plano-acoes {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        align-self: center !important;
        justify-self: end !important;
        margin-left: auto !important;
        border: none !important;
        padding: var(--crm-cometa-ui-spacing-sm, 0.5rem) var(--crm-cometa-ui-spacing-lg, 1rem) !important;
        padding-left: var(--crm-cometa-ui-spacing-md, 0.75rem) !important;
    }
}

/* Mobile: Layout em coluna */
@media (max-width: 768px) {
    #modal-cliente .planos-lista .crm-card-plano.plano-item {
        padding: var(--crm-cometa-ui-spacing-md, 0.75rem) !important;
        gap: var(--crm-cometa-ui-spacing-md, 0.75rem) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #modal-cliente .planos-lista .crm-card-plano__title.plano-nome-valor {
        font-size: 0.9rem !important;
    }
    
    #modal-cliente .planos-lista .crm-card-plano__header.plano-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    #modal-cliente .planos-lista .crm-card-plano__meta {
        gap: 0.5rem !important;
        font-size: 0.85rem !important;
    }
    
    #modal-cliente .planos-lista .crm-card-plano__actions.plano-acoes {
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    #modal-cliente .faturas-lista .crm-card-fatura,
    #modal-cliente .briefings-lista .crm-card-briefing,
    #modal-cliente .orcamentos-lista .crm-card-orcamento,
    #modal-cliente .planos-lista .crm-card-plano {
        padding: var(--crm-cometa-ui-spacing-md, 0.75rem);
        gap: var(--crm-cometa-ui-spacing-md, 0.75rem);
    }
    #modal-cliente .faturas-lista .crm-card-fatura__title,
    #modal-cliente .briefings-lista .crm-card-briefing__title,
    #modal-cliente .orcamentos-lista .crm-card-orcamento__title,
    #modal-cliente .planos-lista .crm-card-plano__title { font-size: 0.9rem; }
    #modal-cliente .crm-card-fatura__meta,
    #modal-cliente .crm-card-briefing__meta,
    #modal-cliente .crm-card-orcamento__meta,
    #modal-cliente .crm-card-plano__meta { gap: 0.5rem; font-size: 0.85rem; }
    #modal-cliente .crm-card-fatura__actions,
    #modal-cliente .crm-card-briefing__actions,
    #modal-cliente .crm-card-orcamento__actions,
    #modal-cliente .crm-card-plano__actions { flex-direction: row; justify-content: flex-end; }
    #modal-cliente .crm-card-plano__header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

@keyframes crm-card-fatura-nova {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
#modal-cliente .crm-card-fatura.nova-fatura {
    animation: crm-card-fatura-nova 0.5s ease-out;
}

.crm-cometa-ui-modal-footer-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1rem;
}

.crm-cometa-ui-mb-lg {
    margin-bottom: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-text-center {
    text-align: center;
}

.crm-cometa-ui-action-group-center {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-md);
    justify-content: center;
}

.crm-cometa-ui-modal-content-lg {
    max-width: 900px;
}

.crm-cometa-ui-card-body {
    padding: var(--crm-cometa-ui-spacing-lg); /* Padding padrão para o corpo de cards */
}

/* Tamanhos de Modal Adicionais */
.crm-cometa-ui-modal-content-xl {
    max-width: 1000px; /* Tamanho extra grande para modais específicos */
}

.crm-cometa-ui-action-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crm-cometa-ui-mb-md {
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-p-lg {
    padding: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-mt-lg {
    margin-top: var(--crm-cometa-ui-spacing-lg);
}

.crm-cometa-ui-modal-content-md {
    max-width: 600px; /* Tamanho médio para modais específicos */
}

/* Card com borda */
.crm-cometa-ui-card-bordered {
    border: 1px solid var(--crm-cometa-ui-border);
}

/* Detail item (label + value para modais/visualização) */
.crm-cometa-ui-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--crm-cometa-ui-spacing-xs);
    margin-bottom: var(--crm-cometa-ui-spacing-md);
}

.crm-cometa-ui-detail-item:last-child {
    margin-bottom: 0;
}

.crm-cometa-ui-detail-label {
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    color: var(--crm-cometa-ui-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--crm-cometa-ui-spacing-xs);
}

.crm-cometa-ui-detail-label .material-symbols-rounded {
    font-size: 18px !important;
    color: var(--crm-cometa-ui-text-tertiary);
}

.crm-cometa-ui-detail-value {
    font-size: var(--crm-cometa-ui-font-size-base);
    font-weight: 500;
    color: var(--crm-cometa-ui-text);
    line-height: 1.5;
}

/* Input group (input + botão) */
.crm-cometa-ui-input-group {
    display: flex;
    gap: var(--crm-cometa-ui-spacing-sm);
    align-items: stretch;
}

.crm-cometa-ui-input-group .crm-cometa-ui-input {
    flex: 1;
    min-width: 0;
}

.crm-cometa-ui-input-group .crm-cometa-ui-button {
    flex-shrink: 0;
}

.crm-cometa-ui-input-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--crm-cometa-ui-spacing-md);
    background: var(--crm-cometa-ui-bg-secondary);
    color: var(--crm-cometa-ui-text-secondary);
    font-size: var(--crm-cometa-ui-font-size-sm);
    font-weight: 500;
    border: 1px solid var(--crm-cometa-ui-border);
    border-right: none;
    border-radius: var(--crm-cometa-ui-radius-sm) 0 0 var(--crm-cometa-ui-radius-sm);
}

.crm-cometa-ui-input-group:has(.crm-cometa-ui-input-addon) .crm-cometa-ui-input {
    border-radius: 0 var(--crm-cometa-ui-radius-sm) var(--crm-cometa-ui-radius-sm) 0;
    border-left: none;
}

/* Section title com ícone */
.crm-cometa-ui-section-title .material-symbols-rounded {
    font-size: 20px !important;
    vertical-align: middle;
    margin-right: var(--crm-cometa-ui-spacing-xs);
    color: var(--crm-cometa-ui-text-secondary);
}