/** * public/assets/css/app.css * Identidade visual do Titanium CRM: minimalista, corporativo, premium. * Paleta: azul petróleo/indigo como primária, cinzas neutros, cards brancos * com sombra suave, bordas arredondadas consistentes. Suporte a dark mode * via classe .dark-mode no (alternada por app.js + localStorage). */ :root { --tc-primary: #1e3a5f; --tc-primary-light: #2c5282; --tc-primary-dark: #14283f; --tc-accent: #3b82f6; --tc-indigo: #4f46e5; --tc-bg: #f4f6f9; --tc-surface: #ffffff; --tc-border: #e5e9ef; --tc-text: #1f2937; --tc-text-muted: #6b7280; --tc-success: #16a34a; --tc-warning: #d97706; --tc-danger: #dc2626; --tc-info: #0891b2; --tc-radius: 0.75rem; --tc-radius-sm: 0.5rem; --tc-shadow: 0 2px 10px rgba(17, 24, 39, 0.06); --tc-shadow-hover: 0 6px 20px rgba(17, 24, 39, 0.10); --tc-sidebar-width: 260px; --tc-topbar-height: 68px; } body.dark-mode { --tc-bg: #0f1620; --tc-surface: #171f2a; --tc-border: #2a3441; --tc-text: #e5e9ef; --tc-text-muted: #9aa5b1; --tc-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --tc-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { height: 100%; } body { background-color: var(--tc-bg); color: var(--tc-text); font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } a { text-decoration: none; } /* ---------------- Layout base (sidebar + topbar) ---------------- */ .tc-wrapper { display: flex; min-height: 100vh; } .tc-sidebar { width: var(--tc-sidebar-width); background: var(--tc-primary-dark); color: #cfe0f0; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1030; display: flex; flex-direction: column; transition: transform 0.25s ease; } .tc-sidebar-brand { padding: 1.25rem 1.25rem; display: flex; align-items: center; gap: 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tc-sidebar-brand .tc-logo-badge { width: 38px; height: 38px; border-radius: var(--tc-radius-sm); background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; } .tc-sidebar-brand .tc-brand-text { line-height: 1.1; } .tc-sidebar-brand .tc-brand-text strong { display: block; color: #fff; font-size: 1rem; } .tc-sidebar-brand .tc-brand-text span { font-size: 0.72rem; color: #9db3c9; } .tc-sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } .tc-sidebar-nav .tc-nav-label { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.06em; color: #6f89a3; padding: 0.75rem 0.75rem 0.35rem; } .tc-sidebar-nav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--tc-radius-sm); color: #cfe0f0; font-size: 0.9rem; margin-bottom: 0.15rem; transition: background-color 0.15s ease, color 0.15s ease; } .tc-sidebar-nav a i { width: 18px; text-align: center; font-size: 0.95rem; } .tc-sidebar-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .tc-sidebar-nav a.active { background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; box-shadow: var(--tc-shadow); } .tc-sidebar-nav a.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Destaque sutil para o item "Meu Dia" (Fase 7) - a tela mais usada no dia a dia. Não usa gradiente cheio (reservado ao estado .active) para não competir visualmente com a navegação atual; só uma borda de acento. */ .tc-sidebar-nav a.tc-nav-highlight:not(.active) { border: 1px solid rgba(79, 70, 229, 0.35); background: rgba(79, 70, 229, 0.08); } .tc-sidebar-nav .tc-badge-soon { margin-left: auto; font-size: 0.6rem; background: rgba(255, 255, 255, 0.12); padding: 0.1rem 0.4rem; border-radius: 999px; } .tc-main { margin-left: var(--tc-sidebar-width); flex: 1; min-width: 0; display: flex; flex-direction: column; } .tc-topbar { height: var(--tc-topbar-height); background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020; } .tc-topbar .tc-page-title { font-size: 1.1rem; font-weight: 600; margin: 0; } .tc-topbar-actions { display: flex; align-items: center; gap: 0.85rem; } .tc-icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tc-bg); color: var(--tc-text-muted); border: 1px solid var(--tc-border); cursor: pointer; transition: all 0.15s ease; } .tc-icon-btn:hover { background: var(--tc-accent); color: #fff; border-color: var(--tc-accent); } /* ==================== Notificações: sino + painel ==================== */ .tc-notification-badge { position: absolute; top: -2px; right: -2px; font-size: 0.62rem; padding: 0.15em 0.4em; line-height: 1; box-shadow: 0 0 0 2px var(--tc-surface); } /* Balanço do sino quando chega notificação nova (classe aplicada via JS/anime.js) */ @keyframes tcBellRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } } .tc-notif-bell-ring { animation: tcBellRing 0.7s ease-in-out; transform-origin: top center; display: inline-block; } @media (prefers-reduced-motion: reduce) { .tc-notif-bell-ring { animation: none; } } .tc-notif-panel { width: 360px; max-width: calc(100vw - 2rem); overflow: hidden; border: 1px solid var(--tc-border); } .tc-notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--tc-border); background: linear-gradient(180deg, var(--tc-bg), transparent); } .tc-notif-panel-head strong { font-size: 0.88rem; display: block; } .tc-notif-panel-sub { font-size: 0.7rem; color: var(--tc-text-muted); } .tc-notif-mark-all { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; cursor: pointer; transition: all 0.15s ease; } .tc-notif-mark-all:hover { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; transform: scale(1.08); } .tc-notif-list { max-height: 380px; overflow-y: auto; padding: 0.4rem; } .tc-notif-list::-webkit-scrollbar { width: 6px; } .tc-notif-list::-webkit-scrollbar-thumb { background: var(--tc-border); border-radius: 999px; } .tc-notif-section-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tc-text-muted); padding: 0.5rem 0.6rem 0.3rem; } .tc-notification-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem 0.65rem; border-radius: 0.65rem; text-decoration: none; color: var(--tc-text); font-size: 0.8rem; transition: background 0.15s ease, transform 0.15s ease; position: relative; } .tc-notification-item:hover { background: var(--tc-bg); color: var(--tc-text); transform: translateX(2px); } .tc-notification-item.unread { background: var(--tc-accent-soft, rgba(59, 130, 246, 0.07)); } .tc-notification-item.tc-read-fade { opacity: 0; transform: translateX(10px); transition: opacity 0.35s ease, transform 0.35s ease; } .tc-notif-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #fff; } .tc-notif-icon.lead { background: linear-gradient(135deg, #3b82f6, #4f46e5); } .tc-notif-icon.task { background: linear-gradient(135deg, #7c3aed, #a855f7); } .tc-notif-icon.whatsapp { background: linear-gradient(135deg, #16a34a, #22c55e); } .tc-notif-icon.chat { background: linear-gradient(135deg, #06b6d4, #0891b2); } .tc-notif-icon.goal { background: linear-gradient(135deg, #f59e0b, #f97316); } .tc-notif-icon.default { background: linear-gradient(135deg, #64748b, #475569); } .tc-notification-item .tc-notification-title { font-weight: 650; margin-bottom: 0.1rem; line-height: 1.3; } .tc-notification-item .tc-notification-body { color: var(--tc-text-muted); font-size: 0.76rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tc-notification-item .tc-notification-meta { font-size: 0.68rem; color: var(--tc-text-muted); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.3rem; } .tc-notification-item.unread .tc-notification-meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tc-accent); display: inline-block; } .tc-notif-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.4rem 1rem; color: var(--tc-text-muted); text-align: center; } .tc-notif-empty i { font-size: 1.6rem; opacity: 0.45; } .tc-notif-empty span { font-size: 0.8rem; } /* Skeleton de carregamento inicial */ .tc-notif-skel { padding: 0.3rem; } .tc-notif-skel-row { display: flex; gap: 0.65rem; padding: 0.6rem 0.65rem; } .tc-notif-skel-dot { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; } .tc-notif-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; } .tc-notif-skel-lines i { display: block; height: 8px; border-radius: 4px; } .tc-notif-skel-lines i:first-child { width: 70%; } .tc-notif-skel-lines i:last-child { width: 45%; } .tc-notif-skel-dot, .tc-notif-skel-lines i { background: linear-gradient(90deg, var(--tc-border) 25%, var(--tc-bg) 50%, var(--tc-border) 75%); background-size: 200% 100%; animation: tcSkelShimmer 1.4s ease-in-out infinite; } @keyframes tcSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .tc-notif-skel-dot, .tc-notif-skel-lines i { animation: none; } } .tc-user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; } .tc-content { padding: 1.75rem; flex: 1; } /* ---------------- Cards & componentes ---------------- */ .tc-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); transition: box-shadow 0.2s ease; } .tc-card:hover { box-shadow: var(--tc-shadow-hover); } .tc-card .tc-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--tc-border); font-weight: 600; } .tc-card .tc-card-body { padding: 1.25rem; } .tc-kpi-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 0.9rem; height: 100%; } .tc-kpi-icon { width: 46px; height: 46px; border-radius: var(--tc-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; flex-shrink: 0; } .tc-kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; } .tc-kpi-label { font-size: 0.78rem; color: var(--tc-text-muted); } .tc-insight-card { border-left: 4px solid var(--tc-accent); background: var(--tc-surface); border-radius: var(--tc-radius-sm); box-shadow: var(--tc-shadow); padding: 0.9rem 1.1rem; font-size: 0.88rem; display: flex; gap: 0.65rem; align-items: flex-start; } .tc-insight-card i { color: var(--tc-accent); margin-top: 0.15rem; } /* ---------------- Tabelas ---------------- */ .tc-table-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); overflow: hidden; } .table.tc-table { margin-bottom: 0; } .table.tc-table thead th { background: var(--tc-bg); border-bottom: 1px solid var(--tc-border); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tc-text-muted); white-space: nowrap; } .table.tc-table td, .table.tc-table th { vertical-align: middle; padding: 0.75rem 1rem; color: var(--tc-text); border-color: var(--tc-border); } .table.tc-table tbody tr:hover { background: var(--tc-bg); } /* ---------------- Formulários ---------------- */ .form-control, .form-select { background-color: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-text); border-radius: var(--tc-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--tc-accent); box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15); background-color: var(--tc-surface); color: var(--tc-text); } .form-label { font-size: 0.82rem; font-weight: 600; color: var(--tc-text-muted); } .tc-form-section-title { font-size: 0.9rem; font-weight: 700; color: var(--tc-primary); margin: 1.5rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--tc-border); } body.dark-mode .tc-form-section-title { color: #8fb8e0; } /* ---------------- Botões ---------------- */ .btn-tc-primary { background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); border: none; color: #fff; border-radius: var(--tc-radius-sm); font-weight: 500; } .btn-tc-primary:hover { filter: brightness(1.08); color: #fff; } /* ---------------- Login (split-screen) ---------------- */ .tc-login-wrapper { min-height: 100vh; display: flex; } .tc-login-brand { flex: 1.1; background: linear-gradient(160deg, var(--tc-primary-dark), var(--tc-primary), var(--tc-indigo)); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; } .tc-login-brand::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); top: -150px; right: -150px; } .tc-login-brand::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); bottom: -120px; left: -80px; } .tc-login-form { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--tc-bg); padding: 2rem; } .tc-login-card { width: 100%; max-width: 400px; } /* ---------------- Dark mode toggle ---------------- */ .tc-theme-toggle { cursor: pointer; } /* ---------------- Kanban (Pipeline) ---------------- */ .tc-kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; } .tc-kanban-column { flex: 0 0 300px; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); display: flex; flex-direction: column; max-height: calc(100vh - 220px); } .tc-kanban-column-header { padding: 0.85rem 1rem; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--tc-border); border-radius: var(--tc-radius) var(--tc-radius) 0 0; } .tc-kanban-column-body { padding: 0.75rem; overflow-y: auto; flex: 1; min-height: 120px; } .tc-kanban-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sm); box-shadow: var(--tc-shadow); padding: 0.75rem 0.9rem; margin-bottom: 0.65rem; cursor: pointer; font-size: 0.85rem; transition: box-shadow 0.15s ease, transform 0.15s ease; } .tc-kanban-card:hover { box-shadow: var(--tc-shadow-hover); } .tc-kanban-card:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; } .tc-kanban-card.dragging { opacity: 0.5; cursor: grabbing; } .tc-kanban-column-body.drag-over { background: rgba(59, 130, 246, 0.08); outline: 2px dashed var(--tc-accent); outline-offset: -4px; border-radius: var(--tc-radius-sm); } .tc-kanban-card .tc-card-name { font-weight: 600; margin-bottom: 0.2rem; } .tc-kanban-card .tc-card-meta { color: var(--tc-text-muted); font-size: 0.75rem; } /* ---------------- Utilitários ---------------- */ .tc-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; } .tc-mobile-toggle { display: none; } @media (max-width: 991.98px) { .tc-sidebar { transform: translateX(-100%); } .tc-sidebar.tc-sidebar-open { transform: translateX(0); } .tc-main { margin-left: 0; } .tc-mobile-toggle { display: inline-flex; } } /* ---------------- Wizard de cadastro de Lead (Fase 4) ---------------- */ .tc-wizard-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .tc-wizard-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; cursor: pointer; user-select: none; } .tc-wizard-step::before { content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--tc-border); z-index: 0; } .tc-wizard-step:first-child::before { display: none; } .tc-wizard-step-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--tc-surface); border: 2px solid var(--tc-border); color: var(--tc-text-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; position: relative; z-index: 1; transition: all 0.2s ease; } .tc-wizard-step-label { margin-top: 0.4rem; font-size: 0.76rem; font-weight: 600; color: var(--tc-text-muted); } .tc-wizard-step.active .tc-wizard-step-circle { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); } .tc-wizard-step.active .tc-wizard-step-label { color: var(--tc-accent); } .tc-wizard-step.completed .tc-wizard-step-circle { background: var(--tc-success); border-color: var(--tc-success); color: #fff; } .tc-wizard-step.completed::before { background: var(--tc-success); } .tc-badge-code { background: var(--tc-indigo); color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 0.7rem; } .tc-score-display { padding-top: 0.35rem; } /* ---------------- Importação de leads via CSV (Fase 4) ---------------- */ .tc-import-dropzone { border: 2px dashed var(--tc-border); border-radius: var(--tc-radius); padding: 2.5rem 1.5rem; text-align: center; color: var(--tc-text-muted); background: var(--tc-bg); transition: border-color 0.2s ease, background 0.2s ease; } .tc-import-dropzone i { font-size: 2.2rem; color: var(--tc-accent); margin-bottom: 0.75rem; display: block; } .tc-mapping-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tc-text-muted); white-space: nowrap; } .tc-mapping-table td { vertical-align: middle; } .tc-import-summary-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); padding: 1.1rem 1.25rem; text-align: center; } .tc-import-summary-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } .tc-import-summary-label { font-size: 0.78rem; color: var(--tc-text-muted); margin-top: 0.25rem; } /* ===================================================================== * RESPONSIVIDADE (revisão mobile-first, Fase 6) * Breakpoints Bootstrap 5.3: <576px, 576-768px, 768-992px, 992-1200px, >1200px. * A regra geral já existente (sidebar off-canvas <992px) foi mantida e * reforçada aqui com overlay/backdrop. Os demais ajustes ficam organizados * por componente, do maior (layout) para o mais específico (Kanban mobile). * ===================================================================== */ /* ---------------- Layout base: sidebar off-canvas + overlay ---------------- */ .tc-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 22, 32, 0.55); z-index: 1025; /* abaixo da sidebar (1030), acima do conteúdo */ } .tc-sidebar-backdrop.tc-sidebar-backdrop-show { display: block; } @media (max-width: 991.98px) { .tc-sidebar { width: min(var(--tc-sidebar-width), 82vw); box-shadow: var(--tc-shadow-hover); } } @media (max-width: 767.98px) { .tc-content { padding: 1.1rem; } .tc-topbar { padding: 0 0.85rem; height: 60px; } .tc-topbar .tc-page-title { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; } .tc-topbar-actions { gap: 0.4rem; } .tc-icon-btn { width: 34px; height: 34px; } .tc-user-avatar { width: 34px; height: 34px; font-size: 0.8rem; } } @media (max-width: 575.98px) { .tc-content { padding: 0.85rem; } .tc-kpi-value { font-size: 1.2rem; } .tc-kpi-card { padding: 0.9rem 1rem; } .dropdown-menu { max-width: 92vw; } } /* Dropdowns (notificações/usuário) não podem "vazar" da tela em mobile */ @media (max-width: 575.98px) { #tcNotificationBell .dropdown-menu { width: 88vw !important; max-width: 360px; } } /* ---------------- Tabelas: piso mínimo = scroll horizontal controlado ---------------- */ @media (max-width: 575.98px) { .table.tc-table thead th, .table.tc-table td, .table.tc-table th { padding: 0.6rem 0.65rem; font-size: 0.8rem; } .tc-table-card .table-responsive { -webkit-overflow-scrolling: touch; } } /* ---------------- Wizard de Lead: abas utilizáveis em mobile ---------------- */ @media (max-width: 575.98px) { .tc-wizard-steps { overflow-x: auto; justify-content: flex-start; gap: 0.25rem; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; } .tc-wizard-step { flex: 0 0 auto; min-width: 74px; } .tc-wizard-step-label { font-size: 0.66rem; } .tc-wizard-step-circle { width: 30px; height: 30px; font-size: 0.8rem; } .tc-wizard-step::before { top: 15px; } /* Botões de navegação do wizard empilham e ocupam a largura toda */ .tc-wizard-nav-bar { flex-direction: column-reverse; gap: 0.5rem; } .tc-wizard-nav-bar > div { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .tc-wizard-nav-bar .btn { width: 100%; } } /* ---------------- Gráficos Chart.js: altura controlada em telas pequenas ---------------- */ .tc-chart-wrap { position: relative; width: 100%; height: 260px; } @media (min-width: 992px) { .tc-chart-wrap { height: 300px; } } .tc-chart-wrap canvas { max-width: 100%; } /* ---------------- Central de relatórios ---------------- */ .tc-report-nav { gap: .45rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; } .tc-report-nav .nav-link { white-space: nowrap; border: 1px solid var(--tc-border); color: var(--tc-text-muted); background: var(--tc-surface); font-size: .82rem; } .tc-report-nav .nav-link.active { border-color: var(--tc-accent); background: var(--tc-accent); color: #fff; } .tc-report-section { scroll-margin-top: calc(var(--tc-topbar-height) + 1rem); } .tc-report-money { font-size: clamp(1rem, 2vw, 1.35rem); white-space: nowrap; } .tc-report-ai-result { white-space: pre-wrap; line-height: 1.6; border: 1px solid rgba(99,102,241,.22); border-radius: .7rem; background: rgba(99,102,241,.05); padding: 1rem; } /* ---------------- Indicadores comerciais ---------------- */ .tc-indicator-kpi { display: block; color: inherit; text-decoration: none; height: 100%; } .tc-indicator-kpi .tc-kpi-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .tc-indicator-kpi:hover .tc-kpi-card, .tc-indicator-kpi:focus-visible .tc-kpi-card { transform: translateY(-3px); border-color: var(--tc-accent); box-shadow: var(--tc-shadow-hover); } .tc-indicator-kpi small { display: block; line-height: 1.25; margin-top: .15rem; font-size: .68rem; } .tc-indicator-money { font-size: clamp(.95rem, 1.7vw, 1.25rem); white-space: nowrap; } .tc-indicator-operation { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; border: 1px solid rgba(239,68,68,.28); border-radius: .7rem; color: var(--tc-text); text-decoration: none; background: rgba(239,68,68,.04); } .tc-indicator-operation:hover { color: var(--tc-text); border-color: #ef4444; background: rgba(239,68,68,.08); } .tc-indicator-operation > i:first-child { color: #ef4444; } .tc-indicator-state-table { box-shadow: none; border: 0; max-height: 420px; overflow-y: auto; } .tc-indicator-state-table .tc-clickable-row:hover { background: rgba(59,130,246,.06); } .tc-indicator-state-table a { color: inherit; text-decoration: none; display: block; } .tc-map-legend { font-size: .75rem; color: var(--tc-text-muted); } .tc-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; } .tc-heatmap-table { border-collapse: collapse; font-size: .68rem; } .tc-heatmap-table th, .tc-heatmap-table td { text-align: center; padding: 4px 3px; min-width: 26px; color: var(--tc-text); border: 1px solid var(--tc-border); } .tc-heatmap-table thead th { color: var(--tc-text-muted); font-weight: 600; } .tc-heatmap-table tbody th { text-align: left; padding-right: 8px; color: var(--tc-text-muted); font-weight: 600; } /* ---------------- Indicadores: mapa do Brasil + heatmap sem vazar do container ---------------- */ @media (max-width: 575.98px) { #tcBrazilMapWrap { max-width: 280px !important; } .tc-heatmap-table th, .tc-heatmap-table td { min-width: 22px; padding: 3px 2px; font-size: 0.62rem; } } /* ---------------- Kanban (Pipeline): carrossel horizontal com scroll-snap em mobile ---------------- */ .tc-kanban-move-btn { display: none; } @media (max-width: 767.98px) { .tc-kanban { scroll-snap-type: x mandatory; gap: 0.75rem; margin: 0 -0.25rem; padding: 0 0.25rem 1rem; } .tc-kanban-column { flex: 0 0 86vw; max-width: 86vw; scroll-snap-align: start; max-height: calc(100vh - 260px); } .tc-kanban-card { cursor: pointer; /* toque abre o resumo; arraste nativo não é confiável em touch */ } /* Fallback de UX para mobile/touch: o HTML5 Drag and Drop API nativo não funciona de forma confiável em navegadores touch (não existe evento de toque equivalente sem libs extras). Em vez de arrastar, o usuário usa este botão para mover o card entre colunas via menu. */ .tc-kanban-move-btn { display: inline-flex; } .tc-kanban-card-actions { display: flex; justify-content: flex-end; margin-top: 0.4rem; } } @media (min-width: 768px) { .tc-kanban-card-actions { display: none; } } .tc-kanban-move-btn { align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tc-bg); border: 1px solid var(--tc-border); color: var(--tc-text-muted); font-size: 0.72rem; } /* Indicador visual de que o quadro tem mais colunas ao lado (scroll-snap) */ @media (max-width: 767.98px) { .tc-kanban-hint { display: block; } } .tc-kanban-hint { display: none; font-size: 0.75rem; color: var(--tc-text-muted); margin-bottom: 0.5rem; } /* ==== TASKS MODULE ==== */ /* Linha da listagem destacada quando a tarefa está atrasada */ .tc-table tr.tc-task-overdue { background-color: rgba(220, 38, 38, 0.06); } .tc-table tr.tc-task-overdue:hover { background-color: rgba(220, 38, 38, 0.1); } /* Quadro principal de tarefas: cards curtos para leitura rápida, com prazo, responsável e vínculo ao lead sempre visíveis. */ .tc-task-kanban-column { flex-basis: 285px; max-height: none; min-height: 290px; } .tc-task-kanban-column-pendente .tc-kanban-column-header { border-bottom-color: var(--bs-secondary); } .tc-task-kanban-column-em_andamento .tc-kanban-column-header { border-bottom-color: var(--bs-info); } .tc-task-kanban-column-aguardando .tc-kanban-column-header { border-bottom-color: var(--bs-warning); } .tc-task-kanban-column-concluida .tc-kanban-column-header { border-bottom-color: var(--bs-success); } .tc-task-kanban-column-cancelada .tc-kanban-column-header { border-bottom-color: var(--bs-dark); } .tc-task-kanban-column-body { min-height: 200px; max-height: calc(100vh - 315px); } .tc-task-kanban-card { cursor: grab; } .tc-task-kanban-card.tc-task-card-saving { opacity: 0.58; pointer-events: none; } .tc-task-card-title { line-height: 1.35; } .tc-task-card-title:hover { color: var(--tc-accent) !important; } .tc-task-card-description { margin: 0.55rem 0; font-size: 0.78rem; color: var(--tc-text-muted); line-height: 1.4; white-space: pre-line; } .tc-task-card-meta { display: grid; gap: 0.35rem; } .tc-task-card-meta a { color: var(--tc-accent); } .tc-task-card-footer { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--tc-border); } .tc-task-card-overdue { border-left: 3px solid var(--bs-danger); } /* Piscar sutil no badge "Atrasada" para chamar atenção sem ser exagerado */ .tc-task-blink { animation: tcTaskBlink 1.6s ease-in-out infinite; } @keyframes tcTaskBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Badge de contador de tarefas pendentes/atrasadas na sidebar */ .tc-sidebar-nav .tc-task-badge { margin-left: auto; font-size: 0.68rem; padding: 0.2rem 0.45rem; } /* ===================================================================== * CHAT INTERNO (polling AJAX, sem websockets — ver ChatController/app.js) * ===================================================================== */ .tc-chat-app { display: flex; height: calc(100vh - var(--tc-topbar-height) - 3.2rem); min-height: 420px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); overflow: hidden; } /* ---------------- Coluna esquerda: lista de salas ---------------- */ .tc-chat-rooms { width: 320px; flex: 0 0 320px; display: flex; flex-direction: column; border-right: 1px solid var(--tc-border); background: var(--tc-bg); min-height: 0; } .tc-chat-rooms-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem 0.5rem; } .tc-chat-search { position: relative; } .tc-chat-search-results { position: absolute; left: 0.5rem; right: 0.5rem; top: 100%; margin-top: 0.25rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sm); box-shadow: var(--tc-shadow-hover); max-height: 260px; overflow-y: auto; z-index: 20; } .tc-chat-search-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; border: none; background: none; text-align: left; padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--tc-text); border-bottom: 1px solid var(--tc-border); } .tc-chat-search-item:last-child { border-bottom: none; } .tc-chat-search-item:hover { background: var(--tc-bg); } .tc-chat-search-empty { padding: 0.6rem 0.7rem; font-size: 0.78rem; color: var(--tc-text-muted); } .tc-chat-tabs { border-bottom-color: var(--tc-border); font-size: 0.78rem; } .tc-chat-tabs .nav-link { color: var(--tc-text-muted); border: none; padding: 0.4rem 0.6rem; } .tc-chat-tabs .nav-link.active { color: var(--tc-accent); border-bottom: 2px solid var(--tc-accent); background: none; } .tc-chat-room-list { flex: 1; overflow-y: auto; padding: 0.4rem; } .tc-chat-empty { padding: 1.2rem 0.6rem; text-align: center; color: var(--tc-text-muted); font-size: 0.8rem; } .tc-chat-room-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--tc-radius-sm); text-decoration: none; color: var(--tc-text); margin-bottom: 0.15rem; } .tc-chat-room-item:hover { background: var(--tc-surface); } .tc-chat-room-item.active { background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; } .tc-chat-room-item.active .tc-chat-room-preview { color: rgba(255, 255, 255, 0.8); } .tc-chat-room-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; } .tc-chat-room-info { flex: 1; min-width: 0; } .tc-chat-room-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-chat-room-preview { font-size: 0.74rem; color: var(--tc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-chat-room-badge { font-size: 0.68rem; } /* ---------------- Coluna direita: conversa ativa ---------------- */ .tc-chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .tc-chat-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tc-text-muted); } .tc-chat-placeholder i { font-size: 2.4rem; margin-bottom: 0.6rem; opacity: 0.5; } .tc-chat-header { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tc-border); } .tc-chat-header-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; } .tc-chat-header-title { font-weight: 700; font-size: 0.95rem; } .tc-chat-header-meta { font-size: 0.74rem; color: var(--tc-text-muted); } .tc-chat-messages { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; background: var(--tc-bg); } .tc-chat-system-msg { align-self: center; background: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-text-muted); font-size: 0.72rem; padding: 0.25rem 0.75rem; border-radius: 999px; margin: 0.4rem 0; } .tc-chat-system-msg.tc-chat-ephemeral { border-style: dashed; color: var(--tc-accent); } /* ---------------- Balões de mensagem: estilo WhatsApp (agrupados, sutis, com "rabinho") ---------------- */ .tc-chat-bubble-row { display: flex; align-items: flex-end; align-self: flex-start; gap: 0.4rem; margin-bottom: 0.15rem; max-width: 65%; width: fit-content; } .tc-chat-bubble-row.mine { align-self: flex-end; flex-direction: row-reverse; } /* Espaço maior antes de uma nova "leva" de mensagens (troca de remetente ou de dia) */ .tc-chat-bubble-row + .tc-chat-bubble-row { margin-top: 0.55rem; } /* Mensagens consecutivas do mesmo remetente ficam coladas, como no WhatsApp */ .tc-chat-bubble-row.tc-grouped + .tc-chat-bubble-row.tc-grouped { margin-top: 0.12rem; } .tc-chat-bubble-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: linear-gradient(135deg, var(--tc-accent), var(--tc-indigo)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; } .tc-chat-avatar-wrap { position: relative; overflow: hidden; } .tc-chat-avatar-wrap > img { width: 100%; height: 100%; display: block; object-fit: cover; } .tc-chat-avatar-wrap.tc-chat-avatar-has-photo > .tc-chat-avatar-initials { display: none; } /* Avatar só aparece na última bolha do grupo (rodapé do bloco) — nas demais vira espaço vazio */ .tc-chat-bubble-row.tc-grouped .tc-chat-bubble-avatar { visibility: hidden; } .tc-chat-bubble { position: relative; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; padding: 0.42rem 0.65rem; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05); min-width: 0; } .tc-chat-bubble-row.mine .tc-chat-bubble { background: var(--tc-bubble-mine, #dcf3e4); color: var(--tc-bubble-mine-text, #0b3b23); border-color: transparent; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; } [data-theme="dark"] .tc-chat-bubble-row.mine .tc-chat-bubble { background: var(--tc-bubble-mine, #114d33); color: var(--tc-bubble-mine-text, #eafff2); } /* Bolhas seguintes do mesmo grupo perdem o "bico" (ficam com cantos uniformes, como no WhatsApp) */ .tc-chat-bubble-row.tc-grouped .tc-chat-bubble { border-radius: 0.9rem 0.9rem 0.9rem 0.9rem; } .tc-chat-bubble-row.tc-grouped.mine .tc-chat-bubble { border-radius: 0.9rem 0.9rem 0.9rem 0.9rem; } .tc-chat-bubble-author { font-size: 0.68rem; font-weight: 700; color: var(--tc-accent); margin-bottom: 0.1rem; } .tc-chat-bubble-content { font-size: 0.85rem; line-height: 1.4; word-break: break-word; white-space: pre-wrap; } .tc-chat-bubble-meta { font-size: 0.62rem; opacity: 0.65; margin-top: 0.15rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; } /* Divisor de data entre mensagens ("Hoje", "Ontem", "12/03/2026") */ .tc-chat-date-divider { align-self: center; background: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-text-muted); font-size: 0.66rem; font-weight: 600; padding: 0.22rem 0.7rem; border-radius: 999px; margin: 0.7rem 0 0.5rem; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05); } /* Papel de parede sutil (opcional, ligado pelo seletor de tema) */ .tc-chat-messages.tc-wallpaper-pontos { background-image: radial-gradient(currentColor 0.6px, transparent 0.6px); background-size: 16px 16px; color: var(--tc-border); } .tc-chat-messages.tc-wallpaper-linhas { background-image: repeating-linear-gradient(135deg, currentColor 0, currentColor 1px, transparent 1px, transparent 14px); color: var(--tc-border); } .tc-chat-messages.tc-wallpaper-pontos > *, .tc-chat-messages.tc-wallpaper-linhas > * { color: var(--tc-text); } /* ---------------- Tipografia do chat (seletor no cabeçalho) ---------------- */ .tc-chat-app { --tc-chat-font-size: 0.85rem; --tc-chat-font-family: inherit; } .tc-chat-bubble-content { font-size: var(--tc-chat-font-size); font-family: var(--tc-chat-font-family); } body[data-chat-font-size="compacto"] .tc-chat-app { --tc-chat-font-size: 0.78rem; } body[data-chat-font-size="confortavel"] .tc-chat-app { --tc-chat-font-size: 0.95rem; } body[data-chat-font-family="arredondada"] .tc-chat-app { --tc-chat-font-family: ui-rounded, "Segoe UI Rounded", "SF Pro Rounded", "Segoe UI", sans-serif; } /* ---------------- Temas de cor do balão (seletor no cabeçalho) ---------------- */ body[data-chat-theme="whatsapp"] { --tc-bubble-mine: #dcf8c6; --tc-bubble-mine-text: #0b3b23; } body.dark-mode[data-chat-theme="whatsapp"] { --tc-bubble-mine: #1f7a4d; --tc-bubble-mine-text: #eafff2; } body[data-chat-theme="azul"] { --tc-bubble-mine: #dbeafe; --tc-bubble-mine-text: #0c3a6b; } body.dark-mode[data-chat-theme="azul"] { --tc-bubble-mine: #1d4d8f; --tc-bubble-mine-text: #eaf2ff; } body[data-chat-theme="roxo"] { --tc-bubble-mine: #ede9fe; --tc-bubble-mine-text: #3b1f7a; } body.dark-mode[data-chat-theme="roxo"] { --tc-bubble-mine: #5b3aa8; --tc-bubble-mine-text: #f3eeff; } body[data-chat-theme="grafite"] { --tc-bubble-mine: #e2e8f0; --tc-bubble-mine-text: #1e293b; } body.dark-mode[data-chat-theme="grafite"] { --tc-bubble-mine: #334155; --tc-bubble-mine-text: #f1f5f9; } body[data-chat-theme="rosa"] { --tc-bubble-mine: #fce7f3; --tc-bubble-mine-text: #831843; } body.dark-mode[data-chat-theme="rosa"] { --tc-bubble-mine: #9d2465; --tc-bubble-mine-text: #fce7f3; } body[data-chat-theme="esmeralda"] { --tc-bubble-mine: #d1fae5; --tc-bubble-mine-text: #065f46; } body.dark-mode[data-chat-theme="esmeralda"] { --tc-bubble-mine: #0d7a5f; --tc-bubble-mine-text: #ecfdf5; } body[data-chat-theme="laranja"] { --tc-bubble-mine: #ffedd5; --tc-bubble-mine-text: #9a3412; } body.dark-mode[data-chat-theme="laranja"] { --tc-bubble-mine: #b45309; --tc-bubble-mine-text: #fff7ed; } body[data-chat-theme="ardosia"] { --tc-bubble-mine: #cbd5e1; --tc-bubble-mine-text: #1e293b; } body.dark-mode[data-chat-theme="ardosia"] { --tc-bubble-mine: #475569; --tc-bubble-mine-text: #f1f5f9; } .tc-chat-theme-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tc-border); cursor: pointer; display: inline-block; } .tc-chat-theme-swatch.active { border-color: var(--tc-text); box-shadow: 0 0 0 2px var(--tc-surface), 0 0 0 4px var(--tc-accent); } .tc-chat-theme-menu { padding: 0.75rem; min-width: 240px; } .tc-chat-theme-menu .tc-chat-theme-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; } .tc-chat-wallpaper-group .btn { font-size: 0.7rem; } .tc-chat-wallpaper-group .btn.active { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; } .tc-evo-customer-name { color: var(--tc-success); } .tc-chat-theme-menu .form-check { font-size: 0.8rem; } .tc-chat-delete-btn { border: none; background: none; color: inherit; opacity: 0.7; padding: 0; font-size: 0.68rem; cursor: pointer; } .tc-chat-delete-btn:hover { opacity: 1; color: var(--tc-danger); } .tc-chat-composer { display: flex; align-items: flex-end; gap: 0.6rem; padding: 0.75rem 1rem; border-top: 1px solid var(--tc-border); background: var(--tc-surface); } .tc-chat-composer textarea { resize: none; max-height: 120px; background-color: var(--tc-bg); border: 1px solid var(--tc-border); color: var(--tc-text); border-radius: var(--tc-radius-sm); font-size: 0.85rem; padding: 0.5rem 0.75rem; } .tc-chat-composer button { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; } .tc-chat-compose-wrap { position: relative; flex: 1; min-width: 0; } .tc-chat-compose-tools { display: flex; gap: .35rem; margin-bottom: .4rem; } .tc-chat-tool { border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text-muted); border-radius: 999px; padding: .22rem .58rem; font-size: .72rem; } .tc-chat-tool:hover { border-color: var(--tc-accent); color: var(--tc-accent); } .tc-chat-composer-suggestions { position: absolute; z-index: 1080; left: 0; right: 0; bottom: calc(100% + .4rem); max-height: 220px; overflow-y: auto; border: 1px solid var(--tc-border); border-radius: .7rem; background: var(--tc-surface); box-shadow: var(--tc-shadow-hover); padding: .3rem; } .tc-chat-composer-suggestions button { width: 100%; display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; color: var(--tc-text); padding: .48rem; border-radius: .45rem; text-align: left; } .tc-chat-composer-suggestions button:hover { background: rgba(59,130,246,.1); } .tc-chat-composer-suggestions small { display: block; color: var(--tc-text-muted); font-size: .68rem; } .tc-chat-modal-hint { font-size: .78rem; color: var(--tc-text-muted); background: rgba(59,130,246,.08); border-radius: .55rem; padding: .65rem; } .tc-chat-member-chip { display: inline-flex; align-items: center; font-size: 0.75rem; padding: 0.3rem 0.5rem; } /* ---------------- Mobile: alterna entre lista de salas e conversa ---------------- */ @media (max-width: 767.98px) { .tc-chat-app { height: calc(100vh - var(--tc-topbar-height) - 2rem); border-radius: var(--tc-radius-sm); } .tc-chat-rooms { width: 100%; flex: 1 1 100%; border-right: none; } .tc-chat-main { display: none; } .tc-chat-app.tc-chat-has-active .tc-chat-rooms { display: none; } .tc-chat-app.tc-chat-has-active .tc-chat-main { display: flex; flex: 1 1 100%; } .tc-chat-bubble-row { max-width: 92%; } } #tcChatBackBtn { display: none; } @media (max-width: 767.98px) { #tcChatBackBtn { display: inline-flex; } } /* ==== Fase 7 (auditoria UX): Temperatura do lead, busca global, ações em lote ==== */ .tc-badge-temp-frio { background: #38bdf8; color: #fff; } .tc-badge-temp-morno { background: #d97706; color: #fff; } .tc-badge-temp-quente { background: #ea580c; color: #fff; } .tc-badge-temp-muito-quente { background: #dc2626; color: #fff; } .tc-badge-temp-none { background: var(--tc-text-muted); color: #fff; } .tc-text-stale { color: var(--tc-danger); font-weight: 600; } .tc-kanban-card-temp-strip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.25rem; } .tc-kanban-note-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tc-bg); border: 1px solid var(--tc-border); color: var(--tc-text-muted); font-size: 0.68rem; cursor: pointer; transition: all 0.15s ease; } .tc-kanban-note-btn:hover { background: var(--tc-success); border-color: var(--tc-success); color: #fff; } /* Resumo aberto ao selecionar um card do Pipeline. */ .tc-pipeline-lead-details > div { min-width: 0; } .tc-pipeline-lead-details span { display: block; color: var(--tc-text-muted); font-size: 0.72rem; margin-bottom: 0.15rem; } .tc-pipeline-lead-details strong { display: block; font-size: 0.86rem; overflow-wrap: anywhere; } /* Busca global no topbar */ .tc-global-search { position: relative; } .tc-global-search input { width: 220px; } .tc-global-search-results { position: absolute; top: calc(100% + 4px); left: 0; width: 320px; max-height: 360px; overflow-y: auto; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sm); box-shadow: var(--tc-shadow-hover); z-index: 1050; display: none; } .tc-global-search-results.show { display: block; } .tc-global-search-item { display: block; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--tc-border); color: var(--tc-text); text-decoration: none; font-size: 0.82rem; } .tc-global-search-item:last-child { border-bottom: none; } .tc-global-search-item:hover { background: rgba(59, 130, 246, 0.08); } .tc-global-search-item .tc-gs-name { font-weight: 600; } .tc-global-search-item .tc-gs-meta { color: var(--tc-text-muted); font-size: 0.72rem; } .tc-global-search-empty { padding: 0.75rem; text-align: center; color: var(--tc-text-muted); font-size: 0.8rem; } @media (max-width: 767.98px) { .tc-global-search input { width: 140px; } .tc-global-search-results { width: 260px; } } /* Ações em lote na listagem de Leads */ .tc-bulk-bar { display: none; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: var(--tc-surface); border: 1px solid var(--tc-accent); border-radius: var(--tc-radius-sm); padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; } .tc-bulk-bar.show { display: flex; } /* Toggle "Meus leads" / "Todos os leads" */ .tc-scope-toggle .btn.active { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; } /* ==== Agenda: modal "Novo Agendamento" (busca de lead) ==== */ .tc-agenda-search-results { max-height: 220px; overflow-y: auto; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sm); box-shadow: var(--tc-shadow); margin-bottom: 0.5rem; } .tc-agenda-search-item { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--tc-border); cursor: pointer; font-size: 0.82rem; color: var(--tc-text); } .tc-agenda-search-item:last-child { border-bottom: none; } .tc-agenda-search-item:hover { background: rgba(59, 130, 246, 0.08); } .tc-agenda-search-item strong { display: block; } .tc-agenda-search-item span { color: var(--tc-text-muted); font-size: 0.72rem; } .tc-agenda-search-empty { padding: 0.6rem; text-align: center; color: var(--tc-text-muted); font-size: 0.78rem; } .tc-agenda-selected-lead { background: rgba(59, 130, 246, 0.1); border: 1px solid var(--tc-accent); border-radius: var(--tc-radius-sm); padding: 0.5rem 0.7rem; font-size: 0.82rem; color: var(--tc-text); text-align: left; } /* ==== Indicadores: mapa Leaflet.js (Brasil, choropleth por UF) ==== */ #tcLeafletMap { width: 100%; height: 420px; border-radius: var(--tc-radius-sm); background: var(--tc-bg); z-index: 1; } #tcLeafletMap .leaflet-tooltip { background: var(--tc-primary-dark); color: #fff; border: none; font-size: 0.78rem; padding: 0.4rem 0.6rem; border-radius: var(--tc-radius-sm); box-shadow: var(--tc-shadow-hover); } #tcLeafletMap .leaflet-tooltip-top:before { border-top-color: var(--tc-primary-dark); } .tc-map-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 420px; color: var(--tc-text-muted); background: var(--tc-bg); border-radius: var(--tc-radius-sm); text-align: center; padding: 1rem; } .tc-map-unavailable i { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.6; } /* ==== Chat: animação de entrada de mensagens + destaque de sala não lida ==== A animação só é aplicada a mensagens inseridas via JS (polling/envio), ver classe .tc-chat-msg-new adicionada em renderBubble()/appendEphemeral() no app.js - as mensagens já carregadas no primeiro load da página (via PHP) não "piscam" todas juntas. */ .tc-chat-msg-new { animation: tcChatMsgIn 0.28s ease; } @keyframes tcChatMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tc-chat-room-item.tc-unread-pulse, .tc-chat-room-item:has(.tc-chat-room-badge) { animation: tcChatRoomPulse 2.4s ease-in-out infinite; } @keyframes tcChatRoomPulse { 0%, 100% { background: transparent; } 50% { background: rgba(59, 130, 246, 0.12); } } .tc-chat-room-badge { animation: tcBadgePop 0.35s ease; } /* Destaque global no link "Chat" da sidebar quando chegam mensagens novas (ver initChatSidebarBadge() em app.js) - some browsers sem suporte a :has() simplesmente não recebem o pulso acima, degradação graciosa. */ #tcChatSidebarLink.tc-unread-pulse { animation: tcChatRoomPulse 1.6s ease-in-out 3; } @keyframes tcBadgePop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Workspace colaborativo */ .tc-workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tc-workspace-toolbar h5{margin:0}.tc-workspace-toolbar small{color:var(--tc-text-muted)} #tcFullCalendar{--fc-border-color:var(--tc-border);--fc-page-bg-color:var(--tc-surface);--fc-neutral-bg-color:var(--tc-bg);--fc-list-event-hover-bg-color:rgba(59,130,246,.08)}.fc .fc-button-primary{background:var(--tc-primary);border-color:var(--tc-primary)} .tc-content-list{overflow:hidden}.tc-content-item{width:100%;display:flex;align-items:center;gap:.7rem;padding:.8rem;border:0;border-bottom:1px solid var(--tc-border);background:var(--tc-surface);color:var(--tc-text);text-align:left}.tc-content-item:hover{background:rgba(59,130,246,.07)}.tc-content-item span{flex:1}.tc-content-item small{display:block;color:var(--tc-text-muted)}#tcQuillEditor{min-height:360px;background:var(--tc-surface);color:var(--tc-text)} .tc-knowledge-crawler{position:relative;overflow:hidden;padding:1rem;border:1px solid rgba(124,58,237,.2);border-radius:1rem;background:linear-gradient(135deg,rgba(124,58,237,.075),rgba(37,99,235,.035) 48%,var(--tc-surface));box-shadow:0 12px 32px rgba(15,23,42,.06)}.tc-knowledge-crawler:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#7c3aed,#2563eb)}.tc-knowledge-crawler-head{display:flex;align-items:flex-start;gap:.75rem}.tc-crawler-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:.8rem;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(79,70,229,.25)}.tc-knowledge-crawler-head small{font-size:.62rem;font-weight:800;letter-spacing:.1em;color:#7c3aed}.tc-knowledge-crawler-head h6{margin:.08rem 0;font-size:1rem}.tc-knowledge-crawler-head p{margin:0;color:var(--tc-text-muted);font-size:.78rem}.tc-crawler-form{display:flex;gap:.5rem;margin:.9rem 0 .55rem}.tc-crawler-form .form-control{border-radius:.7rem}.tc-crawler-form .btn{white-space:nowrap}.tc-crawler-security{font-size:.72rem;color:var(--tc-text-muted);padding:.5rem .65rem;border-radius:.55rem;background:rgba(34,197,94,.07)}.tc-crawler-security i{color:#16a34a;margin-right:.3rem}.tc-crawler-sources{display:grid;gap:.5rem;margin-top:.8rem}.tc-crawler-source{display:flex;align-items:center;gap:.75rem;padding:.7rem;border:1px solid var(--tc-border);border-radius:.75rem;background:var(--tc-surface)}.tc-crawler-source-main{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.12rem .5rem;flex:1;min-width:0}.tc-crawler-source-main>a,.tc-crawler-source-main>small,.tc-crawler-source-main>em{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}.tc-crawler-source-main>a{color:var(--tc-accent)}.tc-crawler-source-main>small{color:var(--tc-text-muted)}.tc-crawler-source-main>em{color:#dc2626}.tc-source-status{grid-row:1/4;align-self:start;padding:.25rem .42rem;border-radius:999px;background:#e2e8f0;color:#475569;font-size:.58rem;font-weight:800;text-transform:uppercase}.tc-source-status.analisado{background:#dbeafe;color:#1d4ed8}.tc-source-status.publicado{background:#dcfce7;color:#15803d}.tc-source-status.erro{background:#fee2e2;color:#b91c1c}.tc-crawler-actions{display:flex;gap:.35rem}.tc-crawler-empty{text-align:center;padding:1rem;color:var(--tc-text-muted);font-size:.78rem}.tc-crawler-preview{max-height:280px;overflow:auto;white-space:pre-wrap;padding:.8rem;border:1px solid var(--tc-border);border-radius:.6rem;background:var(--tc-bg);font-size:.78rem;line-height:1.5}@media(max-width:767.98px){.tc-crawler-form,.tc-crawler-source{align-items:stretch;flex-direction:column}.tc-crawler-actions{display:grid;grid-template-columns:1fr 1fr auto}.tc-crawler-actions .btn{width:100%}} .tc-board-meta{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:.6rem;margin-bottom:.6rem}.tc-whiteboard{height:650px;position:relative;overflow:auto;border:1px solid var(--tc-border);border-radius:1rem;background-color:#f8fafc;background-image:radial-gradient(#cbd5e1 1px,transparent 1px);background-size:22px 22px}.tc-board-grid{width:1800px;height:1100px}.tc-board-node{position:absolute;width:190px;min-height:100px;padding:1rem;background:#fef3c7;border:1px solid #f59e0b;border-radius:.6rem;box-shadow:0 8px 20px rgba(15,23,42,.12);cursor:move;color:#422006}.tc-board-node.decision{background:#dbeafe;border-color:#3b82f6;border-radius:2rem;color:#172554} .tc-ai-fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border:0;border-radius:50%;z-index:1050;background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;font-size:1.25rem;box-shadow:0 12px 28px rgba(79,70,229,.38)}.tc-ai-panel{position:fixed;right:24px;bottom:92px;width:min(390px,calc(100vw - 32px));height:540px;z-index:1051;display:none;flex-direction:column;background:var(--tc-surface);border:1px solid var(--tc-border);border-radius:1rem;box-shadow:0 24px 60px rgba(15,23,42,.28);overflow:hidden}.tc-ai-panel.show{display:flex}.tc-ai-panel header{display:flex;justify-content:space-between;padding:1rem;background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;font-weight:700}.tc-ai-panel header button{border:0;background:transparent;color:white;font-size:1.4rem}.tc-ai-messages{flex:1;overflow:auto;padding:1rem}.tc-ai-answer,.tc-ai-question{padding:.7rem .85rem;border-radius:.75rem;margin-bottom:.65rem;white-space:pre-wrap;font-size:.85rem}.tc-ai-answer{background:var(--tc-bg)}.tc-ai-question{background:#2563eb;color:white;margin-left:15%}.tc-ai-panel form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--tc-border)}.tc-ai-panel textarea{flex:1;resize:none;border:1px solid var(--tc-border);border-radius:.6rem;padding:.6rem;background:var(--tc-bg);color:var(--tc-text)}.tc-ai-panel form button{width:40px;border:0;border-radius:.6rem;background:#2563eb;color:white} @media(max-width:767px){.tc-workspace-toolbar{align-items:flex-start;flex-direction:column}.tc-board-meta{grid-template-columns:1fr}.tc-whiteboard{height:520px}.tc-ai-fab{right:16px;bottom:16px}.tc-ai-panel{right:16px;bottom:82px}} .tc-personalizable-widgets .tc-kpi-card{cursor:grab}.tc-personalizable-widgets .tc-kpi-card:active{cursor:grabbing}.tc-widget-ghost{opacity:.35} .tc-lead-picker{position:relative}.tc-lookup-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:1090;max-height:230px;overflow:auto;background:var(--tc-surface);border:1px solid var(--tc-border);border-radius:.55rem;box-shadow:var(--tc-shadow-hover);padding:.25rem}.tc-lookup-results.show{display:block}.tc-lookup-results button{display:block;width:100%;border:0;border-radius:.4rem;background:transparent;color:var(--tc-text);padding:.5rem;text-align:left}.tc-lookup-results button:hover{background:rgba(59,130,246,.1)}.tc-lookup-results small{display:block;color:var(--tc-text-muted)}.tc-lookup-empty{padding:.6rem;color:var(--tc-text-muted);font-size:.8rem} .tc-attachment-box{padding:.8rem;border:1px dashed var(--tc-border);border-radius:.65rem}.tc-attachment{display:inline-flex;align-items:center;gap:.4rem;margin:.25rem;padding:.4rem .6rem;border-radius:.45rem;background:var(--tc-bg);text-decoration:none;font-size:.8rem}.tc-board-team{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.7rem;background:var(--tc-surface);border:1px solid var(--tc-border);border-radius:.65rem}.tc-board-team label{font-size:.8rem}.tc-board-node.process{background:#dcfce7;border-color:#22c55e;color:#14532d;border-radius:.55rem;min-height:75px} .tc-board-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;flex-wrap:wrap}.tc-board-toolbar .btn-light{width:36px;height:36px;padding:0;border:1px solid var(--tc-border);background:var(--tc-surface);color:var(--tc-text)}#tcBoardZoomLabel{min-width:44px;text-align:center;font-size:.75rem;font-weight:700;color:var(--tc-text-muted)}.tc-board-node{transition:box-shadow .15s,border-color .15s;outline:none}.tc-board-node:hover{box-shadow:0 14px 30px rgba(15,23,42,.18)}.tc-board-node.selected{border-color:#7c3aed!important;box-shadow:0 0 0 3px rgba(124,58,237,.22),0 16px 34px rgba(15,23,42,.22)} .tc-board-lines{position:absolute;inset:0;width:1800px;height:1100px;pointer-events:none;overflow:visible;z-index:1}.tc-board-lines line{stroke:#6366f1;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 2px 2px rgba(15,23,42,.18))}.tc-board-lines marker path{fill:#6366f1}.tc-board-node{z-index:2}#tcBoardConnect.active{background:#4f46e5;color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.2)} .tc-ai-panel{border-radius:1.25rem!important;box-shadow:0 28px 80px rgba(30,41,59,.34)!important}.tc-ai-panel header{align-items:center;padding:.85rem 1rem!important}.tc-ai-panel header small{display:block;font-size:.66rem;font-weight:500;opacity:.82;margin-top:.1rem}.tc-ai-quick{display:flex;gap:.35rem;overflow-x:auto;padding:.65rem .75rem;border-bottom:1px solid var(--tc-border);background:linear-gradient(180deg,rgba(124,58,237,.07),transparent)}.tc-ai-quick button{white-space:nowrap;border:1px solid rgba(124,58,237,.22);border-radius:999px;background:var(--tc-surface);color:var(--tc-text);padding:.35rem .62rem;font-size:.72rem}.tc-ai-quick button:hover{background:#7c3aed;color:#fff}.tc-ai-answer{display:flex;align-items:flex-start;gap:.55rem;border:1px solid var(--tc-border);border-bottom-left-radius:.2rem!important}.tc-ai-avatar{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}.tc-ai-answer>div{min-width:0}.tc-ai-sources{display:block;margin-top:.55rem;padding-top:.45rem;border-top:1px dashed var(--tc-border);color:var(--tc-text-muted);font-size:.68rem}.tc-ai-loading>div{display:flex;gap:4px;padding-top:10px}.tc-ai-loading>div>span{width:6px;height:6px;border-radius:50%;background:#7c3aed;animation:tcAiDot 1s infinite alternate}.tc-ai-loading>div>span:nth-child(2){animation-delay:.2s}.tc-ai-loading>div>span:nth-child(3){animation-delay:.4s}@keyframes tcAiDot{to{opacity:.25;transform:translateY(-4px)}} .tc-chat-app{border:1px solid rgba(99,102,241,.16);box-shadow:0 24px 65px rgba(15,23,42,.10)}.tc-chat-rooms{background:linear-gradient(180deg,rgba(59,130,246,.05),transparent 35%)}.tc-chat-room-item{margin:.18rem .45rem;border-radius:.8rem;border-bottom:0!important;transition:transform .15s,background .15s}.tc-chat-room-item:hover{transform:translateX(2px)}.tc-chat-room-item.active{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(124,58,237,.10))}.tc-chat-header{background:rgba(255,255,255,.65);backdrop-filter:blur(14px)}body.dark-mode .tc-chat-header{background:rgba(15,23,42,.72)}.tc-chat-composer{background:var(--tc-surface)}.tc-chat-composer textarea{border-radius:.85rem!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.04)} .tc-flow-builder{position:sticky;top:84px;overflow:hidden}.tc-flow-builder:before{content:"";display:block;height:4px;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899)}.tc-flow-node{display:flex;align-items:center;gap:.7rem;padding:.75rem;border:1px solid var(--tc-border);border-radius:.8rem;background:var(--tc-bg)}.tc-flow-node>i{display:grid;place-items:center;width:36px;height:36px;border-radius:.65rem;color:#fff}.tc-flow-node.trigger>i{background:#f59e0b}.tc-flow-node.action>i{background:#7c3aed}.tc-flow-node small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.08em;color:var(--tc-text-muted)}.tc-flow-node strong{font-size:.82rem}.tc-flow-connector{width:2px;height:22px;margin:auto;background:linear-gradient(#f59e0b,#7c3aed)}.tc-flow-actions{display:grid;gap:.35rem}.tc-flow-actions label{padding:.48rem .6rem;border:1px solid var(--tc-border);border-radius:.6rem;background:var(--tc-surface);font-size:.78rem}.tc-flow-actions label:has(input:checked){border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.07)}.tc-flow-actions span i{color:#7c3aed;margin-right:.3rem}.tc-flow-preview{display:flex;flex-direction:column;align-items:center;margin-top:.7rem}.tc-flow-preview span{display:flex;flex-direction:column;align-items:center;font-size:.68rem;color:var(--tc-text-muted)}.tc-flow-preview i{font-size:.58rem;color:#7c3aed;margin:.12rem} .tc-ai-rich{line-height:1.55}.tc-ai-rich h4,.tc-ai-rich h5,.tc-ai-rich h6{font-weight:750;margin:.15rem 0 .4rem}.tc-ai-rich ul{padding-left:1.15rem;margin:.35rem 0}.tc-ai-rich li{margin:.15rem 0}.tc-ai-rich strong{color:#5b21b6}[data-theme="dark"] .tc-ai-rich strong{color:#c4b5fd} /* Chat 2026: navegação, leitura e composição redesenhadas */ .tc-chat-app{height:calc(100vh - var(--tc-topbar-height) - 2.3rem);min-height:620px;border-radius:1.35rem!important;background:var(--tc-surface);overflow:hidden}.tc-chat-rooms{width:320px!important;border-right:1px solid rgba(148,163,184,.18)!important}.tc-chat-rooms-header{padding:1.15rem 1rem .7rem!important}.tc-chat-rooms-header h6{font-size:1.05rem;font-weight:800;letter-spacing:-.025em}.tc-chat-rooms-header h6:before{content:"●";color:#22c55e;font-size:.65rem;margin-right:.45rem}.tc-chat-search{padding:.45rem .8rem!important}.tc-chat-search .input-group{background:var(--tc-bg);border:1px solid var(--tc-border);border-radius:.8rem;overflow:hidden}.tc-chat-search .input-group-text,.tc-chat-search .form-control{border:0;background:transparent!important}.tc-chat-tabs{gap:.25rem;padding:.5rem .8rem!important;border:0!important}.tc-chat-tabs .nav-item{flex:1}.tc-chat-tabs .nav-link{width:100%;border-radius:.65rem!important;padding:.5rem .25rem!important;font-weight:650}.tc-chat-tabs .nav-link.active{border:0!important;background:rgba(79,70,229,.1)!important}.tc-chat-room-list{padding:.25rem .45rem .8rem!important}.tc-chat-room-item{padding:.72rem!important;margin:.12rem 0!important}.tc-chat-room-item.active{color:var(--tc-text)!important;box-shadow:inset 3px 0 #6366f1}.tc-chat-room-item.active .tc-chat-room-preview{color:var(--tc-text-muted)!important}.tc-chat-room-avatar{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:14px!important;box-shadow:0 5px 14px rgba(79,70,229,.2)}.tc-chat-room-name{font-size:.88rem!important;font-weight:720!important}.tc-chat-room-preview{margin-top:.12rem;font-size:.72rem!important}.tc-chat-header{min-height:70px;padding:.8rem 1.15rem!important;box-shadow:0 1px 0 rgba(148,163,184,.16);z-index:2}.tc-chat-header-avatar{width:44px!important;height:44px!important;border-radius:14px!important}.tc-chat-header-title{font-size:1rem!important;letter-spacing:-.015em}.tc-chat-header-meta:before{content:"●";color:#22c55e;font-size:.55rem;margin-right:.35rem}.tc-chat-messages{padding:1.35rem clamp(1rem,4vw,3.5rem)!important}.tc-chat-bubble-avatar{width:32px!important;height:32px!important;flex-basis:32px!important}.tc-chat-composer{padding:.7rem clamp(.8rem,3vw,2rem) 1rem!important;box-shadow:0 -12px 30px rgba(15,23,42,.035)}.tc-chat-compose-tools{overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}.tc-chat-tool{width:auto!important;height:auto!important;flex:0 0 auto!important;padding:.32rem .62rem!important;border-radius:.55rem!important;font-weight:600}.tc-chat-composer textarea{min-height:46px;padding:.72rem .85rem!important;font-size:.9rem!important}.tc-chat-composer>button{width:46px!important;height:46px!important;box-shadow:0 7px 18px rgba(37,99,235,.28)} @media(max-width:991.98px){.tc-chat-rooms{width:285px!important}.tc-chat-messages{padding:1rem!important}.tc-chat-bubble-row{max-width:85%!important}}@media(max-width:767.98px){.tc-chat-app{height:calc(100vh - var(--tc-topbar-height) - 1rem);min-height:520px;border-radius:.9rem!important}.tc-chat-rooms{width:100%!important}.tc-chat-bubble-row{max-width:94%!important}.tc-chat-compose-tools{max-width:calc(100vw - 90px)}} .tc-chat-system-msg.tc-chat-ephemeral{align-self:stretch;max-width:720px;margin:.75rem auto;padding:.85rem 1rem;border:1px solid rgba(124,58,237,.22);border-radius:1rem;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(37,99,235,.06));color:var(--tc-text);text-align:left}.tc-chat-ai-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem;color:#6d28d9}.tc-chat-ai-head span{margin-left:auto;font-size:.62rem;font-weight:500;color:var(--tc-text-muted)}.tc-chat-ai-body{font-size:.82rem;line-height:1.55}.tc-chat-ai-item{display:flex;gap:.45rem;margin:.25rem 0}.tc-chat-ai-item i{color:#22c55e;margin-top:.2rem}.tc-chat-ai-body strong{color:#5b21b6}[data-theme="dark"] .tc-chat-ai-head,[data-theme="dark"] .tc-chat-ai-body strong{color:#c4b5fd} #tcLeafletMap{height:clamp(340px,52vw,500px)!important;max-width:100%;overflow:hidden}.leaflet-container{width:100%;max-width:100%}.tc-card-body:has(#tcLeafletMap){overflow:hidden}@media(max-width:991.98px){#tcLeafletMap{height:420px!important}}@media(max-width:575.98px){#tcLeafletMap{height:340px!important}.tc-heatmap-table{font-size:.62rem}.tc-heatmap-table th,.tc-heatmap-table td{min-width:24px}} .tc-crawler-form{display:grid!important;grid-template-columns:2fr 1fr 1fr auto auto;align-items:center}.tc-crawler-ai{display:flex;align-items:center;gap:.35rem;white-space:nowrap;margin:0;padding:.55rem .65rem;border:1px solid var(--tc-border);border-radius:.65rem;background:var(--tc-surface);font-size:.72rem}.tc-crawler-ai .form-check-input{margin:0}@media(max-width:991.98px){.tc-crawler-form{grid-template-columns:1fr 1fr!important}.tc-crawler-url{grid-column:1/-1}.tc-crawler-form .btn{width:100%}}@media(max-width:767.98px){.tc-crawler-form{display:flex!important;flex-direction:column}.tc-crawler-form>*{width:100%}} .tc-knowledge-crawler{padding:0!important;background:var(--tc-surface)!important}.tc-knowledge-crawler:before{width:100%!important;height:4px!important;inset:0 0 auto!important}.tc-knowledge-crawler-head{padding:1.1rem 1.15rem .65rem}.tc-crawler-form{display:block!important;margin:.4rem 1.15rem .65rem!important}.tc-crawler-primary{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:.5rem}.tc-crawler-url-wrap{position:relative}.tc-crawler-url-wrap>i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:#7c3aed;z-index:1}.tc-crawler-url-wrap input{height:44px;padding-left:2.35rem!important;border-color:rgba(124,58,237,.25);background:var(--tc-bg)}.tc-crawler-primary>.btn{height:44px}.tc-crawler-options{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:.65rem;margin-top:.65rem;padding:.8rem;border:1px solid var(--tc-border);border-radius:.8rem;background:var(--tc-bg)}.tc-crawler-options>label>span{display:block;margin-bottom:.25rem;font-size:.68rem;font-weight:700;color:var(--tc-text-muted)}.tc-crawler-options .tc-crawler-ai{align-items:center;padding:.55rem .7rem!important;background:var(--tc-surface)}.tc-crawler-options .tc-crawler-ai>span{margin:0}.tc-crawler-options .tc-crawler-ai strong,.tc-crawler-options .tc-crawler-ai small{display:block}.tc-crawler-options .tc-crawler-ai small{margin-top:.12rem;font-weight:400;color:var(--tc-text-muted)}.tc-crawler-security{margin:0 1.15rem .85rem}.tc-crawler-sources{margin:0!important;padding:.8rem 1.15rem 1.1rem;border-top:1px solid var(--tc-border);background:rgba(148,163,184,.035)}.tc-crawler-source{padding:.8rem .9rem!important;box-shadow:0 3px 10px rgba(15,23,42,.035)}@media(max-width:900px){.tc-crawler-primary{grid-template-columns:1fr auto}.tc-crawler-primary>.btn:last-child{grid-column:1/-1}.tc-crawler-options{grid-template-columns:1fr 1fr}.tc-crawler-options .tc-crawler-ai{grid-column:1/-1}}@media(max-width:575px){.tc-crawler-primary,.tc-crawler-options{display:flex;flex-direction:column}.tc-crawler-primary>.btn:last-child{grid-column:auto}.tc-knowledge-crawler-head{padding-top:1.25rem}.tc-crawler-actions{grid-template-columns:1fr!important}.tc-crawler-actions .btn{width:100%}} /* Atendimento WhatsApp (Evolution/EvoAI CRM) - inbox estilo "Zap Responder" */ .tc-evo-app{position:relative} .tc-evo-room-item .tc-chat-room-info{min-width:0} .tc-evo-label-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem} .tc-evo-label-chip{font-size:.62rem;font-weight:600;padding:.12rem .5rem;border-radius:999px;background:rgba(99,102,241,.12);color:#6366f1} [data-theme="dark"] .tc-evo-label-chip{background:rgba(129,140,248,.18);color:#c7d2fe} .tc-evo-room-assignee{font-size:.68rem;color:var(--tc-text-muted);margin-top:.2rem;display:flex;align-items:center;gap:.3rem} .tc-evo-priority-urgent{color:#dc2626}.tc-evo-priority-high{color:#d97706}.tc-evo-priority-medium{color:#3b82f6}.tc-evo-priority-low{color:#94a3b8} .tc-evo-private-toggle{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.72rem} .tc-evo-private-toggle input{margin:0} .tc-chat-bubble-row.tc-evo-note .tc-chat-bubble{background:rgba(217,119,6,.12);border:1px dashed rgba(217,119,6,.4)} .tc-chat-bubble-row.tc-evo-note .tc-chat-bubble-author{color:#b45309} .tc-breadcrumb{margin:-.15rem 0 1.05rem}.tc-breadcrumb ol{display:flex;align-items:center;gap:.42rem;list-style:none;padding:0;margin:0;color:var(--tc-text-muted);font-size:.78rem;white-space:nowrap;overflow:auto;scrollbar-width:none}.tc-breadcrumb li{display:flex;align-items:center;gap:.42rem}.tc-breadcrumb li+li:before{content:"/";color:#94a3b8}.tc-breadcrumb a{color:inherit;text-decoration:none}.tc-breadcrumb a:hover{color:#4f46e5}.tc-breadcrumb .active{color:var(--tc-text);font-weight:700;overflow:hidden;text-overflow:ellipsis;max-width:34rem}@media(max-width:767.98px){.tc-breadcrumb{margin-bottom:.75rem}.tc-breadcrumb .active{max-width:12rem}} .tc-evo-info{width:300px;flex:0 0 300px;border-left:1px solid var(--tc-border);background:var(--tc-surface);display:flex;flex-direction:column;overflow-y:auto} .tc-evo-info-header{padding:.9rem 1rem;border-bottom:1px solid var(--tc-border)} .tc-evo-info-section{padding:.9rem 1rem;border-bottom:1px solid var(--tc-border)} .tc-evo-lead-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .65rem;border-radius:.6rem;background:rgba(34,197,94,.12);color:#16a34a;text-decoration:none;font-weight:600;font-size:.8rem} .tc-evo-lead-result{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:transparent;padding:.45rem .5rem;border-radius:.45rem;text-align:left} .tc-evo-lead-result:hover{background:rgba(59,130,246,.1)} .tc-evo-lead-result span{font-size:.72rem;color:var(--tc-text-muted)} @media(max-width:991.98px){ .tc-evo-info{position:absolute;top:0;right:0;bottom:0;width:280px;z-index:5;transform:translateX(100%);transition:transform .2s ease;box-shadow:var(--tc-shadow-hover)} .tc-evo-info.tc-evo-info-visible{transform:translateX(0)} } .tc-evo-status-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.25rem} .tc-evo-status-on{background:#16a34a} .tc-evo-status-off{background:#dc2626} .tc-evo-avatar-photo{background-size:cover;background-position:center;background-color:var(--tc-bg)} .tc-evo-stats{display:flex;gap:.6rem;padding:.5rem 0 .3rem} .tc-evo-stats>div{flex:1;text-align:center;padding:.4rem .3rem;border-radius:.5rem;background:var(--tc-bg);border:1px solid var(--tc-border)} .tc-evo-stats strong{display:block;font-size:.95rem;line-height:1.2} .tc-evo-stats span{display:block;font-size:.6rem;color:var(--tc-text-muted);text-transform:uppercase;letter-spacing:.02em} .tc-evo-label-suggestions{display:flex;flex-wrap:wrap;gap:.3rem} .tc-evo-label-suggest{font-size:.65rem;padding:.1rem .5rem;border-radius:999px;background:transparent;border:1px solid;cursor:pointer} .tc-evo-label-suggest:hover{opacity:.75} /* Bootstrap .collapse.show usa display:block por padrão, o que quebra dentro de — força table-row */ tr.collapse.show { display: table-row; } .tc-notification-item .flex-grow-1 { min-width: 0; } /* ==================== Construtor de Formulários ==================== */ .tc-form-palette-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tc-text-muted); margin-bottom: 0.4rem; } .tc-form-palette, .tc-form-canvas { min-height: 60px; } .tc-form-palette-item { display: flex; align-items: center; cursor: grab; font-size: 0.85rem; background: var(--tc-bg); border-color: var(--tc-border); } .tc-form-palette-item:active { cursor: grabbing; } .tc-form-canvas-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0.7rem; background: var(--tc-surface); border-color: var(--tc-border); } .tc-form-canvas-item .fa-grip-vertical { cursor: grab; margin-top: 0.5rem; color: var(--tc-text-muted); } .tc-form-canvas-item .fa-grip-vertical:active { cursor: grabbing; } .tc-form-canvas-item.sortable-ghost { opacity: 0.4; } .tc-form-link-input { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.76rem; } /* Página pública do formulário: layout autônomo (sem sidebar/topbar) */ .tc-public-form-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--tc-primary, #1e3a5f), var(--tc-indigo, #4f46e5)); padding: 2rem 1rem; } .tc-public-form-card { width: 100%; max-width: 480px; background: #fff; border-radius: 1.1rem; box-shadow: 0 20px 50px rgba(0,0,0,0.25); padding: 2rem 1.75rem; color: #1f2937; } .tc-public-form-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; } .tc-public-form-brand .badge-logo { width: 40px; height: 40px; border-radius: 0.6rem; background: linear-gradient(135deg, #3b82f6, #4f46e5); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .tc-public-form-consultant { display: flex; align-items: center; gap: 0.6rem; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 0.7rem; padding: 0.65rem 0.85rem; margin-bottom: 1.2rem; font-size: 0.85rem; color: #1e3a5f; } .tc-public-form-consultant i { color: #3b82f6; } /* ==================== Formulário público: temas, etapas, animações ==================== */ /* Tema de cor (definido pelo construtor, aplicado via data-form-theme no ) */ html[data-form-theme] { --form-accent-1: #3b82f6; --form-accent-2: #4f46e5; } html[data-form-theme="whatsapp"] { --form-accent-1: #16a34a; --form-accent-2: #15803d; } html[data-form-theme="azul"] { --form-accent-1: #2563eb; --form-accent-2: #1d4ed8; } html[data-form-theme="roxo"] { --form-accent-1: #7c3aed; --form-accent-2: #6d28d9; } html[data-form-theme="grafite"] { --form-accent-1: #475569; --form-accent-2: #334155; } html[data-form-theme="rosa"] { --form-accent-1: #db2777; --form-accent-2: #be185d; } html[data-form-theme="esmeralda"] { --form-accent-1: #059669; --form-accent-2: #047857; } html[data-form-theme="laranja"] { --form-accent-1: #ea580c; --form-accent-2: #c2410c; } html[data-form-font="arredondada"] body { font-family: ui-rounded, "Segoe UI Rounded", "SF Pro Rounded", "Segoe UI", sans-serif; } html[data-form-font="serifa"] body { font-family: Georgia, "Times New Roman", Times, serif; } html[data-form-font="mono"] body { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; } /* Imagem de capa (topo do card) e rodapé personalizado */ .tc-public-form-card.tc-has-cover { padding-top: 0; overflow: hidden; } .tc-public-form-cover { height: 140px; background-size: cover; background-position: center; margin: 0 -1.75rem 1.2rem; border-radius: 1.1rem 1.1rem 0 0; } .tc-public-form-footer { text-align: center; font-size: 0.7rem; color: #9ca3af; margin: 0.6rem 0 0; } @media (max-width: 575.98px) { .tc-public-form-cover { margin: 0 -1.25rem 1.2rem; border-radius: 0; height: 160px; } } .tc-public-form-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--form-accent-1, #1e3a5f), var(--form-accent-2, #4f46e5)); padding: 2rem 1rem; } .tc-public-form-card { width: 100%; max-width: 480px; background: #fff; border-radius: 1.1rem; box-shadow: 0 20px 50px rgba(0,0,0,0.25); padding: 2rem 1.75rem; color: #1f2937; } .tc-public-form-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; } .tc-public-form-brand .badge-logo { width: 40px; height: 40px; border-radius: 0.6rem; background: linear-gradient(135deg, var(--form-accent-1, #3b82f6), var(--form-accent-2, #4f46e5)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .tc-public-form-consultant { display: flex; align-items: center; gap: 0.6rem; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 0.7rem; padding: 0.65rem 0.85rem; margin-bottom: 1.2rem; font-size: 0.85rem; color: #1e3a5f; } .tc-public-form-consultant i { color: var(--form-accent-1, #3b82f6); } .tc-form-field-icon { color: var(--form-accent-1, #3b82f6); width: 1.1rem; text-align: center; } .tc-form-input { padding: 0.65rem 0.8rem; border-radius: 0.6rem; border-color: #e5e7eb; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tc-form-input:focus { border-color: var(--form-accent-1, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent-1, #3b82f6) 18%, transparent); } .tc-form-btn-accent { background: linear-gradient(135deg, var(--form-accent-1, #3b82f6), var(--form-accent-2, #4f46e5)); color: #fff; border: none; padding: 0.65rem 1.4rem; border-radius: 0.6rem; font-weight: 600; transition: transform 0.12s ease, box-shadow 0.12s ease; } .tc-form-btn-accent:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--form-accent-1, #3b82f6) 35%, transparent); } .tc-form-btn-accent:active { transform: translateY(0); } /* Barra de progresso (multi-etapas) */ .tc-form-progress { margin-bottom: 1.2rem; } .tc-form-progress-bar { height: 6px; background: #eef0f3; border-radius: 999px; overflow: hidden; } .tc-form-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--form-accent-1, #3b82f6), var(--form-accent-2, #4f46e5)); transition: width 0.35s cubic-bezier(.4,0,.2,1); } .tc-form-progress-label { font-size: 0.68rem; color: #9ca3af; margin-top: 0.35rem; text-align: right; } /* Etapas: sem JS, todas visíveis (form continua funcional); com JS, .tc-form-step-js some as não-ativas */ .tc-form-step-js { display: none; } .tc-form-step-js.active { display: block; } .tc-form-step-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; } @keyframes tcFormFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tc-form-fade-in { animation: tcFormFadeIn 0.45s ease both; } @keyframes tcFormSlideInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes tcFormSlideInLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } .tc-form-slide-in-right { animation: tcFormSlideInRight 0.3s ease both; } .tc-form-slide-in-left { animation: tcFormSlideInLeft 0.3s ease both; } @keyframes tcFormShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .tc-form-shake { animation: tcFormShake 0.5s; } @media (prefers-reduced-motion: reduce) { .tc-form-fade-in, .tc-form-slide-in-right, .tc-form-slide-in-left, .tc-form-shake { animation: none; } } /* Mobile-first: em telas pequenas o card ocupa a tela quase inteira, sem bordas arredondadas "flutuando" — sensação de app nativo, não de janela flutuante. */ @media (max-width: 575.98px) { .tc-public-form-page { padding: 0; align-items: stretch; } .tc-public-form-card { max-width: none; min-height: 100vh; min-height: 100dvh; border-radius: 0; padding: 1.5rem 1.25rem 2rem; box-shadow: none; } .tc-form-step-actions { position: sticky; bottom: 0; background: #fff; padding: 0.75rem 0; margin: 0.5rem -1.25rem -0.5rem; padding-left: 1.25rem; padding-right: 1.25rem; box-shadow: 0 -8px 16px -8px rgba(0,0,0,0.08); } } .tc-form-theme-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tc-form-theme-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: inline-block; border: 2px solid var(--tc-border); position: relative; } .tc-form-theme-swatch:has(input:checked) { border-color: var(--tc-text); box-shadow: 0 0 0 2px var(--tc-surface), 0 0 0 4px var(--tc-accent); } .tc-form-theme-swatch.active { border-color: var(--tc-text); box-shadow: 0 0 0 2px var(--tc-surface), 0 0 0 4px var(--tc-accent); } .tc-form-font-preview { font-size: 0.95rem; padding: 0.5rem 0.7rem; border: 1px dashed var(--tc-border); border-radius: 0.5rem; color: var(--tc-text-muted); margin: 0; } .tc-form-font-preview[data-font="arredondada"] { font-family: ui-rounded, "Segoe UI Rounded", "SF Pro Rounded", "Segoe UI", sans-serif; } .tc-form-font-preview[data-font="serifa"] { font-family: Georgia, "Times New Roman", Times, serif; } .tc-form-font-preview[data-font="mono"] { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; } /* Automações v2 ------------------------------------------------------- */ .tc-automation-page { --auto-purple: #6547e8; --auto-ink: #24304a; --auto-soft: #f6f4ff; --auto-line: #e7e5f1; color: var(--auto-ink); } .tc-automation-heading { margin-bottom: .8rem; } .tc-automation-eyebrow { color: var(--auto-purple); font-size: .66rem; font-weight: 800; letter-spacing: .08em; margin-bottom: .2rem; } .tc-automation-heading h5 { margin-bottom: .15rem; } .tc-automation-guide { align-items: center; background: linear-gradient(100deg, #f7f5ff, #fff); border: 1px solid var(--auto-line); border-radius: .8rem; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; padding: .68rem 1rem; } .tc-automation-guide span { align-items: center; color: #5c6073; display: inline-flex; font-size: .78rem; font-weight: 600; gap: .38rem; } .tc-automation-guide b { align-items: center; background: #e8e3ff; border-radius: 50%; color: var(--auto-purple); display: inline-flex; font-size: .67rem; height: 20px; justify-content: center; width: 20px; } .tc-automation-guide > i { color: #b0a9d9; font-size: .7rem; } .tc-automation-guide small { border-left: 1px solid var(--auto-line); color: #657086; font-size: .71rem; margin-left: auto; padding-left: .9rem; } .tc-automation-library .tc-card-body, .tc-automation-builder .tc-card-body { padding: 1.2rem; } .tc-automation-library-head, .tc-automation-monitor-head { align-items: start; display: flex; gap: .75rem; justify-content: space-between; } .tc-automation-library-head h6, .tc-automation-monitor h6, .tc-automation-builder h6 { color: var(--auto-ink); font-weight: 750; margin: 0 0 .15rem; } .tc-automation-library-head p { color: var(--tc-text-muted, #697386); font-size: .76rem; margin: 0; } .tc-automation-search { align-items: center; border: 1px solid var(--auto-line); border-radius: .45rem; display: flex; gap: .4rem; max-width: 168px; padding: .36rem .55rem; } .tc-automation-search i { color: #8e8aa6; font-size: .7rem; } .tc-automation-search input { background: transparent; border: 0; font-size: .74rem; min-width: 0; outline: 0; width: 100%; } .tc-automation-filter { border-bottom: 1px solid var(--auto-line); display: flex; gap: 1.1rem; margin: 1rem 0 .1rem; } .tc-automation-filter button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #7a8090; font-size: .75rem; font-weight: 700; padding: .58rem 0; } .tc-automation-filter button.active { border-bottom-color: var(--auto-purple); color: var(--auto-purple); } .tc-automation-filter span { background: #eeeafa; border-radius: 999px; font-size: .63rem; margin-left: .18rem; padding: .1rem .34rem; } .tc-automation-flow { align-items: flex-start; border-bottom: 1px solid #f0eff5; display: flex; gap: .65rem; padding: .85rem .05rem; transition: background .18s ease; } .tc-automation-flow:hover { background: #fbfaff; } .tc-automation-flow:last-child { border-bottom: 0; } .tc-automation-flow-icon { align-items: center; background: #eef0f5; border-radius: .55rem; color: #747a88; display: flex; flex: 0 0 31px; height: 31px; justify-content: center; margin-top: .15rem; } .tc-automation-flow-icon.active { background: #e9e4ff; color: var(--auto-purple); }.tc-automation-flow-icon.template { background: #e5f3ff; color: #2278c8; } .tc-automation-flow-main { flex: 1; min-width: 0; }.tc-automation-flow-main strong { font-size: .84rem; }.tc-automation-flow-main p { color: #747b8a; font-size: .73rem; line-height: 1.3; margin: .18rem 0 .38rem; } .tc-automation-chip { border-radius: 999px; font-size: .61rem; font-weight: 800; padding: .16rem .42rem; }.tc-automation-chip.success { background: #dcf7e8; color: #198754; }.tc-automation-chip.muted { background: #edf0f3; color: #737b89; }.tc-automation-chip.neutral { background: #e8f4ff; color: #1c75b8; } .tc-automation-path { align-items: center; color: #707789; display: flex; font-size: .67rem; gap: .35rem; }.tc-automation-path span { background: #f5f5fa; border-radius: .25rem; padding: .16rem .32rem; }.tc-automation-path span i { color: #ff9d00; }.tc-automation-path > i { color: #a9aebc; font-size: .55rem; } .tc-automation-action-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }.tc-automation-action-tags span { background: #faf9ff; border: 1px solid #ece9f9; border-radius: .25rem; color: #676177; font-size: .61rem; padding: .15rem .3rem; }.tc-automation-action-tags i { color: var(--auto-purple); } .tc-automation-flow-health { color: #8a91a0; display: block; font-size: .64rem; margin-top: .42rem; }.tc-automation-flow-health i { color: #5190e5; }.tc-automation-flow-controls { display: flex; flex: 0 0 auto; gap: .18rem; }.tc-automation-flow-controls .btn { color: #697080; padding: .27rem .45rem; } .tc-automation-empty { align-items: center; color: #8b91a0; display: flex; flex-direction: column; font-size: .77rem; gap: .3rem; padding: 2.2rem 1rem; text-align: center; }.tc-automation-empty > i { color: #a08af1; font-size: 1.35rem; }.tc-automation-empty strong { color: #626878; }.tc-automation-empty span { max-width: 260px; } .tc-automation-monitor-head { align-items: center; margin-bottom: .75rem; }.tc-automation-monitor-head small, .tc-automation-monitor table small { color: #8b91a0; font-size: .68rem; }.tc-automation-monitor-head > span { color: #7d73a2; font-size: .7rem; }.tc-automation-monitor th { color: #858b99; font-size: .62rem; text-transform: uppercase; }.tc-automation-monitor td { color: #6b7280; font-size: .7rem; vertical-align: middle; }.tc-automation-monitor td strong, .tc-automation-monitor td small { display: block; }.tc-automation-monitor td strong { color: #4f5665; font-size: .72rem; }.tc-automation-run-status { border-radius: 99px; font-size: .6rem; font-weight: 800; padding: .18rem .4rem; }.tc-automation-run-status.sucesso { background: #dff6e9; color: #168452; }.tc-automation-run-status.parcial { background: #fff0cd; color: #a16800; }.tc-automation-run-status.erro { background: #ffe2e4; color: #c23f4b; } .tc-automation-builder { border-top: 3px solid var(--auto-purple); }.tc-automation-builder-title { align-items: start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }.tc-automation-builder-title > div > span { color: var(--auto-purple); font-size: .62rem; font-weight: 800; letter-spacing: .08em; }.tc-automation-builder-title h6 { font-size: 1rem; margin-top: .1rem; }.tc-automation-builder-title p { color: #7c8392; font-size: .72rem; margin: 0; }.tc-automation-builder .form-label { color: #626a7b; font-size: .7rem; font-weight: 700; margin-bottom: .25rem; } .tc-automation-step { border-top: 1px solid var(--auto-line); margin-top: 1.1rem; padding-top: .9rem; }.tc-automation-step-head { align-items: center; display: flex; gap: .52rem; }.tc-automation-step-head small { color: #8f89aa; display: block; font-size: .6rem; font-weight: 800; letter-spacing: .06em; }.tc-automation-step-head strong { color: #4f5567; font-size: .8rem; }.tc-automation-step-number { align-items: center; background: #ece8ff; border-radius: 50%; color: var(--auto-purple); display: flex; font-size: .7rem; font-weight: 800; height: 25px; justify-content: center; width: 25px; }.tc-automation-optional { color: #979cab; font-size: .63rem; margin-left: auto; }.tc-automation-status-list { display: flex; flex-wrap: wrap; gap: .35rem; }.tc-automation-status-list label { border: 1px solid #e5e4eb; border-radius: 99px; color: #697083; cursor: pointer; font-size: .67rem; padding: .2rem .45rem; }.tc-automation-status-list input { accent-color: var(--auto-purple); margin-right: .15rem; } .tc-automation-check-wide { align-items: center; border: 1px solid #e4e2eb; border-radius: .38rem; color: #6b7280; display: flex; font-size: .65rem; gap: .3rem; height: 38px; justify-content: center; margin-bottom: 0; width: 100%; }.tc-automation-check-wide input { accent-color: var(--auto-purple); } .tc-automation-actions-help { color: #858b99; font-size: .7rem; margin: .5rem 0; }.tc-automation-actions-grid { display: grid; gap: .42rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.tc-automation-action-choice { align-items: center; border: 1px solid #e6e3ed; border-radius: .5rem; cursor: pointer; display: flex; gap: .45rem; min-height: 55px; padding: .42rem; position: relative; transition: border .16s ease, background .16s ease; }.tc-automation-action-choice:hover { border-color: #c9c0f2; }.tc-automation-action-choice.is-selected { background: #f7f5ff; border-color: #9a87ed; }.tc-automation-action-choice input { height: 1px; opacity: 0; position: absolute; width: 1px; }.tc-automation-action-choice > i { align-items: center; background: var(--auto-purple); border-radius: 50%; color: #fff; display: none; font-size: .52rem; height: 15px; justify-content: center; position: absolute; right: .35rem; top: .35rem; width: 15px; }.tc-automation-action-choice.is-selected > i { display: flex; }.tc-automation-action-icon { align-items: center; background: #f0edfc; border-radius: .38rem; color: var(--auto-purple); display: flex; flex: 0 0 29px; height: 29px; justify-content: center; }.tc-automation-action-choice strong { color: #565d6d; display: block; font-size: .68rem; padding-right: .5rem; }.tc-automation-action-choice small { color: #8b91a0; display: block; font-size: .6rem; line-height: 1.15; margin-top: .1rem; } .tc-automation-configurations { background: #faf9ff; border: 1px solid #e9e5fb; border-radius: .65rem; margin-top: 1rem; padding: .8rem; }.tc-automation-config-head { align-items: center; color: var(--auto-purple); display: flex; gap: .48rem; }.tc-automation-config-head > i { font-size: .8rem; }.tc-automation-config-head strong { color: #555c6c; display: block; font-size: .74rem; }.tc-automation-config-head small { color: #8a90a0; display: block; font-size: .64rem; }.tc-automation-action-config { background: #fff; border: 1px solid #eae8f0; border-radius: .5rem; display: none; margin-top: .65rem; padding: .65rem; }.tc-automation-action-config.is-visible { display: block; }.tc-automation-action-config h6 { color: #5c5680; font-size: .72rem; margin-bottom: .5rem; }.tc-automation-action-config h6 i { color: var(--auto-purple); margin-right: .25rem; }.tc-automation-action-config .form-text { color: #8c92a0; font-size: .62rem; }.tc-automation-variables { color: #777184; font-size: .64rem; margin-top: .7rem; }.tc-automation-variables code { color: #6652bd; font-size: .62rem; } .tc-automation-preview { align-items: flex-start; background: #f2f8ff; border: 1px dashed #a9c5ef; border-radius: .55rem; color: #567096; display: flex; gap: .55rem; margin-top: 1rem; padding: .65rem .75rem; }.tc-automation-preview > i { color: #4384d2; margin-top: .1rem; }.tc-automation-preview strong { color: #3e5e87; display: block; font-size: .74rem; }.tc-automation-preview span, .tc-automation-preview p { display: block; font-size: .66rem; margin: .1rem 0 0; }.tc-automation-preview ul { list-style: none; margin: .45rem 0 0; padding: 0; }.tc-automation-preview li { align-items: center; border-top: 1px solid #d9e8fb; display: flex; font-size: .66rem; gap: .4rem; justify-content: space-between; padding: .24rem 0; }.tc-automation-preview li strong { font-size: .67rem; }.tc-automation-preview li span { margin: 0; }.tc-automation-builder-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }.tc-automation-builder-actions .btn { font-size: .77rem; } @media (max-width: 991.98px) { .tc-automation-guide small { border-left: 0; flex-basis: 100%; margin-left: 0; padding-left: 0; }.tc-automation-builder { margin-top: .5rem; } } @media (max-width: 575.98px) { .tc-automation-library .tc-card-body, .tc-automation-builder .tc-card-body { padding: .85rem; }.tc-automation-library-head, .tc-automation-builder-title { flex-direction: column; }.tc-automation-search { max-width: 100%; width: 100%; }.tc-automation-actions-grid { grid-template-columns: 1fr; }.tc-automation-guide > i { display: none; }.tc-automation-builder-actions { flex-direction: column-reverse; }.tc-automation-builder-actions .btn { width: 100%; }.tc-automation-flow { gap: .45rem; }.tc-automation-flow-controls { flex-direction: column; }.tc-automation-flow-controls .dropdown-menu { position: fixed !important; } }