/* ================================================    CHATWOOT - TEMA VERMELHO DEFINITIVO    Baseado no CSS original + novas descobertas    ================================================ */  /* ===== VARIÁVEIS CSS GLOBAIS ===== */ :root {   --color-woot-500: #dc2626 !important;   --color-woot-600: #b91c1c !important;   --color-woot-700: #991b1b !important;   --color-woot-400: #ef4444 !important;   --color-woot-300: #f87171 !important;   --primary-color: #dc2626 !important;   --primary-color-dark: #b91c1c !important; }  /* ===== BOTÕES PRINCIPAIS ===== */ button.btn-primary, button[type="submit"], .btn-primary {   background-color: #dc2626 !important;   border-color: #dc2626 !important; }  /* ===== CLASSE ESPECÍFICA DO CHATWOOT ENCONTRADA ===== */ /* Todos os botões azuis do Chatwoot usam bg-n-brand */ .bg-n-brand {   background-color: #dc2626 !important; }  /* ===== LINKS E TEXTOS ESPECÍFICOS ===== */ /* Apenas links com classes específicas */ a.text-primary, .text-primary, a.text-blue-500, a.text-blue-600 {   color: #dc2626 !important; }  /* ===== BADGES E NOTIFICAÇÕES ===== */ .badge, .badge-primary {   background-color: #dc2626 !important;   color: #fff !important; }  /* ===== ELEMENTOS ATIVOS DA SIDEBAR ===== */ .router-link-active, .router-link-exact-active {   color: #dc2626 !important;   background-color: rgba(220, 38, 38, 0.1) !important; }  /* ===== INPUTS FOCADOS ===== */ .form-control:focus, input:focus, textarea:focus {   border-color: #dc2626 !important;   box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important; }  /* ===== CHECKBOXES ===== */ input[type="checkbox"]:checked, .checkbox:checked {   accent-color: #dc2626 !important;   background-color: #dc2626 !important; }  /* Para checkboxes customizados do Chatwoot */ .checkbox-wrapper input[type="checkbox"]:checked {   accent-color: #dc2626 !important; }  /* ===== RADIO BUTTONS ===== */ input[type="radio"]:checked {   accent-color: #dc2626 !important; }  /* ===== SWITCHES E TOGGLES ===== */ /* Seletores específicos para toggles */ input[type="checkbox"]:checked + .slider, .switch input:checked + .slider, .toggle input:checked + .slider {   background-color: #dc2626 !important; }  /* ===== TOGGLE BUTTONS ESPECÍFICOS ===== */ /* Apenas o botão, não o span interno */ .toggle-button.active, button.toggle-button.active, .toggle-button[aria-checked="true"] {   background-color: #dc2626 !important; }  /* Span interno do toggle deve ficar branco (bolinha do switch) */ .toggle-button span.active, .toggle-button[aria-checked="true"] span, button.toggle-button.active span {   background-color: white !important;   transform: translateX(20px); }  /* Estado hover dos toggles */ .toggle-button.active:hover {   background-color: #b91c1c !important; }  /* ===== HOVER STATES ===== */ button.btn-primary:hover, button[type="submit"]:hover, .btn-primary:hover, .bg-n-brand:hover {   background-color: #b91c1c !important;   border-color: #b91c1c !important; }  /* ===== ABAS ATIVAS (para "Minhas") ===== */ .tabs-title.is-active, .tabs-title.is-active a, .tab-item.active, .nav-tab.active, [role="tab"][aria-selected="true"] {   color: #dc2626 !important;   border-bottom-color: #dc2626 !important; }  /* ===== ELEMENTOS COM TEXTO AZUL ESPECÍFICOS ===== */ .text-n-blue-text, .text-n-brand {   color: #dc2626 !important; }  /* ===== OUTLINES E BORDAS AZUIS ===== */ .outline-n-brand {   outline-color: #dc2626 !important;   border-color: #dc2626 !important; }  /* ===== AVATARS DOS AGENTES ===== */ .avatar-container:not([role="img"]), .user-thumbnail:not([role="img"]), .thumbnail-rounded:not([role="img"]), .contact-thumbnail, .agent-thumbnail {   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important;   border: 1px solid rgba(220, 38, 38, 0.3) !important; }  /* ===== AVATARS - FORÇA NUCLEAR TOTAL ===== */ /* Força TODOS os avatares sem exceção */ div.avatar-container, div.user-thumbnail, div.thumbnail-rounded, div[class*="avatar"], div[class*="thumbnail"] {   background: rgba(220, 38, 38, 0.15) !important;   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important; }  /* Força por atributos data-v */ div[data-v-b1a9fc9d], div[data-v-faa580c9], *[data-v-b1a9fc9d][data-v-faa580c9] {   background: rgba(220, 38, 38, 0.15) !important;   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important; }  /* OVERRIDE STYLES INLINE - FORÇA BRUTA */ div[style*="font-size"] {   background: rgba(220, 38, 38, 0.15) !important;   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important; }  /* Específico para o U dentro da conversa */ .user-thumbnail-box div, .conversation div.avatar-container, .conversation div.user-thumbnail {   background: rgba(220, 38, 38, 0.15) !important;   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important; }  /* ÚLTIMA TENTATIVA - USA !IMPORTANT COM MAIS ESPECIFICIDADE */ .conversation .user-thumbnail-box .avatar-container.user-thumbnail.thumbnail-rounded {   background: rgba(220, 38, 38, 0.15) !important;   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important; }  /* Se ainda não funcionar, força por QUALQUER div com aria-hidden */ div[aria-hidden="true"]:not(.modal):not(.dropdown) {   background: rgba(220, 38, 38, 0.15) !important;   background-color: rgba(220, 38, 38, 0.15) !important;   color: #dc2626 !important; }  /* Texto interno dos avatars (iniciais) */ span[role="img"] > span.select-none {   color: #dc2626 !important; }  /* ===== BULK ACTIONS ===== */ .bg-n-slate-9\/10, .bg-n-slate-9\/20 {   background-color: rgba(220, 38, 38, 0.1) !important; }  .bg-n-slate-9\/10:hover, .bg-n-slate-9\/20:hover {   background-color: rgba(220, 38, 38, 0.2) !important; }  /* ===== CABEÇALHOS DOS QUADROS DO KANBAN ===== */ .board-column-header, .kanban-header, .kanban-column-header, [class*="board-column-header"] {   background-color: rgba(220, 38, 38, 0.05) !important;   border-top: 3px solid #dc2626 !important;   border-bottom: 2px solid #dc2626 !important; }  /* ===== CORPO DOS QUADROS DO KANBAN ===== */ /* Fundo cinza bem leve para os quadros */ [class*="board-column"]:not(.board-column-header), .kanban-column, .board-column {   background-color: rgba(0, 0, 0, 0.02) !important; }  /* ===== REMOVER LINHAS AZUIS ===== */ [class*="border-blue"], .border-blue-500, .border-blue-600 {   border-color: #dc2626 !important; }  /* ===== ELEMENTOS ADICIONAIS COM COR PRIMÁRIA ===== */ .primary-color, .text-woot-500, .text-woot-600, .bg-woot-500, .bg-woot-600, .border-woot-500, .border-woot-600 {   color: #dc2626 !important; }  /* Background para elementos woot */ .bg-woot-500, .bg-woot-600 {   background-color: #dc2626 !important; }  /* ===== PROGRESS BARS E INDICADORES ===== */ .progress-bar, .loading-bar {   background-color: #dc2626 !important; }  /* ===== ANIMAÇÃO DE CARREGAMENTO (SPINNER) - VERSÃO FINAL ===== */ /* Spinner principal */ .spinner {   border: 3px solid #fee2e2 !important; /* Borda toda vermelho bem claro */   border-top: 3px solid #dc2626 !important; /* Topo vermelho forte */   border-radius: 50% !important;   width: 20px !important;   height: 20px !important;   animation: spin 1s linear infinite !important;   display: inline-block !important;   box-sizing: border-box !important;   background: transparent !important; }  /* Animação padrão */ @keyframes spin {   0% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }  /* Remove qualquer borda azul/cinza de elementos relacionados */ .spinner-container, .spinner-wrapper, .loading-container, div:has(.spinner) {   border: none !important;   background: transparent !important; }  /* Se tiver um elemento pai ou irmão com borda */ .spinner + *, .spinner ~ *, * > .spinner {   border-color: transparent !important; }  /* Força transparência em elementos ao redor do spinner */ .spinner::before, .spinner::after {   border: none !important;   background: transparent !important; }  /* Se tiver elementos com classe animate-spin */ .animate-spin, [class*="animate-spin"], [class*="loading"] {   border: 3px solid #fee2e2 !important;   border-top-color: #dc2626 !important;   border-radius: 50% !important;   background: transparent !important; }  /* ===== TOOLTIPS E DROPDOWNS ===== */ .tooltip.show, .dropdown-menu .active, .dropdown-item:active {   background-color: rgba(220, 38, 38, 0.1) !important;   color: #dc2626 !important; }  /* ===== SELEÇÃO DE TEXTO ===== */ ::selection {   background-color: rgba(220, 38, 38, 0.2) !important;   color: #dc2626 !important; }  ::-moz-selection {   background-color: rgba(220, 38, 38, 0.2) !important;   color: #dc2626 !important; }  /* ===== TAGS E LABELS ===== */ .tag-primary, .label-primary {   background-color: #dc2626 !important;   color: white !important; }  /* ===== STATUS ONLINE ===== */ .status-badge.online, .presence-indicator.online {   background-color: #dc2626 !important; }  /* ===== MENSAGENS DE SUCESSO/INFO QUE USAM COR PRIMÁRIA ===== */ .alert-primary, .notification-primary {   background-color: rgba(220, 38, 38, 0.1) !important;   border-color: #dc2626 !important;   color: #dc2626 !important; }  /* ===== NOVAS DESCOBERTAS - CLASSES DE COR AZUL → VERMELHO ===== */ /* Backgrounds */ .bg-blue-500, .bg-n-blue-500, .bg-woot-500, .bg-n-brand { background-color: #dc2626 !important; } .bg-blue-600, .bg-n-blue-600, .bg-woot-600 { background-color: #b91c1c !important; } .bg-blue-100, .bg-n-blue-100 { background-color: rgba(220, 38, 38, 0.1) !important; }  /* Textos */ .text-blue-500, .text-n-blue-500, .text-n-brand, .text-n-blue-text { color: #dc2626 !important; } .text-blue-600, .text-n-blue-600, .text-woot-500, .text-woot-600 { color: #dc2626 !important; }  /* Bordas */ .border-blue-500, .border-n-blue-500, .border-n-brand, .border-woot-500 { border-color: #dc2626 !important; } .border-blue-600, .border-n-blue-600, .border-woot-600 { border-color: #b91c1c !important; }  /* ===== ÍCONES - FORÇA TOTAL ===== */ /* Ícones com classes específicas */ .icon-primary, .icon-blue, svg.text-blue-500, svg.text-blue-600, svg[class*="text-blue"], svg[class*="text-woot"], i[class*="icon-blue"], .material-icons.text-blue {   color: #dc2626 !important;   fill: #dc2626 !important; }  /* SVG paths com fill azul */ svg path[fill="#1f73b7"], svg path[fill="#3c84d0"], svg path[fill="#5bb3f0"], svg path[fill="blue"] {   fill: #dc2626 !important; }  /* SVG com stroke azul */ svg path[stroke*="blue"], svg *[stroke="#1f73b7"] {   stroke: #dc2626 !important; }  /* ===== LINKS GERAIS ===== */ a:not([class]) {   color: #dc2626 !important; }  a:not([class]):hover {   color: #b91c1c !important; }  /* ===== CARDS E CONVERSAS SELECIONADAS ===== */ .conversation-selected, .conversation.active, .card.active {   border-left-color: #dc2626 !important;   background-color: rgba(220, 38, 38, 0.05) !important; }  /* Animação de seleção de card - fundo suave apenas */ .animate-card-select {   animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;   background-color: rgba(220, 38, 38, 0.03) !important; }  /* Conversas com hover */ .conversation:hover {   background-color: rgba(220, 38, 38, 0.02) !important; }